Efectos de orientación e interactividad

1) Función de guía en UX

• «¿Es interactivo?» (desplazamiento/cursor/retroiluminación),
• "dónde estoy?" (estilo de enfoque),
• «¿Qué va a pasar con la cábala?» (estado y affordance),
• «¿La acción funcionó?» (active/pressed y posterior feedback).

Principio: los efectos refuerzan el significado, no lo sustituyen. La información clave y el acceso a la acción no deben ocultarse sólo detrás de la dirección.

2) Modelo de estados y semántica

Conjunto básico: 'default' → 'hover' → 'focus' → 'active/pressed' → 'disabled' → 'loading' (opcional).
Para los enlaces añadimos 'visited', para los interruptores, 'checked'.

• Entre estados, la diferencia visual es la forma/grosor/icono, no sólo el color.
• Contraste de texto/iconos al fondo: ≥ 4. 5:1 (texto normal), ≥ 3:1 (grande/gordo).
• El enfoque es visible sin guía (teclado/screenrider).

3) Dispositivos y consultas de medios

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

• En los dispositivos de tracción, los efectos de guiado no son críticos para detectar la acción: utilice affordances explícitos: color/icono/marco/sugerencia.
• No esconda la navegación/controles sólo «debajo de hover».

4) Duración y curvas

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

Curva predeterminada: 'cubic-bezier (0. 2, 0, 0. 2, 1)`

Active - más rápido ('cubic-bezier (0. 4, 0, 1, 1) '), la salida es más suave (' cubic-bezier (0, 0, 0. 2, 1)`).

5) Tokens del sistema de diseño (ejemplo)

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) Botones: patrón de referencia

Default: texto legible ≥ 4. 5:1 al relleno.
Hover: −ΔL de fondo 0. 02–0. 04, sombra ligera, cursor 'pointer'.
Active: aún −ΔL 0. 02–0. 04, sombra acortada/compresión (escala 0. 98), dura. 80-100 ms.
Focus: anillo de contraste 2-3 px sin blur.
Disabled: курсор `not-allowed`/`default`, opacity ≤ 0. 38, sin efectos 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) Enlaces y acciones de texto

La diferencia no es solo por el color: el subrayado por defecto o por hover/focus.
Para guiar: ganancia de subrayado (espesor/offset), cambio de tono fácil.
'Visited' es otro matiz de la misma paleta, el contraste se ha guardado.

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) Tarjetas, listas, tablas

• Hover: sombra suave/marco de retroiluminación, cursor 'pointer' sólo si se hace clic en toda la tarjeta.
• Active: prensado corto, resaltado de encabezado.
• Focus: anillo visible alrededor de la tarjeta, no sólo dentro.

• Fondo Hover con Δ L 0. 02–0. 04; cadena activa - marco claro.
• Los clics de línea sólo son válidos cuando hay affordance explícito (icono «→», sugerencia).

• Limite diligentemente el «leñador» de los retrasos en cascada - un máximo de 6-8 elementos (stagger 20-30 ms).

9) Formularios y campos de entrada

Hover en los campos: retroiluminación fina del marco (Δ L ~ 0. 05), sin cambiar el tamaño de la unidad.
Focus: anillo de contraste + cambio de color del marco; placeholder sigue siendo distinguible (≥ 3:1).
Error: color + icono/texto; «shake» corto es permisible ≤ 6 px, ≤ 140 ms, una vez.

10) Iconos y pequeños objetivos

Aumente la zona de clics a 32 × 32 (escritorio )/40 × 40 (móvil), incluso si el propio icono es 20-24 px.
Hover: cambio de opacidad/relleno/espesor, no más de 1-2 propiedades.
Active: breve «snap» por escala 0. 98.
Focus: anillo por contenedor de la zona de clic.

11) Disponibilidad (A11y) y teclado

Admite ': focus-visible' (para el ratón no mostramos estilos focales, para el teclado - mostramos).
Los elementos que crean pistas hover están obligados a tener un equivalente en el enfoque (el mismo contenido aparece en la tecla Amb/Enter).
Atributos aria: los interactivos tienen 'role', 'aria-pressed '/' aria-expanded '/' aria-current' según la situación.
Prefers-reduced-motion: reemplazamos la escala/desplazamiento por un mínimo (opacity/fill), desactivamos las pulsaciones.

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

12) Rendimiento

Anime sólo 'opacity' y 'transformación'; evite los 'width/height/left/top', los blur/sombras pesados en muchos elementos.
Use moderadamente 'will-change'; limpie después de terminar la transición.
En las listas/tablas hay efectos mínimos, sin repaintes «globales».

13) Hover-intent y «pegajosidad»

• Umbral de latencia de 80-120 ms antes de mostrar un complejo tooltip/menú.
• «Pegajosidad» del cursor: si el usuario se mueve de un elemento a un menú en un ángulo, damos 200-300 ms de «pasillo» (triángulo Fitts).
• Por touch - Reemplazamos hover por press o el botón explícito «todavía».

14) Tooltip/menú/dropdowns

Apertura: hover-intent (escritorio )/press (tach), cierre - por cuidado/blur/CES.
Posición - a la fuente, flecha alineada; max-width y las transferencias están incluidas.
Accesibilidad: 'role =' tooltip '', enlazamos 'aria-describedby'; para menús - 'role =' menu '+ control de flechas.

15) Especificidad de iGaming

Coeficientes/mandos: hover realza la fila/celda, pero no cambia las métricas de posicionamiento (sin «saltar»).
Tarjetas de torneos/bonos: hover puede «animar» el marco/icono, pero el texto CTA y las condiciones permanecen legibles (≥ 4. 5:1).
Notificaciones responsables (18 +, límites): sin efectos de distracción; solo se permite el subrayado de enlaces y un enfoque claro cuando se guía.
Botones de apuestas/compras: active-feedback obligatorio (clic visual/presionado) e inequívoco disable después del envío.

16) Ejemplos de recetas de interfaz

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

Ocultar actividades/menús críticos sólo por detrás de hover.
Cambiar las dimensiones/distribuciones cuando se mueven (saltos layout).
Apoyarse sólo en el color para distinguir estados.
Parpadeo, pulsaciones infinitas, glow «ácido» en los textos.
La ausencia de estilos focus o su invisibilidad sobre un tema oscuro.
Apuntar el cursor 'pointer' a elementos no interactivos.

18) Lista de comprobación de QA

Disponibilidad

• Todos los interactivos son alcanzables a través del teclado; el enfoque ve.
• El contenido de hover está disponible por 'focus '/' aria'.
• El contraste de texto e iconos corresponde a WCAG.

la Conducta

• Hover/active/disabled/visited son distinguibles por la forma y el tono.
• No hay retraso en la respuesta> 120 ms.
• Hay una alternativa al tac.

Performance

• Sólo 'transformación '/' opacity' se animan.
• No hay blur/sombras pesadas en muchos elementos.
• En las listas largas, los efectos se minimizan.

19) Documentación en el sistema de diseño

Tabla de estados para componentes básicos (botones, referencias, tarjetas, campos, filas de tablas).
Señales de duración/curvas/sombras y código de ejemplo para luz/oscuridad.
Sección «Hover vs Touch»: reglas alternativas y ejemplos.
"Do/Don 't' con clips cortos y métricas de contraste.

Resumen breve

Los efectos de guía son una parte auxiliar pero crítica del lenguaje de interfaz. Hazlos concisos y predecibles, admite teclado y tac, proporciona contraste y enfoque visible, anima sólo propiedades baratas. Entonces, la interactividad aumenta la claridad y la velocidad de las acciones, en lugar de interferir con ellas.