Flow map как пользоваться

User flow: что это такое и почему без него нельзя делать приложения и сайты

Простыми словами о пути пользователя: зачем его используют и как создают.

Иллюстрация: Аня Макарова для Skillbox Media

Полина Старцева
Всюду ищет великую красоту, работает над разумностью потребления.

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

А на то, что они вернутся и станут им пользоваться постоянно, прямо влияет один из начальных этапов работы над дизайном.

Рассказываем простыми словами:

• что такое user flow,
• зачем его разрабатывать,
• что нужно, чтобы спроектировать user flow.

Что такое user flow

На русском языке понятие user flow — это «путь пользователя» или «диаграмма пользовательского пути», хотя вернее было бы переводить это как «поток пользователя».

Термин «поток», flow, пришёл в дизайн и разработку интерфейсов из фундаментальной науки — психологии восприятия. Он означает состояние полной включённости в текущее занятие, которое приносит человеку удовлетворение.

Для дизайнеров и менеджеров проекта user flow — это всегда наглядное представление пути пользователя, а не просто концепт или описание текстом.

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

Кроме термина user flow, можно встретить и другие названия: user flow chart, user flow diagram, user interface flow, task flow diagram, UX flow, interaction flow.

User flow — это диаграмма из блоков и связей. Она подобна карте: отражает каждый шаг пользователя и главные действия, которые он должен совершить с момента запуска приложения или входа на сайт и до достижения своей цели. А целью может быть что угодно: купить вещь, узнать количество шагов за день, проверить статус доставки, написать в службу поддержки.

Кому и для чего нужен user flow

User flow — это инструмент, а не некая формальность. Он необходим всем, кто создаёт и развивает цифровые продукты и сервисы:

Дизайнерам

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

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

Разработчикам

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

Без прописанного user flow программисты способны сделать проект. Но вполне вероятно, что из-за этого придётся исправлять множество недочётов, переписывать код. А это означает перенос сроков и рост бюджета.

Менеджерам продукта

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

Менеджерам проекта

Чтобы распределять задачи между дизайнерами, разработчиками и аналитиками.

Маркетологам и продавцам

Чтобы анализировать, как работает или не работает воронка продаж.

Инструмент user flow полезен не только специалистам с конкретными ролями и задачами. Он нужен всей команде в целом:

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

• User flow — одна из основ человекоцентричного дизайна. Поэтому сайтами и приложениями, созданными с достаточным вниманием к его разработке, пользоваться комфортно.

• Благодаря user flow получается цифровой продукт, к которому пользователи возвращаются, потому что он им удобен и ценен.
• Продуманный user flow проявляет возможные нюансы до начала работы над дизайном и кодом. Это сохраняет время, деньги и упрощает коммуникацию между исполнителями и другими сторонами.

Как составлять user flow

Кто это делает

Если проект небольшой и в команде всего несколько человек, то задача спроектировать user flow обычно ложится на дизайнера интерфейса.

Если проект средний или крупный, то user flow обычно «рисуют» несколько участников:

• CX -исследователь,
• аналитик,
• UX/UI-дизайнеры.

Из чего состоит user flow

Чаще всего user flow изображают как блок-схему, которая описывает:

• на каком экране находится пользователь;
• какие перед ним встают условия;
• что он делает, чтобы продвинуться дальше.

Блок-схема может быть и общей, и очень детализированной — это зависит и от масштаба самого цифрового продукта, и от ресурсов тех, кто его производит. Но чтобы user flow стал прикладным и понятным инструментом, в нём следует визуализировать несколько основных элементов:

Точку начала. Обычно это момент, когда пользователь открывает сайт или приложение.

Действия и процессы. Так показывают шаги, которые выполняет юзер: заполняет форму логина, закрывает окно с рекламой, ставит лайк в карточке товара.

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

Связи. Благодаря этим элементам видно, какие точки и действия связаны.

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

Что нужно знать, чтобы спроектировать user flow

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

• Для исследования аудитории проводят опросы, включённые наблюдения, глубинные интервью и тестирование. На этом этапе UX/UI-дизайнерам и менеджерам крайне важно не полагаться только на личный опыт и собственные мнения, а обращаться к другим людям — потенциальным пользователям.
• Чтобы понять рынок, изучают сайты и приложения конкурентов. Не поверхностно и не только с точки зрения эстетики: погружаются в опыт использования и рефлексируют над тем, что было удобно и приятно, а что нарушало «состояние потока».
• Контекст — это ситуации, в которых пользователю будут нужны конкретные цифровые продукты, поэтому на этапе исследования важно их моделировать и оценивать, как внешние условия влияют на опыт пользователя. Например, функциями навигатора он, скорее всего, будет пользоваться за рулём, поэтому для безопасности крайне важно, чтобы путь до результата был максимально коротким и простым.

Кроме того, важно быть в курсе бизнес-целей продукта. Особенно если это интернет-магазин или промоприложение. Каждый шаг пользователя должен быть логичен и удобен не только для него, но и приводить его к целевому действию, который нужен компании. Например, user flow должен вести к результату «Оплатить» или «Поделиться видео».

Чем пользоваться, чтобы составить user flow

Есть много инструментов для командного проектирования user flow. Это можно делать как угодно: и маркером на доске, и в Excel, и в Google Docs, и в любом графическом редакторе.

Один из популярных инструментов — FigJam, доска для совместной работы дизайнеров и менеджеров от Figma.

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

Такие сервисы позволяют синхронно работать над схемами, добавлять в них интерактивность, создавать на их основе эстетичные презентации и даже прототипы экранов.

Больше интересного про дизайн в нашем телеграм-канале. Подписывайтесь!

Полное руководство по User Flow: как сделать, примеры и советы

Анастасия Свеженцева Продуктовый дизайнер (UX/UI), веб-дизайнер и бренд-дизайнер. Опыт проектов в международных компаниях Omega-R (агентство), iSpring Solutions (продуктовая) и со стартапами по всему миру. Делюсь опытом в дизайне на офлайн- и онлайн-платформах с 2017 года: Институт программных систем, godesign.school, онлайн-платформа breezzly.ru и пишу микролекции о дизайне на Яндекс.Кью (226 ответов). Июн 11, 2022 · 8 мин читать

User flow — это наглядное представление последовательности действий, которые выполняет пользователь для достижения значимой для себя цели на сайте или в приложении. Может охватывать как какую-то отдельную функцию, так и весь продукт. Рассказываем на примерах, как построить карту и с помощью каких инструментов это удобнее сделать. ��‍���� Фактически концепцию потока в UX-дизайне впервые предложил психолог Михай Чиксентмихайи. Поток (англ. flow) — это психическое состояние, в котором человек полностью включён в то, чем он занимается, что характеризуется деятельным сосредоточением, полным вовлечением в процесс деятельности. Поэтому при проектировании User Flow мы будем опираться на эти фундаментальные концепции психологии восприятия.

• Что такое User Flow и для чего он нужен?
• Инструкция по разработке User Flow
• Что важно учесть при построении User Flow
• Что еще нужно знать: связь User flow Map и User Story Mapping
• Пример 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 — это маршрут путешествия пользователя через экраны приложения к важной цели. А каждое приложение — это целая карта таких маршрутов (User Flow Map).

Интересуетесь свежими статьями по продуктовому дизайну (UX/UI)? ��

Использовать User Flow в команде следует по следующим причинам:

1. Во-первых, User Flow фокусирует команду на дизайне интуитивно понятного интерфейса с ясной последовательностью шагов до цели. Кратчайшее расстояние до цели — прямая. User Flow помогает вам не терять эту прямую из виду и добиваться максимально эффективного дизайн-решения для достижения целей пользователя.
2. Во-вторых, User Flow помогает оценить, подходит ли интерфейс для решения поставленной задачи. Такая схема вовлекает в поток развития продукта и побуждает команду задавать исследовательские вопросы на темы: Удается ли сосредоточиться на достижении целей? Ощущается ли контроль над движением к цели? И серию других вопросы связанные с состоянием потока по Чиксентмихайи.
3. В-третьих, помогает наглядно продемонстрировать команде идеи по развитию системы. Собираете комплект ключевых сценариев приложения в User flow Map (карта на 1 лист A4), связываете общей навигацией (меню) и показываете где в этой карте появится новый маршрут, или какой из существующих Flow вы предлагаете сделать лучше и как именно.

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

Инструкция по разработке User Flow

В самом простом варианте построение диаграммы пользовательского пути происходит следующим образом:

1. Опишите пользователя: окружение пользователя, цель и ожидания/страхи на пути к цели, мотиваторы продолжать движение. Может содержать различные метрики. Идеально, если вы будете опираться на наблюдения поведением живых пользователей (в реальности, внутри продукта, а лучше комплексно).
2. Отобразите ожидаемый (пользователем) план действий по достижению цели: схема мышления здесь (A-начало) → (1) → (2) → (3) → (B-цель), а 1→2→3 — это шаги, которые требуется выполнить, чтобы достичь цели — все как с рецептом приготовления стейка. Так вы создадите некую историю. Эта история должна быть максимально четкой и ясной, чтобы в конечном итоге отобразить нам полную картину взаимодействия пользователя с продуктом. Идеально, если вы будете опираться на то, что уже знакомо пользователю, его привычки, ментальные модели: к примеру отпуска частенько планируют на конкретные даты, поэтому при создании приложения по покупке туров может пригодится шаг в выбором дат, а еще ввод данных паспорта, оплата и билеты на руки.
3. Затем выполните визуализацию блок за блоком для каждого шага. Алгоритм визуализации такой же как с классическими блок-схемами, которые вы микскуете с экранами интерфейса. помощью готовой библиотеки User Flow для Miro или UX Flow для Figma — такие библиотеки хороша как основа, каждый дизайнер развивает подобный конструктор для проработки User Flow в конкретной предметной области. Идеально, если с вами в паре работает бизнес-аналитик, которые помогает со сборкой всего бизнес-процесса в формате BPMN.

Что важно учесть при построении 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-нотации.

Что еще почитать на тему проектирования и дизайна сценариев

Автор книги изучил историю появления успешных сервисов и продуктов, взял интервью у более чем 30 продуктовых дизайнеров, выяснил, на что они опираются при создании дизайн-решений и обобщил наблюдения в виде tech-практик, которые стоит попробовать в ваших проектах.

Вывод и рекомендация

User Flow помогают сосредоточиться на человекоцентричном дизайне и добиться максимально комфортного и эффективного маршрута до цели. А еще они добавляют согласованности в работе команды и экономят время и деньги.

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

Напомню, что прокачать навыки в создании User Flow вы можете на платформе Breezzly. На Breezzly вы тренируетесь в контексте сайтов, мобильных и веб-приложений и даже на примере приложений для смарт-часов.

Что строить в первую очередь: User Journey Map или User Flow?

UX дизайн — комплексный процесс. Чтобы создавать по-настоящему удобные и полезные продукты, проектировщики используют разные инструменты на разных этапах. В этой статье мы разберем два типа материалов, которые помогают визуализировать опыт пользователя в продукте: карта пути пользователя (user journey map) и пользовательские сценарии (user flows).

Попробуем ответить на такие вопросы:

• В чем разница между картой пути и пользовательским сценарием?
• В чем цель каждого? Как они дополняют друг друга?
• И наконец, что создавать в первую очередь при проектировании продукта?

Для начала я объясню некоторые базовые термины, которые встретятся нам в этой статье.

Интересуетесь свежими статьями по дизайну? Подписывайтесь на канал в Telegram | ВКонтакте, Instagram, Facebook

Ищите системное погружение в тему? Загляните в блог для дизайнеров.

Что такое карты пути пользователя (User Journey Map)?

User Journey Map помогает зафиксировать пользовательский опыт во время взаимодействия с продуктом. Это некое визуализированное путешествие пользователя по продукту. User Journey Map — как журнал, в котором пользователь записывает свои чувства, неудачи и успехи.

В User Journey Map может быть несколько слоев, она не привязана к конкретному элементу в продукте, который отвечает за то или иное действие. User Journey Map даже может описывать, что делает система “за кулисами”, чтобы предоставить пользователю необходимую информацию. С другой стороны, User Journey Map — это больше про пользователя: она описывает его чувства, мысли, действия при взаимодействии с продуктом.

User Journey Map обычно линейны, так как описывают различные аспекты достижения конкретных задач.

Что такое пользовательские сценарии (User Flows)?

User flows (также известные как пользовательские сценарии, UX-сценарии, Wire, UI или IX сценарии) — это наглядные материалы, которые иллюстрируют весь путь пользователя в продукте целиком.

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

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

Можете прочесть пару моих статей об UX-сценариях (user flow):

User Flows in Sketch — Step by Step Guide to Create Them Quickly

Sketch is a powerful tool to create digital products. You may be surprised but it is also ideal to prepare some other…

UI Flows — Tool for Better Communication With Clients and Team | UXMisfit.com

If one picture is worth thousand words, then UI flows are worth a thousand pictures. Even if you created outstanding…

Отличия

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 Flow. На основании этих сценариев вы сможете построить хорошую User Journey Map, которая в свою очередь поможет выявить проблемные места и устранить их. Не менее важно выявить приятные моменты на пути пользователя, чтобы сохранить их и при возможности усилить.

Когда вы создаете решение с нуля, собирайте требования, узнавайте потребности пользователей и пишите пользовательские истории. В первую очередь думайте о том, что должен сделать пользователь, чтобы выполнить стоящую перед ним задачу. На базе этой информации вы создадите карту 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 Flows, то в режиме реального времени их проще всего создавать на белой доске. Но после встречи/мозгового штурма определенно стоит красиво оформить наработки в каком-нибудь цифровом инструменте. Я использую для этого Sketch — он на удивление хорошо подходит для создания различных UX материалов. Чтобы сделать процесс еще эффективнее, я создал инструмент для создания UX-сценариев — SQUID. Благодаря библиотеке, я могу за считанные минуты создавать стилизованные пользовательские сценарии.

Если хотите скачать мой SQUID-шаблон для оформления сценариев, у нас есть специальная скидка 15%для тех, кто подписан на рассылку UXMisfit.com. Больше об инструменте можно узнать в этой статье:

User Flow

User Flow (пользовательский сценарий, пользовательский путь, UX-сценарий и др.) – это схема, показывающая, как человек пользуется приложением или сайтом, чтобы выполнить свою задачу, например, купить товар, записаться на консультацию, посмотреть ролик и т.д. User Flow применяют, чтобы создавать приложения и сервисы, которые будут интуитивно понятны, удобны и будут помогать пользователям находить желаемое за наименьшее количество шагов.

Пройдите тест из 10 вопросов и узнайте, какая дизайн-профессия подходит лично вам

Содержание

1. Для чего нужен User Flow
2. Ценность User Flow
3. Как составить User Flow
4. User Flow и смежные понятия: что есть что
5. Программы для создания User Flow
6. Советы по созданию хорошего User Flow

Для чего нужен User Flow

16 месяцев
профессия UX/UI-дизайнер с нуля до про

Для тех, кто хочет попасть в IT без навыков кодинга, но с реальным опытом

Юзер Флоу помогает решать сразу несколько задач, важных для любого IT-продукта.

1. Определить эффективные и удобные способы достижения целей. Эта функция связана с принципом минимизации когнитивной нагрузки. Он гласит, что пользователи должны тратить как можно меньше усилий и времени на выполнение задачи. User Flow помогает дизайнерам определить оптимальный путь пользователя от точки входа до конечного результата, избегая лишних или запутанных шагов.
2. Выявлять и устранять проблемы в дизайне продукта заранее. Создание диаграмм User Flow позволяет командам по разработке продуктов собирать отзывы, вносить корректировки и менять логику приложений еще до создания дизайна и кода.
3. Сотрудничать между менеджерами, дизайнерами и разработчиками. Все члены команды должны понимать, как люди будут пользоваться сервисом. User Flow дает четкое представление о страницах, кнопках и движениях юзеров, сокращая ошибки в дизайне и разработке продукта.

16 месяцев
профессия UX/UI-дизайнер с нуля до про

Для тех, кто хочет попасть в IT без навыков кодинга, но с реальным опытом

Ценность User Flow

Юзер Флоу ценен для разных групп людей, которые связаны с продуктом.

• Для продуктовой команды это полезный инструмент в процессе дизайна UX. С помощью User Flow команда может понять, как пользователи взаимодействуют с продуктом, и создать лучший пользовательский опыт. User Flow также серьезно помогает в коммуникации команды.

Кто такой продуктовый дизайнер и чем он занимается?

• Для заказчика User Flow – это визуальное представление того, как пользователи будут достигать целей. Диаграмма помогает заказчику увидеть логику и структуру приложения или сайта, оценить его функциональность и простоту использования, дать обратную связь и предложения по улучшению.
• Для пользователя Юзер Флоу – это способ получить понятный и интуитивный интерфейс, полностью погружающий в процесс использования сервиса и помогающий быстро решить задачу.

Как составить User Flow

Шаг 1. Опишите пользователя

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

Чтобы описать пользователя для User Flow, нужно сделать следующее.

• Создать персону пользователя. Персона – это портрет типичного пользователя вашего продукта, который включает его демографические данные, психографические характеристики, поведенческие особенности и потребности. Персона помогает вам лучше понять, кто ваш пользователь, чего он хочет и как он думает. Например, вы можете создать персону для пользователя приложения по доставке еды так:

Профессия: маркетолог в стартапе

Хобби: йога, чтение, путешествия

Цель: заказать еду на ужин

Потребность: сэкономить время и деньги на приготовлении еды

Проблема: не хватает времени и энергии на готовку, не знает, что выбрать из множества вариантов

Мотивация: получить вкусную и здоровую еду быстро и удобно

Ожидание: легкий и понятный интерфейс приложения, широкий выбор ресторанов и блюд, низкая стоимость доставки и хорошее качество обслуживания

• Определить сценарий использования продукта. Сценарий – это описание ситуации, в которой пользователь использует ваш продукт для достижения своей цели. Например, вы можете определить сценарий для пользователя приложения по доставке еды так.

Анна работает в офисе с 9 до 18 часов. Сегодня она вернулась позже обычного и не успевает приготовить ужин. Она решает заказать еду через приложение. Она хочет выбрать что-то легкое и сытное из близлежащих ресторанов. Она открывает приложение на своем смартфоне и начинает поиск.

Шаг 2. Определите цели юзеров и согласуйте их с целями продукта

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

Матрица приоритизации – это инструмент анализа бизнес-процессов. Она может быть применена к любым задачам или проектам, от простых до сложных, кем угодно, от отдельных лиц до крупных организаций. Существует несколько форм матрицы приоритизации, в зависимости от критериев для оценки приоритетов (матрица Эйзенхауэра, модель Кано, метод RICE и др.).

Диаграмма Венна – это диаграмма, которая показывает все возможные логические отношения между несколькими группами кого-либо или чего-либо. Она состоит из нескольких пересекающихся кругов, каждый из которых представляет собой группу элементов с общим свойством (например, группу пользовательских целей и группу целей компании). Диаграмма Венна может быть использована для визуализации связи между целями пользователей и целями продукта, а также для выявления общих или уникальных целей для каждой группы.

После этого сформулируйте конкретные и измеримые цели для User Flow. Исходя из них, определите, какую конкретную цель вы хотите достичь с помощью User Flow. Сделайте эту цель конкретной, измеримой, достижимой, релевантной и ограниченной по времени (SMART).

Шаг 3. Определите точки входа

Проанализируйте, какие каналы приводят пользователей к вашему продукту или приложению. Например, это может быть поисковая система, социальная сеть, реклама, реферальная ссылка, СМС, электронное письмо или другой источник. В каждом из этих случаев пользователь может попадать на разные экраны или страницы. Например, из поисковика – на главную страницу или в каталог товаров конкретного бренда, а из email-оповещения – в корзину.

Чтобы определить точки входа для User Flow, нужно ответить на вопрос «Как пользователь узнает о вашем продукте и как он к нему попадет?». Например, если вы проектируете User Flow для регистрации пользователя в приложении, то точкой входа может быть первый экран после установки или ссылка на главную страницу из приглашения от другого пользователя.

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

профессия | 16 месяцев

UX/UI-дизайнер
с нуля до про

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

Шаг 4. Продумайте пути от точек входа до точек выхода

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

Вот 2 основных способа изображения User Flow.

1. Mind Map (ментальная карта) – схема пользовательского пути, состоящая их простых фигур. Mind Map выглядит как дерево или паутина, где центральный узел представляет главную тему или продукт, а ветви от него – подтемы или подфункции.

Обычно для изображения User Flow используются следующие фигуры из общепринятого стандарта условных обозначений BPMN:

• эллипс и круг – начало или конец главного пути и подпутей внутри приложения;
• стрелка – направление движения пользователя;
• прямоугольник – какой-либо процесс, например, «просмотр каталога» или «добавление товара в корзину»;
• ромб – условие, например, «если юзер залогинился, то…» или «если юзер подтвердил заказ, то…».

1. Wire Flow – схема, состоящая не из простых фигур, а из экранов или страниц продукта с минимальными деталями дизайна – так называемых вайрфреймов. Вайр Флоу помогает продумать логику и структуру интерфейса приложения или сервиса, определить основные элементы и функции на каждом экране.

Шаг 5. Получите обратную связь, улучшите и завершите User Flow

Проверьте эффективность и удобство вашего потока с помощью тестирования с реальными пользователями или экспертами. Вы можете использовать разные методы тестирования, такие как юзабилити-тестирование, A/B-тестирование или когнитивное моделирование. На основе полученной обратной связи можно изменить схему и повторять процесс до тех пор, пока у юзеров не возникнет вопросов и затруднений при применении схемы.

User Flow и смежные понятия: что есть что

В интернете встречаются несколько понятий с похожими ключевыми словами user, customer и map. Они могут запутать, потому что относятся к одной сфере разработки программных продуктов. Давайте разберемся, чем они отличаются.

User Story Map – это визуализация пути, который проходит пользователь с продуктом, от начала до конца. Она включает все задачи, которые он обычно выполняет в рамках этого пути. User Story Map отличается от User Flow тем, что User Flow фокусируется на конкретном сценарии использования продукта и показывает последовательность действий пользователя для достижения определенной цели. User Story Map же дает более общее представление о том, как пользователь взаимодействует с продуктом в разных контекстах и для разных целей. User Flow может быть частью User Story Map, но не наоборот.User Journey Map – это представление опыта пользователя при взаимодействии с продуктом. Оно помогает понять, что думает и чувствует человек на разных этапах пути, какие задачи он решает и с какими проблемами сталкивается. Ключевое отличие между User Flow и User Journey Map заключается в том, что второй инструмент охватывает более широкий контекст и учитывает психологические, эмоциональные и внешние факторы, которые могут влиять на поведение и мотивацию пользователя. User Flow может быть частью User Journey Map, но не наоборот.

Customer Journey Map (CJM) – это визуализация пути клиента, покупателя, начиная с момента поиска товара или услуги и заканчивая покупкой. Это инструмент, который помогает определить потребности, проблемы и взаимодействие клиентов с брендом. CJM отличается от User Flow тем, что фокусируется именно на клиентах, подсказывая, что нужно изменить, чтобы увеличить продажи.

Программы для создания User Flow

Программ и сервисов, в которых можно составить диаграммы для сценариев, очень много. Фактически сделать это можно в любом графическом редакторе. Например, для этого часто используют Figma. Для нее вы можете найти несколько плагинов, которые помогают строить схемы быстрее.

Вот еще несколько приложений для создания Юзер Флоу.

Miro – здесь вы можете воспользоваться специальным шаблоном User Flow, найдя его в библиотеке шаблонов. Miro создан специально для майнд-мэппинга, поэтому работать в нем удобно и приятно.

Flowmapp – это онлайн-инструмент для создания диаграмм потока и визуальных карт сайтов. Он платный, но имеет бесплатный план с ограниченными функциями.

Overflow – это сервис для создания ярких, игровых и интерактивных User Flow, которые можно легко интегрировать с другими дизайн-инструментами, такими как Sketch или Figma.

Lucidchart – сервис для создания различных диаграмм и схем, включая Юзер Флоу. Он платный, но имеет бесплатную пробную версию. Он обладает широким набором функций для настройки внешнего вида и функциональности диаграмм, а также поддерживает совместную работу над проектом.

Это лишь некоторые из множества сервисов для составления User Flow. Вы можете выбрать тот, который больше подходит вам по цене, функционалу и удобству использования.

Советы по созданию хорошего User Flow

1. Используйте описательное название. Всегда давайте своему User Flow понятное и прямолинейное название, которое описывает, о чем он. Это поможет вам и вашей команде легко идентифицировать и отслеживать разные сценарии.
2. Следуйте однонаправленным потокам. Не путайте своих пользователей, заставляя их двигаться в разных направлениях или по кругу. Стремитесь к тому, чтобы ваш User Flow был линейным и последовательным, без лишних ветвлений или обратных связей.
3. Определите одну цель на поток. Не пытайтесь вложить слишком много функций или задач в один User Flow. Сосредоточьтесь на конкретной цели, которую пользователь хочет достичь, и постройте свой поток вокруг нее. Если приложение многофункциональное, то визуально четко разделите потоки на схеме.
4. Напишите легенду. Легенда – это пояснение, что значат разные формы, линии и иконки на диаграмме. Она помогает сделать Юзер Флоу понятным, читаемым, избежать путаницы или недопонимания.
5. Уделите особое внимание точкам входа. Прежде чем начать рисовать свой User Flow, решите, откуда пользователь начнет свой путь. Точка входа может быть разной в зависимости от типа продукта или функции. Например, точка входа для приложения для заказа еды может быть как экраном поиска, так и каталогом ресторанов. От этого зависят все дальнейшие шаги.
6. Используйте четкие метки. Каждый шаг в вашем User Flow должен иметь четкое обозначение, которое описывает, что происходит на этом шаге. Используйте простой и ясный язык, избегайте двусмысленности или технического жаргона, понятного команде, но непонятного заказчику.
7. Используйте цвета разумно. Цвета могут быть полезным инструментом для выделения разных аспектов вашего User Flow, таких как типы действий, состояния или роли пользователей. Однако не переусердствуйте с цветами, чтобы не создавать визуальный беспорядок.

1. Задайте четкие точки выхода. Ваш User Flow должен иметь однозначный финал, который показывает, что пользователь достиг своей цели и получил положительный результат. Это может быть подтверждение, сообщение об успехе или приглашение к следующему действию, которое имеет уже другую цель.
2. Согласуйте свой User Flow с бизнес-целями и требованиями. Убедитесь, что ваш User Flow не только удовлетворяет потребности пользователей, но и соответствует стратегии и ценностям вашего продукта или компании. Не забывайте о ключевых показателях эффективности (KPI) и метриках, которые помогут вам измерить эффективность User Flow.

профессия UX/UI-дизайнер с нуля до про

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