Термины «потоки задач» (task flows), «пользовательские потоки» (user flows) и «блок-схемы» (flowcharts) описывают диаграммы, которые дизайнеры используют для документирования взаимодействий пользователей, отображая направленность действий и логику принятия решений. Разница между потоками задач и блок-схемами заключается в уровне детализации и описываемых процессах, а термин «пользовательский поток» часто применяется как синоним потоков задач и блок-схем.
Однако продуктовые дизайнеры уже давно используют комбинированный подход при создании вайрфреймов. Речь идёт о вайрфлоу (Wireflows) — серии взаимосвязанных вайрфреймов, отображающих пользовательский поток. Тип диаграммы, которую стоит выбрать для конкретного пользовательского потока, зависит от типа разрабатываемого приложения, а именно от того, сколько в нём уникальных страниц или насколько динамически меняется контент в зависимости от взаимодействий пользователя.
Поток задач (Task flow)
Поток задач (Task flow) — это диаграмма, демонстрирующая линейную последовательность шагов, которые пользователь выполняет для завершения конкретной задачи, например, процесс входа в систему. Потоки задач описываются на естественном языке и не включают элементов дизайна. Также они обычно не отражают отклонения от идеального пути, например, случай, когда пользователь забыл пароль.
Потоки задач полезны для планирования оптимальных путей выполнения задач. Один из способов создания потоков задач — провести анализ задач (task analysis), наблюдая за тем, как пользователи выполняют свои действия и достигают поставленных целей.
Блок-схема (Flowchart)
Блок-схемы похожи на потоки задач, но являются более детализированными. Помимо пути, который пользователи проходят при взаимодействии с системой, они также отображают решения пользователей на этом пути («пользователь авторизован?» да/нет) и процессы, запускаемые в ответ на их действия (отправить запрос на сервер).
Благодаря своей структуре блок-схемы позволяют более тщательно документировать потоки пользователей и системы, показывая разветвления на этапах принятия решений и демонстрируя, как данные проходят через систему. Блок-схемы отлично подходят для описания сложных продуктов, однако у них есть общий с потоками задач недостаток — отсутствие визуального отображения элементов интерфейса.
Вайрфлоу (Wireflow)
Термин «вайрфлоу» (Wireflow) образован из комбинации слов «вайрфрейм» (Wireframe) и «блок-схема» (Flowchart), и был введён компанией Nielsen Norman Group. Как следует из названия, вайрфлоу совмещает преимущества вайрфреймов и блок-схем.
Вайрфлоу показывают визуальные изменения интерфейса по мере взаимодействия пользователя с приложением или веб-сайтом. Они также могут содержать примечания, описывающие действия, происходящие в этот момент на стороне бэкенда. Представьте себе вайрфлоу как иллюстрированные потоки задач или блок-схемы.
Вайрфлоу особенно полезны для документирования мобильных, десктопных или веб-приложений, в которых мало уникальных страниц, зато есть несколько основных страниц, на которых контент динамически меняется в зависимости от действий пользователей. Это позволяет дизайнерам показать дизайн в контексте распространённых пользовательских задач.
Упрощённый вайрфлоу (Simplified wireflow)
Упрощённые вайрфлоу позволяют использовать более абстрактный подход, отображая сценарий с помощью небольших изображений экранов. Этот тип вайрфлоу является своего рода гибридом между потоком задач (task flow) и обычным вайрфлоу. Вместо того чтобы создавать детализированные вайрфреймы для каждого экрана, вы рисуете поток задач, иллюстрируя его символами, которые обозначают различные типы экранов.
В примере вы можете видеть упрощённый пользовательский сценарий покупки, который начинается с того, что пользователь ищет товар на главной странице, и заканчивается экраном подтверждения покупки.
Организация и использование вайрфлоу
Классический случай использования вайрфлоу — документирование пути пользователя при выполнении распространённой задачи в продукте, например, добавления песни в плейлист.
Простые вайрфреймы показывают экраны, доступные пользователю на каждом этапе сценария. Стрелки соединяют конкретные компоненты интерфейса, с которыми взаимодействует пользователь — например, нажимает кнопку или ссылку — с вайрфреймами, показывающими результат этого взаимодействия. Вайрфреймы в вайрфлоу не обязательно должны отображать отдельные страницы. Очень часто страница остаётся той же самой, а контент меняется, отражая реакцию на действия пользователя (например, отмеченный чекбокс или появившееся всплывающее меню).
Также вайрфлоу можно использовать для документирования сложных сценариев десктопных и веб-приложений. Нет необходимости показывать полные экраны на каждом этапе — достаточно создавать вайрфреймы только для той части экрана, которая меняется, это уже обеспечит достаточный контекст.
Можно ли использовать вайрфлоу для описания потоков задач традиционных статичных сайтов? Для мобильных приложений — да, но это не всегда оптимальный вариант для десктопных сайтов. Если вайрфреймы показывают разные большие страницы, легко потерять контекст пользовательского пути.
Процесс создания вайрфлоу
Рассмотрим процесс создания вайрфлоу на примере мобильного приложения:
- Опишите потребность и проблему в виде пользовательской истории (user story). Например, регистрация пользователя — ввод имени пользователя, электронной почты и пароля.
- Определите ключевые экраны интерфейса. Хороший подход — подумать о начальной и конечной точках. Например, начальная точка — экран входа, а конечная точка — модальное окно с приветствием.
- Соедините экраны стрелками в порядке, в котором пользователь будет двигаться вперёд. Также вы можете добавить точки принятия решений и показать, что происходит в разных случаях, например, если пользователь забыл пароль.