Що таке user flow і як його намалювати: покроково

Крок 1

Визначте користувача і його мету

User flow — це схема кроків, які людина проходить у продукті, щоб виконати одну задачу: від точки входу до результату, разом із відповідями системи. Figma у своїй статті про user flow радить почати з того, для кого ви малюєте флоу і чого ця людина хоче досягти. NN/g наводить приклади цілей для флоу: купити тенісну ракетку в магазині спорттоварів, підписатися на розсилку, оновити фото профілю. Тобто це конкретна задача в продукті, а не весь досвід взаємодії з компанією. Для навчальної вправи оберіть звичний сценарій: замовити квитки в кіно, записатися на стрижку, додати картку в застосунок банку.

• •запишіть мету одним реченням: «Користувачка хоче записатися на стрижку на суботу»;
• •уточніть контекст: з якого пристрою, наскільки людина знайома з продуктом;
• •якщо задач кілька, зробіть для кожної окремий флоу.

💡 Якщо ваш «флоу» охоплює кілька днів, дзвінки і візити в офіс, вам потрібна не схема кроків, а карта шляху користувача — CJM.

Крок 2

Позначте точку входу і фінал

Звідки людина потрапляє в сценарій? Це може бути пошук у Google, кнопка на головній сторінці, push-сповіщення чи посилання від друга. Точок входу буває кілька, і від них залежить, що людина вже знає. Одразу визначте й фінал: що вважається успіхом. Figma наводить приклади: сторінка підтвердження після покупки, екран успіху або повернення до попереднього екрана після підзадачі.

• •точка входу: «відкриває застосунок салону з push-нагадування»;
• •фінал: «бачить підтвердження запису з датою, часом і майстром»;
• •якщо точок входу кілька, оберіть головну для першої версії флоу, а решту додайте пізніше.

Крок 3

Розпишіть основні кроки — щасливий шлях

Тепер запишіть послідовність кроків від входу до фіналу так, ніби все йде ідеально. Це так званий щасливий шлях (happy path). Не потрібно фіксувати кожен клік: Figma радить показувати важливі моменти — форми, які людина заповнює, кнопки, які натискає, і елементи, що ведуть її далі. Біля кожного кроку можна позначити, що робить людина і що відповідає система.

• •обирає послугу → обирає майстра → обирає дату й час → підтверджує → бачить підтвердження;
• •для схеми часто використовують прості фігури: овал — початок і кінець, прямокутник — крок або екран, ромб — рішення;
• •головне — однаково позначати однакові речі в усьому флоу, щоб схему розуміли без легенди на пів сторінки;
• •малюйте на папері, стікерами або на будь-якій онлайн-дошці, наприклад у FigJam.

💡 Пройдіть щасливий шлях уголос: «Я відкриваю застосунок, бачу… натискаю…». Пропущені кроки стають очевидними, щойно ви їх проговорюєте.

Крок 4

Додайте розгалуження й помилки

Реальні люди рідко йдуть щасливим шляхом. Figma називає точки рішень (decision points) місцями, де накопичується роздратування, тож саме тут потрібні зрозумілі підказки й альтернативи. Біля кожного кроку спитайте себе: що може піти не так і що людина може обрати інакше?

• •розгалуження вибору: «новий клієнт» або «вже є акаунт»;
• •відсутні дані: на обрану дату немає вільного часу — що бачить людина і куди може перейти;
• •помилки: неправильний номер телефону, втрачене з'єднання, відхилена оплата;
• •вихід зі сценарію: людина передумала — чи збережеться її вибір, якщо вона повернеться?

💡 Якщо флоу розрісся до десятків гілок, розбийте його на кілька менших. Figma радить тримати флоу простим і зосередженим на одній меті.

Крок 5

Перетворіть флоу на екрани і перевірте

Коли флоу готовий, позначте, які кроки — це окремі екрани, а які відбуваються на одному. Так ви отримаєте список екранів для макетів. Можна піти далі й намалювати wireflow: NN/g описує його як поєднання вайрфреймів і блок-схеми, де замість прямокутників — спрощені екрани. Після цього флоу стає основою клікабельного прототипу. А перевірити, чи збігається він з поведінкою людей, найкраще юзабіліті-тестом: NN/g називає його найкращим джерелом даних для user flow.

• •порахуйте кроки: чи можна якийсь об'єднати або прибрати;
• •перевірте, що з кожного екрана є шлях уперед і шлях назад;
• •у кейсі покажіть флоу поруч із макетами: так видно логіку рішень;
• •після тесту оновіть флоу: він має описувати те, що є, а не те, що планувалося.

💡 Покажіть флоу в спільноті без пояснень і спитайте, чи зрозумілий шлях. Якщо людям доводиться перепитувати, схему варто спростити.