Görev arayüzü için TOP-10 görsel teknikler

Görev arayüzünde üç şey önemlidir: Amacın netliği, ilerleme hissi ve küçük zaferlerin ritmi. Aşağıda, katılımı/tamamlamayı artıran ve ekranı aşırı yüklemeden şikayetleri azaltan on püf noktası bulunmaktadır.

1) "Sonsuz" şerit yerine ilerleme merdiveni

Nedir: Açık eşikler ve ödül puanları ile bölümlenmiş bir T1 - T2 - Final ölçeği.

Neden: Beynin ayrı adımları anlaması, sürekli "%63 ilerleme'den daha kolaydır.

Nasıl çizilir

3-5 bölüm, her birini imzalayın: "T1 100 puan", "T2 300", "Final 600".

Alınan ödülleri doğrudan onay işaretleri (FS/önbellek/rozet simgeleri) üzerinde gösterin.

Division> "what they gave/when it burns" bölümüne tıklayın.

A/B-fikir: kuru ölçek vs simgeleri ile merdiven. Bekleme: + 3-5 p.p. tamamlama T1.

2) Anlaşılabilir birimlerde "Ne kadar kaldı"

Bu nedir: ilerlemenin yanında, çabanın eşdeğerini gösteriyoruz: puanlar - turlar - dakikalar.

Başlık altında formül (yaklaşık)

"120 puan kaldı ≈ 8 tur 0 €. 5 ≈ 6-8 dakika"

Kurallar

İlk kez, sonra mermi ve para.

Son 10-20 kullanıcı eyleminin medyanını okuyun (uyarlanabilir istemler).

"Atlamalar" olmadan her 2-3 saniyede bir güncelleyin.

A/B fikri: "Gözlükle sola" vs "dakikalar içinde sola. Bekleme: Erken çıkışların − %10-15'i.

3) "Ekran başına bir hedef" olan Adım Kartları

Nedir: Her görev adımı, büyük bir hedefi ve bir düğmesi olan ayrı bir karttır "Nasıl sayılır? ».

Kart kompozisyonu

Başlık: "Adım 2/3".

Hedef: 1 çizgi ("300 puan veya 150 dönüş topla").

İlerleme: Mini merdiven/" 180/300" çip.

Düğme "?" - dahil edilen/hariç tutulan oyunların, kapakların, örneklerin listesi.

Do: büyük yazı tipi, görsel hiyerarşik kontrast.

Yapma: Küçük koşullar ve yıldız işaretleri ile aşırı yükleme.

4) OR hedefleri: üç yolun görsel "çatalı"

Nedir: metin yerine "veya/veya" - üç eşit yol düğmesi (Arsa ile Hızlı Rekabet).

Kurallar

Her üç yol da aynı anda görülebilir; aktif vurgulanmış.

Her düğmenin altında - mini-ETA: "~ 8-10 dakika", "1 kez × 20", "100 dönüş".

Mikro metin

"Uygun bir yol seçin. İstediğiniz zaman geçiş yapabilirsiniz - ilerleme devam edecektir"

A/B fikri: sekmeler ve düğme döşemeleri. Bekleme: + 4-7 p.p. participation_net.

5) Liderlik tablosunda ve görevlerde ödül bölgeleri

Nedir: Tabloyu/ızgarayı bölgelere bölün (Top-3/4-10/11-50/51 +), her bölgenin minimum garantili ödülünü gösterin.

Görsel öğrenen

Bölgelerin renk plakaları; Oyuncunun pozisyonuna yakın - "4-10 bölgesine 2400 puan kaldı".

Plaka "Garantili: FS × 10" tam bölgede, "kurallara bakmadan".

Faydası: "cam tavanı" kaldırır, gerçekçi bir hedef oluşturur.

6) Bir "nefes penceresi'ile Timebox modülü

Nedir: Aktif fazın görsel bir zamanlayıcısı (15-20 dakika) + bir "ceza olmadan duraklat" kartı.

Ekran

Zil zamanlayıcısı "Pencere 20:00'diye imzalanmış.

Sonunda: yumuşak animasyon + "Daha sonra gel "/" Uzat'ı seçin (izin verilirse).

Mesaj: "Duraklatma çizgiyi kesmez".

Etkisi: Seansları/DAU'yu yükseltir, yorgunluğu azaltır.

7) Mikro animasyonlar "kıvılcım've iskeletler yükleme

Bunlar nelerdir: ilerleme ve ödüller ile ışık yanıp söner/konfeti; İskeletler + verilerin bulunduğu yerlerde shimer.

Harekete göre kılavuzlar

Süre 200-350 ms, eğriler çıkış hızı/giriş hızı.

Ana içeriği üst üste getirmeyin, ancak "vurgulayın".

İskeletler kartların geometrisini tekrarlar; Shimer 1. 2–1. 6 saniye.

A/B fikri: animasyon vs olmadan. Bekleyin: Erken çıkışların %8-12'sini −, + TO "devam etmek" için.

8) Bağlamsal Tula: "Nasıl sayılır?" Ve "Neden gelmiyor?"

Nedir: hedefin yanındaki "?" simgesi, formülleri, örnekleri ve sık hataları içeren bir mini kılavuz açar.

Blok şablonu

"Nasıl sayıyoruz": formül + 1 örneği.

"Caps": oran/dak/gün başına (sayılar).

"İlerleme olmuyor mu?" 3 neden + hariç tutulan oyunlara/modlara bağlantılar.

Artı: Destek biletlerini keskin bir şekilde azaltır.

9) Renk, Kontrast ve İkonografi (WCAG + Koyu Tema)

Temel kurallar

Metin kontrastı minimum WCAG AA (4. 5:1), büyük - 3:1.

Renk ≠ tek anlam aracıdır: simgeler/desenler ekleyin.

Simgeler: 2-3 temel form (yıldız - ödüller, hedef - adım/görev, yıldırım - "kıvılcımlar").

Karanlık tema: arka plan # 0F/12, zehirli RGB olmadan "kıvılcım" parıltı.

Mikro telif hakkı

"Ödül 12 saat içinde yanacak" - her zaman "Get" düğmesinin yanında.

10) Boş durumlar, hatalar, etiketler "yak"

Nedir: Veri/görev olmadığında ve işler ters gittiğinde düşünceli ekranlar.

Burası boş

Resim + "Bugün ücretsizdir. Günün menüsünü denemek ister misiniz? "

💡 Görev düğmesini seçin (seçime yönlendirir).

Hatalar

"İlerleme güncellenemedi. Tekrarlıyoruz"... + spinner ≤3 sn> "Daha fazla deneyin "/" Sohbet "

"Burn through X" durumu ödül kartında ve ödül listesinde görüntülenir.

Ek arayüz öğeleri

Kap çip ulaştı: "200/200 puan/saat - sınırı. 00:00'da sıfırla"

Rozet "neredeyse ulaştı": ≤150 eşiği gösterdiğinde sarı bir gösterge.

Oyun geçişleri: "Oyunu değiştir - ilerleme devam edecek" (anti-grind).

Yerelleştirme: kesintisiz boşluklu sayılar "€1,000", 24 saatlik zaman biçimi, yerel ayara göre gün adları.

Mikro metinler (olduğu gibi eklenebilir)

"120 puan kaldı ≈ 8 tur 0 €. 5 (6-8 dakika)"

"11-50 bölgesindesiniz. Garanti: FS × 10. Yukarı 4-10 - 2,400 puan"

"Cap ulaştı: 200 puan/saat. 00:00'da sıfırla (Avrupa/Kiev) "

"Bir yol seçin: Hızlı/Rekabet/Bir arsa ile - istediğiniz zaman değiştirebilirsiniz".

UI deneyleri için metrikler

Huni üzerindeki UI etkisi: CTR "Başlat", participation_net, T1/T2 tamamlama.

Davranışsal: Erken çıkış (≤5 dk), time-to-T1/T2, geçiş hızı yolları, görüntüleme "?" Aletler.

Kalite: şikayetler/1k, ilerleme güncelleme hataları, gecikme p95.

Değer: Δ ARPPU (net), Ödül ve Bonus/Aktif, Net Uplift.

A/B çerçevesi (kısa)

Ünite: kullanıcı; Yapışkan-atama; tabakalaşma (platform/geo/payer-flag).

Hipotezler: merdiven vs şerit; "dakika" vs "puan"; Düğme-yolları vs sekmeler; "kıvılcımlar'ile animasyon vs olmadan.

CUPED: eş değişkenli olarak oturum öncesi zaman; ≥2 aşamalı D0-D2/D3-D7 hafta penceresi.

Görev tasarımcısı kontrol listesi

Merdiven T1 - T2 - Ödül simgeleri ile Final.
"Ne kadar kaldı" blok dakika/tur.
Adım kartları, ekran başına bir hedef.
OR yolları - ETA ile üç görünür düğme.
Ödül bölgeleri ve ölmek "garantili".
Timebox zamanlayıcı + nefes penceresi.
Mikro animasyonlar "kıvılcım", iskeletler/shimer.
"Nasıl sayılır?" + nedenler "neden gitmiyorsun".
Kontrast/simgeler/karanlık tema; "X'i yakacak".
Boş durumlar ve iyiliksever hatalar.

Mini kasa (Sentetik)

Önce: eşiksiz ilerleme çubuğu, "120 puan kaldı" metni, gizli ağızlıklar, sıcak boş durumlar yok.

Sonra: ödüllü merdivenler, "8 tur/6-8 dakika", OR-yolları düğmeleri, timebox modülü, "?", "Kap ulaştı", kıvılcımlar + iskeletler, ödül bölgeleri.

4 haftanın sonucu vs kontrol: participation_net + 6. 4 pp, tamamlama + 10. 8 pp, Erken çıkış − %18, şikayetler/1k − %31, Δ ARPPU (net) + 1 €. 7 при Ödülü ve Bonus/Aktif + 0 €. 5.

İyi bir görev arayüzü görsel disiplindir: "yüzde bataklık" yerine adımlar, özel çaba ipuçları, görünür ödüller ve yumuşak dinamikler. Erişilebilirlik, açık tüller, zaman kutuları ve düzgün animasyonlar ekleyin - ve görevler uzun ve sıkıcı bir ilerleme çizgisinden ziyade "küçük zaferlerin ritmi'olarak çalışmaya başlayacaktır.