Диаграмма UserFlow

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

Компоненты диаграммы UserFlow

Обычно диаграмма UserFlow состоит из нескольких ключевых элементов:

1. Начальная точка: Точка входа пользователя в приложение или сайт.
2. Действия пользователя: Последовательность действий, которые пользователь выполняет для достижения своей цели.
3. Условные переходы: Ветвления, которые зависят от действий или выбора пользователя.
4. Конечная точка: Точка, где пользователь достигает своей цели или выходит из приложения/сайта.

Пример применения UserFlow

Пример UserFlow для десктоп клиента приложения по управлнию проектами (Kanban) (3 курс):

Шаблон FigJam, который использовался при создании диаграммы: https://www.figma.com/community/file/970968239557865113

Пример UserFlow для детализации процесса авторизации в VPN-клиенте (рабочий проект):

Использование диаграммы UserFlow

Диаграмма UserFlow служит для:

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

Пример UserFlow с PlantUML

PlantUML позволяет создавать диаграммы UserFlow с помощью простого текстового описания. Вот пример UserFlow для онлайн-магазина:

@startuml UserFlow_OnlineStore

skinparam backgroundColor transparent

(*) --> "Заходит на главную страницу"
"Заходит на главную страницу" --> "Ищет товар в поисковой строке"
"Ищет товар в поисковой строке" --> "Товар найден"
"Ищет товар в поисковой строке" --> "Товар не найден"
"Товар не найден" --> "Заходит на главную страницу"
"Товар найден" --> "Просматривает страницу товара"
"Просматривает страницу товара" --> "Добавляет товар в корзину"
"Просматривает страницу товара" --> "Заходит на главную страницу"
"Добавляет товар в корзину" --> "Переходит в корзину"
"Переходит в корзину" --> "Оформляет заказ"
"Переходит в корзину" --> "Заходит на главную страницу"
"Оформляет заказ" --> "Заказ успешно оформлен"
"Оформляет заказ" --> "Переходит в корзину"
"Заказ успешно оформлен" --> (*)

@enduml

Задания для тренировки

Задание 1: Мобильное приложения для фитнес-трекера

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

Задание 2: Выставка современного искусства

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

Задание 3: Интернет-кафе

Описание: Разработайте UserFlow для сайта интернет-кафе. Сайт должен позволять пользователям забронировать место, узнать о доступном оборудовании, ознакомиться с меню и контактной информацией.