Квеструм по ашановски (ux)

Чтобы покупателям не было скучно стоять в очередях, Ашан добавил веселый квест, разобраться с которым под силу далеко не каждому .

обобщенный вариант оформленияобобщенный вариант оформления

В прошлом году в некоторых регионах в ашане появились терминалы, работающие по принципу кассового аппарата. Сначала пробиваешь всё у кассира, получаешь чек с qr-кодом, , а по этому чеку оплачиваешь покупку в терминале наличными или картой. Еще нужно не забыть взять чек со штрих кодом, чтобы открыть калитку на выходе, иначе не выпустят.

внешний вид терминалов с небольшими различиями. снизу терминал для безналичной оплатывнешний вид терминалов с небольшими различиями. снизу терминал для безналичной оплаты

1. Проблемы

Несмотря на внешнюю линейность процесса, интерфейс терминала выглядит враждебно,
ломает множество базовых принципов дизайна, и очень сбивает с толку при первом использовании, а общая непродуманность процесса запутывает еще больше.
(даже я, как человек, написавший эту статью, и хоть немножко, но понимающий в устройстве терминалов, стоял перед ним секунд 10, выискивая глазами какую-нибудь подсказку)

Порядок при первом использовании

Понять что нужно делать
Найти сканер или нечто похожее
— Отсканировать чек с qr-кодом
Найти куда вносить купюры
— Внести купюры
Найти куда вносить монеты
— Внести монеты
Найти откуда брать сдачу
— Взять сдачу
Найти откуда брать чек
— Взять чек об оплате (а почему их два?)
Понять какой чек нужен на выходе
— Выйти

Ура! так выглядел обыденный процесс покупки пакета молока после работы.

«Почти на каждом этапе покупатель должен что-то искать и в чем-то разбираться»


При этом подразумевается, что покупатель знаком с принципом работы сканера, и тем, что такое qr-код и знает его в лицо, а также с работой купюроприёмника и монетоприёмника.
При том, что в некоторых магазинах это единственный способ, это создает трудности людям старшего возраста.

2. Проблемы оформления

  • На кислотном красном нормально читаться будет только белый

  • Белые подложки усиливают общую контрастность, выделяя все и не выделяя ничего

  • Текст у сканера закрывается корзинкой для сдачи мелочи при виде сверху

  • Нет привычной структуры, акцентов, иерархии, линии считывания. Глаз вынужден скакать

  • Инструкция на мониторе показывает схематически неправильный терминал,
    несуществующий штрих-код, и указывает на несуществующий сканер

3. Возможное решение


Меньше шума, больше информации

Уберем все подложки, так как они притягивают взгляд без необходимости, и цифры, так как если перед каждым шагом искать следующую цифру, это отнимет больше времени, чем сэкономит.

Самый сильный акцент ушел на область сканера. Это первый и основной шаг. Рядом со сканером
схематический чек с qr-кодом. Покупатель может не знать, что это такое, но штуку с похожим рисунком ему только что дали на кассе и он держит ее в руках.

два варианта оформления (темные области — слепые зоны при виде сверху)два варианта оформления (темные области — слепые зоны при виде сверху)

Направляющие и подсказки

8acbe5c53e002b53612ae83324cac6d1


Второй по важности этап — оплата.

Добавим акцент на купюроприёмник,
но гораздо слабее, чем на чек.

Подскажем переход стрелкой и добавим поясняющую надпись и цифру. Цифры в этом случае не играют роли указателей, они лишь помогают не сомневаться в последовательности, когда следующий этап уже найден глазами.


Добавим стрелку к оплате монетами. Этот этап происходит одновременно с оплатой купюрами,
но менее важен.

другие варианты. из-за вторичной подложки акцент сохраняется на купюрах. справа безналичная оплатадругие варианты. из-за вторичной подложки акцент сохраняется на купюрах. справа безналичная оплата


Дополнительно едва выделим область выдачи второго чека, и добавим символ штрих-кода, чтобы еще перед выходом показать, какую часть сканировать на выходе.

Сдача купюр, сдача монет, и чек не требуют сильных выделений, потому что эти этапы не ждут действия от человека, издают звуки, а чек еще и привлекает внимание резким движением.

Если приблизить цвета ближе к реальным, сканер и оплата купюрами сразу же бросаются в глаза своей контрастностью.


такое оформление не требует никаких технических изменений

«Это решение уже завтра можно напечатать на плёнке и расклеить на каждый терминал»

3be71180c3a90558547de6951b46cf12

4. Варианты без привязки к цвету корпуса

157d65fb9173f42f508705b6baa17aa2


Белый вариант

На белом проще делать выделения, ничего не давит на глаза, можно использовать спокойный зеленый цвет
(второй цвет бренда), который все равно будет контрастен к фону и приёмникам.

a6de9f3e00ff3f9d36fa5c7b253c2328


Зеленый вариант

Спокойный и не нагруженный вариант. Хорошо выглядит в сочетании с белым и белой заставкой на экране, но немного превращается в кашу с зеленой.


можно придумать еще несколько вариантов оформления цифр, чека, стрелок

(почти)Идеальные варианты в сферическом вакууме

Если отойти от существующих корпусов, и только следовать физическим ограничениям каждого
из внутренних устройств (купюроприёмник, чек, монетоприёмник), можно упростить интерфейс и взаимодействие еще сильнее.

купюроприёмники разнесены, чтобы влез банк с купюрами. монетоприёмник сохраняет привычную ориентациюкупюроприёмники разнесены, чтобы влез банк с купюрами. монетоприёмник сохраняет привычную ориентациюразличные цвета еще сильнее упрощают акцентирование, а разделение на модули помогает не запутаться/различные цвета еще сильнее упрощают акцентирование, а разделение на модули помогает не запутаться/

Чек на выходе

После пробивания товаров, кассир дает чек с qr-кодом, это — чек для терминала. Сам терминал выдает стандартный чек об оплате, который обычно сразу сминается и летит в урну. Однако на дверцах на выходе стоит сканер без подсказок, какой чек из двух нужно отсканировать. Вдобавок к этому руки покупателя заняты в этот момент покупками, сдачей, и двумя чеками, а возможно и тростью, ребенком, рюкзаком.

Сканеру нужен штрих-код, нарисованный внизу стандартного чека об оплате, чек с qr-кодом
не подойдет. После оплаты покупок, терминалу точно известно, что товары по qr-коду были оплачены, ведь терминал сам напечатал чек об оплате. Не совсем понятно почему дверцы
не распознают qr-код. Но если это вдруг технически невозможно, около сканера на выходе нарисуем подобную инструкцию. Возможно даже с подписью для большей ясности на новичка

03b6eb73e082bf107f0905fca796a417

В некоторых магазинах вместо первого qr-кода дают обычный чек со штрих-кодом, который, однако, также не сработает на сканер на выходе и создаст еще больше путаницы внешней идентичностью со вторым чеком

Все вышеописанное было проделано любопытным дизайнером, который будет очень рад любой критике, и под впечатлениями от стоящей позади торопящей очереди, и женщины у терминала рядом, показавшей мне на сканер, который с высоты моих глаз был полностью закрыт корзинкой для мелочи.

© Habrahabr.ru