7 Abr 2016
Macro UX vs. Micro UX
Lectura: 12 mins.
|
Dificultad:

Micro UX, o cómo mejorar la Experiencia de Usuario con Microinteracciones

El poder de los microelementos en el mundo de la UX

¿Qué es la Micro UX? ¿Por qué las microinteracciones son tan importantes a la hora de optimizar mi web?

power

Aunque en muchos artículos del otro lado del charco se presenta casi como una nueva forma con poderes ilimitados de entender la Experiencia de Usuario, la micro UX no deja de ser un enfoque distinto sobre cómo mejorar la navegabilidad del sitio web.

¿Cuántas veces has llegado a una página y algún elemento del diseño ha llamado tu atención por su utilidad u originalidad? Esto es justo lo que la micro UX busca: diseñar detalles únicos que marquen la diferencia, creando una experiencia más humana y cercana para el usuario. En un mundo digital donde las webs cada vez son más similares en muchos aspectos, y especialmente en el ámbito del diseño, la micro UX se vuelve indispensable para diferenciar nuestra marca y hacer que el usuario vuelva a la página.

El objetivo de este nuevo enfoque es hacer que al usuario “le encante” navegar por tu site. Gracias a las microinteracciones  (así es como el evangelista UX Dan Saffer les llama), los elementos individuales de tu web innovarán, facilitarán la navegabilidad y conectarán con tus visitantes. De esta manera hacemos que la tarea que tenemos asignada para los internaturas (un clic, el lead, la conversión, etc.) no solo sea más fácil, sino también más amena.

Una micro UX no deja de ser pequeño un elemento dentro del diseño total, centrado únicamente en una sola tarea. Pero si juntas muchas pequeñas interacciones, el sitio web toma una nueva forma, más orientada al detalle.

Así que en resumen, podríamos definir la micro UX como un nuevo enfoque dentro de la Experiencia de Usuario, basado en la creación de pequeños elementos o microinteracciones que funcionan en su conjunto como un engranaje que busca una experiencia de navegación única y dirigida al engagement. 

Este tipo de microelementos pueden aplicarse a todo tipo de sitios web y dispositivos, desde ecommerce -donde sus beneficios se traducen en más conversiones- a un blog donde queremos mejorar la originalidad del sitio. En concreto, adquieren especial utilidad en los dispositivos móviles, donde la calidad y optimización del diseño son fundamentales para no ahuyentar al usuario.

Macro UX vs Micro UX

Aunque la gran mayoría de proyectos deben afrontarse desde ambas perspectivas, la macro UX y micro UX presentan muchas diferencias.

Macro UX

macro-ux-caracteristicas

Es el concepto tradicional de Experiencia de Usuario. Tiene un enfoque centrado en el producto, analizando la necesidad del usuario y generando un diseño en función al proceso que une al usuario y el objetivo de conversión de la empresa.

La Macro UX ha sido el enfoque más común hasta ahora, que nos permitía identificar las necesidades del usuario y crear un diseño construido en torno a ellas. Todo va bien hasta aquí, y como paso 1 no tenemos objeciones; sin embargo, ahora tenemos una manera alternativa y/o complementaria para mejorar la experiencia de usuario: la micro UX. Es un método más accesible que simplifica los elementos individuales y características del sitio web, descubriendo o creando nuevos elementos a optimizar.

Micro UX

micro-ux-caracteristicas
Es precisamente el enfoque contrario a la Macro UX: una perspectiva centrada en lo más pequeño para crear algo grande. Para ello se hace foco en los detalles más pequeños de la web, que en su conjunto generan una experiencia optimizada y sorprendente con especial atención en cómo el usuario usa el sitio web.

Esta nueva visión tiene en cuenta cómo el usuario interactúa con las diferentes funciones de la web, teniendo en cuenta qué elementos nuevos podría necesitar y cuáles podrían mejorarse. El siguiente paso es incorporar todo este nuevo conjunto de mejoras, dejando que los pequeños detalles determinen el resultado de la web.

Esta perspectiva no sustituye ni mucho menos a la tradicional, sino que deben ir de la mano. Sin embargo, la micro UX es una disciplina especialmente útil tanto para proyectos nuevos en los que la audiencia no está determinada y el nivel de uso es desconocido como también para la actualizaciones de un sitio web que quiera actualizarse sin cambiar la esencia de marca.

En resumidas cuentas se trata de conectar marcas con personas, facilitando al usuario el manejo del site y ofreciéndole una experiencia satisfactoria y original que mejore su relación con la marca.

En el ámbito mobile, esta nueva visión de la UX ha supuesto la clave del éxito para muchas apps, que han conseguido ofrecer e incluso crear nuevas tendencias en lo que ha navegabilidad se refiere. ¡Seguro que esta os suena!

tinder-microux

Tipos de Microinteracciones

Todo cuenta, las microinteracciones se pueden aplicar a cualquier tipo de elemento de la web, desde la imagen principal hasta un microtexto que mejore la experiencia de navegación.

Al construir un producto digital es necesario tener en cuenta las distintas tecnologías, gestos y características de cada dispositivo. Hay que analizar cómo el usuario interactúa con cada elemento de la página para poder ofrecerle la forma más cómoda de acecsibilidad digital.

Cualquier tipo de sitio web está abierto a mejoras a través de la micro UX. Aunque su implementación principal suele darse en comercios electrónicos y dispositivos mobile, este tipo de microelementos también pueden mejorar la navegabilidad de blogs, plataformas sociales, páginas corporativas, etc.

Microinteracciones gestuales

Muy específicas en el ámbito móvil, son gestos ya casi universales con funciones útiles para los usuarios. La usabilidad en mobile avanza rápido a medida ciertos gestos se generalizan para acciones concretas. Resulta curioso que los gestos tienden a ser similares en todas las culturas y nivel de experiencia del usuario, con lo que la intuición juega un papel fundamental en la optimización de este tipo de interacciones.

Por ejemplo, deslizar el dedo hacia abajo se ha convertido en la forma universal de actualizar o refrescar la página para encontrar nuevos resultados. Ya no sólo es común en el timeline de redes sociales, sino también en cualquier comercio electrónico en dispositivos móviles.

refresh-icono-microux

Otro gesto ya universal es la forma en la que ampliamos pantalla en los dispositivos de pantalla reducida. Por seguir con el mismo ejemplo de ZARA, es todo un placer ver que al llevar a cabo este gesto la imagen del producto no pierde nada de calidad.

zoom-imagenes-microux

Microinteracciones de navegación

Como hemos comentado, en dispositivos móviles es esencial adaptar la experiencia a las nuevas formas de navegar. Existen ya microinteracciones generalizadas que mejoran la UX en dispositivos de pantallas más pequeñas. He aquí algunos ejemplos comunes:

Una vez has consumido un gran volumen de imágenes, en LeClubStyle vemos en la zona inferior derecha un ya mítico botón que te permite volver a la zona superior sin tener que hacer scroll hasta el comienzo de la página.
micro-ux-boton-subir

Otra funcionalidad muy útil en móvil es el menú sticky, que permite tener a mano el menú en todo momento. De esta manera mejoramos la rapidez con la que el usuario puede navegar por las distintas secciones. Este es el ejemplo que utilizan en la web móvil de Piktochart:
micro-ux-menu-sticky

Ya hemos hablando anteriormente de la importancia de los filtros en comercios electrónicos. ¿Qué sucede en móvil? Que la mayoría de ecommerce tienen un sistema de filtrado caótico e ineficiente, especialmente en lo que a diseño se refiere. No es el caso de Nike, que ha conseguido organizar los filtros según los intereses más comunes con un diseño intuitivo y sencillo de usar en pocos clics:

filtros-nike-ux

Microinteracciones de lectura

¿Tienes un blog o un portal de noticias? Ten claro que también puedes mejorar la calidad de tu sitio web con ejemplos como estos:

Tanto en versión móvil como escritorio, el blog de MOZ facilita la lectura gracias al tiempo de lectura estimada, que calcula el tiempo que pasará el usuario leyendo el artículo.

tiempo lectura estimado micro ux

Otro ejemplo mítico de micro ux es el medidor de lectura de The Daily Beast, que indica qué porcentaje del artículo has leído a medida que lo vas leyendo (y lo que te queda por leer).

procentaje-lectura-micro-ux

Microinteracciones de engagement

Los detalles hacen sentir especiales a los usuarios. Los microcopys son los culpables de que los usuarios nos sintamos especiales y creemos un vínculo con la marca. Piensa cuándo y cómo quieres o puedes conectar con tus visitantes.

Al rellenar el formulario en ASOS te piden  la fecha de nacimiento. Todo un detalle que empiece la cuenta atrás para tu cumpleaños y te incentiven con un regalito a rellenar este campo. Todo un detalle, ¿no?

microux-texto
Va llegando la hora de cenar y… mi app de Just Eat me lanza un cupón para pedir comida a domicilio. La tentación siempre está ahí…
microux-justeat-push

Microinteracciones sociales

A veces la implementación para compartir contenidos en redes sociales no acaban de ser útiles: se comen mucho espacio, estorban la lectura, o incluso están desaparecidos. En 90min han conseguido solucionar este problema con un botón flotante que se despliega si tenemos intención de compartir el artículo.

social-sharing-microux

En el periódico 20minutos siguen la misma línea, aunque han decidido primar los comentarios. El icono para comentar los artículos está visible y sin molestar en todo momento, y una vez llegas a los comentarios facilitan al usuario la interacción con el contenido.
comentarios-micro-ux-20min

Microinteracciones multimedia

Para destacar ciertos productos, la web de Mango cambia la típica imagen de la modelo por un breve vídeo mostrando detalles del producto. El vídeo no ralentiza la velocidad de carga y desde luego, llama la atención. Una forma original de destacar productos:

mango-imagen-producto-microux

Microinteracciones en formularios

La palabra formulario adquiere en esta parte un significado amplio. Me refiero a cualquier tipo de elemento que el usuario deba rellenar, bien para acceder a la información o bien para terminar un proceso de conversión. En versiones móvil suelen ser un punto polémico, ya que no se suelen tener en cuenta las características de la navegación mobile (menos clics, menos campos a rellenar, menos elementos de fricción…)

Booking da ejemplo con un formulario de búsqueda optimizado al máximo: pide todos los datos que necesita a través de una sola pantalla y con opciones muy ajustadas.
micro-ux-formularios-mobile

Just Eat es el rey de la simplicidad: únicamente piden ubicación y, si quieres, tipo de restaurante. Y ahí tienes el listado. Además el teclado está optimizado y si te piden código postal, solo accedes al teclado numérico. ¡Todo un detalle!
teclado-optimizado-microux

Y llegando al territorio de los checkouts, ZARA sigue pisando fuerte. Si en escritorio la pasarela de pago es extremadamente sencilla, en su app ya roza la perfección. ¡Demasiado fácil!
zara-form-pago-ux

Microinteracciones de navegabilidad

Algunas webs requieren ciertas funcionalidades complejas que en el ámbito móvil pueden presentar serias dificultades a la hora de generar una navegación sencilla e intuitiva. Aquí van un par de ejemplos de elementos bien resueltos:

El primero es el personalizador de zapatillas Nike. El proceso es sencillo: eliges producto, y vas eligiendo el color de cada parte de la zapatilla, que a su vez está visualmente explicada con un pequeño icono. Cada elemento está planteado al detalle para que la creación de la zapatillas sea un proceso muy sencillo.

personalizador-nike-microux

Si en escritorio ya comentamos que el buscador de Ulabox está muy bien planteado, en móvil no defrauda. A la izquierda vemos el resultado de una búsqueda sin hacer scroll, a la derecha los filtros que ofrece -adaptados al producto- si deslizamos el dedo hacia abajo.

microux-buscador-ulabox

Microinteracciones persuasivas

Si ya es complicado generar llamadas a la acción en escritorio, en móvil el proceso persuasivo es especialmente complicado. Siempre queremos decir mucho en poco espacio, así que ahí van algunos ejemplo inspiradores:

En Booking juegan con la psicología de precios y la prisa para motivar la conversión. Cada elemento de la pantalla tiene una función persuasiva, digno de analizarse.
micro-ux-ctas-mobile

En Smartbox trabajan el copy de los productos a conciencia para generar interés y generar un estilo de marca bastante singular. “Populares”, “Ensueño”, “Hoteles exclusivos”, “Gourmet”, “Descubre más”… ¡Que llegue ya el fin de semana!
micro-ux-llamada-accion

Y un último ejemplo que probablemente no sea tan obvio. Gmail ha añadido funcionalidades en la lista de correo, y ofrece enlaces directos en los casos que sabe que son de tu interés: seguimiento de pedidos, check in online para viajes, etc. Google nunca falla…
microux-gmail

 

Y creo que por hoy son suficiente ejemplos. Seguro que se os ocurren miles de ejemplos más… ¿Alguno que debamos añadir?

Lecturas recomendadas y más ejemplos: