Привет! Я Женя Белодед, ex-арт-директор в студии Райт. Это третья и заключительная статья о том, как мы обновляли интерфейс касс самообслуживания CSI K.

В первой статье я рассказывал про исследования, во второй — о прототипировании.

После этих этапов у нас был солидный багаж артефактов:

1. Анализ конкурентов.

2. Детальный аудит текущего интерфейса.

3. Сценарии и кейсы того, как воруют на кассах самообслуживания.

4. Сформированные принципы будущего интерфейса.

5. Прототипы, которые покрывают 98% основных кейсов и пользовательских сценариев.

6. Новые сценарии, например, процесс списания баллов с карты лояльности.

Расскажу, как мы разрабатывали концепцию и дизайн проекта по редизайну касс самообслуживания и искали баланс между требованиями бизнеса, пользовательским опытом и визуальным стилем.

Пролог

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

Изначально мы предполагали, что касс с контрольно-весовой платформой (КВП) большинство. Реальность оказалась противоположной: у 80% касс не было КВП.

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

Работы нам это прибавило, но на предыдущий этап не откатило. Мы не стали возвращаться к прототипам и внедрили элементы проектирования новых сценариев прямо в процесс разработки дизайна. Это помогло нам сократить время работы и сэкономить деньги клиенту.

Переходим от прототипов к концепции

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

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

Но не будем забегать вперед, работаем над концепцией.

Мы накидывали варианты и искали решения внутри команды. Потихоньку что-то начало вырисовываться. Решили поделиться с клиентом идеями и заодно показать текущий статус работы и… услышали вопрос:

«А где дизайн?»

Для клиента разница между прототипом и концепцией оказалась совсем не заметной. В мире клиента мы просто «покрасили кнопки». И клиента можно понять.

Наша проблема была в том, что мы сделали слишком детализированные прототипы.

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

Вернемся к концепции. К нашему «рабочему» варианту у клиента были вопросики. Мы выслушали все пожелания и ушли в работу и поиск идей.

Концепция 1

Пробовали разное, в том числе и темные темы, чтобы визуально уменьшить экран.

По итогу от темных тем отказались, потому что экран сильно бликовал, и остановились на следующем:

• За счет цвета визуально уменьшили рабочую зону, чтобы всем покупателям было удобно с ней взаимодействовать.

• Переосмыслили список покупок и расположение буферной зоны. Поняли, что низ это низ и там должна быть кнопка «Купить».

• Нижнюю часть также использовали для подсказок, потому что она всегда находится в поле бокового зрения.

• Цвета сделали нейтральными, чтобы при брендировании ничего не ломалось.

Полноценно презентовали готовую концепцию команде CSI. Получили фидбек, что все нормально, нужно внести минорные доработки и можно масштабировать.

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

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

Коммуникация шла через посередника, команду CSI, что создавало некоторые сложности. Тем не менее, в процессе обсуждений выяснилось, что концепции не хватает легкости.

Концепция 1 → Концепция 1.5

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

Мы сделали вот что:

• Переработали цветовую схему: сделали ее нейтральнее и светлее за счет добавления белого.

• Нижний блок законтрастили с основным, чтобы усилить на нем акцент.

Но в ожидания снова не попали. Легкости все еще не хватало. В ходе общения поняли, что клиент видит интерфейс в белом цвете и более технологичным.

Это стало сигналом, что нам нужно по-новому взглянуть на проект, и мы решили перезагрузиться.

Полный ребут

Мы сели и начали рисовать новые концепции. Полностью абстрагировались от того, что есть, искали абсолютно новый стиль. Рисовал я, дизайнер, владелец студии Саша Ревяко, рисовали все, даже менеджер предлагал варианты.

В итоге мы создали два новых варианта концепции. Учли все нюансы и детали от команды CSI, а еще изменили подход к презентации — не просто собрали презентацию и кликабельный прототип, а заморочились со сторителлом и онлайн-демонстрацией интерфейса прямо на кассе.

Кроме того, мы вели работу над новой концепцией в Фигме, куда у клиента не было доступа. Обычно мы даем клиенту полный доступ к рабочим файлам, но здесь нашей задачей было достичь эффекта новизны, поэтому пошли другим путем.

И вишенка на торте — мы добились того, чтобы ВСЕ лица, принимающие решения, были на презентации новых концепций.

Концепция N

В процессе обсуждений с командой CSI мы выделили три ключевых принципа будущего дизайна: воздух, свобода и пространство. На их основе мы переработали визуал, сделав его легче и гибче:

• Добавили больше воздуха, при этом учли масштабирование под разные языки, валюты и длину названий товаров.

• Использовали цвет, чтобы создать ощущение легкости и выделить важные элементы.

• Сделали более заметным товар в буферной зоне и итоговую сумму за счет насыщенности начертания.

Кроме этой концепции на презентации мы показали еще одну — с чуть более строгими, прямоугольными формами и акцентом на кнопке.

В итоге клиент выбрал первый «легкий» вариант — он лучше соответствовал общей логике касс самообслуживания.

После небольших доработок мы получили зеленый свет от всех участников процесса и приступили к финальному дизайну.

Этап концепции — уроки

• Детализация прототипов. Важно корректно выбирать степень детализации. Высокая степень детализации может стереть грань между прототипами и концепцией.

• Гибкость. Иногда приходится совмещать этапы проектирования и дизайна, и это нормально. В нашем случае мы вносили изменения в сценарии прямо в процессе создания концепции, что помогло сэкономить время.

• Презентация имеет значение. Правильная подача концепции усиливает впечатление. Мы, например, ограничили доступ к Фигме, что помогло добиться эффекта «вау», благодаря сочной подаче в мокапах.

• Частая коммуникация с клиентом. Постоянный коннект с командой помог нам сразу скорректировать ситуацию.

• Начинать все сначала — не страшно. Иногда стоит отказаться от уже сделанных наработок и попробовать создать все с нуля. Это помогает найти новые решения и не ограничивать себя старыми идеями.

Дизайн

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

Например, мы пересмотрели визуальную систему и упростили интерфейс:

• Убрали лишние элементы, чтобы усилить ощущение воздуха и пространства. Иногда нужно что-то добавить, чтобы потом осознанно от этого отказаться.

• Улучшили иконографику, что помогло сделать акцент на скидках и выделить карту лояльности.

• Минимизировали использование цвета, оставив его только для ключевых элементов — маркировки списка товаров и кнопки перехода к оплате.

• Полностью пересмотрели систему подсказок.

В целом при разработке дизайна мы опирались на следующие принципы:

• Адаптивность. Дизайн должен легко подстраиваться под разные бренды, ведь кассы поставляются в десятки торговых сетей.

• Контекст и особенности. Покупатель взаимодействует не с интерфейсом, а с товарами: сканирует, перекладывает, пакует. В идеальном мире кассы не должно быть вообще — берешь товар и уходишь.

• Фокус на функциональность. Дизайн должен помогать, сопровождать, но не отвлекать.

• Соответствие пожеланиям клиента. Важно учитывать требования заказчика, чтобы интерфейс соответствовал его ожиданиям и бизнес-задачам.

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

Дружелюбный интерфейс — дружелюбная коммуникация

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

Понятные уведомления

В интерфейсе мы предусмотрели несколько типов уведомлений — блокирующие уведомления, контекстные подсказки, ошибки.

Блокирующие уведомления не позволяют двигаться дальше, пока проблема не решена. Нужно звать помощника или решить проблему самостоятельно, чтобы продолжить покупку. Это кейсы несоответствия веса или проверки возраста.

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

Уместная анимация

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

Скелетная загрузка

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

Кастомная клавиатура

Компактная клавиатура сделана с учетом эргономики и позволяет человеку не размахивать руками у терминала в попытках ввести наименование товара. Это наша собственная разработка. Мы выверяли размеры всех прямоугольников относительно экрана, чтобы все было разумно и удобно для пользователя.

Незаметный шрифт

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

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

Соответствие стандартам контрастности

Мы проверили весь интерфейс на соответствие стандартам контрастности WCAG AA. Это значит, что все элементы хорошо читаются при разном освещении и на любых экранах.

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

Брендирование под любой магазин

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

Адаптивное начало покупки

Мы сделали все так, чтобы пользователь приступал к покупке любым удобным способом в зависимости от своего контекста:

• Иностранец начнет со смены языка.

• Много покупок и нет своей сумки — лучше сразу взять пакет.

• Пенсионерка, которая решила впервые воспользоваться устройством, но боится нажать не туда, позовет помощника.

• Матерые пользователи сразу отсканируют товар, не нажимая ничего на экране.

Быстрый поиск товаров

Покупатель находит товары, у которых нет штрих-кода (например, выпечку или фрукты) несколькими способами: через поиск или навигацию по каталогу.

Самые частотные товары в каталоге — вперед. Ненавязчивая и сквозная кнопка поиска — всегда рядом.

Список товаров — всегда на виду

Экран устройства — огромный. Верхняя зона интерфейса неудобна для взаимодействия, а значит все важные элементы размещаем в нижней области экрана.

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

Взвешивание товара без потери контекста

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

Покупка товаров 18+

Нумерация не напрягает, но заметна и сообщает пользователю дополнительную информацию: значок 18+ — ага, нужно подготовить паспорт.

Нет 18 — даем возможность администратору удалить товары, не отменяя всю покупку.

Удобный выбор пакета

Ориентируем покупателя по весу, который выдерживают пакеты.

Понятная оплата

Покупателю понятно, как формируется сумма: какая скидка по акциям, бонусным баллам и электронным фишкам.

Иллюстрацией помогаем сориентироваться, где и какие действия нужно провести не на экране.

Электронный чек

Не всем нужен чек. Даем возможность отказаться от печати и получить чек по электронной почте или SMS — меньше мусора в карманах.

Детальный UI-кит, спецификация интерфейса

На этом этапе мы вышли за рамки типичной сборки UI-кита. Активно взаимодействовали с разработчиками, чтобы учесть особенности проектирования интерфейсов именно для касс самообслуживания.

В результате у нас получилась полноценная спецификация, где мы показали не только элементы и анимацию, но и проработали адаптивность, сценарии переполнения и разные состояния интерфейса. Такая детализация сильно помогла разработчикам. И что важно — UI-кит и спецификацию мы подготовили всего за 5 дней.

Полетели!

Кассы CSI K уже запущены. Кассиры меньше устают, магазины обслуживают больше клиентов, а покупатели меньше стоят в очередях и скорее идут жить свою жизнь.

Ищите кассы CSI K в магазинах вашего города и не стойте в очередях.

Что в итоге

Этот проект стал для нас, и в частности для меня, ценным опытом: мы сделали многое, чем можем гордиться, и еще больше узнали о том, как улучшить процессы в будущем. Были сложные моменты, недочеты, ситуации, которые можно было бы предусмотреть заранее. Но ошибки — это часть работы, особенно на таких масштабных проектах.

Ошибки — не конец света, а обычный рабочий процесс. Если бы все прошло идеально, это скорее означало бы, что кто-то недосмотрел, недоделал или не проявил достаточно критического подхода.

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

Мы рады, что все это стало для нас совместной работой — созданием чего-то действительно значимого. Проект продолжается, все внедряется и тестируется, и мы надеемся на дальнейшее сотрудничество. Круто быть частью такого важного дела!

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