Suggerimenti e helper interfaccia

1) A cosa servono

• vengono visualizzati in un contesto in cui sono effettivamente necessari,
• brevi e concreti, senza marketing,
• non bloccano lo script principale e rispettano la disponibilità.

2) Mappa degli strumenti e quando applicarli

Regola: contenuti critici - in vista e nel testo dell'interfaccia, non solo in un suggerimento.

3) Pattern di posizionamento e trigger

Prima dell'azione: helper text/inline-hint (Password di 8 caratteri).
Al momento dell'azione: tooltip/coachmark al focus/hover/long-press.
Dopo l'azione: toast/banner con la spiegazione del risultato e il link «Maggiori informazioni».
L'intenzione è di visualizzare «?», «i», «Più», «Ctrl +/» (command palette).

4) Copiratting

Un pensiero è una frase. Inizia con il verbo («Seleziona»..., «Riempi»...).

"Il filtro ha escluso tutte le registrazioni. Reimpostare il filtro?"

Numeri e fatti invece delle valutazioni: "Commissione 1. 5–2%».
L'importante è che non mi prometta l'ora esatta, a meno che non sia garantita.

5) Disponibilità (A11y)

Tooltip: 'role = «tooltip», collegamento attraverso «aria-describedby» al trigger; Disponibile dalla tastiera.
Blocchi informativi: 'role = status' (polite), errori -- 'rolle =' alert '.
Coachmark/Tour - Attiva in ordine, Esc chiude, ripristina il fuoco all'origine.
Contrasto del testo AA; L'indizio non è l'unico portatore di significato.

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) Gestione delle sfilate e «igiene»

Deduplicazione: non mostrare lo stesso messaggio più volte N volte per sessione.
Controllo della frequenza: cool-down 24 ore per coachmark/tour; L'utente ha «Non ricordarlo».
Gli strumenti non competono, non aprono tooltip sopra coachmark e viceversa.
Memoria del progresso: i passaggi completati del tour non sono più offerti.

7) Helper testi alle forme

Scrivi «come passare» la regola, non «cosa hai sbagliato».
Esempio di formato accanto a DD. MM. YYYY`, `user@domain. tld`.
Per i campi complessi, il pulsante Esempio (apre un piccolo snippet/maschera).
La convalida e l'helper non sono in conflitto: quando si verifica un errore, l'helper diventa un breve «come correggere».

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) Tavolozza di comando e ricerca di azioni

Trigger: "Ctrl +/"," Ctrl + K "o pulsante".
Nella tavolozza, azioni con icone e tasti caldi ("Scommetti... — ⏎»).
State Machine - Quando si seleziona un'azione, navigazione/esecuzione immediata, Annulla - Esc.

9) AI-helper/copilota

Suggerimenti sul modulo/termini ("Cos'è un vager? ), riempimento draft dei campi con elenco delle modifiche prima dell'applicazione.
Per gli script sensibili (pagamento/tasso) - solo spiegazioni e scontrini di verifica, la decisione spetta all'utente.
Istruisci sulla tua documentazione/FAQ; logica le domande per migliorare la statica.

10) Specificità del iGaming

Regole e limiti: helper visibili accanto ai pulsanti Scommetti, Cache, Imposta limite. Lingua chiara e esempi.
KYC/AML: suggerimenti graduali (documenti, tempi di convalida, che cosa succederà dopo).
Tornei: «Come vengono assegnati i punti» (tooltip/inline-hint), collegamento «Regole».
Pagamenti: helper su commissioni/scadenze e «Perché è necessaria la verifica».
Gioco responsabile: suggerimenti «Imposta il limite diurno» (AAA-Contrasto, senza misurazioni).

11) Performance e posizionamento

Animazioni leggere 'opacity/transfer'a 180 ms, out più veloce.
Posizionamento all'origine, spostamento 4-8 px, auto-flip ai bordi.
Non creare un albero DON di centinaia di suggerimenti - montare pigro attraverso il focus/hover.
Considerate'preferers-reduced-motion ': suggerimenti statici invece di shimmer.

12) Metriche ed esperimenti

Suggerimenti CTR (visualizzazioni click su 100/Più informazioni).
Riduzione di errori/errori di modulo con controllo helper vs.
Tempo fino al primo successo dopo l'empty/tour.
Nascondi/rifiuta suggerimenti (segnale negativo - riscriviamo il testo/momento di visualizzazione).
I fogli delle richieste popolari nella tavolozza di comando/AI-helper.

13) Token di progettazione (esempio)

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) Implementazione: coachmark e «non ricordarlo»

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

Suggerimenti che chiudono CTA o sovrappongono l'attivazione.
Informazioni critiche solo in tooltip/hover.
Un tour di 10 passi più avanti senza «Salta dopo».
Suggerimenti mozzafiato/salteggiante, soprattutto nel dark mode.
Scherzi e metafore culturali negli errori e nei limiti.
Colori e suoni aggressivi per un gioco responsabile.

16) Lista assegni QA

Disponibilità

• Tooltip/coachmark sono disponibili dalla tastiera, Esc chiude e il fuoco torna.
• Contrasto di AA, i testi non dipendono solo dal colore.

Comportamento

• I suggerimenti non sovrappongono gli elementi importanti, sono posizionati sull'origine.
• È possibile deduplicare le visualizzazioni e Non ricordarle.
• Animazioni a 180 ms, out più veloce.

Significato

• Testo specifico e breve, CTA appropriato.
• Le formule/restrizioni forniscono esempi.

Metriche

• Scattano CTR, tempo fino al successo, parte nascosta.

17) Documentazione in progettazione

Компоненты: `HelperText`, `InlineHint`, `Tooltip`, `Coachmark`, `ProductTour`, `DocsLink`, `CommandPalette`, `AiHelper`.
Token di dimensioni/tempi/toni, ARIA-hyde e esempi di copirating.
Modelli per script frequenti (KYC, limiti, pagamenti, tornei, scommesse).
Do/Don't-gallery con schermi reali.

Breve riepilogo

Gli Helpers sono bravi quando sono in tempo, nel contesto e senza troppa drammaturgia. Diamo suggerimenti brevi, accessibili e verificabili, rispettate il trucco e la frequenza delle visualizzazioni, fissate i token e i pattern nel sistema di progettazione. In questo modo gli utenti si sbagliano meno spesso e raggiungono risultati più rapidi, soprattutto negli scenari sensibili.