Miro для дизайнера: дошка для досліджень і флоу

Крок 1

Зареєструйтеся й налаштуйте простір

Створіть акаунт на miro.com. У тарифі Free можна створювати й поширювати необмежену кількість дошок, але редагованими лишаються три найновіші. Платні тарифи знімають це обмеження й додають, наприклад, таймер і голосування для воркшопів; актуальні умови — на сторінці тарифів Miro. Що варто знати на старті:

• •студенти й викладачі можуть подати заявку на безкоштовний освітній тариф; студентський дає необмежену кількість дошок на два роки;
• •Miro працює в браузері, а також має застосунки для iOS, Android, macOS і Windows;
• •заведіть одну дошку на проєкт і розділіть її фреймами за етапами: «Дослідження», «Флоу», «Структура», «Фідбек»;
• •назвіть фрейми зрозуміло: по них зручно переходити й показувати дошку іншим.

💡 Через ліміт у три редаговані дошки на Free не плодіть дошки «для тесту». Одна дошка з фреймами на проєкт — і порядок, і ліміт під контролем.

Крок 2

Зберіть мудборд і референси

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

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

Крок 3

Розберіть дослідження в діаграму спорідненості (affinity diagram)

Тут Miro сильніший за редактор макетів. Після інтерв'ю чи опитування перенесіть нотатки на стікери: одна думка — один стікер, бажано з позначкою, хто це сказав (Р1, Р2…). Далі:

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

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

Крок 4

Намалюйте user flow, карту шляху й карту сайту

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

• •user flow: кроки, які людина проходить до мети, наприклад «знайти курс — зареєструватися — оплатити», з розгалуженнями й помилками;
• •карта шляху користувача (CJM): етапи, дії, думки, емоції й проблеми людини, від «почув про продукт» до «користуюсь регулярно»;
• •карта сайту: які сторінки існують і як вони пов'язані;
• •позначте червоним місця, де людина може застрягти: саме їх ви потім перевірите на прототипі.

💡 Коли флоу готовий, переходьте у Figma й робіть прототип саме цього сценарію: див. гайд Прототип у Figma.

Крок 5

Проведіть сесію фідбеку й покажіть процес

Дошку зручно відкрити іншим людям: колезі, ментору чи спільноті. Додайте фрейм «Фідбек» зі скриншотами макетів і попросіть залишати коментарі або стікери біля конкретних місць. Щоб обговорення було корисним:

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

💡 Miro чи FigJam? Обидва — онлайн-дошки. FigJam входить в екосистему Figma, тож зручний, якщо макети вже там. Miro — окремий сервіс із понад 7000 шаблонів, серед яких багато для досліджень і воркшопів. Для навчання підійде будь-який — важливо, що ви на дошці робите.