Спокуса будь-якого дизайнера — одразу відкрити Figma. Але до того, як на екрані з'явиться перший прямокутник, треба відповісти на одне питання: як саме людина дійде звідси до мети. Скільки кроків? Які сторінки відкриє? Що побачить, якщо щось піде не так? User flow — це інструмент, який це питання розкладає на послідовність дій. До макетів, до візуалу — на рівні чистої логіки.

Як працює user flow

User flow — це послідовність дій, яку користувач виконує, щоб досягти своєї мети у продукті.

Уявіть просту ситуацію з фізичного світу: ви на кухні, хочете випити соку. Дії, які для цього потрібні: відкрити холодильник, дістати сік, поставити на стіл, закрити холодильник, відкрити шухляду, дістати склянку, закрити шухляду, налити, випити. Ось ці кроки і є user flow — тільки у фізичному світі.

У цифровому продукті дії інші. Людина відкриває сторінки, натискає елементи, вводить дані. Уявіть, що ви плануєте, де зустрітися з друзями в середу ввечері — спершу треба перевірити, чи буде дощ. Ви відкриваєте застосунок погоди — головна сторінка. Скролите до середи. Відкриваєте детальну сторінку, дивитеся на графік температури після 18:00. Потреба закрита. Ось ваш user flow у застосунку погоди.

User flow показує, з якими сторінками й елементами взаємодіє людина — не як вони виглядають, а в якому порядку працюють.

Як відрізнити user flow від Customer Journey Map

User flow ви будуєте, коли проєктуєте рішення; Customer Journey Map — коли узагальнюєте те, що вже знаєте про користувача з досліджень.

CJM — окрема велика тема, але різниця проста. User flow — про продукт. Як людина пересувається всередині застосунку чи сайту, які кроки робить, з якими елементами взаємодіє. Фокус — на діях.

CJM — про досвід ширше. Він включає, що людина робить до зустрічі з продуктом, під час і після. На кожному кроці CJM ви фіксуєте не тільки дію, а й потребу людини, її розчарування, її емоційний рівень. Це інструмент представлення результатів досліджень, не проєктування.

Спрощено так: коли вирішуєте, як саме людина дійде до мети у продукті — це user flow. Коли збираєте картину її життя навколо продукту — це CJM. Те, чим займається UX-дизайнер в обох випадках, — дослідження шляху людини, просто на різних рівнях.

Як обрати вид user flow

У дизайні використовують три види user flow — і кожен потрібен на своєму етапі роботи.

Найпоширеніший — блок-схема. Це текстові елементи, з'єднані стрілками: коробочки-дії, ромби-розгалуження. Її використовують на стадії проєктування, коли рішень ще немає. За рахунок того, що ви не задумуєтесь про вигляд цих кроків, фокус залишається на функціоналі — на тому, чи оптимальний шлях. Ітерації швидкі: треба змінити крок — переписали текст, не перемальовуючи екрани.

Wire flow — термін, який ввели Nielsen Norman Group. Це блок-схема плюс вайрфрейми. Окрім текстових елементів, кожен крок показаний як начерк інтерфейсу — низької чи високої деталізації. Wire flow корисний, коли рішення вже є і його треба передати: розробникам, копірайтеру, замовнику. Замість окремих макетів колеги бачать, який елемент куди веде.

Інтерактивний прототип — це наступний крок після wire flow. Замість статичних начерків — клікабельні екрани в тій самій послідовності, як у блок-схемі. Цей варіант працює як інструмент презентації: команда чи замовник буквально проживають досвід користувача. Детальніше про те, як зібрати клікабельний прототип у Figma і які рівні деталізації існують, — у окремому матеріалі.

Вибір залежить від того, на якому етапі ви зараз. Малюєте з нуля — блок-схема. Передаєте готове — wire flow. Захищаєте перед замовником — прототип.

Як побудувати основний сценарій

Кожен user flow починається з основного сценарію — оптимального шляху, де користувач прямо досягає своєї мети.

User flow завжди має старт і фініш. Старт — це точка входу, і їх може бути кілька. Уявіть інтернет-магазин кросівок. Користувач може прийти на головну сторінку. Або одразу на сторінку категорії — якщо загуглив «купити кросівки Україна». Або одразу на сторінку конкретної моделі — якщо побачив пост у соціальній мережі. З кожної з цих точок він має дійти до фінішу — до покупки.

User flow не існує у вакуумі — він завжди про одну конкретну потребу користувача.

Ви не будуєте схему «всього магазину одразу». Ви будуєте її під одну потребу: купити конкретну модель, знайти товар у подарунок, повернути замовлення. Кожна потреба отримує свій user flow. І якщо дослідження показали дві персони — одна шукає конкретну модель, друга прийшла подивитися — це два окремих user flow. Перший веде через пошук, другий — через рекомендації і бестселери. Ці два потоки потім перетворюються на акценти в інтерфейсі: великий пошук на головній і блок з бестселерами поруч.

Нотація

У блок-схемі чотири базові елементи:

• Чотирикутник з округленими кутами — старт і фініш. Зазвичай їх виділяють кольором.
• Прямокутник — будь-яка дія: перехід на сторінку, натискання, вибір значення.
• Паралелограм — ввід даних користувачем (наприклад, форма) або вивід даних системою (наприклад, повідомлення).
• Ромб — розгалуження. Усередині — питання, на стрілках — варіанти відповіді.

На старті можна спростити: всі дії — прямокутниками. Головне, щоб метод був зручним, а не щоб ви постійно вирішували, який саме символ ставити. Зустрічаючись з типовими помилками початківців у UI/UX, більшість із них виникає саме через ігнорування цього підготовчого етапу — стрибок одразу до макетів без чіткої логіки.

Основний сценарій покупки

Як виглядає оптимальний шлях для покупки конкретної моделі:

1. Користувач відкриває головну.
2. Вводить назву моделі у пошук.
3. Система показує список збігів.
4. Користувач переходить на сторінку моделі.
5. Обирає розмір.
6. Додає в кошик, переходить на оформлення.
7. Заповнює форму особистих даних, натискає «Оформити».
8. Система показує підтвердження. Фініш.

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

Як проєктувати розгалуження і помилки

На кожному кроці основного сценарію корисно зупинятися і питати: що тут може піти не так — і як повернути користувача до мети.

Другорядний сценарій — це опціональна гілка. Не всім потрібна, але хтось скористається. На сторінці кросівок користувач знає свій розмір — обирає і йде далі. Не знає — для нього передбачена розмірна сітка. Він відкриває її, визначає розмір, повертається в основний потік. Другорядний сценарій завжди повертає в основний.

Рівнозначне розгалуження — це місце, де користувач має зробити вибір, і всі варіанти ведуть далі. Спосіб оплати: онлайн чи при отриманні. Спосіб доставки: пошта чи кур'єр. Це не «опція» — це обов'язковий крок із кількома гілками. На схемі він залишається в основному сценарії, просто з кількома стрілками.

З будь-якої точки схеми користувач має дійти до фінішу. Завжди.

Користувач читає user flow як настільну гру — рухається по стрілках. І це означає, що з будь-якої точки, рухаючись по стрілках, він має дійти до мети. Глухих кутів не існує. Про це добре написано в контексті реального кейсу редизайну для «Сільпо»: коли сторінка не веде користувача до наступного кроку, він просто іде.

Класичний приклад — товару немає в наявності. Ви додаєте ромб після вибору розміру: «чи є в наявності?» Якщо так — далі по основному сценарію. Якщо ні — гілка показує популярні моделі, перевіряє «чи зацікавили», і шлях замикається на основний потік. Ви не відпустили користувача — дали йому альтернативу.

Інший приклад — оплата не пройшла. Двофакторна верифікація провалилась, не вистачило грошей на картці. Ромб «оплата успішна?» Якщо так — фініш. Якщо ні — повідомлення про помилку і повернення до вибору способу оплати. Користувач отримує другий шанс: обрати «при отриманні» і все одно завершити покупку.

Кожна обробка помилки робить дві речі одночасно: повідомляє стан системи і дає альтернативу. Без цього навіть найкрасивіший макет не приведе до конверсії. Саме тому інструменти для роботи в Figma — лише фінальний крок: спочатку logic-first підхід у user flow, потім пікселі.

Як попрактикувати

Метод закріпиться, коли ви проведете його руками — на знайомому продукті.

1. Знайдіть мету. Відкрийте застосунок, яким користуєтесь щодня. Сформулюйте одну конкретну потребу: викликати таксі, замовити каву, надіслати переказ. Запишіть, з якого екрану ви починаєте і яким результатом потреба закривається.
2. Намалюйте основний сценарій. На папері чи в Figma складіть кроки. Старт і фініш — прямокутниками з округленими кутами. Дії — прямокутниками. З'єднайте стрілками. Перевірте, чи можна пройти від старту до фінішу одним шляхом без розгалужень.
3. Додайте одне розгалуження. На одному з кроків поставте питання «що може піти не так?» Намалюйте ромб з варіантами відповіді. Для негативного варіанту спроєктуйте гілку, яка повертає користувача в основний потік. Не до старту — саме до потоку.

Перший user flow вийде нерівним. Це нормально. На третьому-четвертому ви почнете бачити шлях користувача швидше, ніж відкриєте Figma. А потім — захочете йти далі: зібрати перші кейси в портфоліо або дізнатися, як знайти роботу в UX від практиків.

User flow — це не схема для звіту. Це чиста логіка перед макетами. Коли логіка прозора, екрани малюються вдвічі швидше: ви вже знаєте, які сторінки потрібні, які стани врахувати, де користувача треба підстрахувати. На десятому проєкті метод стане автоматичним — ви будете бачити user flow в голові, не дочекавшись брифа.