Коротко
User flow (пользовательский поток) — это схема пути человека внутри продукта: экраны, которые он видит, действия, которые ведут дальше, и развилки до цели. Например, путь от каталога до оплаченного заказа.
В Morfa user flow рисуют на «Доске» фигурами и соединителями или собирают из фреймов прототипа: каждый путь — отдельный сценарий, который запускают в плеере. CJM описывает весь опыт клиента с эмоциями, user flow — только шаги в продукте.
Из чего состоит user flow
User flow отвечает на вопрос, как человек проходит от точки входа до цели. Внешний вид экранов здесь не важен: экран — это блок с названием, а не картинка.
- Вход — откуда человек пришёл: «Открыл приложение», «Перешёл из рассылки». Обычно это овал.
- Экран — каждый шаг, который видит человек: «Каталог», «Корзина». Прямоугольник.
- Действие — нажатие, ввод данных, выбор. Его пишут на стрелке глаголом: «Выбрал товар».
- Условие — развилка вида «Вход выполнен?» с ветками «Да» и «Нет». Ромб.
- Цель — где путь заканчивается: «Заказ оформлен». Снова овал.
Task flow, user flow и wireflow
Схемы пути различают по подробности. Чем ближе к экранам, тем больше в схеме дизайна и тем меньше она годится для ранних обсуждений.
| Вид | Что показывает | Где рисовать |
|---|---|---|
| Task flow | Один путь для одной задачи, без развилок: «сменить пароль» | «Доска»: цепочка блоков |
| User flow | Путь с развилками и разными входами: регистрация, покупка | «Доска»: фигуры, ромбы и соединители |
| Wireflow | Вайрфреймы экранов, связанные стрелками | Фреймы в файле дизайна: связи прототипа видны на холсте, пока открыта вкладка «Прототип» |
Чем user flow отличается от CJM и вайрфрейма
Во всех трёх схемах есть блоки и стрелки, поэтому их путают. Отличаются они вопросом, на который отвечают.
| Признак | User flow | Карта пути клиента (CJM) | Вайрфрейм |
|---|---|---|---|
| Вопрос | Как пройти от экрана к экрану | Что человек делает и чувствует на каждом этапе | Как устроен один экран |
| Единица | Экран и действие | Этап пути и точка контакта | Блок на экране |
| Охват | Одна задача внутри продукта | Весь опыт, в том числе вне продукта | Один экран |
| Где в Morfa | «Доска» или сценарий прототипа | Шаблон «Карта пути клиента» на «Доске» | Фрейм в файле дизайна |
Обычно их делают по порядку: карта пути клиента показывает, где человеку плохо, user flow — какие экраны это исправят, вайрфрейм — что стоит на каждом экране.
Пример user flow: покупка в интернет-магазине
Цель — оплаченный заказ. Вход — каталог. На схеме шесть экранов и две развилки:
- «Каталог» → «Выбрал товар» → «Карточка товара».
- Развилка «Товар в наличии?»: «Нет» ведёт к экрану «Сообщить о поступлении», «Да» — к «Корзине».
- «Корзина» → «Нажал „Оформить“» → развилка «Вход выполнен?».
- «Нет» ведёт к экрану «Вход», после входа человек возвращается к оформлению.
- «Оформление» → «Оплатил» → цель «Заказ оформлен».
Ветка «Нет» у наличия — тупик для продажи. Именно такие места схема и показывает до того, как нарисованы экраны.
Как нарисовать user flow на доске
Создайте доску кнопкой «Новая доска». Шаблон «Блок-схема» из меню «+» вставляется в открытую доску и уже похож на маленький user flow входа на сайт: «Есть аккаунт?», «Вход», «Регистрация», «Личный кабинет». Его можно взять за основу или рисовать с нуля.
Поставьте вход
Нажмите O и напишите, откуда человек пришёл.
Добавляйте экраны
Наведите курсор на блок и щёлкните по одной из четырёх точек вокруг него: рядом появится такой же блок, уже связанный стрелкой. Для прямоугольника экрана нажмите R.
Подпишите действия
Дважды щёлкните по стрелке и напишите действие коротким глаголом: «Ввёл код», «Нажал „Оплатить“».
Отметьте развилки
Для условия выберите фигуру «Ромб» в панели «Фигуры и соединители» и выведите из неё две подписанные стрелки.
Как держать большую схему ровной и сохранить её в PNG или PDF, рассказано на странице о блок-схемах.
Как пройти user flow кликами в прототипе
Схема на доске объясняет путь, а прототип даёт его пройти. Каждый путь из схемы становится отдельным сценарием прототипа.
Отметьте начало
Выделите фрейм первого экрана, во вкладке «Прототип» в разделе «Начало сценария» нажмите «+». Сценарий получит имя «Сценарий 1»: дважды щёлкните по нему и назовите как путь на схеме, например «Покупка».
Свяжите экраны
На кнопке экрана добавьте взаимодействие «При нажатии» → «Перейти к» и выберите следующий фрейм. Пока вкладка «Прототип» открыта, связи видны на холсте стрелками.
Сделайте ветки экранами
Условий в прототипе нет, поэтому каждая ветка — свой фрейм и своя кнопка: «Товар есть» ведёт в корзину, «Товара нет» — к экрану подписки.
Запустите путь
Снимите выделение: в разделе «Сценарии» появится список путей страницы, у каждого кнопка «Запустить».
Остальное о прототипах — триггеры, переходы, плеер — собрано в статье прототип.