TOP-10 tehnici vizuale pentru interfața misiunii
Trei lucruri sunt importante în interfața misiunii: claritatea scopului, un sentiment de progres și ritmul victoriilor mici. Mai jos sunt zece trucuri care cresc participarea/finalizarea și de a reduce plângerile fără a supraîncărca ecranul.
1) Progress-scară în loc de benzi „nesfârșite”
Ce este: o scară de T1→T2→Final segmentată cu praguri explicite și puncte de atribuire.
De ce: Este mai ușor pentru creier să înțeleagă pași discreți decât continuu „63% progres”.
Cum să desenezi
3-5 divizii, fiecare semn: „T1 100 puncte”, „T2 300”, „Final 600”.
Afișați recompensele primite direct pe marcajele de bifare (icoane FS/cache/insignă).
Faceți clic pe diviziunea → pop-up „ce au dat/când arde”.
A/B-idee: scară cu pictograme vs scară uscată. Așteptare: + 3-5 p.p. până la finalizarea T1.
2) „Cât a mai rămas” în unități ușor de înțeles
Ce este: alături de progres arătăm echivalentul efortului: puncte → runde → minute.
Formula sub capotă (aprox)- "120 de puncte rămase ≈ 8 runde de €0. 5 ≈ 6-8 minute"
Reguli
Prima dată, apoi runde și bani.
Citiţi mediana ultimelor 10-20 acţiuni ale utilizatorilor (solicitări adaptive).
Actualizați la fiecare 2-3 secunde, fără „salturi”.
A/B idee: "stânga în pahare" vs "stânga în câteva minute. "Așteptare: − 10-15% din ieșirile timpurii.
3) Pas Carduri cu „o ţintă pe ecran”
Ce este: Fiecare pas misiune este o carte separată cu un scop mare și un buton "Cum se numără? ».
Compoziția cardului
Titlul: „Pasul 2 din 3”.
Obiectiv: 1 linie („Colectează 300 de puncte sau 150 de rotiri”).
Progres: Mini scară/cip” 180/300 „.
Butonul „?” → listarea jocurilor incluse/excluse, capace, exemple.
Do: font mare, contrast ierarhic vizual.
Nu: Supraîncărcați cu condiții mici și asteriscuri.
4) SAU obiective: vizual „furculiță” de trei căi
Ce este: în loc de textul „sau/sau” - trei butoane de cale egală (Quick Competition With the plot).
Reguli
Toate cele trei căi sunt vizibile în același timp; activ evidențiat.
Sub fiecare buton - mini-ETA: „~ 8-10 minute”, „1 dată × 20”, „100 rotiri”.
Micro text
"Alegeți o cale convenabilă. Puteți comuta în orice moment - progresul va continua"
A/B idee: file vs buton-dale. Așteptare: + 4-7 p.p. participation_net.
5) Zonele de recompensă în clasament și în misiuni
Ce este: împărțiți tabelul/grila în zone (Top-3/4-10/11-50/51 +), afișați recompensa minimă garantată a fiecărei zone.
Cursant vizual
Plăci de culoare ale zonelor; lângă poziția jucătorului - „2400 puncte stânga la zona 4-10”.
Placa „Garantat: FS × 10” chiar în zona, fără „uita-te în regulile”.
Beneficiu: elimină „plafonul de sticlă”, formează un obiectiv realist.
6) modul Timebox cu o „fereastră de respirație”
Ce este: un cronometru vizual al fazei active (15-20 minute) + o carte „pauză fără penalizare”.
Ecran
Ring timer semnat „Fereastră 20:00”.
La final: animație moale + selectați „Revino mai târziu „/” Extinde ”(dacă este permis).
Mesaj: „Pauza nu va întrerupe dunga”.
Efect: Ridică sesiunile/DA, reduce oboseala.
7) Micro-animații „scânteie” și schelete de încărcare
Ce sunt acestea: flash-uri de lumină/confetti cu progres și recompense; schelete + shimer în locuri cu date.
Ghiduri după mișcare
Durata 200-350 ms, curbe usurinta-out/usurinta-in-out.
Nu suprapuneți conținutul principal, ci „evidențiați”.
Scheletele repetă geometria cărților; shimer 1. 2–1. 6 sec.
A/B idee: cu animație vs fără. Așteptați: − 8-12% din ieșirile timpurii, + CTR pentru a „continua”.
8) Contextual Tula: „Cum se pune?” şi „De ce nu vine?”
Ce este: pictograma „?” de lângă țintă deschide un mini-ghid cu formule, exemple și erori frecvente.
Șablon bloc
„Cum contăm”: formula + 1 exemplu.
„Capace”: pe rată/min/zi (numere).
„Nu faci progrese?” 3 motive + link-uri către jocuri/moduri excluse.
Plus: reduce brusc biletele la suport.
9) Culoare, contrast și iconografie (WCAG + temă întunecată)
Norme de bază
Contrast text minim WCAG AA (4. 5:1), mare - 3:1.
Culoarea ≠ singurul mediu de semnificație: adăugați pictograme/modele.
Icoane: 2-3 forme de bază (stea - recompense, gol - pas/misiune, fulger - „scântei”).
Tema întunecată: fundal # 0F/12, „scântei” strălucire fără RGB otrăvitoare.
Micro copyright
„Recompensa va arde în 12 ore” - întotdeauna lângă butonul „Get”.
10) Stări goale, erori, etichete „arde”
Ce este: Ecrane grijulii atunci când nu există date/misiuni și când lucrurile au mers prost.
Este gol
Ilustrație + "Astăzi este gratuit. Vrei să încerci Meniul Zilei? "
Selectați butonul Misiune → (conduce la selecție).
Greșeli
"Nu a reușit să actualizeze progresul. Repetăm"... + spinner ≤3 sec → "Încercați mai mult "/" Chat "
Statutul „Arde prin X” este afișat pe cardul de premiere și în lista de premii.
Elemente de interfață suplimentare
Cap atins cip: "200/200 puncte/oră - limită. Resetează la 00:00"
Insigna „aproape atinsă”: un indicator galben atunci când ≤150 indică pragul.
tranziții de joc: „Schimba jocul - progresul va continua” (anti-pisa).
Localizare: numere cu spații non-rupere „€1,000”, format de timp 24 de ore, nume de zile după locale.
Micro-texte (pot fi inserate așa cum este)
"120 de puncte rămase ≈ 8 runde de €0. 5 (6-8 minute)"
"Eşti în zona 11-50. Garantat: FS × 10. În sus 4-10 - 2.400 puncte"
"Cap atins: 200 puncte/oră. Resetați la 00:00 (Europa/Kiev) "
„Alegeți o cale: Fast/Competition/Cu un complot - puteți schimba în orice moment”.
Valori pentru experimente UI
Impactul UI asupra pâlniei: CTR „Start”, participation_net, T1/T2 finalizarea.
Comportament: Ieșire timpurie (≤5 min), time-to-T1/T2, trasee de comutare, vizualizare „?” Unelte.
Calitate: reclamații/1k, erori de actualizare a progresului, latență p95.
Valoare: Δ ARPPU (net), Premiu & Bonus/Activ, Net Uplift.
Cadru A/B (scurt)
Unitate: utilizator; lipicios-atribuire; stratificare (platformă/geo/pavilion plătitor).
Ipoteze: scara vs banda; „minute” vs „puncte”; buton-căi vs file; cu „scântei” animație vs fără.
CUPED: pre-session-time ca covariat, fereastră de ≥2 săptămâni cu faze D0-D2/D3-D7.
Lista de verificare a designerului misiunii
- Scara T1→T2→Final cu icoane de atribuire.
- „Cât a mai rămas” bloc în minute/runde.
- Pas cărți, o țintă pe ecran.
- SAU căi - trei butoane vizibile cu ETA.
- Recompensează zonele și mori „garantat”.
- Timebox timer + fereastră de respirație.
- Micro-animații „scânteie”, schelete/shimer.
- „Cum se pune?” + motive „de ce nu merg”.
- Contrast/icoane/temă întunecată; "va arde prin X.
- Stări goale și greșeli binevoitoare.
Mini Case (sintetic)
Înainte: bara de progres fără praguri, textul „120 de puncte rămase”, garda bucală ascunsă, fără stări calde goale.
După: scări cu premii, „8 runde/6-8 minute”, OR-căi-butoane, modul timebox, „?”, „Cap atins”, scântei + schelete, zone de atribuire.
Rezultatul 4 săptămâni vs control: participation_net + 6. 4 pp, finalizare + 10. 8 pp, − de ieșire timpurie 18%, reclamații/1k − 31%, Δ ARPPU (net) + 1 €. 7 при Premiu & Bonus/Activ + €0. 5.
O interfață de misiune bună este disciplina vizuală: pași în loc de „mlaștină procentuală”, indicii de efort specifice, recompense vizibile și dinamică moale. Adăugați în accesibilitate, tulas clar, timeboxes și animații îngrijite - și misiunile vor începe să lucreze ca un „ritm de victorii mici”, mai degrabă decât o dungă lungă și plictisitoare de progres.