ТОП-10 визуальных приёмов для интерфейса миссий
В интерфейсе миссий важны три вещи: ясность цели, ощущение прогресса и ритм маленьких побед. Ниже — десять приёмов, которые повышают participation/completion и снижают жалобы, не перегружая экран.
1) Прогресс-лестница вместо «бесконечной» полосы
Что это: сегментированная шкала T1→T2→Final с явными порогами и точками наград.
Зачем: мозгу проще понимать дискретные ступени, чем непрерывный «прогресс 63%».
Как рисовать
3–5 делений, подписать каждое: «T1 100 очков», «T2 300», «Final 600».
Показать полученные награды прямо на делениях (иконки FS/кэша/бейджа).
Клик по делению → всплывашка «что дали / когда сгорит».
A/B-идея: лестница с иконками vs сухая шкала. Ожидание: +3–5 п.п. к completion T1.
2) «Сколько осталось» в понятных единицах
Что это: рядом с прогрессом показываем эквивалент усилия: очки → раунды → минуты.
Формула под капотом (приблизительно)
«Осталось 120 очков ≈ 8 раундов по €0,5 ≈ 6–8 минут».
Правила
Сначала время, потом раунды и деньги.
Считать по медиане последних 10–20 действий пользователя (адаптивные подсказки).
Обновлять каждые 2–3 сек, без «скачков».
A/B-идея: «осталось в очках» vs «осталось в минутах». Ожидание: −10–15% ранних выходов.
3) Карточки шагов (Step Cards) с «одной целью на экран»
Что это: каждый шаг миссии — отдельная карточка с крупной целью и кнопкой «Как засчитывается?».
Состав карточки
Заголовок: «Шаг 2 из 3».
Цель: 1 строка («Соберите 300 очков или 150 спинов»).
Прогресс: мини-лестница/чип «180/300».
Кнопка «?» → листинг включённых/исключённых игр, капов, примеров.
Do: крупный шрифт, визуальный иерархический контраст.
Don’t: перегружать мелкими условиями и звездочками.
4) OR-цели: визуальная «вилка» из трёх путей
Что это: вместо текста «или/или» — три равноправные кнопки-пути (Быстро Соревнование С сюжетом).
Правила
Все три пути видны одновременно; активный подсвечен.
Под каждой кнопкой — мини-ETA: «~8–10 мин», «1 раз ×20», «100 спинов».
Микро-текст
«Выберите удобный путь. Переключать можно в любой момент — прогресс сохранится».
A/B-идея: табы vs кнопки-плитки. Ожидание: +4–7 п.п. participation_net.
5) Зоны наград на лидерборде и в миссиях
Что это: делим таблицу/сетки на зоны (Top-3 / 4–10 / 11–50 / 51+), показываем минимально гарантированную награду каждой зоны.
Визуал
Цветовые плашки зон; возле позиции игрока — «До зоны 4–10 осталось 2400 очков».
Плашка «Гарантированно: FS×10» прямо в зоне, без «искать в правилах».
Польза: убирает «стеклянный потолок», формирует реалистичную цель.
6) Таймбокс-модуль с «окном дыхания»
Что это: визуальный таймер активной фазы (15–20 мин) + карточка «паузы без штрафа».
Экран
Кольцевой таймер с подписью «Окно 20:00».
При окончании: мягкая анимация + выбор «Вернусь позже» / «Продлить» (если допустимо).
Сообщение: «Пауза не прервёт стрик».
Эффект: растит Sessions/DAU, снижает усталость.
7) Микро-анимации «искра» и скелетоны загрузки
Что это: лёгкие вспышки/конфетти при прогрессе и наградах; скелетоны + шимер в местах с данными.
Гайды по движениям
Длительность 200–350 мс, кривые ease-out/ease-in-out.
Не перекрывать основной контент, а «подсвечивать».
Скелетоны повторяют геометрию карточек; шимер 1.2–1.6 сек.
A/B-идея: с анимацией vs без. Ожидание: −8–12% ранних выходов, +CTR на «продолжить».
8) Контекстные тулы: «Как засчитывается?» и «Почему не идёт?»
Что это: иконка «?» рядом с целью открывает мини-гайд с формулами, примерами и частыми ошибками.
Шаблон блока
«Как считаем»: формула + 1 пример.
«Капы»: за ставку/мин/день (числа).
«Не идёт прогресс?» 3 причины + ссылки на исключённые игры/режимы.
Плюс: резко снижает тикеты в саппорт.
9) Цвет, контраст и иконографика (WCAG + тёмная тема)
Базовые правила
Контраст текста минимум WCAG AA (4.5:1), крупного — 3:1.
Цвет ≠ единственный носитель смысла: добавляйте иконки/паттерны.
Иконки: 2–3 базовых формы (звезда — награды, цель — шаг/миссия, молния — «искры»).
Тёмная тема: фон #0F/12, «искры» светятся без ядовитых RGB.
Микро-копирайт
«Награда сгорит через 12 ч» — всегда рядом с кнопкой «Получить».
10) Пустые состояния, ошибки, лейблы «сгорит»
Что это: продуманные экраны, когда данных/миссий нет, и когда что-то пошло не так.
Пусто
Иллюстрация + «Сегодня свободно. Хочешь попробовать “Меню дня”?»
Кнопка «Подобрать миссию →» (ведёт к выбору).
Ошибки
«Не получилось обновить прогресс. Повторяем…» + спиннер ≤3 сек → «Попробовать ещё» / «В чат».
Статус «Сгорит через X» отображать на карточке награды и в списке наград.
Дополнительные элементы интерфейса
Чип «кап достигнут»: «200/200 очков/час — лимит. Сброс в 00:00».
Бейдж «почти-достиг»: жёлтый индикатор при ≤150 очков до порога.
Переходы игр: «Сменить игру — прогресс сохранится» (анти-гринд).
Локализация: числа с неразрывными пробелами «€ 1 000», 24-часовой формат времени, названия дней локалью.
Микро-тексты (можно вставлять как есть)
«Осталось 120 очков ≈ 8 раундов по €0,5 (6–8 мин).»
«Ты в зоне 11–50. Гарантировано: FS×10. До 4–10 — 2400 очков.»
«Кап достигнут: 200 очков/час. Сброс в 00:00 (Europe/Kyiv).»
«Выбери путь: Быстро / Соревнование / С сюжетом — можно менять в любой момент.»
Метрики для UI-экспериментов
UI-влияние на воронку: CTR «Начать», participation_net, T1/T2 completion.
Поведенческие: Early-exit (≤5 мин), time-to-T1/T2, switch-rate путей, просмотр тулов «?».
Качество: жалобы/1k, ошибки обновления прогресса, latency p95.
Ценность: ΔARPPU (net), Prize&Bonus/Active, Net Uplift.
A/B-рамка (коротко)
Единица: пользователь; sticky-assignment; стратификация (platform/geo/payer-flag).
Гипотезы: лестница vs полоса; «минуты» vs «очки»; кнопки-пути vs табы; с анимацией «искр» vs без.
CUPED: pre-session-time как ковариата; окно ≥2 недели с фазами D0–D2/D3–D7.
Чек-лист дизайнера миссий
- Лестница T1→T2→Final с иконками наград.
- Блок «Сколько осталось» в минутах/раундах.
- Карточки шагов, одна цель на экран.
- OR-пути — три видимые кнопки с ETA.
- Зоны наград и плашка «гарантировано».
- Таймбокс-таймер + «окно дыхания».
- Микро-анимации «искра», скелетоны/шимер.
- Тулы «Как засчитывается?» + причины «почему не идёт».
- Контраст/иконки/тёмная тема; «сгорит через X».
- Пустые состояния и доброжелательные ошибки.
Мини-кейс (синтетический)
До: полоса прогресса без порогов, текст «осталось 120 очков», скрытые капы, нет тёплых пустых состояний.
После: лестница с наградами, «8 раундов / 6–8 мин», OR-пути-кнопки, таймбокс-модуль, тулы «?», «кап достигнут», искры + скелетоны, зоны наград.
Результат 4 недели vs контроль: participation_net +6.4 п.п., completion +10.8 п.п., Early-exit −18%, жалобы/1k −31%, ΔARPPU (net) +€1.7 при Prize&Bonus/Active +€0.5.
Хороший интерфейс миссий — это визуальная дисциплина: ступени вместо «болота процентов», конкретные подсказки усилия, видимые награды и мягкая динамика. Добавьте к этому доступность, ясные тулы, таймбоксы и аккуратные анимации — и миссии начнут работать как «ритм маленьких побед», а не как длинная и скучная полоса прогресса.