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

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

Менеджеры по продуктам, UX-дизайнеры и другие члены продуктовой команды используют «пользовательские потоки» по нескольким существенным причинам:

1. User Flow создает визуальную иллюстрацию шагов, которые пользователь предпримет для выполнения задач в приложении.

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

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

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

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

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

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

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

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

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

Линии со стрелками — самая важная часть «пользовательского потока», поскольку линии со стрелками связывают все воедино и определяют поток по диаграмме. Линии со стрелками ведут читателя по диаграмме от формы к форме, сверху вниз или слева направо.

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

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

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

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

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

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

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

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