User Flow: как работает магия бесшовного взаимодействия?

Всем привет!
Когда-нибудь задумывались, как ваши любимые приложения и сайты словно «чувствуют» вас? Каждое действие плавно перетекает в следующее. Это не случайность — это дизайн. А именно — дизайн пользовательского флоу.

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

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

«Вы должны понимать, как продукт действительно работает, какая у клиента ментальная модель, и затем разрабатывать дизайн, который действительно помогает клиентам понять это». — Дэвид Мышевски, вице-президент по продукту в Wealthfront, в подкасте «От запуска iPhone до 20-кратного роста в Wealthfront» на The Product Podcast.
User Flow (Путь пользователя или Пользовательский флоу) — это как дорожная карта, показывающая, как пользователь перемещается по вашему цифровому продукту от начала до конца.

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

Вот как это работает: когда кто-то взаимодействует с вашим продуктом, он начинает с определённой точки — домашней страницы, лендинга или конкретной ссылки, по которой кликнул. Оттуда пользователь проходит через серию шагов, каждый из которых приближает его к цели. Эти шаги могут включать заполнение форм, нажатие кнопок или чтение контента.

Пользовательский флоу — это визуальное представление всех этих шагов, выстроенное в чёткую и логичную последовательность.

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

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

Например, вы можете начать с прямоугольника с надписью «Главная страница», который соединён стрелкой с другим прямоугольником с надписью «Страница продукта». Оттуда другая стрелка может вести к «Странице оформления заказа», и, наконец, к «Странице подтверждения». Эти связи позволяют увидеть весь путь, который пользователь может пройти, начиная с момента, когда он попадает на ваш сайт или в приложение, и до достижения своей цели.

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

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

1.User Story: Определите цель пользователя
Начните с определения основной цели, которую ваш пользователь хочет достичь. Хочет ли он совершить покупку? Подписаться на рассылку? Найти определённую информацию? Понимание этой цели направит каждый следующий шаг в процессе. Цель пользователя — это конечная точка вашего пользовательского флоу, поэтому важно чётко её определить.

Распространённый формат пользовательской истории выглядит так:
"Как [пользователь], я хочу [фичу], чтобы [выгода]."

Например, пользовательская история для фичи моментального бронирования на Airbnb может быть такой:

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

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

2.Task Flow: Определите ключевые действия
Task Flow разбивает цель пользователя на серию действий или задач, которые необходимо выполнить для достижения цели. Это более детализированный пошаговый процесс. Примером таких шагов могут быть: посещение домашней страницы, переход на страницу продукта, добавление товара в корзину и оформление покупки. Рассматривайте эти шаги как контрольные точки на пути к цели. Каждый шаг должен приближать пользователя к её достижению.

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

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

3.Wireflow: Соедините Task Flow с интерфейсом
Wireflow сочетает Task Flow с вайрфреймами (простыми, низкодетализированными эскизами интерфейса). Он визуально представляет, как каждая задача в Task Flow соответствует различным экранам или компонентам интерфейса. Wireflow помогает дизайнерам понять связь между задачами и макетом интерфейса.

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

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

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

Добавление альтернативных путей помогает:

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

6.Тестирование и улучшение UX Flow
После того как ваш пользовательский флоу будет создан, пора его протестировать. Пройдите его сами или с небольшой группой и обратите внимание на любые моменты, которые кажутся запутанными или сложными. Слишком много шагов? Важная информация слишком трудно находима? Используйте эту обратную связь для улучшения Flow, делая его более простым и удобным.

Вот несколько методов анализа продукта:

• Проведение пользовательских исследований;
• Использование тепловых карт и отслеживания кликов;
• A/B тестирование;
• Анализ точек отсева пользователей;
• Сбор обратной связи от пользователей;

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

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

Шаблоны и специальные инструменты значительно упрощают создание диаграмм пути пользавателя. Они позволяют быстро структурировать идеи и легко делиться ими с командой.
Инструменты для создания пользовательских флоу:

• Overflow
• Mockflow
• Timblee
• Whimsical
• FlowMapp

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

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

Инструменты для создания User Flow:

• Overflow: Специализированный инструмент для создания диаграмм пользовательского флоу прямо на основе ваших дизайнов. Overflow обеспечивает плавную визуализацию флоу с акцентом на интеграцию с популярными инструментами дизайна, такими как Figma, Sketch и Adobe XD.
• Mockflow: Многофункциональная платформа для создания вайрфреймов, пользовательских флоу и прототипов. Mockflow позволяет легко создавать диаграммы пользовательского флоу с помощью интуитивно понятного интерфейса и набора предустановленных компонентов.
• Timblee: Простой, но эффективный инструмент для создания пользовательских флоу и карт сайтов. Timblee разработан для того, чтобы помочь вам спланировать и визуализировать пользовательский опыт, что упрощает коммуникацию о структуре сайта или приложения с командой.
• Whimsical: Whimsical предлагает чистый и простой интерфейс для создания блок-схем, вайрфреймов и mind map'ов. Его инструмент для создания блок-схем идеально подходит для быстрой разработки пользовательских флоу, с библиотекой иконок и фигур, которые делают процесс лёгким и визуально понятным.
• FlowMapp: FlowMapp специально разработан для создания пользовательских флоу и карт сайтов. Он предлагает инструменты, адаптированные для проектирования пользовательского опыта, что позволяет создавать чёткие и структурированные карты пользовательских флоу. Этот инструмент особенно полезен для команд, занимающихся разработкой веб-сайтов и приложений.

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

Первый пример демонстрирует User Flow процесса регистрации в приложении. Он начинается с того, что пользователь решает, хочет ли он зарегистрироваться или войти в систему. Далее флоу разветвляется в зависимости от выбора, направляя пользователя через такие шаги, как заполнение формы регистрации, вход через Google или Facebook, или восстановление забытого пароля.Этот флоу разработан для охвата нескольких сценариев. Он гарантирует, что пользователи могут легко зарегистрироваться или войти в систему, вне зависимости от их предпочтений по методу авторизации. Это типичный путь пользователя для процесса регистрации, который критически важен для того, чтобы плавно ввести новых пользователей в приложение.

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

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

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

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

User Journey (Пользовательское путешествие), также известное как путь клиента (Customer Journey), представляет собой более широкую концепцию, которая охватывает весь опыт пользователя с продуктом, сервисом или брендом, часто через множество каналов и точек взаимодействия. Оно начинается с момента, когда пользователь узнаёт о продукте, проходит через этапы осмысления и принятия решения, взаимодействия с продуктом, а также включает опыт после покупки.

Продуманный User Flow важен
«Будучи компанией на более ранней стадии развития, вы можете быть более креативными и гибкими в том, как структурируете организацию. Это также даёт вам возможность по-другому подходить к продукту и его взаимодействию с другими фичами. Этот подход важен для создания той степени ориентированности на клиента или пользователя, которая будет критичной для вашего успеха».

— Берит Хоффманн, CPO компании Sisu Data, в подкасте «Нестандартные пути к продукту» на The Product Podcast.
Отличная практика разработки User Flow не просто направляет пользователей, но и помогает превратить ваш продукт в нечто, что люди любят и с радостью используют снова и снова.

Фокусировка на User Flow меняет подход к управлению продуктом. Это означает, что главным принципом становится: мы создаём для пользователей.

Хотя эта цель может показаться рациональной, простой и очевидной, многие команды упускают её, превращая в задачу второстепенной важности. Признаками этого могут быть избыток функций, игнорирование обратной связи пользователей, проектирование для заинтересованных сторон, а не для пользователей, или приоритет эстетики над проверенными UX-практиками.

Так что углубляйтесь в разработку User Journey и не стесняйтесь продвигать их как приоритет в своей команде. Простая практика может вызвать положительные изменения и способствовать формированию здоровой, устойчивой и долгосрочной культуры.

Тогда воспользуйтесь нашей услугой по проведению UX-исследований под ключ!

С нами вы:

• Узнаете реальные потребности и мотивации ваших клиентов
• Выявите барьеры и улучшите пользовательский опыт
• Получите практические рекомендации по развитию продукта
• Используете методы CustDev, JTBD, UX-анализ, CJM и другие
• Получите доступ к разнообразным целевым аудиториям и экспертам отрасли

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

Рассказываем на нашем курсе «Полное погружение в продакт-менеджмент» 

На курсе вы:

• Освоите методы тестирования гипотез и их валидации
• Научитесь создавать и прототипировать продукты с нуля
• Изучите 50+ инструментов и фреймворков из мира продакт-менеджмента
• Научитесь использовать искусственный интеллект в продакт-менеджменте
• Поработаете с Яндекс.Метрикой, Miro, Figma, OpenAI, Amplitude

Присоединяйтесь, чтобы вывести свои навыки на новый уровень и создавать продукты, которые действительно нужны рынку!