Las animaciones en los diseños de interfaces: Descubre cómo mejorar la UX

La importancia de las animaciones en el diseño de interfaces

Cuando diseñamos interfaces, tenemos que tener en cuenta que los usuarios interactuarán con ellas, no son un canal unidireccional. Los productos o servicios digitales tienen que dar una respuesta a las acciones que toma el usuario sobre ellas. Para lograr una mejor experiencia de usuario, lo ideal es tener animaciones en tu producto o servicio digital:

  • Ayudan al usuario a entender lo que está pasando al realizar una acción. 
  • Facilitan la ubicación de los elementos o pantallas que cambian. 
  • Ayudan a saber si hay una tarea en curso y que no se ha quedado congelada. 
  • Función emocional y estética. 

Existen diferentes tipos de animaciones:

Feedback

Las animaciones de feedback o retroalimentación son aquellas que suceden para dejar saber al usuario que su interacción ha sido exitosa. Por ejemplo, tener una animación en la que cambia el estado del botón que se está clicando ayudará al usuario a saber que ese botón funciona y que su acción se ha realizado con éxito. En este prototipo puedes pulsar un botón y ver cómo reacciona: 

PROTOTIPO

También pueden incluirse en esta categoría los hovers, el cambio de estado cuando se pasa el ratón por encima, sin clicar.  

En este tipo de animaciones es importante que el elemento clicable no se desplace tanto como para que se pierda el foco con el ratón o que desaparezca de la vista una vez se active, puesto que puede confundir y frustrar a los usuarios. 

Progreso

Las animaciones de progreso son las que indican que se está llevando a cabo una acción larga y que el usuario tiene que esperar para que se complete. Son comunes en esta categoría las barras de progreso, que se usan para esperas largas como descargas o instalaciones. Si además incluimos el tiempo restante, tendremos una gran animación de progreso. 

PROTOTIPO

Carga

Una buena opción para la carga de una página, sobre todo páginas con mucho contenido, es la de tener una animación que indique al usuario que la web se está cargando. Hay dos opciones principalmente, spinners y skeletons.  

 Los spinners (círculos o discos que dan vueltas) son adecuados para esperas muy cortas, de unos pocos segundos. 

 Los skeletons o esqueletos son estructuras (normalmente en forma de rectángulos grises) que se sitúan en donde irá el contenido antes de que cargue. Es un poco mejor que los spinners porque dan la percepción de que la página carga antes y nos dan información de la estructura antes de que termine de cargar. Es especialmente indicado para páginas con mucho contenido, como periódicos, redes sociales, etc, que tardan más de un par de segundos en cargar. 

PROTOTIPO

Llamada a la acción

Este tipo de animaciones responden a una necesidad de atención por parte del usuario, y se suelen usar sobre todo para mensajes comerciales como por ejemplo «Compra ya», «Regístrate ahora», etc. 

 Son animaciones que no responden a una acción previa del usuario o proceso en curso (como clicks, hovers o cargas de cualquier tipo), sino que son animaciones que quieren captar la atención para dirigir al usuario hacia una acción concreta o transmitirle un mensaje. Si son demasiado llamativas pueden dar sensación de intrusión y provocar rechazo, por lo que es recomendable no pasarse.  

PROTOTIPO

Transición

En aplicaciones o programas puede haber animaciones de transición entre diferentes pantallas, para darle a los usuarios una sensación de continuidad con la pantalla previa y darles contexto sobre dónde están. 

 Por ejemplo, en el prototipo que hemos preparado, hay tres opciones de productos. Al clicar una de ellas, se extiende la ventana sobre el resto y aparece información adicional, pero sin que desaparezca en ningún momento la información previa que el usuario ha clicado. 

 Además de ofrecer contexto, una buena animación de transición será percibida como visualmente agradable, lo que provocará sensaciones positivas en los usuarios. No olvidemos que las aplicaciones visualmente agradables también son percibidas como más fáciles de usar. 

PROTOTIPO

Notificaciones

Ésta es en cierta manera parecida a las animaciones de llamada a la acción, ya que es un elemento que quiere captar la atención del usuario, aunque la diferencia es que éstas no contienen mensajes comerciales, sino avisos importantes que requieren atención, como un nuevo mensaje, un aviso de que los cambios se han guardado, etc. Aunque también existen páginas que utilizan este tipo de animaciones y elementos para mostrar mensajes comerciales e incitar una acción o compra. Por ejemplo «Un usuario ha comprado este artículo hace 5 minutos» o falsas notificaciones que abren un chat con un bot o con soporte técnico o el equipo comercial de una empresa. 

PROTOTIPO

Decorativas 

Las animaciones decorativas no tienen ninguna función más allá de la estética. No responden a acciones del usuario ni tampoco a llamadas a la acción ni para dirigir al usuario a una acción específica. Pero dan vida a las pantallas y son una oportunidad perfecta para darle personalidad al producto o servicio y que sea más memorable y agradable para los usuarios. Son bastante comunes en procesos de o pantallas de error. 

PROTOTIPO

Aunque nos ofrecen muchos beneficios, una animación mal ejecutada puede tener el efecto contrario. 

  • Las animaciones tienen que tener la cantidad de movimiento justo. Un elemento que se mueva demasiado puede desubicar, distraer o frustrar. Esto también pasa si hay muchas cosas moviéndose al mismo tiempo.  
  • Tiene que tener también la velocidad o tiempo adecuadas. Si es muy lenta o muy rápida el usuario se frustrará. 
  • Hay que dar una opción de desactivar o pausar el movimiento de las animaciones automáticas, como los carruseles. En el caso de las notificaciones, deberían descartarse manualmente y no con el tiempo. 
  • Hay que tener cuidado con los movimientos poco naturales. Si un elemento se mueve en una dirección no esperada, diferente al sentido de la navegación o poco natural, molestará al usuario. 
  • No se recomienda usar animaciones que distraigan cuando el usuario esté realizando un proceso que requiera atención, como rellenar un formulario. 

 

Sean cuales sean las necesidades de tu proyecto, puedes contactar con nosotros y te ayudaremos con el diseño de tu producto o servicio.    

Suscríbete a la newsletter

    ¿En qué te podemos ayudar?