Интерфейстің кеңестері мен хелперлері

1) Олар не үшін қажет

• олар шын мәнінде қажет болғанда,
• қысқа және нақты, маркетингсіз,
• негізгі сценарийді бұғаттамайды және қол жетімділікті құрметтейді.

2) Құралдар картасы және оларды қашан қолдану керек

Ереже: сын мазмұны - көру және интерфейс мәтінінде, тек кеңесте ғана емес.

3) Орналастыру паттерндері және триггерлер

Әрекеттің алдында: helper text/inline-hint («Құпия сөз ≥ 8 таңба»).
Әрекет кезінде :/hover/long-press фокусы кезінде tooltip/coachmark.
Әрекеттен кейін: нәтижесі түсіндіріліп және «Толығырақ» сілтемесі бар тост/баннер.
Ниеті бойынша: '?', 'i', «Толығырақ», 'Ctrl +/' (command palette).

4) Копирайтинг

Бір ой - бір сөйлем. Этиформен бастаңыз («Таңдаңыз»..., «Толтырыңыз»...).

Кінәсіз: "Сүзгі барлық жазбаларды алып тастады. Сүзгіні ысыру керек пе?"

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

5) Қолжетімділік (A11y)

Tooltip: 'role =' tooltip ', триггермен' aria-describedby 'арқылы байланыс; пернетақта арқылы қол жетімді.
Ақпарат-блоктар: 'role = «status»' (polite), қателер - 'role = «alert»'.
Coachmark/Tour: реті бойынша фокус, 'Esc' жабады, фокусты дереккөзге қайтарады.
Мәтіннің қарама-қайшылығы ≥ 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/tour үшін 24 сағ; пайдаланушыда «Еске салба» бар.
Құралдар бәсекелес емес: coachmark үстінен tooltip ашпаңыз және керісінше.
Прогресс жады: Турдың аяқталған қадамдары ұсынылмайды.

7) Пішіндерге хелпер-мәтіндер

«Не істегеніңізді» емес, «қалай өту» ережесін жазыңыз.
Қатар пішім мысалы: 'DD. MM. YYYY`, `user@domain. tld`.
Күрделі өрістер үшін - «Мысал» түймешігі (шағын сниппетті/масканы ашады).
Валидация мен хелпер қайшы келмейді: қате кезінде helper қысқаша «қалай түзету керек» дегенге айналады.

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-хелпер/копилот

Нысан/терминдер бойынша кеңестер ("Вейджер дегеніміз не? "), draft - қолдану алдында өзгерістер тізімі бар өрістерді толтыру.
Сезімтал сценарийлер үшін (төлем/мөлшерлеме) - тек түсініктемелер мен тексеру чек-парақтары, шешім пайдаланушыда қалады.
Өз құжаттамаңызда/FAQ; статистиканы жақсарту үшін сұрақтарға логин жасаңыз.

10) iGaming ерекшелігі

Ережелер мен лимиттер: «Ставка жасау», «Кэшаут», «Лимит белгілеу» батырмаларының жанындағы көзге көрінетін хелперлер. Айқын тіл және мысалдар.
KYC/AML: кезеңдік кеңестер (құжаттар, тексеру мерзімі, одан әрі не болады).
Турнирлер: карточкада - «Көзілдірік қалай есептеледі» (tooltip/inline-hint), «Ереже» сілтемесі.
Төлемдер: комиссиялар/мерзімдер туралы және «Неліктен верификация қажет».
Жауапты ойын: көзге көрінбейтін, бірақ көрінетін «Күндізгі лимитті белгілеңіз» (AAA-контраст, жылтыраусыз).

11) Перформанс және позициялау

Жеңіл анимациялар 'opacity/transform' ≤ 180 мс, out жылдам.
Қайнар көзге орналасу, 4-8 px жылжыту, шеттерінде авто-флип.
Жүздеген кеңестерден DOM ағашын жасамаңыз - фокус/hover бойынша жалқаулықпен орнатыңыз.
'prefers-reduced-motion' дегенді ескеріңіз: shimmer орнына статикалық кеңестер.

12) Өлшемдер және эксперименттер

CTR кеңестер (көрсетілімдер → СТА/« Толығырақ »басу).
Хелперлері бар пішіндердегі қателерді/істен шығуларды азайту vs бақылау.
Empty/турдан кейінгі алғашқы табысқа дейінгі уақыт.
Жасыру/ескертулерден бас тарту (теріс сигнал - мәтінді/көрсету сәтін қайта жазамыз).
Командалық палитрада/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) Іске асыру: 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 + қадамға тур.
Әсіресе dark mode.
Қателер мен лимиттердегі «әзіл» және мәдени метафоралар.
Жауапты ойынға арналған агрессивті түстер мен дыбыс.

16) QA-чек парағы

Қол жетімділік

• Tooltip/coachmark пернетақта арқылы қол жетімді, 'Esc' жабады, фокус қайтып келеді.
• AA ≥ қарама-қайшылығы, мәтіндер тек түсіне байланысты емес.

Мінез-құлық

• Кеңестер маңызды элементтерді қамтымайды, қайнар көзге орналастырылады.
• Көрсетілімдердің және «Еске салба» деген дедупликациясы бар.
• Анимациялар ≤ 180 мс, одан жылдам.

Мағынасы

• Мәтін нақты және қысқа, CTA орынды.
• Формулаларда/шектеулерде мысалдар берілген.

Метрика

• CTR, табысқа дейінгі уақыт, жасырындылардың үлесі алынады.

17) Дизайн-жүйедегі құжаттама

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

Қысқаша түйіндеме

Хелперлер уақытында, контексте және артық драматургиясыз жақсы. Қысқа, қолжетімді және тексерілетін кеңестер беріңіз, шоулардың фокусы мен жиілігін құрметтеңіз, дизайн жүйесінде белгілер мен үлгілерді белгілеңіз. Осылайша, пайдаланушылар қателеседі және нәтижеге тез жетеді - әсіресе iGaming сезімтал сценарийлерінде.