User Flow. Твой лучший помощник

Получаешь задачу и сразу идешь рисовать макеты? Забываешь про corner-кейсы и сталкиваешься с ними уже на этапе реализации? Вся работа проделана впустую, так как изначально задача была понята неверно? Тогда настал момент внедрить User Flow.

Меня зовут Вика, я старший проектировщик интерфейсов в Nedra, и сегодня хочу показать вам, как User Flow упрощает мне жизнь.

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

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

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

Рисовать UF можно где угодно. Но для удобства лучше использовать платформы с готовым набором элементов (FigJam, Miro, Draw.io и тд).

В UF используются стандартные элементы блок-схем. Я немного изменила их под себя:

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

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

3. Линия — направление движения пользователя, можно подписать конкретные действия пользователя. Пример связей:

4. Ромб — проверка условия, с его помощью рассматриваем альтернативные сценарии. Пример условий:

5. Точка выхода — завершение сценария, фиксируем достигнутый результат (цель, которую достиг пользователь выполнив сценарий). Пример завершения сценария:

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

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

3. Фиксируем основной путь пользователя, отображая точку А, ключевые действия и завершая точкой Б.

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

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

6. Созваниваемся с командой/заказчиком и показываем UF. Задаем возникшие вопросы, фиксируем выявленные ограничения, вносим изменения (если есть), утверждаем созданную логику.

7. Все всё поняли, согласовали, утвердили — мы счастливы. Теперь можно уверенно садиться за макеты.

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

Поделитесь пожалуйста своим опытом работы с User Flow, будет интересно почитать)