Что такое user flow
Что строить в первую очередь: User Journey Map или User Flow?
UX дизайн — комплексный процесс. Чтобы создавать по-настоящему удобные и полезные продукты, проектировщики используют разные инструменты на разных этапах.
Продуктовый дизайнер (UX/UI), системный аналитик, исследователь. Активно осваивает Data Science.
Авг 12, 2018 · 6 мин читать
В этой статье мы разберем два типа материалов, которые помогают визуализировать опыт пользователя в продукте: карта пути пользователя (user journey map) и пользовательские сценарии (user flows).
Попробуем ответить на такие вопросы:
Для начала я объясню некоторые базовые термины, которые встретятся нам в этой статье.
Что такое карта пути пользователя (User Journey Map)?
User Journey Map помогает зафиксировать пользовательский опыт во время взаимодействия с продуктом. Это некое визуализированное путешествие пользователя по продукту. User Journey Map — как журнал, в котором пользователь записывает свои чувства, неудачи и успехи.
В User Journey Map может быть несколько слоев, она не привязана к конкретному элементу в продукте, который отвечает за то или иное действие. User Journey Map даже может описывать, что делает система «за кулисами», чтобы предоставить пользователю необходимую информацию. С другой стороны, User Journey Map — это больше про пользователя: она описывает его чувства, мысли, действия при взаимодействии с продуктом.
Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.
User Journey Map обычно линейны, так как описывают различные аспекты достижения конкретных задач.
Что такое пользовательские сценарии (User Flows)?
User flows (также известные как пользовательские сценарии, UX-сценарии, Wire, UI или IX сценарии) — это наглядные материалы, которые иллюстрируют весь путь пользователя в продукте целиком.
Изначально это были блок-схемы, но со временем они обросли разными визуальными элементами — вайрфреймами, скетчами и визуализацией жестов.
Сейчас user flow — это гибрид классической блок-схемы и элементов визуального интерфейса. В основе user flow лежат задачи, которые выполняет пользователь, а также возможные альтернативные исходы.
Можете прочесть пару моих статей об UX-сценариях (user flow):
Отличия
В основе сценария — User Flow — как правило, лежит порядок действий, которые должен выполнить пользователь. User Flow помогает понять, все ли процессы в продукте имеют логическое завершение. Глядя на user flow, команда может сразу понять, в чем суть решения, которое предлагает продукт.
User flow могут быть нелинейными — в них есть точки принятия решений, пути, режимы и петли, при помощи которых мы иллюстрируем все возможные взаимодействия с продуктом.
Обычно в User Flow мы не делаем акцент ни на ощущения пользователя, ни на множество возможных уровней решения. Основная задача сценариев — показать процесс работы с продуктом.
User Journey Map больше ориентированы на пользовательский опыт клиента. Они выявляют проблемные точки и моменты радости. User Journey Map может описывать разные аспекты решения: например, не только мобильное приложение, но и работу системы на сервере.
Есть определенные правила построения User Flow (наверное потому, что сценарии эволюционировали из блок-схем). А вот что касается User Journey Map, единого рецепта тут нет. Можно найти в интернете кучу примеров карт и все они будут очень разные.
Как использовать User Flow в процессе дизайна
Меня очень часто спрашивают: с чего начать? С User Journey Map или с User Flow? Не буду оригинальным: все зависит от ситуации 🙂
Когда вы создаете решение с нуля, собирайте требования, узнавайте потребности пользователей и пишите пользовательские истории. В первую очередь думайте о том, что должен сделать пользователь, чтобы выполнить стоящую перед ним задачу. На базе этой информации вы создадите карту User Journey Map. В эту версию карты не обязательно включать вайрфреймы: рассматривайте ее как начальный план, который вы детализируете на последующих этапах. Уже потом, когда вы создадите вайрфреймы и макеты, можно будет обратиться к UX Flows: они помогут понять, правильный ли путь вы предлагаете пользователям и как его можно улучшить.
Короче говоря:
Я рекомендую начинать с User Flow, если у вас на руках готовое решение. Если вы запускаете новый проект, начните с построения User Journey Map и уже потом усиливайте ее при помощи User Flow.
Еще я обнаружил, что User Flow очень эффективны, когда дело касается общения с клиентом. Людям, не связанным с дизайном, проще понять формат блок-схемы. А вот User Journey Map они читают с трудом — поэтому бывает рискованно показывать ее клиентам на ранних этапах и без объяснений.
Как создавать User Journey Map и User Flow
При создании этих материалов я люблю пользоваться разными полезными инструментами.
Когда нужно накидать User Journey Map прямо во время встречи или мозгового штурма, я предпочитаю стикеры. Их можно легко менять местами, выбрасывать ненужные и заменять новыми.
Цифровую карту User Journey Map проще всего создавать в электронной таблице.
В заключение
User Flow и User Journey Map по сути похожи. Цель и тех, и других — выяснить, как пользователь будет взаимодействовать с вашим решением. И все же они ориентированы на разные аспекты продукта.
В ходе дизайна стоит создавать и User Flow, и User Journey Map— эти материалы дополняют друг друга и помогают вам усилить UX. Что создавать в первую очередь? Простого ответа на этот вопрос не существует — очень многое зависит от особенностей вашего проекта.
Руководство по переходу от «что за хрень я вижу», к четкому юзерфлоу
Что такое юзерфлоу и почему их нужно использовать. Иллюстрированное руководство по переходу от «что за хрень я вижу», к четкому дизайну работы вашего приложения.
Цель всей моей жизни –рассказать о юзерфлоу… На самом деле, нет, но меня сильно волнуют технологии и то, как мы рассказываем об их работе.
Мне нравится думать о том, какие инструменты и методы мы используем, чтобы распространять свои идеи среди других дизайнеров.
Мне также нравится думать о том, как мы общаемся с людьми за пределами нашей профессии, не используя профессиональный жаргон и без знакомых инструментов. Меня интересует юзерфлоу, потому что я работаю над этим проектом.
В этой статье мы ответим на вопрос, что такое юзерфлоу, каковы его основы, а затем закончим статью несколькими примерами.
Содержание:
Что такое юзерфлоу в двух словах?
Это последовательность шагов, которые пользователь предпринимает для достижения важной цели.
И зачем их используют?
Они используются для отображения предполагаемого сценария перехода пользователя на различные страницы и его действий в приложении или на веб-сайте.
Отлично, и из чего они состоят?
Юзерфлоу обычно включает имя, шаги, пользователей и описание того, что происходит на каждом шаге.
Alex Handley, сооснователь Primary?
Другие дизайнеры также продвигали процесс юзерфлоу и предлагали свое собственное определение. Существуют такие инструменты, как Overflow и Flowmapp, которые помогут вам создавать юзерфлоу. Ryan из Basecamp изобрел отличную короткую формулу для юзерфлоу (он называет их UI flows – сценарии пользовательского интерфейса):
Что такое юзерфлоу? – Коротко и ясно. Источник
Юзерфлоу – это еще один метод сегментации и определения цели вашего цифрового продукта, опыта клиентов, веб-сайта или приложения.
Таким образом, это еще один метод, но он обладает одним замечательным свойством – юзерфлоу позволяют определять разделы такой грубой, абстрактной и технической вещи, как «кросс-платформенный мобильный опыт» с точки зрения пользователя.
Помните одну вещь о юзерфлоу, их нужно определять по цели, которую пользователь достигает, завершая сценарий.
Например, в юзерфлоу можно подробно расписать, как посетители сайта создают учетную запись, заказывают огнемет или подписываются на рассылку.
Вот пример стандартного юзерфлоу:
И для чего-то более интересного (покупка огнемета):
Что за хрень я вижу?
Мне посчастливилось помочь и получить помощь от более, чем десятка стартапов в этом году. В каждом разговоре я думаю, «что это за хрень». Ну, вы поняли, это я о юзерфлоу.
Вот реконструкция нескольких типичных разговоров и почему они подчеркивают потребность в юзерфлоу.
Технология чудесно свободна. Свободна, как вирус H1N1, в международном аэропорту. Свободна, как команда, независимо создающая различные части кубика-рубика, где цвета и количество сторон определяются в прогрессивных спринтах.
Уважаемые тренеры Agile, пожалуйста, не стесняйтесь писать в комментариях, что мое отрицательное отношение к Agile проистекает из моей неспособности выполнить Agile или недостаточного применения всех Agile-принципов.? Фото: Alvaro Reyes
Эта свобода подходит для программного обеспечения, но имеет свои побочные эффекты. Я думаю, что юзерфлоу – лучшее противоядие для проблемы «что за хрень я вижу», которая возникает при обсуждении технического проекта. Они помогают нашей аудитории ориентироваться в вопросах без знания профессионального жаргона:
Давайте рассмотрим простую систему создания этих раскрученных (чрезмерно?) юзерфлоу.
Основы юзерфлоу ?
Я думаю, что есть три основных принципа создания юзерфлоу. Некоторые люди думают иначе, они сторонники «свободного сценария» (я только что придумал название) и выступают за свободу, бесконечный скроллинг, выбирают собственное приключение.
После того, как я увидел достаточное количество проектов программного обеспечения, я являюсь сторонником упорядоченной структуры.
Принцип 1: Юзерфлоу показывают свою цель ?
Юзерфлоу имеет имя, которое описывает его цель. Цель, которую ваши пользователи достигают, выполнив определенные шаги. Название ваших юзерфлоу – важный фактор и его часто упускают из виду.
Назовите юзерфлоу в соответствии с целями пользователя и получите бонусные очки, указав, кем является пользователь
Принцип 2. Юзерфлоу направлены в одном направлении ➡
Придерживаясь одного направления и ограничивая точки принятия решений в своих схемах юзерфлоу, вы отделяете их от растянутых карт сайтов и кликабельных прототипов.
Они тоже полезны, но для передачи четкого поведения юзерфлоу подходят лучше всего. (Таким образом, юзерфлоу ≠ карта сайта или прототип с высокой детализацией).
Юзерфлоу могут иметь несколько путей, но только для отображения разных состояний, а не разных целей
Почему юзерфлоу работают? Основная причина заключается в том, что они рассказывают историю. Наш мозг старается запомнить истории и вовлеченных в них людей.
Хотя юзерфлоу «Создать учетную запись» может быть и не самая интересная история, читателю гораздо легче ее запомнить, чем растянутую карту возможных сценариев. И это проще для гуманитариев.
Принцип 3. Юзерфлоу показывают завершенную задачу ✅
Чтобы поддерживать дизайн вашего приложения (или любого цифрового продукта), юзерфлоу должны быть ограничены одной задачей или целью вашего пользователя.
Если юзерфлоу – это всего лишь фрагмент, он теряет способность рассказать историю своих пользователей. Если он слишком растянут, пользователи потеряют смысл.
Если у вас есть интерфейсы (прототипы, макеты), покажите их! Опишите каждый шаг и детально распишите, почему существуют альтернативные пути
Юзерфлоу должны быть понятной моделью вашего приложения или дизайна веб-сайта.
Убедитесь, что вы указали всю необходимую информацию, чтобы показать причину проектирования юзерфлоу.
Все вместе с примерами
Теперь давайте воплотим эти основные принципы на практике.
1. Юзерфлоу показывает свою цель?
Юзерфлоу выше может быть и красивое, но его неопределенность скрывает потенциальную сложность и не сообщает достаточно информации зрителю.
Давая название юзерфлоу, вы сможете проектировать с точки зрения пользователя и разделять сценарии исходя из его целей.
2. Юзерфлоу направлены в одном направлении ️️➡
Это работает как хорошая карта сайта или демонстрация навигации.
Лучше разбить юзерфлоу на отдельные сценарии.
3. Юзерфлоу представляют завершенную задачу ✅
Избегайте добавления деталей, которые не помогают сообщать сценарий и действия пользователя.
В этом примере любой может прочитать и понять юзерфлоу.
Если вы внимательно читали эту статью, тогда у вас должно быть свое мнение по этой теме.
Если вам понравилось мое мнение, ставьте лайк. А свое мнение вы можете изложить в комментариях ниже.
Полное руководство по 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 вы тренируетесь в контексте сайтов, мобильных и веб-приложений и даже на примере приложений для смарт-часов.