Interfeys ipuçları və köməkçiləri

1) Nə üçün lazımdır

• həqiqətən lazım olduqda kontekstdə görünür,
• qısa və konkret, heç bir marketinq,
• əsas ssenarini bloklamayın və əlçatanlığa hörmət edin.

2) Alətlər xəritəsi və onları nə zaman tətbiq etmək

Qayda: kritik məzmun - görmə sahəsində və interfeys mətnində, yalnız ipucunda deyil.

3) Yerləşdirmə nümunələri və tetikleyicilər

Əvvəlki: helper text/inline-hint («Parol ≥ 8 simvol»).
Əməliyyat zamanı: tooltip/coachmark fokus/hover/long-press.
Aksiyadan sonra: nəticənin izahı və «Ətraflı» linki ilə tost/banner.
Niyyət üzrə: '?', 'i', 'Daha ətraflı', 'Ctrl +/' (command palette).

4) Kopyalama

Bir fikir - bir cümlə. Feil ilə başlayın («Seçin»..., «Doldurun»...).

Günahsız: "Filter bütün qeydləri istisna etdi. Süzgəci sıfırlamaq?"

Qiymətlər əvəzinə ədədlər və faktlar: "Komissiya 1. 5–2%».
Vacibdir: zəmanət verilmədikdə dəqiq vaxt vəd etməyin.

5) Mövcudluq (A11y)

Tooltip: 'role =' tooltip ', tetik ilə' aria-describedby 'vasitəsilə əlaqə; klaviatura ilə mövcuddur.
Məlumat blokları: 'role = «status»' (polite), səhvlər - 'role = «alert»'.
Coachmark/Tour: sıraya görə fokus, 'Esc' bağlayır, fokusu mənbəyə qaytarır.
Mətn kontrastı ≥ AA; ipucu yeganə məna daşıyıcısı deyil.

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) Nümayişlərin idarə edilməsi və «gigiyena»

Deduplikasiya: eyni mesajı hər sessiyada N dəfədən çox göstərməyin.
Tezlik nəzarəti: cool-down coachmark/tur üçün 24 saat; istifadəçi var «xatırlatmaq deyil».
Alətlər rəqabət aparmır: coachmark üzərində tooltip açmayın və əksinə.
Tərəqqinin yaddaşı: turun tamamlanmış addımları artıq təklif olunmur.

7) Formalara Helper mətnləri

Yazın «necə keçmək» qayda deyil, «nə səhv etdi».
Yaxınlıqdakı format nümunəsi: 'DD. MM. YYYY`, `user@domain. tld`.
Mürəkkəb sahələr üçün - «Nümunə» düyməsi (kiçik bir snippet/maska açır).
Validasiya və helper ziddiyyət təşkil etmir: səhv olduqda helper qısa «necə düzəldilir» çevrilir.

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) Komanda palitrası və hərəkətlər üzrə axtarış

Trigger: 'Ctrl +/',' Ctrl + K 'və ya «» düyməsi.
Palitrada: nişanlar və isti düymələrlə hərəkətlər ("Bahis... — ⏎»).
State Machine: hərəkət seçərkən - ani naviqasiya/icra, «Ləğv» - 'Esc'.

9) AI helper/kopilot

Forma/terminlər üzrə məsləhətlər ("Veycer nədir? "), tətbiq edilməzdən əvvəl dəyişikliklər siyahısı ilə sahələrin draft doldurulması.
Həssas ssenarilər üçün (ödəniş/bahis) - yalnız izahat və yoxlama yoxlama vərəqləri, həll istifadəçidə qalır.
Öz sənədlərinizdə öyrənin/FAQ; Statikanı yaxşılaşdırmaq üçün sualları loqo edin.

10) iGaming xüsusiyyətləri

Qaydalar və limitlər: «Bahis et», «Cashout», «Limit təyin et» düymələrinin yanında nəzərə çarpan helperlər. Aydın dil və nümunələr.
KYC/AML: mərhələli ipuçları (sənədlər, yoxlama vaxtı, bundan sonra nə olacaq).
Turnirlər: kartda - «Eynək necə verilir» (tooltip/inline-hint), «Qaydalar» linki.
Ödənişlər: komissiyalar/şərtlər və «Niyə yoxlama lazımdır».
Məsuliyyətli oyun: «Gündəlik limit təyin edin» (AAA-kontrast, titrəmədən).

11) Performans və yerləşdirmə

Yüngül animasiyalar 'opacity/transform' ≤ 180 ms, out daha sürətli.
Mənbəyə yerləşdirmə, 4-8 px sürüşmə, kənarlarda avtoflip.
Yüzlərlə ipucundan DOM ağacı yaratmayın -/hover fokusuna görə tənbəlcəsinə quraşdırın.
'prefers-reduced-motion' nəzərə alın: shimmer əvəzinə statik ipuçları.

12) Metriklər və təcrübələr

CTR ipuçları (STA/« Ətraflı »üçün → klikləri nümayiş).
Helper vs nəzarət ilə formalarda səhvlərin/uğursuzluqların azaldılması.
Empty/turdan sonra ilk müvəffəqiyyətə qədər vaxt.
Gizlətmə/ipuçlarından imtina (mənfi siqnal - mətn/anı yenidən yazmaq).
Komanda paleti/AI helper-də məşhur sorğuların qeydləri.

13) Dizayn sistemi tokenləri (nümunə)

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) Reallaşdırma: coachmark və «xatırlatmaq deyil»

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-nümunələr

CTA-nı bağlayan və ya fokusu bağlayan ipuçları.
Kritik məlumat yalnız tooltip/hover.
«Sonra buraxın» olmadan 10 + addımlıq tur.
Xüsusilə dark mode-da titrəyən/tullanan ipuçları.
Səhvlərdə və limitlərdə «zarafatlar» və mədəni metaforlar.
Məsuliyyətli oyun üçün aqressiv rənglər və səs.

16) QA-çek siyahısı

Mövcudluq

• Tooltip/coachmark klaviatura mövcuddur, 'Esc' bağlanır, fokus geri qayıdır.
• Kontrast ≥ AA, mətnlər yalnız rəngdən asılı deyil.

Davranış

• İpuçları vacib elementləri örtmür, mənbəyə yerləşdirilir.
• Nümayişlərin və «xatırlatmaq deyil».
• Animasiyalar ≤ 180 ms, daha sürətli.

Mənası

• Mətn xüsusi və qısa, CTA uyğun.
• Düsturlarda/məhdudiyyətlərdə nümunələr verilir.

Metriklər

• CTR, müvəffəqiyyət üçün vaxt, gizlətmə payı.

17) Dizayn sistemində sənədləşmə

Компоненты: `HelperText`, `InlineHint`, `Tooltip`, `Coachmark`, `ProductTour`, `DocsLink`, `CommandPalette`, `AiHelper`.
Ölçü/zaman/ton tokenləri, ARIA-HYDE və kopyalama nümunələri.
Tez-tez ssenarilər üçün şablonlar (KYC, limitlər, ödənişlər, turnirlər, dərəcələr).
Do/Don 't-real ekranlar ilə qalereya.

Qısa xülasə

Halperlər vaxtında, kontekstdə və lazımsız dramaturgiya olmadan yaxşıdır. Qısa, mövcud və yoxlanıla bilən ipuçları verin, fokus və göstəriş tezliyinə hörmət edin, dizayn sistemində tokenləri və nümunələri düzəldin. Beləliklə, istifadəçilər daha az səhv edirlər və nəticəyə daha tez çatırlar - xüsusilə həssas iGaming ssenarilərində.