Русский
Русский
English
Статистика
Реклама

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

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

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

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

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

1. Проблемы

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



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

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

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

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


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

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

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

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

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

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

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

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


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

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

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

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

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


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

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

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


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

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


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

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

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



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

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

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


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

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


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

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


















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

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

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

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

Чек на выходе

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

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

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

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

Источник: habr.com
К списку статей
Опубликовано: 21.01.2021 00:20:21
0

Сейчас читают

Комментариев (0)
Имя
Электронная почта

Интерфейсы

Usability

Дизайн

Ашан

Терминал

Ux

Редизайн интерфейса

Самообслуживание

Касса

Концепт

Анализ

Ux дизайн

Исследование производительности

Категории

Последние комментарии

  • Имя: Макс
    24.08.2022 | 11:28
    Я разраб в IT компании, работаю на арбитражную команду. Мы работаем с приламы и сайтами, при работе замечаются постоянные баны и лаги. Пацаны посоветовали сервис по анализу исходного кода,https://app Подробнее..
  • Имя: 9055410337
    20.08.2022 | 17:41
    поможем пишите в телеграм Подробнее..
  • Имя: sabbat
    17.08.2022 | 20:42
    Охренеть.. это просто шикарная статья, феноменально круто. Большое спасибо за разбор! Надеюсь как-нибудь с тобой связаться для обсуждений чего-либо) Подробнее..
  • Имя: Мария
    09.08.2022 | 14:44
    Добрый день. Если обладаете такой информацией, то подскажите, пожалуйста, где можно найти много-много материала по Yggdrasil и его уязвимостях для написания диплома? Благодарю. Подробнее..
© 2006-2024, personeltest.ru