Diseño UI

Animación en UX: ¿Cómo sacarle el máximo provecho?

Para algunos diseñadores el valor de la animación radica en su capacidad de lograr que el usuario salte de su asiento sorprendido, luego de ver cómo los elementos se mueven graciosamente en su pantalla.

Para otros, en cambio, el rol de la animación es mucho más complejo. El beneficio de su uso se sustenta en las posibilidades que ofrece a los profesionales UX para diseñar experiencias digitales más sólidas, ya sea fortaleciendo el storytelling o incluso dando a conocer atributos de la arquitectura de información que antes se desconocían.

La animación contextualiza, orienta, entrega feedback y naturaliza las interfaces haciendo más fácil el consumo de la información. José Torre escribe en un extenso artículo sobre algunos de estos puntos en “6 Animation Guidelines for UX Design”. Su visión radica en que la animación en UX no debe ser entendida como un elemento meramente ornamental sino como un lenguaje que otorga solidez y consistencia a la experiencia.

Torre también plantea la necesidad de integrar la animación incluso en la etapa de wireframes. Esto porque el valor real de la animación aparece sólo cuando la información ha sido pensada en función de ella.

Veamos el siguiente ejemplo de Showtime App by Lift

La aplicación Showtime de la empresa Lift utiliza muchos recursos animados que facilitan su experiencia de uso. Por ejemplo, cuando el usuario hace click en la imagen de un evento, esta se agranda apropiándose de todo el ancho de la pantalla.

Acto seguido, bajo ella, se despliega un fondo blanco donde se ubica la información específica del evento. Gracias a esta transición queda muy claro que el contenido que estamos leyendo.

Así, mediante este tipo de recursos animados se reducen las posibilidades de que el usuario se pierda o no entienda lo que sucede. La información ya no pasa abruptamente de un estado a otro y ya forma parte de un flujo de continuidad que fortalece la experiencia.

Animación UX: una re-interpretación de los principios clásicos

Por años la animación UX ha sido entendida en base a los 12 principios básicos de la animación tradicional institucionalizados por los estudios Disney, el que se puede ver en el libro “The Illusion of Life 1981″.

Fuente: Cento Lodigiani

A pesar de que estos principios son los pilares de la industria del entretenimiento actual (cine, televisión y videojuegos), aún se evidencian brechas conceptuales entre estos principios de la animación y el mundo de la UX.

Hace un poco más de un año, Issara Willenskomer, escribió el artículo “Creating Usability with Motion: The UX in Motion Manifesto”, donde propone una re-interpretación de los principios clásicos de la animación de Disney ahora aplicados al mundo de la UX.

El principal acierto de Willenskomer, es entender que en UX ya no necesitamos animar personajes de ficción ni caricaturas con características humanas. Ahora el protagonista es la información.

Es así como el autor define cuatro ejes en los que la animación potencia la usabilidad:

• Expectación: reduce la brecha entre lo que el usuario espera y lo que realmente sucede.
• Continuidad: otorga consistencia y continuidad a la interacción, ya sea dentro de una escena o entre distintas escenas.
• Narrativa: ayuda a construir el relato que se conforma luego de una serie de eventos.
• Relación: describe las relaciones espaciales, temporales y jerárquicas entre los elementos de una interfaz.

Con estos ingredientes en mente, el rol de la animación adquiere poder y valor.

¿Cuándo es necesario animar los elementos de mis interfaces?

Aunque no hay un patrón definido de cuando se debe usar la animación y cuando no, sí hay que tener en cuenta que su uso dependerá directa y exclusivamente de las características y objetivos del proyecto que desarrolles.

La complejidad de las acciones, el dispositivo en el que se navega, entre otros, serán factores trascendentales para definir la forma en cómo las transiciones y el movimiento serán parte de tu proyecto.

En el contexto de diseño de aplicaciones, las animaciones tienden a ser utilizadas más a menudo para solucionar problemas de interacción complejos en espacio reducido. Así, el uso de máscaras, transiciones, zooms, entre otras, serán tu mejor aliado al momento de diseñar para este tipo de proyectos.

En el mundo web, en cambio, la limitante técnica juega un papel más determinante como mencionamos anteriormente. Por ende, cualquier recurso visual adicional puede afectar la velocidad de descarga o perjudicar la correcta visualización de la página. Por esta razón, recomendamos aplicar movimientos y transiciones a aquellos elementos donde sea estrictamente necesario.

Es siempre importante recordar que, tal como lo comenta Steven Fabre en su artículo “Invisibile Animation”, el usuario al navegar “no debería notar que está viendo animación”. En la sutileza está el arte, ya que animar por animar nunca ha sido la solución.