Cómo llevar la UX a un nuevo nivel, las microinteracciones

Cómo una interfaz digital se comunica con nosotros y nosotros con ella.

3 min
Comparte f in
Comparte f in

Lograr que un usuario se enamore de nuestro producto depende de muchos factores y no siempre es tarea fácil. Entre algunos de estos se encuentra cómo una interfaz se comunica con nosotros y nosotros con ella. Pues bien, hoy me gustaría centrarme en este punto y ver cómo las microinteracciones pueden ayudarnos a mejorar nuestros productos digitales.

Antes de ponernos “al lío” permíteme que haga una breve introducción de qué son esto de las microinteracciones. 

Las microinteracciones son una manera muy potente y útil que nos permiten dar feedback al usuario sobre el estado del sistema, facilitar la prevención de errores o que incluso nos pueden ayudar a mejorar la percepción que los usuarios pueden tener sobre nuestra marca

Estos pequeños momentos no son unidireccionales y pueden ser iniciados por el propio sistema, por ejemplo cuando recibimos una nueva notificación al entrar un email en nuestro buzón de correo, o por el usuario, cuando al pulsar sobre un botón esperamos que suceda algo tras realizar la acción. 

La estructura que tenemos que tener en mente a la hora de crear nuestras microinteracciones es:

Veamos un caso de cómo podríamos aplicar esta estructura en un caso concreto, por ejemplo, cuando añadimos un artículo a la cesta de la compra en un ecommerce:

En el ejemplo vemos que consta de las siguientes partes:

  1. Disparador: el usuario pulsa el botón
  2. Reglas: indicamos el progreso 
  3. Feedback: informamos al usuario con feedback visual de que el artículo se añadido con éxito
  4. Bucle: ofrecemos al usuario la posibilidad de seguir comprando o finalizar compra

¿Por qué usarlas?

Las microinteracciones son una herramienta muy poderosa que nos ayudarán a:

  • Mejorar la navegación.
  • Facilitar a los usuarios la interacción con tu producto digital.
  • Proporcionar feedback instantáneo y relevante sobre una acción concreta.
  • Dar consejos a los usuarios.
  • Comunicar información sobre ciertos elementos.
  • Dirigir la atención de los usuarios.

Trabajar bien estos elementos puede hacer que la percepción de nuestros usuarios sobre nuestro producto pase de ser un “meh, me esperaba algo mejor” a “I love it, quiero más”. En estas décimas de segundo es cuando podemos seducir al usuario, hacer de su experiencia un deleite visual y funcional. En definitiva, hacer un producto más deseable

Y, ¿dónde podemos aplicarlas?

Existen muchos tipos y usos, el límite es tu imaginación, pero algunos ejemplos de dónde usarlas podrían ser:

  • Al deslizar unas cards.
  • Al introducir datos en un formulario.
  • Al mostrar el estado actual del sistema cuando subes un fichero a un servidor.
  • En una llamada a la acción en un proceso de onboarding.
  • Al comunicar al usuario que cierta acción se ha realizado con éxito.
  • A la hora de mostrar una nueva interfaz o feature al usuario.

Bonus track

Ahora que ya tenemos claro el contexto de qué son y cómo usarlas, me gustaría compartir contigo más ejemplos que me han resultado interesantes.

Stars rating animation Aaron Iker
Password field animation Aaron Iker
Download Button – Micro Interaction David 
Upload window interactions Jakub Antalik
To-do app task micro-interaction Ioannis Nousis
Pull to Refresh Animation Sang Nguyen
Feedback Reactions JJ
Create password Micro-Interaction KisHore

Y, ¿Ahora qué?

Pues que si crees que tu producto digital necesita un pequeño empujón para que tus usuarios se enamoren de él, no lo dudes, en Interactius podemos ayudarte. Diseñamos productos fantásticos que generan experiencias únicas que mejoran la productividad, la eficiencia y la percepción de las personas que los utilizan.

Ahora sí, hemos llegado al final. Espero que te haya gustado este artículo, si es así, comparte ¡que es gratis!

3 min
Comparte f in
Comparte f in