{"id":4164,"date":"2020-10-01T20:52:55","date_gmt":"2020-10-02T01:52:55","guid":{"rendered":"https:\/\/entretejidos.iconos.edu.mx\/thesite\/?p=4164"},"modified":"2020-10-01T22:57:11","modified_gmt":"2020-10-02T03:57:11","slug":"el-beneficio-de-las-micro-interacciones-en-la-experiencia-de-usuario","status":"publish","type":"post","link":"https:\/\/entretejidos.iconos.edu.mx\/thesite\/el-beneficio-de-las-micro-interacciones-en-la-experiencia-de-usuario\/","title":{"rendered":"El beneficio de las micro-interacciones en la experiencia de usuario"},"content":{"rendered":"

El presente art\u00edculo es parte de la tesis titulada Implementaci\u00f3n de las micro-interacciones para mejorar la interfaz y la experiencia de usuario en un e-commerce, <\/em>donde se habla del tema de micro-interacciones.<\/p>\n

El art\u00edculo tiene como objetivo identificar el beneficio de las micro-interacciones en la experiencia de usuario. La pregunta central es \u00bfde qu\u00e9 manera las micro-interacciones ayudan a las compras de los usuarios? La hip\u00f3tesis es: las micro-interacciones son \u00fatiles para llevar un proceso de forma correcta y una f\u00e1cil navegaci\u00f3n notificando a los usuarios cuando se completa una acci\u00f3n o proceso.<\/p>\n

El art\u00edculo consta de dos partes, en la primera se revisa la relaci\u00f3n de las micro-interacciones con la experiencia de usuario implementando de manera adecuada a momento de la realizaci\u00f3n del e-Commerce y as\u00ed facilitar la navegaci\u00f3n en un nuevo sitio. Como segundo punto se analiza qu\u00e9 micro-interacciones son adecuadas para implementar en el e-Commerce y de qu\u00e9 maneras benefician al usuario.<\/p>\n

Palabras clave: <\/strong>micro-interacciones, e-commerce y experiencia de usuario<\/p>\n

The benefit of micro-interactions in user experience<\/em><\/strong><\/p>\n

Abstract<\/em><\/strong><\/p>\n

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.<\/em><\/p>\n

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.<\/em><\/p>\n

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.<\/em><\/p>\n

Keywords: <\/em><\/strong>micro-interactions, e-commerce and user experience.<\/em><\/p>\n

Art\u00edculo PDF<\/b><\/a><\/h3>\n

<\/p>\n

\u00a0<\/strong>1. \u00bfQu\u00e9 son las micro-interacciones?<\/p>\n

El padre de las micro-interacciones, Dan Saffer, en su libro Microinteractions<\/em> menciona que \u201c\u2026 son acciones simples y peque\u00f1os momentos de intercambio entre el usuario y la interfaz\u201d. (Saffer, 2) Estas provocan en el usuario una respuesta inesperada, poco intrusiva, le sorprenden, facilitan la comprensi\u00f3n y mejoran su experiencia. Su uso debe ser elegante, moderado y armonioso. Hay que concebirlas en conjunto como peque\u00f1os elementos que funcionan en grupo y que buscan una experiencia de navegaci\u00f3n optimizada y diferente.<\/p>\n

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

Alexandre Cuadrado en su art\u00edculo \u201cMicrointeracciones en la interfaz de usuario\u201d las define como una \u201c\u2026 animaci\u00f3n a modo de retroalimentaci\u00f3n y se produce cuando el usuario realiza una acci\u00f3n concreta\u201d. (Cuadrado, 2) En ocasiones no s\u00f3lo la animaci\u00f3n se produce durante una acci\u00f3n concreta, sino tambi\u00e9n con la interacci\u00f3n en el mismo sitio; al ser algo agradable para el usuario, mantiene su atenci\u00f3n sin que sean un distractor para \u00e9l.<\/p>\n

Samuel Gimeno Artigas en su art\u00edculo \u201cMicro-interacciones, la diferencia est\u00e1 en los detalles,\u201d las reconoce como: \u201cUna respuesta al usuario por parte de una interfaz, generando una respuesta inesperada y poco intrusiva que sorprenda o agrade al usuario\u201d. (Gimeno, 3)<\/p>\n

A continuaci\u00f3n, se presenta una tabla comparativa de las definiciones de los autores:<\/p>\n

\u00a0 \u00a0 \u00a0 \u00a0 \u00a0Micro-interacciones<\/strong><\/p>\n\n\n\n\n
Dan Saffer<\/strong><\/td>\nAlexandre Cuadrado<\/strong><\/td>\nSamuel Gimeno Artigas<\/strong><\/td>\n<\/tr>\n
Son acciones simples y peque\u00f1os momentos de intercambio entre el usuario y la interfaz.<\/td>\nUna animaci\u00f3n a modo de retroalimentaci\u00f3n y se produce cuando un usuario realiza una acci\u00f3n concreta.<\/td>\nUna respuesta al usuario por parte de una interfaz, generando una respuesta inesperada y poco intrusiva que sorprenda o agrade al usuario. Simplificando el trabajo con la interfaz y mejorando la experiencia de usuario.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Tabla 1. Comparaci\u00f3n de definici\u00f3n de micro-interacciones (elaboraci\u00f3n propia).<\/p>\n

Partiendo de las definiciones dadas es posible decir que las micro-interacciones son peque\u00f1as animaciones que ayudan al usuario a recibir f\u00e1cil navegaci\u00f3n, una respuesta inesperada y agradable para \u00e9l.<\/p>\n

En el art\u00edculo de David Arenzana sobre los principios de la usabilidad web de Jakob Nielsen, Dise\u00f1o UX, <\/em>se lee: \u201cMant\u00e9n a tu usuario informado de lo que est\u00e1 pasando\u201d. (Arenzana, 13)<\/p>\n

Algunos ejemplos de las micro-interacciones las menciona Movetia en el art\u00edculo Las micro-interacciones, una tendencia en el dise\u00f1o UX<\/em>, y se presentan a continuaci\u00f3n (Movetia, 5):<\/p>\n\n\n\n\n\n\n
\"\"<\/a><\/td>\nCualquier pulsaci\u00f3n que desencadene una acci\u00f3n dentro de una interfaz de usuario es una micro-interacci\u00f3n. Un ejemplo claro de ello es al desbloquear el celular. Al deslizar el dedo en el c\u00edrculo este cambia de color de rojo a verde, el cual indica que se ha\u00a0 desbloqueado.<\/td>\n<\/tr>\n
En este caso la animaci\u00f3n indica que se env\u00eda un mensaje.
\nEl avi\u00f3n 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<\/em> se utilizar\u00eda al enviar un mensaje a la p\u00e1gina con alguna duda o comentario.<\/td>\n		\"\"<\/a><\/td>\n<\/tr>\n
\"\"<\/a><\/td>\nTambi\u00e9n se puede visualizar en un men\u00fa al oprimir el bot\u00f3n\u00a0 [signo de sumatoria en fondo azul] y mostrar\u00e1 el men\u00fa completo, esto evita ocupar mucho espacio con texto; este tipo de men\u00fa suele utilizarse para las redes sociales. En el e-commerce<\/em> se implementa para agregar m\u00e1s contenido al sitio, por ejemplo, las redes sociales.<\/td>\n<\/tr>\n
Las notificaciones son \u00fatiles ya que no solo se visualiza algo est\u00e1tico, si no que tambi\u00e9n se ve un cambio al momento de la llegada de los mensajes o notificaciones.
\nEn el e-commerce <\/em>se usan para indicar que ha llegado alg\u00fan aviso o bien alguna promoci\u00f3n.<\/td>\n		\"\"<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
\"\"<\/a><\/td>\nUna buena forma de utilizar las micro-interacciones en un e-commerce <\/em>se da cuando podemos ver el detalle del producto, o bien, realizar la compra. En este caso al dar clic en el bot\u00f3n [icono de bolsa de compra en fondo verde] se desplegar\u00e1 la informaci\u00f3n m\u00e1s a detalle, incluyendo la opci\u00f3n de comprar y la cantidad.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

 <\/p>\n

Utilizar micro-interacciones ya existentes facilita la interacci\u00f3n del usuario con un sitio web porque cumplen con varias funciones: conocer m\u00e1s detalladamente las especificaciones del producto, recibir notificaciones, conocer el estado del envi\u00f3 del mensaje.<\/p>\n

<\/a><\/a>1.1 Tipos de micro-interacciones<\/p>\n

A continuaci\u00f3n, describiremos los tipos de micro-interacciones referidos por Mar\u00eda L\u00f3pez en su art\u00edculo Micro UX, o como mejorar la experiencia de Usuario con micro-interacciones<\/em>.<\/p>\n

Micro-interacciones gestuales<\/strong><\/p>\n

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\u00f3vil o para actualizar la p\u00e1gina en la que se encuentra el usuario.<\/p>\n\n\n\n
\"\"<\/a><\/td>\nUn ejemplo de ello lo encontramos en la tienda virtual de ropa ZARA cuando se accede desde un dispositivo m\u00f3vil: al deslizar el dedo hacia abajo aparece el \u00edcono de carga, cuya funci\u00f3n es actualizar la p\u00e1gina. (L\u00f3pez, 19) En un e-commerce<\/em> el \u00edcono se utiliza para que el usuario tenga actualizada la p\u00e1gina o para indicarle que un proceso se encuentra en ejecuci\u00f3n y as\u00ed evitar que \u00e9ste se desespere.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
 <\/p>\n

 <\/p>\n

Basados en el mismo ejemplo de tienda, otra
\nmicro-interacci\u00f3n gestual es la de ampliar la pantalla.<\/p>\n

Esta funci\u00f3n 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.<\/td>\n

\"\"<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Micro-interacciones de navegaci\u00f3n<\/strong><\/p>\n

Este tipo de micro-interacci\u00f3n es la que nos ayuda a navegar m\u00e1s f\u00e1cilmente por la p\u00e1gina sin usar el scroll<\/em>.<\/p>\n\n\n\n
\"\"<\/a><\/td>\nUn ejemplo lo encontramos en la flecha que apunta hacia arriba cuando el usuario se encuentra muy abajo en la p\u00e1gina, de tal modo que lo dirigir\u00e1 a la parte superior. Por lo regular en la p\u00e1gina principal de un e-commerce<\/em> se visualizan los diversos productos que se ofrecen yal desplazarse hasta el final ser\u00e1 m\u00e1s c\u00f3modo para el usuario dar clic en la flecha y que \u00e9sta lo lleve f\u00e1cilmente al inicio de la p\u00e1gina. (L\u00f3pez, 20)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Micro-interacciones de engagement<\/em><\/strong><\/p>\n

Los detalles hacen sentir especiales a los usuarios. Los microcopys<\/em> son los responsables de que los usuarios se sientan especiales y se creen v\u00ednculos con la marca.<\/p>\n\n\n\n
\"\"<\/a><\/td>\n <\/p>\n

Un ejemplo lo encontramos al rellenar un formulario en ASOS en el
\nque solicitan la fecha de nacimiento y al ingresarla muestra los d\u00edas faltantes para que llegue ese cumplea\u00f1os. Esto hace sentir al usuario especial y parte del sitio, ya que se toma en cuenta una fecha importante para \u00e9l. Quiz\u00e1 ese d\u00eda reciba alg\u00fan regalo o bien una promoci\u00f3n.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Micro-interacciones sociales<\/strong><\/p>\n

En algunas ocasiones presentar una opci\u00f3n de redes sociales quita visibilidad o puede resultar molesto al usuario porque ocupa la pantalla, por tal motivo se genera un bot\u00f3n flotante que se despliega solo si se desea compartir el art\u00edculo o producto. P\u00e1ginas que ya cuentan con esto son el peri\u00f3dico 90MIN<\/em> o Facebook con sus reacciones. P\u00e1ginas de comercio electr\u00f3nico como Mi \u00e1lbum<\/em>, emplean una barra lateral la cual se desplaza sin tapar el contenido.<\/strong><\/p>\n

Al dar clic en el bot\u00f3n [icono de \u201ccompartir\u201d en fondo naranja] se despliegan hacia la izquierda los botones para ingresar a las redes sociales y as\u00ed compartir el contenido. (L\u00f3pez, 30)<\/p>\n

En el e-commerce<\/em> es una buena opci\u00f3n para implementar la publicidad de nuestro producto y que sea visible para varias personas.<\/p>\n

Micro-interacci\u00f3n multimedia<\/strong><\/p>\n

Para destacar productos la web de Mango utiliza video que no ralentiza la velocidad de carga y es una forma original de destacar productos.<\/p>\n\n\n\n
\"\"<\/a><\/td>\nAl reproducirse, la imagen de la izquierda muestra las diferentes partes de la ropa y permite una mejor perspectiva. (L\u00f3pez, 32). En un e-commerce <\/em>colocar un video facilita la presentaci\u00f3n del producto en distintos \u00e1ngulos y evita el uso de un carrusel.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Micro-interacciones de navegabilidad<\/strong><\/p>\n

Algunos usuarios buscan comprar productos que se adecuen a sus necesidades espec\u00edficas. Tomemos como ejemplo la tienda en l\u00ednea 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\u00eda el producto final. (L\u00f3pez, 36)<\/p>\n\n\n\n
\"\"<\/a><\/td>\nEn el e-commerce<\/em> se tiene planteado que el cliente arme su producto con base en sus necesidades.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

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

<\/a><\/a>2. Caracter\u00edsticas de las micro-interacciones<\/p>\n

Las micro-interacciones deben ser predecibles, coherentes, humanas, estrat\u00e9gicas, sencillas y evolutivas, estas caracter\u00edsticas har\u00e1n que el usuario las entienda de una mejor manera y su manejo sea f\u00e1cil.<\/p>\n

Presentamos ahora una breve explicaci\u00f3n de cada una de las caracter\u00edsticas mencionadas partiendo de los planteamientos de Mar\u00eda Sierra en su art\u00edculo Microinteracciones, esos peque\u00f1os grandes detalles del dise\u00f1o Web.<\/em><\/p>\n

Predecible<\/strong><\/p>\n

Tiene que ofrecer al usuario que la desencadena la respuesta que espera. Por ejemplo, los \u00edconos: el usuario ya est\u00e1 acostumbrado a diversos \u00edconos que realizan una acci\u00f3n; como el carrito de compra, el usuario ya sabe que ah\u00ed se encuentra el total y el detalle de su pedido.<\/p>\n

Coherente<\/strong><\/p>\n

Si bien hay que cuidar de forma independiente cada micro-interacci\u00f3n que incorporamos a una web, tambi\u00e9n hay que tratarla como parte de un ecosistema mayor, que es la propia web, por lo que debe ser coherente con el dise\u00f1o general y con las din\u00e1micas relacionales que se establecen con los distintos elementos de la p\u00e1gina.<\/p>\n

\u00a0<\/strong>Humana<\/strong><\/p>\n

El usuario siempre espera la reacci\u00f3n adecuada a lo que solicita y no una respuesta err\u00f3nea. D\u00eda a d\u00eda nos encontramos con la interacci\u00f3n con la tecnolog\u00eda: el desbloqueo de nuestros celulares o al eliminar una aplicaci\u00f3n de nuestro dispositivo.<\/p>\n

\u00a0<\/strong>Estrat\u00e9gica<\/strong><\/p>\n

Que una micro-interacci\u00f3n consiga los resultados esperados depende en gran parte de que se realicen los deberes y conozcamos perfectamente a nuestros usuarios. La investigaci\u00f3n sobre qu\u00e9 espera el visitante de nuestra web y qu\u00e9 podemos ofrecerle con las micro-interacciones que se incorporan es una parte fundamental del proceso de dise\u00f1o.<\/p>\n

Sencilla<\/strong><\/p>\n

Hablamos de micro-interacciones y el prefijo es parte importante del tema. Es importante ce\u00f1irnos al concepto micro en cuanto a sencillez: nada de complicar la interacci\u00f3n (a m\u00e1s acciones o pasos, m\u00e1s macro y menos micro) y nada de sobrecargarla visualmente.<\/p>\n

Evolutiva<\/strong><\/p>\n

De la misma manera en la que se aplica estrategia al proceso de dise\u00f1o, tambi\u00e9n 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\u00e1ndolos si es necesario. Es decir, cuando la medici\u00f3n evidencie que hay que evolucionar. (Sierra, 3)<\/p>\n

Al aplicar estas caracter\u00edsticas de la manera correcta se ayuda a los usuarios a entender y facilitar el manejo de un sitio de e-commerce<\/em> sin confundirlos, cumpliendo as\u00ed con el objetivo principal de la integraci\u00f3n de las micro-interacciones.<\/p>\n

<\/a>3. Estructura de las micro-interacciones<\/p>\n

En su libro \u201cMicrointeractions<\/em>\u201d, Dan Saffer menciona que las micro-interacciones tienen una estructura compuesta por cuatro partes: el gatillo, las reglas, la retroalimentaci\u00f3n y los bucles y modos. (Saffer, 14)<\/p>\n

\"\"<\/a>En la p\u00e1gina web C\u00e1tedra dise\u00f1o<\/em>, en su art\u00edculo \u201cUXUI: microinteracciones\u201d, define detalladamente cada parte de la estructura y a continuaci\u00f3n las citamos:<\/p>\n

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

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

Reglas(rules<\/em>)<\/strong>, son definidas previamente por el dise\u00f1ador. Hacen que las micro-interacciones sean las adecuadas para el usuario, ya que \u00e9stas deben tener relaci\u00f3n con el mundo real. Se refieren a cosas que los usuarios ya tienen identificadas (como los iconos que emplea Word<\/em>) y la sola imagen indica para qu\u00e9 sirven, por ejemplo: el disco para guardar, las tijeras para cortar, las dos hojas encimadas para copiar. Otro ejemplo est\u00e1 en Facebook: los iconos que utiliza ya est\u00e1n 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\u00f3n con la funci\u00f3n que realiza.<\/p>\n

Retroalimentaci\u00f3n (feedback<\/em>), <\/strong>puede efectuarse de manera visual, auditiva o t\u00e1ctil. Lo fundamental aqu\u00ed es que el mensaje de respuesta tenga relaci\u00f3n directa con la acci\u00f3n realizada y se emita por el canal m\u00e1s efectivo en cada caso.<\/p>\n

La retroalimentaci\u00f3n, como se menciona, nos da la respuesta que se espera que tenga la micro-interacci\u00f3n sin molestar al usuario. Un ejemplo de ello es una animaci\u00f3n al momento de enviar un mensaje desde un sitio web, se puede incorporar el icono de un avi\u00f3n de papel que al momento de enviar el mensaje \u00e9ste salga volando y el usuario entender\u00e1 que su mensaje fue enviado. Otro ejemplo lo encontrar\u00edamos para indicar que se tiene una notificaci\u00f3n, se integra entonces el icono de una campana que vibre cuando hay una novedad y adem\u00e1s muestre al usuario el n\u00famero total de notificaciones. Tambi\u00e9n encontramos ejemplos en la funci\u00f3n de autocompletar que ofrece un campo de texto o las pistas que se en un formulario para completar una tarea.<\/strong><\/p>\n

Bucles y modos <\/strong>(loops and modes<\/strong><\/em>), <\/strong>cierran el proceso de la micro-interacci\u00f3n o tambi\u00e9n lo vuelven a iniciar. Los modos hacen referencia a las diferentes opciones que pueden existir dentro de una micro-interacci\u00f3n, uno de ellos es el modo \u201cpor defecto.\u201d El dise\u00f1ador debe decidir cu\u00e1l ser\u00e1 el modo de preferencia del usuario para evitar que su primera acci\u00f3n sea cambiar esta opci\u00f3n. (Dise\u00f1o C\u00e1tedra, 5)<\/p>\n

Los bucles son la \u00faltima parte de la micro-interacci\u00f3n e indica al usuario que se ha concluido el proceso, por ejemplo, cuando se env\u00eda el mensaje y al finalizar la animaci\u00f3n se cambia el color del bot\u00f3n a verde o el avi\u00f3n de papel que se cambia por una paloma indicando que el mensaje se envi\u00f3 con \u00e9xito.<\/p>\n

Comprender la estructura de las micro-interacciones ayuda a llevar un control de la secuencia que se debe seguir para que \u00e9stas tengan \u00e9xito al momento de su aplicaci\u00f3n. Si falta alguna de las partes la micro-interacci\u00f3n quedar\u00e1 incompleta y provocar\u00e1 que su funcionamiento no sea el adecuado, adem\u00e1s de generar confusi\u00f3n en el usuario.<\/p>\n

A continuaci\u00f3n, se presenta un diagrama que sintetiza las caracter\u00edsticas, tipos y estructura de las micro-interacciones.<\/p>\n\"\"<\/a>\n

<\/a>4. \u00a0Beneficios de las micro-interacciones<\/p>\n

Para hablar sobre los beneficios de incorporar micro-interacciones en un producto se cita a continuaci\u00f3n lo expuesto por Michelle Young en su art\u00edculo \u201cUn mejor UX a trav\u00e9s de microinteracciones\u201d:<\/p>\n