Animaciones y Microinteracciones en el Menú: ¿Encanto o Distracción?

El dueño de un café de 18 mesas en Galata, Estambul, pregunta: "Si añado animaciones al menú, ¿se quedan más los clientes?" La respuesta está en los milisegundos. UX Movement 2023 lo deja claro: 200-300ms se siente fluido, más de 500ms se siente pesado. Tras añadir animaciones de fundido por scroll, el tiempo en página subió 19% y el abandono cayó 12%.

Duraciones Óptimas y Curvas de Easing

La duración depende de la percepción humana. Menos de 100ms pasa desapercibido; 200-300ms se siente natural; 500ms+ es lento. Para easing, cubic-bezier(0.4, 0, 0.2, 1) — el estándar de Material — produce movimiento natural.

Un stagger de 60ms al cargar crea sensación premium, pero más de 8 tarjetas resulta excesivo. En móvil, 200ms es ideal — duraciones mayores chocan con interacciones táctiles.

Lo Que Funciona y Lo Que No

Funciona: pestaña de categoría con subrayado deslizante (250ms), botón "añadir al carrito" con scale 1,05x más icono de check, pulsación del corazón al marcar favorito, fade-in al hacer scroll.

• Hover scale 1,02x — sensación táctil
• Rebote del badge del carrito — capta atención
• Skeleton loader — anticipa el contenido

Excesos y Accesibilidad

El exceso de animación es problema de accesibilidad. Respeta prefers-reduced-motion — obligatorio en WCAG 2.1.

Parallax, vídeos autoplay e iconos en giro infinito son distracción clara. El café de Galata detuvo un badge pulsante tras 2 segundos — CTR subió 23%.

FAQ

¿Duración ideal? 200-300ms en microinteracciones, máximo 400ms en transiciones.

¿Cuáles dañan el rendimiento? width/height por JS provocan reflow; transform y opacity en CSS van por GPU.

¿Desactivar para mayores? Solo vía prefers-reduced-motion, no automáticamente.

¿Te resultó útil? Compártelo.