Разработка User Flow диаграмм веб-приложения
User Flow — это схема движения пользователя через интерфейс для выполнения конкретной задачи. Не карта сайта (что существует), не wireframe (как выглядит), а именно маршрут: откуда пришёл, что увидел, что сделал, куда попал, что произошло при ошибке.
Без User Flow разработчики реализуют «счастливый путь» и забывают про крайние случаи. Потом в продакшне оказывается, что пользователь после оплаты, если письмо не пришло, не знает что делать — и уходит.
Анатомия User Flow диаграммы
Стандартные элементы, которые мы используем:
- Прямоугольник — экран или страница
- Ромб — точка принятия решения (залогинен / не залогинен, платный / бесплатный план)
- Закруглённый прямоугольник — действие пользователя или системы
- Параллелограмм — ввод/вывод данных
- Стрелки с подписями — переходы с указанием условия
На практике строгость нотации (BPMN, UML Activity) менее важна, чем читаемость для всей команды. Мы обычно работаем в FigJam или Miro с цветовым кодированием: синий — экраны, жёлтый — решения, красный — ошибочные пути.
Глубокий разбор: разные типы флоу
Task flow — один пользователь, одна задача, без ветвлений по ролям. Подходит для простых сценариев: «добавить товар в корзину», «изменить пароль».
User flow — учитывает разные точки входа и ветвления. Один и тот же результат (оплата подписки) может достигаться с главной страницы, из письма, из пуш-уведомления — все три пути должны быть показаны.
Wireflow — гибрид wireframe и flow: схема переходов, где узлы — это наброски экранов, а не абстрактные прямоугольники. Дороже по времени, но намного понятнее заказчику и разработчику.
Пример из реального проекта — SaaS для управления проектами. Флоу онбординга нового пользователя после проработки включал 14 состояний вместо изначальных 5:
- Регистрация по email
- Регистрация через Google OAuth
- Приглашение от коллеги (другой путь — без выбора тарифа)
- Верификация email — успех
- Верификация email — ссылка просрочена
- Верификация email — повторная отправка
- Выбор тарифа
- Ввод платёжных данных
- Ошибка оплаты — неверная карта
- Ошибка оплаты — недостаточно средств
- Успешная оплата
- Бесплатный триал (обход оплаты)
- Создание первого проекта (онбординг-чеклист)
- Пропуск онбординга
Каждый из этих состояний — отдельная задача для бэкенда и отдельный экран для фронтенда. Пропустить их на этапе планирования = обнаружить в середине разработки.
Инструменты
| Инструмент | Сильные стороны | Когда использовать |
|---|---|---|
| FigJam | Интеграция с Figma, удобный real-time | Если дизайн делается в Figma |
| Miro | Гибкость, шаблоны, удобно для воркшопов | Большие команды, совместные сессии |
| Lucidchart | Строгая нотация, экспорт в Visio | Корпоративные клиенты с требованиями к документации |
| Whimsical | Быстро, минималистично | Небольшие проекты, быстрые итерации |
Связь с разработкой
User Flow диаграммы напрямую влияют на архитектуру маршрутов (routing) приложения. Каждый прямоугольник-экран — потенциальный route. Каждый ромб-решение — потенциальный guard или middleware. Каждый красный путь ошибки — отдельный error state в компоненте или отдельная страница ошибки.
В React-приложениях это буквально отображается на структуру React Router: PrivateRoute, GuestRoute, вложенные layouts — всё это выводится из флоу, а не придумывается разработчиком на ходу.
Сроки
User Flow для одного ключевого сценария (регистрация, оплата, онбординг) — 1–2 рабочих дня. Полный набор флоу для MVP SaaS-продукта (5–8 сценариев) — 5–10 рабочих дней.