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

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

2 I. Теория

3 Примеры

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

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

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

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

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

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

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

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

12 Размеры управляющих элементов и расстояние между ними Минимальный размер: 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)

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

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

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

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

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

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

19 До дизайна

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

21 HTML-прототип

22 Первый экран

23 Пассажиры

24 Маршрут

25 Календарь

26 Поиск рейсов

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

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

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

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

31 Стандарты и нормативы [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

32 Основная литература [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)

33 Дополнительная литература [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),

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