Простыми словами: Что такое User Flow и зачем он нужен.

Простыми словами: Что такое User Flow и зачем он нужен.

Всем привет, я Константин Зудов, Head of Design в Intelsy, UX/UI-дизайнер финансовых сервисов, а также рассказываю про дизайн и обучаю в PixelMap School. Сегодня мы обсудим важный инструмент UX-дизайнера — User Flow.

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

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

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

Простейший флоу на примере заказа пиццы. А теперь представь, что каждый блок это экран.
Простейший флоу на примере заказа пиццы. А теперь представь, что каждый блок это экран.
  • Открытие приложения. Ты запускаешь приложение на телефоне.
  • Выбор пиццы. Листаешь меню и выбираешь, какую пиццу хочешь.
  • Добавление в корзину. Нажимаешь на кнопку «Добавить в корзину».
  • Оформление заказа. Перейдя в корзину, ты выбираешь способ оплаты и доставки.
  • Подтверждение заказа. Нажимаешь на кнопку «Оформить заказ» и ждешь свою пиццу.

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

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

Почему это важно?

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

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

User Flow есть и в жизни

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

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

Народная мудрость

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

Удобно сравнивать навигацию в общественных местах с User Flow. Только в первом случае это помогает конечному пользователю, а во втором — команде разработки.
Удобно сравнивать навигацию в общественных местах с User Flow. Только в первом случае это помогает конечному пользователю, а во втором — команде разработки.

Как создать User Flow

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

Наше целевое действие — подтверждение заказа пиццы
Наше целевое действие — подтверждение заказа пиццы

Шаг 1: Определи цель (Целевое действие пользователя)

Прежде всего, нужно понять, какую цель преследует пользователь. Что он хочет сделать? Например, заказать пиццу, зарегистрироваться на сайте или найти нужную информацию. Без понимания цели создать эффективный User Flow не получится. (Для определения целей тебе пригодятся User Story, но это уже тема другой публикации)

Простыми словами: Что такое User Flow и зачем он нужен.

Шаг 2: Определи основные шаги

После того как цель ясна, подумай, какие шаги нужно предпринять, чтобы её достичь. Например, если цель — заказать пиццу, то шаги могут быть такими:

  • Открытие приложения.
  • Выбор пиццы.
  • Добавление в корзину.
  • Оформление заказа.
  • Подтверждение заказа. (это и есть наше целевое действие)

Каждый шаг должен вести пользователя ближе к его цели.

Шаг 3: Проработай детали

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

Простыми словами: Что такое User Flow и зачем он нужен.

Шаг 4: Создай визуальную карту

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

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

Шаг 5: Проверь и протестируй

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

Шаг 6: Постоянно улучшай

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

Вместо заключения

Надеюсь тебе понравилось :) Я постарался объяснить, что такое User Flow, о-о-очень простым языком, чтобы было понятно каждому. На самом деле, это обширная и достаточно интересная тема. Если она заинтересовала тебя, ты без труда найдешь всю информацию в интернете.

Практическое задание для пытливых умом

Простыми словами: Что такое User Flow и зачем он нужен.

Ты будешь создавать User Flow для простого мобильного приложения для заказа кофе с доставкой. Твоя цель — спланировать и визуализировать путь пользователя от входа в приложение до завершения заказа.

Что предстоит сделать:

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

Результат

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

Удачи!

2424
11
5 комментариев

Спасибо, Костя! Пиши чаще, чтобы мы становились грамотнее)

2

Классная статья 👍Написано доступно и понятно даже тем, кто в дизайне не варится)

1

Спасибо! Очень понятно объяснил :)

1