Пользовательский флоу

Когда применять

Флоу рисуют до дизайна и кода, когда надо разобраться в логике переходов и найти пропущенные состояния. Проблему на схеме исправить дешевле, чем в готовом интерфейсе. Схема точнее словесного описания, поэтому её используют как спецификацию — с заказчиком согласуют сценарии, продакт ставит по ней задачи, а тестировщики пишут тест-кейсы. Для готового продукта флоу помогает увидеть лишние шаги и тупиковые ветки.

Флоу описывает логику внутри цифрового продукта, а не весь опыт человека. Офлайн-точки, эмоции и каналы показывает CJM. Структуру самого продукта задаёт карта сайта, а флоу берёт её разделы и рисует переходы между конкретными страницами.

Чем отличаются виды

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

Wireflow заменяет абстрактные блоки упрощёнными макетами экранов и стрелками, которые показывают, на какой элемент нажимает человек. Он удобен для мобильных и веб-приложений с несколькими ключевыми страницами, где содержимое меняется на месте, например для фильтров, корзины и оформления заказа. Для больших статичных сайтов формат неудобен, процесс теряется среди огромных картинок. UI flow, или screen flow, показывает почти готовые экраны. Его используют для утверждения дизайна и передачи разработчикам.

На основе каких данных строится

Основа — понимание, чего человек хочет и как действует. Это результаты интервью и наблюдений, анализ конкурентов и контекста использования продукта. Готовый анализ задач подсказывает шаги. Для действующего продукта берут аналитику — диаграмма реальных путей показывает, где люди идут и откуда уходят. Узкие места затем проверяют юзабилити-тестированием.

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

Кто участвует

В небольшом проекте флоу рисует один дизайнер. В большом участвуют исследователь, аналитик и дизайнеры интерфейса. Продакт, разработчики и тестировщики смотрят схему на ревью и подсказывают состояния, которых дизайнер не видит. Схема работает только тогда, когда её понимает вся команда.

Что нужно для старта

• Пользователь и его цель, сформулированные одной фразой, например «сменить e-mail»
• Точка входа. С какого экрана или события человек начинает
• Данные о реальных шагах. Интервью, наблюдения, аналитика, конкуренты
• Бизнес-цель, к которой ведёт сценарий
• Набор обозначений, понятных команде, и инструмент. Бумага, Figma или онлайн-доска вроде Holst и Pruffme

Как использовать

1. Пользователь и цель

   Ответьте на три вопроса. Кто человек, чего он хочет и какие шаги ему нужны. Одна схема описывает одну цель, весь продукт в одну схему не помещается.

2. Точка входа

   Определите, откуда человек приходит: главная, карточка товара, письмо.

3. Шаги

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

4. Развилки и ошибки

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

5. Финиш

   Определите конечную точку. Это целевое действие или результат, который человек считает достижением цели.

6. Форма

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

7. Проверка

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

Результат

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

Что дальше

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

Типичные ошибки

• Проектирование по списку функций

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

• Идеальный путь без ветвлений

  На простой схеме нет ответов на вопросы «что, если ничего не найдено» и «что, если оплата не прошла». Негативные сценарии нужны с самого начала.

• Слишком много шагов и веток

  Перегруженная схема трудно читается, а команда перестаёт ею пользоваться. Её разбивают на несколько.

• Схема непонятна команде

  Тонкости обозначений важны меньше, чем понятность. Единых правил нет, но внутри проекта символы должны быть одинаковыми.

• Неоднозначные нажатия в wireflow

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

Российская специфика

Подробные русскоязычные разборы метода есть на Хабре (2020), где разобраны три формы флоу на примере интернет-магазина бытовой техники, и в Skillbox Media (2023) с описанием обозначений и инструментов.

Кто использует

Цифровая служба правительства Великобритании в 2016 году улучшала сервис оформления государственной пенсии. Аналитик построил диаграмму, как люди проходят умный ответ на сайте, толщина линий показывала число переходов. Диаграмма выявила частые пути и места, на которые стоит смотреть, но сама по себе не объясняла поведение. Тогда команда вместе со службой сервиса собрала сквозной путь по данным, звонкам в колл-центр и письмам и сформулировала гипотезы о поведении до правок. После изменений вырос поток людей с сайта в сам сервис и снизилась доля тех, кто бросал заявку. Цифры в публикации не приведены.