Интерфейс ва ёварон

1) Чаро онҳо лозиманд

• дар контекст пайдо мешаванд, вақте ки онҳо дар ҳақиқат лозиманд,
• кӯтоҳ ва мушаххас, бидуни маркетинг,
• сенарияи асосӣ ва эҳтироми дастрасиро манъ накунед.

2) Харитаи асбобҳо ва кай истифода бурдани онҳо

Қоида: мазмуни интиқодӣ - дар соҳаи назар ва дар матни интерфейс на танҳо дар ишорат.

3) Шакли ҷойгиркунӣ ва триггерҳо

Пеш аз амал: матни ёрирасон/inline-hint ("Парол ≥ 8 аломат").
Дар лаҳзаи амал: абзор/мураббӣ бо фокус/hover/long-press.
Пас аз амал: тост/баннер бо шарҳи натиҷа ва истиноди "Бештар".
Бо ният: нишон додани '?', 'i', "Тафсилот", 'Ctrl +/' (палитраи фармон).

4) Нусхабардорӣ

Як фикр, як ҳукм. Аз феъл сар кунед ("Интихоб кунед"..., "Пур кардан"...).
Хато нест: "Филтр ҳамаи сабтҳоро истисно кард. Филтрро аз нав барқарор кардан мехоҳед?
Рақамҳо ва далелҳо ба ҷои ҳисобҳо: "Комиссияи 1. 5–2%».
Муҳим: Вақти дақиқро ваъда надиҳед, агар он кафолат дода нашавад.

5) Дастрасӣ (A11y)

Абзор: 'нақш = "абзор"', иртибот тавассути 'aria-describby' бо триггер; тавассути клавиатура дастрас аст.
Блокҳои иттилоотӣ: 'нақш = "мақом" (хушмуомила), хатогиҳо -' нақш = "ҳушдор" '.
Coachmark/Tour: Фокус бо тартиби, 'Esc' пӯшида мешавад, ба манбаъ тамаркуз кунед.
Контрасти матн ≥ АА; ишора ягона интиқолдиҳандаи маъно нест.

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) Нишон додани идоракунӣ ва "гигиена"

Deduplication - Ҳамон паёмро аз N маротиба дар як ҷаласа бештар нишон надиҳед.
Назорати басомад: хунук-поён 24 соат барои coachmark/tour; корбар хотиррасон намекунад.
Воситаҳо рақобат намекунанд: асбобҳоро аз болои coachmark боз накунед ва баръакс.
Хотираи пешрафт: Қадамҳои анҷомёфтаи тур дигар пешниҳод карда намешаванд.

7) Матнҳои ёрирасон ба шаклҳо

Қоидаро "чӣ гуна бояд гузашт" нависед, на "он чизе ки шумо хато кардед".
Намунаи формат дар назди: 'DD. М.М. YYYY ',' корбар @ домейн. tld '.
Барои майдонҳои мураккаб - тугмаи "Мисол" (порча/ниқоби хурдро мекушояд).
Санҷиш ва ёвар ихтилоф надоранд: бо хатогӣ, ёвар ба кӯтоҳ "чӣ гуна ислоҳ кардан" табдил меёбад.

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) Палитраи фармон ва ҷустуҷӯ аз рӯи амалҳо

Триггер: 'Ctrl +/',' Ctrl + K 'ё тугма. ""

Дар палитра: амалҳо бо нишонаҳо ва калидҳои гарм ("Бет... — ⏎»).
Мошини давлатӣ: ҳангоми интихоби амал - паймоиш/иҷрои фаврӣ, "Бекор кардан" - 'Esc'.

9) Ёрдамчии AI/copilot

Маслиҳатҳои форма/истилоҳӣ ("Вагон чист? "), майдонҳои пур кардани лоиҳаҳо бо рӯйхати тағирот пеш аз дархост.
Барои сенарияҳои ҳассос (пардохт/меъёри пардохт) - танҳо тавзеҳот ва рӯйхати санҷишҳо, қарор бо корбар боқӣ мемонад.
Дар ҳуҷҷатҳои худ/FAQ таълим диҳед; саволҳои сабти ном барои беҳтар кардани статика.

10) Хусусиятҳои IGaming

Қоидаҳо ва маҳдудиятҳо: ёрдамчиёни намоён дар назди тугмаҳои "Ҷойгир кардани гарав", "Cashout", "Маҳдудият муқаррар кунед. "Забон ва мисолҳои тоза.
KYC/AML: маслиҳатҳои зина ба зина (ҳуҷҷатҳо, санаҳои санҷиш, оянда чӣ мешавад).
Мусобиқаҳо: дар корт - "Чӣ гуна холҳо дода мешаванд" (абзор/inline-hint), пайванди "Қоидаҳо".
Пардохтҳо: ёвар дар бораи пардохтҳо/мӯҳлатҳо ва "Чаро тафтиш лозим аст".
Бозии масъулиятнок: беэътиноӣ, вале намоёни "Маҳдудияти ҳаррӯза" (контрасти AAA, дурахш нест).

11) Иҷро ва мавқеъ

Аниматсияҳои сабук 'шаффофият/дигаргун мекунанд' ≤ 180 мм, тезтар.
Ҷойгиркунӣ ба манбаъ, иваз кардани 4-8 px, худкор дар кунҷҳо.
Аз садҳо дархостҳо дарахти DOM эҷод накунед - танбалӣ тавассути фокус/hover.
Ба ҷои "тобиши коҳишёфта" -ро дида бароед: ба ҷои тобиши статикӣ.

12) Нишондиҳандаҳо ва таҷрибаҳо

Маслиҳатҳои CTR (таассурот → клик дар STA/" Бештар").
Кам кардани хатогиҳо/нокомӣ дар шаклҳо бо ёрдамчӣ vs назорат.
Вақт барои муваффақияти аввал пас аз холӣ/тур.
Пинҳон кардан/рад кардани дархостҳо (сигнали манфӣ - навиштани матн/лаҳзаи намоиш).
Гузоришҳои дархостҳои маъмул дар палитраи фармон/ёвари AI.

13) Нишонаҳои системаи тарроҳӣ (мисол)

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) Амалисозӣ: мураббӣ ва "хотиррасон накунед"

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) Анти-намунаҳо

Маслиҳатҳое, ки CTA-ро пӯшед ё фокусро такрор кунед.
Иттилооти интиқодӣ танҳо дар абзор/hover.
10 + сафари қадам бидуни гузаштан дертар.
Калидҳои дурахшон/ҷаҳида, хусусан дар ҳолати торик.
"Шӯхиҳо" ва метафораҳои фарҳангӣ дар хатогиҳо ва маҳдудиятҳо.
Рангҳои хашмгин ва садо барои бозии масъул.

16) Рӯйхати назоратии QA

Мавҷудият

• Tooltip/coachmark дар клавиатура мавҷуд аст, 'Esc' пӯшида мешавад, бозгашти фокус.
• Муқоиса ≥ АА, матнҳо танҳо ранг нестанд.

Рафтор

• Маслиҳатҳо унсурҳои муҳимро такрор намекунанд, ба манбаъ ҷойгир карда шудаанд.
• Такрори таассурот вуҷуд дорад ва Хотиррасон накунед.
• Аниматсияҳо ≤ 180ms, тезтар.

Маънӣ

• Матн мушаххас ва кӯтоҳ аст, CTA мувофиқ аст.
• Намунаҳо дар формулаҳо/маҳдудиятҳо оварда шудаанд.

Нишондиҳандаҳо

• CTRs, вақти муваффақият, ҳиссаи пӯстҳо хориҷ карда мешаванд.

17) Ҳуҷҷатгузорӣ дар системаи тарроҳӣ

Компоненты: 'Helper

Аломатҳои андоза/вақт/оҳанг, дастури ARIA ва намунаҳои нусхабардорӣ.
Қолибҳо барои сенарияҳои зуд-зуд (KYC, маҳдудиятҳо, пардохтҳо, мусобиқаҳо, гаравҳо).
Бо экранҳои воқеӣ галерея накунед.

Хулосаи мухтасар

Ёрдамчиён ҳангоми саривақт, дар заминаи ва бе драмаи нолозим хубанд. Маслиҳатҳои кӯтоҳ, дастрас ва санҷидашавандаро диҳед, фокус ва басомади таассуротро эҳтиром кунед, нишонаҳо ва намунаҳоро дар системаи тарроҳӣ ислоҳ кунед. Ҳамин тавр, корбарон эҳтимолияти хатогиҳо камтар доранд ва ба натиҷа зудтар мерасанд - хусусан дар сенарияҳои ҳассоси IGaming.