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

Що таке прототип і навіщо він потрібен

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

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

На грошах це теж відчутно. Прототип у Figma ви переробите за кілька годин роботи. Переписати вже написаний код займе тижні. Кожна ітерація на ранньому етапі економить ці тижні потім.

Три рівні деталізації прототипів

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

Низька деталізація (low-fidelity)

Прототип низької деталізації — це верхньорівневий ескіз продукту. Олівець, папір, прямокутники замість картинок і слова «тут заголовок» на місці тексту. Деталі тут не важливі: задача показати концепцію розташування, не вдаючись у те, як усе виглядатиме.

Такі прототипи ви зробите за хвилини і так само швидко переробите. Тому це формат для перевірки самої ідеї, поки ви ще не відкривали Figma.

Середня деталізація і вайрфрейми (mid-fidelity)

На цьому рівні з'являється вайрфрейм. Вайрфрейм — це монохромний макет з реальними розмірами елементів і реальними стилями тексту, але без кольорів, ілюстрацій і фінального візуалу. Чорно-біла схема інтерфейсу, де кожен елемент стоїть на своєму місці.

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

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

Висока деталізація (high-fidelity)

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

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

Як обрати рівень деталізації

Спочатку задача, потім рівень. Перевірити саму ідею достатньо ескізом на папері. Для структури інтерфейсу і логіки переходів вистачить вайрфреймів у клікабельному прототипі. А коли потрібно подивитися, як користувачі реагують на візуальний дизайн і мікровзаємодії, переходьте на high-fi.

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

Як зібрати клікабельний прототип у Figma

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

Флоу і екрани

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

Тепер беремо екрани. Тут потрібно врахувати всі стани, які плануєте показати. Якщо чекбокс має два стани (відмічений і не відмічений) і вони ведуть до різних дій, дублюйте екран. Один екран — один стан інтерфейсу.

Взаємодії

Кожну взаємодію в Figma описують чотири параметри: який елемент реагує, який тригер запускає дію, який результат і яка анімація. Тригерами бувають тап, наведення, спрацювання після затримки. Результат може бути різний: перехід на інший екран, відкриття оверлею або зміна стану компонента.

На практиці вам знадобляться дві дії частіше за інші. Navigate To перекидає користувача на новий екран. Open Overlay показує елемент поверх поточного, і це типова механіка для модальних вікон і сповіщень. Якщо сповіщення повинно зникати само, додайте йому окрему взаємодію з тригером After Delay і дією Close Overlay. Через задану кількість мілісекунд оверлей закриється автоматично.

Тонкощі, які роблять прототип «живим»

Кілька опцій, без яких клікабельний прототип виглядає шорстко:

• Preserve Scroll Position. Без цієї опції прототип викидає користувача в самий верх сторінки після кожного кліку. Увімкніть її там, де переходи відбуваються в межах однієї довгої сторінки.
• Fixed Position When Scrolling. Для зафіксованих шапок і нижніх панелей з кнопками. Без неї панель зникатиме під час скролу, а ваш користувач загубить навігацію.
• Variants. Замість дублювати екран заради зміни чекбокса чи перемикача, зберіть цей елемент як компонент з кількома станами. Тоді макети залишаться чистими, а інтерактивність працюватиме всередині компонента.
• Smart Animate. Якщо два екрани містять шари з однаковими іменами в різних позиціях, Smart Animate плавно анімує перехід між ними. Це і є та відмінність між статичним слайд-шоу і відчуттям справжнього продукту.

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

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

Засвоїти цей матеріал краще одним способом: зібрати щось маленьке і справжнє.

• Намалюйте вайрфрейм одного екрана улюбленого застосунку. Не повторюйте дизайн. Намалюйте монохромну структуру з прямокутниками і реальними стилями тексту. Так ви відчуєте, як працює середня деталізація.
• Зберіть простий клікабельний прототип у Figma: три екрани, два переходи, одне модальне вікно. Цього досить, щоб освоїти Navigate To і Open Overlay.
• Протестуйте свій прототип на одній людині. Дайте телефон комусь поруч і попросіть виконати конкретну задачу. Спостерігайте, де людина зависає. Це і є те, заради чого все робилося.

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