Por Montserrat Francis Rodríguez Hernández

Resumen

El presente artículo es parte de la tesis titulada Implementación de las micro-interacciones para mejorar la interfaz y la experiencia de usuario en un e-commerce, donde se habla del tema de micro-interacciones.

El artículo tiene como objetivo identificar el beneficio de las micro-interacciones en la experiencia de usuario. La pregunta central es ¿de qué manera las micro-interacciones ayudan a las compras de los usuarios? La hipótesis es: las micro-interacciones son útiles para llevar un proceso de forma correcta y una fácil navegación notificando a los usuarios cuando se completa una acción o proceso.

El artículo consta de dos partes, en la primera se revisa la relación de las micro-interacciones con la experiencia de usuario implementando de manera adecuada a momento de la realización del e-Commerce y así facilitar la navegación en un nuevo sitio. Como segundo punto se analiza qué micro-interacciones son adecuadas para implementar en el e-Commerce y de qué maneras benefician al usuario.

Palabras clave: micro-interacciones, e-commerce y experiencia de usuario

The benefit of micro-interactions in user experience

Abstract

This article is part of the thesis entitled Implementation of micro-interactions to improve the interface and user experience in an e-Commerce, where the subject of micro-interactions is discussed.

The article aims to identify the benefit of micro-interactions in the user experience. The central question is, in what way do micro-interactions help users’ purchases? The hypothesis is: micro-interactions are useful to carry a process correctly and easy navigation, notifying users when an action or process is completed.

The article consists of two parts, the first one reviews the relationship between micro-interactions and the user experience, implementing it appropriately at the moment of the performance of the e-Commerce and thus facilitating navigation on a new site. As a second point, it is analyzed which micro-interactions are suitable to implement in e-Commerce and in which ways they benefit the user.

Keywords: micro-interactions, e-commerce and user experience.

Artículo PDF

 1. ¿Qué son las micro-interacciones?

El padre de las micro-interacciones, Dan Saffer, en su libro Microinteractions menciona que “… son acciones simples y pequeños momentos de intercambio entre el usuario y la interfaz”. (Saffer, 2) Estas provocan en el usuario una respuesta inesperada, poco intrusiva, le sorprenden, facilitan la comprensión y mejoran su experiencia. Su uso debe ser elegante, moderado y armonioso. Hay que concebirlas en conjunto como pequeños elementos que funcionan en grupo y que buscan una experiencia de navegación optimizada y diferente.

Las micro-interacciones son pequeñas acciones que ayudan al mejor entendimiento de la actividad que se realiza y son prácticamente imperceptibles en gran parte de nuestra vida; las utilizamos al interactuar con nuestros celulares, realizar compras, utilizar Facebook, navegar por páginas web. Un ejemplo de ello sucede al desbloquear nuestros dispositivos: cuando deslizamos el dedo existe una vibración y una animación. Otro ejemplo está en nuestras redes sociales, por ejemplo, en Facebook al momento de reaccionar a alguna publicación.

Alexandre Cuadrado en su artículo “Microinteracciones en la interfaz de usuario” las define como una “… animación a modo de retroalimentación y se produce cuando el usuario realiza una acción concreta”. (Cuadrado, 2) En ocasiones no sólo la animación se produce durante una acción concreta, sino también con la interacción en el mismo sitio; al ser algo agradable para el usuario, mantiene su atención sin que sean un distractor para él.

Samuel Gimeno Artigas en su artículo “Micro-interacciones, la diferencia está en los detalles,” las reconoce como: “Una respuesta al usuario por parte de una interfaz, generando una respuesta inesperada y poco intrusiva que sorprenda o agrade al usuario”. (Gimeno, 3)

A continuación, se presenta una tabla comparativa de las definiciones de los autores:

         Micro-interacciones

Tabla 1. Comparación de definición de micro-interacciones (elaboración propia).

Partiendo de las definiciones dadas es posible decir que las micro-interacciones son pequeñas animaciones que ayudan al usuario a recibir fácil navegación, una respuesta inesperada y agradable para él.

En el artículo de David Arenzana sobre los principios de la usabilidad web de Jakob Nielsen, Diseño UX, se lee: “Mantén a tu usuario informado de lo que está pasando”. (Arenzana, 13)

Algunos ejemplos de las micro-interacciones las menciona Movetia en el artículo Las micro-interacciones, una tendencia en el diseño UX, y se presentan a continuación (Movetia, 5):

	Cualquier pulsación que desencadene una acción dentro de una interfaz de usuario es una micro-interacción. Un ejemplo claro de ello es al desbloquear el celular. Al deslizar el dedo en el círculo este cambia de color de rojo a verde, el cual indica que se ha  desbloqueado.
En este caso la animación indica que se envía un mensaje. El avión de papel sale volando y en su lugar aparece una [paloma en fondo verde], la cual indica que se ha enviado satisfactoriamente el mensaje. En el e-commerce se utilizaría al enviar un mensaje a la página con alguna duda o comentario.
	También se puede visualizar en un menú al oprimir el botón  [signo de sumatoria en fondo azul] y mostrará el menú completo, esto evita ocupar mucho espacio con texto; este tipo de menú suele utilizarse para las redes sociales. En el e-commerce se implementa para agregar más contenido al sitio, por ejemplo, las redes sociales.
Las notificaciones son útiles ya que no solo se visualiza algo estático, si no que también se ve un cambio al momento de la llegada de los mensajes o notificaciones. En el e-commerce se usan para indicar que ha llegado algún aviso o bien alguna promoción.

Una buena forma de utilizar las micro-interacciones en un e-commerce se da cuando podemos ver el detalle del producto, o bien, realizar la compra. En este caso al dar clic en el botón [icono de bolsa de compra en fondo verde] se desplegará la información más a detalle, incluyendo la opción de comprar y la cantidad.

Utilizar micro-interacciones ya existentes facilita la interacción del usuario con un sitio web porque cumplen con varias funciones: conocer más detalladamente las especificaciones del producto, recibir notificaciones, conocer el estado del envió del mensaje.

1.1 Tipos de micro-interacciones

A continuación, describiremos los tipos de micro-interacciones referidos por María López en su artículo Micro UX, o como mejorar la experiencia de Usuario con micro-interacciones.

Micro-interacciones gestuales

Son gestos ya universales que se utilizan en la vida cotidiana, se manifiestan, por ejemplo, al deslizar el debo hacia abajo, o bien, hacia un lado para desbloquear el dispositivo móvil o para actualizar la página en la que se encuentra el usuario.

Un ejemplo de ello lo encontramos en la tienda virtual de ropa ZARA cuando se accede desde un dispositivo móvil: al deslizar el dedo hacia abajo aparece el ícono de carga, cuya función es actualizar la página. (López, 19) En un e-commerce el ícono se utiliza para que el usuario tenga actualizada la página o para indicarle que un proceso se encuentra en ejecución y así evitar que éste se desespere.

Basados en el mismo ejemplo de tienda, otra micro-interacción gestual es la de ampliar la pantalla. Esta función sirve al momento de visualizar el producto y ayuda al cliente a acercarse al producto que se desea adquirir sin perder de vista la calidad de la imagen y los detalles.

Micro-interacciones de navegación

Este tipo de micro-interacción es la que nos ayuda a navegar más fácilmente por la página sin usar el scroll.

Un ejemplo lo encontramos en la flecha que apunta hacia arriba cuando el usuario se encuentra muy abajo en la página, de tal modo que lo dirigirá a la parte superior. Por lo regular en la página principal de un e-commerce se visualizan los diversos productos que se ofrecen yal desplazarse hasta el final será más cómodo para el usuario dar clic en la flecha y que ésta lo lleve fácilmente al inicio de la página. (López, 20)

Micro-interacciones de engagement

Los detalles hacen sentir especiales a los usuarios. Los microcopys son los responsables de que los usuarios se sientan especiales y se creen vínculos con la marca.

Un ejemplo lo encontramos al rellenar un formulario en ASOS en el que solicitan la fecha de nacimiento y al ingresarla muestra los días faltantes para que llegue ese cumpleaños. Esto hace sentir al usuario especial y parte del sitio, ya que se toma en cuenta una fecha importante para él. Quizá ese día reciba algún regalo o bien una promoción.

Micro-interacciones sociales

En algunas ocasiones presentar una opción de redes sociales quita visibilidad o puede resultar molesto al usuario porque ocupa la pantalla, por tal motivo se genera un botón flotante que se despliega solo si se desea compartir el artículo o producto. Páginas que ya cuentan con esto son el periódico 90MIN o Facebook con sus reacciones. Páginas de comercio electrónico como Mi álbum, emplean una barra lateral la cual se desplaza sin tapar el contenido.

Al dar clic en el botón [icono de “compartir” en fondo naranja] se despliegan hacia la izquierda los botones para ingresar a las redes sociales y así compartir el contenido. (López, 30)

En el e-commerce es una buena opción para implementar la publicidad de nuestro producto y que sea visible para varias personas.

Micro-interacción multimedia

Para destacar productos la web de Mango utiliza video que no ralentiza la velocidad de carga y es una forma original de destacar productos.

Al reproducirse, la imagen de la izquierda muestra las diferentes partes de la ropa y permite una mejor perspectiva. (López, 32). En un e-commerce colocar un video facilita la presentación del producto en distintos ángulos y evita el uso de un carrusel.

Micro-interacciones de navegabilidad

Algunos usuarios buscan comprar productos que se adecuen a sus necesidades específicas. Tomemos como ejemplo la tienda en línea de Nike: como primer paso se elige el producto y se selecciona el color de cada parte del zapato, cada elemento se presenta a detalle y se muestra como quedaría el producto final. (López, 36)

En el e-commerce se tiene planteado que el cliente arme su producto con base en sus necesidades.

A manera de resumen los tipos de micro-interacciones gestuales, navegación, engagement, sociales, multimedia y navegabilidad son las que actualmente se integran a los e-commerce y cada una ayuda al usuario en la comprensión de las acciones que realiza.

2. Características de las micro-interacciones

Las micro-interacciones deben ser predecibles, coherentes, humanas, estratégicas, sencillas y evolutivas, estas características harán que el usuario las entienda de una mejor manera y su manejo sea fácil.

Presentamos ahora una breve explicación de cada una de las características mencionadas partiendo de los planteamientos de María Sierra en su artículo Microinteracciones, esos pequeños grandes detalles del diseño Web.

Predecible

Tiene que ofrecer al usuario que la desencadena la respuesta que espera. Por ejemplo, los íconos: el usuario ya está acostumbrado a diversos íconos que realizan una acción; como el carrito de compra, el usuario ya sabe que ahí se encuentra el total y el detalle de su pedido.

Coherente

Si bien hay que cuidar de forma independiente cada micro-interacció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

El usuario siempre espera la reacción adecuada a lo que solicita y no una respuesta errónea. Día a día nos encontramos con la interacción con la tecnología: el desbloqueo de nuestros celulares o al eliminar una aplicación de nuestro dispositivo.

 Estratégica

Que una micro-interacción consiga los resultados esperados depende en gran parte de que se realicen 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 micro-interacciones que se incorporan es una parte fundamental del proceso de diseño.

Sencilla

Hablamos de micro-interacciones y el prefijo es parte importante del tema. Es importante ceñirnos al concepto micro en cuanto 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

De la misma manera en la que se aplica estrategia al proceso de diseño, también es fundamental medir los resultados obtenidos para actuar en consecuencia. Las micro-interacciones que implementamos en nuestra web no deben entenderse como elementos inamovibles, sino como elementos que se adaptan al usuario y a los objetivos marcados, modificándolos si es necesario. Es decir, cuando la medición evidencie que hay que evolucionar. (Sierra, 3)

Al aplicar estas características de la manera correcta se ayuda a los usuarios a entender y facilitar el manejo de un sitio de e-commerce sin confundirlos, cumpliendo así con el objetivo principal de la integración de las micro-interacciones.

3. Estructura de las micro-interacciones

En su libro “Microinteractions”, Dan Saffer menciona que las micro-interacciones tienen una estructura compuesta por cuatro partes: el gatillo, las reglas, la retroalimentación y los bucles y modos. (Saffer, 14)

En la página web Cátedra diseño, en su artículo “UXUI: microinteracciones”, define detalladamente cada parte de la estructura y a continuación las citamos:

El gatillo (trigger) es la primera parte de una micro-interacción: es lo que permite que el usuario haga algo para iniciar el proceso, ya sea apretar un botón o deslizar un interruptor.

El gatillo, como se menciona en el párrafo anterior, es de las partes principales de la micro-interacción, ya que ayuda a que la gente entienda la acción a realizar. Recordemos que la micro-interacción debe ser coherente y que sea fácil de identificar para el usuario. El gatillo es el que dispara la animación, si no se incorpora no se activa.

Reglas(rules), son definidas previamente por el diseñador. Hacen que las micro-interacciones sean las adecuadas para el usuario, ya que éstas deben tener relación con el mundo real. Se refieren a cosas que los usuarios ya tienen identificadas (como los iconos que emplea Word) y la sola imagen indica para qué sirven, por ejemplo: el disco para guardar, las tijeras para cortar, las dos hojas encimadas para copiar. Otro ejemplo está en Facebook: los iconos que utiliza ya están identificados visual y funcionalmente por los usuarios, como las notificaciones con el icono de la campana, las solicitudes de amistad aparecen en el icono de las dos personas, lo cual tiene mucha relación con la función que realiza.

Retroalimentación (feedback), puede efectuarse de manera visual, auditiva o táctil. Lo fundamental aquí es que el mensaje de respuesta tenga relación directa con la acción realizada y se emita por el canal más efectivo en cada caso.

La retroalimentación, como se menciona, nos da la respuesta que se espera que tenga la micro-interacción sin molestar al usuario. Un ejemplo de ello es una animación al momento de enviar un mensaje desde un sitio web, se puede incorporar el icono de un avión de papel que al momento de enviar el mensaje éste salga volando y el usuario entenderá que su mensaje fue enviado. Otro ejemplo lo encontraríamos para indicar que se tiene una notificación, se integra entonces el icono de una campana que vibre cuando hay una novedad y además muestre al usuario el número total de notificaciones. También encontramos ejemplos en la función de autocompletar que ofrece un campo de texto o las pistas que se en un formulario para completar una tarea.

Bucles y modos (loops and modes), cierran el proceso de la micro-interacción o también lo vuelven a iniciar. Los modos hacen referencia a las diferentes opciones que pueden existir dentro de una micro-interacción, uno de ellos es el modo “por defecto.” El diseñador debe decidir cuál será el modo de preferencia del usuario para evitar que su primera acción sea cambiar esta opción. (Diseño Cátedra, 5)

Los bucles son la última parte de la micro-interacción e indica al usuario que se ha concluido el proceso, por ejemplo, cuando se envía el mensaje y al finalizar la animación se cambia el color del botón a verde o el avión de papel que se cambia por una paloma indicando que el mensaje se envió con éxito.

Comprender la estructura de las micro-interacciones ayuda a llevar un control de la secuencia que se debe seguir para que éstas tengan éxito al momento de su aplicación. Si falta alguna de las partes la micro-interacción quedará incompleta y provocará que su funcionamiento no sea el adecuado, además de generar confusión en el usuario.

A continuación, se presenta un diagrama que sintetiza las características, tipos y estructura de las micro-interacciones.

4.  Beneficios de las micro-interacciones

Para hablar sobre los beneficios de incorporar micro-interacciones en un producto se cita a continuación lo expuesto por Michelle Young en su artículo “Un mejor UX a través de microinteracciones”:

• Crear un efecto emocional positivo en el usuario debido a interacciones de UI más suaves.
• Proporcionar comentarios inmediatos al usuario en función de las acciones que han tomado.
• Guiar al usuario a través de una aplicación de una manera más fluida e intuitiva.
• Animar a los usuarios a interactuar con una aplicación con una notificación o compartir un contenido.
• Prevención de errores de usuario. (Young, 4)

El principal beneficio al utilizar las micro-interacciones es que el usuario sienta una relación con el sitio web. Estas animaciones hacen que el usuario se identifique y entienda de mejor manera el proceso que va a realizar. También sirven como guía para la navegación, ya que se implementan en las actividades que el usuario ya tiene identificadas: recibir una notificación, enviar un mensaje, recibir ofertas y ver más detalles de un producto.

Mejores prácticas del diseño de micro-interacciones

En el mismo artículo Young menciona diferentes prácticas esenciales para que la animación funcione y se exponen a continuación:

Identificar y comprender el problema del usuario. Lo que se pretende es ayudar al usuario a realizar una rápida y eficiente navegación por el sitio para saber qué es lo que el usuario necesita y una de las maneras de saberlo es al realizar encuestas o entrevistas. (Young, 7)

Como se menciona en el párrafo anterior, una de las mejores prácticas es conocer al usuario y para hacerlo se realizan entrevistas que proporcionarán los datos necesarios para poder entender a nuestro usuario, dichas entrevistas pueden ser presenciales o en línea utilizando programas ya existentes. En la tesis Implementación de las micro-interacciones para mejorar la interfaz y la experiencia de usuario en un e-commerce menciono la encuesta que se realizó a diversas personas y el formato que se utilizó.

Las micro-interacciones deben ser naturales. El usuario debe entender de la forma más simple la función que realiza la micro-interacción, las animaciones no deben distraer al usuario, deben estar relacionadas con la actividad que el usuario realiza sin ser tan exageradas. (Young, 7)

Un ejemplo lo encontramos cuando se recarga la página, si se muestra la animación de una barra cargando o bien un círculo llenándose esto ayuda a que nuestro usuario entienda que la página está realizando una actividad. Otro ejemplo lo encontramos cuando el usuario realiza una compra, una vez que selecciona el producto dicha compra se va al carrito e indica con numerales la cantidad de productos que se han incluido para comprar, esto provoca que el usuario confirme que el sitio está realizando las acciones solicitadas. Como vemos son animaciones muy simples y específicas.

Probar e iterar los resultados de las pruebas de usuario. Se debe realizar la prueba de usuario y del diseño iterativo, lo que permitirá comprobar la usabilidad y reducir defectos antes del lanzamiento del sitio web. Estas pruebas se realizan durante la fase de prueba de usuario, se siguen probando hasta la fase de diseño y se repiten hasta haber corregido todos los problemas de usabilidad o puntos débiles. (Young, 7)

Para la realización de las pruebas de usuario se pueden implementar diversas actividades como el cardsorting¹, pretendiendo que el usuario entienda las etiquetas que se utilizarán en el sitio y se usan dos técnicas: el modo abierto, en el cual se entregan tarjetas en blanco permitiendo nombrar los contenidos ordenándolos por categorías. El segundo es cerrado, sólo se entregan las tarjetas predefinidas en donde únicamente deben ser ordenadas. Otra actividad que también se debe implementar es el prototipo en alta fidelidad que se probará con los usuarios para ver si cumple con los objetivos del sitio.

Seguir la estructura de micro-interacción. Como se mencionó en el numeral 1.4, Estructura de las micro-interacciones, la estructura tiene cuatro partes fundamentales: gatillo, reglas, retroalimentación, los bucles y modos. (Young, 7)

Con base en lo que se vive día con día al visitar sitios web se ha identificado que en varios de ellos el uso de animaciones facilitaría el entendimiento para el usuario, recordemos que existen personas cuya inteligencia es más visual. De tal modo que contar con animaciones en el sitio se beneficia al usuario en dos sentidos:

• Capta la atención del cliente con algo dinámico y no estático.
• Facilita el manejo de la página.

CONCLUSIONES

Hemos hecho un recorrido por las definiciones puntuales de micro-interacciones, además de presentar los beneficios y la estructura que éstas deben tener para su buena aplicación. Se hizo hincapié en la importancia de incluir cada una de las cuatro partes de la estructura de las micro-interacciones, ya que son éstas (gatillo, reglas, retroalimentación y bucle) fundamentales para el funcionamiento y la omisión de cualquiera de ellas provocaría una falta de entendimiento correcto por el usuario.

Las micro-interacciones ayudarán a que el usuario se sienta más cómodo con el sitio, ya que será dinámico y no estático, es decir, el usuario no lo percibirá como tedioso y aburrido. Se habló también de que las micro-interacciones son una guía para el usuario por el sitio web para que realice actividades en específico como podrían ser:

• Enviar un mensaje. Se agrega una micro-interacción que consiste en un el botón de enviar, el icono de un avión de papel que saldrá volando cuando el usuario de clic en dicho botón. Una vez realizado esto, el botón cambiará a color verde y se pondrá una paloma en lugar del avión de papel, de tal modo que el usuario tiene más seguridad de que su mensaje fue enviado con éxito.

Detalle del producto. Al agregar un botón con un símbolo de + [más] a cada producto y al animar cada icono con un parpadeo provocará en el usuario curiosidad, lo que lo llevará a apretar el botón y visualizará todas las especificaciones del producto.

Se identificaron también los beneficios de las micro-interacciones en la experiencia de usuario, basados en sus necesidades y con el fin de una fácil navegación por el sitio.

Con base en todo lo anterior se puede decir que las micro-interacciones deben ser desarrolladas como parte fundamental del sitio, pero siempre teniendo en cuenta el tipo de usuario al que se desea llegar, ya que lo que se pretende siempre es facilitar el uso y comprensión del usuario, lo cual implicará que el diseñador deba “ponerse en los zapatos del otro”. De este modo se logrará que el usuario no se sienta confundido o perdido al iniciar su exploración a través de una interfaz y al mismo tiempo le ayudaremos a entenderla de manera fácil, evitaremos que cometa errores. Por supuesto que no hay que olvidar que la animación que se realice debe ser coherente con el sitio que se tiene.

Para responder a la pregunta planteada: ¿de qué manera las micro-interacciones ayudan a las compras de los usuarios? Se concluye que las micro-interacciones son útiles para llevar un proceso de forma correcta y una fácil navegación notificando al usuario cuando se completa una acción o la verificación de un proceso.

Fuentes de consulta

Arezana, David. “Principios de Usabilidad web de Jakob Nielsen: diseño UX”. Semrush Blog, 30 Mar. 2016. Web. 11 Oct 2018.

Cuadrado, Alexandre. «Microinteracciones en la interfaz de usuario». Interactius. Interactius, 28 Sept. 2017. Web. 05 June 2019.

Diseño Cátedra. «UX/UI: Microinteracciones – Cátedra Telefónica-UOC.» CátedraTelefonicaUOC. N.p., 16 Mar. 2017. Web. 05 June 2019.

Gimeno Artigas, Samuel. «Micro-interacciones, la diferencia está en los detalles».Torres burriel Estudio. N.p., 20 May 2016. Web. 05 June 2019.

López, María. «Micro UX, cómo mejorar la UX con Microinteracciones». Aukera. N.p., 13 Nov. 2017. Web. 05 June 2019.

Movetia. «Las Microinteracciones, una tendencia en el diseño UX».Medium. Medium, 10 May 2017. Web. 05 June 2019.

Saffer, Dan. “Microinteractions”. First ed., Mary Treseler, 2013.

Sierra, María. «Microinteracciones, esos pequeños grandes detalles del diseño web».BySidecar. N.p., 00. Web. 05 June 2019.

Young, Michelle. «Un mejor UX a través de Microinteracciones».Adictec. N.p., 00. Web. 05 June 2019.

Montserrat Francis Rodríguez Hernández

Semblanza:

Formación académica: maestra en Comunicación con Medios Virtuales por ICONOS, Instituto de Investigación en Comunicación y Cultura;  licenciatura en Informática por la Universidad Insurgentes, Plantel Norte; especialización en Operación de Microcomputadoras por Instituto Tecnológico Roosevelt, Plantel Villa.

Actividad laboral: actualmente emprendedora de un negocio de regalos vía online, a su vez asesora vía remota de administración de publicaciones en redes sociales de contenido para páginas de cultura, información y artículos.

Correo: montse_9206@hotmail.com

1. 1.Cardsorting es una técnica usada en el diseño de experiencia de usuario, para evaluar un árbol de categorías, es decir la estructura de la información de una web.