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

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

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

Содержание

1. Что такое User Flow в UX?
2. Что такое диаграмма User Flow?
3. Как создать User Flow?
4. Инструменты для создания User Flow
5. Пример 1: пользовательский флоу регистрации в приложении
6. Пример 2: User Flow восстановления и верификации пароля
7. User Flow vs User Journey
8. Курсы на нашем сайте

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

После внедрения 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 процесса регистрации в приложении. Он начинается с того, что посетитель решает, хочет ли он зарегистрироваться или войти в систему. Далее флоу разветвляется в зависимости от выбора, направляя его через такие шаги, как заполнение формы регистрации, вход через 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

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