Как мы приземлились лицом об асфальт, пока проектировали интерфейс касс самообслуживания

Всем привет! Я Женя Белодед, ex-арт-директор в Студии Райт. К нам пришел клиент — CSI, разработчик IT-решений для автоматизации ритейла. Его запрос — обновить интерфейс касс самообслуживания CSI K, которыми будут пользоваться покупатели в 90 торговых сетях России и СНГ.

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

В первой части я рассказывал о том, как мы исследовали в полях интерфейсы конкурентов в 4-х странах и придумывали схемы ухода от охранников. В результате этапа исследования у нас появились:

С этой базой идем на следующий этап — проектирование.

Сегодня о важности проектирования в контексте и о том, как окружение интерфейса и его эргономика все меняют. Спойлер: без факапов не обошлось, но они сделали нас сильнее! Погнали!

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

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

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

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

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

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

Как мы уже говорили, устройство самообслуживания — это не только интерфейс. Это еще и окружение и даже состояние пользователя: то, с чем человек приходит (устал, встревожен, опаздывает), и то, как на него влияет окружение (отвлекает, расслабляет и т.д.). Учитываем это в портретах и сценариях — добавляем взаимодействие с окружением и имеем в виду контекст, в котором находится пользователь.

Обсуждаем сценарии внутри команды проекта и находим слепые места, на которые еще нужно обратить внимание:

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

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

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

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

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

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

Самое главное для чего нам нужна касса — для взаимодействия с устройством с тем же форм-фактором в максимально приближенной к магазину среде. Одно дело смотреть на результат работы в Фигме на горизонтальном экране Мака, и другое — когда перед тобой 32-дюймовый вертикальный «телевизор». Не выходя за пределы Фигмы легко накосячить с масштабом и контрастностью кнопок: то, что контрастно на Маке, выглядит совсем по-другому на 32-дюймовом экране устройства с охватом менее 90% SRGB. К тому же когда ты сам тыкаешь свой интерфейс, представляя, что за тобой очередь в 20 человек, то иначе на все смотришь.

Собираю кассу лично, чтобы понять, как все устроено внутри. Пришлось повозиться с сенсорным слоем и драйверами на Мак, но по итогу — завелось! Чтобы максимально повторить контекст кассы в магазине, заморачиваюсь и размещаю ее в офисе ровно на той высоте, на которой она стоит и в магазине.

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

Теперь все совсем как в магазине — можно проектировать и имитировать покупки, перекладывая «товары» с платформы на платформу во время тестов.

По итогу этот процесс выглядит так:

Работаем в Фигме → параллельно выводим разработанные экраны на кассу → тестируем → дорабатываем.

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

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

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

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

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

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

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

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

С помощью коридорных тестов находим важные нюансы, о которых можно и не догадаться, работая только в Фигме. Некоторые из них:

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

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

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

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

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

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

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

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

Все замечания и новые идеи оставляются комментариями в Фигме и потом обрабатываются.

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

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

То, о чем я написал выше — где-то около 30% всей работы над этапом проектирования. Я поделился самыми значимыми и глобальными решениями, которые стали фундаментом для интерфейса, но за кадром осталось еще много всего, над чем мы ломали голову.

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

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

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

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

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

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