Клиент и задача
CSI разрабатывает программное обеспечение и оборудование для автоматизации торговли. На кассах самообслуживания CSI K покупатель сам сканирует товары, находит позиции без штрихкода и оплачивает покупку. За эти сценарии отвечает кассовое ПО Set SCO.
Нам предстояло обновить интерфейс кассы самообслуживания: помочь людям с разным опытом самостоятельно проходить покупку и разбираться в ситуациях, где обычно нужен консультант. Решение должно было учитывать большой вертикальный экран, разные комплектации касс и фирменный стиль торговых сетей.
Работу выстроили в три этапа. Сначала изучили, как люди пользуются кассами в магазинах. Затем перевели наблюдения в сценарии и проверили прототипы на настоящем устройстве. На этой основе разработали визуальную систему и дизайн экранов.
01. Исследование
Чтобы понять, где интерфейс может помочь покупателю, мы начали с самой покупки. Человек ищет штрихкод, подносит товар к сканеру, перекладывает его на платформу и только время от времени смотрит на экран. Дисплей должен сопровождать эту последовательность действий и вовремя сообщать, если что-то пошло не так.
Наблюдения в четырёх странах
Распределённая команда изучала кассы в Беларуси, Польше, Грузии и России. Мы проходили покупку сами, наблюдали за людьми и разговаривали с консультантами: выясняли, где покупатели останавливаются, что понимают иначе и когда зовут сотрудника.
Для сравнения подготовили общие сценарии и тестовую корзину: обычные и весовые товары, выпечку без штрихкода, несколько одинаковых позиций, товары с проверкой возраста и пакет. Записи покупок разбирали по экранам и действиям. Так можно было сопоставить разные терминалы и увидеть, как на сценарий влияют оборудование и правила магазина.
Экран как часть устройства
У CSI K вертикальный экран диагональю 32 дюйма. На нём помещается много информации, но к верхним элементам приходится тянуться всей рукой, а платформы перед кассой мешают подойти ближе. Поэтому перенос привычного интерфейса на большой дисплей сам по себе не решал задачу.
Мы выделили доступную область взаимодействия и зону периферийного зрения. Из этого следовало правило для будущих экранов: основные действия, последний добавленный товар и важные сообщения должны находиться ниже, рядом с местом, где человек работает с покупками.
Что сохранить в прежнем интерфейсе
Затем разобрали существующие экраны CSI, макеты и видеозаписи покупок. Аудит показал проблемы с контрастом, неоднозначными подписями и навигацией по каталогу. Некоторые подсказки воспринимались как ошибки, а категории товаров приходилось различать преимущественно по тексту.
При этом в прежнем интерфейсе были полезные решения: сквозная помощь, добавление товаров снизу вверх и быстрый доступ к популярным позициям. Их взяли за основу следующего этапа. Теперь нужно было проверить, как собрать эти решения в последовательный путь покупки и учесть исключения — от весового товара до вмешательства консультанта.
02. Прототипы
Исследование задало ограничения, а прототипы помогли проверить решения в действии. Мы связали экраны с движениями покупателя и работой оборудования, затем проходили сценарии на кассе. Так до финального дизайна можно было пересмотреть навигацию, размеры элементов и поведение подсказок.
От покупателя к сценарию
На основе наблюдений сформировали три модельных портрета с разным опытом и потребностями. Для каждого описали мотивацию, возможные затруднения и действия. Портреты помогали проверять решения с позиции человека, который впервые видит кассу, и того, кто уже привык к самообслуживанию.
Начали с насыщенного сценария — вечерней покупки с весовыми товарами и проверкой возраста. Разделили его на действия на экране, работу с товарами и события со стороны кассы. Это позволило увидеть переходы и исключения: что происходит после выбора продукта, где нужен отклик системы и когда должен подключиться сотрудник.
Проверка в масштабе кассы
Клиент привёз терминал в офис. Мы установили его на высоте, близкой к магазинной, а недостающие платформы имитировали мебелью. Прототипы выводили прямо на дисплей и проходили покупку с перекладыванием товаров. Коллеги участвовали в коридорных тестах отдельных сценариев.
На устройстве обнаружились различия, которые трудно оценить на мониторе дизайнера: расстояние до кнопок, масштаб текста и блики. Тёмный фон помогал визуально уменьшить экран, но отражения мешали считывать информацию. Поэтому в дальнейшей работе перешли к светлой основе и уточнили размеры значимых элементов.
Проверка каталога тоже изменила решение. В первых вариантах использовали вкладки и матричную навигацию, но люди путались в категориях. Мы перешли к последовательному входу в категорию и понятному возврату назад. Эту логику затем перенесли в финальный дизайн.
Для ошибок предусмотрели трансформируемую область внизу списка. Во время обычной покупки она остаётся спокойной, а при проблеме становится заметнее и предлагает действие. Прототип позволил проверить этот переход вместе с остальным сценарием.
Общая логика для разных комплектаций
По ходу проекта уточнились требования к оборудованию. Кассы работают с контрольной весовой платформой и без неё. Платформа проверяет уже отсканированные покупки, а прикассовые весы нужны для весовых товаров — это разные устройства и разные условия сценария.
Мы предусмотрели согласованное поведение для разных комплектаций, в том числе для режима без контрольной платформы. Связанные сценарии дорабатывали одновременно с дизайном. К этому моменту прототипы уже описывали основные переходы, ошибки и исключения — на них можно было строить визуальную систему.
03. Дизайн
Проверенная логика покупки стала основой дизайна, но компоновку и визуальные акценты ещё предстояло найти. Интерфейс должен был оставаться понятным на большом экране, спокойно выглядеть в торговом зале и адаптироваться под разные сети. Эти требования определили и характер концепции, и дальнейшую работу с деталями.
От прототипа к светлой концепции
Первые варианты слишком близко повторяли детальные прототипы и получались плотными. Вместе с CSI уточнили ожидания от визуального характера интерфейса и подготовили новые направления. В выбранной концепции увеличили свободное пространство, упростили формы и сократили количество цветных зон.
Верхнюю часть экрана оставили свободнее, а список, сумму и основные действия собрали ближе к покупателю. Крупные заголовки обозначают экран, размер и насыщенность текста разделяют название товара, цену и второстепенные данные. Скругления объединяют карточки, кнопки и сообщения в одну систему.
Белый и светло-серый составляют основу интерфейса. Цвет выделяет переход к оплате, скидку, возрастное ограничение или ошибку. Мы сократили число конкурирующих акцентов и согласовали пиктограммы товаров, статусов и действий. Так важные события выделяются на спокойном фоне.
Типографика и оформление для торговых сетей
Для названий и цен выбрали Manrope. Сравнивали начертания на одинаковых строках товаров, проверяли длинные названия, крупные суммы и символы разных языков и валют. Иерархию настроили так, чтобы название, количество и цена различались без дополнительных цветовых акцентов.
Контраст проверяли в макетах с помощью плагинов и вручную корректировали сочетания текста, фона и управляющих элементов. Проверки на настоящем дисплее дополняли эту работу: расчётное соотношение цветов нужно было сопоставить с тем, как экран выглядит при отражениях и разном освещении.
Нейтральная основа позволила адаптировать интерфейс под торговые сети. Мы определили места для логотипа и фирменных цветов, сохранив расположение действий и значение системных состояний. Смена оформления опирается на общую структуру экранов.
Начало покупки и список товаров
Путь покупки начинается с действия, удобного человеку. Опытный покупатель может сразу отсканировать первый товар, не нажимая на стартовый экран. Другой — сначала сменить язык, выбрать пакет, открыть каталог или вызвать помощника. Для пакетов показываем вместимость и допустимую нагрузку.
После сканирования товар появляется внизу списка. Это продолжает правило, которое сформулировали на исследовании: отклик находится рядом с доступной зоной действий и остаётся в периферийном поле зрения. Название, количество, цена и статусы разделены иерархией, чтобы покупатель мог быстро проверить последнюю позицию и продолжить сканирование.
Поиск и взвешивание без потери контекста
Если у товара нет штрихкода, покупатель переходит в каталог или поиск. Категории различаются по изображениям, часто выбираемые позиции находятся ближе к началу, а карточки показывают фотографию, название и цену. Последовательную навигацию, выбранную после тестов, дополняет доступная в контексте каталога кнопка поиска.
Для ввода разработали компактную клавиатуру: её размеры соотнесли с экраном и зоной досягаемости, чтобы человеку не приходилось широко двигать рукой. Буквенная и цифровая раскладки поддерживают разные задачи ввода. На время получения данных из базы магазина предусмотрели состояния загрузки, чтобы интерфейс продолжал показывать отклик.
После выбора весового товара карточка остаётся с покупателем при переходе к взвешиванию. Рядом появляется инструкция, связанная с расположением весов. Так экран сохраняет контекст: человек видит, какой продукт выбран и что нужно сделать дальше.
Подсказки в нужный момент
Когда покупатель сталкивается с проблемой, подпись должна помочь продолжить действие. Мы переписали тексты в контексте самообслуживания: «Помощник» стал «Вызвать помощника», а «Товар без штрих-кода» — «Выбрать товар». В сообщениях об ошибках объяснили следующий шаг. Иллюстрации показывают, куда приложить карту или перенести покупку.
Уведомления разделили по роли. Контекстные подсказки сопровождают обычную покупку, ошибки привлекают внимание к проблеме, а блокирующие состояния останавливают сценарий до её решения. Например, при несоответствии веса нужно исправить положение товаров или обратиться к сотруднику.
Анимацию добавили там, где требуется переключить внимание с товара на экран. При обычном сканировании постоянное движение отвлекало бы от работы со штрихкодами. Поэтому заметный отклик связан с событием, которое требует участия покупателя.
Отдельно проработали проверку возраста. Маркеры в списке заранее показывают, какие товары потребуют подтверждения. Если возраст подтвердить нельзя, консультант может удалить эти позиции и сохранить остальную покупку.
Оплата и завершение покупки
К оплате покупатель приходит с понятным составом суммы: на экране видны скидки, бонусные баллы и доступные способы расчёта. Иллюстрация помогает найти банковский терминал и выполнить действие за пределами дисплея кассы. Для карты лояльности и других вариантов оплаты предусмотрены собственные состояния.
Завершение связали с выбором чека: его можно напечатать или получить по электронной почте либо SMS. Для электронной версии предусмотрели ввод контактов. Последовательность экранов объясняет, когда покупка закончена и можно забирать товары.
Передача в разработку
По мере работы согласовывали решения с разработчиками и показывали прототипы команде CSI на устройстве. Это помогало обсуждать экран в реальном масштабе и учитывать технические ограничения. В UI-kit и спецификации собрали элементы, переходы, загрузку, длинные данные и переполнение — внешний вид вместе с правилами поведения.
Результат
CSI получила систему экранов от начала покупки до получения чека. Расположение действий и подсказок опирается на наблюдения в магазинах, сценарии проверены на устройстве, а визуальные правила объединяют разные состояния и варианты брендирования. Для разработки подготовили прототипы, UI-kit и спецификацию.
Команда CSI внедрила обновлённый интерфейс. В ноябре 2024 года компания рассказала о совместной работе со Студией Райт в своём блоге.
Разрабатываете кассу самообслуживания или обновляете интерфейс терминала? Расскажите, как покупатели пользуются устройством и на каких шагах им нужна помощь. Обсудим, с чего начать.
