Интерфейстин кеңештери жана хелпертери

1) Эмне үчүн алар керек

• алар чындап керек болгон шартта пайда болот,
• кыска жана конкреттүү, маркетингсиз,
• негизги сценарийге бөгөт койбойт жана жеткиликтүүлүктү сыйлайт.

2) Инструменттердин картасы жана аларды качан колдонуу керек

Эреже: критикалык мазмун - көрүү чөйрөсүндө жана интерфейстин текстинде гана эмес.

3) жайгаштыруу үлгүлөрү жана триггерлер

Чейин: helper text/inline-hint ("Пароль ≥ 8 белгилер").
Учурда: tooltip/coachmark/hover/long-press.
Аракеттен кийин: жыйынтык түшүндүрмөсү жана "Кененирээк" шилтемеси менен тост/баннер.
ниети боюнча: шоу '?', 'i', "Маалыматтар", 'Ctrl +/' (command palette).

4) Copyright

Бир ой - бир сүйлөм. этиш менен башталат ("тандоо"..., "толтуруу"...).

күнөөсүз: "чыпкасы бардык жазууларды жок. чыпкасы кайра?"

Баалардын ордуна сандар жана фактылар: "Комиссия 1. 5–2%».
Маанилүү: кепилдик берилбесе, так убакытты убада кылбаңыз.

5) Жеткиликтүүлүк (A11y)

Tooltip: 'role = "tooltip", триггер менен' aria-describedby 'аркылуу байланыш; клавиатура аркылуу жеткиликтүү.
Маалымат блоктору: 'role = "status"' (polite), каталар - 'role = "alert"'.
Coachmark/Tour: тартиби боюнча Focus, 'Esc' жабат, булагы үчүн Focus кайтып.
Тексттин контрасты ≥ AA; бир гана маани алып жүрүүчүсү эмес.

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 жолу көп көрсөтпөө.
жыштык контролдоо: cool-down coachmark/тур үчүн 24 саат; колдонуучуда "Эске салба" бар.
Куралдар атаандаша албайт: coachmark үстүнөн tooltip ачуу жана тескерисинче.
Прогресстин эс тутуму: турдун аяктаган кадамдары мындан ары сунушталбайт.

7) Формаларга хелпер тексттер

Жазыңыз "кантип өтүү керек" эреже эмес, "эмне туура эмес кылды".
Үлгү формат жакын: 'DD. MM. YYYY`, `user@domain. 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-хелпер/копилота

Форма/терминдер боюнча кеңештер ("Вейгер деген эмне? "), колдонуу алдында өзгөрүүлөрдүн тизмеси менен талааларды толтуруу.
Сезгич сценарийлер үчүн (төлөм/коюм) - түшүндүрмөлөр жана текшерүү чек-баракчалары гана, чечим колдонуучуда калат.
Өзүңүздүн документтериңизде/FAQ; Статиканы жакшыртуу үчүн суроолорду жазыңыз.

10) iGaming өзгөчөлүктөрү

Эрежелер жана лимиттер: "Коюмду жасоо", "Кэшаут", "Лимитти орнотуу" баскычтарынын жанындагы көрүнүктүү хелперлер. Ачык тил жана мисалдар.
KYC/AML: этап-этабы (документтер, текшерүү мөөнөтү, мындан ары эмне болот).
Турнирлер: картада - "Упай кантип эсептелет" (tooltip/inline-hint), "Эрежелер" шилтемеси.
Төлөмдөр: комиссиялар/мөөнөттөр жана "Эмне үчүн текшерүү керек".
Жоопкерчиликтүү оюн: көзгө көрүнбөгөн, бирок көзгө көрүнгөн "Күндүзгү чекти орнотуңуз" (AAA-контраст, жылтылдабай).

11) Аткаруу жана жайгаштыруу

Light Animation 'opacity/transform' ≤ 180 ms, out тезирээк.
булагына жайгаштыруу, 4-8 px жылыш, четине auto-flip.
Жүздөгөн кеңештерден DOM дарагын жаратпаңыз - фокус/hover боюнча жалкоо монтаждаңыз.
'prefers-reduced-motion' эске алуу: ордуна shimmer статикалык учтары.

12) Метрика жана эксперименттер

CTR жардам (STA/" Маалымат "боюнча → чыкылдатуу көрсөтүүлөр).
Heelpers vs контролдоо менен формада каталарды/мүчүлүштүктөрдү азайтуу.
empty/тур кийин биринчи ийгиликке чейин убакыт.
Жашыруу/баш тартуу (терс белги - текстти/көрсөтүү учурун кайра жазуу).
Command Palitre/AI Helper популярдуу суроо-Логи.

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) ишке ашыруу: coachmark жана "окшош эмес"

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ны жабуу же фокусту жабуу.
Критикалык маалымат гана tooltip/hover.
Тур жок 10 + кадам "кийин сагынам".
Айрыкча, караңгы режиминде, жалтылдаган/секирүү кеңештери.
"Тамашалар" жана маданий метафоралар каталарда жана лимиттерде.
жоопкерчиликтүү оюн үчүн агрессивдүү түстөр жана үн.

16) QA-чек тизмеси

Жеткиликтүүлүк

• Tooltip/coachmark клавиатура боюнча жеткиликтүү, 'Esc' жабат, көңүл кайтып келет.
• Контраст ≥ AA, тексттер гана түсү көз каранды эмес.

Жүрүм-туруму

• Насааттар маанилүү элементтерди жаап, булагы жайгашкан эмес.
• Көрсөтүү жана "Эске салбоо" деген дедупликация бар.
• Animation ≤ 180 ms, out тезирээк.

Мааниси

• Текст конкреттүү жана кыска, CTA ылайыктуу.
• Формулаларда/чектөөлөрдө мисалдар берилген.

Метрика

• CTR алынып, ийгиликке чейин убакыт, жашыруу үлүшү.

17) Дизайн системасында документтер

Компоненты: `HelperText`, `InlineHint`, `Tooltip`, `Coachmark`, `ProductTour`, `DocsLink`, `CommandPalette`, `AiHelper`.
өлчөмдөрү/убакыт/тондору, ARIA-HYDE жана Copyright мисалдар.
Көп сценарийлер үчүн шаблондор (KYC, лимиттер, төлөмдөр, турнирлер, коюмдар).
Do/Don 't галереясы реалдуу экрандар менен.

Кыскача резюме

Хелперлер өз убагында, контекстте жана ашыкча драматургиясыз жакшы. Кыска, жеткиликтүү жана текшерилүүчү кеңештерди бериңиз, көрсөтүүлөрдүн фокусун жана жыштыгын сыйлаңыз, дизайн системасында токендерди жана үлгүлөрдү бекитиңиз. Ошентип, колдонуучулар азыраак ката кетиришет жана натыйжага тезирээк жетишет - өзгөчө iGaming сезгич сценарийлеринде.