Пользовательские потоки: что это такое и почему они важны в дизайне UX1 min read

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

Этот путь называется пользовательский поток.

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

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

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

Попробуйте спроектировать потоки пользователей с помощью ИИ

Опишите пользовательский поток, который вы хотите спроектировать, а затем позвольте Anima превратить его в UX, экраны и код.

Что такое пользовательский поток?

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

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

Пользовательский поток может представлять собой:

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

Цель проста: прояснить путь пользователя, прежде чем детально проектировать интерфейс.

Пример базовой структуры пользовательского потока

Поток пользователя и поток пользовательского интерфейса

Условия пользовательский поток и поток пользовательского интерфейса тесно связаны.

Пользовательский поток фокусируется на пути пользователя к цели. Он отвечает на такие вопросы, как:

• С чего начинается пользователь?
• Какое действие они пытаются выполнить?
• Какие решения они принимают на этом пути?
• Что произойдет, если они добьются успеха, потерпят неудачу или выберут другой путь?

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

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

На практике команды UX часто используют оба вместе. Пользовательский поток определяет путь. Поток пользовательского интерфейса конкретизирует этот путь внутри продукта UI.

Как читать пользовательский поток

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

Большинство диаграмм пользовательских потоков используют простой визуальный язык:

• Круг или овал: Начальная или конечная точка
• Прямоугольник: Экран, страница или действие
• Алмаз: Точка принятия решения, например да/нет, успех/неудача или выбор пути.
• Стрелка: Направление движения между ступенями

Объяснение компонентов пользовательского потока

Например, простой процесс регистрации пользователя может выглядеть так:

1. Пользователь попадает на главную страницу
2. Пользователь нажимает «Начать бесплатно»
3. Пользователь вводит адрес электронной почты и пароль
4. Система проверяет, действителен ли адрес электронной почты
5. Пользователь подтверждает аккаунт
6. Пользователь достигает экрана адаптации
7. Пользователь завершает настройку
8. Пользователь попадает в панель управления

Такой пример пользовательского потока помогает команде понять опыт перед проектированием каждого экрана.

Примеры пользовательского потока

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

Процесс регистрации пользователя

Последовательность действий при регистрации показывает, как новый посетитель становится зарегистрированным пользователем.

1. Посетите целевую страницу
2. Нажмите кнопку регистрации с призывом к действию.
3. Выберите способ регистрации
4. Введите данные учетной записи
5. Подтвердите адрес электронной почты
6. Полная адаптация
7. Доступ к панели управления продуктом

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

Порядок действий при оформлении заказа

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

1. Посмотреть продукт или страницу с ценами
2. Добавить товар или выбрать план
3. Просмотр информации о корзине или плане
4. Введите информацию о платеже
5. Подтвердить покупку
6. Перейти на страницу успеха или квитанцию

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

Порядок действий при сбросе логина и пароля

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

1. Открыть страницу входа
2. Введите учетные данные
3. Система проверяет ввод
4. Пользователь успешно входит в систему или видит ошибку
5. При необходимости пользователь запускает сброс пароля.
6. Пользователь подтверждает адрес электронной почты
7. Пользователь устанавливает новый пароль
8. Пользователь возвращается к продукту

Пример пользовательского потока для процесса входа в систему (поток задач)

Процесс адаптации пользователей

Онбординговый пользовательский поток показывает, как новые пользователи достигают своего первого успешного продукта.

1. Создать учетную запись
2. Ответить на вопросы по настройке
3. Выберите шаблон или отправную точку
4. Выполните первое действие
5. Посмотреть состояние успеха
6. Продолжить изучение продукта

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

Когда создавать пользовательский поток

Создавайте потоки пользователей на ранних этапах процесса проектирования, в идеале после первоначального исследования пользователей и до создания высококачественного проекта UI.

На этом этапе пользовательский поток поможет вам:

• Решите, какие экраны должны существовать
• Удалите ненужные шаги
• Определите запутанные моменты принятия решений
• Сформируйте команду вокруг структуры продукта
• План прототипы быстрее
• Не проектируйте полированные экраны для сломанного пути.

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

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

Роль пользовательских потоков в дизайне UX

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

Потоки пользователей помогают командам UX делать три важные вещи.

1. Создайте более интуитивно понятный интерфейс

Четкий пользовательский интерфейс упрощает понимание конечного интерфейса.

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

Если поток сбивает с толку, интерфейс, вероятно, тоже будет сбивать с толку.

2. Оцените существующий интерфейс

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

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

3. Донесите свою стратегию до членов команды и заинтересованных сторон.

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

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

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

Путь пользователя и поток пользователя

Пути пользователей и потоки пользователей часто путают, но это не одно и то же.

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

А пользовательский поток фокусируется на пути, который пользователь проходит внутри продукта для достижения конкретной цели.

Ключевые различия

Оба полезны. Путешествие помогает вам понять контекст пользователя. Поток помогает вам спроектировать реальный путь через интерфейс.

Как создать пользовательский поток

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

1. Определите цель пользователя

Начните с действия, которое хочет выполнить пользователь.

• Создать учетную запись
• Купить продукт
• Забронировать демо
• Опубликовать веб-сайт
• Пригласить товарища по команде
• Экспорт дизайна в код

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

2. Выберите точку входа

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

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

3. Наметьте счастливый путь

Счастливый путь — это самый простой успешный путь от начала до конца.

1. Пользователь открывает страницу с ценами
2. Пользователь выбирает план
3. Пользователь создает учетную запись
4. Пользователь вводит данные платежа
5. Пользователь подтверждает покупку
6. Пользователь попадает на страницу успеха

Это дает вам базовый опыт.

4. Добавьте решения и крайние случаи

Реальные пользователи не всегда идут по идеальному пути. Добавьте точки принятия решений, такие как:

• Есть ли у пользователя уже учетная запись?
• Форма действительна?
• Платеж прошел успешно?
• Пользователь выбрал ежемесячное или ежегодное выставление счетов?
• Есть ли у пользователя разрешение продолжить?
• Что произойдет, если пользователь отменит подписку?

Именно эти ветки превращают простой путь в настоящий пользовательский поток дизайна UX.

5. Упростите процесс

После того, как поток составлен, обратите внимание на трения.

• Можем ли мы удалить шаг?
• Можем ли мы объединить экраны?
• Не слишком ли рано мы запрашиваем информацию?
• Очевидно ли следующее действие?
• Есть ли тупик?
• Ясны ли состояния ошибок?
• Всегда ли пользователь знает, что произошло?

Лучшие пользовательские потоки кажутся очевидными, поскольку сложность уже решена за кулисами.

Коротко о потоках пользователей

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

Сильный поток пользователей:

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

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

Часто задаваемые вопросы: потоки пользователей

Что такое потоки пользователей?

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

Что такое пользовательский поток в дизайне UX?

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

В чем разница между пользовательским потоком и пользовательским путешествием?

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

Что такое поток пользовательского интерфейса?

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

Когда следует создавать пользовательский поток?

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

Каковы примеры пользовательских потоков?

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

Почему важны пользовательские потоки?

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

Как организовать поток пользователей?

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

Попробуйте Anima Playground для пользовательских потоков и дизайна UX.

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

Начните проектировать с Anima Playground.