Solicitări de interfață și ajutoare

1) De ce sunt necesare

• apar în context atunci când sunt cu adevărat necesare,
• scurt și specific, fără marketing,
• nu blocați scenariul principal și respectați disponibilitatea.

2) Harta instrumentului și când să le utilizați

Regula: conținut critic - în câmpul vizual și în textul interfeței, nu numai în indiciu.

3) Modele de plasare și declanșatoare

Înainte de acțiune: text helper/inline-indiciu („Parolă ≥ 8 caractere”).
La momentul actiunii: tooltip/coachmark cu focus/hover/long-press.
După acțiune: pâine prăjită/banner cu o explicație a rezultatului și link-ul „Mai mult”.
Prin intenție: afișare prin „?”, „i”, „Detalii”, „Ctrl +/” (paleta de comandă).

4) Copywriting

Un gând, o propoziţie. Începeți cu un verb („Alegeți”..., „Umpleți”...).
Nici o defecțiune: "Filtrul a exclus toate intrările. Doriți să resetați filtrul?
Cifre și fapte în loc de estimări: "Comisia 1. 5–2%».
Important: Nu promiteți un timp exact decât dacă este garantat.

5) Disponibilitate (A11y)

Tooltip: „rol =” tooltip „”, comunicare prin „aria-describby” cu declanșator; disponibil prin intermediul tastaturii.
Inform blocks: 'rol =' stare '(politicos), erori -' rol = 'alertă' '.
Coachmark/Tour: Focus în ordine, "Esc' se închide, se concentreze înapoi la sursă.
Contrast text ≥ AA; indiciu nu este singurul purtător de sens.

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) Arată managementul și „igiena”

Deduplicare - Nu afișați același mesaj de mai mult de N ori pe sesiune.
Control frecvență: cool-down 24 h pentru coachmark/tur; utilizatorul are un Do Not Remind.
Instrumente nu concurează: nu deschideți tooltip peste coachmark și invers.
Memoria progresului: Etapele finalizate ale turului nu mai sunt oferite.

7) Texte ajutătoare la formulare

Scrie „cum să treacă” regula, nu „ceea ce ai făcut greșit”.
Exemplu de format lângă: 'DD. MM AAAA ',' utilizator @ domeniu. tld'.
Pentru câmpuri complexe - butonul „Exemplu” (deschide un mic fragment/mască).
Validarea și ajutorul nu intră în conflict: cu o eroare, ajutorul se transformă într-un scurt „cum să se stabilească”.

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) Paleta de comandă și căutare după acțiuni

Trigger: 'Ctrl +/',' Ctrl + K 'sau buton „”

În paletă: acțiuni cu icoane și taste rapide ("Bet... — ⏎»).
Mașină de stat: atunci când selectați o acțiune - navigare instantanee/execuție, "Anulare" - "Esc'.

9) AI ajutor/copilot

Formular/termen sugerează ("Ce este un vager? "), draft-fill fields with a list of changes before application.
Pentru scenarii sensibile (plată/rată) - numai explicații și liste de verificare, decizia rămâne la utilizator.
Predați pe propria documentație/Întrebări frecvente; log întrebări pentru a îmbunătăți statica.

10) Specificul iGaming

Reguli și limite: ajutoare vizibile lângă butoanele "Plasați un pariu", "Cashout", "Setați o limită. "Limbaj clar și exemple.
KYC/AML: sfaturi pas cu pas (documente, date de verificare, ce se va întâmpla în continuare).
Turnee: în carte - „Cum se acordă punctele” (tooltip/inline-indiciu), link-ul „Reguli”.
Plăți: ajutor privind taxele/termenele limită și „De ce este necesară verificarea”.
Joc responsabil: discret, dar vizibil „Setați limita zilnică” solicită (contrast AAA, fără pâlpâire).

11) Performanță și poziționare

Animaţii uşoare 'opacitate/transformare' ≤ 180ms, afară mai repede.
Poziționarea la sursă, shift 4-8 px, auto-flip la margini.
Nu creați un copac DOM de la sute de solicitări - montați leneș prin focalizare/hover.
Luați în considerare „preferă reducerea mișcării”: solicitările statice în loc de strălucire.

12) Măsurători și experimente

Sfaturi CTR (impresii → clicuri pe STA/” More„).
Reducerea erorilor/defecțiunilor în forme cu control helper vs.
Timpul până la primul succes după gol/tur.
Ascunderea/refuzul solicitărilor (semnal negativ - suprascrie textul/momentul afișării).
Jurnalele de interogări populare în paleta de comandă/AI ajutor.

13) Proiectarea tokenurilor sistemului (exemplu)

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) Realizarea: coachmark și „nu-mi amintesc”

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

Sugestii care închid CTA sau suprapun focalizarea.
Informații critice numai în tooltip/hover.
10 + tur pas fără Skip mai târziu.
Shimmering/sărituri indicii, în special în modul întunecat.
„Glume” și metafore culturale în greșeli și limite.
Culori agresive și sunet pentru joc responsabil.

16) Lista de verificare QA

Disponibilitate

• Tooltip/coachmark disponibil pe tastatură, "Esc' se închide, focalizarea revine.
• Contrast ≥ AA, textele sunt independente doar de culoare.

Comportament

• Sugestii nu se suprapun elemente importante, sunt poziționate la sursă.
• Există o deduplicare a impresiei și Nu amintiți.
• Animații ≤ 180ms, afară mai repede.

Semnificație

• Textul este specific și scurt, CTA este adecvat.
• Exemple sunt date în formule/restricții.

Măsurători

• CTR-urile, timpul până la succes, proporția de piei sunt eliminate.

17) Documentația în sistemul de proiectare

Компоненты: 'HelperText', 'InlineHint', 'Tooltip', 'Coachmark', 'ProductTour', 'DocsLink', 'CommandPalette', 'AiHelper'.
Dimensiune/timp/ton jetoane, ghid ARIA și exemple de copywriting.
Șabloane pentru scenarii frecvente (KYC, limite, plăți, turnee, pariuri).
Do/Don' t galerie cu ecrane reale.

Scurt rezumat

Ajutoarele sunt bune atunci când sunt la timp, în context și fără drame inutile. Oferiți sugestii scurte, accesibile și verificabile, respectați focalizarea și frecvența impresiilor, fixați jetoane și modele în sistemul de proiectare. Deci, utilizatorii sunt mai puțin susceptibile de a face greșeli și de a ajunge la rezultatul mai repede - mai ales în scenarii sensibile iGaming.