Fondo
  /  Diseño de producto   /  #2 Microinteracciones, el diablo está en los detalles, con Yolanda del Olmo

#2 Microinteracciones, el diablo está en los detalles, con Yolanda del Olmo

Por todos es sabido que el diablo se esconde en los detalles (y a veces en las microinteracciones ). Concretamente en diseño, podría hacerse un castillo con todas las opiniones y los matices vertidos sobre cualquier propuesta.

Opiniones listas para dirigirse a tu diseño.

Pero también es en los detalles donde nuestro producto puede crecer y convertir una experiencia buena en una única y personalizada. Y aquí es donde cobran relevancia las microinteracciones, ya que una gran experiencia de usuario suele ir acompañada de ellas.

Sigue leyendo el artículo o si lo prefieres puedes escuchar el podcast de Yolanda explicando qué son y cómo funcionan las microinteracciones en:

Escucha el podcast de la entrevista con Yolanda del Olmo

Si deseas escuchar el podcast puedes hacerlo desde el reproductor que está justo debajo o suscribiéndote de forma gratuita a nuestro podcast de Píldoras UX a través de Spotify.

Peero…¿Microinteraciones? ¿Y eso qué es? ¿Se comen?

Una forma de definirlas sería:

Respuesta al usuario por parte de la interfaz de una forma inesperada a la par que poco intrusiva ante un caso de uso particular”

Microinteracción mostrando un error al conectar con la wifi
Microinteracción mostrando un error al conectar.

Además las microinteracciones, aparte de ser poco intrusivas, guían al usuario y al mismo tiempo dotan de personalidad propia a la experiencia de uso de nuestro producto digital.

Sin embargo, no deben centrarse únicamente en sorprender, también tienen que ser útiles. Deben aportar información o generar transparencia en los procesos en los que se encuentre inmerso el usuario. En otras palabras, tienen que simplificar la experiencia de usuario haciendo que sea más intuitiva.

Es un error bastante común es pensar que, añadiendo comportamientos a ciertos elementos de la interfaz, ya es automáticamente una microinteracción. Lamentablemente una microinteracción y una animación no funcionan de la misma forma.

A modo de ejemplo, en el proceso de carga de documentos se produce un error en la ejemplo A, nos informa que ha ocurrido un error y nos da una acción para solventarlo (volver a cargarlo).

Ejemplo A: Carga fallida.
Ejemplo A: Carga fallida.

En contraposición, en el ejemplo B, ocurre una animación que muestra la evolución de la descarga pero tras el error no da ninguna alternativa para solucionar el problema.

Ejemplo B: Descarga fallida.  Source: https://dribbble.com/shots/5024429-Download-Button
Ejemplo B: Descarga fallida. Source: https://dribbble.com/shots/5024429-Download-Button

Y esta es una de las principales diferencias con una animación.

Las microinteracciones pueden consistir en animaciones pero no todas las animaciones son microinteracciones.”

Para ello, debemos comprender su mecanismo.

Si te interesa saber cómo hacer una interacción, hemos preparado un curso para comprender en profundidad las microinteracciones.

Ir al curso de microinteracciones

¿Y cómo funcionan?

Desde un punto de vista formal, Dan Saffer propone un mecanismo compuesto por varias fases.

1) Trigger (disparador) → Es el evento o la condición que desencadena una microinteraccion. Ejemplo: pulsar un botón

2) Reglas → determinan cómo va a “funcionar” la microinteracción y se suelen transmitir a través del feedback de las acciones.

Ejemplo: La notificación se mostrará cuando se reciba un mensaje
Ejemplo: La notificación se mostrará cuando se reciba un mensaje

3) Feedback → Respuesta que devuelve la microinteracción. Volviendo al ejemplo anterior, una posibilidad de feedback podría ser que se abra el chat donde se encuentre la conversación mientras que otra opción podría ser la posibilidad de mostrar un campo de texto donde responder (i̶n̶c̶l̶u̶y̶e̶n̶d̶o̶ ̶g̶i̶f̶s̶,̶ ̶p̶o̶r̶ ̶s̶u̶p̶u̶e̶s̶t̶o̶ )

4) Bucles y modos → Los bucles hacen a referencia a la frecuencia que se producirá la microinteracción. Una forma que puede ayudar a definir los bucles es preguntarnos en qué casos de usos se mostrará microinteracción. ¿Solo en ciertos casos de uso? ¿Cuáles serían? Por ejemplo, ocurrirá solo en los casos cuyo contacto tenemos marcado como importante o se mostrarán con todos los contactos. Dicho de otra manera, piensa cuántas veces se repetirá la microinteracción dentro de la interfaz.Cuando hablamos de modos, nos referimos a la duración de la microinteracción dentro de la vida de nuestro producto digital. En este caso, debemos plantearnos si una microinteracción formará parte de la interfaz de forma temporal o será una seña de identidad de la experiencia. Una forma sencilla de ver la diferencia entre modos, es si estamos diseñando una funcionalidad que estará disponible temporalmente o no. 

A modo de ejemplo, en una aplicación sobre la previsión del tiempo las microinteracciones relacionadas con la lluvia se mostrará solo cuando la predicción del tiempo indique que va a llover.

Hay personas que prefieren mojarse bajo la lluvia
Aunque hay algunos que prefieren mojarse 😉 

¿Te interesa el tema? ¿Crees que puedes potenciar la identidad de tu producto con microinteracciones potentes? ¡Entonces estás de suerte! 😀

Para aprender más sobre microinteracciones, te recomiendo este curso:

Si estás aprendiendo diseño de experiencia de usuario, te aconsejo que nos sigas en nuestro canal de YouTube.

Nos vemos!

Artículo escrito por Yolanda del Olmo, diseñadora de experiencia de usuario y profesora de Píldoras UX

Post a Comment