Efecte Hover și interactivitate

1) Rolul de orientare în UX

• „Este interactiv?” (hover/cursor/highlight)
• „Unde sunt?” (stil de focalizare),
• „Ce se întâmplă prin clic?” (statut și preț)
• „A funcţionat acţiunea?” (feedback activ/apăsat și ulterior).

Principiu: Efectele întăresc sensul, nu îl înlocuiesc. Informațiile cheie și accesul la acțiune nu ar trebui să fie ascunse numai în spatele planorului.

2) Modelul de stat și semantica

Set de bază: „implicit” → „hover” → „focus” → „activ/apăsat” → „dezactivat” → „încărcare” (opțional).
Pentru link-uri adaugam 'visited', pentru switch-uri - 'checked'.

• Între stări - o diferență vizuală în formă/grosime/pictogramă, nu doar culoare.
• Text/pictogramă contrast cu fundalul: ≥ 4. 5:1 (text simplu), ≥ 3:1 (mare/aldin).
• Focalizarea este vizibilă fără a indica (cititor de tastatură/ecran).

3) Dispozitive și cereri media

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/}

• Pe dispozitivele tactile, efectele de indicare nu sunt esențiale pentru detectarea acțiunii - utilizați prețuri explicite: culoare/pictogramă/cadru/indiciu.
• Nu ascundeți navigarea/controalele numai „sub hover”.

4) Durate și curbe

• Hover: 120-180ms
• Focalizare: 120-180ms
• Activ/Presat: 80-120 мс
• Undă/cerneală (dacă este utilizată): ≤ 240 ms, 1 ciclu

Curba implicită este "cubic-bezier (0. 2, 0, 0. 2, 1)`

Activ - mai rapid ('cubic-bezier (0. 4, 0, 1, 1) „), ieșirea este mai moale (” cubic-bezier (0, 0, 0. 2, 1)`).

5) Proiectarea tokenurilor sistemului (exemplu)

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) Butoane: model de referință

Implicit: text lizibil ≥ 4. 5:1 pentru a umple.
Hover: − Δ L fundal 0. 02–0. 04, umbră luminoasă, indicator ".
Activ: − mai multe Δ L 0. 02–0. 04, umbră/indentare scurtată (scala 0. 98), durează. 80-100 ms.
Focalizare: inel de contrast 2-3 px fără estompare.
Dezactivat: курсор „nu este permis ”/„ implicit”, opacitate ≤ 0. 38, fără efecte 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) Legături și acțiuni text

Distincție nu numai prin culoare: subliniați în mod implicit sau pe hover/focus.
Pentru orientare: subliniați îmbunătățirea (grosime/offset), ușoară schimbare a tonusului.
"Visited 'este o nuanță diferită a aceleiași palete, contrastul este păstrat.

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) Carduri, liste, tabele

• Hover: umbra moale/cadru evidenţiere, cursor 'pointer' numai în cazul în care întreaga carte este clickable.
• Activ: indentare scurtă, evidențierea titlului.
• Focus: un inel vizibil în jurul cardului, nu doar în interior.

• Trecutul Hover cu Δ L 0. 02–0. 04; rândul activ este o margine clară.
• Clicurile pe o linie sunt permise numai cu un preț explicit (pictogramă „→”, indiciu).

• Limitați cu atenție „scara” întârzierilor în cascadă - maximum 6-8 elemente (eșalonare 20-30 ms).

9) Formulare și câmpuri de intrare

Hover pentru câmpuri: iluminare subțire a cadrului (Δ L ~ 0. 05), fără a schimba dimensiunea blocului.
Focalizare: inel de contrast + schimbare culoare cadru; înlocuitorul rămâne distinct (≥ 3:1).
Eroare: culoare + pictogramă/text; scurt „shake” este valabil ≤ 6 px, ≤ 140 ms, o singură dată.

10) Icoane și obiective mici

Măriți zona de clic la 32 × 32 (desktop )/40 × 40 (mobil), chiar dacă pictograma în sine este 20-24 px.
Hover: schimbă opacitatea/umplerea/grosimea, 1-2 proprietăți maxime.
Activ: scurt „snap” pe scara 0. 98.
Focus: inel de container zona clic.

11) Accesibilitate (A11y) și tastatură

Suport „: focus-vizibil” (nu afișăm stiluri de focalizare pentru mouse, le arătăm pentru tastatură).
Elementele care creează indicii hover trebuie să aibă un echivalent focus (același conținut apare pe tasta Tab/Enter).
Aria-atribute: interactivele au „rol”, „aria-presat ”/„ aria-extins ”/„ aria-curent” de situație.
Preferă mişcarea redusă: înlocuiţi scala/schimbarea cu minimum (opacitate/umplere), dezactivaţi undele.

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

12) Performanță

Animaţi numai „opacitate” şi „transformare”; evita 'latime/inaltime/stanga/sus', blur greu/umbre pe mai multe elemente.
Utilizați „will-change” în mod rar; retrage după finalizarea tranziției.
Pe liste/tabele - efecte minime, fără vopsire „globală”.

13) Hover-intenție și „lipiciozitate”

• Pragul de întârziere este de 80-120 ms înainte de a afișa un tooltip/meniu complex.
• „Stickiness” cursorului: în cazul în care utilizatorul se deplasează de la elementul la meniul la un unghi, dăm 200-300 ms de „coridor” (triunghi Fitts).
• Cu o atingere - înlocuiți hover cu apăsați sau un buton explicit „mai mult”.

14) Tooltip/meniuri/dropdowns

Deschidere: hover-intenție (desktop )/presă (touch), închidere - îngrijire/blur/ESC.
Poziție - la sursă, săgeata este aliniată; lățimea maximă și cratima sunt activate.
Disponibilitate: 'rol =' tooltip '', associate 'aria-descripedby'; pentru meniu - 'rol = „meniu”' + control săgeată.

15) Specificul iGaming

Coeficienți/plumb: hover evidențiază rândul/celula, dar nu modifică măsurătorile de poziționare (fără „salturi”).
Cărți de turneu/bonus: hover poate „revigora” cadrul/pictograma, dar textul CTA și condițiile rămân lizibile (≥ 4. 5:1).
Notificări responsabile (18 +, limite): fără efecte de distragere a atenției; plutind permite doar sublinierea legăturilor și concentrarea clară.
Butoane de pariere/cumpărare: feedback-ul activ este obligatoriu (clic vizual/indent) și dezactivați fără ambiguitate după trimitere.

16) Exemple de rețete de interfață

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

Ascunde acțiuni critice/meniuri numai pentru hover.
Modificați dimensiunile/machetele pe planor (salturi de aspect).
Bazați-vă doar pe culoare pentru a distinge stările.
Pâlpâire, pulsaţii nesfârşite, strălucire „acidă” pe texte.
Lipsa stilurilor de focalizare sau invizibilitatea lor pe o temă întunecată.
Hover 'pointer' peste elemente non-interactive.

18) Lista de verificare QA

Disponibilitate

• Toate interactivele sunt accesibile prin tastatură; ne concentrăm.
• Conținutul Hover este disponibil prin „focus ”/„ aria”.
• Contrastul de text și icoane corespunde WCAG.

Comportament

• Hover/active/dezactivate/vizitate se disting prin formă și ton.
• Nici o întârziere de răspuns> 120ms.
• Există o alternativă la plutire la atingere.

Performanță

• Numai „transforma ”/„ opacitate” sunt animate.
• Nici o ceață/umbre grele pe mai multe elemente.
• Pe liste lungi, efectele sunt minimizate.

19) Documentația în sistemul de proiectare

Tabel de stare pentru componentele de bază (butoane, legături, cărți, câmpuri, rânduri de tabel).
Durata/curba/jetoane umbra și codul de probă pentru lumină/întuneric.
Secțiunea „Hover vs Touch”: reguli de alternative și exemple.
„Do/Don' t” cu clipuri scurte și scoruri de contrast.

Scurt rezumat

Efectele de direcționare sunt o parte auxiliară, dar critică a limbajului de interfață. Păstrați-le scurte și previzibile, păstrați tastatura și atingerea, oferă contrast și focalizare vizibilă, anima numai proprietăți ieftine. Apoi interactivitatea sporește claritatea și viteza de acțiune, în loc să le împiedice.