Resol — новый UI/UX касс самообслуживания

1. Вводная задача от заказчика, проблематика, цели

2020 год стал прорывным для рынка касс самообслуживания — через них проходит от 45 до 80% трафика крупных ритейлеров.

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

В этом проекте мы обновили UI/UX для компании Resol Software. Ребята более 10 лет занимаются самообслуживанием, среди их клиентов — крупнейшие ритейлеры России.

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

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

Мы должны были сделать дизайн:

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

2. Описание реализации кейса и творческого пути по поиску оптимального решения

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

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

Нам нужно было разработать UI/UX, который решал бы эти проблемы.

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

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

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

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

3. Результаты сотрудничества

Теперь посетители ритейлеров, которые сотрудничают с Resol, могут быстро и комфортно купить любые товары. Мы разработали семь экранов для шести популярных сценариев: поиска товара, удаления, покупки товаров 18+, оплаты картой и наличными и многих других.

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

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

4. Заключение

Надеемся, мы вас убедили. :)

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