Effetti di guida e interattività

1) Ruolo guida in UX

• «È interattivo?» (guida/puntatore/evidenziazione),
• «Dove sono?» (stile attivo),
• «Cosa succederà alla cabala?» (stato e afordance),
• «Ha funzionato?» (active/pressed e feedback successivo).

Gli effetti aumentano il significato, non lo sostituiscono. Le informazioni chiave e l'accesso all'azione non devono essere nascosti solo dietro la guida.

2) Modello di stato e semantico

Il set di base è «default» «hover» «focus» attivo/pressed « » disabled « loading» (opzionale).
Aggiungiamo'visited ', per i collegamenti,' checked '.

• Tra gli stati c'è una differenza visiva tra la forma, lo spessore e l'icona, non solo il colore.
• Contrasto testo/icona al fondo: ≥ 4. 5:1 (testo normale), 3:1 (grande/grasso).
• L'attivazione è visibile senza posizionamento (tastiera/schermata).

3) Dispositivi e query multimediali

css
/ There is an exact pointer and hover (mouse/trackpad )/
@ media (hover: hover) and (pointer: fine) {/hover effects/}

/ No hover or rough pointer (touch/remote control )/
@ media (hover: none), (pointer: coarse) {/alternatives to hover/}

/ Any type of pointer (hybrid devices )/
@ media (any-hover: hover) {/minimal improvements/}

• Gli effetti di guida non sono critici per rilevare l'azione sui dispositivi tach - usa espliciti affordance, colore/icona/cornice/suggerimento.
• Non nascondere navigazione/controllo solo sotto hover.

4) Lunghezze e curve

• Hover: 120-180 ms
• Focus: 120-180 ms
• Active/Pressed: 80–120 мс
• Ripple/ink (se utilizzato): ≤ 240 mc, 1 ciclo

La curva predefinita è 'cubic-bezier (0. 2, 0, 0. 2, 1)`

Active - più veloce ('cubic-bezier (0. 4, 0, 1, 1) '), uscita più morbida (' cubic-bezier (0, 0, 0. 2, 1)`).

5) Token di progettazione (esempio)

json
{
"interactive": {
"duration": { "hover": 160, "focus": 160, "active": 90 },
"easing": { "std": "cubic-bezier(0. 2,0,0. 2,1)", "acc": "cubic-bezier(0. 4,0,1,1)" },
"shadow": { "hover": "var(--elev-2)", "focus": "0 0 0 3px var(--focus-ring)" },
"opacity": { "disabled": 0. 38, "muted": 0. 64 }
}
}

6) Pulsanti: pattern di riferimento

Default: testo leggibile ≥ 4. 5:1 al riempimento.
Hover: - L sfondo 0. 02–0. 04, ombra leggera, puntatore «punto».
Active: Ancora - FileL 0. 02–0. 04, ombra ridotta/ingrandimento (scale 0. 98), dritta. 80-100 mc.
Focus: anello di contrasto 2-3 px senza blur.
Disabled: курсор `not-allowed`/`default`, opacity ≤ 0. 38, niente effetti hover.

css
.button {
transition: background-color. 16s var(--ease), transform. 09s var(--ease-acc), box-shadow. 16s var(--ease);
}
@media (hover:hover) and (pointer:fine) {
.button:hover  { background: var(--btn-bg-hover); box-shadow: var(--shadow-hover); }
}
.button:active  { transform: scale(.98); }
.button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.button[disabled] { opacity:.38; pointer-events: none; }

7) Collegamenti e azioni di testo

La differenza non è solo di colore: sottolineatura predefinita o hover/focus.
Per la guida: aumento della sottolineatura (spessore/offset), leggero cambiamento di tono.
Visited è un'altra tonalità della stessa tavolozza, il contrasto è salvato.

css a { text-decoration: underline; text-underline-offset:.12em; }
@media (hover:hover) and (pointer:fine) {
a:hover { text-underline-offset:.2em; }
}
a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }

8) Schede, liste, tabelle

• Hover: ombra morbida/evidenziazione del riquadro, puntatore «punto» solo se l'intera scheda è cliccabile.
• Attiva: rilascio breve, evidenziazione del titolo.
• Focus: un anello visibile intorno alla carta, non solo all'interno.

• Sfondo Hover con l'estensione a 0. 02–0. 04; stringa attiva è un riquadro chiaro.
• I clic di riga sono validi solo se esplicitamente afordance (icona «→», suggerimento).

• Limitare la «boscaiola» dai ritardi a cascata - massimo 6-8 elementi (stagger 20-30 ms).

9) Moduli e campi di input

Hover nei campi - Evidenziazione sottile del riquadro (FileL not 0. 05), senza ridimensionare il blocco.
Focus: anello di contrasto + modifica del colore della cornice; il placeholder rimane diverso (≥ 3:1).
Errore: colore + icone/testo; «shake» 6 px, 140 mc, una volta.

10) Icone e piccoli obiettivi

Aumentare la zona click a 32 x 32 (desktop )/40 x 40 (mobile) anche se l'icona stessa è 20-24 px.
Hover - Cambia opacità/riempimento/spessore, non più di 1-2 proprietà.
Active: snap breve su scale 0. 98.
Focus: l'anello del contenitore della zona click.

11) Disponibilità (A11y) e tastiera

Supporta «focus-visual» (per il mouse non si mostra nessuno stile attivo, per la tastiera si mostra).
Gli elementi che creano suggerimenti hover devono avere l'equivalente di un focus (lo stesso contenuto viene visualizzato con il tasto Tav/Enter).
Attributi Aria: gli interattivi hanno «rolle», «aria-pressed »/« aria-expanded »/« aria-current» per situazione.
Prefers-reduced-motion - Sostituisce scala/spostamento con minimo (opacity/fill) e disattiva le pulsazioni.

css
@media (prefers-reduced-motion: reduce) {
{ transition-duration:.01ms! important; animation: none! important; }
}

12) Prestazioni

Animare solo opacity'e 'e'; evitare «width/height/left/top», pesanti blur/ombre su molti elementi.
Usare moderatamente «will-change»; rimuovete una volta terminata la transizione.
In elenchi/tabelle sono gli effetti minimi, senza repaint «globali».

13) Hover-intent e «appiccicosa»

• Soglia di ritardo 80-120 ms prima di visualizzare un tooltip/menu complesso.
• Appiccicatura del cursore: se un utente si muove da una voce a un menu a un angolo, diamo 200-300 ms di corridoio (triangolo Fitts).
• Con una tac, sostituiamo l'hover con un press o il pulsante esplicito «ancora».

14) Tooltip/menu/dropdown

Apertura: hover-intent/press (tach), chiusura - cura/blur/ESC.
Posizione all'origine, freccia allineata; max-width e spostamenti attivati.
Disponibilità: "role =" tooltip ", colleghiamo" aria-describedby "; per il menu - 'role = «menu» + controllo delle frecce.

15) Specificità del iGaming

Coefficienti/liderboard: hover evidenzia la riga/cella, ma non cambia le metriche di posizionamento (senza salti).
Carte di tornei/bonus: hover può «rivivere» la cornice/icona, ma CTA testuale e condizioni restano leggibili (≥ 4. 5:1).
Notifiche responsabili (18 +, limiti): nessun effetto distrazione; Quando si passa, è possibile solo sottolineare i collegamenti e fare clic.
I pulsanti di puntata/acquisto: active-feedback sono obbligatori (click visivo/allineamento) e disabili senza ambiguità dopo l'invio.

16) Esempi di prescrizioni in interfaccia

css
.cta {
background: var(--role-primary);
color: var(--on-primary);
transition: background-color. 16s var(--ease), transform. 09s var(--ease-acc), box-shadow. 16s var(--ease);
}
@media (hover:hover) and (pointer:fine) {
.cta:hover { background: var(--role-primary-hover); box-shadow: var(--elev-2); }
}
.cta:active { transform: scale(.98); }
.cta:focus-visible { box-shadow: 0 0 0 3px var(--focus-ring); }

css
.card { transition: box-shadow. 16s var(--ease), border-color. 16s var(--ease); }
@media (hover:hover) and (pointer:fine) {
.card:hover { box-shadow: var(--elev-2); border-color: var(--border-strong); }
}
.card:focus-visible { box-shadow: 0 0 0 3px var(--focus-ring); }

css
.table tr { transition: background-color. 12s var(--ease); }
@media (hover:hover) and (pointer:fine) {
.table tr:hover { background: var(--row-hover); }
}
.table tr:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }

17) Anti-pattern

Nascondi azioni e menu critici solo per hover.
Ridimensiona/mappatura quando viene visualizzata (picchi layout).
Supporto solo per il colore per la variabilità degli stati.
Riflessione, pulsazioni infinite, glow acido sui testi.
La mancanza di stili focus o la loro invisibilità su un tema oscuro.
Allinea il puntatore a elementi non interattivi.

18) Lista assegni QA

Disponibilità

• Tutte le interazioni sono raggiungibili dalla tastiera; Vediamo il trucco.
• I contenuti hover sono disponibili in «focus »/« aria».
• Il contrasto tra testo e icone corrisponde a WCAG.

Comportamento

• Hover/active/disabled/visited sono diversi dalla forma e dal tono.
• Nessun ritardo nella risposta> 120 ms.
• Sul tassello c'è un'alternativa hover.

Performance

• Vengono animati solo 'transfre'/' opacity'.
• Nessun blur/ombra pesante su molti elementi.
• Su elenchi lunghi gli effetti sono ridotti al minimo.

19) Documentazione in progettazione

Tabella di stato per i componenti di base (pulsanti, link, schede, campi, righe di tabella).
Token di lunghezza/curve/ombre e un esempio di codice per light/dark.
Sezione «Hover vs Touch»: regole alternative e esempi.
«Do/Don't» con clip brevi e segni di contrasto.

Breve riepilogo

Gli effetti di guida sono la parte secondaria ma critica della lingua dell'interfaccia. Rendeteli brevi e prevedibili, mantenete la tastiera e la tastiera, fornite il contrasto e il trucco visibile, animate solo le proprietà a basso costo. Così l'interattività migliora la chiarezza e la velocità delle azioni, anziché ostacolarle.