Effets de guidage et interactivité

1) Rôle de guidage dans l'UX

• « Est-ce interactif ? » (guidage/curseur/éclairage),
• "où suis-je?" (style focus),
• « Que va-t-il se passer en clique ? » (état et affordance),
• « L'action a-t-elle réussi ? » (actif/pressé et suivi feedback).

Principe : les effets renforcent le sens plutôt que de le remplacer. Les informations clés et l'accès à l'action ne doivent pas être cachés derrière le simple guidage.

2) Modèle d'état et sémantique

Jeu de base : 'default' → 'hover' → 'focus' → 'active/pressed' → 'disabled' → 'loading' (facultatif).
Pour les références, nous ajoutons 'visited', pour les boutons radio, 'checked'.

• Entre les états, la différence visuelle est la forme/épaisseur/icône, pas seulement la couleur.
• Contraste texte/icônes au fond : ≥ 4. 5:1 (texte ordinaire), ≥ 3:1 (gros/gras).
• Le focus est visible sans guidage (clavier/lecteur d'écran).

3) Appareils et demandes de médias

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

• Sur les périphériques taches, les effets de guidage ne sont pas critiques pour détecter une action - utilisez des affordances explicites : couleur/icône/cadre/conseil.
• Ne cachez pas la navigation/les contrôles seulement « sous hover ».

4) Durées et courbes

• Hover : 120-180 ms
• Focus : 120-180 ms
• Active/Pressed: 80–120 мс
• Ripple/ink (si utilisé) : ≤ 240 ms, 1 cycle

La courbe par défaut est 'cubic-bezier (0. 2, 0, 0. 2, 1)`

Active - plus rapide ('cubic-bezier (0. 4, 0, 1, 1) '), la sortie est plus douce (' cubic-bezier (0, 0, 0. 2, 1)`).

5) Tokens de système de conception (exemple)

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) Boutons : Modèle de référence

Par défaut : texte lisible ≥ 4. 5:1 au remplissage.
Hover : − Δ L de fond 0. 02–0. 04, ombre légère, curseur « pointer ».
Active : Encore − Δ L 0. 02–0. 04, ombre/pression raccourcie (échelle 0. 98), durera longtemps. 80-100 ms.
Focus : anneau contrasté 2-3 px sans blur.
Disabled: курсор `not-allowed`/`default`, opacity ≤ 0. 38, pas d'effets 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) Références et actions textuelles

La distinction n'est pas seulement la couleur : soulignement par défaut ou sur hover/focus.
Pour le guidage : renforcement du soulignement (épaisseur/offset), changement de ton facile.
« Visited » est une autre nuance de la même palette, le contraste est conservé.

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) Cartes, listes, tables

• Hover : ombre douce/rétro-éclairage du cadre, curseur « pointer » seulement si cliquable toute la carte.
• Active : pression courte, mise en surbrillance du titre.
• Focus : anneau visible autour de la carte, pas seulement à l'intérieur.

• Hover-fond avec Δ L 0. 02–0. 04; la ligne active est un cadre clair.
• Les clics de ligne ne sont valides qu'avec une affordance explicite (icône « → », conseil).

• Limitez soigneusement la « forêt » des retards en cascade - au maximum 6-8 éléments (stagger 20-30 ms).

9) Formulaires et champs de saisie

Hover aux champs : éclairage fin du cadre (Δ L ~ 0. 05), sans modifier la taille du bloc.
Focus : anneau de contraste + changement de couleur du cadre ; le placeholder reste distinctif (≥ 3:1).
Erreur : Couleur + icône/texte ; un shake court est admissible ≤ 6 px, ≤ 140 ms, une fois.

10) Icônes et petites cibles

Augmentez la zone de clic à 32 × 32 (bureau )/40 × 40 (mobile), même si l'icône elle-même est de 20-24 px.
Hover : changement d'opacité/remplissage/épaisseur, pas plus de 1-2 propriétés.
Active : bref « snap » par scale 0. 98.
Focus : anneau par conteneur zone de clic.

11) Accessibilité (A11y) et clavier

Supportez ': focus-visible' (pour la souris, nous n'affichons pas de styles de focus, pour le clavier, nous affichons).
Les éléments qui créent des conseils hover sont tenus d'avoir l'équivalent de focus (le même contenu apparaît avec la touche Tab/Enter).
Attributs aria : les interactifs ont « role », « aria-pressed »/« aria-expanded »/« aria-current » par situation.
Prefers-reduced-motion : remplacer l'échelle/décalage par un minimum (opacity/fill), désactiver les pulsations.

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

12) Performance

Animez uniquement 'opacity' et 'bou' ; évitez 'width/height/left/top', blur lourd/ombres sur une multitude d'éléments.
Utiliser modérément 'will-change' ; nettoyer après la fin de la transition.
Sur les listes/tables, les effets minimes, sans repaint « global ».

13) Hover-intent et « collant »

• Seuil de retard 80-120 ms avant l'affichage d'un tooltip/menu complexe.
• « Collage » du curseur : si l'utilisateur passe d'un point à un menu sous un angle, nous donnons 200-300 ms de « couloir » (triangle Fitts).
• Par tache - nous remplacons hover par la presse ou le bouton explicite « encore ».

14) Tooltip/menu/dropdowns

Ouverture : hover-intent (desktop )/press (tach), fermeture - par soins/blur/ESC.
Position - à la source, flèche alignée ; max-width et les transferts sont inclus.
Disponibilité : 'role =' tooltip ', on relie' aria-describedby '; pour le menu - 'role =' menu '+ contrôle des flèches.

15) Spécificité iGaming

Coefficients/leaders : hover met en surbrillance chaîne/cellule, mais ne change pas les métriques de positionnement (pas de « sauts »).
Cartes de tournoi/bonus : hover peut « animer » le cadre/icône, mais le texte CTA et les conditions restent lisibles (≥ 4. 5:1).
Notifications responsables (18 +, limites) : aucun effet de distraction ; lors du pointage, seul le soulignement des liens et un focus clair sont autorisés.
Boutons Paris/Achats : Active-feedback est obligatoire (clic visuel/pression) et non équivoque après l'envoi.

16) Exemples de recettes d'interface

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-modèles

Cacher les actions/menus critiques uniquement derrière hover.
Redimensionner/redimensionner en surbrillance (sauts layout).
Appui uniquement sur la couleur pour distinguer les états.
Scintillement, pulsations infinies, glow « acide » sur les textes.
L'absence de styles focus ou leur invisibilité sur un thème sombre.
Pointer le pointeur vers des éléments non interactifs.

18) Liste de vérification QA

Disponibilité

• Toutes les interactions sont accessibles par le clavier ; on voit le focus.
• Le contenu hover est disponible par 'focus '/' aria'.
• Le contraste du texte et des icônes correspond au WCAG.

Comportement

• Hover/active/disabled/visited sont distingués par la forme et le ton.
• Pas de retard de réponse> 120 ms.
• Il existe une alternative à la tache.

Performance

• Seuls les « bou »/« opacity » sont animés.
• Pas de blur/ombres lourdes sur une multitude d'éléments.
• Sur de longues listes, les effets sont réduits au minimum.

19) Documentation dans le système de conception

Tableau d'état des composants de base (boutons, références, cartes, champs, lignes de tables).
Jetons de durée/courbes/ombres et exemple de code pour light/dark.
Section « Hover vs Touch » : règles des alternatives et exemples.
« Do/Don't » avec des clips courts et des indicateurs de contraste.

Résumé succinct

Les effets de guidage sont une partie auxiliaire mais critique du langage d'interface. Faites-les concis et prévisibles, maintenez le clavier et la tache, assurez le contraste et le focus visible, animez seulement les propriétés bon marché. L'interactivité renforce alors la clarté et la rapidité des actions plutôt que de les entraver.