Карты пути пользователя (CJM) для цифровых продуктов: пошаговый разбор

Сколько раз вы видели, как команда делает «идеальный» макет в Figma: аккуратные отступы, плавные микровзаимодействия, безупречная типографика — а через неделю после релиза аналитика показывает 70% оттока на втором экране? В финтехе и edtech, где я проектировал интерфейсы последние 8 лет, это стандартная картина. Потому что мы часто проектируем для себя, а не для человека, который впервые открыл приложение в метро и пытается быстро оплатить перевод. Ему всё равно на ваши скругления в 8 px — ему нужно понять, куда нажимать.

Именно в такие моменты на передний план выходит Карта пути пользователя — Customer Journey Map (CJM). Это не просто схема с красивыми линиями. Это живой аналитический документ, который вскрывает реальное поведение, эмоциональные ямы и точки трения. В этой статье я дам пошаговый разбор CJM: от сбора данных до визуализации и внедрения решений. Разберу, как построить карту, которая реально меняет метрики, какие ошибки типичны для новичков и как встроить этот инструмент в регулярный UX-аудит.

Что такое CJM и зачем она нужна цифровым продуктам?

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

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

Почему CJM критически важна для UX/UI?

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

1. Выявить скрытые барьеры до того, как они убьют конверсию. Вы видите не просто цифру оттока в аналитике, а точное место, где пользователь «завис», засомневался и закрыл вкладку. Одно дело — знать, что на 3-м шаге регистрации конверсия падает на 40%, другое — понимать, что это происходит из-за того, что SMS с кодом не приходит вовремя.
2. Синхронизировать команду вокруг реального пользовательского опыта. Маркетологи, разработчики, дизайнеры и продуктологи начинают говорить на одном языке, оперируя фактами, а не предположениями. CJM становится общим артефактом, к которому можно апеллировать при спорах о приоритетах фич.
3. Оптимизировать конверсию точечно, без дорогостоящего перепроектирования. Вместо того чтобы переделывать весь онбординг, вы находите один проблемный этап и исправляете его. Экономия времени и ресурсов колоссальная.
4. Зафиксировать эмоциональную динамику. Где пользователь испытывает радость от достижения цели, а где — тревогу или раздражение. Это напрямую влияет на удержание и лояльность.

Важно: CJM не заменяет исследования, а структурирует их результаты. Без реальных данных — аналитики, интервью, usability-тестов — карта останется просто красивой картинкой, не имеющей отношения к действительности.

Этап 1: Подготовка и сбор данных — фундамент вашей карты

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

1.1. Определите цель и сценарий

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

Примеры сценариев из практики:

• Финтех: Путь пользователя от регистрации в мобильном банке до первой успешной оплаты перевода.
• EdTech: Путь студента от выбора курса до завершения первого модуля и получения сертификата.
• E-commerce: Путь покупателя от поиска товара в поисковике до получения заказа.

Чек-лист для определения сценария:

• Кто наш целевой пользователь (роль, сегмент)?
• Какая у него конкретная проблема, которую он решает с помощью продукта?
• Какой цели он хочет достичь в рамках этого сценария?
• В каком контексте происходит взаимодействие (дома за ноутбуком, в метро со смартфоном, в офисе между встречами)?

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

1.2. Сбор данных: откуда брать информацию?

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

1.3. Сегментация пользователей

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

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

Практический совет: Выберите один наиболее типичный сегмент для начала (например, «новичок, который хочет быстро оплатить услугу») и постройте карту для него. Когда методология будет отлажена, можно масштабировать на другие сегменты.

Этап 2: Структурирование пути — фазы и этапы

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

2.1. Типовая структура фаз (Stages)

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

1. Discovery (Обнаружение): Пользователь узнаёт о продукте — через поиск, рекламу, рекомендацию, статью в блоге.
2. Consideration (Оценка): Изучает предложение, сравнивает с конкурентами, читает отзывы, оценивает релевантность.
3. Onboarding (Вход / Регистрация): Первый практический контакт с интерфейсом: создание аккаунта, настройка профиля, начальное обучение.
4. Usage (Использование): Основная работа с продуктом — совершение покупки, прохождение урока, управление финансами.
5. Retention (Поддержка / Удержание): Повторные взаимодействия, решение возникающих проблем, получение обратной связи.
6. Advocacy (Продвижение): Пользователь рекомендует продукт другим — оставляет отзыв, делится в соцсетях.

Важно: Не все фазы обязательны для каждого сценария. Для мобильного приложения, где цель — быстрая оплата, фазы «Обнаружение» и «Оценка» могут быть сжаты до одного короткого этапа. Адаптируйте структуру под свой продукт, а не наоборот.

2.2. Детализация этапов (Steps)

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

Пример для фазы «Onboarding» (финтех-приложение):

1. Пользователь открывает приложение.
2. Нажимает «Регистрация».
3. Вводит номер телефона.
4. Получает SMS с кодом подтверждения.
5. Вводит код.
6. Заполняет профиль (ФИО, фото).
7. Подтверждает личность (скан паспорта).

Как описывать этапы правильно:

• Используйте глаголы действия: «вводит», «нажимает», «читает», «ждёт».
• Описывайте конкретное действие, а не абстрактное состояние — не «пользователь в процессе авторизации», а «пользователь вводит код из SMS».
• Учитывайте контекст: «в метро с нестабильной связью», «со слезами на глазах после неудачной попытки», «с ребёнком на руках».

Этап 3: Добавление контекста — эмоции, барьеры, каналы

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

3.1. Эмоции пользователя (Emotions)

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

Типовые эмоции на разных фазах:

• Discovery: Интерес, любопытство, иногда скепсис («Это точно мне поможет?», «Очередной сервис?»).
• Onboarding: Страх, неуверенность («Не сломаю ли я что-то?», «Зачем им мои паспортные данные?»), раздражение от длинных форм.
• Usage: Радость и удовлетворение при достижении цели — или, наоборот, фрустрация, если что-то пошло не так.
• Retention: Спокойствие и доверие при стабильной работе, тревога при возникновении проблемы.

Как собирать данные об эмоциях: В интервью и тестированиях спрашивайте напрямую: «Что вы чувствовали в этот момент?», «Было ли это легко?», «Что вас раздражало?». Используйте простую шкалу от 1 (очень плохо) до 5 (очень хорошо) — она даст количественную базу для графика эмоций.

3.2. Барьеры и точки напряжения (Pain Points)

Барьеры — это всё, что мешает пользователю достичь цели. Именно ради их обнаружения во многом и строится CJM. Чем точнее вы опишете барьер, тем проще будет подобрать решение.

Типы барьеров:

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

Пример описания барьера:

• Этап: Ввод SMS-кода.
• Барьер: Пользователь не получает SMS в течение 2 минут.
• Причина: Задержка на стороне SMS-провайдера или перегрузка сервера аутентификации.
• Эмоция: Раздражение, тревога («Мой аккаунт заблокирован?», «Меня взломали?»).

3.3. Каналы и точки контакта (Touchpoints)

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

• Цифровые каналы: Веб-сайт, мобильное приложение, email-рассылка, чат в мессенджере.
• Внешние каналы: Реклама в Google/Яндексе, статья в блоге, рекомендация друга, обзоры на YouTube.
• Физические каналы: Офис, телефонный звонок, курьерская доставка (актуально для e-commerce).

Пример мультиканального пути: Увидел рекламу в Instagram (внешний канал) → перешёл на сайт (цифровой канал) → скачал приложение (цифровой канал) → позвонил в поддержку (внешний канал). CJM должна показывать эту цепочку со всеми переходами.

Этап 4: Визуализация CJM — как сделать карту понятной

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

4.1. Выбор инструментов для визуализации

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

• Miro: Идеально для совместной работы, огромное количество готовых шаблонов CJM, удобные стикеры и комментарии. Мой основной инструмент.
• Figma: Если команда уже живёт в Figma, можно делать CJM прямо в макете продукта — это удобно для дизайнеров, но менее гибко для фасилитации обсуждений.
• Lucidchart: Мощный инструмент для создания сложных схем и диаграмм, если вам нужна более формальная визуализация.
• Excel / Google Sheets: Для простых табличных версий на ранних этапах, когда важнее содержание, а не форма.
• Специализированные инструменты: Smaply, CXMap, JourneyMap — предлагают продвинутые функции для управления CJM, но требуют времени на освоение.

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

4.2. Типовая структура визуализации CJM

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

4.3. Визуальные элементы для усиления

Сухие таблицы работают плохо — человеческий мозг считывает визуальные паттерны быстрее текста. Используйте:

• График эмоций: Линия, которая идёт вверх (позитив) и вниз (негатив) по ходу пути. Самый быстрый способ показать проблемные зоны.
• Иконки каналов: Телефон, сайт, приложение, email — визуальные маркеры ускоряют считывание.
• Цветовую кодировку: Зелёный — успешные этапы, красный — барьеры, жёлтый — зоны риска. Единая палитра дисциплинирует восприятие.
• Стикерные заметки: Для комментариев команды, идей и вопросов прямо на карте.

Как построить карту в Miro за 15 минут:

1. Создайте горизонтальную временную шкалу с фазами (Discovery, Onboarding и т.д.).
2. Под каждой фазой разместите этапы в виде вертикальных колонок.
3. В каждой колонке добавьте блоки: Действие, Эмоция, Барьер, Канал.
4. Барьеры выделите красными стикерами, решения — зелёными.
5. В верхней части доски оставьте место для легенды и ключевых выводов.

Этап 5: Анализ и генерация решений — что делать с картой?

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

5.1. Анализ точек напряжения

Пройдите по карте и задайте три вопроса к каждому этапу:

• Где эмоции падают ниже нейтрального уровня?
• Где барьеры самые сильные и частотные?
• Где пользователи уходят (drop-off в аналитике)?

Пример анализа:

• Точка: Этап «Ввод SMS-кода».
• Проблема: 40% пользователей не получают SMS в течение ожидаемого времени.
• Влияние: Пользователи не могут войти в аккаунт, конверсия в регистрацию падает на 30%.
• Решение: Добавить кнопку «Повторить SMS» с таймером обратного отсчёта и предложить альтернативный метод — вход по паролю или звонок с кодом.

5.2. Генерация решений (Solutions)

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

1. Упростить: Сократить количество шагов или полей в форме.
2. Объяснить: Добавить подсказки, гайды, контекстные пояснения в интерфейсе.
3. Автоматизировать: Убрать ручные действия — автозаполнение, автоопределение страны по номеру телефона.
4. Предложить альтернативу: Дать другой способ выполнения действия (вход по QR вместо SMS, оплата по ссылке вместо реквизитов).
5. Технически исправить: Устранить баги, оптимизировать скорость загрузки, сменить SMS-провайдера.

5.3. Приоритизация решений

Невозможно внедрить сразу все предложенные решения. Нужна приоритизация. Я чаще всего использую метод ICE (Impact, Confidence, Ease) — он простой и не требует сложных расчётов:

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

Типовые ошибки при построении CJM

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

Ошибка 1: CJM без данных (гипотеза вместо реальности)

Суть: Дизайнер строит карту, основываясь исключительно на своих представлениях о пользователе и продукте. Результат: Карта получается красивой и логичной, но отражает ментальную модель создателя, а не реальный пользовательский опыт. Пользователи действуют иначе. Как исправить: Всегда предваряйте построение карты сбором данных — интервью, аналитика, usability-тесты. Если данных нет, честно признайте, что это гипотеза, и пометьте её соответствующим образом.

Ошибка 2: Слишком общая карта (все пользователи = один)

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

Ошибка 3: Фокус только на продукте (User Flow вместо CJM)

Суть: Карта описывает только переходы между экранами, без эмоций, барьеров и каналов. Результат: Вы видите, куда пользователь идёт, но не понимаете, почему он не доходит до цели. Как исправить: Добавляйте слои контекста: эмоции, барьеры, каналы. CJM — это не просто схема экранов, это история опыта.

Ошибка 4: Игнорирование внешних каналов

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

Ошибка 5: Отсутствие решений (карта без действий)

Суть: Команда построила карту, нашла барьеры, но не предложила конкретных решений. Результат: Карта становится «архивом», который никто не использует после первой презентации. Как исправить: Для каждого барьера обязательно формулируйте решение и приоритизируйте его. CJM без решений — это диагноз без лечения.

Практический кейс: CJM для финтех-приложения (пошагово)

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

Сценарий

Пользователь: Новичок, впервые пользуется мобильным банком.
Цель: Быстро и безопасно отправить деньги другу.
Контекст: В метро по пути на работу, нестабильная связь, ограниченное время.

Пошаговая карта

Анализ и решения

Главный барьер: SMS не приходит (40% отказов на этом этапе). Решение: Добавили кнопку «Повторить SMS» с таймером и предложили альтернативный вход по паролю для тех, кто хочет пропустить SMS-верификацию.
Второй барьер: Неясность комиссии — пользователи доходили до экрана подтверждения и уходили, потому что итоговая сумма оказывалась неожиданной. Решение: Показали комиссию сразу на этапе ввода суммы, до перехода к оплате.

Результат: После внедрения этих двух решений конверсия на этапе оплаты выросла на 25%, а количество отказов на этапе SMS снизилось на 60%. Два точечных изменения — и метрики пошли вверх без дорогостоящего редизайна всего онбординга.

Чек-лист: Как проверить качество вашей CJM

Перед тем как отдать карту команде, пройдите по этому чек-листу. Если хотя бы один пункт не выполнен — карта требует доработки.

1. Сценарий конкретный: Карта построена для одного типа пользователя и одного сценария.
2. Данные есть: Карта основана на реальных источниках (интервью, аналитика, usability-тесты).
3. Эмоции добавлены: На каждом этапе есть описание эмоций пользователя.
4. Барьеры выявлены: Для каждого этапа зафиксированы барьеры и точки напряжения.
5. Каналы учтены: Карта включает все каналы взаимодействия (веб, приложение, поддержка, реклама).
6. Решения предложены: Для каждого барьера есть конкретное решение.
7. Приоритизация: Решения отсортированы по методологии ICE или аналогичной.
8. Читаемость: Карта понятна для всей команды (дизайнеры, разработчики, маркетологи).
9. Визуализация: Использованы иконки, цвета, график эмоций.
10. Обновление: Карта готова к обновлению при появлении новых данных.

Если прошли все 10 пунктов — ваша CJM готова к работе и будет реально полезным инструментом.

FAQ: Часто задаваемые вопросы о CJM

1. CJM и User Flow — это одно и то же?

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

2. Сколько времени нужно на построение CJM?

В зависимости от сложности: от 2–3 дней для простого сценария с уже собранными данными до 2–3 недель для комплексного продукта с несколькими сегментами и необходимостью проводить исследования с нуля. Львиная доля времени уходит на сбор и анализ данных, а не на саму визуализацию.

3. Можно ли строить CJM без исследований?

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

4. Как часто нужно обновлять CJM?

CJM — это живой документ. Обновляйте её: после запуска новых функций, после изменения UX-стратегии, при появлении новых данных из аналитики или отзывов. Минимальная периодичность — раз в 6 месяцев.

5. CJM нужна только для дизайна?

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

6. Что делать, если пользователь проходит путь в разных каналах?

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

7. CJM можно использовать для B2B продуктов?

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

Вывод: CJM — это не просто карта, это стратегия успеха

Карта пути пользователя (CJM) — один из самых мощных инструментов в арсенале UX/UI-дизайнера. Она помогает не просто «сделать красиво», а понять, как пользователь чувствует, думает и действует на каждом этапе взаимодействия с продуктом.

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

Главный совет: Не стройте CJM «для галочки». Стройте её на реальных данных и обязательно генерируйте решения для каждого барьера. Только тогда карта станет не просто документом, а стратегией успеха вашего цифрового продукта.

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