Micro interacciones o el camino hacia la felicidad usable

El otro día en la demo party de Multiplica, empresa en la que llevo colaborando felizmente desde hace dos meses, hablamos sobre tendencias de UX.

En esa conversación salieron muchos temas interesantes como chatbot, inteligencia artificial, realidad virtual, diseño compasivo, responsive y micro interacciones.

Al oír la palabra micro interacción mi cerebro hizo una asociación con otro término que a mi me gusta mucho y es “felicidad usable”. Esto es, la experiencia de un producto digital que no solo consigue hacer realidad tu propósito en el menor tiempo posible sino que además al terminar, te saca una sonrisa.

Mi cerebro me juega malas pasadas muchas veces, sin embargo siento que esta vez la asociación de micro interacción y felicidad usable tenía mucho que ver.

Veamos en primer lugar que es lo que entendemos por micro interacción: “Es la respuesta de una interfaz al usuario que provoca en éste una reacción inesperada, que sorprende y que hace que se muestre la sonrisa en su cara”.

Una buena interfaz es aquella que no se nota que está ahí y sin embargo te hace la vida más fácil y convierte tu experiencia en un momento ¡wow!. Una micro interacción hecha a su debido tiempo, entre otras muchas cosas ayuda a conseguir ese momento.

Sin embargo, no solamente sirven para conseguir un momento feliz, sino que además contribuyen a remarcar principios de Nielsen como la visibilidad del estado del sistema, mejorar el sentido de la manipulación directa o ayudar a los usuarios a visualizar los resultados de sus acciones y evitar errores.

Además, las micro interacciones están íntimamente relacionadas con el engagement y la conversión ya que son disparadores inmediatos que dan feedback al usuario, animan a seguir usando el producto digital y contextualizan la información en un mismo escenario.

En realidad de lo que estamos hablando todo el rato es de detalles, ese elemento diferenciador en el mundo del diseño y las micro interacciones son esos pequeños detalles que marcan la diferencia.

Sabemos lo exigentes que son nuestros usuarios y la facilidad que tienen para irse a la competencia o descargar otra app si ésta no les aporta el valor y la experiencia que ellos demandan. Las micro interacciones son claves en mejorar esa experiencia y sacarnos la sonrisa. Veamos algunos ejemplos donde podremos aterrizar estos conceptos:

 

Animaciones que comunican algo más que una acción.

Esta animación llena de micro interacciones, convierte el pedir una cita con el doctor en algo sexy, como termina y da feedback al usuario de lo que ha sucedido uniendo el concepto de las constantes vitales con el check es realmente bueno.

 

Por Ramotion

 

Visibilidad de estado del sistema.

Uno de los heurísticos de Nielsen aplicado con una delicada animación. Aquí podemos ver exactamente qué es lo que está pasando, en qué momento se encuentra nuestra interacción con el sistema y además, cuando termina no podemos evitar tener ese pensamiento en la cabeza de ¡Cooool! Un claro ejemplo de felicidad usable.

persuabilidad.micro1

Por Jona Dinges

 

Falta de espacio como excusa.

En espacios reducidos necesitamos usar más nuestra imaginación para presentar todo el diseño en una misma pantalla. El espacio se presenta como una restricción en dispositivos móviles. El diseño interactúa con el usuario y se muestra todo en un mismo layout. Podemos cambiar de una vista a otra y visualizar todos los datos cómodamente y todo ello contextualizando la acción para el usuario.

persuabilidad.micro2

Por Virgil Pana

 

On boarding que cobran vida.

Muchos estaréis tentados cuando llegáis a un on boarding dar clic en el botón de skip e ir directamente a la aplicación. Pequeñas animaciones pueden hacer que este gesto tan común no se produzca y el usuario se detenga a leer el contenido y disfrutar de la experiencia.

persuabilidad.micro3

Por Andrew Mckay

 

Formularios no tan aburridos.

Diseñar formularios siempre es un reto. Al usuario le ayuda mucho que se confirmen sus datos en tiempo real y no esperar a dar al botón de enviar para saber que 3 campos están mal diligenciados. Si además de esto, la interacción va unida a una animación sencilla y clara, estaremos muy cerca del formulario perfecto, pero sólo cerca.

persuabilidad.micro4

Por Leo Zakour

 

Añadir un producto al carrito.

La compra de cualquier artículo está llena de emociones y el cómo transmitimos esas emociones puede influir en la decisión de compra por parte del usuario. La confirmación de que hemos añadido un artículo a nuestro carrito es fundamental para los usuarios. Las micro interacciones pueden hacer de esto una experiencia realmente distinta y conseguir ese elemento que nos diferencia de nuestra competencia.

persuabilidad.micro5

Por Khoroshok

 

Confirmar al usuario que ha realizado una acción.

Dar feedback al usuario de lo que hace es fundamental. Ayudarle en su proceso cognitivo a que entienda lo que está sucediendo le libera de esfuerzo. Todo lo que el usuario hace con el sistema tiene una representación visual y si además es animada, la experiencia se convierte en… ¡Wow!.

persuabilidad.micro6

Por Dominik Martin

 

Mantener el contexto.

Podemos usar la animación para poder navegar entre el contenido e ir profundizando en él, esto resulta especialmente útil en smartphones donde resulta bastante difícil encajar mucha información en una sola pantalla. Mantenemos el contexto y vamos navegando y profundizando en el contenido, de una forma sutil, la animación nos ayuda a no perder el foco de la acción.

persuabilidad.micro7

Por Ramotion

 

Call to action irresistible.

Conseguir que el usuario interactúe con nuestro botón, puede sonar algo sencillo pero muchas veces por la saturación de información a la que estamos sometidos nuestros CTA pasan completamente desapercibidos. Si unimos un toque de humor con una sutil animación al final conseguimos ese CTA irresistible, aquel que no puedes dejar de mirar e irremediablemente terminarás haciendo click. ¡Fantástico por MailChimp!

persuabilidad.micro8

Por Brent Clouse

 

Conclusiones

Prestamos atención a los detalles, pensamos en cómo son nuestros usuarios y qué es lo que realmente les mueve. Tenemos en cuenta el contexto de uso y las restricciones que tienen ciertos dispositivos y con todo esto creamos interacciones que van más allá de un simple click, que consiguen no sólo informar del estado del sistema o mantener en contexto la información. Interacciones que emocionan a nuestros usuarios y que al final de su viaje por nuestro diseño dibujan una sonrisa, que realmente aportan valor, que informan y hacen la vida más fácil.

Un gran diseño es un conjunto de pequeños grandes detalles que empiezan desde el cuidado en la estrategia y terminan en el desarrollo y subida a producción y por el camino nos encontramos detalles como las micro interacciones que nos pueden ayudar a marcar ese elemento diferenciador.

Gracias por vuestro preciado tiempo 🙂

Por si te perdiste estos imprescindibles

Comentarios