Las microinteracciones son pequeñas animaciones que hacen que el usuario interaccione mientras navega por un entorno web. Se caracterizan por ofrecer reacciones inmediatas e intuitivas ante las distintas acciones, reaccionando a un trigger que puede haberse activado tanto por la acción del individuo como por la lógica del sistema.
Al ofrecer un feedback sobre lo que sucede en cada momento en el flujo de trabajo, reducen la incertidumbre y recompensan el esfuerzo del usuario. En definitiva, establecen un contacto más cercano y mejoran la experiencia de usuario.
Algunas de las microinteracciones más usadas o conocidas son el círculo de carga que aparece al deslizar el dedo hacia abajo para refrescar una página en mobile, el cambio de color del corazón de Instagram cuando se pulsa o la animación en el icono del carrito de una ecommerce cuando se añade un nuevo producto a la compra, por ejemplo.
Consideraciones para la creación de microinteracciones
Una vez vistas todas sus ventajas, el camino fácil sería llenar toda la página de microinteracciones arbitrarias. Sin embargo, la capacidad que tienen estas animaciones para mejorar la experiencia de usuario depende de que respondan a decisiones fundamentadas.
Así pues, es importante tener en cuenta los siguientes aspectos:
- Las microinteracciones han de adaptarse al público objetivo. Deben resultar funcionales para las personas que interactuarán con ellas y responder a sus necesidades.
- Nunca deben saturar la página. Evitar la intrusión excesiva de animaciones logrará que los elementos más importantes destaquen, por lo que “menos es más”.
- Deben aportar información cognitiva, comunicando información útil y sobrepasando los motivos meramente estéticos.
- Deben adaptarse a la identidad corporativa. Una marca minimalista, por ejemplo, huirá de las microinteracciones muy complejas o recargadas.
Animación que muestra que un nuevo producto se ha añadido a la compra.
Fuente: Hiberus
¿Cuándo incluir interacciones?
Una vez tratadas las consideraciones previas, existe una amplia variedad de entornos donde la incorporación de microinteracciones puede contribuir a la mejora de la usabilidad. A continuación vemos algunos de ellos:
1. Los estados del sistema
Las microinteracciones pueden reforzar el primero y más importante de los principios heurísticos de usabilidad establecidos por Jakob Nielsen: dar visibilidad al estado del sistema. Mantener siempre informado al usuario sobre lo que sucede en las distintas etapas de un proceso genera confianza y seguridad, a la vez que le ayuda a decidir su siguiente movimiento.
Incorporar animaciones a las barras de progreso facilita el seguimiento de la operación en tiempo real, ofreciendo una comunicación constante y transparente.
2. Cambios importantes y notificaciones
Las notificaciones son una de las microinteracciones más habituales de hoy en día. Esta herramienta se utiliza tanto en entornos móviles como en sus versiones de escritorio, y permite informar al usuario de que ha recibido un nuevo mensaje de correo electrónico, un chat de un amigo o una oferta para canjear en su tienda online favorita, por ejemplo.
Cuando estos recursos incluyen pequeñas animaciones, su propósito es el de llamar la atención sobre un hecho importante y al que el usuario quizá necesita prestar atención. Generan un movimiento inesperado en la pantalla y dirigen la mirada hacia el elemento en cuestión.
Microinteracción para informar de la entrada de un nuevo correo electrónico.
Fuente: UX Planet
3. Ayuda y contexto
Las microinteracciones también permiten reforzar los elementos de ayuda y contexto. Crear transiciones y pequeñas animaciones entre dos pantallas que están conectadas ayuda a entender que forman parte del mismo proceso.
Este recurso resulta de especial utilidad en las interfaces para dispositivos móviles, donde el espacio limitado dificulta la percepción de pantallas superpuestas y acciones simultáneas. Detalles como una pantalla que se encoge hacia un pequeño icono al margen cuando se cierra, o elementos que se despliegan en una pantalla completa al clicar en ellos, facilitan la comprensión del usuario y le indican dónde se encuentra.
4. Data input
Cuando el usuario introduce información en un campo de entrada de datos, a menudo debe confiar en que esta se registre correctamente y sea recordada por el sistema. Las microinteracciones que se incluyen durante un proceso de data input, sin embargo, pueden mostrar en tiempo real dicha entrada de información y mejorar la confianza del individuo.
Incluir una pequeña animación durante la elección de una contraseña, por ejemplo, permite indicar de forma inmediata cuál es el nivel de fortaleza o validez de la palabra escogida, en lugar de esperar a que el usuario trate de continuar para indicarle que la contraseña no es válida. Este tipo de feedback le ayuda a adaptarla rápidamente, reduciendo la frustración que de otra forma generaría la posterior pantalla de error.
Animación de interfaz durante la entrada de texto para la elección de contraseña.
Fuente: Medium
5. Call to Action
A menudo, uno de los aspectos más complejos es lograr que el usuario que lleva un rato navegando por la web acabe haciendo clic en un call to action y convirtiéndose en una venta o lead. Las microinteracciones situadas de forma estratégica en los botones de acción pueden fomentar este último paso, empleando la empatía y conectando con las emociones del individuo para llegar a él de forma más cercana y personal.
Puesto que los call to action son un momento decisivo para la conversión, es importante que su diseño responda al carácter e identidad de la marca. Una microinteracción con tono humorístico puede ser efectiva en algunos casos, mientras que en otros solo servirá para confundir a aquel usuario que ha estado navegando por una interfaz minimalista y sobria.
Microinteracción en tono humorístico para un call to action.
Fuente: UX Planet
Si estás pensando en incluir microinteracciones en tu interfaz con el objetivo de mejorar la experiencia de usuario, pero no sabes por dónde empezar, el equipo de especialistas de GammaUX te orientará con la solución que mejor se adapte a tu producto o servicio. ¡Contáctanos!
