UI Leaderboard und Missionskarten: Best Practices

1) Warum das alles: UI Ziele

Leaderboard: Erklären Sie sofort „Wer ist wo“ und warum Sie weiterspielen sollten; das nächstgelegene Ziel anzeigen (+ N Punkte bis apa).

Missionskarten: Verwandeln Sie lange Regeln für 10-30 Minuten in eine verständliche „Aktionseinheit“.

2) Führungskräfteinformationshierarchie

Mindestsatz von Spalten:

1. Ort (#) mit stabiler Breite und großer Ziffer.

2. Spieler (Avatar/Rahmen/Titel, kurzer Nickname) - klickbares → Profil.

3. Punkte/Bewertungsmetrik (SP/MMR/Eventpunkte) - Rechts ausrichten.

4. Preis/Rangzone (Seltenheitssymbol/Belohnungsbereich).

5. Zeit/Stufe (live/qualifier/finals), Endzeitgeber.

Muster:

Markieren Sie Ihre Zeile (sticky row + „back to me“).
„Schwelle zum Ziel“: ein kleiner Stempel „− 48 SP zu TOP-100“.
Kleben von Unentschieden („T-10“ für identische Punkte).

3) Steuerung und Navigation

Filter: Liga/Division, Region, Freunde, „nur mein Anbieter“.

Sortierung: nach Ort (nach Flehen.) , nach Punkten, nach Eintrittszeit, nach Gewinnzone.

Pagination vs unendliches Scrollen:

Desktop - Pagination + „zu sich selbst“, Mobile - endloses Scrollen, aber mit „zum Anfang/zu sich selbst“.
Jump-to-Rank: Ein Rank-Eingabefeld für den sofortigen Übergang (wichtig für Scale-Boards).

4) Echtzeit-Updates (ohne „derganya“)

Diff-Updates: Wir ändern nur die Zeilen, die sich tatsächlich verschoben haben.

Animation der Zeilenbewegung: 120-200ms, easing-out; Keine Sprünge.

Anti-flicker: batch-updates alle 1-2 Sekunden (nicht häufiger).

Optimistische Updates: Lokal fügen wir Punkte hinzu und markieren „Synchronisation“....

5) Ehrlichkeit und Sicherheit in der Leaderboard UI

Erklärung der Regeln: Button „Wie zählt die Brille?“ neben der Überschrift.

Anti-Mobbing: Maskieren Sie einen Teil des Nicks (Option), eine Beschwerde über einen giftigen Namen - 1 Klick.

Marker für verdächtige Konten: versteckt vor anderen; Spieler - „Ihre Punkte werden überprüft“.

Teilung der Sparten: optisch verschiedene Abzeichen der Ligen, damit sich die Starken nicht mit den Start-Abzeichen vermischen.

6) Anatomie der Missionskarte (Ein-Blick-Design)

Titel (≤ 40-50 Zeichen), Icon des Missionstyps.

Kurze Beschreibung (was zu tun ist, wo, für wie viel).

Fortschrittsbalken c Zahl/Prozent + Zeitschätzung (≈ 20-25 min).

Komplexität (1-3 Punkte) und Seltenheit der Belohnung (Farbe/Facette).

Belohnungen: Token/Kosmetik (kleine Miniaturen), ohne „monetären“ Subtext.

Laufzeit: Timer bis Ablauf mit weicher Farbe (orange/rot in den letzten 10%).

CTA: „Start “/„ Weiter “/„ Abholen“ - ein Hauptknopf.

Sekundär: „Mission ändern“ (wenn erlaubt), „Weitere Informationen“ (Regelmodal).

7) Status der Missionskarten

Gesperrt: grau, mit dem Hinweis „öffnet sich nach Level 7 „; CTA = "Was wird benötigt? ».

Verfügbar: Farbe nach Typ; CTA = „Start“.

In-progress: Fortschrittsbalken aktiv, CTA = „Weiter“.

Abgeschlossen: Grüner Scheck; CTA = „Pick up“ (Effekt ≤ 1 Sekunde).

Expired: blass; CTA = „Ausblenden „/„ Wiederholen in Saison N “.

On hold (Ehrlichkeitsprüfung): gelber Stempel „Ergebnisprüfung 1-3 min“.

8) Visuelle Sprache und Zugänglichkeit

Farben nach Seltenheit: Allgemein (neutral), Selten (blau), Episch (Veilchen), Legendär (Gold), Mythisch (Regenbogen-Akzent).

Semantische Farben: Erfolg/Fortschritt ist grün, Warnungen sind bernsteinfarben, Fristen sind rot.

Kontrast ≥ 4. 5:1, Schriftarten ≥ 14-16 px auf dem Handy.

Alles Wichtige - nicht nur die Farbe (Symbole/Muster).

Sparsamer VFX: 0. 6–1. 2 c, ohne Überdeckung der Kontrolle.

• Tabelle → Karten (2 Spalten Tablet, 1 Spalte Telefon); Titel gesichert.

9) Ladezustände, Leerstellen und Fehler

Skeletons für Tabellen und Karten (3-5 Zeilen/Tiles).

Leerer Zustand: Nützlicher Text + „Get Starting Mission“.

Netzwerkfehler: verständlich, mit „Wiederholen“; offline - Wir zeigen den Cache an und markieren das „letzte Update: 14:02“.

10) Produktivität

Virtualisierung von Listen (300 + Zeilen).

Icons wie Sprites/Lottie (kein SVG-Zoo ohne Not).

Debounce Filter/Suche (300-500 ms).

Client-Caches und ETag für Boards/Missionen.

11) Ehrliche Inhalte und Anti-Missbrauch in UI-Missionen

Kurz „Wie es funktioniert“: Dropa-Chance, Pity-Logik, Mundschutz, keine Marketing-Nebel.

Anti-Pharm-Muster: Wir markieren „Vielfalt“ - der Fortschritt geht schneller, wenn der Anbieter/die Rate gewechselt wird.

Kuldowns auf den Button „Mission ändern“ und einen Hinweis, wann man wieder kann.

12) Metriken, die wirklich wichtig sind

CTR von Missionskarten, Startrate, Abschlussrate, Median TTC.

Equip Rate/Duration für Kosmetik durch Missionen erhalten.

Leaderboard Engagement: Klicks auf „zu sich selbst“, „zum Profil gehen“, Sichtbarkeitszeit.

Complaint/Mute Rate auf VFX/Benachrichtigungen.

Stickiness (DAU/MAU) und Uplift- D7/D30 bei den an Missionen/Turnieren Beteiligten.

Gini durch SP: Gleichmäßigkeit des Fortschritts bei ähnlichen Spielzeiten.

13) A/B-Ideen

1. Progress-Bar-Format: numerisch + visuell vs nur visuell.

2. Zeitschätzung: anzeigen/nicht anzeigen; Einfluss auf den Start.

3. CTA-Layout: ein großer vs zwei gleiche Tasten.

4. Standardsortierung: nach Ort vs nach Gewinnzone.

5. Stichtagsbeleuchtungsschwelle: T-10% vs T-20% der Zeit.

6. „To yourself“ im Leaderboard: Button vs immer fixierte Zeile.

14) Beispiele für JSON-Schemata (Inhalt → UI)

Missionskarte

json
{
"id": "m. s4. provider. diversity „,“ title „:“ Entdecke drei Anbieter „,“ summary „:“ Spiele mit 3 verschiedenen Anbietern in 30 Minuten „,“ 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-Zeile

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) Mikrokopie (kurz und deutlich)

Die Mission begann - "Auf geht's! Es bleiben ≈ noch 20 Minuten".

Fortschrittsschub - „Noch 1 Anbieter vor der Vergabe“.

Deadline - „10% der Zeit, Sie werden Zeit in einem Lauf haben“.

Ehrlichkeitsprüfung - „Wir überprüfen das Ergebnis (bis zu 3 min) - die Belohnung bleibt erhalten“.

16) Checkliste vor Veröffentlichung

Die Tabellen sind bei 320 px lesbar; Es gibt „zu sich selbst“ und sticky header.
Missionskarten sind „auf einen Blick“ verständlich: Ziel, Zeit, Belohnung, CTA.
Real-Time-Updates ohne Flicker; Diff-Patches und Batch-Frequenz.
Bildschirm „Wie es funktioniert“: Brillen/Cap/Seltenheitsformeln.
Noise Control: VFX/min Limits, Night „Silent Mode“.
Zugänglichkeit: Kontrast, nicht nur Farbe, Tastaturnavigation.
Anti-Missbrauch: Kuldowns „Change Mission“, Hervorhebung der Variabilität.
Metriken und A/B-Plan werden erstellt; Klick- und Synchronisationslogs.

Die starke Benutzeroberfläche des Leaderboards und der Missionskarten ist sofortige Lesbarkeit, weiche Dynamik, ehrliche Transparenz und kontrolliertes Rauschen. Geben Sie dem Spieler das nächstgelegene Ziel, einen verständlichen Fortschritt und einen ordentlichen VFX, halten Sie die Updates stabil und die Regeln klar. Dann wird das Board zum Motor des Wettbewerbs und die Missionskarten zu einer praktischen „Aktionseinheit“, die Engagement und Bindung systematisch erhöht.