User Flow (от англ. путь пользователя, а в русскоязычной среде встречаются варианты «юзер флоу» или «юзерфлоу») — это визуальное представление типичного или идеального пути пользователя к определенной цели внутри продукта.
Например, чтобы оформить заказ, человеку нужно открыть карточку товара, выбрать размер, добавить товар в корзину, указать адрес, выбрать способ оплаты и подтвердить покупку. Эти действия можно представить в виде схемы и в идеале показать на ней возможные развилки.
Зачем нужны диаграммы пользовательского пути
Общее представление
Известная исследовательская компания в сфере пользовательского опыта Nielsen Norman Group (NN/g) подчеркивает, что User Flow это типичный или идеальный набор шагов, необходимых для выполнения распространенной задачи с продуктом. Поэтому юзерфлоу нужен не только дизайнеру, но и всей команде, чтобы посмотреть на сценарий пользователя сверху и целиком. Без userflow вся команда может пропустить неочевидные, но критически важные моменты. Например, возможность добавить товар в избранное есть, а как найти это избранное и доступно ли оно без авторизации, уже не продумано.
Дизайнеру такая карта помогает проверить логику интерфейса — увидеть, что пользователь несколько раз возвращается на один и тот же экран, не понимает, что делать после ошибки, или должен пройти лишний шаг перед целевым действием.
А разработчику схема показывает последовательность состояний и переходов. Флоу в разработке это свод правил, который отражает, что происходит после действия пользователя. Например, после успешной оплаты открывается экран подтверждения, а после ошибки появляется возможность повторить попытку или выбрать другой способ оплаты.
Конкретная задача
NN/g также рекомендует рассматривать User Flow как инструмент, который помогает изучать и оптимизировать конкретный пользовательский сценарий: оформить заказ, зарегистрироваться, восстановить пароль или записаться на прием. Это важно и с точки зрения UX-исследований. Для проверки готового пути полезно юзабилити-тестирование: оно позволяет наблюдать, как реальные пользователи проходят заданную задачу непосредственно в продукте. А данные о путях и кликах могут использоваться как дополнительный источник информации.
User Flow сначала помогает спроектировать сценарий, а после запуска — разобраться, где реальный путь пользователя расходится с задуманным.
Отличия User Flow от CJM (Customer Journey Map)
User Flow часто путают с Customer Journey Map (CJM), потому что обе схемы описывают путь пользователя к цели. Всё так, но они работают на разном масштабе.
CJM показывает клиентский опыт шире одного интерфейса. В CJM пользовательский путь — это и реклама, и звонок менеджеру, и визит в офлайн-магазин, письмо после покупки, служба поддержки и другие точки контакта. В CJM важны не только действия человека, но и его мысли, ожидания, эмоции и проблемы на разных этапах.
User Flow приближает путь к конкретному цифровому продукту. Он показывает последовательность действий и реакций системы: куда пользователь переходит, что выбирает, где принимает решение и что происходит после каждого действия. User Flow будет гораздо уже и детальнее.
NN/g формулирует это как разницу между макро- и микро-уровнем: CJM показывает более широкий опыт пользователя во времени и между каналами, а user flow «приближает» отдельный сценарий и разбирает конкретные взаимодействия. Но эти два инструмента можно использовать вместе, тогда User Flow становится подробным фрагментом более крупного пользовательского пути.
Еще одна важная разница: CJM не обязан быть картой только цифрового опыта. Пользователь может переходить между сайтом, приложением, офлайном, телефоном и другими каналами. User Flow, напротив, обычно рассматривает конкретный продукт или интерфейс приложения и набор взаимодействий внутри них.
User Flow и CJM: в чем разница
| Критерий | User Flow | CJM |
| Главная цель | Разобрать конкретную задачу внутри продукта и спроектировать последовательность действий | Понять клиентский опыт на всем пути к цели |
| Фокус | Действия пользователя, взаимодействия с продуктом и реакции системы | Действия, мысли, эмоции, боли и точки контакта |
| Масштаб | Micro: конкретный сценарий внутри одного продукта | Macro: более широкий путь во времени и между каналами |
| Уровень детализации | Подробный: отдельные действия, переходы, решения и состояния | Более высокий: этапы пути и ключевые точки контакта |
| Основные артефакты | Flowchart, task diagram, wireflow | Journey map |
| Кто создает | UX/UI-дизайнер, продакт, UX-команда, иногда вместе с разработчиками | UX-исследователь, продакт, маркетинг, сервисная или кросс-функциональная команда |
Основные элементы и символы User Flow
У User Flow нет единственного обязательного набора графических обозначений. На практике используют привычные элементы блок-схем, но команда может адаптировать их под свои задачи.
Для базовой схемы обычно достаточно четырех элементов:
Овал — начало или конец сценария. Например: «Открыл приложение» или «Заказ оформлен». Начальную точку часто называют entry point — точкой входа. Ею может быть главная страница, карточка товара, экран авторизации, ссылка из письма, пуш-уведомление или рекламный лендинг.
Прямоугольник — действие или этап. Например: «Ввести номер телефона», «Выбрать товар», «Добавить адрес», «Подтвердить заказ». Лучше формулировать такие блоки именно через действие.
Ромб — точка принятия решения. Он нужен там, где сценарий может разделиться. Например, надо проверить, авторизован ли пользователь. Если да, то можно переходить к оформлению. Если нет, то к форме регистрации или входа. В ромбе также может быть условие, которое проверяет система: есть ли товар в наличии, авторизован ли пользователь, заполнено ли обязательное поле.
Стрелка — направление перехода. Она связывает шаги и показывает, что происходит дальше. Но если стрелок становится слишком много, схема начинает работать против своей задачи. В таком случае лучше разделить большой сценарий на несколько связанных флоу.
У User Flow могут быть разные уровни детализации. Самый простой вариант — блок-схема с действиями и решениями. Если нужно одновременно показать логику и будущие экраны, используют wireflow — формат, который объединяет wireframes (вайрфреймы или макеты экранов) с упрощенной флоу-схемой.
Пошаговая инструкция: как построить User Flow
Шаг 1. Определите цель
Начните с одного конкретного сценария. Например, «Оформить заказ без регистрации». Цель должна иметь понятный результат, который можно проверить: «Пользователь выбирает курс и оставляет заявку на обучение». Если задача получается слишком большой, разделите ее на несколько сценариев.
Шаг 2. Изучите пользователя и соберите данные
Кто вообще проходит этот путь и в каком контексте? Чтобы это понять, используют результаты UX-исследований, интервью, юзабилити-тестов, аналитику, данные службы поддержки и другие источники. Если данные показывают, что большинство покупателей приходит на сайт сразу на карточку товара из поиска, начинать флоу исключительно с главной страницы будет некорректно.
NN/g отдельно отмечает, что для изучения User Flow полезнее всего наблюдать за реальным взаимодействием пользователя с продуктом в рамках конкретной задачи — то есть проводить юзабилити-тестирование. Аналитические данные могут дополнить эту картину и показать другие поведенческие паттерны.
Шаг 3. Определите точку входа
Пользователь не обязательно начинает сценарий с главной страницы. Он может прийти из поисковой выдачи, пуш-уведомления, из карточки товара или вообще по QR-коду. У одного сценария легко может быть несколько точек входа и разный онбординг. Если разные входы дают пользователю принципиально разные варианты пути, их стоит показать отдельно.
Шаг 4. Выпишите основные действия пользователя
Сначала это можно сделать просто на бумаге от руки. На этом этапе флоу может быть даже обычным списком. Его задача пока не выглядеть красиво, а показать логику.
Шаг 5. Добавьте решения и альтернативные сценарии
Теперь найдите места, где путь может разделиться. Сначала лучше собрать основной, или happy path, — сценарий, в котором все идет по плану. После этого добавьте только важные альтернативы: ошибку оплаты, отсутствие товара, неверный пароль, отказ в доступе.
Шаг 6. Соберите визуальную схему
Теперь переносите сценарий в выбранный инструмент (Figma, FigJam или Miro). Готовый флоу нужно пройти от начала до конца.
Проверьте, есть ли у каждого действия понятный следующий шаг, нет ли тупиков, понятно ли, куда ведет каждая стрелка, предусмотрены ли ключевые альтернативные сценарии. И главное, достигает ли пользователь своей цели.
Лучше всего после этого проверить сценарий с другими участниками команды или на реальных пользователях. Если человек не может пройти схему или постоянно задает вопросы о том, что должно произойти дальше, это повод пересмотреть логику.
Популярные инструменты для создания флоу
Строго говоря, User Flow можно нарисовать и на бумаге, но чтобы визуализация процесса была у всей команды, лучше, конечно, воспользоваться удобным сервисом. Выбор зависит от сложности сценария и того, сколько людей будут работать с ним одновременно.
Miro подойдет для командной работы. На одном полотне можно разместить User Flow рядом с результатами исследований, заметками, CJM и прототипами. У сервиса есть отдельные шаблоны для User Flow и готовые элементы для действий, решений и переходов.
Figma и FigJam особенно удобны, потому что большинство продуктовых команд работают в Figma. В FigJam можно собирать диаграммы из фигур и коннекторов, а рядом размещать экраны будущего интерфейса. Это удобно, когда от простого флоу нужно перейти в прототипирование.
Whimsical подойдет для тех, кому нужен быстрый и аккуратный инструмент для схем. В его шаблоне User Flow можно одновременно показывать экраны, действия и точки принятия решений.
Draw.io — универсальный инструмент для создания диаграмм и блок-схем. Его удобно использовать, если User Flow нужно собрать как самостоятельную техническую или продуктовую схему, без привязки к конкретному дизайн-инструменту.
Примеры хороших User Flow
Пример User Flow бронирования отеля
Работа Натальи Алексеенко, студентки программы «Продуктовый дизайнер». Задачей Натальи было спроектировать веб-сервис для организации путешествий. Этот сценарий — часть большого User Flow, построенного на основе пользовательских интервью. Наталья разделила действия пользователя и системы цветовым кодированием, а для экрана выбрала не только другой цвет, но и другую фигуру, чтобы сразу понимать, где находится пользователь.
Пример User Flow для веб-сервиса «Все платежи»
В этом примере появляются решения пользователя (фиолетовый ромб), а также хорошо видно, как работать с разными сценариями.
Частые вопросы
Можно ли сделать User Flow до исследования пользователей? Можно, но в таком случае это будет скорее гипотеза. Команда может предположить, как должен выглядеть сценарий, а после исследования обнаружить, что пользователи действуют иначе. Поэтому User Flow можно использовать на этапе проектирования, но его стоит сверять с реальными данными.
Что делать, если у одного сценария несколько точек входа? Показать их все, если они действительно меняют путь пользователя. Например, покупка может начинаться с главной страницы, поиска или рекламной карточки товара. Если после входа все пользователи проходят один и тот же сценарий, несколько точек можно объединить.
Нужен ли User Flow разработчику, если уже есть прототип? Точно да, особенно если сценарий сложный. Прототип показывает, как работает интерфейс на уровне экранов и взаимодействий, а User Flow позволяет быстро увидеть логику целиком: где начинаются ветвления, какие состояния существуют и что происходит после ошибок. Кроме того, User Flow может быть общей точкой синхронизации для дизайнера, продакта и разработки. Все видят один и тот же сценарий до того, как он распадается на отдельные макеты и задачи.
