Інтерфейс без помилок: що таке 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

Є багато видів 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 не можна передбачити всі можливі варіанти поведінки користувача у програмі. Деякі користувачі можуть вибрати несподіваний шлях взаємодії.

Тому робочий варіант діаграми постійно зазнає редагування — вносяться зміни, щось домальовується та узгоджується. У той самий час використання цього інструменту дозволяє швидше знаходити сценарії, які зникають, та дірки в логіці.