Потоки користувачів: що це таке та чому вони важливі в дизайні UX1 min read

Чудовий UX не починається з пікселів. Це починається з розуміння того, що користувачі намагаються зробити, де вони вводять продукт, які рішення їм потрібно прийняти та який шлях веде їх до успішного результату.

Цей шлях називається a потік користувачів.

Потік користувачів – це візуальна карта кроків, які людина робить через додаток, веб-сайт або конкретне завдання. Він може показувати повний досвід роботи з продуктом, як-от підключення до програми SaaS, або менший процес, як-от реєстрація, бронювання демо-версії, підписка на інформаційний бюлетень або завершення оплати.

Для дизайнерів, команд продуктів і засновників UX потоки користувачів є одним із найпростіших способів розробити кращі інтерфейси перед тим, як приступити до детальних екранів. Вони допомагають вам побачити, де користувачі можуть заплутатися, де потік має забагато кроків і які екрани вам насправді потрібно створити.

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

Спробуйте розробити потоки користувачів за допомогою ШІ

Опишіть потік користувача, який ви хочете створити, а потім дозвольте Anima перетворити його на UX, екрани та код.

Що таке потік користувачів?

А потік користувачів це діаграма, яка показує шлях, який проходить користувач, щоб досягти мети в продукті. У дизайні UX цей продукт зазвичай є додатком, веб-сайтом, веб-додатком або цифровим сервісом.

Потік користувача починається з точки входу, такої як домашня сторінка, цільова сторінка, результат пошуку, посилання електронної пошти, екран входу або кошик для покупок. Він завершується остаточною взаємодією, наприклад створенням облікового запису, завершенням покупки, надсиланням форми, публікацією проекту або переходом на сторінку підтвердження.

Потік користувача може представляти:

• Повний шлях до продукту, як-от відкриття, реєстрація та використання нової програми
• Одне завдання, наприклад скинути пароль або оновити план
• Потік функцій, як-от створення проекту, запрошення члена команди або експорт дизайну
• Потік інтерфейсу користувача, який показує, як з’єднуються екрани всередині продукту

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

Приклад базової структури потоку користувачів

Потік користувача проти потоку інтерфейсу користувача

Терміни потік користувачів і потік інтерфейсу користувача тісно пов’язані між собою.

Потік користувачів зосереджується на шляху користувача до мети. Він відповідає на такі питання, як:

• З чого починається користувач?
• Яку дію вони намагаються виконати?
• Які рішення вони приймають по дорозі?
• Що станеться, якщо вони досягнуть успіху, зазнають невдачі або підуть іншим шляхом?

Потік інтерфейсу користувача більш конкретно зосереджується на тому, як з’єднуються екрани, стани, кнопки, форми та елементи інтерфейсу. Він відповідає на такі питання, як:

• Який екран буде після цього?
• Що відбувається, коли користувач натискає цю кнопку?
• Куди веде цей стан помилки?
• Що бачить користувач після надсилання форми?

На практиці команди UX часто використовують обидва разом. Потік користувача визначає шлях. Потік інтерфейсу користувача робить цей шлях конкретним у продукті UI.

Як читати потік користувача

Потік користувача описує кроки, які виконує користувач від точки входу до кінцевої взаємодії. Кожна сходинка зазвичай представлена ​​формою, яка також називається вузлом. Вузли з’єднані стрілками, які показують напрямок руху.

Більшість блок-схем користувача використовують просту візуальну мову:

• Круг або овал: Початкова або кінцева точка
• Прямокутник: Екран, сторінка або дія
• Діамант: Точка прийняття рішення, наприклад так/ні, успіх/невдача або вибір шляху
• Стрілка: Напрямок руху між кроками

Пояснення компонентів потоку користувача

Наприклад, проста процедура реєстрації користувача може виглядати так:

1. Користувач потрапляє на головну сторінку
2. Користувач натискає «Почати безкоштовно»
3. Користувач вводить адресу електронної пошти та пароль
4. Система перевіряє, чи дійсний електронний лист
5. Користувач підтверджує обліковий запис
6. Користувач потрапляє на екран введення
7. Користувач завершує налаштування
8. Користувач потрапляє на інформаційну панель

Такий приклад потоку користувачів допомагає команді зрозуміти досвід перед розробкою кожного екрана.

Приклади потоків користувачів

Потоки користувачів стають легшими для розуміння, коли ви пов’язуєте їх із реальними завданнями продукту. Ось кілька поширених прикладів потоків користувачів, які створюють команди UX під час планування продукту.

Потік реєстрації користувача

Потік реєстрації користувача відображає, як новий відвідувач стає зареєстрованим користувачем.

1. Відвідайте цільову сторінку
2. Натисніть CTA для реєстрації
3. Виберіть спосіб реєстрації
4. Введіть дані облікового запису
5. Підтвердити електронну адресу
6. Завершити адаптацію
7. Охоплення інформаційної панелі продукту

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

Потік користувача Checkout

Потік користувачів для оформлення замовлення відображає, як користувач переходить від інтересу до продукту до покупки.

1. Перегляньте сторінку продукту або ціни
2. Додайте товар або виберіть план
3. Перегляньте деталі кошика або плану
4. Введіть платіжну інформацію
5. Підтвердити покупку
6. Перейдіть на сторінку успіху або квитанцію

Цей потік особливо важливий для електронної комерції, SaaS і продуктів за підпискою, оскільки кожен додатковий крок може вплинути на конверсію.

Потік користувача для входу та скидання пароля

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

1. Відкрити сторінку входу
2. Введіть облікові дані
3. Система перевіряє введені дані
4. Користувач успішно входить або бачить помилку
5. Якщо потрібно, користувач починає скидання пароля
6. Користувач підтверджує електронну адресу
7. Користувач встановлює новий пароль
8. Користувач повертається до товару

Приклад потоку користувача для процесу входу (потік завдань)

Процес адаптації користувача

Потік адаптації користувачів відображає, як нові користувачі досягають свого першого успішного продукту.

1. Створити акаунт
2. Відповісти на запитання щодо налаштування
3. Виберіть шаблон або початкову точку
4. Виконайте першу дію
5. Перегляньте стан успіху
6. Продовжте до продукту

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

Коли створювати потік користувачів

Створюйте потоки користувачів на ранніх стадіях процесу проектування, в ідеалі після початкового дослідження користувачів і перед високоякісним проектуванням UI.

На цьому етапі потік користувачів допомагає:

• Вирішіть, які екрани повинні існувати
• Видаліть непотрібні кроки
• Визначте незрозумілі моменти прийняття рішень
• Об’єднайте команду навколо структури продукту
• План прототипи швидше
• Уникайте дизайну полірованих екранів для ламаного шляху

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

Іншими словами, потоки користувачів стосуються не лише нових продуктів. Вони також корисні для вдосконалення існуючих продуктів.

Роль потоків користувачів у дизайні UX

Потоки користувачів є основною частиною дизайну UX, оскільки вони пов’язують цілі користувача зі структурою продукту. Перш ніж турбуватися про інтервали, типографіку, візуальну ієрархію чи компоненти, вам потрібно знати, чого намагається досягти користувач і як продукт допомагає йому досягти цього.

Потоки користувачів допомагають командам UX виконувати три важливі речі.

1. Створіть більш інтуїтивно зрозумілий інтерфейс

Чіткий потік користувача робить остаточний інтерфейс легшим для розуміння.

Коли ви намалюєте потік перед проектуванням, ви можете завчасно помітити тертя. Можливо, користувач повинен прийняти рішення, перш ніж отримати достатньо інформації. Можливо, форма з’являється занадто рано. Можливо, відсутній крок підтвердження. Можливо, є три екрани, де одного буде достатньо.

Якщо потік заплутаний, інтерфейс, ймовірно, теж буде заплутаним.

2. Оцініть існуючий інтерфейс

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

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

3. Донесіть свою стратегію до членів команди та зацікавлених сторін

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

Дизайнери можуть використовувати потік для планування екранів. Розробники можуть використовувати його для розуміння станів і крайових випадків. Прем’єр-міністри можуть використовувати його для уточнення вимог. Зацікавлені сторони можуть використовувати його для перегляду логіки досвіду, перш ніж команда інвестує в детальний дизайн або впровадження.

Потоки користувачів також можуть допомогти розробникам зрозуміти загальне структуру вашого остаточного прототипу, що робить передача більш ефективним.

Шлях користувача проти потоку користувачів

Шляхи користувачів і потоки користувачів часто плутають, але це не одне й те саме.

А шлях користувача розповідає ширшу історію стосунків користувача з продуктом. Зазвичай він включає цілі користувача, емоції, мотивацію, больові точки та точки дотику до, під час і після використання продукту.

А потік користувачів фокусується на шляху, який проходить користувач у продукті для досягнення певної мети.

Ключові відмінності

Обидва корисні. Подорож допомагає зрозуміти контекст користувача. Потік допомагає спроектувати фактичний шлях через інтерфейс.

Як створити потік користувачів

Ви можете створити потік користувача за допомогою дошки, інструменту дизайну, інструменту діаграми або інструменту дизайну AI. Формат має менше значення, ніж чіткість шляху.

1. Визначте мету користувача

Почніть з дії, яку користувач хоче виконати.

• Створіть обліковий запис
• Купити товар
• Замовити демо
• Опублікувати веб-сайт
• Запросіть напарника
• Експорт дизайну в код

Потік користувачів має будуватися навколо конкретної цілі, а не невизначеної області продукту.

2. Виберіть точку входу

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

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

3. Намалюйте щасливий шлях

Щасливий шлях – це найпростіший успішний шлях від початку до кінця.

1. Користувач відкриває сторінку з цінами
2. Користувач вибирає план
3. Користувач створює обліковий запис
4. Користувач вводить платіжні реквізити
5. Користувач підтверджує покупку
6. Користувач потрапляє на сторінку успіху

Це дає вам базовий досвід.

4. Додайте рішення та крайні випадки

Справжні користувачі не завжди йдуть ідеальним шляхом. Додайте такі моменти прийняття рішень, як:

• У користувача вже є обліковий запис?
• Чи дійсна форма?
• Чи вдався платіж?
• Чи вибрав користувач щомісячну чи річну оплату?
• Чи має користувач дозвіл продовжувати?
• Що станеться, якщо користувач скасовує?

Саме ці гілки перетворюють простий шлях на справжній потік користувача дизайну UX.

5. Спростіть потік

Коли потік складено, шукайте тертя.

• Чи можемо ми видалити крок?
• Чи можемо ми поєднати екрани?
• Ми запитуємо інформацію занадто рано?
• Наступна дія очевидна?
• Є глухий кут?
• Чи зрозумілі стани помилок?
• Чи завжди користувач знає, що сталося?

Найкращі потоки користувачів здаються очевидними, оскільки складність уже вирішена за лаштунками.

Потоки користувача в двох словах

Потоки користувачів – це структурні карти для проектування продукту. Вони показують, як користувачі переміщуються програмою, веб-сайтом або завданням від точки входу до кінцевої взаємодії.

Сильний потік користувачів:

• Починається з чіткої цілі користувача
• Показує точку входу користувача
• Відображає кроки, екрани та рішення на шляху
• Включає важливі граничні випадки
• Допомагає командам визначити тертя перед детальним проектуванням UI
• Спрощує передачу для дизайнерів, розробників, керівників проектів та зацікавлених сторін

Для команд UX потоки користувачів є одним із найбільш практичних інструментів для перетворення дослідження користувачів у структуру інтерфейсу. Вони допомагають вам створювати намір, а не вгадувати екран за екраном.

Поширені запитання: потоки користувачів

Що таке потоки користувачів?

Потоки користувачів – це діаграми, які показують шлях користувача через програму, веб-сайт або завдання продукту. Зазвичай вони починаються в точці входу, наприклад на домашній сторінці або екрані входу, і закінчуються, коли користувач досягає мети, наприклад, реєструється, купує або надсилає форму.

Що таке потік користувачів у дизайні UX?

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

Яка різниця між потоком користувачів і подорожжю користувача?

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

Що таке потік інтерфейсу користувача?

Потік інтерфейсу користувача показує, як екрани, стани UI, кнопки, форми та взаємодії з’єднуються всередині продукту. Він тісно пов’язаний з потоком користувача, але більш конкретно зосереджений на шляху рівня інтерфейсу.

Коли потрібно створити потік користувачів?

Створіть потік користувачів після початкового дослідження користувачів і перед детальним проектуванням UI. Ви також можете створити потоки користувачів пізніше, щоб перевірити наявний продукт, діагностувати випадіння або покращити конверсію.

Які є приклади потоків користувачів?

Приклади поширених потоків користувачів включають потоки реєстрації, потоки оформлення замовлення, потоки реєстрації, потоки входу, потоки скидання пароля, потоки бронювання, потоки оновлення та потоки запрошення члена команди.

Чому потоки користувачів важливі?

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

Як створити потік користувачів?

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

Спробуйте Anima Playground для потоків користувачів і дизайн UX

Anima Playground дозволяє переходити від ідеї продукту до потоку UX, дизайну та робочого коду в браузері. Опишіть досвід, який ви хочете створити, вдосконаліть його за допомогою ШІ та перетворіть результат на справжній інтерактивний продукт.

Почніть проектувати з Anima Playground.