User Flow
Синонимы: user flow, пользовательский сценарий, flow diagram, сценарий использования
NAME
User Flow — дизайн и ux
DESCRIPTION
User Flow (пользовательский сценарий) — визуальная схема последовательности действий пользователя для достижения конкретной цели на сайте или в приложении. В отличие от CJM (который описывает весь опыт с эмоциями), User Flow фокусируется на конкретной задаче и её логических ветвлениях.
User Flow vs CJM vs Воронка:
| Параметр | User Flow | CJM | Воронка продаж |
|---|---|---|---|
| Фокус | Одна задача | Весь опыт | Конверсия |
| Детализация | Высокая (каждый клик) | Средняя (этапы) | Низкая (проценты) |
| Эмоции | Нет | Да | Нет |
| Ветвления | Да (если/то) | Редко | Нет |
| Для кого | Дизайнеры, разработчики | Маркетологи, стратеги | Продажи, маркетологи |
Типы User Flow:
| Тип | Описание | Когда использовать |
|---|---|---|
| Task Flow | Линейная последовательность без ветвлений | Простые сценарии (логин) |
| Wire Flow | Wireframe + переходы | Детализация интерфейса |
| User Flow | С ветвлениями и условиями | Сложные сценарии (checkout) |
| Happy Path | Идеальный путь без ошибок | Базовая логика |
| Error Flow | Обработка ошибок и edge cases | Полнота UX |
Стандартные блоки User Flow:
| Форма | Что означает |
|---|---|
| Овал | Начало / конец сценария |
| Прямоугольник | Действие / экран |
| Ромб | Решение (да/нет) |
| Стрелка | Переход к следующему шагу |
| Пунктир | Альтернативный путь |
Пример: User Flow «Оформление заказа»:
- Старт: пользователь в корзине
- Клик «Оформить заказ»
- Решение: авторизован?
- Да → перейти к шагу 5
- Нет → экран входа/регистрации
- Успешный вход → шаг 5
- Экран адреса доставки
- Выбор способа доставки
- Экран оплаты
- Ввод данных карты
- Решение: оплата прошла?
- Да → экран «Спасибо за заказ»
- Нет → ошибка + возврат к шагу 7
- Конец: email с подтверждением
Инструменты построения:
- FigJam (внутри Figma) — быстрый старт
- Miro — шаблоны User Flow
- Whimsical — специализированный сервис
- Overflow.io — интерактивные схемы
- Lucidchart — для сложных enterprise-схем
Когда обязательно рисовать User Flow:
- Новый функционал (регистрация, оплата, поиск)
- Редизайн существующего сценария
- Передача задачи разработчикам
- Поиск «узких мест» в конверсии
- Onboarding новых пользователей
Кейс WEBVISUAL: Клиент — SaaS-платформа для бухгалтеров. Было: конверсия регистрации 12% (индустрия — 25%). Нарисовали User Flow онбординга и нашли 7 проблем:
- 4 шага формы до первого «Ага!» (должно быть 2)
- Обязательное подтверждение email до первого входа
- Нет skip-опций для второстепенных полей
- 3 экрана с одинаковыми кнопками «Далее» (путаница)
- Отсутствие прогресс-бара
- Нет соц. логинов (Google, Яндекс)
- Сложный пароль (8+ символов, цифры, спецсимволы)
Решение: сократили до 2 шагов, добавили соц. логины, прогресс-бар, skip-опции, вход без подтверждения email (подтверждение после первого входа). Результат: конверсия регистрации выросла с 12% до 34% (+183%). Время до первого «Ага!» сократилось с 8 минут до 90 секунд. Бюджет UX-исследования: 60 000 ₽.
СМ. ТАКЖЕ
CJM(7), Customer Journey(7), Прототип(7)