User-flow
Что это?
User-flow (UF) — это артефакт, призванный объединить знания о работе продукта в одной схеме. Выглядит как большая блок-схема сценариев пользователя. Можно провести параллель с чертежом.
Создается на этапе UX проектирования после составления списка основных функций приложения и после того как мы уже продали функционал клиенту и приступили непосредственно к работе. В ходе работы над проектом UF может терпеть изменения, так как будут меняться условия, требования, приходить новые идеи и решения. Поэтому UF должен поддерживаться в актуальном состоянии, особенно при передачи проекта на другой этап (например, из дизайна в разработку).
Другими словами: пришел новый запрос? сначала меняем на схеме!
Зачем это нужно?
- Так или иначе при проектировании необходимы инструменты, объясняющие логику взаимодействия: mindmapes (с помощью которых создается информационная архитектура), wireframes (связанные прототипы)и проч. Задачи многих инструментов решает один артефакт;
- Любой участник проекта (РП, аналитик, дизайнер, разработчик, тестировщик) может понять о чем продукт, как он работает и извлечь необходимые ему знания в краткие сроки и не дергая других коллег;
- На схеме удобно вести обсуждения отдельных фич и сценариев (комментарии в программе Miro), синхронизироваться внутри команды. А т. к. это общий артефакт с клиентом, то и наглядная навигация становится гораздо прозрачнее и обсуждение может происходить прямо в UF;
- Помогает структурировать всю имеющуюся информацию в универсальном виде и подсветить недостающую. В т. ч. на ранних стадиях показывает все экраны состояния и позволяет остальным участникам команды построить приоритеты в соей работе правильно;
- Если проект большой - то UF является единой доской где отображается весь функционал в минимальном виде для осознания логики продукта.
Как читать UF?
1. Стрелка
Стрелка = действие , которое совершает пользователь система/алгоритм/еще что-то. Бывают 5-ти видов:
Действие пользователя — черные стрелки с непрерывной линией (в основном движение вперед);
Действие "назад" — желтые стрелки с непрерывной линией, показывающие как работает навигация (движение назад);
Синие показывают развитие событий в случае правильной работы (в зависимости от Условия);
Красные в случае ошибки
Черные без надписей — когда возникают события независимо от действий пользователя в данный момент, возможно прерывающие сценарий (например напоминание, пуши, сообщение).
2. Карточка
Карточка в Miro создается через инструмент Card / D (левая вертикальная панель, спрятано в трех точках). В нашей схеме бывает двух типов:
2.1. Стандартная карточка
Чтобы просмотреть состав компонента, наводим мышку на правый верхний угол. Должна появиться иконка расширения (две стрелки направленные друг от друга). Другой способ при клике дождаться появления горизонтальной панели управления — первая иконка будет той же самой.
Чтобы просмотреть состав компонента, наводим мышку на правый верхний угол. Должна появиться иконка расширения (две стрелки направленные друг от друга). Другой способ при клике дождаться появления горизонтальной панели управления — первая иконка будет той же самой.
Кликая по ней, открываем внутреннюю информацию и собственно сами настройки карточки
2.2. Функциональная карточка
Чтобы отделить их от обычных объектов, используются цветные бирки, например красная бирка "modal" для модальных окон.
Добавить бирку можно с помощью инструмента Tags внутри карточки.
3. Условие
При совершении какого-то действия над компонентом, проверяем это действие на условие (if / else). Нужно, чтобы мы могли проверить зависимости компонента от внешних факторов.
Представлено в виде синего ромба. В Miro создается через фигуры.
Как строить UF?
В создании артефакта участвуют UX-дизайнер и аналитик: дизайнер непосредственно строит схему, аналитик при необходимости отвечает на вопросы.
UF может создаваться несколькими дизайнерами (для ускорения процесса), но необходим ответственный за порядок и согласованность в схеме, например ведущий проект со своей стороны UX-дизайнер.
Правила
Для создания карты нужен функциональный лист (фич-лист), описывающий основные разделы и функции приложения
- UF строится в Miro. Подсказки по работе в программе есть в "Как читать UF";
- Необходимо придерживаться принятых обозначений и приемов;
- Основное направление схемы слева направо, сверху вниз. Действия пользователя направления вправо (и объекты-результаты действий), друг под другом располагаются разные варианты действий, исходящих из одного компонента. Отдельные фичи располагаются друг под другом;
- Старайся чтобы линии как можно меньше пересекались. Для этого прокладывай стрелки по одним и тем же маршрутам (как провода). Так легче читать карту;
- Главное не мыслить экранами. Суть схемы логически связать функции (фичи) приложения, учитывая все возможные варианты развития событий, ограничения технологий, бизнеса и конечно UX. Разработать план.
Некоторые нюансы по работе в Miro
Якори
Когда нужно соединить далеко стоящие друг от друга действия и объекты-результаты действий (например переход из одного раздела приложения в другой), можно воспользоваться ссылками (работают как якори).
Чтобы создать якорь:
- Скопировать ссылку на объект — Copy link (можно правой кнопкой мыши, можно внутри карточки;
- Создать любой объект, например квадрат без заливки и контура и применить к нему действие Link to (правая кнопка мыши);
Комментарии
Чтобы оставить комментарий выбирай Comment в левой боковой панели (или клавишу C).
Кликай по тому объекту или месту, где хочешь оставить комментарий.