TOP-10 techniki wizualne interfejsu misji

Trzy rzeczy są ważne w interfejsie misji: jasność celu, poczucie postępu i rytm małych zwycięstw. Poniżej znajduje się dziesięć sztuczek, które zwiększają udział/zakończenie i zmniejszają reklamacje bez przeciążania ekranu.

1) Drabina postępu zamiast paska „bez końca”

Co to jest: segmentowany T1 → T2 → Ostateczna skala z wyraźnymi progami i punktami.

Dlaczego: Łatwiej jest mózgowi zrozumieć dyskretne kroki niż ciągły „63% postęp”.

Jak rysować

3-5 dział, podpisać każdy: „T1 100 punktów”, „T2 300”, „Final 600”.

Pokaż otrzymane nagrody bezpośrednio na znakach kleszczy (FS/cache/badge icons).

Kliknij na podział → pop-up „co dali/kiedy spali”.

A/B-idea: drabina z ikonami vs sucha skala. Oczekiwanie: + 3-5 p.p. na zakończenie T1.

2) „Ile zostało” w zrozumiałych jednostkach

Co to jest: obok postępu pokazujemy odpowiednik wysiłku: punkty → rundy → minuty.

Wzór pod okapem (ok)

"120 punktów pozostawiło 8 rund po 0 €. 5 μ6-8 minut"

Zasady

Pierwszy raz, potem obchody i pieniądze.

Przeczytaj medianę ostatnich 10-20 działań użytkownika (motywy adaptacyjne).

Aktualizować co 2-3 sekundy, bez „skoki”.

Pomysł A/B: „zostawił w okularach” vs' pozostawiony w ciągu kilku minut. "Oczekiwanie: − 10-15% wczesnych wyjść.

3) Karty krok z „jeden cel na ekranie”

Co to jest: Każdy krok misji jest osobną kartą z dużym celem i przyciskiem "Jak to się liczy? ».

Skład karty

Tytuł: „Etap 2 z 3”.

Bramka: 1 linia („Zbierz 300 punktów lub 150 spinów”).

Postęp: Mini drabina/” 180/300„ chip.

Przycisk „?” → lista włączonych/wykluczonych gier, czapki, przykłady.

Zrobić: duża czcionka, wizualny kontrast hierarchiczny.

Nie: Przeciążenie małymi warunkami i gwiazdkami.

4) Cele LUB: wizualny „widelec” trzech ścieżek

Co to jest: zamiast tekstu „lub/lub” - trzy równe przyciski ścieżki (Quick Competition With the plot).

Zasady

Wszystkie trzy ścieżki są widoczne w tym samym czasie; aktywne podkreślone.

Pod każdym przyciskiem - mini-ETA: „~ 8-10 minut”, „1 czas × 20”, „100 spinów”.

Tekst mikro

"Wybierz wygodną ścieżkę. Możesz przełączyć się w każdej chwili - postęp będzie kontynuowany"

Idea A/B: zakładki vs płytki przyciskowe. Oczekiwanie: + 4-7 p.p. participation_net.

5) Strefy nagród na tablicy liderów i w misjach

Co to jest: podzielić tabelę/siatkę na strefy (Top-3/4-10/11-50/51 +), pokazać minimalną gwarantowaną nagrodę dla każdej strefy.

Uczący się wizualnie

Płyty kolorowe stref; w pobliżu pozycji gracza - „2400 punktów w lewo do strefy 4-10”.

Płyta „Gwarantowane: FS × 10” prawo w strefie, bez „spójrz w zasady”.

Korzyść: usuwa „szklany sufit”, tworzy realistyczny cel.

6) Moduł Timebox z „oknem oddechowym”

Co to jest: zegar wizualny fazy aktywnej (15-20 minut) + karta „pauza bez kary”.

Ekran

Timer pierścienia podpisał „Okno 20:00”.

Na końcu: animacja miękka + wybierz „Wróć później „/” Expand ”(jeśli jest to dozwolone).

Wiadomość: „Pauza nie przerwie smugi”.

Efekt: podnosi sesje/DAU, zmniejsza zmęczenie.

7) Micro-animacje „iskra” i załadunek szkieletów

Co to są: latarki świetlne/konfetti z postępem i nagrodami; szkielety + shimer w miejscach z danymi.

Przewodniki ruchem

Czas trwania 200-350 ms, krzywe ease-out/ease-in-out.

Nie nakładaj się na główną zawartość, ale „podkreślaj”.

Szkielety powtarzają geometrię kart; shimer 1. 2–1. 6 sekund.

Pomysł A/B: z animacją vs bez. Odczekać: − 8-12% wczesnych wyjść, + CTR do „kontynuować”.

8) Kontekst Tula: „Jak to się liczy?” i „Dlaczego nie nadchodzi?”

Co to jest: ikona „?” obok celu otwiera mini-przewodnik z formułami, przykładami i częstymi błędami.

Szablon bloku

„Jak policzyć”: wzór + 1 przykład.

„Czapki”: za szybkość/min/dzień (liczby).

„Nie robisz postępów?” 3 powody + linki do wykluczonych gier/trybów.

Plus: gwałtownie zmniejsza bilety na wsparcie.

9) Kolor, kontrast i ikonografia (WCAG + ciemny motyw)

Podstawowe zasady

Minimalny kontrast tekstu WCAG AA (4. 5:1), duży - 3:1.

Kolor i jedyne medium o znaczeniu: dodać ikony/wzory.

Ikony: 2-3 podstawowe formy (gwiazda - nagrody, cel - krok/misja, błyskawica - „iskry”).

Ciemny motyw: tło # 0F/12, „iskry” świecą bez trującego RGB.

Mikro prawa autorskie

„Nagroda spłonie za 12 godzin” - zawsze obok przycisku „Get”.

10) Puste stany, błędy, etykiety „palą”

Co to jest: przemyślane ekrany, gdy nie ma danych/misje i gdy rzeczy poszły źle.

Jest pusty

Ilustracja + "Dziś jest za darmo. Chcesz spróbować menu dnia? "

Wybierz → Przycisk misji (prowadzi do zaznaczenia).

Błędy

"Nie udało się zaktualizować postępu. Powtarzamy"... + spinner ≤ 3 sek → "Spróbuj więcej "/" Czat "

Status „Spalić przez X” jest wyświetlany na karcie nagrody i na liście nagród.

Dodatkowe elementy interfejsu

Czapka osiągnęła chip: "200/200 punktów/godzinę - limit. Zresetuj o 00:00"

Odznaka „prawie osiągnięte”: żółty wskaźnik, gdy ≤ 150 punktów do progu.

Przejścia do gry: „Zmień grę - postęp będzie kontynuowany” (anti-grind).

Lokalizacja: numery z niezniszczalnymi przestrzeniami „€1,000”, 24-godzinny format czasu, nazwy dni według lokalizacji.

Mikro-teksty (można wstawić tak jak jest)

"120 punktów pozostawiło 8 rund po 0 €. 5 (6-8 minut)"

"Jesteś w strefie 11-50. Gwarantowane: FS × 10. Up 4-10 - 2400 punktów"

"Cap osiągnął: 200 punktów/godzinę. Reset o 00:00 (Europa/Kijów) "

„Wybierz ścieżkę: Szybka/Konkurencja/Z działką - możesz się zmienić w dowolnym momencie”.

Metryka eksperymentów UI

Wpływ interfejsu na lejek: CTR „Start”, participation_net, T1/T2 ukończenie.

Zachowanie: Wczesne wyjście (≤ 5 min), time-to-T1/T2, ścieżki szybkości przełączania, oglądanie „?” Narzędzia.

Jakość: reklamacje/1k, błędy aktualizacji postępów, opóźnienie p95.

Wartość:, Prize & Bonus/Active, Net Uplift.

Ramka A/B (krótka)

Jednostka: użytkownik; przydział lepki; stratyfikacja (platforma/geo/płatnik-bandera).

Hipotezy: drabina vs pas; „minuty” vs „punkty”; ścieżki przyciskowe vs zakładki; z animacją „iskry” vs bez.

CUPED: czas poprzedzający sesję jako klucz; ≥ 2 tygodniowe okno z D0-D2/D3-D7 fazami.

Lista kontrolna projektanta misji

Drabina T1 → T2 → Finał z ikonami nagród.
„Ile zostało” blok w minutach/rundach.
Karty krokowe, jeden cel na ekranie.
LUB ścieżki - trzy widoczne przyciski z ETA.
Strefy nagród i umrzeć „gwarantowane”.
Timebox timer + okno oddechowe.
Mikro-animacje „iskra”, szkielety/shimer.
„Jak to się liczy?” + powody „dlaczego nie iść”.
Kontrast/ikony/ciemny motyw; „spłonie przez X”.
Puste stany i życzliwe błędy.

Mini Case (syntetyczny)

Przed: pasek postępu bez progów, tekst „120 punktów w lewo”, ukryte ustniki, brak ciepłych pustych stanów.

Po: schody z nagrodami, „8 rund/6-8 minut”, OR-paths-buttons, timebox module, „?”, „Cap dotarł”, iskry + szkielety, strefy nagród.

Wynik 4 tygodni vs kontrola: participation_net + 6. 4 pp, zakończenie + 10. 8 pp, Wczesne wyjście - 18%, skargi/1k − 31%, ARPPU (netto) + 1 €. 7 мра Nagroda & Bonus/Active + €0. 5.

Dobrym interfejsem misji jest dyscyplina wizualna: kroki zamiast „procentowego bagna”, konkretne wskazówki wysiłku, widoczne nagrody i miękka dynamika. Dodaj do dostępności, jasne tulasy, okulary i schludne animacje - a misje zaczną działać jako „rytm małych zwycięstw”, a nie długi i nudny ciąg postępu.