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

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

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

1. Проблемы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Чек на выходе

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

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

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

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