Прототипування та тестування дизайну

1) Навіщо це потрібно

• Гіпотеза → Прототип → Тест → Інсайт → Ітерація → Рішення.

2) Рівні Fidelity і коли їх вибирати

Low-fi (скетчі/папір): структуру і потік; 30-90 хв на ітерацію.
Mid-fi (клікабельний каркас): навігація, тексти, стани; 0,5-2 дні.
High-fi (візуал/анімації): сприйняття, мікроінтеракції; 1-5 днів.
Code-proto (інтерактив + реальні дані): продуктивність, доступність, складні патерни (KYC, платежі); 2-10 днів.

Правило: починаємо з мінімально достатнього рівня для відповіді на питання гіпотези.

3) Формати прототипів

Paper/Wireflow: швидкі сценарії, комікси екранів.
Клікабельний (Figma/Framer/ProtoPie): переходи, умовні гілки, псевдо-форми.
Wizard-of-Oz: «магія за ширмою», складна логіка імітується дослідником.
Кодовий прототип (React/Flutter): жести, перформанс, A11y, інтеграція з API.
Контент-прототип: тексти, порожні стани, помилки/успіхи.

4) Де тестувати і як

• Модеровані: глибина, уточнюючі питання, think-aloud.
• Немодеровані: швидкість, масштаб, прості завдання.

• Віддалені: ширше географія, запис екрану/відеодзвук.
• Очні: контекст, eye-tracking/жести, фізичні пристрої.

• Юзабіліті-тести (сценарії завдань).
• Когнітивний walkthrough.
• Евристична оцінка (Нільсен 10).
• Карткове сортування/Tree-testing (навігація).
• 5-секундні тести (перше враження).
• Тест переваг (варіанти екрану/стилю).
• Desirability testing (емо-картки).
• Щоденникові дослідження (довгі цикли).

5) План тесту (шаблон)

1. Мета: яку гіпотезу перевіряємо (наприклад: «новий потік KYC зменшить time-to-verify на 30%»).
2. Сценарії завдань: 4-6 ключових, з критерієм успіху.
3. Артефакт: посилання на прототипи/версії.
4. Метрики: Task Success, Time-on-Task, Errors, SEQ (1-7), SUS (після сесії), UMUX-Lite.
5. Рекрут: профіль, ринки, N (5-8 респондентів на цикл).
6. Процедура: вступ → розминка → завдання → опитування → де-бриф.
7. Безпека та етика: згоду на запис, персональні дані/оплати не збираємо.
8. Логістика: пристрої/браузери, сітка слотів, чек-лист модератора.

6) Набір метрик і норми

Task Success (%): цільова норма ≥80% на критичних кроках.
Time-on-Task: медіана за сценарієм (порівняння з контрольною).
Error Rate: частота критичних/мінорних помилок.
SUS: ≥68 - базова норма, ≥80 - відмінно.
SEQ (1–7): оцінка складності задачі (мета - ≤3).
NPS/CSAT після сценарію: за потребою.
Поведінкові сигнали: залипання, повернення, back-навиг., rage-кліки.

7) Рекрут і вибірка

Кого кликати: реальні сегменти (новачки/досвідчені, регіони/мови, пристрої).
Скільки: 5-8 на якісний цикл; для A/B - статистика (див. нижче).
Скринінг: відсікаємо професійних тестувальників, вимагаємо досвід релевантних завдань (наприклад, онлайн-платежі).
Мотивація: чесна, без спотворення поведінки (не платимо бонусами продукту для тестів відповідальної гри).

8) Скрипт модератора (конспект)

Привітання, мета: «Тестуємо дизайн, а не вас».
Згода на запис, конфіденційність.
Розминка: попередній досвід, аналоги.
Завдання: «Уявіть, що хочете...» (мінімум наведення).

Нейтральні промпти: «Розкажіть, що очікуєте побачити далі», «Що бентежить?»

Завершення: коротке опитування, подяка.

9) Аналіз і пріоритизація знахідок

Таксономія проблем: Навігація, Розуміння, Введення, Зворотній зв'язок, Очікування/Час, Безпека, Локалізація/А11у.
Серйозність: Blocker / Major / Minor / Cosmetic.
Частота: скільки респондентів зіткнулися.
Вплив на бізнес: конверсія, ризики комплаєнсу (КУС/платежі), звернення.
Пріоритет = Серйозність × Частота × Вплив.

Звіт (1 стор.): мета, вибірка, ключові інсайти (5-7), приклади цитат, відео-посилання на моменти, рішення і власник завдання.

10) A/B і експериментування

Що тестувати: чітко один фактор (текст CTA, порядок кроків, формат поля).
Метрики: конверсія кроку/воронки, CTR, час, error rate, відміни.
Розмір вибірки: розраховуємо під бажаний ефект (наприклад, uplift 5-10%, power 80%, α = 5%).
Етика та ризики: для платежів/висновків мінімізувати шкоду: канареечний запуск, капи трафіку, відмінюваність.
Мультиваріантні тести - тільки при великих обсягах.

11) Інструментарій та артефакти

Прототипи: Figma/Framer/ProtoPie; для коду - React/Next.
Запис та аналітика: скрін/камера, теплові карти, session replay, події.
Шаблони: план тесту, скрипт модератора, форма згоди, чек-лист де-брифа, шаблон звіту однієї сторінки, decision log.
Дані: фіктивні/знеособлені, заглушки платежів і KYC.

12) Доступність (A11y) і локалізація в тестах

Перевіряємо навігацію табами, фокус-кільця,'aria-live'для тостів/помилок.
Контраст AA в світлій/темній темах.
Тест «довгих мов» (DE/TR), формати дат/валют, RTL.
Озвучувані тексти помилок/успіхів, альтернативи іконам.

13) Специфіка ключових флоу (iGaming)

Реєстрація/КУС: зрозумілість вимог, фото-підказки, ETA («до 2 хвилин»), помилки документа.
Платіж/депозит/висновок: ліміти, комісії, терміни, правило same-method; тексти відмов; крок підтвердження.
Бонуси/місії: прозорі умови, прогрес, статуси; уникати темних патернів.
Відповідальна гра: нейтральний тон, легка установка лімітів, доступ до довідки.

14) Передача в розробку (handoff) і дизайн-QA

Handoff-пакет: прототип + специфікації (стани, анімації, токени), тексти microcopy, i18n-ключі, A11y-вимоги.
Definition of Done (UX): покриті стани loading/empty/error/success, фокус/клавіатура, локалізація.
Дизайн-QA: порівняння з макетом, інтерактиви, контраст/фокус, тексти, верстка на пристроях/браузерах.

15) Чек-листи

Перед тестом

• Гіпотеза і питання дослідження сформульовані.
• Рівень Fidelity відповідає завданню.
• Сценарії та критерії успіху готові.
• Рекрут і слоти підтверджені, згоди підготовлені.
• Прототип відкривається на цільових пристроях/браузерах.
• Заглушки для чутливих дій (платіж/КУС).

Після тесту

• Конспекти і таймкоди зібрані.
• Проблеми розмічені по серйозності і частоті.
• Рішення визначені, власники призначені.
• Оновлено decision log і дорожня карта.
• Підготовлено короткий звіт (1 сторінка) і демо-відео (≤5 хв).

16) Анти-патерни

Тестувати «красу» замість сценаріїв і завдань.
Змішувати кілька гіпотез в одному тесті.
Давати навідні питання/підказки до спроби користувача.
Показувати тільки «щасливий шлях» - без помилок/порожніх станів.
Ігнорувати А11у/локалізацію «до продакшену».
Робити висновки по 1-2 респондентам без підтвердження.
Проводити A/B без розрахунку потужності вибірки.

17) Швидкі шаблони

• "Якщо ми винесемо вибір способу оплати на перший крок, то конверсія депозиту зросте на 7%, тому що зменшимо несподівані обмеження пізніше.

• «Поповніть рахунок на 500 UAH, використовуючи банківську карту».

• «Користувач завершує поповнення без допомоги і за ≤90 секунд».

• «Наскільки важко було виконати завдання?» (1 - дуже легко... 7 - дуже важко)

• Blocker: застряг і не може завершити → Major: серйозно заважає → Minor: уповільнює → Cosmetic: не заважає.

18) Підсумкова шпаргалка

Починай з low-fi, підвищуй Fidelity тільки при необхідності.
Тестуй сценарії, а не екрани.
Мерь Task Success/Time/Errors + SEQ/SUS.
Приоритизуй по серйозності × частоті × впливу.
Підтримуй A11y і локалізацію в кожному циклі.
Документуй рішення і передавай вичерпний handoff.