Після знайомства з дизайн процесом давайте заглибимось в етап прототипування. Справа у тому, що в реальності дизайнери часто пропускають перші кроки дизайн процесу і одразу починають робити вайрфрейми або навіть макет сайту. Це відбувається через те, що уся необхідна інформація може бути уже зібрана або якщо бюджет дуже обмежений.
На цьому етапі часто буває потрібно визначитись з екранами, а вже після цього переходити до проєктування кожного з них. Для цього використовується user flow і його різновиди. Давайте познайомимось з цими методами ближче.
User flow (читається юзер флоу) — це покрокова схема взаємодії користувача з продуктом (сайтом, мобільним додатком тощо) для вирішення поставленої задачі. Включає дії назви екранів та дії, що там виконуються для досягнення мети.
Розглянемо приклад. Нехай користувач хоче купити велосипед в інтернет–магазині.
Юзер флоу обов'язково відповідає на такі питання:
- Хто є користувачем? У нас це покупець (роль користувача);
- Яка у нього мета? Хоче купити велосипед. Відповідь випливає із завдання менеджера;
- Які кроки зробити, щоб виконати ціль? Що конкретно потрібно зробити користувачеві, щоб купити велосипед. Які кнопки натиснути та через які екрани пройти?
Тепер за діло береться UX-дизайнер. Відповідаючи на останнє запитання, можна припустити, що користувач почне з головної сторінки, де напише велосипед у формі пошуку. Після чого потрапить на сторінку результатів пошуку із фотографіями та цінами велосипедів. Вибравши відповідний, перейде на наступний екран з більш детальною інформацією та кнопкою купити. Натиснувши яку, перейде до форми оплати. Після підтвердження покупець побачить повідомлення дякую за покупку.
Ця відповідь дуже спрощена, але має дати вам уявлення про те, яку інформацію несе в собі юзер флоу. Насправді ви повинні відмалювати схему. Залежно від деталізації їх буває 3 види: таск флоу, вайрфлоу, скрінфлоу.
Task flow (читається таск флоу) — послідовність дій в рамках якогось завдання. Ця схема включає лише назви екранів і дій. Часто вам навіть не потрібно торкатися комп'ютера. Робите малюнок маркером у блокноті або на дошці. Схеми можуть включати розгалуження залежно від вибору користувача:
Запам'ятайте ключові моменти при складанні таск флоу:
- У прямокутниках вписується назва екрана (головна сторінка, результати пошуку, деталі товару, кошик, вибір способу оплати тощо);
- під екраном (прямокутником) іноді корисно розписати можливі дії користувача, але тільки якщо це необхідно – уникайте зайвої деталізації, це робиться на етапі малювання вайрфреймів;
- стрілочкою позначається перехід між екранами. Для ясності їх можна підписувати. Наприклад: натискаємо кнопку купити, клацаємо на результат пошуку, клацаємо на картку.
Після відмальовки та правок на папері можна перемалювати схему в графічному редакторі, іноді це робиться відразу:
Wireflow (пишається разом, читається вайрфлоу) — це послідовність нарисів екранів (вайрфреймів). Ця схема включає грубі начерки екранів з важливими елементами інтерфейсу (кнопки, поля форм, місця для картинок) та діями. Їх також часто малюють вручну:
Деталізація та пропрацювання залежить від ситуації. У цьому прикладі все спрощено до максимуму, але основні елементи інтерфейсу на кожному екрані чітко виділено. Для уточнення усі деталі прописують текстом:
Screenflow (пишеться разом, читається скрінфлоу) — послідовність екранів із готовою UI-частиною. Цей вид використовується на пізніх етапах розробки. Тут дизайн кожного екрану виконаний із максимальною (фінальною) деталізацією. Виконується лише у графічних редакторах та спеціалізованих програмах (наприклад Overflow допомагає малювати стрілочки для з'єднання екранів):
Wireframe (читається вайрфрейм) – це статичний малюнок конкретного екрана, який визначає розташування та розмір UI елементів. Візуальна частина завжди обмежується чорно-білою палітрою та простими фігурами.
Якщо продовжити наше припущення з роботою в компанії, то після обговорень нас можуть попросити відмалювати вайрфрейми для головного екрана та юзер флоу покупця.
Залежно від завдання може використовуватися як у технічній документації для розробників, так і слугувати базою для UI-дизайнера. Можуть бути відмальовані як і юзер флоу у блокноті, на дошці чи у графічному редакторі. Існують навіть спеціальні програми для імітації ручних начерків на комп'ютері (Balsamiq Wireframes).
Все це робиться, щоб визначити, як краще розмістити елементи інтерфейсу, щоб користувачам було максимально зручно виконувати конкретні завдання на сайті.
На малюнку вгорі ліворуч зображено вайрфрейм, а справа закінчений дизайн (постарався UI-дизайнер). За ступенем деталізації вайрфрейми можна поділити на два види.
Лоу-фіделіті вайрфрейми
Low-fidelity wireframes (читається лоу-фіделіті вайрфреймс) – дуже грубі та швидко виконані начерки екранів. Зазвичай містять мінімум тексту, в більшості випадків він замінений горизонтальними лініями, всі кнопки та зображення показані прямокутниками (іноді використовуються круги). Часто розташування та розмір елементів є приблизними.
Хай-фіделіті вайрфрейми
High-fidelity wireframes (читається хай-фіделіті вайрфреймс) – точно виконані начерки екранів. Містять весь текст; розташування, розміри кнопок та інших елементів максимально наближається до фінального дизайну. Вимагають набагато більше часу на створення, містять більше деталей.
Prototype (читається прототайп) або інтерактивний прототип – це дизайн екрана, який реагує на дії користувача. Тобто це не статична картинка, як у випадку з вайрфреймами або юзер флоу. Прототипи дозволяють зрозуміти, як працюватиме веб-сайт до початку програмування, виявити проблемні та незручні екрани. Часто використовуються для тестування з реальними користувачами.
Інтерактивні прототипи запускаються в браузері на комп'ютері або у спеціальних додатках на смартфоні і можуть виглядати, як справжні закінчені продукти. Але насправді це лише підробки, жодних серйозних обчислень чи обробки даних там виконуватись не може.
Наш інтерактивний прототип на основі попередніх скетчів може бути використаний для подальшого тестування. Для однієї функції іноді може бути розроблено кілька прототипів і вже на основі звітів usability-тестування приймається рішення, який варіант затверджувати.
Відтепер цей курс розрахований на самостійне вивчення та виконання домашніх завдань. Розумію, що деякі завдання можуть бути непростими для вас.
Для додаткової підтримки скористайтесь чатом у телеграмі. Тут ви зможете поставити запитання, що стосуються уроків або переглянути приклади правильного виконання від інших учнів.
Чат недоступний для громадян росії.
- Оберіть сайт, який ви щодня відвідуєте. Намалюйте такс флоу в блокноті для двох типових сценаріїв використання цього сайту.
- Придумайте нову функцію для сайту, яким ви користувалися хоча б одного разу (необов'язково для вашого улюбленця з першого завдання). Створіть таск флоу для цієї нової функції.
- Створіть вайрфлоу для сценаріїв першого завдання. Можете використовувати олівець або ручку, що витирається, щоб робити правки. Постарайтеся наблизитись до оригіналу.
- Останнє завдання підвищеної складності. Створіть вайрфлоу для сценарію з другого завдання. Тут потрібно бути дуже спостережливим, тому що ви не знаєте, які елементи інтерфейсу існують взагалі. Але ви можете подивитись їх на інших сайтах.
Робіть фото ваших юзер флоу і надсилайте в дірект в Instagram @frusia.pro (не забудьте вказати, що це до третього уроку) або залишайте посилання тут у коментарях під уроком (посилання я пізніше заміню на картинки прямо у коментарях).
По кожній відповіді дам фідбек, так ви переконаєтеся, що засвоїли матеріал правильно.
Висновки
От ми й отримали уявлення, з чим доводиться стикатися UX/UI-дизайнеру у повсякденній роботі. Це був найдовший і найскладніший урок з масою нових термінів. Будь ласка, вивчіть його досконало та зробіть домашнє завдання. Все це лише теорія, але вже скоро ми переходимо до практики, а саме до вивчення Figma. Обіцяю, буде ще цікавіше!
Підписуйтесь на мене в Instagram @frusia.pro, будьте в курсі анонсів нових уроків, дивіться перевірки домівок у сторіс, ставте запитання, а також на вас чекає безліч корисних постів про дизайн.
Продовжити навчання