Micro-interacciones, la diferencia está en los detalles

Experiencia de usuario
20/5/2016
|
Samuel Gimeno Artigas
Escritorio redondo con laptop, gafas, planta, celular, lápices y unas manos de mujer tecleando.

Como hablamos hace algunas semanas, hoy queremos dedicar un post a las micro-interacciones, una tendencia que se impone en el diseño de UX.

Los detalles no son solo detalles, son lo que define el producto”. Esta brillante frase de Charles Eames resume la esencia del diseño y cómo debe hacerse el trabajo a conciencia, de la necesidad de incorporar la experimentación en nuestro trabajo, y asumimos las limitaciones y el rigor que exige el trabajo creativo.

Diseño de un formulario de Atlassian
Microinteracción de un formulario de Atlassian, empresa que usa las micro-interacciones para mejorar las aplicaciones empresariales y de desarrollo de software.

Definamos en primer lugar qué es una microinteracción. Si los detalles hacen el producto como decía Eames, podríamos definirla como una respuesta al usuario por parte de una interfaz, generando una respuesta inesperada y poco intrusiva que sorprenda o agrade al usuario.

Podemos ver estas microinteracciones son las transiciones entre interacciones, comprobaciones en formularios, pantallas de estados vacíos, botones de interfaz animados, avisos o páginas de error 404. Algunos ejemplos de microinteracciones podrían ser los corazones del twitter al marcar un tuit como “Me gusta”, la función autocompletar de un campo de texto o las pistas que ofrecemos en un formulario para completar una tarea. Todas estas microinteracciones simplifican el trabajo del usuario con el interfaz y mejoran la experiencia de usuario sin generar intrusión.

Algunas características que comparten estas microinteracciones son:

  • Son útiles: si una microinteracción no resulta útil, es mejor que no esté.
  • Sorprenden o agradan al usuario: una microinteracción debe conseguir mejorar la experiencia de uso y animar al usuario a seguir usando el producto digital. Por tanto, es conveniente que incorpore una sensación de descubrimiento, algo que sorprenda o agrade.
  • Mejoran la interacción: pueden servir para mejorar el uso de la interfaz, ofreciendo pistas sobre cómo completar una acción o solucionando dudas que puedan surgir.
  • Son fácilmente entendibles: como ya dijimos en un post anterior, “los interfaces son como las bromas: si hay que explicarlos es que no son buenos”. Lo mismo se aplica a las microinteracciones. Deben ser entendibles por sí mismas y no confundir al usuario.

Desde un punto de vista formal, las microinteracciones funcionan en un mecanismo que se compone de cuatro fases, según lo describe Dan Saffer, creador del concepto y autor de un libro sobre el tema:

  1. Disparador: El disparador es lo que desencadena la micro-interacción.
  2. Reglas: determinan el “juego” de la microinteracción y se entienden por el feedback que devuelve. Suelen ser no explícitas, el usuario las entiende sin necesidad de explicarlas. La interfaz se convierte en algo lúdico y exploratorio.
  3. Feedback: es la respuesta que devuelve la micro-interacción y que explicita esas reglas.
  4. Bucle y modos: los modos son acciones infrecuentes (no siempre aparecen) pero críticas, como elegir la ciudad en una app del tiempo. El bucle es el ciclo que dura la interacción y, si se repite, cómo cambia a lo largo del tiempo.

Algunos principios para diseñar micro-interacciones

Como decíamos antes, cuando diseñamos estas microinteracciones, estamos trabajando los detalles de una aplicación por lo que tenemos que tener en cuenta algunos principios:

  • No diseñes de cero: siempre tendrás datos del usuario, aplicación o SO. Utiliza esos elementos para diseñar micro-interacciones con las cuales el usuario se sienta feliz y cómodo.
  • Anticipa los datos: siempre que sea posible, incluye información que resulte útil sin necesidad de interacción con el interfaz. Por ejemplo, el número de correos por leer aún sin abrir la aplicación.
  • Prevente de los errores humanos: los humanos cometen errores siempre, intenta que nada rompa el ciclo de la microinteracción.
  • Usa lo existente: no añadas botones o elementos superfluas, intenta usar los elementos que los que dispones en la interfaz, o las posibilidades que te ofrecen elementos como las ayudas contextuales o los tooltips.
  • Habla como tu usuario: si tu usuario es técnico usa lenguaje técnico pero, en caso contrario, utiliza un lenguaje lo más simple y concreto posible. Adáptate al entorno en el que se desarrolle la micro-interacción.
  • Bucles largos: debes pensar no solo lo que ocurre en un ciclo corto, sino en un ciclo largo cuando la microinteracción es ejecutada miles de veces, y si es posible irlas cambiando o mejorando para no dejar de sorprender o agradar al usuario con ellas.

En las microinteracciones son importantes tanto la calidad de los detalles, como el conocimiento del entorno donde se inscriben, ya que determinarán que tus usuarios las comprendan y les gusten.

Si quieres ver ejemplos de microinteracciones en diferentes entornos que te sirvan de inspiración para las tuyas, un buen sitio es Little Big Details (Pequeños Grandes Detalles) que recopilan numerosos ejemplos que pueden servirte de ejemplo de las mejores compañías y sitios web. Por supuesto, también hay que conocer los principios de animación básicos.

Detalles que pueden parecer sin importancia pueden suponer la diferencia entre un buen producto digital y el mejor producto digital posible. Una diferencia notable entre Apple y Microsoft, por ejemplo, es el gusto por el detalle y el cuidado de las interacciones hasta el más mínimo detalle. Para ello, hay que conocer los límites tecnológicos que nos restringen, el primer iPhone o el primer Macintosh distaban de ser perfectos pero causaban impresión en el usuario al usarlos y los diferenciaba del resto de productos.

Del mismo modo que Eames, Saffer también considera que la micro-interacción refleja una filosofía de trabajo bien hecho, de atención al detalle y de observación del usuario.

Bola extra: Resumen de Dan Saffer sobre microinteracciones, con videos y charlas sobre el tema.

Actualización 28/12/2016

Stephen Moyers ha añadido nuevas ideas sobre microinteracciones, como no dan para escribir un post en exclusiva, añadimos un par de párrafos de actualización para que lo tengáis todo junto.

Moyers explica que las microinteracciones son una buena elección para dos funcionalidades:

  • Aprender nuevas cosas: las microinteracciones son un elemento ideal para enseñar nuevas funcionalidades dentro de un interfaz. Ya que se pueden usar varias de ellas para mostrar los nuevos aspectos de una interfaz y mostrarles el modo de actuar a los usuarios.
  • Integrarlas en los CTA: las microinteracciones se pueden usar para hacer CTAs creativos y que se diferencien del resto de CTAs para destacar, pero ten en cuenta también que los usuarios se acostumbran a los cambios rápidamente y lo nuevo se les vuelve viejo, por lo que deberás cambiarlo cada cierto tiempo para ser creativo de nuevo.

Ver también:

Artículo actualizado en marzo de 2022

En Torresburriel Estudio diseñamos interfaces de usuario para todo tipo de productos digitales: sitios web, aplicaciones… Si necesitas acompañamiento o consultoría para diseñar o mejorar tu producto, contáctanos y analizamos tu proyecto.

¿Quieres darnos tu impresión sobre este post?

12 respuestas a “Micro-interacciones, la diferencia está en los detalles”

  1. […] UX Magazine también han hecho sus 13 predicciones para 2017. Entre ellas algunas recurrentes: microinteracciones, proselistismo del diseño, diseño compasivo (aunque en el artículo lo llamen diseño responsivo […]

Deja una respuesta

Aquí va tu texto personalizado.

Blog

Nos encanta compartir lo que sabemos sobre diseño de producto y experiencia de usuario.
Ver todo el blog
Puedes consultarnos lo que necesites
Envíanos un mensaje
Nombre
Email
Mensaje
Gracias por escribirnos. Nuestro equipo se pondrá en contacto contigo tan pronto como sea posible.
Ha ocurrido un error. Estamos trabajando para resolverlo. Puedes escribirnos al chat.