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
Micro-interacció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 micro-interacció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 micro-interacciones 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 micro-interacciones son:

  • Son útiles: si una micro-interacción no resulta útil, es mejor que no esté.
  • Sorprenden o agradan al usuario: una micro-interacció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 micro-interacciones 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 micro-interacció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 micro-interacciones, 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 micro-interacció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 micro-interacció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 micro-interacciones 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 micro-interacciones 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 micro-interacciones, 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.

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.

Comentarios

  1. […] de las microinteracciones que se están imponiendo son las referidas a los procesos de onboarding o de acompañamiento en […]

  2. […] dando importancia a aceptar el error como parte del proceso de aprendizaje y de éxito. Igual que mejoramos la experiencia del usuario usando microinteracciones, diseñamos experimentos que afecten a áreas pequeñas de la organización para evaluar qué […]

  3. […] palancas de compra, por ejemplo, son microinteracciones que animan a nuestros clientes a comprar. En este artículo vamos a tratar algunas palancas que […]

  4. […] buenas microinteracciones con tus usuarios. Las microinteracciones son las diferentes formas en que nuestra web responde de […]

  5. […] Es conveniente mostrar cómo usar el producto a través de la información de herramientas, microinteracciones, etc. O, mejor aún, hacer algo de forma proactiva para el usuario que les ayudará a sentir que […]

  6. […] os hemos hablado en otras ocasiones de microinteracciones, esos pequeños detalles en una interfaz de usuario que hacen que la experiencia de usuario mejore […]

  7. […] 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 […]

  8. […] Más información | Torres Burriel […]

  9. […] de descubrimiento y el aprendizaje, como explican Norman y Nielsen. Las animaciones mediante micro-interacciones, también presentes en años anteriores, permitirán guiar al usuario para detectar qué […]

  10. […] y sorprendentes. Para más información sobre este concepto, recomendamos la lectura del artículo Micro-interacciones, la diferencia está en los detalles, la consulta de los ejemplos propuestos en 8 Steps to Amazing Microinteraction Design y la […]

  11. […] he pensado que lo que distingue un buen producto o servicio de uno cualquiera es su atención y mimo por los pequeños detalles. Y en concreto, si nos referimos a la interacción, un sistema efectivo consiste en la suma de las […]

Trabajamos proyectos de diseño de servicios y productos digitales en los que la investigación de usuarios es un elemento fundamental del proceso.