Что такое user flow и как построить его пошагово
Основы3 минРедакция Innovialabs
Коротко
User flow — схема шагов, экранов и развилок, через которые пользователь проходит к одной цели; её строят до макетов, чтобы заранее увидеть лишние шаги, тупики и забытые сценарии.
Что такое user flow
User flow — это схема пути пользователя к конкретной цели внутри продукта: зарегистрироваться, оформить заказ, восстановить пароль. На ней видно, с чего человек начинает, какие экраны проходит, где принимает решения и чем всё заканчивается.
Главная ценность флоу — он появляется до макетов. На схеме дешево заметить, что шагов слишком много, что у ошибки нет выхода или что забыт целый сценарий.
Чем user flow отличается от CJM и карты сайта
| Инструмент | Что показывает | Масштаб |
|---|---|---|
| Карта сайта (sitemap) | Структуру разделов и страниц | Весь продукт, без движения |
| User flow | Шаги и развилки на пути к одной цели | Один сценарий внутри продукта |
| Customer journey map (CJM) | Опыт, эмоции и точки контакта | Весь путь клиента, включая офлайн |
Проще говоря: sitemap отвечает на вопрос «что есть в продукте», user flow — «как пройти к цели», CJM — «что человек чувствует на всём пути».
Обозначения
Строгого стандарта нет, но чаще всего используют такой набор:
- Точка входа — откуда пришёл пользователь: реклама, письмо, главная страница. Обычно овал или скруглённый блок.
- Экран или страница — прямоугольник с названием.
- Действие — подпись на стрелке: «нажал Продолжить», «ввёл код».
- Решение (развилка) — ромб с вопросом, у которого есть два и более выхода: «Email уже занят?»
- Системный процесс — то, что происходит без участия пользователя: отправка письма, проверка оплаты.
- Конечная точка — достигнутая цель или осознанный выход.
Главное — договориться внутри команды и подписать легенду на схеме.
Пример: регистрация
- Вход: пользователь нажал «Создать аккаунт» на главной.
- Экран: форма с email и паролем.
- Решение: данные корректны?
- Нет → сообщение об ошибке рядом с полем, возврат к форме.
- Решение: email уже зарегистрирован?
- Да → предложить войти или восстановить пароль.
- Система: отправка письма с кодом подтверждения.
- Экран: ввод кода.
- Решение: код верный и не истёк?
- Нет → возможность запросить код повторно.
- Экран: короткий онбординг или сразу личный кабинет.
- Конец: пользователь зарегистрирован и видит продукт.
Уже на этой схеме видно, какие экраны нужно нарисовать (включая ошибки) и какие тексты понадобятся.
Как построить флоу пошагово
- Определите цель и пользователя. Один флоу — одна цель одного типа пользователя.
- Перечислите точки входа. Человек может прийти из рекламы, из письма или по прямой ссылке, и путь будет отличаться.
- Нарисуйте «счастливый путь». Самый короткий маршрут без ошибок.
- Добавьте развилки. На каждом шаге спросите: что может пойти не так? Что если у пользователя нет данных, нет доступа, нет денег на карте?
- Проверьте выходы. У каждой ветки должен быть конец: цель, возврат или понятный выход.
- Пройдите флоу с командой. Разработчики заметят технические шаги, поддержка — частые проблемы пользователей.
Как флоу ловит тупики
Тупик — состояние, из которого пользователь не может ни продолжить, ни вернуться. Типичные примеры:
- ошибка без кнопки «Попробовать снова»;
- письмо не пришло, а запросить повторно нельзя;
- пустой список без подсказки, что делать дальше;
- после оплаты нет экрана подтверждения.
Простое правило проверки: у каждого ромба все выходы ведут куда-то, а у каждого экрана есть следующий шаг. Если ветка обрывается, вы нашли проблему до того, как её нарисовали и закодировали.
Частые ошибки
- Один флоу на всё. Схема из сотни блоков нечитаема — разбейте по целям.
- Только счастливый путь. Именно ошибки и пограничные случаи делают флоу полезным.
- Без точек входа. Путь из рекламы и путь из уведомления часто отличаются.
- Схема устаревает. Если продукт изменился, а флоу нет, команда начинает опираться на неверную картину.