En este post te explicamos en qué consiste el uso de las animaciones funcionales y micro-interacciones en el diseño de apps.

Los seres humanos nos hemos visto atraídos siempre por el movimiento. Cualquier elemento que, sobre fondo estático, está en movimiento y genera dinamismo nos parece más interesante que cualquier otro objeto presente. Es un hecho científicamente probado; la atención a los desplazamientos es algo que nuestro cerebro no puede obviar. La prueba está en el incremento del uso de videos y gifs que recorren nuestras apps más usadas como en Facebook, Instagram, Snapchat, etc. El impacto de la información visual incrementa con el uso de la animación, lo que puede llegar a marcar la diferencia entre una app y su competencia.

Techcrunch Snapchat gifts

Imagen: Snapchat en TechCrunch

Animaciones Funcionales y Micro-interacciones

Sabiendo que la tendencia actual en desarrollo de apps es que prevalezca el diseño centrado en el usuario, los diseñadores usan cada vez más el recurso de la animación como elemento funcional no sólo como elemento gráfico de más, sino para aportar información acerca de sus diferentes funcionalidades. Aún así, el uso de la animación en diseño puede potenciar la experiencia de usuario siempre y cuando se use de manera correcta y en el momento adecuado. Hay que tener en cuenta que las animaciones se usan para reducir la carga cognitiva y para establecer un mejor recuerdo de la interfaz y que su uso excesivo puede provocar el efecto contrario.

Como diría Rice Tseng (diseñadora mobile UX) acerca del uso de las animaciones: “UI is not Disney movie; please STOP crazy animation.”

Las animaciones funcionales son un tipo de animación que aporta claridad a la interfaz de usuario y que hace que cobre vida. También les acompañan las micro-interacciones; acciones simples y pequeños momentos de intercambio entre el usuario y la app. Éstas provocan en el usuario una respuesta inesperada, poco intrusiva, le sorprenden, facilitan la comprensión y en conjunto, mejoran su experiencia.

Tipos de micro-interacciones en apps

Algunos de los muchos ejemplos de micro-interacciones que podemos encontrarnos son:

  • El llamado pull-to-refresh para actualizar el contenido de la app, que aprovecha el movimiento de tirar hacia abajo para crear una animación
  • La confirmación de una acción
  • El proceso de descarga de un archivo
Dribble Pull-to-refresh UI Design Mobile App

Imagen: Micro-interacción pull-to-refresh en Dribble by Tamara

Características de las micro-interacciones en las apps

Algunas características que comparten estas micro-interacciones son:

  • Efecto sorpresa y agradable, nada molesto
  • Mejoran el uso de la interfaz, ofreciendo pistas sobre cómo completar una acción o solucionando dudas que puedan surgir
  • Animan al usuario a seguir navegando
  • Deben ser intuitivas y de fácil comprensión
Behance - Charity App Payment Flow

Imagen: Behance by Johny vino

Desde un punto de vista más teórico, la generación de micro-interacciones se compone de 3 fases:

  • Señal: el elemento que va a hacer que el usuario desencadene de la acción – botón de confirmación
  • Rutina: en respuesta a la señal, se realiza la acción – apretar botón
  • Recompensa: el “premio” que obtiene el usuario al completar la rutina, razón por la cual completa la acción – animación (generalmente es esa micro-interacción que da un feedback acerca de si se ha realizado correctamente o no la acción acción deseada)

Las micro-interacciones pueden aportar un valor añadido muy interesante para el desarrollo de apps, pero repetimos, deben ser usadas con moderación y en línea con a imagen de marca.

El uso del humor es más que bienvenido, pero dependiendo de como, puede acabar confundiendo al usuario. Por otra parte, también es importante tener en cuenta la lógica y estructura de las animaciones. Existen casos en los que el diseño UI se solapa con las micro-interacciones o crean interacciones demasiado complejas. En este último ejemplo, vemos lo poco prácticas que resultan las animaciones en esta interfaz.

Dribbbe new message animation

Imagen: Dribble.com por Jackub Antalík

En este caso, hacer que el botón cruce toda la pantalla cada vez que se hace scroll hacia abajo, puede llegar a molestar durante la navegación y hace que sea poco practica la experiencia.

Los detalles en la interfaz generan engagement con los usuarios

En la experiencia de usuario, hay que tener en cuenta cómo va a sentirse al usar el producto y muchas veces estas emociones vienen dadas por los pequeños detalles de la interfaz, cosas que no podemos explicar, pero nos gustan.

Citando a Charles Eames, diseñador industrial del siglo XX, que potenció la innovación en numerosos ámbitos del diseño y arquitectura cuidando los detalles: “The details are not details. They make the product”, los pequeños detalles merecen que se piensen detenidamente a la hora de crearlos, ya que éstos hacen que se les preste atención, que haya una conexión especial entre producto y usuario, y que genere más engagement que otras apps.

¿Te ha gustado este post sobre animaciones funcionales en el diseño de apps? ¡Compártelo! 

Gemma Mier

Author Gemma Mier

More posts by Gemma Mier

Leave a Reply

 

Contacta con PickASO

Llámanos: 936 38 61 26

Escríbenos: [email protected]

Visítanos (previa cita): Rambla Catalunya, 60 (Principal-2ª), 08007, Barcelona (Spain)

Todas las noticias de App Marketing en tu Email:

Trataremos tus datos para enviarte nuestras novedades por email. Puedes revocar el consentimiento, ejercer tus derechos de acceso, rectificación, cancelación, supresión, oposición, limitación del tratamiento, portabilidad y supresión escribiéndonos a [email protected] Más información en la Política de Privacidad.

Expertos en ASO & App Marketing