User Flow, примеры

Что такое User Flow

По сути User Flow — это визуальное представление того, как пользователь двигается через сайт или приложение и что с ним происходит на каждом этапе этого пути.

Буквальный перевод User Flow — «пользовательский поток». Я также встречала такие варианты перевода «пользовательские сценарии», «маршруты пользователя» и тому подобные варианты.

По сути всё, что отображает многогранность вариантов передвижения пользователя через сайт или приложение, можно назвать user flow. Соответственно, user flow может быть в виде блок-схемы, диаграммы, объединенных между собой стрелками варфреймов или макетов, и так далее. Ещё я также встречала обозначение Wireflow, если для построения user flow используются варфреймы.

Зачем строится User Flow

С помощью User Flow можно:
— проверить состыкуемость разных частей продукта между собой (все ли кнопки куда-то ведут, все ли страницы связаны между собой);

— проработать несколько вариантов поведения пользователя вместе на одной схеме так, чтобы они не конфликтовали друг с другом;

— найти несостыковки, непроработанные места в продукте.

Примеры разных вариантов User Flow

QuickFrames for Figma by Rafal Tomal

Ссылка на кейс: https://dribbble.com/shots/14477528-QuickFrames-for-Figma/

Что хорошо:

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

Это хороший кейс, внутри него есть отличные примеры и других артефактов.

Login flow by Sonali Banerji

Ссылка на кейс: https://www.behance.net/gallery/69194637/Login-flow?tracking_source=project_owner_other_projects

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

CheerMeOn User Flows by Adam Kalin

Ссылка на кейс: https://dribbble.com/shots/15104949-CheerMeOn-User-Flows/attachments/6837855?mode=media

Прекрасный пример как может выглядеть флоу с прототипами (и в сочетании с бассейнами).

Ещё примеры:

Как понять какую степень детализации выбрать для своего User Flow?

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