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

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

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

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

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

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

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

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

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

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

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

• продавцам не нужно будет обслуживать каждый чек: они будут меньше уставать и следовательно кричать «Галя, неси отмену»,

• магазину будет легче управлять потоком покупателей и уменьшать очереди,

• покупатели сэкономят время и смогут избежать лишнего общения.

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

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

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

От пенсионера до студента: формируем сценарии для каждой из персон

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

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

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

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

• как редактировать список покупок,

• как подтверждать покупку товаров 18+,

• как купить пакет,

• как оплатить покупки подарочным сертификатом,

• ещё xx кейсов и мысли о том, как будет вести себя касса, если покупатель отпил воду, пока стоял в очереди.

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

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

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

Ныряем в проектирование интерфейса

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

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

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

Просим привезти нам кассу в офис

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

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

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

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

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

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

Методом проб и ошибок формируем принципы интерфейса

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

Расслоение экрана

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

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

Трансформируемые подсказки в списке покупок

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

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

Но если возникает ошибка, зона меняется — становится красной и привлекает внимание покупателя.

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

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

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

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

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

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

2. Мелкие элементы интерфейса теряются из вида при взаимодействии с кассой периферийным зрением и в контексте визуального шума вокруг. Делаем их крупнее.

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

4. Если терминал стоит напротив окна или двери, на темном интерфейсе ничего не видно — бликует. Интерфейс в светлых тонах частично решит проблему с бликами.

Линейная навигация по каталогу

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

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

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

Понятное взвешивание товаров

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

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

Презентуем решения клиенту на каждом этапе

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

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

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

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

Движение товара снизу вверх

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

Блок «популярное»

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

И еще куча нюансов

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

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

Что у нас есть по итогу проектирования

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

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

Выводы

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

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

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

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

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

Идем в концепцию

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

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

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