lottie

Lottie: Mejora la experiencia de usuario en iOS con micro-interacciones

Uno de los retos a los que nos enfrentamos al desarrollar una app es conseguir que la experiencia sea intuitiva, es decir, que el usuario no tenga que adivinar qué está pasando cuando, por ejemplo, la app esté realizando algún proceso duradero, como puede ser la descarga de un fichero.

Las micro-interacciones animadas nos ayudan en la tarea de proporcionar feedback visual a nuestros usuarios en momentos en los que la app está procesando datos

 

¿Qué son las micro-interacciones animadas?

Las micro-interacciones animadas son animaciones que ocurren en un instante concreto durante la ejecución de un caso de uso de tu app. Piensa en casos como: dar un like en un post de una red social (Facebook, Twitter, Instagram), recibir una notificación, cambiar la configuración en una app, etc. En todos estos momentos el usuario recibe un feedback visual en forma de animación, la micro-interacción.

 

Ejemplos de micro-interacciones

Existe un sin fin de momentos en los que podemos aplicar micro-interacciones:

  • Pantallas de carga
  • Procesos duraderos (descarga de ficheros, sincronización de datos en la nube, etc)
  • Likes en redes sociales
  • Pull to refresh
  • Transiciones entre las vistas de una app
  • Pulsaciones sobre botones o cualquier otro control
micro-interracion

Ejemplo de micro-interacción para una pantalla de carga. Imagen de Diseñadores Cósmicos.

 

¿Cómo integrar micro-interacciones en mi app?

Hasta hace poco, teníamos dos formas de integrar animaciones en iOS:

  • Mediante programación: Todas las propiedades de un UIView (clase base para la mayoría de elementos de UI en iOS) son animables “programáticamente”. Con esta aproximación, es el programador el que tiene que generar las animaciones, para después validarlas con el diseñador del producto. Si existen discrepancias, hay que volver a “afinar” esa animación mediante programación, para después volver a validar. Seguiríamos este proceso hasta que la animación quede aprobada finalmente.
  • Colaboración diseño/programación usando SpriteKit: Con el framework de programación de apps 2D SpriteKit, Apple proporciona un conjunto de herramientas para poder “cargar” animaciones que han sido creadas con herramientas de diseño de terceros. Esto nos ofrece la posibilidad de validar la animación mucho antes en el proceso de integración.

 

Lottie: Herramienta de animación desarrollada por AirBnb

Lottie logo

Pero hoy vengo a hablarte de una tercera alternativa que está petándolo últimamente. Y es que los chicos de AirBnb liberaron hace meses Lottie, una librería móvil para Android e iOS que consume animaciones de Adobe After Effects exportadas como JSON con el plugin bodymovin, y que renderiza animaciones vectoriales de forma nativa en móviles y también en React Native.

Esta herramienta nos otorga la posibilidad de crear y publicar increíbles animaciones sin la necesidad de crearlas a mano desde programación. Además, la animación está contenida en un fichero JSON de reducido tamaño, pero en el que podemos incorporar muchísima complejidad. Con Lottie, podemos controlar totalmente las animaciones exportadas desde After Effects: play, resize, loop, sped up, slow down, etc…

He estado trabajando estos días en la consultoría técnica y conceptualización de una app para precisamente ser capaz de integrar animaciones de esta forma, y he decir, que es TREMENDAMENTE SENCILLO hacerlo. No te digo más, que lo más complicado fue instalar el plugin bodymovin. Y es que este proceso es muy poco intuitivo, y hay que meter un “conjuro” en línea de comandos. 🤣

En el siguiente vídeo te muestro un ejemplo de integración de una animación en JSON cargada con la librería Lottie. No te engaño si te digo que la integración consta de exactamente 8 líneas de código.

 

Conclusión

Las micro-interacciones están a la orden del día en todas las apps. Facebook, Twitter, Instagram, apps que usamos todos los días, ya las tienen integradas y se ve que funcionan a la hora de aportar feedback visual a los usuarios.

Si aún no has integrado micro-interacciones en tu app, Lottie es una gran herramienta que te va a ahorrar idas y venidas entre desarrollo y diseño. Se integra de manera facilísima, e incluso puedes cargar las animaciones desde URLs remotas, con lo que podrás cambiarlas “en caliente” desde tu servidor sin tener que enviar una nueva versión al Apple Store.

Tienes un montón de ejemplos para integrar ya en tu app en esta galería: lottiefiles.

¿Y tú? ¿Cómo implementas micro-interacciones en tu app? ¡Cuéntamelo en los comentarios!

No hay comentarios

Deja un comentario