Что такое юзер-флоу и как организовать приятный пользовательский опыт

Приложение или сайт успешным делает не красивый дизайн и не навороченная логика с кучей функций. Успех определяет один критерий — что пользователь получил то, за чем пришёл. Он без проблем нашёл товар или заказал клининг — и не заблудился в дебрях сайта. Даём 7 советов о том, как сделать продукт, который понравится пользователю.

Что такое юзер-флоу

---

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

---

В чём разница между вайрфреймом и юзер-флоу?

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

---

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

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

Не ленитесь сделать хороший юзер-флоу — и вот что для этого нужно.

Хотите научиться делать вайрфреймы и юзер-флоу? Этому мы учим на курсе веб-разработки на Bubble.

Как создаётся юзер-флоу 

Юзер-флоу отрисовывается в графических редакторах. Есть специальные программы, где функции заточены именно на создание юзер-флоу. Разработчик делает там прототипы экранов будущего продукта, на которых располагает картинки, логотипы, формы, карточки товаров и всё прочее, что будет в будущем проекте.

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

Главная часть юзер-флоу — стрелки-коннекторы, которые показывают путь пользователя. Тот путь, который пользователь пройдёт, когда начнёт нажимать на кнопки и покупать товары в реальном приложении. Эти стрелки ведут от экрана к экрану, показывая события и логику приложения.

Как выстроить качественный юзер-флоу

1 совет. Используйте смысловые заголовки

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

• Вот пользователь впервые зашёл в приложение и хочет создать аккаунт ➡️ он идёт на экран с формой регистрации.
• Вот пришёл ваш постоянный клиент ➡️ ему хочется зайти во вкладку заказами, найти там товар двухнедельной давности, оставить отзыв, а потом пойти поискать похожие товары.
• Или другой постоянный пользователь нашёл нужный товар ➡️ и теперь идёт путь оплаты заказа. 

Для каждого пользовательского сценария — свой юзер-флоу, свой поток. Давайте им понятные смысловые заголовки, например: «Путь зарегистрированного пользователя в «Online Shop».  

2 совет.  Оставляйте свободное место между экранами 

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

Грамотное расположение потоков и его элементов позволят избежать беспорядка и правильно отразить информационную архитектуру приложения. 

3 совет. Используйте реальные «скины» экранов  

Объясним, что такое скин на примере разработки мобильного приложения.

Скин — рамки экрана телефона, имитирующий его внешний вид и размеры. 

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

4 совет. Объясняйте шаги и действия ярлыками

Стрелки между экранами — из ещё называют коннекторами — лучше помечать. Например, если вы соединяете экраны с оплатой, то поставьте между двумя экранами ярлыки — «К выбору метода оплаты», а дальше «Верификация оплаты», а следом «Успешная оплата».

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

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

5 совет. Используйте разный стиль стрелок-соединителей 

Стрелки-соединители, или коннекторы, могут и должны быть разными. Вы можете по-разному отображать путь пользователя вперёд по пути или на шаг назад.

К примеру, изобразить прямой линией-стрелкой шаг вперёд или пунктиром изобразить шаг назад. Это очень облегчит понимание взаимодействия.

Совет 6. Используйте формы для разных событий

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

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

Совет 7. Делите разные крупные пользовательские потоки

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

Он новый пользователь? Или постоянный? Он впервые вводит пароль или пришёл создать его заново? Или он отправился в каталог? А там что — идёт искать отзывы на конкретный товар или праздно листает каталог?

Видите, сколько вариантов!

Для каждого потока — свой поток, свой набор и последовательность экранов, соединённых стрелками. И всегда — свои смысловые заголовки (см. совет 1). 

Совет-резюме

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

• Создание хорошего юзер-флоу требует практики и опыта. И очень важно с первых шагов в разработке на ноукоде не лениться делать юзер-флоу. Мы, ноукодеры, конструируем приложение, мы не тратим время на написания элементов IT-продукта кодом, и поэтому у нас есть ресурс на проработку сверхкачественного UX и продумывания каждого шага будущего пользователя.

Вот тут можно посмотреть примеры построенных юзер-флоу в программе Overflow.

Хотите больше узнать про ноукод и погрузиться в мир разработки без кода? Смотрите наш бесплатный вебинар по клику на баннер.