Разработка пользовательского интерфейса для киосков с сенсорным экраном

I. Теория

Примеры

Области применения
Спортивные мероприятия
Выставки и музеи
Банкоматы
Реклама
Продажа товаров и услуг
Кассовые аппараты
Ориентация на местности (в больших зданиях, путеводители по городу)
Транспорт: продажа билетов, справки
Игры и тотализаторы
Системы безопасности
Медицинское оборудование
Управление бытовой техникой

Преимущества киосков
Максимально прямое взаимодействие человека с компьютером – без опосредующих устройств – мыши и клавиатуры
Не требуют обучения (если правильно спроектированы)
Не требуют дополнительного пространства рабочего стола

Недостатки
Габариты пальца диктуют размеры элементов управления – они довольно велики
Последовательный ввод (один палец)
Обычно не используется обычная парадигма «выбор объекта – действие»
Трудности при исправлении ошибочного действия
Нельзя перетаскивать объекты (drag’n’drop)
Рука заслоняет экран при касании
Мышечная усталость при длительной работе

Основные принципы дизайна
Не рассматривайте киоск в качестве компьютера, поскольку пользователь не будет воспринимать его в качестве компьютера
У киоска нет опытных пользователей – все пользователи новички, в том числе не имеющие компьютерного опыта
Обеспечьте высокую скорость работы киоска
Обеспечьте помощь пользователю в максимально возможном объёме
Ограничьте число вариантов выбора на каждом шаге работы с киоском
Минимизируйте текстовый ввод (такой ввод – проблема при работе с киоском)

Организация экрана
Всегда полноэкранный режим
Консистентность цветов и шрифтов
Фиксированные функциональные области (единообразие экранов):
отображение данных
ввод данных
кнопки (особенно навигационные)
статус
EU 450/451
Screen Layout

Элементы управления
Используются:
кнопки
???
Не используются:
курсоры
двойные касания (double click)
перетаскивание (drag’n’drop)
полосы прокрутки
выпадающие меню и списки
чекбоксы (кнопки вместо них)
всплывающие диалоги
множественные окна

Стратегии срабатывания кнопок
Land-on (first contact)
Lift-off (last contact) – Shneiderman & Co
Вариант с использованием курсора
Чувствительная область может быть больше видимого размера кнопки

Шрифты
Без засечек
Можно ограниченно использовать шрифты с засечками для того, чтобы отличить введённые пользователем данные от системных данных
Минимальный размер:
14 pt (Infopolis 2a)
16 pt (Maguire 1999)
Максимальный размер:
48 pt (Infopolis 2a)

Размеры управляющих элементов и расстояние между ними
Минимальный размер:
15 мм (NUREG-0700)
16 мм (MIL-STD-1472F)
19 мм (Galitz 2002)
20 мм (Infopolis 2a)
Максимальный размер:
38 мм (MIL-STD-1472F)
40 мм (NUREG-0700)
Минимальное расстояние:
3 мм (Galitz 2002, NUREG-0700, MIL-STD-1472F)
Максимальное расстояние:
6 мм (NUREG-0700, MIL-STD-1472F)

Время реакции
≤ 100 мсек (MIL-STD-1472F)
Индикация в виде часов или прогресс-бара для запросов, требующих длительного времени выполнения
Медленная реакция киоска провоцирует вандализм
Обратная связь в виде трёхмерных эффектов для кнопок и звуковое подтверждение касаний («кликов»)

Графика
Привлекательный внешний вид
Яркие цвета и светлый текстурированный фон
Исследование предпочтений пользователей
Практические соображения
Стандартное экранное разрешение для 17”-экранов: 1280 * 1024

Первый экран
Цель: привлечь внимание пользователя и побудить его начать работу с киоском
Содержит приглашение начать работу
Анимация (например, демо-ролик по работе с киоском)
Звук (если не мешает)
Автоматический возврат, если нет активности пользователя

Средства разработки

Физическая эргономика и факторы среды

II. Пример разработки:
Киоск «Аэрофлота»

До дизайна

Бумажный прототип

HTML-прототип

Первый экран

Пассажиры

Маршрут

Календарь

Поиск рейсов

Варианты рейсов

Имя пассажира

Завершение работы

III. Первоисточники

Стандарты и нормативы
[SAP] Waloszek G. (2000) Interaction Design Guide for Touchscreen Applications, SAP
относиться с осторожностью
[Infopolis 2a] European Task Force INPUT & Infopolis 2 (2002) Design Guidelines for Information Kiosks in Travel Centres, Helsinki: Ministry of Transport and Communications
[NUREG-0700] O’Hara J. M., Brown W. S., Lewis P. M. & Persensky J. J. (2002) Human-System Interface Design Review Guidelines (NUREG-0700, Rev. 2), Washington: US Nuclear Regulatory Commission
[MIL-STD-1472F] Department of Defense (1999) Department of Defense Design Criteria Standard: Human Engineering (MIL-STD-1472F), Washington: Department of Defense

Основная литература
[Maguire 1999] Maguire M. C. (1999) A review of user-interface design guidelines for public information kiosk systems, International Journal of Human-Computer Studies, 50, 263-286
[Cooper 2003] Cooper A. & Reimann R. (2003) About Face 2.0, Indianapolis: Wiley
Chapter 38: Designing for Embedded Systems
[Elo 2002] Elo TouchSystems (2002) Keys to a Successful Kiosk Application PowerPoint presentation
[Infopolis 2b] Meriaux A. (2000) Guidelines for information systems (Infopolis 2 Deliverable 2)

Дополнительная литература
[Galitz 2002] Galitz W. O. (2002) The Essential Guide to User Interface Design (2nd Ed.), New York: Wiley
Step 6 – Select the Proper Device-Based Controls
[Coveney] Coveney R., Designing for Touch-Screen Kiosks
(at infocentre.frontend.com)
[Lee 1997] Lee A. T. (1997) The Human Factors of Touch Input Devices (Technical Report BRI-TR-130997), Los Gatos: Beta Research
[Sears 1991] Sears A. & Shneiderman B. (1991) High precision touchscreens: Design strategies and comparisons with a mouse, International Journal of Man-Machine Studies, 34 (4), 593-613