[Интерфейсы, Usability, Дизайн] Квеструм по ашановски (ux)
Автор
Сообщение
news_bot ®
Стаж: 6 лет 4 месяца
Сообщений: 27286
Чтобы покупателям не было скучно стоять в очередях, Ашан добавил веселый квест, разобраться с которым под силу далеко не каждому .
обобщенный вариант оформленияВ прошлом году в некоторых регионах в ашане появились терминалы, работающие по принципу кассового аппарата. Сначала пробиваешь всё у кассира, получаешь чек с qr-кодом, а по этому чеку оплачиваешь покупку в терминале наличными или картой. Еще нужно не забыть взять чек со штрих кодом, чтобы открыть калитку на выходе, иначе не выпустят.
внешний вид терминалов с небольшими различиями. снизу терминал для безналичной оплаты1. ПроблемыНесмотря на внешнюю линейность процесса, интерфейс терминала выглядит враждебно,
ломает множество базовых принципов дизайна, и очень сбивает с толку при первом использовании, а общая непродуманность процесса запутывает еще больше.
(даже я, как человек, написавший эту статью, и хоть немножко но понимающий в устройстве терминалов, стоял перед ним секунд 10, выискивая глазами какую-нибудь подсказку)
Порядок при первом использовании
- Понять что нужно делать
- Найти сканер или нечто похожее
- Отсканировать чек с qr-кодом
- Найти куда вносить купюры
- Внести купюры
- Найти куда вносить монеты
- Внести монеты
- Найти откуда брать сдачу
- Взять сдачу
- Найти откуда брать чек
- Взять чек об оплате (а почему их два?)
- Понять какой чек нужен на выходе
- ВыйтиУра! так выглядел обыденный процесс покупки пакета молока после работы."Почти на каждом этапе покупатель должен что-то искать и в чем-то разбираться"
При этом подразумевается, что покупатель знаком с принципом работы сканера, и тем, что такое qr-код и знает его в лицо, а также с работой купюроприёмника и монетоприёмника.
При том, что в некоторых магазинах это единственный способ, это создает трудности людям старшего возраста.2. Проблемы оформления
- На кислотном красном нормально читаться будет только белый
- Белые подложки усиливают общую контрастность, выделяя все и не выделяя ничего
- Текст у сканера закрывается корзинкой для сдачи мелочи при виде сверху
- Нет привычной структуры, акцентов, иерархии, линии считывания. Глаз вынужден скакать
- Инструкция на мониторе показывает схематически неправильный терминал,
несуществующий штрих-код, и указывает на несуществующий сканер
3. Возможное решение
Меньше шума, больше информации
Уберем все подложки, так как они притягивают взгляд без необходимости, и цифры, так как если перед каждым шагом искать следующую цифру, это отнимет больше времени, чем сэкономит.
Самый сильный акцент ушел на область сканера. Это первый и основной шаг. Рядом со сканером
схематический чек с qr-кодом. Покупатель может не знать, что это такое, но штуку с похожим рисунком ему только что дали на кассе и он держит ее в руках.
два варианта оформления (темные области — слепые зоны при виде сверху)Направляющие и подсказки
Второй по важности этап — оплата.
Добавим акцент на купюроприёмник,
но гораздо слабее, чем на чек.
Подскажем переход стрелкой и добавим поясняющую надпись и цифру. Цифры в этом случае не играют роли указателей, они лишь помогают не сомневаться в последовательности, когда следующий этап уже найден глазами.
Добавим стрелку к оплате монетами. Этот этап происходит одновременно с оплатой купюрами,
но менее важен.
другие варианты. из-за вторичной подложки акцент сохраняется на купюрах. справа безналичная оплата
Дополнительно едва выделим область выдачи второго чека, и добавим символ штрих-кода, чтобы еще перед выходом показать, какую часть сканировать на выходе.
Сдача купюр, сдача монет, и чек не требуют сильных выделений, потому что эти этапы не ждут действия от человека, издают звуки, а чек еще и привлекает внимание резким движением.
Если приблизить цвета ближе к реальным, сканер и оплата купюрами сразу же бросаются в глаза своей контрастностью.
такое оформление не требует никаких технических изменений"Это решение уже завтра можно напечатать на плёнке и расклеить на каждый терминал"
4. Варианты без привязки к цвету корпуса
Белый вариант
На белом проще делать выделения, ничего не давит на глаза, можно использовать спокойный зеленый цвет
(второй цвет бренда), который все равно будет контрастен к фону и приёмникам. 
Зеленый вариант
Спокойный и не нагруженный вариант. Хорошо выглядит в сочетании с белым и белой заставкой на экране, но немного превращается в кашу с зеленой.
можно придумать еще несколько вариантов оформления цифр, чека, стрелок(почти)Идеальные варианты в сферическом вакуумеЕсли отойти от существующих корпусов, и только следовать физическим ограничениям каждого
из внутренних устройств (купюроприёмник, чек, монетоприёмник ), можно упростить интерфейс и взаимодействие еще сильнее.
купюроприёмники разнесены, чтобы влез банк с купюрами. монетоприёмник сохраняет привычную ориентацию
различные цвета еще сильнее упрощают акцентирование, а разделение на модули помогает не запутаться/Чек на выходеПосле пробивания товаров, кассир дает чек с qr-кодом, это — чек для терминала. Сам терминал выдает стандартный чек об оплате, который обычно сразу сминается и летит в урну. Однако на дверцах на выходе стоит сканер без подсказок, какой чек из двух нужно отсканировать. Вдобавок к этому руки покупателя заняты в этот момент покупками, сдачей, и двумя чеками, а возможно и тростью, ребенком, рюкзаком.
Сканеру нужен штрих-код, нарисованный внизу стандартного чека об оплате, чек с qr-кодом
не подойдет. После оплаты покупок, терминалу точно известно, что товары по qr-коду были оплачены, ведь терминал сам напечатал чек об оплате. Не совсем понятно почему дверцы
не распознают qr-код. Но если это вдруг технически невозможно, около сканера на выходе нарисуем подобную инструкцию. Возможно даже с подписью для большей ясности на новичка
В некоторых магазинах вместо первого qr-кода дают обычный чек со штрих-кодом, который, однако, также не сработает на сканер на выходе и создаст еще больше путаницы внешней идентичностью со вторым чекомВсе вышеописанное было проделано любопытным дизайнером, который будет очень рад любой критике, и под впечатлениями от стоящей позади торопящей очереди, и женщины у терминала рядом, показавшей мне на сканер, который с высоты моих глаз был полностью закрыт корзинкой для мелочи.
===========
Источник:
habr.com
===========
Похожие новости:
- [Информационная безопасность, C++, C, Разработка для интернета вещей] Espressif IoT Development Framework: 71 выстрел в ногу
- [Настройка Linux, Информационная безопасность, Open source] Дети нашли уязвимость в экране блокировки Linux Mint, случайно нажимая клавиши
- [Статистика в IT] Как перейти к байесовским доверительным интервалам, не потеряв понимание классического частотного вывода
- [Python, Алгоритмы, Математика, Машинное обучение, Искусственный интеллект] Вот вообще этим не занимался, и тут раз, и Data Science
- [Разработка игр, Дизайн игр] Наши попытки процедурной анимации движения персонажа
- [Системное администрирование] Таков путь! Эволюция бэкапов в Timeweb: от rsync до ZFS
- [Open source, Разработка под Linux, AR и VR, Игры и игровые приставки] Сегодня большинство Windows-игр отлично запускаются под Linux. Спасибо, Proton
- [*nix, C, Разработка под Linux] Перехват и обработка событий в файловой системе Linux
- [Разработка под Linux, IT-компании] Corellium выпустила прототип порта Linux для системы на кристалле Apple M1
- [Python, Машинное обучение, Видеокарты, TensorFlow] Есть ли жизнь без Nvidia? Запускаем TensorFlow на Radeon RX 580
Теги для поиска: #_interfejsy (Интерфейсы), #_usability, #_dizajn (Дизайн), #_ashan (ашан), #_terminal (терминал), #_ux, #_redizajn_interfejsa (редизайн интерфейса), #_samoobsluzhivanie (самообслуживание), #_kassa (касса), #_kontsept (концепт), #_analiz (анализ), #_ux_dizajn (ux дизайн), #_issledovanie_proizvoditelnosti (исследование производительности), #_interfejsy (
Интерфейсы
), #_usability, #_dizajn (
Дизайн
)
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 04-Июл 11:58
Часовой пояс: UTC + 5
| Автор | Сообщение |
|---|---|
|
news_bot ®
Стаж: 6 лет 4 месяца |
|
|
Чтобы покупателям не было скучно стоять в очередях, Ашан добавил веселый квест, разобраться с которым под силу далеко не каждому .  обобщенный вариант оформленияВ прошлом году в некоторых регионах в ашане появились терминалы, работающие по принципу кассового аппарата. Сначала пробиваешь всё у кассира, получаешь чек с qr-кодом, а по этому чеку оплачиваешь покупку в терминале наличными или картой. Еще нужно не забыть взять чек со штрих кодом, чтобы открыть калитку на выходе, иначе не выпустят.  внешний вид терминалов с небольшими различиями. снизу терминал для безналичной оплаты1. ПроблемыНесмотря на внешнюю линейность процесса, интерфейс терминала выглядит враждебно, ломает множество базовых принципов дизайна, и очень сбивает с толку при первом использовании, а общая непродуманность процесса запутывает еще больше. (даже я, как человек, написавший эту статью, и хоть немножко но понимающий в устройстве терминалов, стоял перед ним секунд 10, выискивая глазами какую-нибудь подсказку)  Порядок при первом использовании - Понять что нужно делать - Найти сканер или нечто похожее - Отсканировать чек с qr-кодом - Найти куда вносить купюры - Внести купюры - Найти куда вносить монеты - Внести монеты - Найти откуда брать сдачу - Взять сдачу - Найти откуда брать чек - Взять чек об оплате (а почему их два?) - Понять какой чек нужен на выходе - ВыйтиУра! так выглядел обыденный процесс покупки пакета молока после работы."Почти на каждом этапе покупатель должен что-то искать и в чем-то разбираться" При этом подразумевается, что покупатель знаком с принципом работы сканера, и тем, что такое qr-код и знает его в лицо, а также с работой купюроприёмника и монетоприёмника. При том, что в некоторых магазинах это единственный способ, это создает трудности людям старшего возраста.2. Проблемы оформления
Меньше шума, больше информации Уберем все подложки, так как они притягивают взгляд без необходимости, и цифры, так как если перед каждым шагом искать следующую цифру, это отнимет больше времени, чем сэкономит. Самый сильный акцент ушел на область сканера. Это первый и основной шаг. Рядом со сканером схематический чек с qr-кодом. Покупатель может не знать, что это такое, но штуку с похожим рисунком ему только что дали на кассе и он держит ее в руках.  два варианта оформления (темные области — слепые зоны при виде сверху)Направляющие и подсказки  Второй по важности этап — оплата. Добавим акцент на купюроприёмник, но гораздо слабее, чем на чек. Подскажем переход стрелкой и добавим поясняющую надпись и цифру. Цифры в этом случае не играют роли указателей, они лишь помогают не сомневаться в последовательности, когда следующий этап уже найден глазами. Добавим стрелку к оплате монетами. Этот этап происходит одновременно с оплатой купюрами, но менее важен.  другие варианты. из-за вторичной подложки акцент сохраняется на купюрах. справа безналичная оплата  Дополнительно едва выделим область выдачи второго чека, и добавим символ штрих-кода, чтобы еще перед выходом показать, какую часть сканировать на выходе. Сдача купюр, сдача монет, и чек не требуют сильных выделений, потому что эти этапы не ждут действия от человека, издают звуки, а чек еще и привлекает внимание резким движением. Если приблизить цвета ближе к реальным, сканер и оплата купюрами сразу же бросаются в глаза своей контрастностью. такое оформление не требует никаких технических изменений"Это решение уже завтра можно напечатать на плёнке и расклеить на каждый терминал"  4. Варианты без привязки к цвету корпуса  Белый вариант На белом проще делать выделения, ничего не давит на глаза, можно использовать спокойный зеленый цвет (второй цвет бренда), который все равно будет контрастен к фону и приёмникам.  Зеленый вариант Спокойный и не нагруженный вариант. Хорошо выглядит в сочетании с белым и белой заставкой на экране, но немного превращается в кашу с зеленой. можно придумать еще несколько вариантов оформления цифр, чека, стрелок(почти)Идеальные варианты в сферическом вакуумеЕсли отойти от существующих корпусов, и только следовать физическим ограничениям каждого из внутренних устройств (купюроприёмник, чек, монетоприёмник ), можно упростить интерфейс и взаимодействие еще сильнее.  купюроприёмники разнесены, чтобы влез банк с купюрами. монетоприёмник сохраняет привычную ориентацию  различные цвета еще сильнее упрощают акцентирование, а разделение на модули помогает не запутаться/Чек на выходеПосле пробивания товаров, кассир дает чек с qr-кодом, это — чек для терминала. Сам терминал выдает стандартный чек об оплате, который обычно сразу сминается и летит в урну. Однако на дверцах на выходе стоит сканер без подсказок, какой чек из двух нужно отсканировать. Вдобавок к этому руки покупателя заняты в этот момент покупками, сдачей, и двумя чеками, а возможно и тростью, ребенком, рюкзаком. Сканеру нужен штрих-код, нарисованный внизу стандартного чека об оплате, чек с qr-кодом не подойдет. После оплаты покупок, терминалу точно известно, что товары по qr-коду были оплачены, ведь терминал сам напечатал чек об оплате. Не совсем понятно почему дверцы не распознают qr-код. Но если это вдруг технически невозможно, около сканера на выходе нарисуем подобную инструкцию. Возможно даже с подписью для большей ясности на новичка  В некоторых магазинах вместо первого qr-кода дают обычный чек со штрих-кодом, который, однако, также не сработает на сканер на выходе и создаст еще больше путаницы внешней идентичностью со вторым чекомВсе вышеописанное было проделано любопытным дизайнером, который будет очень рад любой критике, и под впечатлениями от стоящей позади торопящей очереди, и женщины у терминала рядом, показавшей мне на сканер, который с высоты моих глаз был полностью закрыт корзинкой для мелочи. =========== Источник: habr.com =========== Похожие новости:
Интерфейсы ), #_usability, #_dizajn ( Дизайн ) |
|
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 04-Июл 11:58
Часовой пояс: UTC + 5