Идеальная картина для любого продавца: клиент пришел и сразу же совершил покупку. Такое возможно, если проанализировать шаги покупателя от знакомства с продуктом до покупки и максимально их упростить.
В статье рассказываем что такое путь пользователя, зачем он нужен, как составить user flow и как выглядят CJM на его основе.
Что такое User flow
User flow или путь пользователя — это цепочка действий пользователя при взаимодействии с продуктом, его маршрут путешествия. Путь пользователя оформляется в карту — CJM, или Customer Journey Map.
Аналог термина — воронка продаж. Воронка продаж — это маркетинговый термин, подходящий больше для бизнеса. Он показывает путь от предложения до покупки и все каналы коммуникации, через которые он взаимодействует с компанией. User flow — это больше про клиента и потенциального покупателя, его шаги и действия.
С помощью пути пользователя можно разобраться:
- что думает потенциальный клиент;
- что он чувствует;
- чем руководствуется при выборе продукта;
- что его останавливает от выбора и чего он боится.
Может быть создан для сайта, мобильного приложения, конкретной функции или глобально от момента знакомства с продуктом: от его покупки и использования до оставления отзыва, рекомендации и возврата за последующей покупкой.
Другие названия user flow: UX flow, user flow charts, interaction flows, activity flows, user interface flows, navigation flows, user flow diagrams, task flow diagrams.
Зачем нужен User flow
Путь пользователя подробно отражает каждый шаг клиента и его действия на нем.
Например, у нас есть товар — диваны фирмы N.
Потенциальный покупатель в текущий момент делает ремонт и ищет стройматериалы, мебель, шкафы. Уже на этапе поиска, например, натяжных потолков, пластиковых окон или напольного покрытия его может настигнуть контекстная или таргетированная реклама.
![Пример таргетированной рекламы](/upload/blog/768/1.png)
Допустим, по ней он перешел в соцсети фирмы N, продающей диваны, и подписался на них. Его ремонт еще на начальных стадиях и до мебели еще несколько месяцев. Но первое «касание» бренда уже произошло, он сохранил контакт и дальше продолжается их взаимодействие.
Через какое-то время он увидел в ленте посты компании, заинтересовался моделью и приятными ценами, перешел на сайт, там посмотрел. Но ему еще рано покупать диван, он просто смотрит или добавляет товары в закладки. Это второе «касание».
Далее, например, увидел пост о том что для подписчиков рассылки ВК особые условия, скидки и присылают подборки новинок и поступлений в наличие. Подписался, есть третье «касание».
Пришло письмо рассылки со скидкой, если оформить заказ и внести предоплату до определенного числа. Клиент видит подходящую модель, он уже хорошо знаком с компанией и доверяет ей, но этап со сбором мебели в его ремонте еще не скоро. Он оформляет доставку на нужный ему срок, вносит предоплату и приобретает товар по приятной цене. Есть конверсия и четвертое «касание».
Спустя 2 месяца к выбранной дате ему доставляют его диван. Помогают занести домой на третий этаж, сразу собирают при нем и в подарок компания дарит ему две подушки. Клиент всем доволен и оставляет отзыв о компании. Получаем еще один шаг взаимодействия с компанией.
В компании действует система лояльности и за отзыв клиент получает 5 % скидку. Это мотивирует его обратиться снова и заказать кресло-мешок в цвет дивана. Шестой шаг на пути пользователя совершен. Он стал нашим постоянным клиентом.
В итоге имеем шаги в цепочке взаимодействия:
- Увидел таргетированную рекламу в ленте, совершил действие — подписка на сообщество.
- Увидел посты компании, зашел в сообщество или на сайт — просто посмотрел или добавил товар в закладки.
- Увидел пост с особыми условиями и предложениями для подписчиков рассылки— подписался.
- Получил письмо с уникальным предложением — оформил заказ.
- Получил товар, остался доволен товаром и сервисом — оставил отзыв.
- Поучаствовал в программе лояльности, получил бонусы или скидку — совершил повторный заказ.
Разобрав несколько таких цепочек путей и составив из них карту путешествий, компания может ее оптимизировать: уменьшить количество «касаний», необходимых для конверсии, или наоборот добавить прогревающих этапов.
На этапе дизайна, при разработке UX и прототипов сайта и приложений user flow может помочь выбрать самый прямой путь достижения цели и сделать его как можно более коротким и простым.
Примеры использования User flow
Путь пользователя может быть построен для любого продукта, процесса или отдельной функции. Чаще всего, user flow применяют для описания онлайн-процессов, так как в интернете с помощью сервисов аналитики и статистических данных можно отследить каждый шаг пользователя, например:
- количество подписавшихся на рассылку;
- количество переходов на сайт;
- количество тех кто открыл и дочитал статью;
- количество посетителей сайта;
- количество скачиваний приложения;
- соотношение тех, кто добавил товар в корзину и тех кто завершил оформление заказа;
- и многое другое.
![Пример пути после оформления заказа](/upload/blog/768/2.png)
При необходимости, user flow может быть составлен для изучения оффлайн-процессов. Например, процесса покупки товара в магазине. Для его составления может проводиться маркетинговое исследование, опросы или анкетирование клиентов.
Пример для мобильного приложения
Пользовательские пути для мобильных приложений могут быть отрисованы абсолютно по разному. Они могут состоять из скриншотов и прототипов экранов или быть отрисованы как блок-схема.
Блок-схемы user flow приложения имеют:
- начальную точку входа;
- конечную точку, где цель достигнута;
- кнопки;
- варианты действий и необходимость сделать выбор из нескольких вариантов;
- скриншоты или описания экранов и состояний.
![Пример готового пути для мобильного приложения. Источник изображения: freelance.ru](/upload/blog/768/3.png)
Пример User Flow для сайта или веб-приложения
В интернет-магазинах путь может начинаться с захода на главную страницу или попадания сразу на целевую страницу с рекламы, из соцсетей, с рассылки, с другого сайта или при переходе по ссылке от другого пользователя.
Блок-схема пути содержит все этапы, которые потенциальному клиенту необходимо пройти с момента знакомства с компанией и продуктом до оформления и оплаты товара.
![Пример пути интернет-магазина. Источник изображения: www.behance.net](/upload/blog/768/4.png)
Как составить User flow
- Составить портреты аудитории, провести анализ ЦА.
- какого они пола в большинстве своем;
- где географически находятся;
- чем интересуются, какие хобби и предпочтения имеют;
- что ими движет при совершении покупки, на что они обращают внимание;
- что их останавливает от покупки, чего они боятся, что их отталкивает;
- какие триггеры заставляют их действовать.
- Создать примерный пошаговый план действий пользователя.
- Оформить путь в одном из сервисов.
На первом этапе нужно понять кто наши пользователи и потенциальные покупатели:
Понимание того, что мотивирует клиентов к совершению покупки, что влияет на их выбор или может оттолкнуть и заставить уйти к конкурентам, помогает спроектировать максимально короткий путь до цели.
Перед тем, как создавать красивые схемы в сервисах, нужно хотя бы примерно накидать для себя весь процесс, чтобы не забыть важных деталей увлекшись оформлением.
В наброске обязательно должна быть точка входа, конечная цель и действия, которые приведут из точки входа к выполнению цели.
Если готовый документ необходимо презентовать заказчику, коллегам или работать с ним совместно с командой, без сервисов и шаблонов не обойтись.
Программы для создания User flow
User flow может быть создан как с нуля вручную в любом из графических редакторов, так и выполнен на готовых шаблонах сервисов. Второй вариант значительно ускоряет и оптимизирует работу, а также позволяет вносить правки сразу от всех членов команды.
Шаблон в Miro
Ссылка: miro.com/templates/user-flow/
Сервис Miro позволяет создавать доски с диаграммами и схемами как в одиночку, так и целой командой разработки. При выборе специального шаблона для составления пути пользователя открывается диаграмма в которую можно сразу добавить:
- скриншоты шагов;
- названия кнопок или действий;
- точки, где требуется сделать выбор с вариантами действий;
- легенду с обозначениями.
![Стандартный вид пустого шаблона Miro для user flow](/upload/blog/768/5.png)
Шаблон UX Flow для Figma
Ссылка на шаблон: www.figma.com/community/file/830510773896272856
Шаблон для Figma сразу после копирования доступен для редактирования в одиночку. Для того чтобы расшарить проект для команды, его необходимо переместить из черновиков в проекты. Внутри шаблона имеются две страницы: с компонентами, которые можно применять для создания собственного user flow, и страница с примером готового пути пользователя.
![Пример готового user flow в Figma](/upload/blog/768/6.png)
Что важно учесть при построении User flow: советы по созданию хорошего User flow
- Давать понятные и однозначные названия, делать подписи и комментарии. Возможно к документу с user flow придется возвращаться через какое-то время, передавать его другому специалисту или презентовать клиенту. Путь пользователя должен быть разработан так, чтобы через любое прошедшее время вы сами могли вспомнить и понять все его содержимое.
- Минимизировать запутанные сценарии, зацикленность, упрощать. Бывают клиенты, которые настраиваются на покупку годами, смотрят, сравнивают, уточняют, прицениваются и только после этого заказывают. Но это скорее исключения из правил, чем привычный случай. Обычно путь пользователя довольно короткий и ясный. Если вы сами в нем запутались пока описывали, вы что-то делаете не так и надо упрощать и разбираться заново.
- Одна цель на один путь пользователя. Не стоит распыляться. Есть цель, есть шаги к ее выполнению. Попутно клиент может совершать и неосновные действия, но главная цель каждого пути всегда будет одна.
- Добавить к схеме легенду с обозначениями. Часто путь пользователя создается в виде блок-схем. Для более быстрого понимания можно выбирать одинаковые фигуры и обозначения для аналогичных объектов или действий. Эти данные выносятся в легенду.
- Стремиться к минимализму и единообразию. Использовать минимум цветов для разметки, выделять одним цветом одни и те же смысловые элементы, использовать готовые шаблоны.
- Если есть сомнения в каких-то шагах или действиях — проводить доп исследования. Все что вызывает вопросы, запутывает или кажется нереалистичным, должно быть проверено.
Коротко о главном
- Проектирование пути пользователя помогает проанализировать всю цепочку действий пользователя от точки входа до выполнения поставленной цели.
- На этапе дизайна и проектирования user flow является очень полезным инструментом, помогающим команде создать эффективный интерфейс и упростить все процессы. Команда имеет возможно еще до запуска проекта отладить его и устранить все сложности, затрудняющие взаимодействие.
- Создание пути пользователя помогает всей команде иметь единое представление о том, как работает продукт, проходят процессы или функционируют отдельные части.
Комментарии