Microinteracciones y UX: Por qué usarlas

¿Qué entendemos por microinteracciones? ¿Por qué mejoran la experiencia de usuario? ¿Cómo podemos hacer uso de ellas? En este artículo vas a poder conocer un poco más sobre estas animaciones, que se están convirtiendo en un must de todo diseño de interfaz.

¿Qué son las microinteracciones?

Una microinteracción es una animación que aparece cuando el usuario interactúa con la interfaz, es decir, cuando realiza una acción en la misma y ésta le ofrece una respuesta.

Las microinteracciones han sido usadas siempre en las interfaces. Los encontramos habitualmente en los botones, en las comprobaciones y ayudas de formularios, al hacer un like en Instagram o en Twitter.

No obstante, en los últimos tiempos el uso de estas animaciones no se trata solo de interactuar con el usuario, sino que además se han convertido en una tendencia para crear una experiencia de usuario más agradable y memorable.

Muchos sistemas operativos ya incluyen de forma nativa estas animaciones en sus guías de estilo y lo podemos comprobar cuando hacemos uso en el día a día de nuestros smartphones.

¿Cómo mejoran la experiencia de usuario?

El uso de microinteracciones ayuda principalmente al usuario a la hora de utilizar la interfaz y de ser guiado por ella. Son importantes para hacer los procesos más sencillos.

Para el usuario, estas animaciones deben ser transparentes. Probablemente si se da cuenta de que existen no estemos creando una buena experiencia de usuario. Un ejemplo podría ser crear un spinner mientras los datos de una aplicación se actualizan. Seguramente no nos daremos cuenta de que eso ha estado diseñado, pero ¿qué pasaría si no existiese? De ahí la importancia de crear microinteracciones.

Como decía, el usuario no es consciente de estas animaciones pero sus detalles hacen que el servicio o producto que estamos ofreciendo sea mucho más amigable y fácil de usar, mejorando su experiencia y aumentando el engagement con la marca.

A continuación listamos algunos de los beneficios que vamos a obtener con el uso de microinteracciones:

• Como ya hemos dicho, crear engagement con la marca. Por ejemplo, en un ecommerce, el usuario podrá percibir la sencillez de uso y lo fácil que es comprar en esa tienda, repitiendo probablemente la compra en un futuro.
• Conseguir que el usuario interactúe con el contenido. Instagram o Facebook serían un claro ejemplo de una grata experiencia de usuario en las que las microinteracciones tienen un papel protagonista y donde la interacción entre usuarios y contenido es lo más importante.
• Evitar errores entre el usuario y los procesos. Si bien es verdad que no se podrán evitar todos los errores, se podrá conseguir que el usuario esté mucho más guiado. Un ejemplo práctico serían las ayudas flotantes o avisos bien definidos que guíen el usuario hasta el error en el caso de que no haya completado bien un formulario.

Algunos consejos sobre cómo diseñar microinteracciones

El diseño de microinteracciones es el trabajo que se centra en los detalles de una aplicación y como todo proceso de diseño se deben tener en cuenta unas reglas:

• Identifica el problema y establece un objetivo: piensa en el objetivo de las mismas, en el tipo de animación y no hagas uso de ellas si no es necesario.
  
• No te excedas en su uso: si utilizamos demasiadas interacciones el usuario puede verse abrumado o distraerse del proceso que está realizando, por eso deben ser siempre controladas y pensadas para su finalidad.
  
• Usa interacciones naturales: si usamos una transición no adecuada, podemos hacer que el usuario no se sitúe o no entienda lo que está pasando, y por lo tanto no pueda llegar a su objetivo de uso.
  
• Simplicidad y sutileza: son las claves para el uso y la creación de microinteracciones. Debemos evitar que el usuario se pregunte qué ha pasado o en qué pantalla está, esta desorientación hará que el usuario no termine el proceso y se quede frustrado.
  
• El tiempo adecuado: existen muchísimos tipos de interacción y debemos establecer el tiempo que deben durar para que el usuario no se distraiga ni pierda el foco. No es lo mismo una transición entre pantallas, que una carga de datos, que un efecto al hacer scroll.

Como se ha comentado al principio del artículo, muchos sistemas operativos ya incluyen microinteracciones en sus guidelines. Nos parece importante compartir cómo Material design nos explica cómo debemos usar estas animaciones. Si quieres ampliar la información puedes verlo aquí.

Conclusión

En definitiva el uso de microinteracciones mejora claramente la interfaz y la experiencia de usuario con la misma, haciéndola más agradable y probablemente consiguiendo que repita en el futuro.