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

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

Звучит масштабно, ответственно и интересно — то, что мы любим.

Когда я пишу «мы» — имею в виду вполне конкретных людей. Над проектом работали: Саша Ревяко, арт-директор и основатель студии, помогал в кризисных моментах, махал руками и «перевернул» интерфейс; Женя Белодед, арт-директор по UX/UI, автор этого текста, исследовал, генерировал и лидил проектную работу; Лёша Захаревич, UX/UI-дизайнер, спроектировал кучу флоу, анимировал банан и играл с кнопками; Валера Обуховский — менеджер, держал всех в фокусе и выстроил чёткую работу по деливери в срок.

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

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

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

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

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

Теперь можно идти копать.

Изучаем контекст кассы — как и в каком окружении пользователи с ней взаимодействуют

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

Нам повезло: нашли кассы CSI в минских «Гиппо». Бежим туда покупать булки, тестировать кассу и общаться с консультантами.

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

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

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

Разбираемся с физическими особенностями устройства самообслуживания

Особенности пользования кассой

Высота терминала CSI — почти 2 метра, а дисплей кассы — 32 дюйма. Люди разные: не всем удобно таким пользоваться. Убеждаемся в этом еще в магазине, когда видим, как девушка ростом около 155 см иногда тянется до нужных кнопок на экране, расположенных высоко. Расстояния добавляет еще и то, что перед кассой — весовая платформа, из-за которой к экрану не подойдешь вплотную.

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

Слепые зоны устройства

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

Фиксируем вопросы про высоту экрана для обсуждения с клиентом. Уменьшить размер дисплея не получится, поэтому будем работать с тем, что есть. Думаем о зонировании экрана: распределении элементов интерфейса относительно доступности области экрана.

Специфика устройства

Кассы условно можно разделить на два типа по оснащению: кассы с контрольно-весовой платформой (КВП) и без.

Касса с контрольно-весовой платформой (КВП)

Касса без КВП контрольно-весовой платформы

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

Проводим аудит прежнего интерфейса

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

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

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

• Нет сквозной навигации по каталогу, неочевидная кнопка поиска — что снижает скорость нахождения товара и совершения покупки соответственно.

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

• Неоднозначные формулировки в интерфейсе, которые путают.

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

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

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

• Нет фото для категорий товаров — из-за этого невозможно быстро и не вчитываясь выбрать нужное.

• Плохая контрастность элементов интерфейса.

• Нельзя выбрать опцию упаковать товары в свой пакет. Экологи и Грета Тунберг негодуют.

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

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

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

Учитываем бизнес-ограничения

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

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

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

Анализируем интерфейсы конкурентов

Формируем сценарии для универсализации исследования

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

Формируем корзину и сценарии сканирования, которые учитывают большинство «узких» мест и нюансов каждой кассы: в том числе ошибки, когда что-то идет не так, и взаимодействие с администратором.

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

Проводим исследование сразу в 4 странах

У нас распределенная команда. Дизайнер живет в Польше, я как арт-дир — на тот момент был в Минске и Тбилиси, менеджер — в Гродно. Иногда это, конечно, усложняет взаимодействие (не обсудишь нейронки за чашкой кофе на кухне), но в этом проекте сыграло на руку. Наша разбросанность дает возможность посмотреть на международный опыт и потыкать своими руками разные форматы интерфейсов прямых и непрямых конкурентов. У непродуктовых касс тоже много специфических сценариев — а значит, тоже классных решений.

Как выглядел процесс исследования в полях

1. Приходим в магазин изучать нужную нам кассу самообслуживания.

2. Набираем корзину товаров из сценария.

3. Идем на кассу самообслуживания, снимая окружение и все вокруг. Важна каждая деталь. Лучше снять больше, чем меньше.

4. Пока стоим в очереди, внимательно наблюдаем за поведением покупателей и делаем заметки.

5. Пробиваем по сценарию, записываем все на видео.

6. Часть действий в интерфейсе доступны только для консультанта: например, подтверждение покупки товаров 18+, решение ошибки из-за несовпадения веса и так далее. Включаем такие кейсы в тестовый сценарий и общаемся с консультантами. Делаем это не в пиковые часы, а ближе к закрытию — когда в магазине посвободнее и консультант более расположен к разговору.

7. Опционально. Дергаем кого-то из покупателей, чтобы пообщаться и узнать, какие есть сложности, что нравится и что хотелось бы поменять.

8. Заканчиваем съемки по сценарию и идем пить купленное пиво.

9. Делим в снятом видео стоп-кадры по экранам и распределяем их в последовательный сценарий в Фигме.

10. Добавляем туда заметки с полей.

11. Анализируем плюсы и минусы снятого интерфейса.

В Польше идем в Ikea, Lidl, Carrefour, Zabka. В Беларуси — в «Гиппо» смотреть на кассы CSI в старом дизайне, а еще в «Евроопт», «Санту» и другие места, где стоят интерфейсы самообслуживания. Зашли даже в Мак, чтобы глянуть, как там живется интерфейсу на большом экране.

Важно понимать, что каждый новый магазин ≠ новая касса и интерфейс. Есть ведущие мировые производители, которые делают свои коробки и поставляют их во многие сети. CSI — как раз один из таких на рынке СНГ.

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

Со временем, магазины, до которых мы могли дотянуться сами или через знакомых, закончились. В чат входит Гугл. Находим материалы по некоторым магазинам и терминалам — и так подсматриваем еще интересные моменты.

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

Общаемся с администраторами и консультантами

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

Занятный факт. В Тбилиси я так и не нашел кассу с весовой платформой: в основном, там стоят кассы с пикером и кнопкой «купить». Видимо, там высокий уровень доверия к покупателю: ты просто сканишь товар, кладешь его в сумку и уходишь.

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

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

Раскладываем по сценариям и анализируем плюсы минусы каждого экрана и флоу

Когда провели исследование — сводим все в общие выводы и начинаем декомпозицию.

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

Еще из находок:

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

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

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

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

• Товар на акции или со скидкой обозначается специальной маркировкой в списке покупок — такая наглядная разница «было-стало» создает наглядность экономии и снижает стресс от покупки.

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

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

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

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

Формируем принципы будущего интерфейса с учетом добытых знаний

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

Вот принципы, которые у нас получились:

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

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

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

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

Что у нас есть в результате

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

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

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

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

Главные заповеди этапа

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

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

• Смотрите непрямых конкурентов — там тоже можно наловить инсайтов.

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

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

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

Стали с кассами и консультантами на «ты», с охранниками — на «вы» и наловили инсайтов. Теперь можно идти в проектирование и делать первые приседания в дизайне → об этом в следующей серии.

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