Este artículo acerca algunos conceptos teóricos a tener en cuenta a la hora de emplear la animación como otro elemento más dentro de la comunicación visual en el desarrollo de una interfaz.
Hace unos días leía este artículo donde planteaban (entre otras muchas cosas) la sustitución del término design por el de motion en la definición que hizo Steve Jobs sobre el diseño... "Motion is how it works"
Sin querer ser tan categórico con esta afirmación, sí es cierto que la animación es uno de los factores que menos se ha tenido en cuenta a la hora de abarcar las distintas partes del proceso de diseño de un producto digital, ya sea web o aplicación movil.
Sin embargo es tan importante como el resto de factores que intervienen en el campo de experiencia de usuario y diseño de interfaz.
Por fortuna, esto está cambiando últimamente y cada vez más la animación forma parte del resto de factores a tener en cuenta a la hora de abordar el desarrollo de un proyecto.
Este artículo propone unas pautas a tener en cuenta a la hora de introducir la animación como otro factor de diseño en un flujo de trabajo.
¿Qué aporta la animación?
Uno de los errores más frecuentes es confundir la animación con la capacidad de "mover" elementos en la pantalla.
Respecto al corto de Pixar que dió lugar al logo de la compañía, Luxor Jr., John Lasseter comentaba:
…they were simple desk lamps with only a minimal amount of movement, but you could immediately tell that Luxo Jr. was a baby, and the big one was his mother…
En definitiva, animar es la capacidad de dotar de vida a los elementos en pantalla. No se trata de moverlos por el hecho de que sea posible, sino de dotar a dichos elementos de una "voz" que permita transmitir mediante movimiento sus características.
Todas las animaciones deben tener un propósito: enriquecer la comunicación que se transmite.
Fundamentos de la animación
En el desarrollo de las películas de animación tradicionales de Disney se encontraban un conjunto de profesionales que se dieron a conocer como los 9 ancianos (9 old men).
Este grupo de artistas animadores trabajaba con un conjunto de reglas conocidas como los 12 principios de animación.
Estas reglas sentaban las bases a seguir a la hora de definir el comportamiento de las animaciones. Aplicar estas reglas resultaba imprescindible a la hora de consolidar el nuevo lenguaje visual que suponía la animación.
A continuación enumero los 3 principios que considero más importantes a la hora de realizar animaciones en soporte digital (web/apps):
Timing
Este principio refiere a la duración y ritmo de las animaciones. Es muy importante definirlo bien si queremos transmitir correctamente el mensaje.
Las animaciones muy rápidas pueden no ser percibidas por el usuario, mientras que las muy lentas pueden "aburrir", perjudicando la comunicación.
Podemos ver un correcto equilibrio de tiempos en banners publicitarios que contengan texto... Una animación muy rápida puede provocar que el usuario no tenga tiempo a leer el mensaje, pero si los textos duran mucho tiempo en pantalla, el usuario puede perder interés en el mensaje.
Anticipation
Este principio define la acción que "prepara al usuario" sobre una acción inminente, incrementando la atención del usuario.
Un ejemplo que ilustra este principio lo podemos ver en la app de Twitter para iOS. Al abrir la app aparece una pantalla de presentación con el logo. Tras cargar los contenidos hay una transición a la línea de tiempo, pero para indicar esa transición, el logo hace un pequeño efecto rebote indicando que algo va a suceder.
Easing
Sin duda alguna, uno de los principios más importantes a la hora de animar.
El suavizado (easing) indica el movimiento natural de los objetos en la vida real, ya que casi todos los movimientos tienen una aceleración al comenzar y una deceleración al finalizar. Con lo que aplicar estos suavizados a nuestras animaciones les dota de más realismo.
En este ejemplo vemos 3 círculos recorriendo la misma distancia en el mismo tiempo, sin embargo los 3 son diferentes:
- El círculo superior no tiene suavizado con lo que su velocidad es lineal. Es un tipo de animación no orgánico.
- El círculo de en medio tiene un suavizado en la salida (al principio) con lo que comienza casi parado, incrementando su velocidad hasta llegar al final.
- El círculo inferior tiene un suavizado en la llegada (al final) con lo que pierde velocidad a medida que se acerca al punto final de la animación.
Salvo el primero, que parece un moviento más automático, más robótico, los otros dos movimientos tienen un caracter más orgánico, más natural.
Y son más fáciles de entender para el usuario.
Para obtener animaciones más orgánicas, podemos combinar los suavizados de salida y de llegada.
Otros principios
Viendo tan sólo 3 principios, se entiende la importancia de los mismos a la hora de realizar animaciones, así que invito a aquellos lectores que quieran profundizar más sobre estas reglas la lectura de los siguientes libros:
Categorizando las animaciones
Una vez que tenemos la parte "técnica" de las animaciones cubierta, me gustaría hablar de los tipos de animación que podemos emplear en nuesros proyectos.
A diferencia de los principios de animación, no existe una categorización estandar establecida, así que el siguiente listado de categorías debe tomarse como una simple referencia.
En mi caso, distingo 5 tipos diferentes de animaciones en soportes digitales (web/apps) dependiendo de su categoría.
1. Transición
Este tipo de animación permite al usuario entender mejor el flujo de eventos que suceden cuando se cambia el contexto del mensaje o contenido.
Un ejemplo que todos conocemos es el típico "lightbox", donde se muestra una animación que indica al usuario que la imagen seleccionada se va a ver con mayor tamaño y calidad sin abandonar la página.
Hace tiempo que dejamos atrás el paradigma de abrir una ventana nueva con la imagen, que normalmente generaba confusión al usuario
2. Feedback
Este otro tipo informa al usuario sobre acciones interactivas, tanto las realizadas por el propio usuario sobre diversos elementos como las sugeridas por la aplicación/web.
Diversos ejemplos de esta categoría de animación pueden ser los botones que se iluminan al ponernos encima con el ratón, las cartelas (toast) que aparecen al enviar un formulario, etc.
3. Llamada a la acción
Estas animaciones indican los elementos destacados de la interfaz que requieren la atención por parte del usuario, ya sea para resaltar posibles acciones e interacciones o para llamar la atención sobre determinados contenidos.
Actualmente muchas páginas emplean todo el espacio disponible de pantalla para mostrar el contenido primario, con lo que necesitan indicar al usuario que el resto del contenido se encuentra disponible mediante scroll. Una flecha animada en la parte inferior suele servir en estos casos.
4. Narrativa
Mediante este tipo de animaciones, el contenido se refuerza visualmente de manera muy notable, transformándolo incluso en favor de las propias animaciones.
Este tipo de animaciones son tan prominentes que suelen estar definidas dentro de apartados específicos del sitio web, casi a modo de monográficos.
Algunos ejemplos de este tipo de animaciones se pueden ver como ejemplo en determinados artículos del New York Times
5. Decorativa
Por último, este tipo de animaciones aportan un valor añadido meramente ornamental, reforzando visualmente el contenido pero por razones estéticas, con lo que resulta prescinsible a la hora de transmitir el mensaje.
La cabecera de la página de nace es un claro ejemplo de este estilo de animación.
Tono de la animación
Cuando realizamos animaciones se tiene que tener en cuenta el tono de las mismas de igual manera que elegimos una tipografía o una paleta de colores.
Las animaciones deben corresponder al tipo de contenido que acompañan y ser acordes al mensaje o la marca que representan.
Unas animaciones con un caracter rápido y aleatorio no concuerdan con una marca de alta joyería, pero pueden cuadrar mucho mejor si estamos comunicando acerca de una bebida energética.
Dicho esto, es interesante explorar diferentes aproximaciones en el tono de animaciones que podemos realizar, lo que puede permitir un enfoque diferente en el mensaje sin abandonar el tono específico del mismo.
Simplemente con variar el tipo de suavizados (easing) el tono del mensaje cambia. También el uso de fundidos y/o desenfoques pueden alterar el tono de la animación de una manera menos tradicional.
Empleo de animaciones
Por fortuna no existe una única forma de realizar animaciones (donde estaría la gracia si no), pero si debemos tener en cuanta una serie de parámetros que sirvan de indicativo de cara a la efectividad de las animaciones que implementemos en nuestros proyectos.
Por un lado debemos tener en cuenta la comprensión de la animación, que refiere al nivel de realismo que entiende el usuario, asi como el uso de leyes físicas aplicadas en el desarrollo de la animación. Elementos que "botan" hacia arriba en vez de hacerlo hacia abajo (gravedad) pueden causar confusión en el usuario.
Es muy importante la velocidad que define la duración de las animaciones. El ritmo de la animación debe ser equilibrado, evitando animaciones muy rápidas que sean dificilmente percibidas por el usuario así como las animaciones muy lentas que pueden generar la sensación de "error" o de que algo no funciona correctamente.
Además, las animaciones, como otros elementos del lenguaje visual están condicionadas por su uso repetido... la costumbre del usuario a determinados patrones de animación que le resultan conocidos al haberlos visto implementados de manera frecuente.
Por último, y sin llegar a ser una fórmula exacta, creo razonable equilibrar de manera inversamente proporcional la cantidad de animaciones que pueda tener un sitio web respecto a la cantidad de contenido del mismo junto con la cantidad de elementos de interacción.
Dicho de otra manera, cuanto mayor sea el contenido y los elementos interactivos, menor deberá ser la cantidad y tipos de animaciones aplicadas.
Buscando el equilibrio
En definitiva se trata, como hemos hablado, de encontrar un equilibrio entre todos los elementos que componen el diseño de interfaz, tomando a la animación como otro elemento más capaz de enriquecer (o estropear) el mensaje y uso de la misma.