Бизнес-приложения являются одним из самых массовых типов программного обеспечения; многие из людей проводят бОльшую часть своего дня, работая с ERP, CRM и другими программами, обслуживающими жизненный цикл предприятия. Как сделать программу, которая поддерживает сложные бизнес-процессы, простой в использовании? Чем можно пожертвовать ради удобства пользователя? На примере 1С мы рассмотрим, как эволюционировал пользовательский интерфейс деловых приложений со времен DOS до наших дней, какие методики используются для улучшения юзабилити.

1. Петр Грибанов, «1С» grip@1c.ru
Бизнес-приложения: эволюция
пользовательского интерфейса
из консоли
через окна
в облака

2. 1C: средства разработки & программы
n Типичный продукт
§ 10…20 решений от вендора
§ 10…20 решений от партнеров
n 1С
§ 100 решений от 1С
§ 1C:ERP
§ 1100 решений от партнеров
n 1С – разработка
§ RAD = Rapid Application Development
§ eDSL = embedded Domain Specific Language
2
Частота использования ERP*
*Количество пользователей системы, данные РБК Research, 2014

3. 1С: кросс-платформенность
3
Java: Write once, run anywhere!
…where Java VM exists
1C: Напиши конфигурацию один раз, запускай везде
где есть платформа 1С

4. 1С = Платформа + Конфигурации
4
База данных
Сервер приложений
Клиент
Платформа
1С:Предприятие
Бухгалтерия
Управление
торговлей
ERP

5. 1С = Платформа + Конфигурации
5
База данных
Сервер приложений
Клиент

6. 1С = Платформа + Конфигурации
6
База данных
Клиент

7. 1С = Платформа + Конфигурации
7
База данных

8. 1С в облаке
8
База данных
1cFresh

9. Эволюция UI
ПРИСТУПИМ!
9

10. На заре
10

11. На заре
11

12. Tabs/Закладки
12

13. NumPad + <Enter>
13
Переход
между
полями
ввода по
<Enter>

14. Юзабилити
14

15. Почему юзабилити
n Это важно для наших клиентов
§ Эффективность сотрудников
§ Количество человеческих ошибок
§ Скорость обучения
§ Понятность менеджементу
n Это важно для нас
§ Сокращает сроки работ
15

16. В начале пути (~2000 г.)
16
n Слева – меню, справа – рабочая область
n MDI

17. Стратегии
n Developer-driven
§ Переосмысление интерфейса
§ Опыт конкурентов
§ «Революция сверху»: Интерфейс «Такси»
n User-driven
§ Анкетирование
§ Юзабилити-тесты
17

18. Опыт конкурентов
n Oracle eBusiness Suite
n SAP
n MS CRM
n MS Dynamics NAV
n MS Dynamics AX
n MS Dynamics GP
n Small Business Accounting
n MS Money
n Small Business Finance
n Sage 50 Accounting
n MS Share Point
n ВС Предприятие
n Эльба
n СвоёДело
n Epicor
n iScala
n …
18

19. Переосмысление интерфейса
n Наглядная навигация
n Легко доступные команды
n Простые и понятные формы
n Сервисные возможности
19
Задачеориентированный
интерфейс –
удобная среда для того, чтобы
сконцентрироваться на решении
конкретной задачи

20. Концепция рабочего стола
20
Это – элемент
управления
Иконки
и схемы работы
Нет зияющей
пустоты

21. 21

22. 22
Навигация в главном окне
n Навигацию обеспечивают
§ Панель разделов
§ Панель навигации
§ Панель действий
n Главная задача
§ Быстро найти то, что сейчас нужно
§ Быстро вернуться в контекст
n Пользователь видит только то, что видит
§ Содержимое панелей должно помещаться
в экран с учетом ролей, прав и личных настроек

23. 23
Верхнее меню
n Основные команды приложения

24. 2424
Панель разделов
n Разделы
§ Подсистемы первого уровня
§ Устойчивые режимы работ
n Важно подобрать и разработать разделы так, чтобы
пользователю не захотелось их покидать
§ Например, пользователь занимается продажами – для
него предназначен раздел «Продажи», в котором есть
все, что должно быть «под рукой»
§ Панель навигации
§ Панель действий

25. 2525
Панель навигации
n Содержит команды перехода
§ К подсистемам
§ К спискам
§ Специальные переходы
n Визуально разделена на три секции
§ Важное
§ Например микрорабочие места
§ Обычное
§ Переходы к основным спискам
§ См. также
§ Переходы к спискам, которые напрямую не относятся
к выбранному разделу, но должны быть «под рукой»
n Сортируется по алфавиту

26. 2626
Панель действий
n Показывает команды выбранного раздела и всех
его подсистем по группам
§ Создать
§ Отчеты
§ Обработки
n Тексты команд в группе «Создать» формируются
из представлений объекта метаданных (в ед.
числе)

27. 2727
Шапка
n Команды рабочей области

28. 2828
Подвал
n История команд и документов
n Избранное

29. 2929
Рабочая область (<= 50% окна)

30. Юзабилити-тестирование
30
n Эксперимент для оценки качества, выявления проблем,
проверки гипотез
§ Наблюдение за выполнением тестовых заданий в ситуации,
близкой к реальной

31. Юзабилити-лаборатория
31

32. Результаты Ю-Тестирования
n Отчет в цифрах
§ Время выполнения
§ Количество человеческих ошибок
§ Успешность выполнения
§ Удовлетворенность
n Таблица по гипотезам
n Список наблюдений и предложений
32

33. Что дальше
n Тестируем
n Анализируем
n Устраняем проблемы
n Повторно тестируем
n Анализируем достижения
n Отражаем в стандартах
разработки
33

34. Eye-tracker
n Прибор для записи движения глаз
n Более точная (по сравнению с обычным ю-тестированием)
картина, как пользователь взаимодействует с интерфейсом
n Запись движения глаз по экрану в виде изображений и таблиц:
§ тепловые карты
§ траектории движения
§ кластеры
§ области интереса
34

35. Eye-tracker в 1С
35

36. Тепловые карты
n Визуализация пользовательского внимания, уделяемого
областям экрана.
§ Незначительное по времени внимание - зелёным
§ Значительное - красным
§ Альтернативный вид: видимое отображается, не видимое не
отображается
n Что физически видит пользователь в процессе работы, а чего
не видит?
36

37. Тепловые карты – пример 1
37
Пример 1. Задача пользователя – ответить по скольким
критериям есть основания для налоговой проверки.
Это указано прямым текстом в заголовке.

38. Тепловые карты – пример 1
38
Пример 1. Пользователь неправильно отвечает и при этом не
видит текст заголовка физически.
Вывод: заголовок как место размещения информации в данном
случае мало полезен.

39. Тепловые карты – пример 2
39
Пример 2. Задача пользователя – распечатать накладную на
основе счета. Это возможно сделать, создав на основании
«Реализацию товаров и услуг».

40. Тепловые карты – пример 2
40
Пример 2. Пользователь не может выполнить задание. При
этом взгляд не раз падает на команду «Реализация товаров и
услуг», но что эта команда нужна – не считывается.
Вывод: размещение приемлемое, но формулировка может быть
непонятна.

41. Тепловые карты – пример 3
41
Пример 3. Пользователь создает новый счет на оплату услуг
путем копирования старого счета (на оплата товара).
Чтобы корректно указать услугу, ему надо сменить вкладку
Товары на вкладку Услуги.

42. Тепловые карты – альтернативный вид
42
Пример 3. Применим альтернативный способ визуализации
тепловых карт – отображая только то, что пользователь видит (и
затеняя остальное). На тепловой карте заметно, что вкладки
Товары и Услуги попадают в поле зрения.
При этом пользователь не осознает, что надо сменить Товары на
Услуги.
Вывод: размещение приемлемое, но понимания необходимости
смены вкладок отсюда не следует.

43. Траектории движения взгляда
n Каким путем, в какой последовательности пользователь будет
искать некую информацию на экране?
n Основываются на эффекте того, что движение глаз человека
происходит не плавно, а дискретно, от точки фиксации
внимания к следующей.
n Номером обозначается порядок фиксации взгляда в процессе
движения, размером круга обозначается время фиксации.
43

44. Траектории движения взгляда - пример
44
Пользователю поставлена задача – добавить форму в
Избранное.
Проследим порядок поиска звездочки, по клику на которой
происходит добавление формы в Избранное.

45. 45
Траектории движения взгляда - пример
Порядок движения глаз пользователя:
сначала левая часть первых двух строк панели управления,
затем средняя часть третьей строки панели управления,
затем средняя часть первой строки,
и, наконец, искомая звездочка.
Вывод: взгляд движется в основном в пределах верхней левой
части панели управления, примерно там, где и находится
звездочка.

46. Кластеры
n Объединение точек, к которым приковано внимание
пользователей в процессе выполнения задания, в крупные
значимые блоки
n Отвечают на вопрос: в какой области, блоке экрана
пользователи ищут что-либо
46

47. Кластеры - пример
47
Пример. Пользователю поставлена задача – добавить форму в
Избранное.
Проследим порядок поиска звездочки (обведена красным), по
клику на которой происходит добавление формы в Избранное.

48. Кластеры - пример
48
Вывод тот же, что и в предыдущем примере (но с другой
визуализацией): взгляд движется в основном в пределах
верхней левой части панели управления, примерно там, где и
находится звездочка.

49. Области интереса
n Статистические данные по вниманию пользователей к
заданной области экрана
n Отвечают на вопрос: сколько времени понадобится
пользователю, чтобы заметить некую информацию или
осуществить действие
49

50. Области интереса - пример
50
Пример. Пользователю дано задание добавить форму в
Избранное (нужно кликнуть на звездочку). Сколько времени от
начала выполнения задания понадобится пользователям,
чтобы добавить в Избранное? Выделяем интересующую нас
область интереса прямоугольником.

51. Области интереса - пример
51
0:04:46
0:04:22
0:02:24
0:01:58 0:01:53
0:03:05
Респондент 5 Респондент 4 Респондент 3 Респондент 1 Респондент 2 В среднем
Собираем статистику по выделенной области: через какой
промежуток времени пользователи кликнули по ней.
В среднем пользователям понадобилось более 3 минут, чтобы
добавить в Избранное.
Максимальное значение достигало более 4,5 минут.
Вывод: для добавления в Избранное пользователям требуется
достаточно много времени.

52. Eye-tracker in action!
52

53. Developer driven UI changes: “Такси”
n Расширение аудитории
§ Выход в Web (в том числе в «облака»)
§ ERP: от бухгалтеров к мастерам на производстве
n Надо: снизить «порог вхождения» в систему
53

54. Сложности в текущем UI
СЛОЖНО:
n Найти необходимое:
команду в панели, пункт в меню, строку в списке
n Найти данные:
введенный вчера заказ, накладную конкретного покупателя
n Сделать выбор в поле ввода:
мало используется поиск при вводе, форма выбора рассеивает
внимание
n Попасть мышью в мелкие элементы интерфейса:
кнопки в командной панели, кнопки навигации в календаре, …
54

55. UI – задачи
НАДО:
n Улучшение возможностей навигации
n Настраиваемое рабочее пространство
n Улучшение юзабилити элементов интерфейса
n Новый дизайн
55

56. «Такси»
n Улучшение навигации
§ Данные и команды как можно ближе к пользователю
§ Пользователь всегда сможет найти свои данные
n История
§ Вместо истории изменений – история открытий
§ Разделить записи по датам
§ Удобный поиск
56

57. «Такси»
Избранное
n Добавлять не только данные, но и команды
n Добавление в «один клик» из любого места – форма, меню,
история, …
n Поиск в избранном
n Панель избранного с возможностью фиксации
57

58. «Такси»
Полнотекстовый поиск
n ВЕЗДЕ
n Улучшили быстродействие и релевантность
58

59. «Такси»
n Панель инструментов:
§ Меню функций
§ Избранное
§ История
§ Поиск
n Меню: наглядность восприятия большого числа команд
n Быстрый доступ к начальной странице
n Альтернативная навигация по открытым формам: Вперед/
Назад
59

60. «Такси»
Рабочее пространство пользователя
n Каждое «рабочее место» уникально
§ Различные размеры мониторов
§ Задачи, выполняемые пользователем
60

61. «Такси»
Юзабилити поля ввода
n Отображается:
§ Недавно введенные
§ «Добавить новое»
§ «Показать всё»
61

62. 6262
Пример документа Реализация
товаров (УФ)
Шапка документов по 6-7 строк
Подвал документов по 3-4 строки
Много командНесколько вкладок

63. 6363
Пример документа Реализация
товаров (Такси) – без
переделки
Добавилась
строка шапки
Подвал «ушел»..
Команды
«спрятались»

64. Приятные мелочи – функция «Что нового?»
n Раньше: список «Что нового появилось в программе…»
n Сейчас: контекстная подсказка
64
Возможность ввода
сложных статусов.
Подробнее здесь.

65. Приятные мелочи – поиск по меню
65

66. Эволюция интерфейса
1С:Предприятия
n 7.7
n 8.0
n 8.1
n 8.2
n 8.3
66

67. Версия 7.7
67

68. Версия 8.0
68

69. Версия 8.1
69

70. Версия 8.2
70

71. Версия 8.3 «Такси»
71

72. Спасибо за внимание!
Петр Грибанов, «1С» grip@1c.ru