Upload
gosharp
View
71
Download
1
Embed Size (px)
Citation preview
Петр Грибанов, «1С» [email protected]
Бизнес-приложения: эволюция пользовательского интерфейса
из консоли
через окна
в облака
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С» [email protected]