Diseñar animaciones para interfaces
Cuándo y por qué el entorno que estás diseñando necesita un poco de movimiento.
En los dos últimos años se ha empezado a ver un aumento asombroso de sitios y apps, que incluyen animaciones en la interface que están especialmente diseñadas.
Lo cierto es que la animación, como recurso en las interacciones, es mucho mas viejo de lo que creemos. Sí, mucho antes que el Flash.
Apple lo utilizó desde siempre en sus sistemas operativos, incluso en su primer versión.
Esto hacía que las pantallas no fuesen tan estáticas, así como también otorgaba al usuario información de un entorno que aún no había aprendido/entendido.
Es por eso que decidí prestarle atención extra a la tendencia, para entender cuándo es necesario animar elementos de UI y cuándo las animaciones hacen ruido en la interface.
En mi práctica profesional tuve la oportunidad de hacer foco en la animación en proyectos que estuve involucrada, contemplando diferentes casos y escenarios. A partir de esto, saqué algunas conclusiones que me gustaría compartir.
El Motion en UI sirve para orientar a los usuarios
Es cierto, para nosotros está todo súper claro, pero para nuestros usuarios no, o no tanto. Partiendo de la base de que las interfaces deberían funcionar como una extensión del cerebro humano, la animación sería como la gesticulación de una persona. La cual, si está bien utilizada, sirve para terminar de redondear el mensaje que se intenta comunicar. Muchas veces cuando nos preguntan dónde queda una calle, no sólo contestamos “derecho y luego doblá hacia la izquierda”, sino que también gesticulamos esas direcciones con la intención de que, quizás, se genere un recuerdo visual de la indicación.
De la misma manera funciona la animación dentro de la UI. Si el usuario necesita llegar hacia un determinado lugar de la aplicación para completar una tarea, las transiciones pueden ayudarlo a recordar el camino que debe seguir para llegar hasta allí, formando así un mapa mental.
Una buena práctica para que esto esté bien aplicado es bocetar el mapa lógico de nuestra aplicación, posicionando las pantallas de navegación más importantes una al lado de la otra, respetando el orden que tiene la navegación visual. Esto ya nos da una pauta de que las transiciones entre estas pantallas van a ser de derecha a izquierda y así sus gestos.
Luego, por debajo, los flows que se desprenden de cada una de estas pantallas principales. Todo debe estar comprendido: pantallas, modales, dropdowns, etc. En este caso podemos movernos hacia abajo o utilizar el eje Z. Esto generará en el usuario un trayecto mental de cómo llegar hacia las pantallas.
A partir de ahí podemos tener una simple vista de cómo podrían ser nuestras transiciones dentro de la aplicación. En el caso de las pantallas que se desprenden de las principales, Apple opta muchas veces por hacer zoom in. Por ejemplo, hago tap en una card o folder y tenemos una animación en donde el elemento se agranda y ocupa toda la pantalla, para crear la sensación de estar entrando a ese flow.
En el caso de Material Design, la transición se crea tomando elementos de la pantalla inicial transformándolos en elementos de la segunda pantalla. Acá el concepto lógico sigue siendo zoom in, pero lo muestra de otra manera: el usuario no se está metiendo en ningún lado de manera literal, pero en la pantalla 1 había elementos pequeños que se transformaron en grandes en la pantalla 2.
Claramente, además de utilizar los patterns de cada sistema operativo, la decisión sobre qué hacer como las transiciones entre las pantallas principales hacia las secundarias, ya es un espacio libre que tenemos para diseñar el mapa que la aplicación necesite para ser entendida.
¿Y qué pasa con arriba y abajo? Apple utiliza estas direcciones para indicar algo que es muy intuitivo y que utiliza coordenadas de la vida real: si un elemento va hacia arriba se “envía a la nube” (por ejemplo, cuando el usuario manda un e-mail). En el caso contrario, si va hacia abajo es porque se dirige “al usuario” (por ejemplo cuando saca una foto y ésta va hacia abajo).
Este sentido de orientación también se ve reflejado en la relación que tienen los objetos dentro de la pantalla luego de una interacción. La clave es pensar a dónde se mueven y con qué propósito.
Un ejemplo bastante skewo es este e-commerce en la pantalla de producto, al hacer click en “agregar al carrito”, el producto va literalmente hacia donde está el icon del carro. Entonces, el usuario no sólo entiende el trayecto del punto A al B del producto, sino también dónde es el lugar en el que van a estar los artículos que seleccionó.
Ayuda a dar Feedback en las interacciones
Muchas veces nos encontramos probando nuestra aplicación y notamos que al ejercer una acción sobre algún objeto a este le falta reacción.
Ok, esto también se puede hacer con animación. Podemos ir con ejemplos desde cambios de instancias de botones hasta cosas más grandes.
Mi ejemplo favorito está en iOS. Cuando el usuario introduce el código al hacer login en el iPhone y se equivoca, el pad numérico se mueve hacia los costados, haciendo el gesto de “NO NO”. Una vez más, se reflejan los gestos de las personas en los movimientos de las aplicaciones. En el caso del login en Android, por ejemplo, agrega otro recurso para dar feedback: la vibración.
Otras prácticas comunes se ven en animaciones de cambios de color o forma cuándo se hace click/tap en un botón.
Ayuda a hacer foco
En ciertas ocasiones, necesitamos que el usuario se concentre en determinado lugar de la pantalla para que realice una acción específica.
Un gran ejemplo de esto es cómo maneja Apple en iOS las carpetas de aplicaciones. El usuario quiere ir a determinado lugar y ver sólo aquellos elementos que pertenecen a un grupo en particular. Lo que sucede es genial: todos los elementos que no importan para este escenario se desenfocan y sólo se ve en primer plano aquellas aplicaciones que el usuario desea ver. Esto hace que se proporcione cierta concentración en la tarea: “Deseo ver mis aplicaciones para editar fotografías”.
Lo mismo sucede con la interacción del 3D touch en el panel de aplicaciones, donde con un simple tap and hold (vamos es eso!), el usuario puede enfocarse en las acciones más importantes de la aplicación.
Sin la animación esta transición entre un universo de cosas y un zoom in de un grupo, el cambio de posición no sólo se vería rígido sino que tampoco proporcionaría el foco para completar la tarea.
Este recurso es poco utilizado, y está bien que así sea, dado que en exceso puede llegar a ser molesto para el usuario, ya que la interface estaría demandándole demasiada atención.
Ayuda al usuario a completar tareas
En ciertas ocasiones, el hecho de que estemos diseñando una plataforma hace que tengamos en claras algunas de las necesidades del usuario en cada pantalla. Lo que nos da la oportunidad de crear nuevas formas de completar tareas sin que el usuario imagine que lo está haciendo. Nos adelantamos para ayudarlos.
Este es el caso de la aplicación para listas de tareas Clear, en donde el gesto Pull down (generalmente utilizado para refrescar el contenido) agrega una nueva tarea.
Esta interacción genera una muy grata sorpresa y además, le da conocimiento al usuario de una forma más intuitiva de completar la tarea.
Claramente, estos gestos están ligados conceptualmente a los ejes de transiciones que hablamos más arriba respecto a la ubicación espacial. Lo que esta en la parte superior de la pantalla serán tareas que proporciona la aplicación y lo que esta la parte inferior serán opciones que el usuario ya posee.
Oculta el tiempo de carga ó espera
Muchas veces nos encontramos diseñando aplicaciones en donde se encuentra demasiada información sensible para el usuario, supongamos una plataforma de pagos. Estos datos pueden tardar en cargarse dentro de la interface, a veces varios segundos, y puede generar mucha ansiedad en el usuario (y de la mala).
Para estos casos existen recursos que indican que esta data se está cargando, proporcionando cierta tranquilidad de que esa espera tiene un tiempo determinado y un fin.
En casos de información muy sensible, datos como dinero, contactos, etc., es útil usar lo que se llama Skeleton animation (hoy en día, aplicaciones como Facebook o Twitter lo utilizan). Es valioso mostrar esto, porque visualmente le otorga al usuario la certeza de que su contenido está ahí, sólo se está cargando.
Quizás, para sumarle conocimiento al usuario de cuánto tiempo falta para que la información termine de cargar, podemos agregar una barra de progreso encima de la interface. De esta manera, le comunicamos el tiempo de espera aproximado para que todo termine de cargar.
En casos en donde se está cargando la interface, supongamos una app que sirve como herramienta, es valioso utilizar loaders o spinners para indicar este tiempo.
Los loadings indican un principio y un fin de espera (van de 0 a 100). Estos son útiles para demostrar que la interface completa se está cargando.
En lo personal, prefiero que se utilice el mismo componente en pequeñas secciones de la UI. Por ejemplo, un botón que cuya acción sea enviar la información que el usuario otorgó y éste le devuelve una nueva. El botón de enviar es un ejemplo de acciones decisivas para que flow continúe con la interacción del usuario.
Por experiencia, prefiero no utilizar los spinners. Generan demasiada ansiedad en el usuario. Piensen en el spinning whell de Apple… ¡Oh, que terrible momento cuándo aparece!
Diseñar un sistema de animaciones
Luego de plantear todos estos escenarios posibles, donde es preferible resolverlos en etapa de wireframes para ver si realmente tiene sentido implementarlos, podemos continuar creando un sistema de animaciones.
Así como seleccionamos paletas de color, tipografías, márgenes y otras decisiones de dirección de arte, lo mismo vamos a hacer con las animaciones que vayamos a aplicar.
Muchas veces este trabajo se puede reducir a la velocidad de cada una de ellas, pero lo cierto es que también podemos diseñar cambios de posición, encuadres y muchos otros comportamientos que cambiarían de su estado original a uno nuevo mediante una interacción. Un buen nice to have es utilizar la animación como el tono de voz de la marca o producto que estamos diseñando.
Snapchat sabe esto a la perfección. Es una aplicación para adolescentes, y todas sus animaciones son juguetonas, conteniendo rebotes o cambios de instancias exagerados.
Tenemos que tener en cuenta al diseñar micro interacciones como cambios de estados de botón hace que la interface sea más atractiva visualmente. Y por lo tanto, genera más engagement.
Al final de todo, nos vamos a encontrar que tenemos varios elementos animados en una sola pantalla y varias transiciones. En este caso, tenemos que decidir qué elemento va a actuar como hilo conductor entre las pantallas y qué otros van a continuarle. En qué momento, desde y hacia dónde. Es así donde tendremos completo nuestro sistema de animación, donde cada objeto tendrá su comportamiento en sí y a su vez, formará parte de un todo con coherencia.
Estas han sido mis conclusiones después de un año y medio de agregar Motion a las interfaces de los proyectos en los que estuve involucrada.
Junto a mi amiga @wandaarca hemos creado motion-ui.tumblr.com para conservar los mejores ejemplos de animación en productos digitales.
Good Reads
The Principles of UX Choreography — Rebecca Ussai
Spatial Interfaces — by Pasquale D’Silva
Motion with meaning — by Amin Al Hazwani, Tobias Bernard — A list Apart
