ݺߣ

ݺߣShare a Scribd company logo

Проектирование пользовательского интерфейса сенсорных киосков

•
•
Ivan Burmistrov
Ivan Burmistrov

Доклад на 7-м семинаре RusCHI (Москва, 31 октября 2005)

Convert to study guideBETA

Transform any presentation into a summarized study guide, highlighting the most important points and key insights.

1 of 34
Downloaded 19 times
Разработка пользовательского интерфейса для киосков с сенсорным экраном Иван Бурмистров
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. Пример разработки: Киоск «Аэрофлота»
До дизайна
Бумажный прототип
ղѳ-прототип
Первый экран
Пассажиры
Маршрут
Календарь
Поиск рейсов
Варианты рейсов
Имя пассажира
Завершение работы
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
Спасибо за внимание! Контакт: Иван Бурмистров ivan@interux.ru Подборка первоисточников: www.sigchi.ru/Seminars/07/Kiosks.zip

More Related Content

Проектирование пользовательского интерфейса сенсорных киосков

  • 4. Области применения ◊ Спортивные мероприятия ◊ Выставки и музеи ◊ Банкоматы ◊ Реклама ◊ Продажа товаров и услуг ◊ Кассовые аппараты ◊ Ориентация на местности (в больших зданиях, путеводители по городу) ◊ Транспорт: продажа билетов, справки ◊ Игры и тотализаторы ◊ Системы безопасности ◊ Медицинское оборудование ◊ Управление бытовой техникой
  • 5. Преимущества киосков ◊Максимально прямое взаимодействие человека с компьютером – без опосредующих устройств – мыши и клавиатуры ◊Не требуют обучения (если правильно спроектированы) ◊Не требуют дополнительного пространства рабочего стола
  • 6. Недостатки ◊ Габариты пальца диктуют размеры элементов управления – они довольно велики ◊ Последовательный ввод (один палец) ◊ Обычно не используется парадигма «выбор объекта – действие» ◊ Трудности при исправлении ошибочного действия ◊ Нельзя перетаскивать объекты (drag’n’drop) ◊ Рука заслоняет экран при касании ◊ Мышечная усталость при длительной работе
  • 7. Основные принципы дизайна ◊ Не рассматривайте киоск в качестве компьютера, поскольку пользователь не будет воспринимать его в качестве компьютера ◊ У киоска нет опытных пользователей – все пользователи новички, в том числе не имеющие компьютерного опыта ◊ Обеспечьте высокую скорость работы киоска ◊ Обеспечьте помощь пользователю в максимально возможном объёме ◊ Ограничьте число вариантов выбора на каждом шаге работы с киоском ◊ Минимизируйте текстовый ввод (такой ввод – проблема при работе с киоском)
  • 8. Организация экрана ◊ Всегда полноэкранный режим ◊ Консистентность цветов и шрифтов ◊ Фиксированные функциональные области (единообразие экранов): ◊ отображение данных ◊ ввод данных ◊ кнопки (особенно навигационные) ◊ статус EU 450/451 Screen Layout
  • 9. Элементы управления Используются: ◊ кнопки ◊ ??? Не используются: ◊ курсоры ◊ двойные касания (double click) ◊ перетаскивание (drag’n’drop) ◊ полосы прокрутки ◊ выпадающие меню и списки ◊ чекбоксы (кнопки вместо них) ◊ всплывающие диалоги ◊ множественные окна
  • 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. Первый экран ◊Цель: привлечь внимание пользователя и побудить его начать работу с киоском ◊Содержит приглашение начать работу ◊Анимация (например, демо-ролик по работе с киоском) ◊Звук (если не мешает) ◊Автоматический возврат, если нет активности пользователя
  • 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] 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
  • 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, 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)
  • 33. Дополнительная литература ◊ [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
  • 34. Спасибо за внимание! Контакт: Иван Бурмистров ivan@interux.ru Подборка первоисточников: www.sigchi.ru/Seminars/07/Kiosks.zip