1. Web Design
  2. UX/UI
  3. Prototyping

3 Objetivos significativos del diseño con movimiento (con ejemplos)

Scroll to top

Spanish (Español) translation by Carlos (you can also view the original English article)

Emparejar el movimiento con los objetivos clave del usuario puede asegurar que tus diseños sean significativos y no solo añadan una carga cognitiva para tus usuarios.

Aquí hay algunos objetivos, con ejemplos, que tu diseño con movimiento puede apoyar.

1. Llamar la atención

El movimiento puede brindar énfasis a un área de la página que sea relevante para el usuario.

¿Necesitas que un usuario tenga en cuenta un error o un paso importante que perdió en un formulario web? Añadir movimiento puede atraer rápidamente la atención del usuario a una parte de la página para que pueda tomar medidas.

Este «pen» de Alex Mourer usa el movimiento para dar retroalimentación continua:

Please accept marketing cookies to load this content.

2. Añadir participación

Aun un movimiento sutil puede proporcionar la confirmación de una acción del usuario en un elemento de la página. Esto ayuda para que tus usuarios entiendan que sus comentarios han sido procesados ​​o ingresados ​​en el sistema. También puede desviar la atención de los procesos en segundo plano, como el tiempo de carga de una transición de página.

Una animación divertida o lúdica durante la carga de la página es una oportunidad para exponer la personalidad de tu marca a tus usuarios, como este ejemplo hipnótico de Rachel Smith:

Please accept marketing cookies to load this content.

3. Explicar las relaciones espaciales

El movimiento puede proveer una transición fluida entre los diferentes componentes de la página. Por ejemplo, en dispositivos móviles, el movimiento se utiliza con frecuencia para las interacciones detalladas entre las transiciones de página. Los elementos cambian de tamaño y muestran una relación dimensional (apareciendo delante o detrás de otros componentes), lo que le da al usuario pistas visuales sobre lo que sucederá después.

Este ejemplo de Koen Vendrik demuestra estas relaciones perfectamente:

Please accept marketing cookies to load this content.

Conclusión

El diseño con movimiento es una herramienta poderosa y atractiva en la caja de herramientas del diseñador. Si bien puede ser tentador añadir más detalles de movimiento, evalúa qué objetivos del usuario pueden admitir el diseño con movimiento para que tus diseños sean creados sobre decisiones significativas y que no obstruyan a tus usuarios ni los haga perder su tiempo.