Interfeys maslahatlari va xelperlari

1) Ular nima uchun kerak?

• ular haqiqatan ham zarur bo’lgan kontekstda paydo bo’ladi,
• qisqa va aniq, marketingsiz,
• asosiy stsenariyni to’sib qo’ymaydi va foydalanish imkoniyatini hurmat qiladi.

2) Asboblar xaritasi va ularni qachon qo’llash

Qoida: tanqidiy kontent - ko’rish maydonida va interfeys matnida, nafaqat maslahatda.

3) Joylashtirish patternlari va triggerlar

Amaldan oldin: helper text/inline-hint («Maxfiy soʻz ≥ 8 ta belgi»).
Fokusda tooltip/coachmark/hover/long-press.
Harakatdan keyin: natijani tushuntirgan va «Batafsil» havolasi bo’lgan tost/banner.
Niyat bo’yicha:’?’,’i’, «Batafsil ma’lumot»,’Ctrl +/’ (command palette).

4) Nusxa ko’chirish

Bitta fikr - bitta jumla. Feʼl bilan boshlang («Tanlang»..., «Toʻldiring»...).
Aybsiz: "Filtr barcha yozuvlarni chiqarib tashladi. Filterni oʻchirishni istaysizmi?
Baholash o’rniga raqamlar va faktlar: "Komissiya 1. 5–2%».
Muhimi: agar kafolatlanmasa, aniq vaqtni va’da qilmang.

5) Foydalanish imkoniyati (A11y)

Tooltip:’role =’tooltip’, trigger bilan’aria-describedby’orqali aloqa; klaviatura yordamida mavjud.
Axborot bloklari:’role = «status»’(polite), xatolar -’role = «alert»’.
Coachmark/Tour: tartib boʻyicha fokus,’Esc’yopadi, fokus manbaga qaytadi.
Matn kontrasti ≥ AA; maslahatlar yagona ma’no tashuvchi emas.

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) Ko’rsatuvlar va «gigiyena» ni boshqarish

Deduplikatsiya: bitta xabarni bir sessiyada N martadan koʻp koʻrsatmaslik.
Chastota nazorati: cool-down coachmark/tour uchun 24 soat; foydalanuvchida «Eslatmaslik» mavjud.
Asboblar raqobatlashmaydi: coachmark ustiga tooltip ochmaslik va aksincha.
Taraqqiyot xotirasi: turning tugallangan qadamlari endi taklif etilmaydi.

7) Shakllarga xelper-matnlar

«Nimani notoʻgʻri qilganingizni» emas, balki «qanday qilib oʻtish» qoidasini yozing.
Formatning namunasi:’DD. MM. YYYY`, `user@domain. tld`.
Murakkab maydonlar uchun - «Misol» tugmasi (kichik snippet/niqobni ochadi).
Validatsiya va xelper bir-biriga zid emas: agar xato roʻy bersa, helper qisqa «qanday tuzatish kerak» ga aylanadi.

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) Jamoaviy palitra va harakatlar bo’yicha qidirish

Trigger:’Ctrl +/’,’Ctrl + K’yoki «» tugmasi.
Palitrada: ikonkalar va issiq tugmalar bilan harakatlar ("Tikish... — ⏎»).
Steyt-mashina: harakatni tanlashda - shoshilinch navigatsiya/bajarish, «Bekor qilish» -’Esc’.

9) AI-helper/kopilot

Shakl/atamalar bo’yicha maslahatlar ("Veyjer nima? "), draft - qoʻllashdan oldin oʻzgarishlar roʻyxati boʻlgan maydonlarni toʻldirish.
Sezgir ssenariylar uchun (to’lov/stavka) - faqat tushuntirishlar va tekshirish chek varaqalari, qaror foydalanuvchida qoladi.
O’z hujjatlaringizda o’qiting/SSS; statikani yaxshilash uchun savollarni yozing.

10) iGaming xususiyatlari

Qoidalar va limitlar: «Tikish», «Keshaut», «Limit belgilash» tugmalari yonidagi ko’zga ko’ringan xelperlar. Aniq til va misollar.
KYC/AML: bosqichma-bosqich maslahatlar (hujjatlar, tekshirish muddatlari, keyingi nima bo’ladi).
Turnirlar: kartochkada - «Ochkolar qanday hisoblanadi» (tooltip/inline-hint), «Qoidalar» havolasi.
To’lovlar: helper to’g "risida va" Nega tekshirish kerak ".
Mas’uliyatli o’yin: «Kunduzgi limitni belgilang» (AAA-kontrast, miltillamay).

11) Spektakl va joylashtirish

Yengil animatsiyalar’opacity/transform’≤ 180 ms, out tezroq.
Manbaga joylashtirish, 4-8 px siljish, chetlarga avtoflip.
Yuzlab maslahatlardan DOM daraxtini yaratmang - fokus/hover bo’yicha dangasalik bilan o’rnating.
’prefers-reduced-motion’ ni hisobga oling: shimmer oʻrniga statik maslahatlar.

12) Metrika va eksperimentlar

CTR maslahatlar (ko’rsatuvlar → STAga bosish/« Tafsilotlar »).
Xelperlar bilan shakllarda xato/nosozliklarni kamaytirish vs nazorat.
Empty/turdan keyingi birinchi muvaffaqiyat vaqti.
Ko’rsatmalarni yashirish/rad etish (salbiy signal - ko’rsatilgan matnni/lahzani qayta yozish).
Buyruq palitrasi/AI xelperidagi mashhur so’rovlar daftarlari.

13) Dizayn-tizim tokenlari (misol)

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) Amalga oshirish: coachmark va «eslatmaslik»

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

CTA yoki fokusni yopuvchi maslahatlar.
Tanqidiy maʼlumot faqat tooltip/hover’da.
«Keyinroq o’tkazib yuborish» bo’lmagan 10 + qadamlik tur.
Miltillovchi/sakraydigan maslahatlar, ayniqsa dark mode.
Xato va chegaralardagi «Hazillar» va madaniy metaforalar.
Mas’uliyatli o’yin uchun tajovuzkor ranglar va tovush.

16) QA-chek-varaq

Foydalanish imkoniyati

• Tooltip/coachmark klaviatura yordamida mavjud,’Esc’yopadi, fokus qaytadi.
• AA ≥ kontrast, matnlar faqat rangga bogʻliq emas.

Xulq-atvori

• Maslahatlar muhim elementlarni qoplamaydi, manbaga joylashtiriladi.
• Ko’rsatuvlar va «Esga solmaslik» deeplikatsiyasi mavjud.
• Animatsiyalar ≤ 180 ms, tezroq.

Ma’nosi

• Matn aniq va qisqa, CTA mos keladi.
• Formulalarda/cheklovlarda misollar berilgan.

Metrika

• CTR, muvaffaqiyatga erishish vaqti, yashirinish ulushi.

17) Dizayn-tizimdagi hujjatlar

Компоненты: `HelperText`, `InlineHint`, `Tooltip`, `Coachmark`, `ProductTour`, `DocsLink`, `CommandPalette`, `AiHelper`.
O’lcham/vaqt/tonlar tokenlari, ARIA-gaid va nusxa ko’chirish namunalari.
Tez-tez ssenariylar uchun namunalar (KYC, limitlar, to’lovlar, turnirlar, stavkalar).
Do/Don’t - haqiqiy ekranli galereya.

Qisqacha xulosa

Xelperlar o’z vaqtida, kontekstda va ortiqcha dramaturgiyasiz yaxshi. Qisqa, arzon va tekshiriladigan maslahatlar bering, diqqat va ko’rsatuvlar chastotasini hurmat qiling, dizayn tizimidagi token va namunalarni tuzating. Shunday qilib, foydalanuvchilar xato qilish ehtimoli kamroq va natijaga tezroq erishadilar - ayniqsa iGaming ning sezgir stsenariylarida.