Torrent Gear

UI лідерборда і карток місій: Кращі практики

1) Навіщо це все: цілі UI

Лідерборд: моментально пояснити «хто де» і навіщо грати далі; показати найближчу мету (+ N очок до апа).

Картки місій: перетворити довгі правила в зрозумілу «одиницю дії» на 10-30 хвилин.

2) Інформаційна ієрархія лідерборду

Мінімальний набір колонок:

1. Місце (#) зі стійкою шириною і великою цифрою.

2. Гравець (аватар/рамка/титул, короткий нік) - клікабельно → профіль.

3. Окуляри/рейтингова метрика (SP/MMR/окуляри івенту) - вирівняти по правому краю.

4. Приз/рангова зона (іконка рідкості/діапазон нагороди).

5. Час/стадія (live/qualifier/finals), таймер закінчення.

Патерни:

Підсвічування свого рядка (sticky row + «повернутися до мене»).
«Поріг до мети»: маленька плашка «−48 SP до ТОП-100».
Склейка нічиїх («T-10» для однакових очок).

3) Управління та навігація

Фільтри: ліга/дивізіон, регіон, друзі, «тільки мій провайдер».

Сортування: за місцем (за замовч.) , за очками, за часом входу, по призовій зоні.

Пагінація vs нескінченний скролл:

desktop - пагінація + «до себе», mobile - нескінченний скролл, але з «до початку/до себе».
Jump-to Rank: поле введення рангу для миттєвого переходу (важливо для масштабних дощок).

4) Оновлення в реальному часі (без «дерганья»)

Диф-оновлення: змінюємо тільки рядки, які реально зрушили.

Анімація переміщення рядка: 120-200 мс, easing-out; без стрибків.

Анти-флікер: батч-оновлення кожні 1-2 сек (не частіше).

Оптимістичні оновлення: локально додаємо окуляри і мітимо «синхронізація»....

5) Чесність і безпека в UI лідерборда

Пояснення правил: кнопка «Як вважаються окуляри?» поруч із заголовком.

Анти-булінг: маскувати частину ніка (опція), скарга на токсичне ім'я - 1 клік.

Маркер підозрілих акаунтів: прихований від інших; гравцеві - «ваші очки перевіряються».

Поділ дивізіонів: візуально різні бейджі ліг, щоб сильні не змішувалися зі стартовими.

6) Анатомія картки місії (one-glance design)

Заголовок (≤ 40-50 символів), іконка типу місії.

Короткий опис (що зробити, де, за скільки).

Прогрес-бар з числом/відсотком + оцінка часу (≈ 20-25 хв).

Складність (1-3 точки) і рідкість нагороди (колір/грань).

Нагороди: токени/косметика (маленькі мініатюри), без «грошового» підтексту.

Термін: таймер до закінчення з м'яким кольором (оранж/червоний в останні 10%).

CTA: «Почати »/« Продовжити »/« Забрати» - одна головна кнопка.

Secondary: «Змінити місію» (якщо дозволено), «Детальніше» (модалка правил).

7) Стану карток місій

Locked: сірий, з підказкою «відкриється після рівня 7 «; CTA = "Що потрібно? ».

Available: колір за типом; CTA = «Почати».

In-progress: прогрес-бар активний, CTA = «Продовжити».

Completed: зелений чек; CTA = «Забрати» (ефект ≤ 1 сек).

Expired: блідий; CTA = «Приховати «/« Повторити в сезоні N ».

On hold (перевірка чесності): жовта плашка «перевірка результату 1-3 хв».

8) Візуальна мова та доступність

Кольори за рідкістю: Common (нейтральний), Rare (синій), Epic (фіолет), Legendary (золото), Mythic (райдужний акцент).

Семантичні кольори: успіх/прогрес - зелений, попередження - бурштиновий, дедлайни - червоний.

Контраст ≥ 4. 5:1, шрифти ≥ 14-16 px на mobile.

Все важливе - не тільки кольором (іконки/патерни).

Економний VFX: 0. 6–1. 2 c, без перекриття контролу.

Адаптив: таблиця → картки (2 колонки tablet, 1 колонка phone); закріплені заголовки.

9) Стану завантаження, порожнечі і помилки

Скелетони для таблиць і карток (3-5 рядків/тайлів).

Empty state: корисний текст + «Отримати стартову місію».

Помилки мережі: зрозумілі, з «Повторити»; офлайн - показуємо кеш і позначаємо "останнє оновлення: 14:02».

10) Продуктивність

Віртуалізація списків (300 + рядків).

Іконки як спрайти/Lottie (не SVG-зоопарк без потреби).

Debounce фільтрів/пошуку (300-500 мс).

Клієнтські кеші і ETag для дощок/місій.

11) Чесний контент і анти-аб'юз в UI місій

Короткий «Як це працює»: шанс дропа, pity-логіка, капи, без маркетингових туманностей.

Анти-фарм патерн: відзначаємо «різноманітність» - прогрес йде швидше при зміні провайдера/ставки.

Кулдауни на кнопку «Змінити місію» і підказка, коли можна знову.

12) Метрики, які реально важливі

CTR карток місій, Start Rate, Completion Rate, Median TTC.

Equip Rate/Duration для косметики, отриманої через місії.

Leaderboard Engagement: кліки на «до себе», «перейти до профілю», час видимості.

Complaint/Mute Rate на VFX/повідомлення.

Stickiness (DAU/MAU) і D7/D30 uplift у залучених в місії/турніри.

Gini по SP: рівномірність прогресу при схожому часі гри.

13) A/B-ідеї

1. Формат прогрес-бару: числовий + візуальний vs тільки візуальний.

2. Оцінка часу: показувати/не показувати; Вплив на старт.

3. CTA-верстка: одна велика vs дві рівні кнопки.

4. Сортування за замовчуванням: за місцем vs по зоні призів.

5. Поріг підсвічування дедлайну: T-10% vs T-20% часу.

6. «До себе» в лідерборді: кнопка vs завжди закріплений рядок.

14) Приклади JSON-схем (контент → UI)

Картка місії

json
{
"id": "m. s4. provider. diversity",  "title": «Відкрий три провайдери», «summary»: «Зіграйте у 3 різних провайдерів за 30 хвилин», «difficulty»: "medium",  "est_time_min": 25,  "progress": {"current": 2, "target": 3},  "rewards": {"tokens": 10, "cosmetic_drop": {"rarity": "Rare", "p": 0. 1}},  "expires_at": "2025-10-26T18:00:00Z",  "state": "in_progress",  "cta": {"label": «Продовжити», «deeplink»: "app://open/lobby? tab=providers"}
}

Рядок лідерборда

json
{
"rank": 124,  "user": {"id": "u_59211", "name": "SeaFox", "avatar_frame": "legendary. wave"},  "score": 18420,  "league": "Gold I",  "prize_band": "Top 100",  "delta_to_next": 47,  "is_me": false,  "stage": "qualifier",  "ends_at": "2025-10-24T21:00:00Z"
}

15) Мікрокопія (коротко і ясно)

Місія почалася - "Поїхали! Залишилося ≈ 20 хв".

Підстьобування прогресу - «Ще 1 провайдер до нагороди».

Дедлайн - «10% часу, встигнете за один захід».

Перевірка чесності - «Ми перевіряємо результат (до 3 хв) - нагорода збережена».

16) Чек-лист перед релізом

Таблиці читаються на 320 px; є «до себе» і sticky header.
Картки місій зрозумілі «з одного погляду»: мета, час, нагорода, CTA.
Реал-тайм оновлення без флікера; диф-патчі і батч-частота.
Екран «Як це працює»: формули окулярів/кап/рідкості.
Контроль шуму: ліміти VFX/хв, нічний «тихий режим».
Доступність: контраст, не тільки колір, клавіатурна навігація.
Анти-аб'юз: кулдауни «Змінити місію», підсвічування варіативності.
Метрики і A/B-план заведені; логи кліків і синхронізацій.

Сильний UI лідерборда і карток місій - це миттєва читаність, м'яка динаміка, чесна прозорість і контрольований шум. Дайте гравцеві найближчу мету, зрозумілий прогрес і акуратний VFX, тримайте оновлення стабільними, а правила - ясними. Тоді дошка стає двигуном змагання, а картки місій - зручною «одиницею дії», яка системно ростить залученість і утримання.