Интерфейс без ошибок: что такое User Flow и почему он важен для разработки

Что такое User Flow, зачем он нужен, как используется и какие проблемы он может решить? Об одном из самых важных инструментов для разработки IT-продуктов читайте в нашем материале сегодня.

Что такое User Flow

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

Но на практике часто случается, что разработчики, дизайнеры и другие сотрудники не спешат изучать документацию, написанную UX-аналитиком:

• с одной стороны, это отнимает слишком много времени;
• с другой — не факт, что ответ на вопрос вообще будет найден в этом массиве информации.

Для решения этой проблемы был придуман такой инструмент как User Flow.

Что же это такое?

Буквально термин User Flow переводится с английского как «поток пользователя». То есть это цепочка действий, которые выполняет пользователь, реализовывая некоторую задачу.

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

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

Как работает User Flow

Объясним «на пальцах», как User Flow может помочь при разработке, например, онлайн-магазина. 

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

• дизайнер создает отдельные экраны для каталога товаров, рисует какие-то корзины, страницы оформления заказа и т.д;
• разработчики создают каждый экран в отдельности, руководствуясь ТЗ и здравым смыслом.

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

А вот как будет происходить разработка, если мы решим создать User Flow для приложения:

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

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

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

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

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

Возможные проблемы с диаграммой User Flow

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

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

Также вы можете столкнуться с проблемами, которые касаются внесения изменений. Если вдруг выяснится, что вы что-то упустили (что бывает довольно часто), придется перерисовывать огромное количество экранов. Чтобы этого избежать, диаграмму разбивают на группу маленьких сценариев.

С User Flow сложно вести контроль версий. Поэтому их часто ведут в двух вариантах:

• черновики, прошедшие сверку с заказчиком;
• «чистовые» версии, которые показывают конечный вариант.

Чтобы User Flow лучше читались, используют максимум картинок и минимум текста.

Текст — это сухой и самый малоэффективный способ передачи информации, если его и читают, то, обычно, «по диагонали».

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

Разновидности User Flow

Есть много видов User Flow, которые могут использоваться в UX-разработке. Вот некоторые из наиболее распространенных:

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

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

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

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

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

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

Выбор конкретного типа User Flow зависит от особенностей разрабатываемого продукта и потребностей пользователей. 

Как создается User Flow

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

• Обозначьте свою целевую аудиторию. Ее понимание поможет определить, какие шаги пользователи могут сделать в вашем продукте, какие функции для них наиболее важны и как они будут взаимодействовать с вашим продуктом.
• Определите ключевые задачи пользователей. Вы должны понимать, какие задачи пользователи выполняют в вашем продукте и как эти задачи связаны между собой.
• Составьте последовательность действий. После определения задач пользователей вы можете начать создавать последовательность шагов, которые нужно сделать, чтобы выполнить эти задачи. Это поможет вам лучше понять процесс взаимодействия пользователя с продуктом.
• Создайте прототипы и тестируйте. Создание прототипов позволит вам увидеть, как пользователи будут взаимодействовать с вашим продуктом в реальном времени, а также выявить проблемы в User Flow. Проведите тестирование с реальными (это важно) пользователями и убедитесь, что диаграмма простая и понятная.
• Оптимизируйте процесс. По мере того, как вы проводите тестирование, вы можете упрощать User Flow, чтобы убрать препятствия и сделать процесс взаимодействия пользователя с продуктом более плавным и эффективным.
• Используйте стандарты и проверенные временем практики. Не тратьте время и не изобретайте велосипед. Только стандартные элементы интерфейса, только лучшие практики проектирования, чтобы пользователи быстро могли понять, как взаимодействовать с вашим продуктом.
• Будьте готовы к изменениям. User Flow может меняться в зависимости от потребностей пользователей и изменений в продукте, поэтому важно оставаться готовым к изменениям и обновлять диаграмму при необходимости.

Пример построения User Flow

Предположим, мы создаем приложение для заказа еды. Рассмотрим пример построения User Flow для заказа пиццы.

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

1. Пользователь запускает приложение.
2. Пользователь видит экран с предложением войти или зарегистрироваться.
3. Если пользователь не зарегистрирован, он переходит на экран регистрации и вводит свои данные для регистрации. Если пользователь зарегистрирован, он переходит на экран входа и вводит свои данные для входа.
4. После регистрации или входа пользователь видит главный экран с меню и списком доступных ресторанов.
5. Пользователь выбирает ресторан, который ему нравится.
6. Пользователь просматривает меню ресторана и выбирает пиццу, которую он хочет заказать.
7. Пользователь добавляет пиццу в корзину и просматривает ее содержимое.
8. Пользователь нажимает на кнопку оформления заказа.
9. Пользователь вводит адрес доставки и выбирает способ оплаты.
10. Пользователь подтверждает заказ и получает подтверждение о том, что заказ принят в обработку.
11. Пользователь может отслеживать свой заказ, пока он готовится и доставляется.
12. Пользователь подтверждает заказ и получает подтверждение о том, что заказ принят в обработку.
13. Пользователь может отслеживать свой заказ, пока он готовится и доставляется.

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

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

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

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

Вот список самых популярных инструментов для прототипирования интерфейсов и разработки пользовательских сценариев:

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

   Пример User Flow, сделанный в Figma

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

4. Whimsical — онлайн-инструмент для создания визуальных представлений, карт и других графических изображений. Он позволяет пользователям создавать профессионально выглядящие диаграммы, блок-схемы, майндмэпы, карты сайта, дизайн интерфейсов и другие типы визуализаций. Есть возможность экспорта графических изображений в том числе в форматах PNG, SVG и PDF.

   Пример User Flow, сделанный в Whimsical

5. Lucidchart — простой и удобный сервис для создания диаграмм. Среди его возможностей — создание User Flow, блок-схем, всевозможных диаграмм и графиков. Сервис предлагает широкий выбор шаблонов и символов, что делает его легким в использовании. Поддерживается совместная работа и интеграция с  Google Drive, Microsoft Office и Salesforce.

   Пример User Flow, сделанный в Lucidchart

Заключение

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

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

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

Напоследок, предлагаем вам посмотреть мастер-класс по разработке User Flow в Fig Jam, онлайн-инструменте от компании Figma, предназначенный для совместной работы при создании диаграмм, внесении визуальных заметок и идей по проекту: