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

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) Анализ и приоритизация находок

Таксономия проблем: Навигация, Понимание, Ввод, Обратная связь, Ожидание/Время, Безопасность, Локализация/A11y.
Серьезность: Blocker / Major / Minor / Cosmetic.
Частота: сколько респондентов столкнулись.
Влияние на бизнес: конверсия, риски комплаенса (KYC/платежи), обращения.
Приоритет = Серьезность × Частота × Влияние.

Отчет (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)

Регистрация/KYC: понятность требований, фото-подсказки, ETA («до 2 минут»), ошибки документа.
Платеж/депозит/вывод: лимиты, комиссии, сроки, правило same-method; тексты отказов; шаг подтверждения.
Бонусы/миссии: прозрачные условия, прогресс, статусы; избегать темных паттернов.
Ответственная игра: нейтральный тон, легкая установка лимитов, доступ к справке.

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

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

15) Чек-листы

Перед тестом

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

После теста

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

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

Тестировать «красоту» вместо сценариев и задач.
Смешивать несколько гипотез в одном тесте.
Давать наводящие вопросы/подсказки до попытки пользователя.
Показывать только «счастливый путь» — без ошибок/пустых состояний.
Игнорировать A11y/локализацию «до продакшена».
Делать выводы по 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.