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

I. Теория

Примеры

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

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

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

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

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

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

Стратегии срабатывания кнопок 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] OHara 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, [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 (2 nd 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 ), 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),

Спасибо за внимание! Контакт: Иван Бурмистров Подборка первоисточников: sigchi.ru/Seminars/07/Kiosks.zip