Дизайн устройств самообслуживания: что учесть до первого макета
Кладёте яблоки на весы, на экране открывается каталог. Пока ищете нужный сорт, пакет начинает съезжать с платформы, а сзади собирается очередь. В этот момент касса должна помочь выбрать товар, подтвердить, что она его добавила, и подсказать, что делать дальше. Удачную кнопку легко нарисовать. Труднее понять, где человек её увидит и сможет ли нажать, пока придерживает пакет.
Я предлагаю начать проектирование с одного обычного сценария и пройти его там, где будет стоять устройство. Посмотрите, куда человек ставит вещи, когда переводит взгляд на экран и в какой момент зовёт сотрудника. Из такого наблюдения можно собрать требования к интерфейсу, которые трудно сформулировать за столом.
Что отличает кассу, банкомат и инфокиоск от мобильного экрана
Телефон можно поднять ближе к глазам, отвернуть от света или взять в другую руку. Касса, банкомат и инфокиоск установлены на определённой высоте и под определённым углом. Человек подходит к ним с покупками, картой или билетом и делит внимание между экраном, устройством и тем, что происходит вокруг.
Устройство самообслуживания позволяет человеку выполнить операцию самостоятельно. На кассе он сканирует и оплачивает товары, в банкомате снимает наличные, в инфокиоске ищет нужный кабинет или получает талон. В каждом случае свои действия за пределами экрана. Например, банкомат должен вовремя подсказать, в каком отверстии появится карта, а билетомат — что делать, если печать занимает время.
Чтобы увидеть эти переходы, запишите в три колонки, что делает человек, что в это время делает оборудование и что сообщает экран. В условном примере с яблоками человек кладёт пакет на весы, устройство ждёт стабильного показания, экран подсказывает, когда можно продолжить. Если на весах уже лежит другой товар, нужно решить, как касса поможет покупателю разобраться.
Четыре ограничения, которые меняют интерфейс
Среда и очередь
Представьте два одинаковых инфокиоска. Один стоит в тихом холле, другой — напротив окна у входа, где люди спешат и спрашивают дорогу. На втором экран видно с другого угла, а звуковую подсказку легко пропустить. У банкомата добавляется вопрос приватности: насколько хорошо экран виден человеку, который стоит в очереди за вами?
Если место уже выбрано, подойдите к устройству со стороны обычного потока людей. Посмотрите, откуда виден первый экран и где человек остановится, чтобы освободить руки. На кассе проверьте, понятно ли с первого взгляда, как начать покупку. В инфокиоске прочитайте варианты так, как их прочитал бы посетитель, который впервые пришёл в здание. Ему проще выбрать «Записаться на приём», чем разбираться, за какой услугой закреплено конкретное окно.
Положение человека и физические действия
При сканировании товара взгляд то и дело уходит с экрана. Покупатель ищет штрихкод, подносит упаковку к сканеру и перекладывает её на платформу. Если подтверждение о добавлении появляется на дальнем краю большого дисплея, его легко пропустить. Человек может поднести ту же упаковку к сканеру ещё раз, потому что не понял, приняла ли её касса.
Проверьте, куда удобно тянуться при обычной позе. Если перед устройством есть полка или весовая платформа, поставьте её на место до примерки кнопок. Попробуйте совершить действие одной рукой, оставив вторую занятой. На большом экране бывает полезно держать важное сообщение рядом с той зоной, куда человек смотрит после сканирования. Это место проще найти у собранного устройства, когда можно повторить движение с товаром.
Экран, сенсор и возможности оборудования
Уточните модель экрана, разрешение и способ ввода. Попросите у поставщика доступ к устройству или возможность показать на нём пробный экран. Проверьте его на расстоянии, с которого будет стоять человек, и при освещении, похожем на рабочее. Тонкая линия вокруг кнопки может быть заметна на мониторе дизайнера и почти исчезнуть на дисплее терминала. На сенсоре стоит отдельно попробовать повторяющиеся нажатия и соседние кнопки, между которыми легко промахнуться.
Разберите с инженером, какие сигналы получает интерфейс от оборудования. Что касса знает после сканирования? В какой момент банкомат может сообщить, что карта готова к выдаче? Если действие занимает время, человеку полезно видеть, что запрос принят и что ему сейчас делать. Состояния ожидания, подтверждения и сбоя лучше включить в сценарий до того, как команда разложит работу по экранам.
Доступность и помощь
Человек может впервые видеть такой терминал, плохо различать оттенки или пользоваться устройством сидя. Посмотрите, можно ли прочитать инструкции и дотянуться до главной кнопки в этих ситуациях. Для важного сообщения используйте цвет вместе с коротким текстом. Например, если после сканирования покупатель держит товар в руке, рядом со значком ошибки может появиться подсказка «Положите товар на платформу». Если для продолжения нужен сотрудник, покажите, как его позвать. Если система умеет подтверждать вызов, дайте человеку знать, что он принят.
В проекте банкоматов сети СБС команда проверяла цветовые решения на тестовом банкомате и отдельно смотрела, какие оттенки сливаются при симуляции нарушений цветовосприятия. Первое помогло увидеть, как палитру передаёт конкретный дисплей. Второе — найти пары цветов, которые могут оказаться неразличимыми. Для нового устройства добавьте к этим проверкам прохождение сценария с людьми, чьи условия использования вы учитываете. Как проверяли различимость сигналов для банкоматов СБС.
Что узнать о своём устройстве до проектирования
Возьмите один частый сценарий, например покупку товара без штрихкода, и один случай, когда что-то идёт не по плану. Заполните таблицу вместе с человеком, который отвечает за оборудование или работу точки. Если ответа пока нет, отметьте, где его получить.
| Что учесть | Где может возникнуть проблема | Что спросить или проверить |
|---|---|---|
| Размеры корпуса и установка | Макет выглядит убедительно на мониторе, а текст на устройстве читается хуже | Можно ли показать черновой экран на дисплее в натуральную величину и проверить его с обычной дистанции? |
| Полка, сканер и зона касания | До ключевой кнопки приходится тянуться через корпус или покупки | Где человек стоит и куда может дотянуться одной рукой, в том числе сидя? |
| Свет и шум | Блики скрывают текст, звуковой сигнал теряется | Видно ли главное сообщение при рабочем свете? Понятно ли оно без звука? |
| Отклик оборудования | Человек успевает повторить действие, пока устройство обрабатывает первое | Когда интерфейс узнаёт, что товар добавлен, карта считана или билет напечатан? Что показываем в ожидании? |
| Разные комплектации | На экране появляется шаг для оборудования, которого на точке нет | Какие модели и конфигурации будут в работе? Где меняются действия человека и подсказки? |
| Цвет и текст | Успех и ошибка различаются только оттенком | Можно ли понять, что случилось и как продолжить, по тексту и форме элементов? |
| Сбой и помощь | Операция прерывается, человек остаётся перед экраном и ждёт | Кто подключается, как его вызвать и что произойдёт с текущей операцией? |
Как мы проверяли масштаб на кассе CSI K
В проекте CSI K мы начали с наблюдений за покупателями в магазинах. Потом клиент привёз кассу в офис. Мы поставили её примерно на той высоте, на которой она стояла бы в торговом зале. Недостающие платформы заменили мебелью. Прототип вывели на дисплей и прошли покупку с товарами в руках.
В этой обстановке стало проще оценить расстояние до кнопок и размер текста. Обнаружились и блики. Тёмный фон визуально уменьшал большой дисплей, но отражения на нём мешали читать. В следующих вариантах мы перешли к светлой основе и уточнили размеры важных элементов. Для конкретной кассы это решение появилось из проверки на устройстве. На другом экране, под другим углом и при другом освещении выбор может быть иным. Проверка прототипов на реальной кассе CSI K.
Даже если корпус ещё в производстве, часть вопросов можно снять на стенде в натуральную величину. Обозначьте высоту и наклон дисплея, поставьте на место полку и сканер, если они предусмотрены, и пройдите операцию с реальным предметом в руках. Когда будет доступен образец, отдельно проверьте то, что зависит от техники: отклик сенсора, читаемость при бликах и задержки между физическим действием и сообщением на экране.
Что передать команде на первом разговоре
- Модель и комплектацию устройства. Если выбор ещё открыт, пришлите список вариантов.
- Два-три частых сценария и один случай, когда операция прерывается или требуется сотрудник.
- Фото или схему места установки. Полезно увидеть высоту экрана, свет, подход к устройству и место для вещей.
- Известные ошибки и ограничения. Например, оборудование уже закуплено или часть точек работает с другой комплектацией.
Если у вас есть задача, которую можно описать на примере одной покупки или операции, пришлите её. На странице услуги собрали примеры того, как мы проектируем кассы, банкоматы и терминалы. Дизайн интерфейсов банкоматов и терминалов.
