Torrent Gear

UI Leaderboard and Mission Cards: Best Practices

1) Why it all: UI goals

Leaderboard: instantly explain "who is where" and why to play next; show the nearest target (+ N points before ap).

Mission cards: turn long rules into an understandable "unit of action" for 10-30 minutes.

2) Leadership Board Information Hierarchy

Minimum set of columns:

1. Place (#) with a stable width and a large number.

2. Player (avatar/frame/title, short nickname) - clickable → profile.

3. Points/rating metric (SP/MMR/event points) - align to the right.

4. Prize/rank zone (rarity icon/award range).

5. Time/stage (live/qualifier/finals), end timer.

Patterns:

Highlight your line (sticky row + "come back to me").
"Threshold to target": small die "− 48 SP to TOP-100."
Tie gluing ("T-10" for identical points).

3) Control and navigation

Filters: league/division, region, friends, "just my provider."

Sort by location (default) , by points, by entry time, by prize zone.

Pagination vs infinite scrolling:

desktop - pagination + "to yourself," mobile - endless scrolling, but with "to the beginning/to yourself."
Jump-to Rank: a rank input field for instant transition (important for scale boards).

4) Live updates (no twitching)

Diff updates: we change only lines that have actually moved.

Animation of line movement: 120-200 ms, easing-out; no jumps.

Anti-flicker: batch updates every 1-2 seconds (no more often).

Optimistic updates: add points locally and mark "synchronization...."

5) Integrity and safety at UI leaderboard

Explanation of the rules: button "How are glasses counted?" next to the title.

Anti-bullying: mask part of the nickname (option), complaint about a toxic name - 1 click.

Marker of suspicious accounts: hidden from others; player - "your points are checked."

Division separation: visually different league badges so that the strong ones do not mix with the starters.

6) Anatomy of a mission card (one-glance design)

Title (≤ 40-50 characters), mission type icon.

Short description (what to do, where, for how much).

Progress bar with number/percentage + time estimate (≈ 20-25 min).

Difficulty (1-3 points) and rarity of reward (color/face).

Rewards: tokens/cosmetics (small miniatures), without "monetary" subtext.

Term: timer until expiration with soft color (orange/red in the last 10%).

CTA: "Start "/" Continue "/" Pick up" - one main button.

Secondary: "Change mission" (if allowed), "More" (modal rules).

7) Mission card states

Locked: gray, with the prompt "will open after level 7 "; CTA = "What do you need? ».

Available: color by type; CTA = "Start."

In-progress: progress bar active, CTA = "Continue."

Completed: green check; CTA = "Pick up" (effect ≤ 1 sec).

Expired: pale; CTA = "Hide "/" Repeat in Season N. "

On hold (honesty check): yellow die "result check 1-3 minutes."

8) Visual language and accessibility

Rarity colors: Common (neutral), Rare (blue), Epic (violet), Legendary (gold), Mythic (rainbow accent).

Semantic colors: success/progress - green, warnings - amber, deadlines - red.

Contrast ≥ 4. 5:1, fonts ≥ 14-16 px on mobile.

Everything important is not only in color (icons/patterns).

Thrifty VFX: 0. 6–1. 2 c, without control overlap.

Anavar: table → cards (2 columns tablet, 1 column phone); fixed headers.

9) Loading states, voids and errors

Skeletons for tables and cards (3-5 lines/tiles).

Empty state: useful text + "Get a launch mission."

Network errors: understandable, with "Repeat"; offline - show the cache and mark "last update: 14:02."

10) Performance

List virtualization (300 + rows).

Icons as sprites/Lottie (not an SVG zoo unnecessarily).

Debounce filters/search (300-500 ms).

Client caches and ETag for boards/missions.

11) Honest content and anti-abuse in UI missions

Short "How it works": drop chance, pity logic, mouthguards, no marketing nebulae.

Anti-farm pattern: note "diversity" - progress is faster when changing provider/bet.

Cooldowns on the "Change Mission" button and a hint when you can again.

12) Metrics that really matter

CTR mission cards, Start Rate, Completion Rate, Median TTC.

Equip Rate/Duration for mission-derived cosmetics.

Leaderboard Engagement: clicks on "to yourself," "go to profile," visibility time.

Complaint/Mute Rate on VFX/notifications.

Stickiness (DAU/MAU) and D7/D30 uplift for those involved in missions/tournaments.

Gini by SP: evenness of progress at similar game times.

13) A/B ideas

1. Progress bar format: numeric + visual vs visual only.

2. Time evaluation: show/do not show; impact on start.

3. CTA layout: one large vs two equal buttons.

4. Default sorting: by place vs by prize area.

5. Deadline backlight threshold: T-10% vs T-20% of the time.

6. "To yourself" in the leader board: the vs button is always a fixed string.

14) Examples of JSON schemes (content → UI)

Mission Card

json
{
"id": "m. s4. provider. diversity," "title": "Open three providers," "summary": "Play with 3 different providers in 30 minutes," "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": "Continue," "deeplink": "app ://open/lobby? tab=providers"}
}

Leaderboard row

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) Microcopy (short and clear)

The mission began - "Let's go! ≈ 20 minutes left."

Encouraging progress - "1 more provider before the award."

Deadline - "10% of the time, you will have time in one go."

Honesty check - "We check the result (up to 3 minutes) - the reward is saved."

16) Pre-release checklist

Tables readable at 320 px; there is "to yourself" and sticky header.
Mission cards are clear "at a glance": goal, time, reward, CTA.
Real time update without flicker; diff patches and butch frequency.
The How It Works screen: point/cap/rarity formulas.
Noise control: VFX limits/min, night quiet mode.
Accessibility: contrast, not only color, keyboard navigation.
Anti-abuse: cooldowns "Change mission," highlighting variability.
Metrics and A/B plan established; click and sync logs.

A strong UI of leaderboard and mission cards is instant readability, soft dynamics, honest transparency and controlled noise. Give the player the nearest goal, understandable progress and neat VFX, keep updates stable and rules clear. Then the board becomes the engine of the competition, and the mission cards become a convenient "unit of action," which systematically increases engagement and retention.