La idea clave
Cada animación debería tener una función: orientar, explicar un cambio o dar carácter sin interferir con la lectura y el control.
Una transición puede hacer que una interfaz se sienta más clara. También puede convertirse en un obstáculo entre la persona y lo que quiere hacer. Antes de decidir cómo se mueve un elemento, nos gusta definir qué aporta ese movimiento a la experiencia.
No hace falta animar todo para crear una web con personalidad. A menudo basta con elegir pocos momentos y relacionarlos bien: la entrada a una sección, la respuesta de un botón o el paso entre dos estados.
Dar una tarea a cada animación
En una revisión de diseño, prueba a describir la función del efecto sin usar la palabra “bonito”. Quizá dirige la atención hacia una acción, muestra que una tarjeta se ha abierto o conecta dos estados del mismo componente.
El movimiento expresivo también tiene lugar. Una pieza artística puede comunicar carácter y convertir la llegada en un momento memorable. Conviene distinguir esa intención del movimiento necesario para entender la interfaz y decidir cuánto espacio merece cada uno.
Si cuesta explicar qué aporta una animación, compara la experiencia con ella y sin ella. La versión más sencilla puede ser la que mejor acompañe el contenido.
Parallax con espacio y medida
El parallax hace que distintas capas se desplacen a ritmos diferentes. Nos interesa cuando ayuda a percibir profundidad en una composición; pierde sentido si dificulta leer, seguir un enlace o entender dónde termina una sección.
Como criterio de diseño, reservamos el efecto para capas decorativas y desplazamientos contenidos. El texto y las acciones conservan una posición predecible. La persona sigue controlando el scroll con su ratón, teclado o pantalla táctil.
En móvil revisamos de nuevo el encuadre y el espacio disponible. Mantener la proporción de una imagen no significa que deba ocupar el mismo tamaño que en escritorio. Significa que su forma sigue siendo reconocible mientras la composición se adapta.
Una interfaz puede tener carácter sin pedirle al visitante que espere a que termine un efecto.
El ritmo entre los elementos
Una página con muchos elementos entrando a la vez puede sentirse ruidosa. Una secuencia demasiado lenta puede ocultar información que la persona ya está intentando leer. Por eso revisamos las transiciones dentro del recorrido completo, además de verlas aisladas.
El orden de aparición debería acompañar el orden de lectura. Los controles deben responder al activarlos y las interrupciones deben ser posibles: abrir otro elemento, cerrar un diálogo o continuar desplazándose no debería dejar la interfaz en un estado incompleto.
La duración exacta depende del recorrido, la distancia y la función. Un pequeño cambio de estado y una escena editorial extensa no tienen por qué compartir el mismo ritmo.
Una experiencia con menos movimiento
Algunas personas prefieren reducir las animaciones. La web puede consultar esa preferencia mediante prefers-reduced-motion y ofrecer una presentación más tranquila. La documentación de MDN explica cómo funciona esta consulta de medios.
En esta web, la preferencia de movimiento reducido conserva el texto, las imágenes y todas las acciones. Es una decisión de diseño: la experiencia completa debe seguir teniendo sentido cuando nada se desplaza por su cuenta.
Revisar el recorrido, no solo el efecto
Una comprobación útil incluye situaciones diferentes:
- Recorrer la página rápidamente y volver al principio.
- Navegar por los controles usando el teclado.
- Abrir y cerrar un elemento antes de que termine su transición.
- Revisar móvil y tablet en tamaños reales de lectura.
- Activar la preferencia de movimiento reducido.
- Confirmar que las animaciones fuera de pantalla no siguen haciendo trabajo innecesario.
El criterio final es sencillo de formular, aunque exige atención al detalle: el movimiento debería acompañar a la persona. Si la obliga a esperar, le oculta información o le quita control, toca ajustar la experiencia.
