Петр Грибанов, «1С» grip@1c.ru

Бизнес-приложения: эволюция пользовательского интерфейса

из консоли

через окна

в облака

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

1С: кросс-платформенность

3

Java: Write once, run anywhere!

…where Java VM exists

1C: Напиши конфигурацию один раз, запускай везде

где есть платформа 1С

1С = Платформа + Конфигурации

4

База данных

Сервер приложений

Клиент Платформа

1С:Предприятие

Бухгалтерия

Управление торговлей

ERP

1С = Платформа + Конфигурации

5

База данных

Сервер приложений

Клиент

1С = Платформа + Конфигурации

6

База данных

Клиент

1С = Платформа + Конфигурации

7

База данных

1С в облаке

8

База данных

1cFresh

Эволюция UI

ПРИСТУПИМ!

9

На заре

10

На заре

11

Tabs/Закладки

12

NumPad + <Enter>

13

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

Юзабилити

14

Почему юзабилити

n  Это важно для наших клиентов

§  Эффективность сотрудников §  Количество человеческих ошибок

§  Скорость обучения

§  Понятность менеджементу

n  Это важно для нас

§  Сокращает сроки работ

15

В начале пути (~2000 г.)

16

n  Слева – меню, справа – рабочая область

n  MDI

Стратегии

n  Developer-driven

§ Переосмысление интерфейса

§ Опыт конкурентов

§  «Революция сверху»: Интерфейс «Такси»

n  User-driven

§  Анкетирование

§ Юзабилити-тесты

17

Опыт конкурентов

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

Переосмысление интерфейса

n  Наглядная навигация

n  Легко доступные команды

n  Простые и понятные формы

n  Сервисные возможности

19

Задачеориентированный интерфейс –

удобная среда для того, чтобы сконцентрироваться на решении

конкретной задачи

Концепция рабочего стола

20

Это – элемент управления

Иконки и схемы работы

Нет зияющей пустоты

21

22

Навигация в главном окне

n  Навигацию обеспечивают

§  Панель разделов §  Панель навигации

§  Панель действий

n  Главная задача

§  Быстро найти то, что сейчас нужно

§  Быстро вернуться в контекст

n  Пользователь видит только то, что видит

§  Содержимое панелей должно помещаться в экран с учетом ролей, прав и личных настроек

23

Верхнее меню

n  Основные команды приложения

24 24

Панель разделов

n  Разделы

§  Подсистемы первого уровня

§  Устойчивые режимы работ

n  Важно подобрать и разработать разделы так, чтобы пользователю не захотелось их покидать

§  Например, пользователь занимается продажами – для него предназначен раздел «Продажи», в котором есть все, что должно быть «под рукой»

§  Панель навигации

§  Панель действий

25 25

Панель навигации

n  Содержит команды перехода

§  К подсистемам

§  К спискам

§  Специальные переходы

n  Визуально разделена на три секции

§  Важное §  Например микрорабочие места

§  Обычное §  Переходы к основным спискам

§  См. также §  Переходы к спискам, которые напрямую не относятся к выбранному разделу, но должны быть «под рукой»

n  Сортируется по алфавиту

26 26

Панель действий

n  Показывает команды выбранного раздела и всех его подсистем по группам

§  Создать

§  Отчеты

§  Обработки

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

27 27

Шапка

n  Команды рабочей области

28 28

Подвал

n  История команд и документов

n  Избранное

29 29

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

Юзабилити-тестирование

30

n  Эксперимент для оценки качества, выявления проблем, проверки гипотез

§  Наблюдение за выполнением тестовых заданий в ситуации, близкой к реальной

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

31

Результаты Ю-Тестирования

n  Отчет в цифрах

§  Время выполнения

§  Количество человеческих ошибок

§  Успешность выполнения

§  Удовлетворенность

n  Таблица по гипотезам

n  Список наблюдений и предложений

32

Что дальше

n  Тестируем

n  Анализируем

n  Устраняем проблемы

n  Повторно тестируем

n  Анализируем достижения

n  Отражаем в стандартах разработки

33

Eye-tracker

n  Прибор для записи движения глаз

n  Более точная (по сравнению с обычным ю-тестированием) картина, как пользователь взаимодействует с интерфейсом

n  Запись движения глаз по экрану в виде изображений и таблиц:

§  тепловые карты

§  траектории движения

§  кластеры

§  области интереса

34

Eye-tracker в 1С

35

Тепловые карты

n  Визуализация пользовательского внимания, уделяемого областям экрана.

§  Незначительное по времени внимание - зелёным

§  Значительное - красным

§  Альтернативный вид: видимое отображается, не видимое не отображается

n  Что физически видит пользователь в процессе работы, а чего не видит?

36

Тепловые карты – пример 1

37

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

Тепловые карты – пример 1

38

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

Тепловые карты – пример 2

39

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

Тепловые карты – пример 2

40

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

Вывод: размещение приемлемое, но формулировка может быть непонятна.

Тепловые карты – пример 3

41

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

Тепловые карты – альтернативный вид

42

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

Траектории движения взгляда

n  Каким путем, в какой последовательности пользователь будет искать некую информацию на экране?

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

n  Номером обозначается порядок фиксации взгляда в процессе движения, размером круга обозначается время фиксации.

43

Траектории движения взгляда - пример

44

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

45

Траектории движения взгляда - пример

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

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

Кластеры

n  Объединение точек, к которым приковано внимание пользователей в процессе выполнения задания, в крупные значимые блоки

n  Отвечают на вопрос: в какой области, блоке экрана пользователи ищут что-либо

46

Кластеры - пример

47

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

Кластеры - пример

48

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

Области интереса

n  Статистические данные по вниманию пользователей к заданной области экрана

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

49

Области интереса - пример

50

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

Области интереса - пример

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 минут. Вывод: для добавления в Избранное пользователям требуется достаточно много времени.

Eye-tracker in action!

52

Developer driven UI changes: “Такси”

n  Расширение аудитории

§  Выход в Web (в том числе в «облака»)

§  ERP: от бухгалтеров к мастерам на производстве

n  Надо: снизить «порог вхождения» в систему

53

Сложности в текущем UI

СЛОЖНО:

n  Найти необходимое: команду в панели, пункт в меню, строку в списке

n  Найти данные: введенный вчера заказ, накладную конкретного покупателя

n  Сделать выбор в поле ввода: мало используется поиск при вводе, форма выбора рассеивает внимание

n  Попасть мышью в мелкие элементы интерфейса: кнопки в командной панели, кнопки навигации в календаре, …

54

UI – задачи

НАДО:

n  Улучшение возможностей навигации

n  Настраиваемое рабочее пространство

n  Улучшение юзабилити элементов интерфейса

n  Новый дизайн

55

«Такси»

n  Улучшение навигации

§  Данные и команды как можно ближе к пользователю

§  Пользователь всегда сможет найти свои данные

n  История

§  Вместо истории изменений – история открытий

§  Разделить записи по датам

§  Удобный поиск

56

«Такси»

Избранное

n  Добавлять не только данные, но и команды

n  Добавление в «один клик» из любого места – форма, меню, история, …

n  Поиск в избранном

n  Панель избранного с возможностью фиксации

57

«Такси»

Полнотекстовый поиск

n  ВЕЗДЕ

n  Улучшили быстродействие и релевантность

58

«Такси»

n  Панель инструментов:

§  Меню функций

§  Избранное

§  История

§  Поиск

n  Меню: наглядность восприятия большого числа команд

n  Быстрый доступ к начальной странице

n  Альтернативная навигация по открытым формам: Вперед/Назад

59

«Такси»

Рабочее пространство пользователя

n  Каждое «рабочее место» уникально

§  Различные размеры мониторов

§  Задачи, выполняемые пользователем

60

«Такси»

Юзабилити поля ввода

n  Отображается:

§  Недавно введенные

§  «Добавить новое»

§  «Показать всё»

61

62 62

Пример документа Реализация товаров (УФ)

Шапка документов по 6-7 строк

Подвал документов по 3-4 строки

Много команд Несколько вкладок

63 63

Пример документа Реализация товаров (Такси) – без переделки

Добавилась строка шапки

Подвал «ушел».. Команды

«спрятались»

Приятные мелочи – функция «Что нового?»

n  Раньше: список «Что нового появилось в программе…»

n  Сейчас: контекстная подсказка

64

Возможность ввода сложных статусов. Подробнее здесь.

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

65

Эволюция интерфейса 1С:Предприятия

n  7.7

n  8.0

n  8.1

n  8.2

n  8.3

66

Версия 7.7

67

Версия 8.0

68

Версия 8.1

69

Версия 8.2

70

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

71

Спасибо за внимание!

Петр Грибанов, «1С» grip@1c.ru