Speaker A
Привіт, це Ерік. Сьогодні ми розглянемо 22-й урок, попрактикуємо і зрозуміємо, як створювати user flow, а в кінці відео буде домашнє завдання, яке ти виконаєш, і ми перевіримо його на стрімі.
Урок про створення ефективних user flow у UX-дизайні з практичними прикладами та порадами від Еріка Цурикова.
Ask about this video. Answers come from its transcript only — with the timestamp, so you can check them.
Generated from the transcript and can be wrong — check the timestamp.
Key Takeaways
- User flow є ключовим інструментом для покращення UX і розуміння користувацьких шляхів.
- Візуалізація user flow допомагає команді ефективно планувати і реалізовувати проєкти.
- Виділення початкової точки і пріоритетних дій робить user flow зрозумілим і практичним.
- User flow дозволяє оцінити обсяг роботи і складність розробки продукту.
- Практичне застосування user flow підвищує професіоналізм дизайнера і якість продукту.
What the video covers
- User flow — це візуальне представлення послідовності дій користувача для досягнення мети на сайті чи в додатку.
- Відео пояснює, як створювати user flow, щоб покращити користувацький досвід і комунікацію між командами.
- Показані приклади user flow для різних проектів, включно з великими комплексними системами.
- User flow допомагає визначити обсяг роботи для розробників і оптимізувати навігацію продукту.
- Розглядаються різні типи акаунтів і їх взаємодія в рамках user flow.
- Пояснюється важливість виділення початкової точки та пріоритетних етапів у схемі.
- User flow сприяє кращому розумінню сценаріїв використання продукту і виявленню проблемних зон.
- Відео містить поради щодо практичного застосування user flow у реальних проектах.
- Автор ділиться власним 8-річним досвідом і пропонує домашнє завдання для закріплення знань.
- User flow корисний як на початкових етапах проєкту, так і для масштабування та планування роботи.
Full Transcript — Download SRT & Markdown
Speaker A
Для того, щоб потрапити в закритий чат, є умови, я під цим відео залишу в описі, якщо ти дивишся це відео вже колись воно вийшло, ти все одно можеш приєднатися, надсилати свою домашку, я буду її розбирати.
Speaker A
Умови там прості: або безкоштовна участь, або платна.
Speaker A
А перед початком, будь ласка, постав лайк, дивись це відео до кінця, щоб нічого не пропустити, і напиши в коментарях, чи створював ти user flow.
Speaker A
User flow — це одна з ключових тем в UX-дизайні, адже саме з user flow буде зрозуміло, наскільки користувачу легко буде досягати кінцевої мети, наскільки він зрозуміє свій шлях та чи зупиниться він десь, чи ні.
Speaker A
Я не скажу, скільки років ця концепція є в UX-дизайні, але точно скажу, що розуміння user flow зробить тебе впевненішим дизайнером і покаже тебе на голову вище, ніж ті дизайнери, які просто малюють квадратики, стрілочки.
Speaker A
Сьогодні я спробую базово пояснити все, показати приклади, показати, як побудувати ефективний user flow, і закінчимо практичними порадами та практичним прикладом, які ти зможеш одразу застосовувати в своїх проектах.
Speaker A
І, да, в кінці, після цього уроку, можеш написати в коментарях, чи є різниця з тим, що ти знав до цього, і тим, що я в відео розкажу, адже це мій практичний досвід, той, який я накопичував 8 років, а зараз спробував вмістити в ці 40 хвилин.
Speaker A
User Flow (Потік користувача) — це візуальне представлення послідовності дій, які користувач виконує для досягнення певної мети на веб-сайті чи в додатку.
Speaker A
Це представлено найчастіше як блок-схеми, які ілюструють крок від моменту першого дотику до завершення дії, бажаного результату, ну, загалом, цільової дії, давайте так скажемо.
Speaker A
Найпростіший приклад, який я найчастіше приводжу, це покупка товару: є головна сторінка і є Thank You Page, сторінка вдячності за замовлення.
Speaker A
Або, наприклад, просто реєстрація нового запису.
Speaker A
Є головна сторінка, є десь кнопка, точка входу, і кінцевий результат — це, наприклад, заповнений профіль користувача.
Speaker A
User flow допомагає командам зрозуміти, як користувачі взаємодіятимуть з продуктом, які етапи він проходить, які проблеми можуть бути виявлені в навігації, для того, щоб оптимізувати користувацький досвід, скоротити ці кроки, зробити їх більш зрозумілими, щоб у вас не було, що користувач мусить реєструватися тільки через кошик товару.
Speaker A
Це сприяє кращій комунікації між дизайнерами, розробниками, маркетологами, ну, і взагалі між власником бізнесу і людьми, які представляють його інтереси.
Speaker A
В якому форматі, ви можете запитати, то все просто: ви готуєте схему того, як користувач рухається по вашому сайту, виконуючи певні обмежені функції, або загалом по всьому сайту, це може бути великий-великий user flow.
Speaker A
І ви після цього краще розумієте, які сторінки треба відмалювати, пропрацювати, знайти рішення, або десь спростити, і взагалі це дозволяє розробникам зрозуміти об'єм роботи.
Speaker A
Я часто кидаю user flow розробнику, щоб він оцінив складність продукту хоча б базово, тобто скільки він витратить сил на кожну із сторінок, він ще не знає, але він зрозуміє, що там, наприклад, 40 сторінок.
Speaker A
Ось це вже хоча б якийсь базис, і він розуміє: ага, за сторінку я там беру там 10 доларів за годину, і за сторінку це виходить 200 доларів, наприклад, і він розуміє: там 40 сторінок, 200 доларів сторінка, ось тобі вартість розробки.
Speaker A
Це все був аморфний приклад, зрозуміло, що ціни там різні. Ось ви бачите дизайн-проект, який було колись реалізовано мною.
Speaker A
Частиною цього етапу було user flow.
Speaker A
Тобто це замовлення на фрілансі.
Speaker A
Я не скажу, що воно ідеальне, тому що цей проект був більше року тому назад, звичайно, зараз більше в мене знань, хоча, знову ж, це правильна реалізація.
Speaker A
По ньому ми йшли протягом всього проекту, а він тривав більше чотирьох місяців, і ми все правильно реалізували.
Speaker A
Чому такий довгий термін, тому що тут досить таки великий об'єм інформації, яка додатково опрацьовується.
Speaker A
Ми можемо побачити, що в нас є початкова точка, і це дуже важливо.
Speaker A
Ви мусите відразу давати зрозуміти, де є початок.
Speaker A
Якось її бажано виділяти.
Speaker A
Після цього ми бачимо основні розділи меню і ті елементи, на які варто звернути увагу.
Speaker A
Додаткові — це, звичайно, Search Page, наприклад, знижки, контакти, і ось ці моменти, які виділені зеленим, вони не несуть нам ніякої важливої функції.
Speaker A
Ну, маю на увазі, що для нас жовтий — це пріоритетний етап, після якого відбувається кінцева дія — Thank You Page.
Speaker A
Тобто людина може в будь-якому випадку користуватися тільки тим, що він обере щось з каталогу.
Speaker A
Далі тут отримає інформацію по sub-categories, якісь там додаткові інформації.
Speaker A
Далі Product Card, і тут є декілька дій, і лише одна приведе до кінцевого результату, а саме — додати в кошик.
Speaker A
Тому що додати в улюблене або порівняти — це все ж таки трішки інше, хоча функції сюди мусять вести.
Speaker A
Як ви бачите, це flow не до кінця пропрацьовано в плані напрямків, але було достатньо для мене, для дизайн-команди, яка над ним працювала, щоб зрозуміти об'єм роботи.
Speaker A
Додатково ми можемо бачити, що ми розглядаємо окремо, крім каталогу, персональний акаунт.
Speaker A
Тому що користувач, який зареєструвався, він вже буде покупцем потім далі частіше, і можна йому надсилати якісь повідомлення на пошту, на соцмережі, на які він там вказав.
Speaker A
І тут ми бачимо всі моменти, що в нас є два типи акаунтів: це персональний і бізнес-акаунт.
Speaker A
І тут ми розуміємо, як з ним працювати.
Speaker A
Але все це веде далі, як мінімум, до Favourite List, а як максимум — до цих всіх розділів.
Speaker A
Це дуже зручно, це дуже класно.
Speaker A
Далі тут є додаткові сторінки, які нікуди не ведуть важливе.
Speaker A
Там, типу, я виділив це як контактна, там Share сторінка, контактна форма, Share, тому що це такі додаткові проміжні сторінки, які користувач вивчає перед прийняттям рішенням щось купити.
Speaker A
Тому ось таке flow, посилання на нього я не буду давати, тому що воно є комерційним.
Speaker A
Але я отримав дозвіл на публікацію цього flow на курсі.
Speaker A
Тому давайте перейдемо до другого прикладу.
Speaker A
І коли я казав про user flow великого проекту, я дійсно мав на увазі ось це.
Speaker A
Можете побачити, це дуже великий об'єм роботи.
Speaker A
Тут прописані дуже багато нюансів.
Speaker A
Це flow я будував для себе, щоб зрозуміти, як буде будуватися весь проект в цілому.
Speaker A
Деталей я його не буду розкривати, просто вкажу, що ось є основна сторінка, в нас є купа розділів, які використовуються окремо.
Speaker A
Наприклад, бізнес-розділ.
Speaker A
І цей момент, який я тут собі будував, я потім блок-схемами презентував більш стримано для розробників та менеджерів.
Speaker A
І це була робота, над якою я працював більше року.
Speaker A
Тобто тут було все, що потрібно, наприклад, беремо Education, і тут ми бачимо всі моменти, на що треба звернути увагу.
Speaker A
Як це все розмістити на сторінках.
Speaker A
Це були прям розділи з кнопками, куди треба що перевести, як працює це з профілями.
Speaker A
Яка взаємодія йде в сторінці профілів.
Speaker A
І так, це насправді будується в такому форматі, величезному, але дуже зрозумілому.
Speaker A
Після цього я міг взяти таке user flow і зробити зріз по кожному розділу.
Speaker A
І зробити певні етапи роботи, коли я щось роблю певний період часу, короткий, там тиждень-два.
Speaker A
Передаю розробникам і далі йду далі.
Speaker A
До речі, курс про UI Kit теж можете подивитися, сам будував я UI Kit.
Speaker A
За рахунок цього ми могли так швидко масштабувати цей проект.
Speaker A
За тиждень-два я робив цілий розділ, ось якийсь, наприклад, e-sport.
Speaker A
Де в нас дизайн був однаковий, треба було просто все правильно розставляти, правильно всі елементи збирати.
Speaker A
Тому так, це приклад великого user flow.
Speaker A
Який я колись будував.
Speaker A
То давайте розберемо, коли ж використовувати такий user flow.
Speaker A
Перед початком роботи над проектом.
Speaker A
На цьому етапі user flow допомагає визначити основні сценарії використання продукту та необхідні функції.
Speaker A
Це дозволяє створити чітке уявлення про те, як користувач буде взаємодіяти з інтерфейсом, чи не складно це йому, чи не велику кількість зайвих дій він виконує, або навіть виявити точки, де він розгалуджує свої потенційні можливості дії і уникнути їх.
Speaker A
І на фрілансі додатково це дозволить вам ще зрозуміти кількість сторінок.
Speaker A
Тобто, коли ви починаєте роботу, ви будуєте певний user flow на листочку, слухаючи там замовника, а з часом з досвідом у вас все в голові буде будуватися.
Speaker A
І ви можете так сказати: ага, там виходить приблизно 15-40 сторінок.
Speaker A
І така ціна.
Speaker A
Наступний етап, коли використовується user flow, це під час розробки.
Speaker A
Уявіть, що ви навіть не малювали user flow на початку.
Speaker A
Ви просто почали робити дизайн.
Speaker A
І ось сідає невідома людина, яка не розуміє ваш дизайн.
Speaker A
І починає щось малювати.
Speaker A
Що за чим іде?
Speaker A
Куди користувач потрапляє з тієї чи іншої сторінки?
Speaker A
Які основні дії на тій чи іншій сторінці?
Speaker A
Він бачить лише картинки, які ви намалювали.
Speaker A
А саме цей шлях користувача він бачить саме через user flow.
Speaker A
Тому одним із пунктів документації, яку я пишу, можливо, про це я колись зніму відос, стрім, або навіть курс, тому що це дуже важлива тема.
Speaker A
Документація для розробників і комунікація з ними.
Speaker A
Але тут важливо ще те, що як ви передасте, і в документації найчастіше є пункт user flow.
Speaker A
Який розробник відкриває і може розуміти шлях користувача.
Speaker A
І це дозволяє розробнику уникнути зайвих дій для користувача в розробці.
Speaker A
Я маю на увазі, щоб не було зайвих кліків, які ведуть не на потрібні функції, сторінки.
Speaker A
Тому user flow інколи може бути певного обмеженого етапу.
Speaker A
Наприклад, давайте розглянемо приклад додавання аватарки в більшому проекті.
Speaker A
Просто flow додавання аватарки.
Speaker A
Як ви бачите, це дуже просте flow.
Speaker A
В нас є користувач.
Speaker A
Він знаходиться на Profile Page.
Speaker A
І робить певні дії.
Speaker A
Тобто обирає картинку або додає.
Speaker A
Все це відбувається з однаковою дією, можна подивитися, що коли відбувається завантаження зображення і воно знаходиться більше 20 МБ, відбувається Error Message.
Speaker A
Який повертає користувача саме до обрання зображення сторінки.
Speaker A
Якщо це успішно, то дається прев'ю, Confirm, і людина потрапляє в Profile Page.
Speaker A
Все дуже просто, але це той приклад, коли ви бачите, що flow будується ще в проекті.
Speaker A
Крапково, точково, лімітовано під певну задачу.
Speaker A
Давайте подивимось другий варіант.
Speaker A
Другий приклад такого flow з обмеженим функціоналом, конкретно під щось.
Speaker A
Тут ми бачимо user flow, наприклад, всього проекту, але розділена на декілька груп.
Speaker A
При тому в нас є певні моменти, які вже пояснюються для користувача.
Speaker A
І це дуже зручно.
Speaker A
Тобто ви бачите логін, створення команди, user settings, різні параметри налаштувань.
Speaker A
І того, як певні функції, окремі функції працюють в сайті.
Speaker A
І як користувач з ними взаємодіє.
Speaker A
При тому початок, як ви бачите, усюди однаковий.
Speaker A
Home Page.
Speaker A
Home Page.
Speaker A
І це взагалі як компонент використовується.
Speaker A
Досить таки непогано реалізовано.
Speaker A
Бачите, заготовлені певні компоненти, які можна додавати.
Speaker A
І це дуже зручно.
Speaker A
Насправді, як варіант, в Figma реалізовано не в FigJam.
Speaker A
На стрімі, який буде при перевірці домашок цього user flow, я перевірю ваші user flow, які ви будували до курсу або під час.
Speaker A
І це буде, звичайно, не безкоштовно, на донат на ЗСУ, на якийсь збір.
Speaker A
Але все ж таки готуйте свої файли, будете надсилати під час стріму.
Speaker A
Буду їх дивитись.
Speaker A
І тут ми бачимо, що це user flow не дуже якісно розкрите.
Speaker A
Тому що, по-перше, тут є хаос.
Speaker A
Незрозуміло, що означають елементи.
Speaker A
І докуди вони ведуть.
Speaker A
Приклад, якщо ми подивимось, ми починаємо з цього етапу: Sign Up, Register, Home Screen, Login і Reset Password.
Speaker A
Але незрозуміло, що таке Get Started.
Speaker A
Це онбординг?
Speaker A
Добре.
Speaker A
Якщо це просто початок, то добре.
Speaker A
Це з нуля.
Speaker A
Можна його якось було окремо винести, але далі відбувається дуже дивно.
Speaker A
В нас на Home Page нічого немає, окрім Use Search.
Speaker A
Тобто пошуку.
Speaker A
І тут незрозуміло, що відбувається далі.
Speaker A
Навіть текста не продемонстровані якісно.
Speaker A
При тому все зводиться навіть так, ні, зводиться до однієї дії Select Item and Add to Cart.
Speaker A
Не сторінка вивчення про сторінку, про продукт.
Speaker A
Не те, як воно додається в кошик.
Speaker A
І які дії воно виконує.
Speaker A
Тобто тут дуже багато чого, і ні клієнт, ні дизайнер, ні розробник інший не зрозуміє цієї каші, яка тут написана.
Speaker A
Тому такі приклади user flow дуже неякісні.
Speaker A
Приведу приклад, який в мене колись відбувся.
Speaker A
Створюємо мобільний застосунок для обміну грошей онлайн.
Speaker A
Це було замовлення для обмінника з Чехії, не буду називати його, він працює успішно.
Speaker A
Суть проста: є два сценарії використання.
Speaker A
Для онлайн-обміну та офлайн-замовлення готівки.
Speaker A
І в ході роботи ми побачили можливість додати цікаву функцію.
Speaker A
Це була функція замовлення доставки готівки на адресу, коли робиш замовлення на покупку чи продаж від 5000 євро.
Speaker A
Так, тут спочатку було спілкування зі стейкхолдером, це був попередній відос, можете подивитися.
Speaker A
І я виявив таку закономірність, що вони таку функцію пропонують, але ніде не висвічують.
Speaker A
Так ось, я оперативно перебудовую, доповнюю user flow з новою функцією.
Speaker A
І побачив, що це п'ять нових екранів, які треба відмалювати.
Speaker A
Я перероблюю user flow і презентую нове user flow з доповненими сторінками і пропоную інтегрувати ці нові функції на мобільний застосунок, який створюється.
Speaker A
Він погоджується.
Speaker A
Тим самим я заробляю додаткові гроші, тому що це п'ять нових додаткових екранів.
Speaker A
Це дуже простий приклад, коли user flow, дія, на яку я витратив десь хвилин 40.
Speaker A
Додала до вартості моєї роботи ще додаткові гроші.
Speaker A
Які я заробив.
Speaker A
Особисті поради з власного досвіду по створенню user flow.
Speaker A
Чітко визначте ціль користувача.
Speaker A
Перед початком створення визначте основну дію, яку користувач хоче виконати, і зосереджуйтесь на ній, як кінцевій.
Speaker A
Приклад: якщо ви створюєте flow для покупки товару в e-commerce, ваша кінцева точка — це успішна оплата.
Speaker A
Весь шлях має бути оптимізований для швидкого вибору товару, додавання його в кошик і безперешкодної оплати оформлення замовлення.
Speaker A
Розбивайте складні процеси на прості кроки.
Speaker A
Чим менше рішень користувач має приймати на кожному кроці, тим легше йому буде просуватися вперед до кінцевої мети.
Speaker A
Ось, наприклад, в процесі реєстрації краще спочатку просити email і пароль, а вже потім пропонувати заповнити додаткові дані: там аватар, адресу.
Speaker A
Це зменшує ймовірність відмови на першому кроці.
Speaker A
Третя порада.
Speaker A
Користувач не хоче заблукати.
Speaker A
Не треба створювати мапу скарбів та заплутані шляхи.
Speaker A
Наприклад, у user flow для доставки їжі забезпечуйте все, щоб було відразу доступно на одному шляху.
Speaker A
Беріть flow відомих продуктів та покращуйте його.
Speaker A
Чи взагалі не змінюйте, а йдіть по ньому, якщо вам недостатньо досвіду.
Speaker A
Ідеальний flow — це те, яким вже користувалися, і користувач знає, що буде далі після того чи іншого кліку.
Speaker A
Тому у конкурентів найкраще за все треба підглянути те flow, які вже вони використовують.
Speaker A
Додайте альтернативні шляхи.
Speaker A
Завжди передбачайте варіант дій, якщо він піде не за сценарієм.
Speaker A
Дайте користувачеві змогу повернутись назад, вибрати інший шлях, перейти в іншу категорію.
Speaker A
Приклад: якщо у вашому flow користувач намагається ввести недійсний промокод, запропонуйте альтернативу: продовжити без коду або отримати підказку, де знайти правильний промокод або як його отримати.
Speaker A
І давайте перейдемо до практичної частини.
Speaker A
Я продемонструю, як я роблю user flow.
Speaker A
User flow я буду будувати лише базово.
Speaker A
Тему бізнесу візьму примітивно, але цікаво.
Speaker A
Компанія запускає мобільний застосунок для доставки готових страв із ресторанів.
Speaker A
Основна мета: надати користувачам зручний і швидкий спосіб замовляти їжу, порівнюючи різні ресторани, страви та ціни.
Speaker A
Ключові показники успіху: зменшення часу від відкриття застосунку до оформлення замовлення та збільшення кількості повторних замовлень.
Speaker A
Переді мною, як перед дизайнером, ставляться такі вимоги.
Speaker A
Реєстрація та вхід: користувачі можуть зареєструватися через email, телефон, соцмережі.
Speaker A
Можливість переглядати список ресторанів із фільтрами: кухня, рейтинг, доставка та інше.
Speaker A
Оформлення замовлення мусить бути інтуїтивна з кошиком, з попереднім переглядом ціни та все, щоб було зручно користувачу відразу все зрозуміти.
Speaker A
Ну, і швидка оплата, звичайно, Apple Pay та все інше.
Speaker A
Цільова аудиторія: це люди 20-40 років, які цінують швидкість і простоту.
Speaker A
Але, звичайно, це базовий опис.
Speaker A
Там детально все-все треба прописати.
Speaker A
Ну, і, звичайно, що конкурент — це Glovo.
Speaker A
З чого найперше я починаю, так це з вивчення конкурентів з сервісу Mobbin.
Speaker A
Дуже зручно, раджу.
Speaker A
Якщо у вас немає підписки, то, звичайно, варто її придбати, коли ви будете отримувати прибутки.
Speaker A
Але ось, наприклад, в цьому випадку подивимось швиденько Glovo.
Speaker A
Тут є навіть таке рішення Flow.
Speaker A
І воно розділене на дуже зручну бокову панель, де ви будете бачити все, що стосується Glovo.
Speaker A
І те, як відбувається в них етап онбордингу.
Speaker A
Можна подивитися.
Speaker A
Тут навіть є прототип, де можна просто подивитися, як це працює.
Speaker A
Що натискається.
Speaker A
Це стандартна Figma-вська штука, тільки в Mobbin-у реалізована.
Speaker A
І це дуже зручно.
Speaker A
Якщо ви не знаєте, як там щось працює, цей сервіс дуже зручний.
Speaker A
Допомагає вам вивчити.
Speaker A
Плюс відразу можна скопіювати за допомогою плагіну з Glovo, вставити зображення flow цього.
Speaker A
І все це переглянути.
Speaker A
Я не буду зараз детально розкривати цю логіку.
Speaker A
Це просто вам приклад, що не треба в голові сидіти і вигадувати певні flow.
Speaker A
Для того, щоб це зробити.
Speaker A
Відкриваємо сервіс.
Speaker A
Дивимось, вивчаємо.
Speaker A
Можете скачати застосунок просто з сервісу, який хочете вивчати, і ручками все це переглянути.
Speaker A
А я вже починаю перед виконанням задачі вивчати Glovo.
Speaker A
Ну, і моя ціль, як UX-дизайнера.
Speaker A
Звичайно, це забезпечити максимально зручний шлях до замовлення їжі з ресторану з кінцевою оплатою успішною.
Speaker A
Переходимо до практичної частини.
Speaker A
Почнемо з найпростішого.
Speaker A
Я собі даю певні визначення.
Speaker A
Для цього, наприклад, точка старту в нас буде якийсь там триангл.
Speaker A
Наприклад.
Speaker A
Будуємо.
Speaker A
Сюди пишемо старт.
Speaker A
Я буду робити українською, але все ж таки варто все прописувати англійською.
Speaker A
Ось наша точка старту.
Speaker A
Після цього ми, наприклад, починаємо робити квадратиками сторінки, які в нас є.
Speaker A
І перше — це, зрозуміло, що якщо в нас весь застосунок, то почнемо з реєстрації входу.
Speaker A
Тут важливо зрозуміти, що в нас є логін.
Speaker A
Ну, давайте так вважати.
Speaker A
Старт.
Speaker A
Це онбординг.
Speaker A
Там три екрани, нехай.
Speaker A
Я роблю швидко.
Speaker A
Звичайно, можна зробити простіше.
Speaker A
Логін є.
Speaker A
Тепер робимо те ж саме.
Speaker A
Тільки для створення акаунту.
Speaker A
Тут додатково вам порада, якщо вони все ж таки націлені на на три способи реєстрації.
Speaker A
Тут можна це навіть прописати.
Speaker A
Зробити окремо і вписати те, про що вони казали.
Speaker A
Звичайно, це варто оформлювати набагато краще.
Speaker A
Я просто показую те, що вони рекомендують.
Speaker A
Щоб я це врахував в своїй роботі.
Speaker A
Давайте це просто зробимо іншим кольором.
Speaker A
Щоб в нас воно не так відволікало.
Speaker A
Далі ми мусимо зробити окремі відступи.
Speaker A
Це сторінка, коли в нас забули пароль.
Speaker A
Ну, і описуємо спосіб відновлення.
Speaker A
Тут додатково можна текстом додати.
Speaker A
При тому це промальовується сюди окремо.
Speaker A
Забули пароль.
Speaker A
Так як це не основна сторінка.
Speaker A
Ми її можемо віднести до якогось додаткового кольору.
Speaker A
Можливо, навіть було форму треба було змінити.
Speaker A
Чи, можливо, це, до речі, зробити.
Speaker A
Да.
Speaker A
Це чудово.
Speaker A
Наприклад, такий.
Speaker A
А створення акаунту.
Speaker A
Теж тут додаткова сторінка, яка йде, це якщо це, наприклад, іде момент через щось.
Speaker A
По типу реєстрації через пошту, через номер телефону.
Speaker A
То це теж реєстрація через номер телефону чи пошту.
Speaker A
Це умова.
Speaker A
Тому я її виділяю якимось таким моментом сіруватим.
Speaker A
І тут підтвердження акаунту.
Speaker A
Ну, тобто, зрозуміло.
Speaker A
Надсилається повідомлення.
Speaker A
І тут підтверджується акаунт.
Speaker A
Ось наше розгалуження.
Speaker A
При тому цей онбординг можна збільшити побільше, щоб візуально було зрозуміло, що це наш старт.
Speaker A
Тепер, зрозуміло.
Speaker A
Коли ми вже все це зробили, ми переходимо на Home Page.
Speaker A
Home Page.
Speaker A
Я її можу поставити ось тут.
Speaker A
І додатково вам порада, що якщо ви знаєте якісь умови, які потрібно зробити, це, наприклад, можна додати сюди опис.
Speaker A
Тобто ви додаєте ті рішення, які ви вже знаєте від клієнта, які він хоче інтегрувати.
Speaker A
Для цього вам буде корисно мати це ось тут.
Speaker A
Щоб звертати увагу на це після того, як ви почнете роботу.
Speaker A
Наприклад, якось так.
Speaker A
Знову ж, дизайн і оформлення — це вже на вашій стороні.
Speaker A
Можна робити просто стандартно.
Speaker A
Можна якось гарніше оформлювати заголовки та все інше.
Speaker A
Далі в нас відбувається розгалуження.
Speaker A
І тут ми можемо побудувати ті розділи, які нам потрібні.
Speaker A
У вигляді такого списку вниз.
Speaker A
Де кожен розділ окремо.
Speaker A
В процесі побудови я прописую додаткові умови, які відбуваються.
Speaker A
А це саме, наприклад, при списку ресторанів, щоб відображати правильно ці ресторани.
Speaker A
Варто отримати дозвіл на отримання місцезнаходження користувача.
Speaker A
Також у вас будуть додаткові сторінки, які варто враховувати в user flow.
Speaker A
Які, наприклад, список сповіщень.
Speaker A
Але так як воно не пріоритетне, я його роблю десь ось тут.
Speaker A
І роблю його не таким за кольором.
Speaker A
Тобто додатковим.
Speaker A
Наприклад, якщо це не обов'язкова сторінка, можемо обрати там якийсь жовтий колір.
Speaker A
Всі ці позначення варто десь окремо тут буде прописати.
Speaker A
Я просто роблю.
Speaker A
А, да.
Speaker A
Ось, наприклад, забули пароль.
Speaker A
І ось це ми можемо разом позначити якимось жовтим.
Speaker A
І вибрати форму, ну, якусь не таку важливу.
Speaker A
По типу ось такого.
Speaker A
Що типу це неважлива сторінка.
Speaker A
Але ми потрапити в неї можемо з головної.
Speaker A
Ну що ж, ми бачимо певну побудову, яка вже виглядає як повноцінне цілісне flow.
Speaker A
Яка дозволяє нам зрозуміти, що робить користувач далі.
Speaker A
Але все ж таки це не кінцеве, тому що, наприклад, сторінка пошуку.
Speaker A
В списку ресторанів та вибір страв все ж таки трішки нас трішки змінює.
Speaker A
Адже.
Speaker A
Якщо ми подивимось, то пошук і мусить привести до нас до списку ресторанів та вибору страв.
Speaker A
Тому.
Speaker A
Сам пошук я виділяю окремо.
Speaker A
І можу або прописати ось тут інформацію, або промалювати цю стрілочку знову ж до каталогу ресторанів та вибору страв.
Speaker A
Да.
Speaker A
Тут починаються дуже проблемні ось ці моменти, тому тут варто подумати над тим, щоб їх якось відокремити.
Speaker A
Наприклад, якось так.
Speaker A
І тут виникає теж момент, що, наприклад, список ресторанів мусить мати ще додаткові сторінки всередині.
Speaker A
Ми можемо їх промалювати.
Speaker A
Але все ж таки все приведе до вибору страв.
Speaker A
Тому.
Speaker A
Коли ми робимо всередині ще один розділ.
Speaker A
Давайте ось це трішки звузимо до цього.
Speaker A
До речі, це, скоріш за все, сірий варто зробити.
Speaker A
Як я ось тут робив.
Speaker A
А тут ми робимо сторінка ресторану.
Speaker A
Сюди можна вписати те, що ми хочемо.
Speaker A
І тепер зі сторінки ресторану ми все ж таки будемо демонструвати сторінку вибору страв.
Speaker A
Тому будуємо її сюди.
Speaker A
Да, така складна система.
Speaker A
Звичайно, краще відобразити ці лінії більш жирніше.
Speaker A
Я бачу, що тут можна їх додати, але не стану цього робити.
Speaker A
Вже ви зрозуміли цю логіку.
Speaker A
Далі, коли ми вибрали певну страву.
Speaker A
А, до речі, в нас ще є одна сторінка, яка називається саме про страву.
Speaker A
Ну, точніше, сторінка страви.
Speaker A
Де все перераховується.
Speaker A
Теж варто це врахувати.
Speaker A
Ми натискаємо додати в кошик.
Speaker A
І ось наш кошик.
Speaker A
Давайте його так додамо.
Speaker A
Після цього йде відбувається певне оформлення.
Speaker A
Ми промальовуємо.
Speaker A
Тим, що умови нам були надані, ці дані ми можемо вписати ось сюди.
Speaker A
Але це ще не все.
Speaker A
Тому що після цього в нас мусить кудись відправляти далі.
Speaker A
А це саме оплата.
Speaker A
Оплата може відбуватися в декілька способів, тому ми беремо великий розділ.
Speaker A
І промальовуємо приклад оплати.
Speaker A
Прописуємо те, що нам там дається.
Speaker A
Що це означає?
Speaker A
Це означає, що ми можемо далі промалювати всі flow з оплатою та доставкою, які тут можливі.
Speaker A
Але я просто візьму це в загальну групу.
Speaker A
Тому що розумію, що там буде декілька екранів, дуже схожих між собою.
Speaker A
Коли ми робимо підтвердження.
Speaker A
А це може бути якийсь, наприклад, ось такий вигляд.
Speaker A
Це сторінка підтвердження.
Speaker A
Звичайно, колір тут треба якийсь такий прям яскравий.
Speaker A
Ну, червоний не підійде.
Speaker A
Тому давайте візьмемо такий синій.
Speaker A
Ми можемо ще добудувати певні flow, які відбуваються.
Speaker A
Щоб ми розуміли.
Speaker A
А саме це сторінка вдячності за замовлення.
Speaker A
І додатково, наприклад, перехід до push-сповіщень.
Speaker A
Можна тут промалювати, що надходить сповіщення на телефон про успішне замовлення.
Speaker A
Ось таке коротке flow я намагався дуже швидко базово накидати.
Speaker A
Звичайно, тут є куди розвиватися.
Speaker A
Тому що, наприклад, збережені, тут можна подивитися теж сторінки страв.
Speaker A
І все-все інше.
Speaker A
Але важливо просто зрозуміти, що ваша побудова flow не заключається в просто в заголовку сторінка, каталог і все-все інше.
Speaker A
Ви можете писати детальніше опис того, що там відбувається.
Speaker A
Та які будуть дії зустрічатись.
Speaker A
Основна ідея в тому, що робіть певні позначення, щоб тут поруч були виділені елементи для того, щоб користувачам іншим.
Speaker A
Які будуть дивитися ваше flow, було все зрозуміло.
Speaker A
Ну, і бажано все вести або з верху вниз, або зліва направо, або ось разом.
Speaker A
Тільки я б все ж таки ось тут витягнув би ось цю частину більше ось сюди вниз.
Speaker A
Щоб ми йшли дійсно зліва, потім вниз.
Speaker A
І все-все так далі відбувалося правильно.
Speaker A
Також додам цікаві рішення, які б я запропонував бізнесу.
Speaker A
Для того, щоб ви зрозуміли, що UX-дизайнер не просто тупо робить ці картинки і все.
Speaker A
Він намагається знайти ще покращення на базі того, як і конкурента він вивчив, як він побудував це flow.
Speaker A
І що він бачить, якби, так би мовити, нове для бізнесу.
Speaker A
Адже ніщо не стоїть на місці.
Speaker A
Ви можете бути тим інноватором, який інтегрує щось нове, і воно буде приносити користь бізнесу.
Speaker A
Так ось, цікаві рішення.
Speaker A
Гейміфікація.
Speaker A
Після кожного п'ятого замовлення користувач отримує бонус.
Speaker A
Наприклад, знижку за доставку.
Speaker A
Пропонуємо.
Speaker A
Шукаємо відповідь.
Speaker A
Рекомендації на основі попередніх замовлень.
Speaker A
Пропонуємо вибрати те, що користувач замовляв раніше, прямо з головного екрану.
Speaker A
І це вже сформовано як кошик.
Speaker A
Або, наприклад, швидке повторення.
Speaker A
На домашньому екрані є кнопка повторити попереднє замовлення для економії часу.
Speaker A
Таке можна інтегрувати.
Speaker A
І буде дуже зручно.
Speaker A
Наприклад, персоналізація.
Speaker A
Система запам'ятовує налаштування, улюблену кухню і підлаштовує головний екран з кращими пропозиціями по тому, що він захотів.
Speaker A
І таких ідей може виявитися дуже багато.
Speaker A
Я більше схиляюсь до того, що це все обмеження йде від технічної та стейкхолдера сторони.
Speaker A
Тому ми це все підготовлюємо в окремий список і презентуємо замовнику, чи готовий він інвестувати більше коштів в це, чи ні.
Speaker A
І тепер домашнє завдання.
Speaker A
Ми сучасний стартап, який запускає застосунок для оренди спортивного обладнання.
Speaker A
Мета проекту: створити простий та зручний сервіс, де користувачі можуть знайти, орендувати та оплатити потрібне обладнання для спорту чи активного відпочинку.
Speaker A
Наша основна маркетингова ідея — оренда в один клік.
Speaker A
Тобто дуже просто.
Speaker A
Базово цільова аудиторія: це люди, які шукають тимчасове спортивне обладнання (лижі, велосипеди, каяки тощо), але хочуть уникнути складного процесу бронювання.
Speaker A
Мета великих витрат на це.
Speaker A
Платформа буде працювати по всьому світу, тому в нас немає обмеження територіального.
Speaker A
Є людина, яка дає спорядження, а є, яка його бере в оренду.
Speaker A
При тому це може бути як фізична особа, так і, наприклад, інтернет-магазин, звичайний магазин, певні спорт-сервіси, компанії.
Speaker A
Тому тут неважливо, хто дає це обладнання.
Speaker A
Нам потрібно забезпечити користувачів інтуїтивним шляхом від пошуку обладнання до успішного бронювання.
Speaker A
Трішки про умови виконання.
Speaker A
Що ми очікуємо від вас.
Speaker A
Це мобільний застосунок, тому орієнтуємось на нього.
Speaker A
Користувацькі сценарії.
Speaker A
Новий користувач хоче орендувати обладнання без реєстрації.
Speaker A
І це можливо.
Speaker A
Зареєстрований користувач хоче швидко повторити попереднє замовлення.
Speaker A
І це теж можливо.
Speaker A
Користувач шукає обладнання за певними параметрами, використовуючи фільтр, пошук з різними параметрами, такими як місце розташування, вид спорту, ціна та все-все інше.
Speaker A
Локація біля нього.
Speaker A
Ключові кроки.
Speaker A
Пошук обладнання через фільтри, пошуковий рядок.
Speaker A
Детальний опис товару з усіма умовами, ми хочемо бути прозорими.
Speaker A
Бронювання: вибір дати, часу, коли повертати, як повертати та все-все.
Speaker A
Вибір способу оплати: готівка, криптовалюта, безготівковий розрахунок.
Speaker A
Підтвердження замовлення зі статусом та контактною інформацією орендодавця.
Speaker A
Де можна забрати або як отримати цей товар.
Speaker A
Ну, і не забувайте, що ми не можемо давати товар будь-кому, тому обов'язково на якомусь етапі отримати верифікацію користувача.
Speaker A
Додаткові умови.
Speaker A
Із того, що ми хотіли би отримати додатково, це інтеграція кнопки зв'язатися з орендодавцем.
Speaker A
Для уточнення деталей.
Speaker A
Кудись треба її додати.
Speaker A
Реалізуйте, будь ласка, функцію збереження вподобаних товарів для швидкого доступу до них.
Speaker A
User flow мусить бути побудований в блок-схемі.
Speaker A
Наприклад, FigJam — це найпростіше.
Speaker A
Короткий опис рішень, які забезпечать зручність та швидкість для користувача.
Speaker A
Логічна аргументація у вигляді коментарів, чому саме цей шлях буде найефективнішим для аудиторії.
Speaker A
Ну, і, зрозуміло, що кінцева дія мусить бути одна.
Speaker A
А ось шлях, як до неї дійти, може бути декілька.
Speaker A
Дякую за твій внесок в цей проект.
Speaker A
Всі питання, які виникають по цьому завданню, ви можете написати під цим відео.
Speaker A
Я відповім на нього.
Speaker A
Ну, а на цьому все.
Speaker A
Чекаю вашу домашку в закритому чаті.
Speaker A
Буде стрім, де я перевірю її.
Speaker A
І сподіваюся, що ви зрозуміли краще, як будувати user flow.
Speaker A
Це, до речі, і подивимось.
Speaker A
Удачі в вивченні дизайну та побудові user flow.
Topics:UX-дизайнuser flowкористувацький досвідвізуалізаціяпотік користувачадизайн інтерфейсупланування проєктуоптимізація навігаціїрозробка продуктуЕрік Цуриков
![Сила не реагування. Тайлер Коул. [Аудіокнига] — Transcript](https://i.ytimg.com/vi/VXAWy_gIIBg/maxresdefault.jpg)
