TOP-10 visual techniques for the mission interface
Three things are important in the mission interface: clarity of purpose, a sense of progress, and the rhythm of small victories. Below are ten tricks that increase participation/completion and reduce complaints without overloading the screen.
1) Progress-ladder instead of "endless" strip
What it is: a segmented T1→T2→Final scale with explicit thresholds and award points.
Why: It's easier for the brain to understand discrete steps than continuous "63% progress."
How to draw
3-5 divisions, sign each: "T1 100 points," "T2 300," "Final 600."
Show the received rewards directly on the tick marks (FS/cache/badge icons).
Click on division → pop-up "what they gave/when it burns."
A/B-idea: ladder with icons vs dry scale. Waiting: + 3-5 p.p. to completion T1.
2) "How much is left" in understandable units
What is it: next to the progress we show the equivalent of effort: points → rounds → minutes.
Formula under hood (approx)- "120 points left ≈ 8 rounds of €0.5 ≈ 6-8 minutes."
Rules
First time, then rounds and money.
Read the median of the last 10-20 user actions (adaptive prompts).
Update every 2-3 seconds, without "jumps."
A/B idea: "left in glasses" vs "left in minutes." Waiting: − 10-15% of early exits.
3) Step Cards with "one target per screen"
What it is: Each mission step is a separate card with a large goal and a button "How does it count? ».
Card composition
Title: "Step 2 of 3."
Goal: 1 line ("Collect 300 points or 150 spins").
Progress: Mini ladder/" 180/300 "chip.
Button "?" → listing of included/excluded games, caps, examples.
Do: large font, visual hierarchical contrast.
Don't: Overload with small conditions and asterisks.
4) OR targets: visual "fork" of three paths
What is it: instead of the text "or/or" - three equal path buttons (Quick Competition With the plot).
Rules
All three paths are visible at the same time; active highlighted.
Under each button - mini-ETA: "~ 8-10 minutes," "1 time × 20," "100 spins."
Micro text
"Choose a convenient path. You can switch at any time - progress will continue."
A/B idea: tabs vs button-tiles. Waiting: + 4-7 p.p. participation_net.
5) Reward zones on leaderboard and in missions
What is it: divide the table/grid into zones (Top-3 / 4-10 / 11-50 / 51 +), show the minimum guaranteed reward of each zone.
Visual learner
Color plates of zones; near the player's position - "2400 points left to zone 4-10."
Plate "Guaranteed: FS × 10" right in the zone, without "look in the rules."
Benefit: removes the "glass ceiling," forms a realistic goal.
6) Timebox module with a "breathing window"
What is it: a visual timer of the active phase (15-20 minutes) + a "pause without penalty" card.
Screen
Ring timer signed "Window 20: 00."
At the end: soft animation + select "Come back later "/" Extend" (if allowed).
Message: "Pause will not interrupt the streak."
Effect: Raises Sessions/DAU, reduces fatigue.
7) Micro-animations "spark" and skeletons loading
What are these: light flashes/confetti with progress and rewards; skeletons + shimer in places with data.
Guides by motion
Duration 200-350 ms, curves ease-out/ease-in-out.
Do not overlap the main content, but "highlight."
Skeletons repeat the geometry of the cards; shimer 1. 2–1. 6 sec.
A/B idea: with animation vs without. Wait: − 8-12% of early exits, + CTR to "continue."
8) Contextual Tula: "How does it count?" and "Why isn't it coming?"
What is it: the "?" icon next to the target opens a mini-guide with formulas, examples and frequent errors.
Block template
"How do we count": formula + 1 example.
"Caps": per rate/min/day (numbers).
"Not making progress?" 3 reasons + links to excluded games/modes.
Plus: sharply reduces tickets to support.
9) Color, Contrast & Iconography (WCAG + Dark Theme)
Basic rules
Text contrast minimum WCAG AA (4. 5:1), large - 3:1.
Color ≠ the only medium of meaning: add icons/patterns.
Icons: 2-3 basic forms (star - rewards, goal - step/mission, lightning - "sparks").
Dark theme: background # 0F/12, "sparks" glow without poisonous RGB.
Micro copyright
"The reward will burn in 12 hours" - always next to the "Get" button.
10) Empty states, errors, labels "burn"
What it is: Thoughtful screens when there's no data/missions and when things have gone wrong.
It's empty
Illustration + "Today is free. Want to try Menu of the Day? "
Select → Mission button (leads to selection).
Mistakes
"Failed to update progress. We repeat..." + spinner ≤3 sec → "Try more "/" Chat."
The status "Burn through X" is displayed on the award card and in the award list.
Additional interface elements
Cap reached chip: "200/200 points/hour - limit. Reset at 00:00."
The badge "almost reached": a yellow indicator when ≤150 points to the threshold.
Game transitions: "Change the game - progress will continue" (anti-grind).
Localization: numbers with non-breaking spaces "€1,000," 24-hour time format, names of days by locale.
Micro-texts (can be inserted as is)
"120 points left ≈ 8 rounds of €0.5 (6-8 minutes)."
"You're in the 11-50 zone. Guaranteed: FS × 10. Up 4-10 - 2,400 points"
"Cap reached: 200 points/hour. Reset at 00:00 (Europe/Kyiv)"
"Choose a path: Fast/Competition/With a plot - you can change at any time."
Metrics for UI experiments
UI impact on the funnel: CTR "Start," participation_net, T1/T2 completion.
Behavioral: Early-exit (≤5 min), time-to-T1/T2, switch-rate paths, viewing "?" Tools.
Quality: complaints/1k, progress update errors, latency p95.
Value: Δ ARPPU (net), Prize & Bonus/Active, Net Uplift.
A/B frame (short)
Unit: user; sticky-assignment; stratification (platform/geo/payer-flag).
Hypotheses: ladder vs lane; "minutes" vs "points"; button-paths vs tabs; with "sparks" animation vs without.
CUPED: pre-session-time as covariate; ≥2 week window with D0-D2/D3-D7 phases.
Mission Designer Checklist
- Ladder T1→T2→Final with award icons.
- "How much is left" block in minutes/rounds.
- Step cards, one target per screen.
- OR paths - three visible buttons with ETA.
- Reward zones and die "guaranteed."
- Timebox timer + breathing window.
- Micro-animations "spark," skeletons/shimer.
- "How does it count?" + reasons "why not go."
- Contrast/icons/dark theme; "will burn through X."
- Empty states and benevolent mistakes.
Mini Case (Synthetic)
Before: progress bar without thresholds, text "120 points left," hidden mouthguards, no warm empty states.
After: stairs with awards, "8 rounds/6-8 minutes," OR-paths-buttons, timebox module, "?," "Cap reached," sparks + skeletons, award zones.
Result of 4 weeks vs control: participation_net + 6. 4 pp, completion + 10. 8 pp, Early-exit − 18%, complaints/1k − 31%, Δ ARPPU (net) + €1. 7 при Prize&Bonus/Active +€0. 5.
A good mission interface is visual discipline: steps instead of "percentage swamp," specific effort clues, visible rewards, and soft dynamics. Add in accessibility, clear tulas, timeboxes and neat animations - and missions will start to work as a "rhythm of small victories" rather than a long and boring streak of progress.