El impacto del Motion Design en la experiencia de usuario

El campo del Motion Design está cobrando cada vez más peso y relevancia en el diseño de experiencia de usuario. El avance de la tecnología y los nuevos formatos digitales están redefiniendo las formas de comunicación. Hoy quiero compartir en este post el impacto de estas tendencias en el diseño de productos digitales.

Beneficios clave del Motion Design en la experiencia de usuario

Las imágenes en movimiento dentro del mundo web han sido un tema de debate desde los inicios. Así pues, encontramos pertinente evaluar varias ideas sobre los efectos positivos que el diseño de movimiento puede tener en la experiencia de usuario. 

Según el artículo Motion Design in UX el diseño de movimiento es un componente vital en la creación de interacciones entre los usuarios y los productos digitales. Uno de los objetivos de las empresas es ofrecer mejores historias mediante la creación de Motion Design. Una aplicación adecuada del diseño de movimiento ayuda a una experiencia de usuario de mejor calidad para la marca. 

El diseño de movimiento también ayuda a crear interfaces de usuario agradables y fáciles de utilizar. La animación juega un papel esencial en la mejora de la experiencia de usuario añadiendo recursos potentes para la narración visual. Además, las microinteracciones muestran al momento las relaciones entre los elementos de una interfaz, facilitando así la navegación del usuario dentro del producto.

Asimismo, las animaciones alineadas con los valores de branding permiten reforzar la personalidad de la marca. Hay que recordar que el Branding invierte muchos recursos en diseñar un aspecto exclusivo y diferencial que será recordado por los usuarios. Se podría decir por lo tanto, que el diseño de movimiento es percibido por los usuarios más vívidamente que las imágenes estáticas.

Patrones de animación en el diseño de movimiento

De acuerdo al artículo Motion design and its impact on user experience, los patrones que impactan en la usabilidad y la experiencia de usuario se pueden categorizar de la siguiente manera:

Patrones de transición.

Los patrones de transición de navegación, proporcionan una base sólida para el diseño de movimiento. La simplicidad y la coherencia son clave para diseñar transiciones navegables. 

Transiciones basadas en un contenedor

Si la interfaz de usuario de una aplicación alberga botones, tarjetas o listas, el diseño de transición se basará en animar el contenedor.

via GIFER

Transiciones sin contenedor

Si hablamos de pantallas cuyas transiciones no se basan en contenedores, por ejemplo, cuando el usuario toca un icono en la parte inferior de la pantalla para navegar a una nueva página.

via GIFER

Señales gráficas animadas

El diseño de movimiento proporciona orientación al usuario mediante el uso de animaciones para decirle dónde debe focalizar su atención en cada momento, qué hacer a continuación o qué es lo más importante dentro de la interfaz. Estos movimientos hacen que las navegación parezca más natural y menos abstracta. El Motion Design le da vida a la interfaz mientras mantiene el contexto en todo momento.

Movimiento fluido y receptivo

Los usuarios ya han comenzado a exigir productos digitales que sean fluidos y receptivos. Generalmente en entornos web el modelo mental de los usuarios les lleva a pasar el cursor sobre un elemento cuando no están seguros de su función. Una buena interfaz proporcionará al usuario comentarios instantáneos en forma de microinteracciones.

Transiciones de entretenimiento

En este caso el diseño de movimiento se utiliza para entretener o distraer a los usuarios a medida que el status de un objeto o página, pasa a al siguiente estado.

Transiciones para fomentar el diseño emocional

Agregar diseño de movimiento para expresar el carácter de un producto digital genera una mayor respuesta emocional en los usuarios que las imágenes estáticas. El diseño de movimiento efectivo enfatiza la personalidad de las interfaces de usuario más allá de su identidad visual y, por lo tanto, tiene importantes impactos en el comportamiento y las emociones de los usuarios.

Cómo analizar la usabilidad en el Motion Design

De acuerdo a lo que explica el artículo Creating Usability with Motion: The UX in Motion Manifesto existen cuatro pilares básicos sobre los que se apoya el diseño de movimiento para reforzar la usabilidad de los productos digitales:

• Expectativas. Engloban principalmente dos áreas: cómo los usuarios perciben un objeto, y por otro lado cómo se comporta dicho objeto. Como profesionales del diseño, el objetivo para dotar de una usabilidad eficaz a los productos, es minimizar la brecha entre lo que el usuario espera y lo que realmente experimenta.
• Continuidad. Este concepto habla de mantener consistencia a lo largo de todo el user journey de los usuarios. En términos de diseño de movimiento se pueden diferenciar dos conceptos principales:
  • Intra-continuidad: la continuidad dentro de una escena
  • Inter-continuidad: la continuidad dentro de una serie de escenas que conforman la experiencia total del usuario.
• Narrativa. La narrativa es la progresión lineal de eventos en la experiencia de usuario que suceden dentro de un marco temporal / espacial. 
• Relación. Este concepto se refiere a las representaciones espaciales, temporales y jerárquicas entre los objetos de la interfaz. Estas relaciones ayudan a los usuarios a tomar decisiones, y los guían y orientan en el transcurso de sus flujos y navegaciones.

Los 12 principios del UX en el Motion Design

Siguiendo el hilo del artículo Creating Usability with Motion: The UX in Motion Manifesto, existen 12 principios muy a tener en cuenta, y que relacionan directamente el diseño de movimiento con la experiencia de usuario. Son los siguientes:

1. Flexibilización. Dentro de este principio el comportamiento del objeto se alinea con las expectativas del usuario cuando ocurren eventos temporales. La flexibilización crea y refuerza la naturalidad inherente a la fluidez de la experiencia del usuario, y genera una sensación de continuidad cuando los objetos se comportan como los usuarios esperan que lo hagan. Disney se refiere a esto como ‘ Slow In y Slow Out ‘.
2. Seguimiento y acción superpuesta. Define las relaciones y jerarquías de objetos al introducir nuevos elementos y escenas en pantalla. Este principio también es originario de Disney. Sin embargo, es importante tener en cuenta que la implementación, aunque similar en ejecución, difiere en propósito y resultado. Mientras que los principios de Disney resultan en ‘animaciones más atractivas’, los principios de animación UI consiguen experiencias de usuario fluidas, agradables, y sencilla.
3. Jerarquías visuales. Manteniendo la jerarquía visual animada, el usuario manipula directamente los objetos de la interfaz, mientras ésta se comunica con el aquel a través del movimiento. De este modo informaremos al usuario sobre las jerarquías y vínculos entre elementos. 
4. Transformación. En este principio se crea un estado continuo de flujo narrativo cuando la utilidad del objeto cambia. Este principio es el más perceptible, y uno de los más utilizados. Como ejemplo claro, un botón ‘enviar’ puede cambiar de forma convirtiéndose en una barra de progreso para finalmente mostrar una marca de verificación. Esta animación llama la atención de nuestros usuarios, cuenta una historia, y completa una acción.
5. Cambio de valor. Crea una relación narrativa dinámica y continua cuando algún objeto cambia de valor. Los objetos de interfaz basados ​​en texto, es decir, números y texto, pueden cambiar sus valores. Este es uno de esos conceptos ‘evasivos obvios’. Cuando se emplean representaciones de sistemas dinámicos en forma de valores basados ​​en el movimiento, se activa una especie de ‘neurofeedback‘ en los usuarios, generando una mayor conexión con la realidad detrás de esos valores.
6. Enmascaramiento. Mediante el uso temporal de las regiones vistas y ocultas de un objeto, preservamos el determinado flujo narrativo que se quiera mantener con los usuarios.
7. Superposición. La superposición (overlay) permite a los diseñadores utilizar técnicas de movimiento para comunicar la existencia de objetos dependientes de la ubicación, que se pueden encontrar detrás o delante de otros.
8. Clonación. Crea continuidad, relación y narrativa, cuando se originan y dividen nuevos objetos. El enmascaramiento, la clonación y la dimensionalidad son tres enfoques basados ​​en la usabilidad para producir narrativas sólidas.
9. Oscurecimiento.- Este principio permite a los usuarios orientarse espacialmente dentro de la interfaz en relación a objetos o escenas que no están en la jerarquía visual primaria.
10. Paralaje. Genera una jerarquía espacial en el plano visual cuando los usuarios se desplazan. Este principio permite a los usuarios enfocarse en acciones y contenido primarios mientras  se mantiene la integridad del diseño.
11. Dimensionalidad. Se trata de un principio clave para la experiencia de usuario ya que proporciona una forma poderosa de ir más allá del 2D de los productos digitales. Proporcionar referencias de origen y salida espacial ayuda a reforzar los modelos mentales de los usuarios en términos espaciales.
12. Dolly & Zoom. Dolly y Zoom son conceptos fílmicos que se refieren al movimiento de objetos relevantes para la cámara, y el tamaño de la imagen en sí misma. Se trata de cambios de toma (de una toma larga a una toma de primer plano -o viceversa-). Estas técnicas dan como resultado una experiencia más espacial, más profunda, y resalta al usuario áreas adicionales o contenido que está «al frente» o «detrás» de la vista actual.

Tal y como hemos expuesto, las ventajas y posibilidades del diseño de animación abarcan una gran cantidad de técnicas y ventajas. El Motion Design refuerza eficientemente la fluidez de los diseños, promoviendo la comunicación con los usuarios, y guiandolos a través de todos los flujos de navegación de los productos digitales.