Полное руководство по User Flow: как сделать, примеры и советы
Расскажу о ценности User Flow, а также покажу, как создать User Flow по шагам. Чек-лист с примерами и рекомендациями в конце статьи.
Продуктовый дизайнер (UX/UI), веб-дизайнер и бренд-дизайнер. Опыт проектов в международных компаниях Omega-R (агентство), iSpring Solutions (продуктовая) и со стартапами по всему миру. Преподаватель курсов «UI-дизайн и анимация интерфейсов» и «Веб-дизайн» в Институте программных систем и godesign.school.
Июн 11 · 8 мин читать
User flow — это наглядное представление последовательности действий, которые выполняет пользователь для достижения значимой для себя цели на сайте или в приложении. Может охватывать как какую-то отдельную функцию, так и весь продукт. Рассказываем на примерах, как построить карту и с помощью каких инструментов это удобнее сделать. 👩💻👇
Фактически концепцию потока в UX-дизайне впервые предложил психолог Михай Чиксентмихайи. Поток (англ. flow) — это психическое состояние, в котором человек полностью включён в то, чем он занимается, что характеризуется деятельным сосредоточением, полным вовлечением в процесс деятельности. Поэтому при проектировании User Flow мы будем опираться на эти фундаментальные концепции психологии восприятия.
Руководство призвано помочь вам сориентироваться в любом User Flow, независимо от формата, контекста и целей.
Содержание:
Что такое User Flow и для чего он нужен?
User Flows (в переводе — диаграмма пользовательского пути), также известны как User flow, UX flow, user flow charts, interaction flows, activity flows, user interface flows, navigation flows, user flow diagrams, task flow diagrams или блок-схемы. Представляют собой диаграммы, отображающие полный путь, по которому движется пользователь при использовании продукта. User flow описывает продвижение пользователя по продукту, отображает каждый шаг, который делает пользователь — от точки входа (начало) до финального взаимодействия (значимая цель достигнута, ценность получена).
Шаблон User Flow (UX Flow) крупным планом.
Говоря простыми словами, User Flow — это маршрут путешествия пользователя через экраны приложения к важной цели. А каждое приложение — это целая карта таких маршрутов (User Flow Map).
Использовать User Flow в команде следует по следующим причинам:
User Flow — это наглядный инструмент для донесения идей в четком, запоминающемся виде. А еще User Flow помогает создать единое видение по сценарию работы в определенной жизненной ситуации.
Инструкция по разработке User Flow
В самом простом варианте построение диаграммы пользовательского пути происходит следующим образом:
Что важно учесть при построении User Flow: 8 советов для дизайнеров
User Flow может выглядеть совершенно по-разному, но вне зависимости от этого, каждая диаграмма пользовательского пути должна иметь 8 следующих ключевых элементов:
1. Название с полезным действием
Дайте вашему User Flow содержательное имя, с сутью в корне. Например, вы можете назвать так «Вызов такси к дому до офиса» или «Заказ пиццы и других ништяков на компанию из 7 человек ко дню рождения друга».
2. Все движутся только в одном направлении
При таком подходе у вас будет ясный маршрут из (A) → (B). Стремитесь к балансу функциональности и лаконичности. Избегайте превращения простой прямой в запутанный клубок разнонаправленных сценариев.
3. Одна цель на Flow
Чтобы понять эту концепцию, то просто представьте, что вас просят обновить фото вашего профиля во время публикации сообщения!
Пользователь ныряет в продукт, чтобы достичь одной конкретной цели. Поэтому постарайтесь организовать его работу таким образом, чтобы пользователь двигался этап за этапом, шаг за шагом к этой цели. Помогайте пользователям достичь цель и не отвлекайте их на пути к цели.
4. Добавьте легенду
Каждому в команде схема станет понятнее, если вы сделаете классическую легенду по краю карты, как в играх. Так каждый сможет разобраться что здесь к чему. Например, укажите в легенде, что кружки — это точки входа, прямоугольники — экраны, ромбы — развилки принятия решений и т. д. Вы также можете обратиться к легенде BPMN-нотации, чтобы как с UI-китом уже опираться на некий стандарт компонентов и иконок известных многим специалистам.
5. Определитесь с точкой входа
У каждой диаграммы должна быть ясная точка входа. Тогда каждый в команде сможет однозначно читать диаграмму путешествия из (A) → (B) и вовлекаться в развитие продукта.
6. Ясные подписи
Обозначьте ключевые действия, добавьте подписи с предназначениями экранов.
7. Цвета со смыслом
User Flow обычно выполняют в функциональном минималистичном монохроме. Такой подход помогает сосредоточиться на функции и цели и концентрирует внимание только на важных вещах.
8. Проверьте достижение цели
Всегда проверяйте, что ваши User Flow действительно помогают достигать значимых для пользователей целей. Минимизируйте неопределенность и, если требуется, проведите дополнительные исследования.
Что еще нужно знать: связь User flow Map и User Story Mapping
Если вы применяете User Flow, то вы следуете международному подходу к разработке интерфейсов. Такой подход называют User Centered Design и Goal Oriented Design.
User Centered Design — клиент нанимает продукт, чтобы тот помог сделать значимую для клиента работу.
Goal Oriented Design — пользователь понимает, как достичь цели, открыв приложение.
Продакт-менеджеры тоже живут в той же парадигме — они наращивают ситуации, в которых приложение дает больше пользы, чем конкуренты. Один из инструментов управления продуктов у продакт-менеджера — это User Story Mapping
User Story Mapping
User Story Mapping — инструмент управления продуктом, полезен продакт-менеджеру — это вся карта задач, которые можно попросить сделать продукт. Представляют в виде двумерной сетки. Рекомендую на эту тему статью User Story Mapping – инструкция по применению →
User flow Map
User flow Map — инструмент дизайнера — развернутое представление User Story Mapping в формате диаграммы потоков. Два инструмента логично дополняют друг друга.
Если приложение как ваш цифровой помощник, которому можно поручить дело, то User Story Mapping — это книга дел, которые ему можно поручить, а User flow Map — это карта всех инструкций, как он будет действовать по шагам.
Итак, мы разработки параметры сборки одного User Flow, а сейчас разберем подход к подаче всей карты маршрутов вашего приложения.
Для сборки User Flow Map мы берем весь комплект User Flow и скрепляем их навигацией.
Пример User Flow мобильного приложения
В примере интересный вариант оформления User flow на примере приложения Toronto Zoo.
Пример User Flow для веб-сайта и веб-приложения
Пример от digital-агенства Focus Lab. Ребята проанализировали выполненные проекты и создали библиотеку для проектирования User Flow (User Flow Kit). В основе алфавита проектирования у ребят прослеживаются черты BPMN-нотации.
Вывод и рекомендация
User Flow помогают сосредоточиться на человекоцентричном дизайне и добиться максимально комфортного и эффективного маршрута до цели. А еще они добавляют согласованности в работе команды и экономят время и деньги.
User Flow также направляют принятие решений в дизайне и подсвечивают недочеты еще до того, как начнется фаза детальной работы над компонентами и визуальной проработкой. И самое главное — они побуждают искать самый простой способ достижения цели пользователем и вовлекают в поиски алтернатив. Попробуйте их в вашим следующем проекте.
Напомню, что прокачать навыки в создании User Flow вы можете на платформе Breezzly. На Breezzly вы тренируетесь в контексте сайтов, мобильных и веб-приложений и даже на примере приложений для смарт-часов.
Как тестировать user flow: четыре метода и лайфхак для бесплатного UI тестирования
Работа над User flow, пользовательским сценарием — важный этап создания интерфейса. User flow принимает различные формы в зависимости от этапа развития продукта. Расскажу, как тестировать сценарии в разных ситуациях и как это можно делать бесплатно. Пригодится людям, задействованным в создании интерфейсов: UI дизайнерам, менеджерам продуктов, UX исследователям.
User Flow — пользовательский сценарий иллюстрирует порядок действий, который пользователь выполняет для решения задачи. Сценарий — это скелет интерфейса, состоит из шагов — отдельных экранов. Удобный для пользователя интерфейс начинается именно с проработки user flow, структуры.
В оригинале пользовательский сценарий представляет собой блок-схему с логическими связями и пересечениями. Но тестировать сценарий в таком виде затруднительно и бессмысленно.
Интерфейс — это подход к решению задачи. Для проверки логики смотрим, насколько интерфейс выполняет свою функцию.
Для теста User Flow достаточно последовательных экранов или даже нарисованных от руки черновиков. Большинство дизайнеров, продактов и исследователей имеют дело уже с работающим цифровым продуктом, поэтому начнем именно с этой ситуации.
Тестировании User Flow продукта — это гигиеническая норма. Для оценки общего уровня удобства важны количественные метрики. Подход к сбору данных зависит от исследовательской культуры и возможностей.
Для проверки сценариев достаточно провести онлайн опрос. Даем респондентам ссылку на продукт и задание. По итогу прохождения задаем вопросы из стандартной анкеты по оценке юзабилити (SUS). Полезно наравне с собственным продуктом тестировать прямых и косвенных конкурентов. В разнице оценок и содержится наиболее полезная информация.
Пример: летом 2019 года провели сравнительное исследование трех онлайн супермаркетов. За несколько часов получили общие метрики по удобству интерфейса, а из открытых ответов почерпнули информацию о разрывах в пользовательском сценарии.
Fastuna Task Flow Click (UX Benchmark) Ссылка на отчет
Я не смогла добавить все товары в корзину. При добавлении только 1 товара мне сразу предлагают оформить доставку, а я хотела добавить другие товары.
Опрос дает количественные оценки и прямую речь. Фиксируем показатели, которые отклоняются от нормы или результатов конкурентов. Изучаем упомянутые в открытых ответах проблемы. Полученных данных бывает достаточно для принятия бизнес решения. Если вопросы остались, то обращаемся к более глубоким методам исследований.
Предположим ситуацию: продукт функционирует без багов, но люди не доходят до выполнения целевого действия. Точного понимания причин нет. Поиск проблемы — это качественная, а не количественная задача, предполагает погружение в опыт отдельных людей. Здесь подходят два метода: модерируемые и немодерируемые юзабилити тесты. Первый метод быстр, доступен почти всем. Модерируемый тест способен дать более глубокие данные, но требует времени и специальных навыков.
Немодерируемые тестирования занимают от одного до нескольких дней. Люди под запись экрана делают попытку выполнения задания, а потом дают обратную связь. Изучаем видеозаписи и пониманием, в чем заключена проблема: в логике user flow, в функциональных элементах или в оформлении интерфейса.
В статье “Смотрим видео и страдаем. Как я анализировал записи UX-исследования” рассказываю о том, как выглядит анализ немодерируемого юзабилити теста и с какими неожиданными трудностями сталкиваются люди при использовании привычных элементов.
Применимо, когда есть потребность в большей детализации и погружении. Респондент получает задание, а интервьюер очно или онлайн наблюдает за человеком в режиме реального времени, задает уточняющие вопросы. Личные интервью с людьми — более трудоемкий и времязатратный метод, требует особых компетенций, но при правильном проведении дает ценную информацию. Модерируемые юзабилити интервью рекомендуем по возможности проводить с привлечением штатных сотрудников, погруженных в продукт.
При тестировании User Flow путем модерируемых и немодерируемых юзабилити тестирований важно помнить, что эти методы относятся к качественной методологии, служат для формулировки предположений, а не для проверки гипотез. На нескольких интервью вы найдете проблему, но не ее распространенность.
Предположим, мы нашли проблему в пользовательском сценарии и работаем над улучшением User Flow. Новый пользовательский сценарий обретает плоть. Сначала в виде последовательных макетов. Мы не палим ресурсы разработки впустую, поэтому удостоверяемся, что новый вариант работает, люди понимают, куда нажимать на каждом шаге для выполнения задания, дойдут до конца маршрута.
Для количественной проверки гипотез, при оценке сценария на интуитивность подходит тест первого клика
Как это работает: даем 100-400 людям задание и последовательно показываем экраны интерфейса. На каждом экране человек делает только один клик, который приблизит к выполнению задания. По итогу получаем тепловую карту кликов на каждом шаге. Видим, на каком этапе пользовательского сценария возникает больше всего затруднений.
Пример: я тестировал пользовательский сценарий по поиску дверной ручки на сайте строительного гипермаркета. На втором шаге сценария, при попадании в каталог 71% ищут дверные ручки в разделе двери и окна. И лишь 6% в скобяных изделиях, где они и находятся. Вывод: интерфейс не решает задачу для сценария по поиску этого товара.
Если задача — общая оценка то из исследований наиболее релевантен опрос с применением классической шкалы SUS или ее разновидностей.
Если на этапе готового продукта ищем проблему в User Flow, то в зависимости от требуемой детализации и ресурсов используем немодерируемое или модерируемое юзабилити тестирование.
На этапе разработки, когда user flow представлен в виде последовательных экранов рекомендую тест первого клика — он покажет, на каком шаге люди теряются, поможет при размещении кнопок.
Обещанный лайфхак: перечисленные решения доступны бесплатно. Fastuna специализируется на готовых решениях на базе онлайн панели. Но при использовании собственной базы все решения можно использовать бесплатно. Каждой компании доступно 500 интервью в месяц. Да, это касается даже немодерируемых юзабилити тестирований с записью экрана.
Руководство по переходу от «что за хрень я вижу», к четкому юзерфлоу
Что такое юзерфлоу и почему их нужно использовать. Иллюстрированное руководство по переходу от «что за хрень я вижу», к четкому дизайну работы вашего приложения.
Цель всей моей жизни –рассказать о юзерфлоу… На самом деле, нет, но меня сильно волнуют технологии и то, как мы рассказываем об их работе.
Мне нравится думать о том, какие инструменты и методы мы используем, чтобы распространять свои идеи среди других дизайнеров.
Мне также нравится думать о том, как мы общаемся с людьми за пределами нашей профессии, не используя профессиональный жаргон и без знакомых инструментов. Меня интересует юзерфлоу, потому что я работаю над этим проектом.
В этой статье мы ответим на вопрос, что такое юзерфлоу, каковы его основы, а затем закончим статью несколькими примерами.
Содержание:
Что такое юзерфлоу в двух словах?
Это последовательность шагов, которые пользователь предпринимает для достижения важной цели.
И зачем их используют?
Они используются для отображения предполагаемого сценария перехода пользователя на различные страницы и его действий в приложении или на веб-сайте.
Отлично, и из чего они состоят?
Юзерфлоу обычно включает имя, шаги, пользователей и описание того, что происходит на каждом шаге.
Alex Handley, сооснователь Primary?
Другие дизайнеры также продвигали процесс юзерфлоу и предлагали свое собственное определение. Существуют такие инструменты, как Overflow и Flowmapp, которые помогут вам создавать юзерфлоу. Ryan из Basecamp изобрел отличную короткую формулу для юзерфлоу (он называет их UI flows – сценарии пользовательского интерфейса):
Юзерфлоу – это еще один метод сегментации и определения цели вашего цифрового продукта, опыта клиентов, веб-сайта или приложения.
Таким образом, это еще один метод, но он обладает одним замечательным свойством – юзерфлоу позволяют определять разделы такой грубой, абстрактной и технической вещи, как «кросс-платформенный мобильный опыт» с точки зрения пользователя.
Помните одну вещь о юзерфлоу, их нужно определять по цели, которую пользователь достигает, завершая сценарий.
Например, в юзерфлоу можно подробно расписать, как посетители сайта создают учетную запись, заказывают огнемет или подписываются на рассылку.
Вот пример стандартного юзерфлоу:
И для чего-то более интересного (покупка огнемета):
Что за хрень я вижу?
Мне посчастливилось помочь и получить помощь от более, чем десятка стартапов в этом году. В каждом разговоре я думаю, «что это за хрень». Ну, вы поняли, это я о юзерфлоу.
Вот реконструкция нескольких типичных разговоров и почему они подчеркивают потребность в юзерфлоу.
Технология чудесно свободна. Свободна, как вирус H1N1, в международном аэропорту. Свободна, как команда, независимо создающая различные части кубика-рубика, где цвета и количество сторон определяются в прогрессивных спринтах.
Уважаемые тренеры Agile, пожалуйста, не стесняйтесь писать в комментариях, что мое отрицательное отношение к Agile проистекает из моей неспособности выполнить Agile или недостаточного применения всех Agile-принципов.? Фото: Alvaro Reyes
Эта свобода подходит для программного обеспечения, но имеет свои побочные эффекты. Я думаю, что юзерфлоу – лучшее противоядие для проблемы «что за хрень я вижу», которая возникает при обсуждении технического проекта. Они помогают нашей аудитории ориентироваться в вопросах без знания профессионального жаргона:
Давайте рассмотрим простую систему создания этих раскрученных (чрезмерно?) юзерфлоу.
Основы юзерфлоу ?
Я думаю, что есть три основных принципа создания юзерфлоу. Некоторые люди думают иначе, они сторонники «свободного сценария» (я только что придумал название) и выступают за свободу, бесконечный скроллинг, выбирают собственное приключение.
После того, как я увидел достаточное количество проектов программного обеспечения, я являюсь сторонником упорядоченной структуры.
Принцип 1: Юзерфлоу показывают свою цель ?
Юзерфлоу имеет имя, которое описывает его цель. Цель, которую ваши пользователи достигают, выполнив определенные шаги. Название ваших юзерфлоу – важный фактор и его часто упускают из виду.
Назовите юзерфлоу в соответствии с целями пользователя и получите бонусные очки, указав, кем является пользователь
Принцип 2. Юзерфлоу направлены в одном направлении ➡
Придерживаясь одного направления и ограничивая точки принятия решений в своих схемах юзерфлоу, вы отделяете их от растянутых карт сайтов и кликабельных прототипов.
Они тоже полезны, но для передачи четкого поведения юзерфлоу подходят лучше всего. (Таким образом, юзерфлоу ≠ карта сайта или прототип с высокой детализацией).
Юзерфлоу могут иметь несколько путей, но только для отображения разных состояний, а не разных целей
Почему юзерфлоу работают? Основная причина заключается в том, что они рассказывают историю. Наш мозг старается запомнить истории и вовлеченных в них людей.
Хотя юзерфлоу «Создать учетную запись» может быть и не самая интересная история, читателю гораздо легче ее запомнить, чем растянутую карту возможных сценариев. И это проще для гуманитариев.
Принцип 3. Юзерфлоу показывают завершенную задачу ✅
Чтобы поддерживать дизайн вашего приложения (или любого цифрового продукта), юзерфлоу должны быть ограничены одной задачей или целью вашего пользователя.
Если юзерфлоу – это всего лишь фрагмент, он теряет способность рассказать историю своих пользователей. Если он слишком растянут, пользователи потеряют смысл.
Если у вас есть интерфейсы (прототипы, макеты), покажите их! Опишите каждый шаг и детально распишите, почему существуют альтернативные пути
Юзерфлоу должны быть понятной моделью вашего приложения или дизайна веб-сайта.
Убедитесь, что вы указали всю необходимую информацию, чтобы показать причину проектирования юзерфлоу.
Все вместе с примерами
Теперь давайте воплотим эти основные принципы на практике.
1. Юзерфлоу показывает свою цель?
Юзерфлоу выше может быть и красивое, но его неопределенность скрывает потенциальную сложность и не сообщает достаточно информации зрителю.
Давая название юзерфлоу, вы сможете проектировать с точки зрения пользователя и разделять сценарии исходя из его целей.
2. Юзерфлоу направлены в одном направлении ️️➡
Это работает как хорошая карта сайта или демонстрация навигации.
Лучше разбить юзерфлоу на отдельные сценарии.
3. Юзерфлоу представляют завершенную задачу ✅
Избегайте добавления деталей, которые не помогают сообщать сценарий и действия пользователя.
В этом примере любой может прочитать и понять юзерфлоу.
Если вы внимательно читали эту статью, тогда у вас должно быть свое мнение по этой теме.
Если вам понравилось мое мнение, ставьте лайк. А свое мнение вы можете изложить в комментариях ниже.