User flow: как нарисовать путь пользователя по сайту

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

Что показывает схема User Flow

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

На схеме видно, откуда человек пришёл, какой экран открыл и что нажал. Также видно, где путь разветвился и чем сценарий закончился. Happy path — основной сценарий User Flow: человек проходит его без сбоев и достигает цели. Остальные линии показывают развилки и отказы.

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

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

User Flow — последовательность экранов и действий к одной цели, а не карта впечатлений.

Чем User Flow отличается от Story, Journey и карты сайта

Соседние UX-артефакты путают, потому что все они про пользователя, но отвечают на разные вопросы. User Flow держит один визит и одну цель на сайте. User Journey и CJM описывают опыт шире: каналы, ожидания и контакты до сайта и после покупки. User Story формулирует потребность: «Как посетитель, хочу отправить заявку, чтобы мне перезвонили». Это единица бэклога, а не схема экранов.

Карта сайта отвечает на вопрос, какие страницы есть. Flow показывает, в каком порядке человек по ним идёт к цели.

Ни один артефакт не заменяет остальные. Для логики экранов берите flow, для бэклога — story, для опыта до и после сайта — journey, для информационной архитектуры — карту сайта. Task Flow нужен, пока экраны ещё не выбраны: он показывает порядок задач без привязки к макету. Wireflow связывает путь с набросками экранов.

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

Нотация: экраны, действия, решения, внешние системы

Схему проще читать, если у фигур есть общая легенда. Иначе один участник примет ромб за экран, а другой — за письмо из CRM. Согласуйте обозначения до начала работы и используйте их последовательно.

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

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

Один лист — один ключевой сценарий и его ошибки. Весь сайт на одной доске трудно читать без пояснений автора.

• Старт и точка входа
• Экран
• Действие человека
• Точка решения «да / нет»
• Переход
• Внешняя система: почта, мессенджер, CRM или платёжный шлюз
• Финиш: успех или обрыв

Когда строить схему и сколько сценариев нужно сайту

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

Обычно схему готовят UX/UI-дизайнер и аналитик или исследователь. Менеджер помогает удержать цель и ограничения, а заказчик согласует сценарий. На сдачу нужны легенда, happy path и ветки ошибок. Без них схема остаётся наброском.

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

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

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

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

Типовые пути: лендинг, каталог, личный кабинет

Для типовых задач веб-студии удобно начать с трёх каркасов. Рисуйте экраны и действия, а не ограничивайтесь лозунгом «сделать удобно».

Лендинг: реклама или органика -> предложение -> форма -> страница «спасибо» или ошибка валидации. Покажите, куда отправляется заявка — например, в почту или CRM. Тогда путь помогает спроектировать одностраничный сайт с заявкой, где основная цель — обращение, а не переход между разделами.

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

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

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

Факт. Если оплата проходит через внешнюю страницу шлюза, покажите переход туда и возврат на сайт со статусом.

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

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

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

Схема без веток ошибок описывает идеальный день. Сайт так не живёт.

Где рисовать схему: сравнение инструментов

Рисуйте там, где уже работает команда. Новый сервис ради схемы добавляет ещё один аккаунт и не ускоряет согласование. Цены и лимиты тарифов сверяйте на сайтах сервисов: они меняются.

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

Если команда работает в Figma, FigJam хватит для черновика. Overflow имеет смысл, когда нужно показать путь по макетам. diagrams.net подойдёт для отдельного файла в архиве. Это правило не подойдёт, если заказчик уже ведёт все проекты в Miro: тогда сохраните схему там и добавьте экспорт в ТЗ.

Как принять схему и сверить её с Метрикой

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

Чек-лист заказчика:

• На схеме одна цель и понятный критерий успеха
• Легенда подписана, фигуры не спорят друг с другом
• Есть happy path от входа до финиша
• Добавлены ветки ошибок, которые могут помешать достичь цели
• Указаны точки входа, а не только главная страница
• Почта, CRM и платёжный шлюз показаны как внешние системы
• Человек со стороны проходит схему без комментария автора

Сверьте сценарий с целями и воронкой в Яндекс.Метрике. По данным визитов можно проверить, совпадает ли реальный путь с нарисованным. Вебвизор помогает посмотреть, куда человек перешёл, где задержался или на каком шаге ушёл.

Не сравнивайте длину пути с чужой «нормой». Ниша и устройство меняют маршрут, поэтому сопоставляйте собственную схему со своими данными. Если сайт ещё предстоит создать, сначала решите, какой сайт нужен бизнесу в Новороссийске, а затем нарисуйте путь под выбранный тип сайта.

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

Источники

• Цели. Справка Яндекс Метрики — Яндекс