Arayüz istemleri ve yardımcıları

1) Neden ihtiyaç duyulur

• Gerçekten ihtiyaç duyulduğunda bağlamda görünürler,
• Kısa ve spesifik, pazarlama olmadan,
• Ana senaryoyu engellemeyin ve kullanılabilirliğe saygı gösterin.

2) Araç haritası ve ne zaman kullanılacağı

Kural: kritik içerik - sadece ipucu değil, görünüm alanında ve arayüz metninde.

3) Yerleştirme kalıpları ve tetikleyiciler

Eylemden önce: yardımcı metin/satır içi ipucu ("Parola ≥ 8 karakter").
Eylem anında: focus/hover/long-press ile tooltip/coachmark.
Eylemden sonra: Sonucun bir açıklaması ve "Daha fazla" bağlantısı ile tost/afiş.
Niyete göre: '?','i ',' Ayrıntılar ',' Ctrl +/' (komut paleti) ile gösterilir.

4) Metin Yazarlığı

Bir düşünce, bir cümle. Bir fiille başla ("Seç"..., "Doldur"...).
Hata yok: "Filtre tüm girişleri hariç tuttu. Filtreyi sıfırlamak istiyor musunuz?
Tahminler yerine sayılar ve gerçekler: "Komisyon 1. 5–2%».
Önemli: Garanti edilmedikçe kesin bir zaman vaat etmeyin.

5) Kullanılabilirlik (A11y)

Tooltip: 'rol =' tooltip ', tetikleyici ile' aria-describby 'yoluyla iletişim; Klavye ile kullanılabilir.
Bilgi blokları: 'role =' status '(kibar), errors -' role = 'alert' '.
Coachmark/Tur: Sırayla odaklan, 'Esc' kapanır, kaynağa odaklan.
Metin kontrastı ≥ AA; İpucu tek anlam taşıyıcısı değildir.

html
<button id="kpi" aria-describedby="kpi-tip">RTP</button>
<div id = "kpi-tip" role = "tooltip" hidden> Return to Player - the share of bets returned to players in the long term. </div>
<script>
const b = document. getElementById('kpi'), t = document. getElementById('kpi-tip');
b. addEventListener('focus', ()=>t. hidden=false); b. addEventListener('blur', ()=>t. hidden=true);
b. addEventListener('mouseenter', ()=>t. hidden=false); b. addEventListener('mouseleave', ()=>t. hidden=true);
</script>

6) Yönetim ve "hijyen" gösterin

Veri tekilleştirme - Aynı mesajı oturum başına N defadan fazla gösterme.
Frekans kontrolü: Coachmark/tur için soğuma 24 saat; Kullanıcının Hatırlatma özelliği vardır.
Araçlar rekabet etmez: Coachmark üzerinde araç ipucu açmayın ve bunun tersi de geçerlidir.
İlerlemenin anısı: Turun tamamlanmış adımları artık sunulmamaktadır.

7) Formlara yardımcı metinler

Kuralı "nasıl geçeceğini" yaz, "neyi yanlış yaptığını'değil.
Yanındaki format örneği: 'DD. MM. YYYY ',' kullanıcı @ etki alanı. tld '.
Karmaşık alanlar için - "Örnek" düğmesi (küçük bir snippet/maske açar).
Doğrulama ve yardımcı çakışmaz: bir hatayla, yardımcı kısa bir "nasıl düzeltilir" haline gelir.

html
<label for="iban">IBAN</label>
<input id="iban" aria-describedby="iban-help">
<small id = "iban-help "> Format: 22-34 characters, Latin letters and numbers only. </small>

8) Komut paleti ve eylemlerle arama

Tetikleme: 'Ctrl +/',' Ctrl + K 'veya düğme ""

Palette: simgeler ve kısayol tuşları ile eylemler ("Bet... — ⏎»).
Durum makinesi: bir eylem seçerken - anında gezinme/yürütme, "İptal" - 'Esc'.

9) AI yardımcı/yardımcı pilot

Form/terim ipuçları ("Bir vager nedir? "), uygulamadan önce değişiklik listesi içeren taslak doldurma alanları.
Hassas senaryolar için (ödeme/fiyat) - sadece açıklamalar ve kontrol listeleri, karar kullanıcıya kalır.
Kendi belgelerinizi/SSS'nizi öğretin; Statiği geliştirmek için soruları kaydedin.

10) iGaming'in özellikleri

Kurallar ve sınırlar: "Bahis yap", "Cashout", "Limit belirle" düğmelerinin yanındaki dikkat çekici yardımcılar. "Açık bir dil ve örnekler.
KYC/AML: adım adım ipuçları (belgeler, kontrol tarihleri, daha sonra ne olacak).
Turnuvalar: Kartta - "Puanlar nasıl verilir" (araç ipucu/satır içi ipucu), bağlantı "Kurallar".
Ödemeler: Ücretler/son tarihler hakkında yardımcı ve "Neden doğrulama gereklidir".
Sorumlu oyun: Göze batmayan ancak görünür "Günlük limit ayarla" komutları (AAA kontrastı, titreme yok).

11) Performans ve konumlandırma

Işık animasyonları 'opaklık/dönüşüm' ≤ 180ms, daha hızlı dışarı.
Kaynağa konumlandırma, 4-8 piksel kaydırma, kenarlarda otomatik çevirme.
Yüzlerce istemden bir DOM ağacı oluşturmayın - tembel bir şekilde odaklama/gezinme ile monte edin.
'prefers-reduced-motion' düşünün: parıltı yerine statik istemleri.

12) Metrikler ve deneyler

TO ipuçları (gösterimler - STA/" Daha Fazla'yı tıklar).
Yardımcı ve kontrol ile formlardaki hataların/arızaların azaltılması.
Boş/turdan sonra ilk başarı zamanı.
İstemleri gizleme/reddetme (negatif sinyal - metnin/görüntüleme anının üzerine yazma).
Komut paletindeki/AI yardımcısındaki popüler sorguların günlükleri.

13) Tasarım sistemi belirteçleri (örnek)

json
{
"help": {
"maxWidth": 320,
"gap": 8,
"radius": 10,
"elev": 8,
"iconSize": 16,
"enterMs": 180,
"exitMs": 120,
"cooldownHours": 24
},
"tour": { "maxSteps": 5, "backdropOpacity": 0. 5, "escCloses": true },
"palette": { "hotkey": "Ctrl+K", "rowHeight": 40 },
"a11y": { "contrastAA": true, "useAriaLive": true }
}

css
.helper { display:flex; gap:8px; align-items:flex-start; max-width:320px; }
.helper__icon { width:16px; height:16px; opacity:.8; }
.tooltip { position:absolute; padding:8px 10px; border-radius:10px; box-shadow:var(--elev-2); }
.tooltip[data-show="true"] { animation: fadeIn. 18s cubic-bezier(.2,0,.2,1); }
@keyframes fadeIn { from { opacity:0; transform: translateY(4px) } to { opacity:1; transform:none } }

14) Gerçekleştirme: coachmark ve "hatırlatma"

html
<div id="cm1" class="coachmark" role="dialog" aria-labelledby="cm1-title" hidden>
<h3 id = "cm1-title "> New Fast Cashout </h3>
<p> Check out with one button directly from the coupon. </p>
<div class="row">
<button id = "cm1-ok "> Clear </button>
<button id = "cm1-skip"> Don't remind me </button>
</div>
</div>
<script>
const seen = localStorage. getItem('cm1-skip')==='1';
if(!seen) document. getElementById('cm1'). hidden=false;
document. getElementById('cm1-skip'). onclick=()=>{ localStorage. setItem('cm1-skip','1'); cm1. hidden=true; };
document. getElementById('cm1-ok'). onclick=()=> cm1. hidden=true;
</script>

15) Anti-desenler

CTA'yı kapatan veya odağı örtüştüren ipuçları.
Kritik bilgiler sadece tooltip/hover'da.
Skip Later olmadan 10 + adım turu.
Parıldayan/zıplayan ipuçları, özellikle karanlık modda.
"Şakalar've hatalar ve sınırlar içinde kültürel metaforlar.
Sorumlu oyun için agresif renkler ve ses.

16) KG kontrol listesi

Kullanılabilirlik

• Klavyede bulunan tooltip/coachmark, 'Esc' kapanır, odak geri döner.
• Kontrast ≥ AA, metinler sadece renkten bağımsızdır.

Davranış

• İpuçları önemli öğelerle örtüşmez, kaynağa yerleştirilir.
• Gösterim veri tekilleştirme ve Don't Remind vardır.
• Animasyonlar ≤ 180ms, daha hızlı dışarı.

Anlamı

• Metin özel ve kısa, CTA uygun.
• Örnekler formüllerde/kısıtlamalarda verilmiştir.

Metrikler

• CTR'ler, başarı zamanı, saklanma oranı kaldırılır.

17) Tasarım sistemindeki belgeler

Компоненты: 'HelperText', 'InlineTip', 'Tooltip', 'Coachmark', 'ProductTour', 'DocsLink', 'CommandPalette', 'AiHelper'.
Boyut/zaman/ton belirteçleri, ARIA kılavuzu ve metin yazarlığı örnekleri.
Sık kullanılan senaryolar için şablonlar (KYC, limitler, ödemeler, turnuvalar, bahisler).
Gerçek ekranlarla yapın/yapmayın.

Kısa Özet

Yardımcılar zamanında, bağlamda ve gereksiz drama olmadan iyidir. Kısa, erişilebilir ve doğrulanabilir ipuçları verin, gösterimlerin odağına ve sıklığına saygı gösterin, tasarım sistemindeki belirteçleri ve kalıpları düzeltin. Bu nedenle, kullanıcıların hata yapma ve sonuca daha hızlı ulaşma olasılığı daha düşüktür - özellikle hassas iGaming senaryolarında.