Cómo añadir animación a tu diseño UX

Hoy os traigo un artículo de UX Booth de Jolina Landicho sobre animación y diseño UX. La animación ha sido usada desde siempre para entretener y captar la atención de los usuarios, pero también puede ser usada para crear una experiencia positiva y que enganche a los usuarios.

Para la mayoría de diseñadores las animaciones son elementos opcionales para atraer más a los usuarios. Pero usadas inteligentemente pueden ser mucho más que eso, ofreciendo beneficios claves al producto digital y contribuyendo a mejorar el diseño de UX.

Animación y storytelling

Una de las maneras más poderosas por la cual la animación puede contribuir al diseño de UX es creando emociones que los usuarios puedan entender fácilmente. Las emociones son una considerable influencia sobre la conducta del consumidor, por lo que usar elementos animados es una manera efectiva de asegurarse una respuesta positiva por parte de los usuarios.

Las experiencias de los usuarios son historias. Los diseñadores proporcionan estas historias cuando trabajan en un producto digital. Los usuarios atraviesan estas narrativas cada vez que los usan, ya sea comprar un producto online, subir un selfie, o compartir cualquier tipo de contenido. El objetivo es asegurarse que cada historia es dada ininterrumpidamente y eficientemente.

Usa elementos animados para contar mejor la historia y crear una conexión emocional con los usuarios.

Pequeños movimientos en el interfaz pueden mejorar la experiencia de los usuarios mientras usan un producto. Eligiendo cuidadosamente qué elementos animados incorporar, los diseñadores pueden provocar impresiones y respuestas emocionales que permanezcan de los usuarios, lo cual puede beneficiar al producto digital en el largo plazo.

La animación como elemento funcional

Los elementos animados ocupan espacio, por lo que es necesario hacer que importen. Lo que significa que la animación no debe ser añadida para impresionar a la audiencia. Tiene que ser añadida para ejecutar un rol o función específico.

Algunas formas inteligentes de usar la animación:

• Sacar el aburrimiento de la pantalla: los usuarios están dispuestos a esperar sólo dos segundos en que cargue un producto digital, si tarda más lo abandonan por otro más rápido. Las pantallas de carga animadas pueden ser usadas para mantener a los usuarios entretenidos y enganchados mientras esperan a que el contenido aparezca en el producto digital.
• Dar a los usuarios una pista o dos: los diseñadores pueden usar las animaciones para dar contexto a los usuarios de lo que pueden hacer con el producto digital. Por ejemplo, hacer que los posts se desplacen mientras aparecen en la pantalla, les da una pista a los usuarios que pueden deslizar la pantalla si quieren ver más posts.
• Dar feedback visual en tiempo real: para prevenir confusiones los diseñadores pueden incorporar elementos animados que den feedback visual instantáneo para todas las acciones que se ejecutan en el producto digital. Por ejemplo, un botón puede cambiar el color o iluminarse cuando se le hace clic o se le presiona.

Ten en cuenta estas pautas cuando uses animación

Para asegurarse de que un producto digital disfruta de los beneficios completos de usar animación, debes recordar lo siguiente:

• La animación simplemente soporta la experiencia: los usuarios usan un producto digital por el contenido, los productos, los servicios y la experiencia que ofrece. No lo usan por sus animaciones. Los elementos animados no deben ser el centro, deben mejorar la experiencia completa. Ejercita siempre la contención cuando incorpores animación a tu diseño. En lugar de impresionar a la audiencia, asegúrate de que los elementos animados son consistentes con los visuales y la marca. La animación debe soportar la interacción de los usuarios con los elementos del producto.
• No necesitas animar todo: Como dice el dicho “sólo porque puedas, no significa que debas”. Como se ha dicho antes, la contención es una importante cualidad cuando se diseñan experiencias. En este caso, sólo porque sea posible o fácil animar un elemento no significa que hacerlo beneficie al usuario. Si animando un elemento no se añade nada a la experiencia del usuario, mejor dejarlo plano y sin movimiento. Animando para la interacción del usuario, y ajustándose a movimientos simples ayuda a los usuarios a estar enfocados y poder crear una mejor experiencia.  
• Manténlo natural: Los productos digitales y sus elementos visuales no tienen presencia física en el mundo real. No están gobernados por las reglas de la física pero diséñalos como si lo estuvieran. Por ejemplo, es entendible que una lista responda a la misma velocidad con la que el usuario está interactuando con ella. Los elementos de una interfaz necesitan confirmar las expectaciones de los usuarios, si no la narrativa se rompería.
• Testéalo siempre con usuarios reales: las compañías que producen objetos consideran el test un requerimiento obligatorio antes de que cualquier producto sea lanzado. Esta visión debe ser aplicada a los productos digitales, para asegurarse que todos los elementos, incluyendo la animación, están alineados con los objetivos de la marca y que intentan cumplir los resultados buscados. No es necesario decirlo que el test necesita involucrar usuarios reales. El testing puede parecer un requisito adicional pero puede ahorrar a los diseñadores de un montón de trabajo. Observando cómo los usuarios reales responden al producto digital, los diseñadores pueden determinar qué elementos necesitan ser modificados para optimizar la experiencia de usuario y hacer el resultado final accesible para todos. El testing permite a las marcas y a los diseñadores evitar costosos errores.

La animación es un elemento de diseño que bien usado puede mejorar la experiencia de usuario o ser un simple adorno sin otra funcionalidad si es mal usado. Los product managers y los diseñadores se debe encargar de que la animación se use correctamente y sin excesos, además deben de ser los encargados de planificar las sesiones de research para testear los interfaces donde se introduzcan animaciones para comprobar las reacciones de los usuarios ante ellas.