Интерфейс любого цифрового продукта — это не набор красивых картинок, а в первую очередь последовательность действий пользователя, которая должна быть логичной и комфортной. Дизайн начинается не с экранов, он начинается с ответов на вопросы: кто мой пользователь, какой путь он проходит и где могут возникнуть трудности? Ответить на эти вопросы помогают два инструмента — CJM (Customer Journey Map) и User Flow.

Что такое CJM?

CJM (Customer Journey Map) — это карта пути пользователя, история взаимодействия человека с вашим продуктом от момента, когда он узнал о нём, до момента, когда достиг цели (и даже после). Она фиксирует эмоции, действия, точки контакта и боли на всех этапах.

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

Как составить CJM

Чтобы составить карту пути клиента, следует последовательно выполнить следующие шаги:

1. Определить цели и задать рамки проекта.
2. Изучить целевую аудиторию.
3. Составить портрет клиента.
4. Прописать путь клиента.
5. Разделить путь клиента на ключевые этапы.
6. Обозначить текущие проблемы на каждом этапе.
7. Визуализировать CJM.

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


Пример карты пути пользователя CJM

Ваша CJM не обязательнодолжна быть большой и сложной — все зависит от сервиса и потребностей команды.

Что такое User Flow?

User Flow — это визуальная схема шагов, которые пользователь совершает в интерфейсе, чтобы достичь цели. Если CJM отвечает на вопрос «что чувствует и делает пользователь на каждом этапе?», то User Flow отвечает на вопрос «по каким именно экранам и кнопкам он идёт?»

User flow помогает:

1. Понять, где начинается и заканчивается путь пользователя
2. Увидеть, есть ли лишние шаги или наоборот есть ли логические пропуски
3. Помогает продакт-менеджеру, дизайнеру и команде разработки обсуждать продукт

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

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

Как составить User Flow

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

• task flow;
• wire flow (lo-fi);
• screen flow (hi-fi).

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



Таблица 1. Элементы блок-схемы для составления Task Flow.

Далее перейдем к этапам, которые нужно выполнить при создании User Flow.

1. Определить точку входа (где начинается путь пользователя, и в каких условиях он находится).
2. Продумать путь пользователя (какая последовательность действий его приведет к желаемому результату).
3. Указать точки выбора (какое решение должен принять пользователь, обозначить переходы и связи между блоками).
4. Дополнить второстепенными элементами (уведомления, подсказки, всплывающие окна).
5. Проверить какие проблемные места есть в вашей схеме (можно сразу предложить решение).
6. Оформить User Flow в наглядную блок-схему (для этого можно использовать такие программы, как FigJam, Miro, Overflow и др.).

Ниже представлен пример User Flow в виде блок-схемы.



User Flow для интернет-магазина (выполнен в FigJam)

Таким образом, правильно составленный User Flow позволяет выявить и упростить лишние действия, которые снижают конверсию. А понимание потребностей пользователя увеличивает шансы команды сделать успешный продукт.

Отличия CJM от User Flow

Если CJM показывает весь путь клиента, включая его эмоции и ощущения от продукта, то User Flow отражает ту часть опыта клиента, которая касается работы с интерфейсом. Ниже приведена таблица отличий CJM и User Flow по основным критериям (Таблица 2).



Таблица 2. Различия между CJM и User Flow

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

Чек-лист (3 минуты на самопроверку)

CJM (путь и чувства):
☐ Знаю, где пользователь впервые узнал о продукте
☐ Понимаю, что он чувствует на каждом этапе
☐ Вижу главные боли и причины ухода

User Flow (шаги и клики):
☐ Знаю точку входа в интерфейс
☐ Прописал все развилки («если да — то…»)
☐ Убрал лишние шаги, которые убивают конверсию

Связка:
☐ Каждая боль из CJM решена в User Flow
☐ Карта и схема не противоречат друг другу

Этот материал подготовила студентка Айтилогии — обучение здесь строится вокруг практики UX-проектирования и работы с реальными инструментами дизайнера. В процессе студенты осваивают CJM, User Flow и анализ пользовательских сценариев на профессиональном уровне — эти инструменты помогают выстраивать логику продукта и принимать более осмысленные дизайн-решения.

Если хотите разобраться в UX/UI и попробовать себя в дизайне, начните с бесплатного интенсива «UX/UI: Start».

Автор статьи: Дарья Панкратова, выпускница 35 потока курса «UX/UI-дизайнер»