Все о User Flow

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

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

В данной статье мы подробно рассмотрим подходящий для этих целей инструмент — User Flow. Вы узнаете, в чем заключаются его ценность и польза; какие виды существуют; а также последовательность шагов и инструменты для его создания.

User Flow (пользовательский поток) — это визуальное представление последовательности действий, которые пользователь выполняет для достижения своей цели на сайте или в приложении. Он представляет собой блок-схемы, где визуально отображается каждый шаг, который проходит пользователь от точки входа до достижения конечной цели.

Когда и зачем использовать User Flow

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

Теперь разберемся, на каких этапах можно создавать User Flow:

1. Перед началом работы над проектом

В таком случае вы сможете заранее определить сценарий и необходимые функции будущего продукта.

2. В процессе работы над проектом

Создание User Flow на этом этапе поможет внести правки, пересмотреть необходимость старых функций и возможностей или добавить новые.

Если подробнее говорить о пользе использования User Flow, то он поможет вам и вашей команде сделать следующее:

Мы упомянули, что User Flow облегчает работу всем участникам команды, которая занимается разработкой. Кроме того, он приносит пользу заказчикам и пользователям. Давайте подробнее разберемся, каким именно образом это происходит:

В зависимости от особенностей в структуре блок-схемы, можно выделить несколько видов User Flow:

1. Линейный User Flow

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

2. Условный User Flow

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

3. Модульный User Flow

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

4. Параллельный User Flow

Данный вид User Flow включает в себя описание нескольких параллельных действий. Он используется в том случае, когда интерфейс предполагает, что функциями можно пользоваться одновременно. Такая блок-схема также содержит ответы интерфейса на эти действия.

Ниже перейдем к самому интересному — процессу работы над созданием User Flow. Но начнем с элементов, которые используются в блок-схемах, и их значений.

Обозначения элементов блок-схем

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

Круг или овал — начало и конец сценария.

Стрелка — направление движения пользователя по сценарию. Они могут указывать любое направление, пересекаться и даже отправлять назад.

Прямоугольник — действие, которое нужно выполнить пользователю для продвижения вперед по сценарию.

Ромб — решение или выбор, который должен сделать пользователь, если у него есть несколько опций.

Параллелограмм — ввод или вывод новой информации.

Пошаговая инструкция

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

1. Выясните у заказчика: цели продукта; какие функции и возможности должен содержать интерфейс; а также какие действия ожидаются от пользователей.

Например, заказчик — это служба доставки готовых полезных рационов питания; ему нужно приложение, через которое клиенты смогут заказывать еду.

2. Подробно опишите вашего пользователя. Для этого можно создать персону (типичный портрет) пользователя.

Например:

• Имя — Валерия.
• Возраст — 31 год.
• Профессия — руководитель менеджеров в школе иностранных языков.
• Интересы и хобби — здоровый образ жизни, спорт, красота, саморазвитие.
• Цель, которую пользователь хочет достичь с помощью вашего продукта — сэкономить время на приготовлении полезных и разнообразных приемов пищи.
• Потребности, которые пользователь хочет удовлетворить — готовые вкусные и полезные завтрак, обед и ужин, которые учитывают необходимое количество калорий; больше свободного времени.
• Проблема, которую должен решить ваш продукт для пользователя — 2-3 часа уходит на готовку; сложно посчитать калорийность пищи за день.
• Мотивация, которая движет пользователем, — экономия времени, желание оставаться в форме, выглядеть красиво и успешно.
• Ожидание — то, как пользователь представляет себе взаимодействие с интерфейсом и результат. Например, Валерия представляет, что зайдет в приложение, укажет необходимое количество калорий и выберет подходящий набор блюд.

3. Подумайте о сценарии (ситуации), в котором пользователь может использовать ваш продукт.

Пример: Валерия устает на работе и не хочет готовить вечером еду на несколько дней, поэтому днем она заказывает готовые рационы на 3 дня вперед. Она также выбирает время доставки, чтобы когда курьер привез заказ, она уже вернулась с работы.

4. Схематично опишите последовательность действий пользователя от точки А до точки Б:

1. Определите точку входа (где начинается путь пользователя, и в каких условиях находится пользователь).

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

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

2. Продумайте, как пользователь будет перемещаться по приложению; какая последовательность действий приведет к желаемому результату.

Пример:

• Валерия оказывается на главном экране приложения и видит несколько разделов: завтраки, обеды, ужины, перекусы и рационы на весь день.
• Она выбирает последний вариант и переходит на новый экран, где нужно указать необходимое количество калорий.
• Из предложенного списка она выбирает готовую еду на 3 дня.
• Затем она переходит в корзину, заполняет форму с адресом и контактами, вводит промокод от блогера и оплачивает заказ.
• После этого она видит уведомление о подтверждении заказа и статус его выполнения, а также время доставки.
• Укажите точки выбора, где пользователь должен принять решение; обозначьте переходы и связи между блоками.

На этом этапе разработки User Flow нужно соединить маршрут из предыдущего пункта в одну блок-схему с помощью элементов, о которых мы писали выше.

5. Дополните User Flow второстепенными элементами; к ним относятся:

• уведомления,
• подсказки,
• всплывающие окна.

6. Выясните, какие узкие (проблемные) места есть в вашей схеме. Сразу предложите пользователю решение.

Например: некоторые пользователи могут иметь аллергию на какие-то продукты. В описании блюда сразу укажите, что какие-то ингредиенты можно убрать, если оставить комментарий к заказу.

7. Оформите полученный User Flow с помощью одной из программ, о которых мы расскажем дальше.

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

Вот несколько примеров самых популярных инструментов:

Miro

Этот ресурс был создан специально для создания майнд мэпов (mindmap), поэтому в нем удобно отображать любые схемы. Кроме того, в нем есть уже готовые шаблоны для User Flow.

Figma

Для работы с блок-схемами в Figma есть различные варианты, например, встроенный Fig Jam или шаблон UX Flow.

Overflow

Преимущество данного инструмента заключается в том, что готовые блок-схемы можно интегрировать с такими популярными инструментами, как Figma или Sketch.

Flowmapp

Еще один онлайн-инструмент. В нем также можно создавать User Flow, но часть функций платная.

Lucidchart

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

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

Блок-схемы User Flow могут быть достаточно объемными и сложными. Однако лучше придерживаться более простых вариантов. А также заботиться о том, чтобы схема была понятна всем участникам команды.

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