CSS, Diseño

Tendencias de la web: Las micro-interacciones.

Hace algunos días escribí un artículo que se refería a las tendencias que seguían dominando el mundo de la web en este 2017. Trabajo en el que hice referencias a cada una pero no aborde en profundidad sobre las misma . Por eso me he propuesto realizar una serie de trabajos donde explicaré en que consiste cada una de ellas. Para comenzar con esta serie de artículos lo haré con las micro-iteraciones.

Para abrir este post me gustaría la frase de Charles Eames que dice “Los detalles no son solo detalles, son lo que define el producto”. Frase que 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.

Definiendo entonces 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.

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.

Acerca de Daniela Faife Beltran

Diseñadora gráfica y para la web. Miembro del grupo WebDevCuba desde su fundación. Amante de las series y sobre todo del color azul.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *