Microinteracciones, pequeñas acciones que sí importan

Oriana Yriarte

Diseñador UI/UX

Perfil Linkedin
05 de Mayo de 2019

Por mucho tiempo he escuchado que hay detalles que son una pérdida de tiempo, pero como diseñadora de interfaces y experiencia de usuario, suelo hacerme muchas preguntas, analizar cada respuesta, para así poder brindarle una experiencia más satisfactoria al usuario. En algunas ocasiones, pasamos por alto esos pequeños detalles que más que hacernos perder tiempo, se convierten en emociones para nuestros usuarios.

Ahora sabrás de que pequeños detalles estamos hablando… Os presento las micro-interacciones.

Definamos ¿qué son las microinteracciones?

Las microinteracciones o microinteractions son pequeños feedbacks que arroja una aplicación o web a los usuarios. Es decir, cada microinteracción tiene como propósito informar de forma visual, audible y/o kinestésica al usuario de acciones realizadas en el sistema.

¿Qué hay de las funciones?

En mi opinión tienen cuatro funciones importantes

Comunicar los cambios de estado y proporcionar información inmediata.
Guiar al usuario de una manera fluida e intuitiva por la web o aplicación.
Ayudar a los usuarios a prevenir errores.
Crear un efecto emocional positivo.

Normalmente, para acciones frecuentes, las reacciones deberían ser pequeñas, mientras que para acciones poco frecuentes la respuesta debe ser notable. Las microinteracciones mejoran la usabilidad y a la vez dependiendo de donde y como se apliquen pueden provocar respuestas inesperadas poco intrusivas, de manera grata al usuario para hacer que su experiencia sea más atractiva y diferente.

Y ahora… cuando interactuamos con microinteracciones en el mundo real

En fin, las microinteracciones son esas pequeñas secuencias que se producen cuando el usuario realiza una acción, y sí, convivimos a diario con ellas como:

Los íconos que muestra WhatsApp en cada mensaje, para informar del estado de las conversaciones.
La pequeña vibración que se produce cuando pasamos el móvil a modo vibración.
Las validaciones de los campos de los formularios al escribir un email erróneo.

On Dribbble by Kristijan Popaginovski

La pequeña animación que hace el icono del móvil al cerrar la cámara.
Las animaciones del icono de menú hamburguesa que se convierte en una x.
El mensaje de deshacer al eliminar un correo de gmail.

On Dribbble by Andrei Mironov

Y cómo estás tenemos múltiples microinteracciones en el mundo digital. ¿Y tú? ¿cuántas veces has usado alguna en una de tus desarrollos?

Puede que ninguna, o que ya hayas hecho algunas sin ponerle un nombre aparente, pero profundicemos un poco más para que se nos hagan más fáciles de recordar y llamemos a cada cosa por su nombre y sepamos cual es el objetivo de cada una.

Hay algunos elementos que debe tener toda microinteracción

Las Microinteracciones se conforman en cuatro partes:

El Trigger o disparador que activa la microinteracción, puede ser iniciado por el usuario cuando le surge el deseo de hacer algo, en este caso el disparador debe ser visible y fácil de reconocer o iniciado por el sistema que se dispara cuando se cumplen ciertas condiciones.
Rules o reglas que determinan lo que sucede una vez que se active el disparador, reduce la complejidad fijando valores por defecto.
Feed Back o retroalimentación permite que el usuario tenga conocimiento de lo que está sucediendo. El feedBack puede ser visual, audible o vibrotáctil y permite dotar a la aplicación de personalidad y evita momentos de incertidumbre a los usuarios.
Loops and Modes o bucles determinan la duración de la microinteracción, si se repiten o cambia en el tiempo, y los modos determinan los momentos concretos en los que la microinteracción cambia las condiciones.

Si las Microinteracciones son esos pequeños elementos de diseño, ¿por qué debemos preocuparnos por ellas?

Hablemos de los beneficios que tienen las micro-interacciones en un producto digital

Ignorar las Microinteracciones puede costarle mucho a un cliente. La atención a los detalles es lo que hace de un sitio web o app una experiencia excepcional de una experiencia normal. Algunas de las importancias son las siguientes:

Mejoran la navegación de una página web o aplicación.
Facilitan la interacción de los usuarios con la interfaz.
Proporcionan sugerencias de manera instantánea, sobre una acción que realice el usuario, evitando errores.
Dan consejos a los usuarios.
Comunican información sobre ciertos elementos, ya sean interactivos o no.
Hacen que la experiencia del usuario sea mucho más gratificante.
Fomentan acciones para compartir, apreciar y comentar el contenido que coloquemos en nuestra plataforma.
Dirigen la atención de los usuarios.
Hacen que el sitio web o app sean más emocional.

On Dribbble by Mark Kupasrimonkol

Las buenas Microinteracciones y bien diseñadas, son un signo claro de cuidado centrado en la experiencia de usuario. Y es por ello que son tan valoradas. El usuario sabrá qué hacer y si su acción es correcta y aprobada por el sistema o no, una aplicación o sitio web proporciona una respuesta visual inmediata y enseña a un usuario a trabajar con la plataforma.

Saquemos nuestras propias conclusiones

Las microinteracciones son pequeñas piezas de diseño, que cuando se realiza de forma correcta, puede generar sentimientos positivos, influye en las acciones que realizan los usuarios, brinda la satisfacción de los logros, da sensación de alivio, y da una señal para eliminar el conjunto de procedimientos pendientes de las mentes de los usuarios y se preparan para el siguiente grupo de acciones.

Por lo que la atención a los detalles, ayudará que el usuario sienta satisfacción al usar el producto, con ellas generemos la posibilidad de que el usuario interactúe con la plataforma de manera ágil, comprensible e intuitiva.

Los detalles menores merecen mucha atención, la atención a cada uno de los detalles es clave para su éxito, lo que hace que la interacción entre humanos y computadoras sea más grata.

Ahora que sabes, los beneficios de implementar Microinteracciones en el Diseño de la Experiencia de Usuario (UX) en tu web o aplicación, ¿qué piensas de este post?. Si te ha gustado, compartelo con alguien a quien le pueda ayudar esta información.

No te pierdas el artículo anterior sobre metadatos, en donde podrás leer que datos tiene el contenido que subes y compartes en tus redes