Micro-interacciones o el camino hacia la felicidad usable

francis restoy
Aug 25, 2017 · 6 min read

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 termino que a mi me gusta mucho y es “felicidad usable”. Esto es, la experiencia de un producto digital que no solo consigue hacer tu propósito en el menor tiempo sino que ademas 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 tenia 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 este una reacción inesperada, que sorprende y que hace que se muestre la sonrisa en su cara”.

Una buena interface es aquella que no se nota que esta ahí y sin embargo te hace la vida mas 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 wow.

Sin embargo, no solamente sirven para conseguir un momento wow o sacarte esa sonrisa, sino que ademas 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.

Ademas, 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 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 esta no les aporta el valor y la experiencia que ellos demandan. Las micro interacciones son claves en mejorar esa experiencia y sacarnos la sonrisa, vamos a ver algunos ejemplos donde podremos aterrizar estos conceptos.

Visibilidad de estado del sistema

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

Por Jona Dinges

Falta de espacio como excusa

En espacios reducidos necesitamos de usar mas 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.

Por Virgil Pana

On boarding que cobran vida

Muchos estaréis tentados cuando llegáis a un on boarding darle al 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.

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 tiene puestos mal 3 campos. 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.

Por Leo Zakour

Animaciones que comunican algo mas 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 ckeck es realmente bueno.

Por Ramotion

Añadir un producto al carrito

La compra de cualquier artículo esta llena de emociones y el cómo trasmitimos esas emociones puede influir en la decisión de compra por parte del usuario. La confirmación 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 poder conseguir ese elemento que nos diferencia de nuestra competencia.

Por Khoroshok

Confirmar al usuario que ha realizado una acción

Dar feedback al usurario 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.

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.

Por Ramotion

Call to action irresistible

Conseguir que el usuario interactue 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!

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 mas 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 :)

)

Written by

Lead UX / Product Designer en Multiplica. Estrategia, creatividad y diseño para conectar a las marcas con sus usuarios. #ux + #branding + #love

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade