ТОП-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.
Хороший інтерфейс місій - це візуальна дисципліна: ступені замість «болота відсотків», конкретні підказки зусилля, видимі нагороди і м'яка динаміка. Додайте до цього доступність, ясні тули, таймбокси і акуратні анімації - і місії почнуть працювати як «ритм маленьких перемог», а не як довга і нудна смуга прогресу.