María Sierra

En una página web una microinteracción es cada una de esas pequeñas tareas que el visitante puede realizar para obtener algo a cambio, pero también es la comunicación explícita de que esa tarea se ha realizado (o no). Acción y comunicación son los dos elementos esenciales de una microinteracción y van inevitablemente unidos. Cobran sentido el uno por el otro.

Pongamos de ejemplo el hecho de poder quitar el sonido a una web que se carga con música en autoplay. La acción sería pinchar en el icono del altavoz y la comunicación, la línea de tachado que aparece sobre el icono o la desaparición de las líneas de sonido en el mismo. Otro ejemplo sería el icono girando o el tooltip indicando ‘cargando’ que aparece en las webs cuando se activa el botón de refrescarlas. Y si hablamos de dispositivos, podríamos hablar de la vibración que emite un teléfono móvil cuando se le desactiva el volumen. Esa vibración representa la comunicación y es el indicativo claro de que la acción se ha desarrollado con éxito. No siempre es necesaria, como hemos visto. Si se quita el sonido al autoplay de una web, será evidente que ha funcionado cuando deje de sonar. No es necesario modificar el icono del altavoz para comunicar el éxito de la acción y, sin embargo, sí es lo esperado.

Siendo previsible

Es lo esperado, porque esa es una de las características intrínsecas a las microinteracciones: la capacidad de humanizar la interacción entre máquina (web, app) y persona (usuario) evidenciando una comunicación. El visitante activa una acción y espera no sólo que se cumpla, sino que se le comunique. Y es precisamente en esta comunicación en la que radica el resurgimiento que están viviendo las microinteracciones como piezas claves en la experiencia de usuario (UX).

Las microinteracciones constituyen en el mundo del diseño un ecosistema propio, que crece y evoluciona. Hay acciones que ya tienen cierta antigüedad y que forman parte del núcleo duro de interacción con una web (como que al clicar en el logo se cargue la portada). Otras han ido evolucionando con el tiempo. Y muchas otras se han ido sumando a medida que se planteaban problemas y se buscaban soluciones. Es el caso, por ejemplo, del menú hamburguesa, por mucho que le pese a algunos. A día de hoy, en la lógica del usuario el icono de las tres líneas es evidentemente clicable y este clic (acción) ocasiona una comunicación igualmente esperable: el despliegue de un índice de contenidos (menú).

Así pues, a priori puede resultar algo extraño el énfasis con el que los expertos en UX han abrazado últimamente este concepto, como si de algo nuevo se tratase. Sin embargo, tiene todo el sentido. La vorágine del ya dominante ‘mobile first’ llegó acompañada de una simplificación extrema en el diseño web. Adaptar las florituras de las webs diseñadas para ordenador a la pequeña pantalla del teléfono móvil fue una opción que no caló y se apostó por la sencillez y el scroll, dos conceptos que se abrazaron sin miramientos no sólo para smartphone, sino también para la versión de escritorio, convertida ya en la hermana pobre del diseño web.

Minimal, pero no aburrido

La sencillez ha llevado aparejada una llamativa falta de originalidad en el diseño. La demanda de ‘mobile first’ se ha traducido no sólo en simplificación, sino también en simpleza. Es precisamente en este contexto en el que las microinteracciones se han revalorizado. Y mucho. En un escenario en el que la interacción del usuario con la web o con la app se basa en ciertas microinteracciones altamente, y necesariamente, previsibles, la originalidad no puede venir por la parte de la acción, pero sí de la comunicación. Se trata de comunicar lo esperado, pero de una forma única. La microinteracciones, por tanto, se han convertido en una gran oportunidad para marcar la diferencia, ganar notoriedad y aumentar el engagement. De ahí que se hayan colocado en el epicentro del diseño web.

Contextualizado el papel actual de las microinteracciones, repasemos algunos conceptos básicos en torno a ellas. Empezamos con Dan Saffer. Este experto en diseño de productos publicó en 2013 el libro ‘Microinteractions’, que es a día de hoy el punto de referencia sobre el que pivotan todas las publicaciones posteriores. En esta obra explicó los cuatro elementos básicos del proceso de funcionamiento de una microinteracción:

El detonante. Es el elemento que inicia la acción. Puede ser un elemento gráfico -como el icono del volumen- o físico -como los botones de subir y bajar el volumen de un teléfono-.
Las reglas. Son las que determinan qué pasará cuando un usuario active el detonante.
La comunicación. Es cómo informamos al usuario de que la acción se ha realizado correctamente. O no.
Bucles y modos. Es la capacidad de aprendizaje de las microinteracciones para crear experiencias únicas al usuario recurrente.

A partir del libro de Saffer se ha ido creando todo un vademécum en torno a las microinteracciones que nos permite sacar partido a la práctica propia y ajena y configurar seis claves a tener en cuenta cuando se diseñan interacciones:

Predecible. Sí, una microinteracción tiene que ofrecer al usuario que la desencadena la respuesta que espera. La innovación y la originalidad deben limitarse a la comunicación, no a las reglas, es decir, no a la propia acción. También hay cierto margen para diferenciarse en el detonante.
Coherente. Si bien hay que cuidar de forma independiente cada microinteracción que incorporamos a una web, también hay que tratarla como parte de un ecosistema mayor, que es la propia web, por lo que debe ser coherente con el diseño general y con las dinámicas relacionales que se establecen con los distintos elementos de la página.
Humana. Las microinteracciones suponen una fantástica oportunidad para debilitar un poco la barrera entre la máquina (la web) y la persona (el usuario), proporcionando una sensación de dialogo a la que es importante sacarle partido desplegando una comunicación adecuada.
Estratégica. Que una microinteracción consiga los resultados esperados depende en gran parte de que hayamos hecho los deberes y conozcamos perfectamente a nuestros usuarios. La investigación sobre qué espera el visitante de nuestra web y qué podemos ofrecerle con las microinteracciones que incorporemos es una parte fundamental de proceso de diseño.
Sencilla. Hablamos de microinteracciones y el prefijo es parte importante del tema. Es importante ceñirnos al concepto micro en cuando a sencillez: nada de complicar la interacción (a más acciones o pasos, más macro y menos micro) y nada de sobrecargarla visualmente.
Evolutiva. Al igual que hay que aplicar estrategia al proceso de diseño, también es fundamental medir los resultados obtenidos para actuar en consecuencia. Las microinteracciones que implementamos en nuestras webs no deben entenderse como elementos inamovibles, sino como elementos que se adaptan al usuario y a los objetivos marcados, modificándolos cuando así se considere necesario. Es decir, cuando la medición evidencie que hay que evolucionar.

Como broche, os proponemos un paseo por una web que reúne un montón de ejemplos de microinteracciones que pueden ser toda una inspiración para diseñar estos pequeños grandes detalles: littlebigdetails.com.