CJM: как построить карту пути клиента и применять её в UX-дизайне
51 просмотр
Vkontakte
Telegram
OK.ru
CJM помогает увидеть продукт не как набор экранов, а как последовательный опыт человека: что он пытается сделать, где сомневается, через какие каналы проходит и в какой момент интерфейс начинает мешать. Для UX-дизайнера это способ связать исследование с конкретными решениями — от структуры сценария до прототипа и тестирования.
CJM (Customer Journey Map) — карта пути клиента или пользователя: визуальная модель того, как конкретный человек проходит сценарий ради своей цели. В ней обычно фиксируют этапы, действия, точки контакта, мысли, эмоции, барьеры и возможности для улучшения. В UX карта нужна, чтобы найти разрывы в опыте и понять, какие сценарии, экраны или процессы стоит проектировать и проверять в первую очередь.
Что такое CJM и зачем она UX-дизайнеру
В профессиональной UX-практике journey map описывает не «идеальный маршрут, который придумала команда», а опыт человека, движущегося к конкретной цели. Nielsen Norman Group формулирует это как визуализацию процесса, который человек проходит ради достижения цели; карта связывает действия с мыслями и эмоциями и помогает увидеть опыт целиком. Определение и базовые компоненты journey map у NN/g.
Поисковые запросы вокруг CJM часто идут из маркетинга: «путь клиента», «карта клиента», «CJM в маркетинге». Но для UX-дизайнера ценность шире. Карта показывает, что происходит до, между и после отдельных экранов: пользователь увидел рекламу, открыл сайт, сравнил варианты, написал в поддержку, вернулся с другого устройства, оформил заказ, столкнулся с ошибкой, получил письмо и только потом продолжил сценарий.
Поэтому CJM полезна там, где интерфейс — лишь одна часть опыта. Если вы хотите понять роль UX/UI-дизайнера в таком процессе, можно отдельно посмотреть материал Yudaev School о профессии UX/UI-дизайнера и его задачах.
CJM — не воронка продаж и не схема экранов. Воронка агрегирует поведение многих людей по этапам и метрикам; User Flow показывает конкретный маршрут внутри продукта; CJM объясняет опыт выбранного пользователя во времени и часто охватывает несколько каналов.
Из чего состоит карта пути клиента
У CJM нет единственного правильного шаблона. Набор строк зависит от задачи, но сильная карта почти всегда отвечает на три вопроса: кто проходит путь, ради какой цели и что происходит на каждом этапе. Если этих опор нет, таблица быстро превращается в список предположений команды.
| Элемент | Что фиксируем | Зачем это UX-команде |
|---|---|---|
| Актор / персона | Конкретный тип пользователя, его контекст и потребность | Не смешивать в одной карте несовместимые сценарии разных аудиторий |
| Сценарий и цель | Например: «выбрать курс и понять, подходит ли он» | Задать границы карты и критерий завершения пути |
| Этапы | Крупные фазы опыта во времени | Разделить длинный путь на анализируемые отрезки |
| Действия | Что человек реально делает | Увидеть лишние шаги, обходные пути и незакрытые потребности |
| Точки контакта и каналы | Сайт, приложение, email, чат, звонок, офлайн и т. д. | Найти проблемные переходы между каналами |
| Мысли и вопросы | Что пользователь пытается понять в момент действия | Подсказать, какой контент и какая обратная связь нужны интерфейсу |
| Эмоции | Уверенность, напряжение, раздражение, облегчение | Выделить точки, где опыт резко ухудшается или, наоборот, работает особенно хорошо |
| Барьеры / pain points | Что замедляет или прерывает путь | Сформировать проблемные зоны для дальнейшей работы |
| Доказательства | Цитаты, наблюдения, аналитика, обращения, метрики | Отделить факт от гипотезы |
| Возможности | Что можно улучшить и какой эффект ожидается | Перевести исследование в продуктовые и дизайн-гипотезы |
CJM, User Journey, User Flow и Service Blueprint: в чём разница
Термины легко смешать, потому что все эти артефакты описывают процессы. В UX-среде Customer Journey Map и User Journey Map часто используются почти как синонимы. NN/g прямо отмечает, что оба названия могут обозначать визуализацию опыта человека с продуктом или сервисом; важнее договориться внутри команды о содержании карты, чем спорить о названии. Подробнее о терминологии journey maps.
| Артефакт | Фокус | Когда применять |
|---|---|---|
| CJM / User Journey Map | Опыт человека во времени: действия, мысли, эмоции, каналы, барьеры | Когда нужно увидеть путь целиком и найти точки улучшения |
| User Flow | Конкретная последовательность действий и экранов внутри продукта | Когда проектируете сценарий регистрации, покупки, поиска, восстановления доступа |
| Service Blueprint | Что происходит «за кулисами»: люди, процессы, системы и зависимости, обеспечивающие опыт | Когда проблема пользователя зависит не только от интерфейса, но и от внутренних процессов |
| Empathy Map | Что пользователь говорит, думает, делает и чувствует | Когда нужно быстро синхронизировать понимание конкретного пользователя, но не обязательно строить путь во времени |
| Воронка | Доли и конверсии на этапах | Когда важно измерить, где теряется аудитория, но не хватает объяснения причин |
Разницу между journey и flow удобно помнить так: journey — широкий контекст, flow — детальный маршрут внутри продукта. Это соответствует актуальному разбору NN/g: user journey охватывает высокоуровневый опыт через разные каналы и время, а user flow приближает конкретную последовательность взаимодействий. User Journeys vs. User Flows.
Service Blueprint продолжает карту в сторону бизнеса: показывает внутренние процессы, роли и системы, связанные с точками контакта. Определение Service Blueprint у NN/g.
Когда CJM полезна в UX-дизайне
Карта нужна не на каждом проекте. Если задача локальная — например, изменить подпись кнопки или отрисовать одно состояние компонента, — journey mapping будет избыточным. Она особенно полезна, когда проблема распределена по длинному сценарию или между несколькими каналами.
- Редизайн продукта: видите, что метрика падает, но не понимаете, какой фрагмент пути вызывает проблему.
- Онбординг: нужно связать рекламу, регистрацию, первый вход, подсказки, письма и первые полезные действия.
- Омниканальный сервис: человек переключается между сайтом, приложением, поддержкой, офисом или доставкой.
- Новый сценарий: команда проектирует будущий опыт и хочет явно отделить гипотезы от подтверждённых данных.
- Несколько команд: маркетинг, продукт, поддержка и разработка по-разному видят один и тот же путь.
- Портфолио UX/UI: нужно показать не только финальные экраны, но и логику решения: исследование → карта → гипотеза → прототип → проверка.
Где брать данные для CJM
Самая частая слабость карты — аккуратная визуализация, построенная на догадках. Для текущего продукта лучше начинать с того, что уже есть в компании, а затем закрывать пробелы исследованиями. NN/g рекомендует сочетать качественные методы, которые показывают контекст и причины поведения, с количественными данными, которые помогают оценить масштаб найденных проблем. Исследования для customer journey mapping.
| Источник | Что даёт | Ограничение |
|---|---|---|
| Интервью с пользователями | Мотивы, ожидания, язык, история принятия решений | Люди не всегда точно помнят детали поведения |
| Контекстное наблюдение / полевое исследование | Реальные действия и окружение | Дороже и дольше, чем интервью |
| Дневниковое исследование | Опыт, который разворачивается дни или недели | Требует дисциплины участников |
| Веб- и продуктовая аналитика | Переходы, отказы, время, частоту событий | Показывает «что», но не всегда «почему» |
| Обращения в поддержку и отзывы | Повторяющиеся проблемы и формулировки пользователей | Чаще отражают крайние случаи |
| CRM / продажи / звонки | Историю контактов, причины отказов, длительность цикла | Данные могут быть неполными или неоднородными |
| Командный воркшоп | Гипотезы и скрытые знания разных функций | Не заменяет пользовательские данные |
Если на воркшопе кто-то говорит «пользователь точно думает вот так», сразу спросите: откуда мы это знаем? Хорошая рабочая привычка — визуально разделять доказанные наблюдения и предположения. Тогда CJM становится не «истиной в таблице», а картой знаний команды: видно, на что можно опираться и где ещё нужно исследование.
Как построить CJM: 7 шагов
Начинать лучше не с красивого шаблона, а с вопроса, который карта должна помочь решить. Иначе команда легко потратит несколько часов на заполнение десятков ячеек и не получит ни одной полезной гипотезы.
1. Задайте цель и границы карты
Сформулируйте проблему и масштаб. «Весь путь клиента нашей компании» — слишком широко. «Как новый пользователь выбирает тариф, оформляет пробный доступ и доходит до первого полезного действия» — рабочий сценарий. Укажите, строите ли вы current-state карту текущего опыта или future-state карту будущего сценария.
2. Выберите актора и конкретную цель
Одна карта — один ясный взгляд. Если у вас есть начинающий пользователь и эксперт, который мигрирует с другого сервиса, их цели и барьеры будут разными. Для каждой заметно отличающейся истории лучше сделать отдельную карту.
3. Соберите данные и пометьте допущения
Сведите интервью, аналитику, поддержку, отзывы, CRM и знания команды. Там, где данных нет, можно временно оставить гипотезу, но помечайте её как гипотезу. Дизайнерская гипотеза допустима; замаскированная под факт гипотеза — нет.
4. Разложите путь на этапы и точки контакта
Этапы должны отражать крупные изменения в задаче пользователя, а не внутреннюю структуру компании. Для каждого этапа перечислите точки контакта: поисковая выдача, лендинг, форма, письмо, чат, приложение, менеджер, офлайн-точка.
5. Добавьте действия, мысли, эмоции и барьеры
Заполните карту фактами и короткими формулировками. Для эмоций не обязательно рисовать сложный график: достаточно шкалы, если она помогает замечать провалы и пики. Главное — понимать, почему оценка изменилась и чем она подтверждена.
6. Найдите возможности и расставьте приоритеты
Не пытайтесь исправить всё сразу. Смотрите на сочетание трёх факторов: насколько проблема мешает пользователю, как часто встречается и насколько реалистично её изменить. Результатом должны стать не абстрактные «улучшить UX», а конкретные направления: убрать лишний шаг, объяснить условие раньше, сохранить данные между каналами, показать статус процесса.
7. Переведите карту в дизайн-гипотезы и проверку
Для каждой приоритетной проблемы зафиксируйте гипотезу, ожидаемое изменение поведения и способ проверки. Дальше CJM соединяется с другими UX-артефактами: User Flow, wireframe, интерактивным прототипом и юзабилити-тестом. Про то, как превращать структуру сценария в каркас страницы, есть отдельный гайд Yudaev School о вайрфреймах в Figma, а поведение экранов можно отработать по материалу про интерактивные прототипы в Figma.
Ограничивайте карту одной задачей, которую команда действительно собирается улучшать. Чем шире заголовок вроде «путь клиента вообще», тем быстрее CJM превращается в энциклопедию. В проекте полезнее компактная карта, после которой понятно, какой экран, сценарий или процесс менять завтра.
Пример CJM: человек выбирает онлайн-курс
Ниже — учебный пример current-state карты. Он не описывает конкретную школу и нужен для понимания логики. Персона: взрослый специалист, который хочет перейти в UX/UI, но продолжает работать полный день. Его цель — выбрать программу, убедиться, что сможет совмещать обучение с работой, и начать без ощущения, что он купил «кота в мешке».
| Этап | Действия и точки контакта | Мысль / эмоция | Барьер | UX-возможность |
|---|---|---|---|---|
| Осознаёт потребность | Ищет профессии, читает статьи, смотрит видео | «Хочу сменить сферу, но не потерять доход» — интерес + тревога | Слишком много обещаний и непонятно, что делает UX/UI-дизайнер | Дать реалистичное описание задач, процесса и результатов обучения |
| Сравнивает варианты | Поиск, агрегаторы, отзывы, страницы школ | «Чем эти программы реально отличаются?» — сомнение | Несопоставимые форматы описания программ | Показать структуру по навыкам, времени, практике и результатам |
| Изучает программу | Лендинг, программа, работы студентов, FAQ | «Смогу ли совмещать?» — напряжение | Непонятная нагрузка и слишком общие формулировки модулей | Дать примеры недели обучения, объём практики и реальные артефакты |
| Оставляет заявку | Форма, звонок, мессенджер | «Что будет после кнопки?» — осторожность | Длинная форма, неизвестный следующий шаг, давление | Сократить поля, объяснить дальнейший процесс, сохранить выбор пользователя |
| Начинает обучение | Личный кабинет, welcome-письмо, чат | «С чего начать?» — мотивация + риск перегруза | Слишком много ссылок и задач в первый день | Онбординг с одним главным действием и понятным прогрессом |
| Доходит до первого результата | Задание, фидбек, проект, портфолио | «Получается» — уверенность | Неясно, достаточно ли хорошо сделана работа | Критерии качества, пример результата, быстрый и конкретный фидбек |
Как превратить CJM в UX-решения
Самая важная часть journey mapping начинается после заполнения таблицы. Карта полезна не потому, что она «наглядная», а потому что помогает выбрать, что делать дальше. Рабочая цепочка выглядит так:
- Проблема из CJM: пользователь теряется после заявки и не понимает следующий шаг.
- Гипотеза: если сразу показать статус и ближайшее действие, снизится тревога и вырастет доля людей, которые продолжают сценарий.
- User Flow: описываем переход «форма → подтверждение → выбор способа связи / начало онбординга».
- Wireframe: раскладываем информацию по приоритету и проверяем, что ключевой следующий шаг заметен.
- Прототип: имитируем состояние после отправки формы, ошибки и возврат.
- Проверка: даём сценарий пользователям и измеряем успешность / время / ошибки / субъективную понятность.
- Метрика после запуска: сравниваем конверсию в следующий шаг, обращения в поддержку, возвраты и другие показатели, релевантные проблеме.
Так CJM становится связующим слоем между исследованием и проектированием. Она не заменяет макеты, аналитику или тестирование, а помогает объяснить, почему именно этот сценарий стоит проектировать.
Как анализировать готовую карту
Когда карта заполнена, отойдите от отдельных ячеек и посмотрите на историю целиком. NN/g предлагает искать провалы ожиданий, лишние взаимодействия, точки сильного трения, сложные переходы между каналами, чрезмерное время и «моменты истины» — эпизоды, которые особенно сильно влияют на итоговое впечатление. 7 способов анализировать customer journey map.
- Где ожидание не совпадает с реальностью? Обещание «за минуту» и 15-минутная регистрация — явный разрыв.
- Какие шаги ничего не добавляют? Повторный ввод данных, подтверждение уже подтверждённого, лишний переход между каналами.
- Где эмоциональный провал самый глубокий? Обычно это хорошие кандидаты на приоритизацию, если проблема частая и значимая.
- Где человек меняет канал? Сайт → звонок, приложение → браузер, чат → письмо. На таких переходах часто теряется контекст.
- Где путь занимает неоправданно много времени? Особенно если ожидание не объяснено и статус не виден.
- Что уже работает хорошо? Не все улучшения — про устранение боли; иногда важно сохранить сильный момент и повторить принцип в других точках.
Наблюдение: 6 из 8 участников после оплаты искали письмо с инструкцией и не замечали ссылку в личном кабинете.
Гипотеза: показать следующий шаг сразу на экране успеха и продублировать его в письме. Есть проблема, доказательство и действие.
Формулировка: «Пользователям не нравится онбординг, надо сделать его удобнее».
Неясно, кто эти пользователи, что именно ломается, чем вывод подтверждён и какой эффект ожидается. Такая ячейка не помогает принять решение.
Не превращайте эмоциональную линию в декоративный график. Если вы поставили «−2» или грустный смайлик, рядом должна быть причина: цитата, наблюдение, метрика или хотя бы явно помеченная гипотеза. Иначе команда спорит о настроении пользователя вместо того, чтобы улучшать опыт.
В чём делать CJM
Инструмент не определяет качество карты. Для первой версии часто достаточно таблицы или бумажных стикеров; сложный визуал имеет смысл, когда карта уже подтверждена и ею нужно пользоваться вместе с командой.
| Инструмент | Сильная сторона | Когда выбирать |
|---|---|---|
| FigJam | Совместная доска рядом с Figma, шаблоны, стикеры, диаграммы | UX-команда уже работает в экосистеме Figma |
| Miro | Большой холст, шаблоны, воркшопы, связи между артефактами | Нужно много командной работы и фасилитации |
| Таблица | Минимум оформления, легко сортировать и копировать | Нужно быстро собрать фактуру и не отвлекаться на визуал |
| Figma Design | Полный контроль над презентационной версией | Карта уже устоялась и нужно оформить её для кейса или презентации |
У FigJam есть готовые шаблоны customer journey map, а Miro предлагает отдельные шаблоны и структуру CJM. Сравнение разных досок для исследований, CJM и пользовательских сценариев есть также в подборке Yudaev School: 11 онлайн-досок для дизайнеров.
Частые ошибки при построении CJM
- Строить карту только по мнению команды. Внутренние знания полезны как стартовая гипотеза, но не как доказательство пользовательского опыта.
- Брать слишком широкий сценарий. «От первого знакомства с брендом до вечной лояльности» редко помогает конкретной продуктовой команде решить задачу.
- Показывать один идеальный путь. Ошибки, возвраты, повторные попытки и смена канала часто дают больше инсайтов, чем happy path.
- Путать CJM с User Flow. Если карта состоит только из экранов и стрелок, вы теряете мысли, эмоции, контекст и внешние точки контакта.
- Изобретать эмоции. Красная зона без фактов выглядит убедительно, но может быть просто мнением автора карты.
- Заканчивать на «pain points». Без возможностей, приоритетов, владельцев и следующего шага карта остаётся исследовательским плакатом.
- Полировать визуал раньше данных. Красивую, но неверную карту сложнее критиковать — визуальная законченность создаёт ложное ощущение точности.
- Не обновлять карту. После редизайна, изменения продукта или появления нового канала путь может стать другим.
Шаблон CJM для UX-проекта
Этот каркас можно скопировать в таблицу, FigJam или Miro. Не обязательно заполнять все поля: оставьте только те, которые помогают ответить на ваш вопрос.
Кто проходит путь? Какой контекст отличает его от других?
Что человек хочет получить и где заканчивается карта?
Какие крупные фазы проходит человек во времени?
Что он реально делает на каждом этапе?
Через какие каналы, интерфейсы и людей идёт взаимодействие?
Что человек пытается понять в этот момент?
Как меняется уверенность, напряжение, удовлетворённость?
Что тормозит, раздражает или заставляет уйти?
Какие данные подтверждают эту ячейку?
Что можно улучшить и как проверить эффект?
FAQ: частые вопросы о CJM
Что такое CJM простыми словами?
CJM — карта пути клиента или пользователя. Она показывает, какие этапы проходит человек ради цели, что делает и думает, через какие точки контакта взаимодействует с продуктом, где испытывает трудности и что команда может улучшить.
Что должно быть в Customer Journey Map?
Минимум: конкретный пользователь или персона, сценарий и цель, этапы, действия и точки контакта. Для UX-работы обычно добавляют мысли, эмоции, барьеры, данные, возможности и ответственных за дальнейшие изменения.
Чем CJM отличается от User Flow?
CJM описывает широкий опыт пользователя во времени и может включать сайт, приложение, письма, поддержку и офлайн. User Flow показывает более узкую последовательность шагов внутри продукта — например, как человек оформляет заказ или восстанавливает пароль.
Чем CJM отличается от Service Blueprint?
CJM смотрит на опыт глазами пользователя. Service Blueprint добавляет внутреннюю сторону сервиса: сотрудников, процессы, системы и зависимости, которые обеспечивают точки контакта. Часто blueprint строят поверх уже понятной customer journey.
Можно ли построить CJM без интервью?
Можно сделать гипотезную карту на основе аналитики, поддержки, CRM и знаний команды, но предположения нужно явно пометить. Для решений с высоким риском полезно дополнить карту прямым исследованием пользователей — интервью, наблюдением или дневниковым исследованием.
Сколько этапов должно быть в CJM?
Фиксированного числа нет. Обычно достаточно такого количества этапов, чтобы карта читалась как понятная история и при этом не теряла важные переходы. Если колонок стало слишком много, лучше сузить сценарий или разделить карту.
В какой программе лучше делать CJM?
Для черновика подойдёт таблица, для совместного воркшопа — FigJam или Miro, для презентационной версии — Figma. Важнее качество данных и выбранный сценарий, чем конкретный сервис.
Как часто обновлять карту пути клиента?
Не по календарю, а по изменениям: после заметного редизайна, запуска нового канала, смены процесса, новых исследований или появления данных, которые меняют понимание пути. Для критичных сценариев полезно назначить владельца карты.
Главное
CJM — не декоративная схема и не замена продуктовой аналитике. Это способ собрать в одну историю факты о пути пользователя, увидеть трение между этапами и договориться, что команда будет улучшать дальше. Сильная карта начинается с узкого сценария и данных, отделяет наблюдения от предположений и заканчивается конкретными гипотезами, прототипами и проверкой.
Для UX-дизайнера особенно важна связка: CJM → приоритетная проблема → User Flow → wireframe / прототип → тест → метрика. Именно в этот момент исследовательский артефакт превращается в инструмент проектирования.
Авторитетные источники и полезные материалы
- Nielsen Norman Group — Journey Mapping 101 (последняя проверка материала в 2026 году).
- Nielsen Norman Group — How to Conduct Research for Customer Journey Mapping.
- Nielsen Norman Group — User Journeys vs. User Flows (перепроверено в 2026 году).
- Nielsen Norman Group — Service Blueprints: Definition (перепроверено в 2026 году).
- Nielsen Norman Group — 7 Ways to Analyze a Customer-Journey Map (перепроверено в 2026 году).
- Figma / FigJam — Customer Journey Map Template.
- Miro — Customer Journey Map Template.
Если хотите освоить UX/UI на практике
На программе «UX/UI-дизайнер» Yudaev School карта пути пользователя встроена в полный проектный процесс: UX-исследования, CJM и User Flow, wireframes, интерактивные прототипы, UI, тестирование и передача макетов в разработку. На актуальной странице курса также заявлены 15+ работ в портфолио и два больших упакованных кейса — то есть можно тренироваться не на изолированных схемах, а на связных проектах.
Материал актуализирован: 7 октября 2026 года.
Автор:
Алексей Кузьмичев
