Da un propósito a cada transición
Un hover puede señalar un enlace. Una transición puede explicar un cambio de contenido. Define el propósito antes de animar y elimina efectos que compitan con la lectura o escondan la siguiente acción.
Diseña más allá del ratón
Acompaña el hover con un estado de foco para teclado. Mantén enlaces y etiquetas visibles en pantallas táctiles. No obligues al visitante a esperar una secuencia decorativa para utilizar la página.
Revisa la versión sin movimiento
Incluye un estado de movimiento reducido y revisa la página sin animaciones. El orden, los controles y el significado deben conservarse. Evalúa los efectos juntos: varias animaciones pequeñas pueden distraer.
Describe primero el cambio de estado
Empieza por la interacción: se abre un menú, un filtro cambia los resultados o una galería muestra la siguiente imagen. El visitante debe entender el nuevo estado aunque se elimine la transición. Mantén visibles los filtros seleccionados, la cantidad de resultados y las etiquetas de los botones. El movimiento puede conectar dos estados, pero no debe ser el único soporte de una instrucción esencial.
Elige un alcance pequeño y comprobable
En un filtro de portfolio, conserva una cuadrícula estable al cambiar la selección y evita desplazar todas las tarjetas por la pantalla. Reserva espacio para las imágenes antes de cargarlas. En móvil, comprueba que el control activo y el inicio de los resultados sean fáciles de encontrar. Una actualización inmediata y clara puede funcionar mejor que una secuencia larga que retrasa la siguiente acción.
Revisa el mismo recorrido de tres formas
Completa la interacción con ratón, teclado y movimiento reducido activado. Comprueba el foco visible y el orden de los controles. Un panel debe comunicar si está abierto; al cerrarlo, el foco no debe quedar dentro de contenido oculto. Un video informativo necesita controles y texto que explique la demostración. Revisa la animación en un dispositivo menos potente y elimina los efectos que dificulten la tarea.