Cuándo el movimiento en una página ayuda y cuándo estorba

El movimiento ayuda cuando hace un trabajo concreto: confirmar que algo pasó, mostrar de dónde vienes y a dónde vas, o señalar la única cosa que importa. Estorba cuando decora sin función, compite con tu mensaje, retrasa la carga o provoca malestar físico a algunas personas. Antes de pedir una animación en tu página, hazle una sola pregunta: ¿qué hace esto por mi cliente?

Cuándo ayuda

Nielsen Norman Group, una consultora de investigación de usabilidad, identifica cuatro propósitos en los que la animación aporta algo:

• Retroalimentación. Un botón que cambia al tocarlo confirma que el sistema recibió la acción.
• Estado. Un indicador mientras se envía un formulario avisa que algo está pasando y que todavía no se puede seguir.
• Orientación. Una transición que se desliza hacia un lado ayuda a entender si avanzas, retrocedes o sigues en el mismo lugar.
• Atención. Un movimiento breve hace notar un detalle sutil que de otro modo pasaría desapercibido.

También importa cuánto dura. Según el mismo grupo, la mayoría de las animaciones de interfaz caen entre 100 y 500 milisegundos: unos 100 para una confirmación simple, de 200 a 300 para un cambio grande de pantalla, y siempre la duración más corta que no resulte brusca. Medio segundo ya es mucho para un botón.

Cuándo estorba

Hay cuatro formas de que el movimiento juegue en contra, y conviene distinguirlas.

1. No tiene relación con lo que la persona quiere hacer

Nielsen Norman Group advierte que la animación irrelevante para la tarea degrada la experiencia, que varias animaciones al mismo tiempo compiten por la atención y que el movimiento usado solo para rellenar una espera suele frustrar. Si tu cliente llegó a ver el horario y el titular se escribe letra por letra, el movimiento le está cobrando tiempo.

2. Se mueve solo y no se puede detener

La pauta de accesibilidad WCAG 2.2 pide, en su nivel A, que cualquier contenido que se mueva, parpadee o se desplace por sí solo, que dure más de cinco segundos y que aparezca junto a otro contenido, ofrezca una forma de pausarlo, detenerlo u ocultarlo. La razón: a quienes tienen trastornos de atención les cuesta concentrarse en el resto de la página. Eso incluye videos de fondo, carruseles automáticos y animaciones que no terminan. Hay excepciones, como el movimiento esencial para una actividad.

3. Provoca malestar físico

Para algunas personas, ciertos movimientos no son una molestia sino un problema. La explicación de WCAG sobre animaciones disparadas por interacción describe que los trastornos vestibulares (del oído interno) pueden causar mareo, náuseas y dolor de cabeza, y menciona que el movimiento activado al desplazarse por la página puede dispararlos. Nombra el efecto parallax, en el que el fondo se mueve a distinta velocidad que el frente, como ejemplo típico de movimiento no esencial. MDN añade que escalar o desplazar objetos grandes puede ser un detonante. Esta pauta es de nivel AAA, el más exigente, pero su razón de fondo no depende del nivel.

4. Cuesta velocidad

La guía de animaciones de web.dev recomienda limitarse a mover elementos con transform y a mostrarlos u ocultarlos con opacity. En su ejemplo, mover un elemento con las propiedades top y left perdió el 50 % de los cuadros de la animación, mientras que la versión con transform perdió el 1 %. Además, web.dev explica que un movimiento que empuja a otros elementos a una posición nueva cuenta como desplazamiento de diseño (CLS), un indicador que Google mide y que es malo si la persona no lo esperaba.

La regla que no se negocia: respetar «reducir movimiento»

Sistemas como Windows, macOS o iOS permiten a la persona pedir menos animación. Los navegadores lo exponen con una función llamada prefers-reduced-motion, disponible en todos los navegadores principales desde enero de 2020 según MDN. Cuando está activa, el sitio debe quitar, reducir o sustituir el movimiento. Web.dev precisa que se trata de eliminar el movimiento no esencial, no todo: lo que sirve para entender algo se conserva. También advierte que desactivar las animaciones a la brava puede romper sitios que dependen de los eventos de fin de animación.

En nuestro sitio, cada animación nueva tiene su versión sin movimiento, y los efectos más fuertes, como la inclinación en 3D o la red de nodos de la portada, solo corren en pantallas grandes con ratón. En teléfono y tableta se ve una versión sencilla. No es un sello de accesibilidad; es una regla de trabajo que nos obliga a pensar cada efecto dos veces.

Cómo decidir cuánto movimiento necesitas

• ¿Qué hace por mi cliente? Si no confirma, orienta o señala, es decoración.
• ¿Funciona sin movimiento? Quita las animaciones en tu cabeza: la página debe entenderse igual.
• ¿Cuánto pesa? Un video de fondo o una animación elaborada se paga en carga, sobre todo en un teléfono con mala señal.
• ¿Se puede detener? Si dura más de cinco segundos y arranca sola, necesita un control.

En Byte and Brand el nivel de movimiento es una decisión de negocio, no de gusto. El nivel Esencial se centra en tarjetas y tipografía cuidadas; el movimiento entra a partir del nivel Movimiento, con contadores y revelados; Inmersivo y Signature son para quien su categoría lo premie. Ninguno se vende como promesa de más clientes: se vende por lo que hace por la imagen de tu marca.

En resumen

Usa movimiento para confirmar, orientar o señalar; evítalo cuando solo decore. Respeta a quien pide menos animación, ofrece control sobre lo que se mueve solo y mide lo que pesa. Nuestro propio sitio no sale perfecto en esa medición, y por eso la publicamos.