Microinteracciones: Cuándo Ayudan, Cuándo Solo Estorban
Un botón que crece un poco o una tarjeta que se desliza suave se gana su lugar; el movimiento en cada rincón de una página no. Dónde trazar el límite.
Equipo de rabbitclipPublicación: 6 min. de lectura
En breve
Una microinteracción es la pequeña respuesta que da una página a la acción de un visitante, un clic, un hover, un scroll: un botón que crece un poco, una señal breve que confirma que un formulario se envió con éxito, un menú que se abre con una transición suave. Se gana su lugar en el momento en que aporta información: esto se hizo clic, esto tuvo éxito, esto está abierto ahora.
Ese mismo movimiento, añadido solo como decoración sin ninguna información, se convierte en ruido. Cada tarjeta que gira al entrar en la página, cada titular que se escribe letra por letra, hace esperar al visitante en lugar de entretenerlo; esos pocos segundos de retraso se acumulan y hacen que una página parezca lenta, sin importar su tiempo de carga real.
A continuación, tres temas: qué movimiento se gana su lugar, dónde está el límite, y cómo respetar una preferencia de movimiento reducido.
Qué movimiento aporta información
Una microinteracción funcional responde a una pregunta que se hace el visitante: ¿lo que hice clic funcionó realmente?, ¿envié bien el formulario?, ¿este menú está abierto o cerrado? Un breve indicador de carga que aparece al pulsar el botón de envío de un formulario de pedido le dice al visitante que la acción está en curso; sin él, un visitante podría pulsar una segunda vez, lo que puede causar un problema real como un envío duplicado.
Una pequeña marca verde que aparece cuando un campo del formulario de inscripción de un club deportivo se rellena correctamente entra en la misma categoría; muestra al visitante que va por buen camino y reduce las ganas de volver arriba a comprobarlo todo antes de terminar.
Dónde está el límite
Un movimiento cruza el límite en cuanto dura más de unos segundos, en cuanto una animación distinta se reproduce en cada rincón de la página, o en cuanto distrae la atención del contenido real. Que cada elemento visual se deslice desde una dirección distinta en la página de un estudio de videojuegos puede impresionar la primera vez, pero se percibe como lentitud en la segunda visita.
Una medida práctica: el movimiento debería terminar antes de que empiece a leerse el contenido. Si un elemento sigue deslizándose o parpadeando mientras el visitante ya ha empezado a leer una frase, hay que acortar su duración o eliminarlo por completo.
Respetar una preferencia de movimiento reducido
Algunos visitantes mantienen activado el ajuste «reducir movimiento» a nivel de sistema operativo; suele ser un ajuste de accesibilidad para personas que sufren mareo o náuseas provocados por el movimiento. El navegador transmite esa preferencia al sitio mediante una señal llamada prefers-reduced-motion (MDN Web Docs, prefers-reduced-motion); un sitio puede leer esa señal y desactivar las grandes animaciones de deslizamiento y giro, manteniendo solo las transiciones realmente funcionales, como un cambio de color.
El estándar WCAG también recomienda que el movimiento activado por una interacción pueda desactivarse; esto entra en la columna de los requisitos de accesibilidad, no en la de preferencia de diseño (W3C WCAG 2.1, Animation from Interactions). Saltarse ese ajuste en la página de una aplicación puede dejar a un visitante sensible al movimiento sin poder usar la página en absoluto.
Cómo probarlo en la práctica
Antes de publicarse, un sitio debería recorrerse tanto en modo normal como en modo movimiento reducido, comprobando en ambos que las funciones clave, enviar un formulario, abrir un menú, moverse entre páginas, siguen funcionando sin romperse.
- Activar «reducir movimiento» a nivel de sistema y volver a probar el sitio
- Preguntarse, para cada movimiento por separado, si realmente aporta alguna información
- Mantener la duración del movimiento por debajo de un segundo, eliminar bucles repetidos
- Asegurarse de que las animaciones de entrada terminan antes de que empiece a leerse el contenido
El movimiento también puede ser una decisión de marca
Para algunas marcas, un movimiento medido forma parte de la identidad; el sitio de una agencia creativa o de un estudio de videojuegos puede llevar un lenguaje de movimiento más lúdico que la mayoría. Para una empresa de gestión de instalaciones o un despacho de abogados, esa misma intensidad de movimiento puede jugar en contra de la seriedad que busca la marca. La cantidad correcta depende del sector y del tono que espera el visitante.
Estados de carga: pantallas esqueleto o spinners
Lo que se muestra en pantalla mientras carga el contenido es también una decisión de microinteracción. Un spinner solo dice «espera»; una pantalla esqueleto muestra un contorno tenue de cómo se verá el contenido, lo que da al visitante una idea más clara de qué está esperando.
Unos bloques grises pálidos con forma de tarjeta que aparecen mientras carga un listado de productos generan menos sensación de espera que una pantalla en blanco o un simple spinner; la diferencia se nota sobre todo cuando la carga supera un segundo.
Cuándo usar el sonido y la vibración como retroalimentación
Una vibración leve en un dispositivo móvil puede confirmar que una acción se completó de forma incluso más clara que un movimiento visual; pero, usada en exceso, esa misma retroalimentación se vuelve molesta. Funciona mejor cuando se reserva para momentos realmente importantes, en lugar de activarse en cada toque.
La retroalimentación sonora es una elección más rara y arriesgada en un sitio web; un sonido inesperado puede sobresaltar a un visitante, sobre todo en un entorno silencioso. Si se añade sonido, debe venir con una forma clara de desactivarlo.
En la página de una aplicación, mostrar la vibración o el sonido reales del producto en un vídeo suele ser una elección más segura y eficaz que añadir ese mismo efecto en el propio sitio.
El movimiento ayuda cuando aporta información, y cansa cuando se acumula como decoración. rabbitclip limita el movimiento a su función en cada proyecto y respeta por defecto una preferencia de movimiento reducido; cómo usa el movimiento su sitio actual puede revisarse con nosotros.
Preguntas frecuentes
¿Qué es prefers-reduced-motion?
Una preferencia que un visitante activa a nivel de sistema operativo; el navegador la transmite al sitio, que puede entonces reducir el movimiento en consecuencia.
¿Hay que eliminar toda animación en modo movimiento reducido?
No, solo las grandes, deslizamiento, giro, zoom; las transiciones pequeñas como un cambio de color pueden mantenerse.
¿Es un problema una animación de entrada al cargar la página?
No si termina antes de que empiece a leerse el contenido; a partir de unos segundos, empieza a hacer que la página parezca lenta.
¿La cantidad correcta de movimiento depende del sector?
Sí, un lenguaje de movimiento lúdico encaja bien en una agencia creativa pero puede jugar en contra del tono de un despacho de abogados con la misma intensidad.
¿Debe usarse una pantalla esqueleto en cada carga?
No, aporta poco en cargas muy breves (menos de medio segundo); el beneficio real aparece a partir de una carga de más de un segundo.
