Разбор дизайна интерфейса кассы «Магнита».
Кассы самообслуживания в супермаркетах призваны решить как минимум две задачи: в час-пик разгрузить огромные очереди и обслужить большее количество покупателей с меньшими затратами.
Я познакомился с подобными кассами и терминалами самообслуживания ещё в 2015 году в супермаркете «Магнит». С тех пор ужасался плохими интерфейсам касс и старался их избегать. Переехав в Краснодар, избегать их стало сложнее, так как единственный крупный супермаркет у дома — «Магнит».
Поэтому я решил написать эту статью. Пока готовился, дизайн интерфейса кассы обновили, но часть проблем осталась, и успели появиться новые. Сделаем быстрый анализ интерфейса до и после и разберём его новый дизайн.
Главный экран кассы
Что сделано хорошо. Убрали бессмысленную большую картинку, оставили одну главную кнопку, чтобы не думать о том, какую выбрать. Добавили информацию про безнал для тех, кто хотел рассчитаться наличкой.
Оставили одно целевое действие на экране: «Начать покупку». Отлично? Оказывается, нет!
Раньше тот, кто не хотел брать пакеты, мог сразу нажать «У меня свой пакет». Сейчас каждый раз спрашивают: «Сколько пакетов добавить?». Ниже мы ещё вернёмся к разбору экрана с пакетами.
Что можно улучшить. Кнопка «Помощь» разочаровывает своим поведением. Ты думаешь, что откроешь какой-то экран FAQ, но открывается совершенно бессмысленный элемент «Помощь консультанта» с выбором «Ок» или «Отмена». Желательно так и назвать кнопку на главном экране «Помощь консультанта» и при нажатии сразу вызывать консультанта.
Уведомление «Наличные не принимаем»
В обновлённом дизайне кассы на главном экране крупными буквами написали «Только безналичная оплата» и добавили картинку с банковской картой. Раньше запрос был перед оплатой, теперь сразу, при нажатии на «Начать покупку».
Возможно, это связано с малым процентом людей, которые плохо видят, не читают или вообще не умеют обращаться с подобными кассами. Из-за этого приходится страдать всем остальным.
Что можно улучшить. Выделить кнопку «Да». Уведомление про карту раздражает, так как оно встречается повторно, и хочется, не целясь, интуитивно ткнуть в более заметную кнопку: «Да, я не дурак, хочу продолжить».
Запрос пакета
Что сделано хорошо. После обновления стало проще, но появилась новая проблема: вопрос с пакетами выскакивает каждый раз при использовании кассы, а раньше ты мог с главного экрана нажать «У меня свой пакет».
Не думаю, что супермаркет может импульсно допродать вам пакеты, как жвачку или батончик, поэтому кнопку «Пакет не нужен» нельзя было делать серой и невзрачной. Например, я часто пользуюсь ей, покупая что-то незначительное.
Что можно улучшить. Вместо выбора количества пакетов и кнопки «Подтвердить» можно поставить десять кнопок с количеством от одного до десяти и заметную кнопку «Пакет не нужен».
Экран «Корзина»
Что сделано хорошо. Экран стал чище. Те, кто впервые сталкиваются с покупкой через кассы, наверное, больше не паникуют и не зовут консультанта на помощь. Так было со мной в 2015 году.
После обновления дизайна я думал, что левая часть экрана такая большая, потому что в ней можно будет искать товары. Это было бы удобно, но при нажатии на «Найти товар» открывается новое окно «Поиск товара из корзины».
Что можно улучшить. Вернуть единственный плюс старой версии экрана — более понятную картинку. Отдать больше места под правую часть экрана, под товары в корзине, а не под картинку с надписью «Поднесите товар к сканеру».
Поиск товара из корзины
Попробуйте с левого экрана «Поиск» вернуться на экран «Корзина». В супермаркете я не смог это сделать, пришлось вызвать консультанта, который тоже не понял и методом тыка нашёл решение: нужно ткнуть в «Найти товар», откроется клавиатура, и уже там будет кнопка «Назад».
Что можно улучшить. Добавить кнопку «Назад» на все экраны поиска и назвать понятнее, например, «Вернуться в корзину».
Экран «Переход к оплате»
Что сделано хорошо. Убрали промежуточный экран с «Получить электронную копию чека», сократив время оформления покупки. Вся область «Выберите тип оплаты» теперь нажимается. При этом стало непонятно, что вся область «Выберите тип оплаты» нажимается.
Что можно улучшить. У нас есть только один тип оплаты, и мы уже два раза встречались с уведомлением «Оплата только картой», поэтому лучше вообще убрать этот шаг. Он лишний.
Представленные выше решения — это гипотезы, построенные на личном опыте использования кассы самообслуживания. Возможно, что часть проблем нельзя было решить по техническим или иным причинам.
В любом случае они есть, некоторые очевидны даже без аналитики и больших юзабилити-тестирований, они всё ещё замедляют оформление покупки и создают очереди, от которых призваны избавить.
Самое забавное, что в статье в основном вредные советы, не верные оценки и не понимание как должно быть и почему.
Да, там сейчас полный ппц в дизайне и юзабилити, но автор в качестве улучшения предлагает прикрыть кучу говна листиком бумаги. Именно так у нас делали (а м.б. и делают до сих пор) автомобили.
Примеры:
1. На кассах самообслуживания не нужен раздел "Помощь". Люди априори не должны читать FAQ у аппарата где все должно быть интуитивно понятно любому идиоту. Автора разочаровала скудная справка. Её там по определению не должно быть.
2. Попап который заставляет человека ещё раз выбрать способ оплаты. На кассах самообслуживания. Автор предлагает перекрасить кнопку в зелёный. Заебись решение, сразу решает проблему, профессионала видно издалека. Единственно правильное решение — убрать этот попап.
3. Главный экран. Автора радует что кнопок стало меньше, а экран чище.
А вы задавались зачем там эта кнопка? Как часто её нажимают? Что будет если убрать? Правильное решение — убрать кнопку совсем и затестить что будет. Касса может начинать работу как только ты отсканировал товар.
4. Пакеты. Автор скучает по кнопке "У меня свой пакет". Помимо странной формулировки — у меня например свой рюкзак, а не пакет, я бы втыкал на эту надпись секунд 15 — эта кнопка не нужна ни в начале ни в середине процесса. Она нужна в конце, по очевидным причинам. Вот её можно и в зелёный, минутка маркетинга.
5. Экран «Переход к оплате». Он не нужен вообще. Хвала Вивеку, хоть это автор понимает.
И так можно продолжать бесконечно.
Без обид, но статья это пример праведного "гнева" потребителя который чувствует что что-то в жигулях не то и пытается прикрутить к ним спойлер. Быстрее они от этого не поедут.
Более того, есть очевидные метрики как оценить полезность того или иного "улучшения". Это на случай если у вас нет понимания что такое ui\ux (а его нет), зачем нужна вообще эта касса (а вы не понимаете судя по рекомендациям) и вы с наслаждением жмёте исправленную зелёную кнопку "да, черт побери, я хочу оплатить картой". На кассе самообслуживания. Заебись. Исправили. Как там, дизайн фёрст, дизайн тсынкинг. Ага.
P.S. Пардоньте за французкий, достали подобным уровнем компетенции на работе. А тут приходишь и оно прям из экрана лезет. Искренне ваш, продакт менеджер в маркетинге, уставший от работы с оленями. Люблю, целую, не баньте плз.
P.P.S. Хоспади, там ещё и весы в этом франкенштейне встроены. Их там быть не должно по дефолту. Взвешивать нужно в зале (только в зале или на кассе с тётенькой), а не на кассе самообслуживания задерживая людей которые уже рвутся домой аки кони к водопою. Ааа, пошел за успокоительным!
Вивеку слава!