«Я нажал — и всё купилось!»: как мы интерфейс для касс самообслуживания создавали

Эпоха «Галя, отмена!» с появлением касс самообслуживания постепенно отмирает. Но всё не так радужно. Каждый из нас может оказаться в ситуации, когда судорожно не понимаешь, куда нажать, чтобы взвесить мандарины, и все недовольные взгляды из очереди направлены на тебя. С нами такое случалось, и сейчас мы расскажем, как нам довелось с этим побороться.

Мы — команда CreativePeople. Специализируемся на цифровом дизайне коммуникаций, приложений, веб-сервисов. А теперь ещё и касс самообслуживания.

Наш клиент — российская ИТ-компания Resol. Ребята более 10 лет занимаются самообслуживанием, а сейчас разрабатывают собственное ПО для касс самообслуживания (далее — просто КСО).

По исследованиям самих Resol, сейчас через КСО проходит от 45 до 80% трафика крупных магазинов. И этот показатель продолжает расти. А значит, процесс использования КСО должен быть максимально простым и почти незаметным для покупателя. Поэтому клиент обратился к нам за переработкой UX и UI.

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

Ещё одним важным фактором стала аудитория. Оплатить покупки на КСО может и ребёнок, и студент, и бабушка. Мы должны были учесть все нюансы и сделать дизайн:

• интуитивно понятным и максимально простым — сохранить в нём путь «сканируй — клади — оплати»;
• достаточно контрастным и приятным глазу, чтобы все детали были различимы;
• адаптируемым под различные бренды.

Шаг 1: Исследование стартового UI, решений конкурентов и поведения аудитории

В течение первых двух недель мы провели исследование конкурентов и сами прошли основные пользовательские пути на их КСО. Нам важно было на себе проверить удобство интерфейсов — это помогло определить места, на которых проще всего споткнуться, и не повторить в новом UX.

Мы изучили много интерфейсов от различных поставщиков и выявили несколько общих проблем:

• функционал не всех кнопок был понятен с первого взгляда — риск разрыва сценария возрастал, а это приводит к стрессу и негативу со стороны пользователей;
• сложное добавление пакета, оно состояло из трёх шагов: ввести количество, подтвердить его и согласиться на то, что сумма покупки увеличится. Отказаться от пакета можно было только выбрав 0, что вообще не очевидно;
• пёстрый фон отвлекал от быстрого процесса покупки — сориентироваться в деталях на экране было тяжело;
• градиент мешал различить фото товаров — в условиях спешки и очереди это стало большим минусом.

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

Со всеми этими знаниями и идеями мы двинулись дальше.

Шаг 2: Проработка прототипов обновлённого UX

Чтобы сделать взаимодействие пользователя с КСО максимально удобным, мы составили карту пользовательского пути и на её основе разработали пять прототипов дизайна для шести популярных сценариев использования КСО:

• сканирования штрих-кода;
• поиска и покупки весового товара;
• покупки товаров 18+;
• удаления товара;
• покупки пакета;
• оплаты картой и наличными.

Прототипы мы накладывали на КСО двух форматов — 4:3 и трендовый в последние 2-3 года 9:16. Кассы с этими вариантами пропорций экранов вы можете встретить в магазинах чаще всего. При этом каждый формат диктует свои условия размещения элементов: например, на кассах 9:16 больше места для контента, но они неудобны для детей и пользователей с небольшим ростом.

Вот, какие прототипы у нас получились, исходя из функциональности каждого экрана, потребностей ЦА и ограничений форматов:

Так как мы провели аналогию со смартфонами и брали за основу плиточную структуру, то весь интерфейс мы построили на плитках с динамичным размером на черном фоне — он лучше всего выделяет плашки с контентом. На них поместили всю основную информацию и кнопки — по принципам популярного и привычного material design.

Когда расположение элементов управления и блоков с информацией было определено, нам предстояло продумать как иконки для всех сценариев, так и фоновое оформление. Иконки мы отрисовали в минималистичном 2D-стиле, чтобы они сочетались с основным плоским интерфейсом.

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

В процессе мы отправляли интерфейс с фонами и иконками клиенту «на примерку». Так мы узнали, что фон с иллюстрациями правильных форм, на который мы делали ставки, на реальном устройстве выглядит скучнее, чем в Figma, а неправильные, будто от руки нарисованные дудлы, сразу притягивают взгляд. В итоге остановились на этом варианте.

Итого для КСО мы отрисовали:

• 10 экранов;
• два разноформатных фона;
• более 30 функциональных иконок.

При проектировании экранов формата 9:16 мы постарались учесть как можно больше нюансов. В частности, самый важный контент и кнопки на кассах с таким соотношением сторон мы разместили в средней и нижней части, чтобы людям небольшого роста не приходилось тянуться наверх. Этот паттерн перекочевал из смартфонов — до верхнего левого угла палец достает с трудом. Кроме того, компоновка основных элементов в центре помогает сфокусировать внимание — пользователю не приходится искать кнопки по всему экрану, он тратит меньше времени на покупку.

Сценарии покупки алкоголя мы тоже предусмотрели: в верхней левой части касс появились часы (опять же, как на смартфонах и планшетах), которые подсказывают, успевает ли человек совершить покупку. Для подтверждения возраста на КСО консультант может или ввести дату рождения, и устройство само рассчитает, совершеннолетний ли покупатель, или просто подтвердить возраст. Забавный факт: на обычных кассах продавцы клеят себе стикер с датой, от которой товары продавать нельзя. Это нужно, чтобы быстро сориентироваться, и КСО решает эту проблему.

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

На экране отображается знак «кирпич», если касса не работает. Сначала мы переживали, что он может вызвать негативные ассоциации, но затем один из наших дизайнеров отправился на регулярный шоппинг, и именно в тот день КСО не работали. На экранах светились красные «кирпичи», и дизайнер сразу понял, что идти в ту часть магазина смысла нет, поделился с нами, и сомнения отпали.

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

КСО с программным обеспечением Resol сейчас можно встретить в магазинах ведущих ритейлеров России. Сейчас клиент готовится к запуску и в других сетях.

В апреле 2023 года команда Resol представила новый UI на выставке RetailTECH 2023 и собрала позитивные отзывы. Самому клиенту новый дизайн и иконки тоже понравились и вызвали милые ассоциации — например, изображение консультанта напомнило Пакмэна, который уже съел бейсбольную биту и готовится закусить мячиком. А купил он их наверняка через КСО.

А что касается нас, команда CreativePeople наслаждалась интересным проектом. Не только потому, что можно было выйти в магазин за вкусняшками, но и потому, что вместе с увлечённым клиентом смогла разработать интерфейс для КСО, которыми будет удобно и легко пользоваться самым разным людям.

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

Если тоже хотите идти в ногу с дизайнерскими трендами, приходите в CreativePeople. А больше информации о том, как мы работаем и каких методик придерживаемся, ждёт вас в нашем Telegram-канале.