Interfeýs maslahatlary we halperleri

1) Näme üçin zerur?

• hakykatdanam zerur bolanda kontekstde peýda bolýar,
• gysga we anyk, marketingsiz,
• esasy ssenariýany bloklamaýarlar we elýeterlilige hormat goýýarlar.

2) Gurallaryň kartasy we olary haçan ulanmak

Düzgün: möhüm mazmun - diňe bir maslahatda däl, görüş meýdanynda we interfeýsiň tekstinde.

3) Ýerleşdiriş patternleri we triggerler

Geçmezden ozal: helper text/inline-hint ("Parol ≥ 8 nyşan").
Häzirki wagtda: tooltip/coachmark fokus/hover/long-press.
Hereketden soň: netijä düşündiriş we "Has giňişleýin maglumat" baglanyşygy bolan tost/banner.
Niýet boýunça: '?', 'i', "Has giňişleýin maglumat", 'Ctrl +/' (command palette).

4) Göçürmek

Bir pikir - bir söz. Fiil bilen başlaň ("Saýla"..., "Dolduryň"...).

Günäkär däl: "Süzgüç ähli ýazgylary aýyrdy. Süzgüçini täzelemelisiňizmi?"

Baha bermegiň ýerine sanlar we faktlar: "Komissiýa 1. 5–2%».
Möhüm: kepillendirilmedik bolsa, takyk wagty wada bermäň.

5) Elýeterlilik (A11y)

Tooltip: 'role =' tooltip ', trigger bilen' aria-describedby 'arkaly baglanyşyk; klawiatura arkaly elýeterlidir.
Maglumat bloklary: 'role = "status"' (polite), ýalňyşlyklar - 'role = "alert"'.
Coachmark/Tour: fokus, 'Esc' ýapýar, fokusyň çeşmä gaýdyp gelmegi.
Tekstiň gapma-garşylygy ≥ AA; diňe bir many göteriji däl.

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) Görkezişleri dolandyrmak we "arassaçylyk"

Duplikasiýa: Bir habary bir sapakda N gezekden ýygy-ýygydan görkezme.
Ýygylyga gözegçilik: cool-down coachmark/tour üçin 24 sagat; Ulanyjyda "Ýatlatma" bar.
Gurallar bäsleşmeýär: coachmark-yň üstünde gural açmaň we tersine.
Ösüşiň ýady: Syýahatyň tamamlanan ädimleri indi teklip edilmeýär.

7) Görnüşlere helper-tekstler

"Nädogry edenleriňizi" däl-de, "nädip geçmeli" düzgünini ýazyň.
Gapdalyndaky format mysaly: 'DD. MM. YYYY`, `user@domain. tld`.
Çylşyrymly meýdanlar üçin - "Mysal" düwmesi (kiçijik snippet/maskany açýar).
Tassyklama we helper gapma-garşy däl: ýalňyşlyk ýüze çyksa, helper gysgaça "nädip düzetmeli" bolýar.

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) Buýruk palitrasy we hereketler boýunça gözlemek

Trigger: 'Ctrl +/',' Ctrl + K 'ýa-da "" düwmesi.
Palitrada: nyşanlar we gyzgyn düwmeler bilen hereket etmek ("Jedel etmek... — ⏎»).
Döwlet maşyny: Hereket saýlanyňyzda - derrew nawigasiýa/ýerine ýetirmek, "Ýatyrmak" - 'Esc'.

9) AI-helper/kopilot

Formasy/adalgalary boýunça maslahatlar ("Wakjer näme? "), draft - ulanylmazdan ozal üýtgetmek sanawy bolan meýdanlary doldurmak.
Duýgur ssenariýalar üçin (töleg/stawka) - diňe düşündirişler we barlag çek-listleri, çözgüt ulanyjyda galýar.
Öz resminamalaryňyzda öwrediň/SSS; statikany gowulandyrmak üçin soraglaryňyzy ýazyň.

10) iGaming aýratynlyklary

Düzgünler we çäkler: "Jedel etmek", "Keshaut", "Çäk bellemek" düwmeleriniň gapdalyndaky göze görnüp duran halperler. Aýdyň dil we mysallar.
KYC/AML: tapgyrlaýyn maslahatlar (resminamalar, barlagyň möhletleri, indiki näme bolar).
Ýaryşlar: kartoçkada - "Ballaryň nädip hasaplanýandygy" (tooltip/inline-hint), "Düzgünler" baglanyşygy.
Tölegler: komissiýalar/möhletler we "Näme üçin barlamak zerur".
Jogapkär oýun: göze görünmeýän, ýöne görünýän "Gündelik çägi kesgitläň" maslahatlary (AAA-kontrast, ýalpyldawuk däl).

11) Çykyş we ýerleşiş

Ýeňil animasiýalar 'opacity/transform' ≤ 180 ms, out has çalt.
Çeşmä ýerleşmek, 4-8 px süýşmek, gyralarda awto-flip.
Ýüzlerçe maslahatdan DOM agajyny döretmäň - fokus/hower boýunça ýalta guruň.
'prefers-reduced-motion' -y göz öňünde tutuň: shimmer ýerine statik maslahatlar.

12) Metrikler we synaglar

Maslahatlaryň CTR-i (STA-da → basmalar/" Has giňişleýin maglumat ").
Helper görnüşlerindäki ýalňyşlyklary/şowsuzlyklary azaltmak vs gözegçilik.
Empty/turdan soňky ilkinji üstünlik üçin wagt.
Maslahatlary gizlemek/ret etmek (negatiw signal - teksti/görkeziş pursatyny täzeden ýazýarys).
Buýruk palitrasynda/AI-helperde meşhur soraglaryň ýazgylary.

13) Dizaýn-ulgamyň bellikleri (mysal)

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) Durmuşa geçirmek: coachmark we "ýatlatma"

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-patternler

CTA-ny ýapýan ýa-da fokusy ýapýan maslahatlar.
Diňe tooltip/hover-da möhüm maglumatlar.
"Soň sypdyrmak" bolmazdan 10 ädim gezelenç.
Ýalpyldawuk/bökýän maslahatlar, esasanam dark mode.
"Degişmeler" we ýalňyşlyklarda we çäklerde medeni metaforlar.
Jogapkär oýun üçin agressiw reňkler we ses.

16) QA-çek-sanawy

Elýeterlilik

• Tooltip/coachmark klawiatura arkaly elýeterlidir, 'Esc' ýapýar, fokus gaýdyp gelýär.
• AA ≥ kontrast, tekstler diňe reňkine bagly däl.

Özüni alyp barşy

• Maslahatlar möhüm elementleri ýapmaýar, çeşmä ýerleşdirilýär.
• Görkezişleriň we "Ýatlatma" sözleriniň duplikasiýasy bar.
• Animasiýa ≤ 180 ms, out has çalt.

Manysy

• Teksti anyk we gysga, CTA ýerlikli.
• Formulalarda/çäklendirmelerde mysallar berilýär.

Metrikler

• CTR, üstünlik gazanmak üçin wagt, gizlemeleriň paýy.

17) Dizaýn-ulgamdaky resminamalar

Компоненты: `HelperText`, `InlineHint`, `Tooltip`, `Coachmark`, `ProductTour`, `DocsLink`, `CommandPalette`, `AiHelper`.
Ululyk/wagt/ton bellikleri, ARIA-HYDE we göçürme ýazuwynyň mysallary.
Ýygy-ýygydan ssenariýalar üçin şablonlar (KYC, çäklendirmeler, tölegler, ýaryşlar, nyrhlar).
Do/Don 't - hakyky ekranly galereýa.

Gysgaça gysgaça

Halperler wagtynda, kontekstde we gereksiz dramaturgiýa bolmazdan gowy. Geliň, gysga, elýeterli we barlanylýan maslahatlary bereliň, görkezişleriň hiline we ýygylygyna hormat goýuň, dizaýn ulgamynda bellikleri we nagyşlary düzüň. Şonuň üçin ulanyjylar ýygy-ýygydan ýalňyşýarlar we netijelere has çalt ýetýärler - esasanam iGaming-iň duýgur ssenariýalarynda.