Ocho claves de UX para tiendas en línea

Queremos contarte cuáles son los elementos que hacen una gran experiencia de usuario para un eCommerce y por dónde comenzar cuando tú quieres mejorar la experiencia de usuario de tu tienda en línea.

Me da mucho gusto participar con Ángel Lorenzo, quien es el líder de nuestro equipo de diseño, de experiencia, de usuario.

En un video anterior comentamos que la experiencia de compra que tienen los clientes de un eCommerce es muy importante, se convierte en un emblema de las marcas y es un elemento crítico para que los clientes decidan o no comprar en una tienda o en otra. Los clientes hoy en día están expuestos a experiencias de empresas líderes como Amazon, Apple, Nike y otras que ofrecen niveles de personalización y experiencia que hacen que nos encante comprar ahí y que las experiencias sean muy cercanas. Los clientes entonces, al estar expuestos a este tipo de experiencias y exponen o exigen cada vez más de las marcas de eCommerce, de todos aquellos que tienen su tienda en línea. De alguna manera los clientes esperan que elevemos la barra, que cada día demos mejores experiencias y que estas experiencias estén orquestadas y también sean experiencias muy cercanas. Se dice por ahí que compramos experiencias y no productos realmente.

Jaime: ¿Cuáles son los elementos clave de una buena experiencia de usuario en un eComerce o una buena experiencia de compra? ¿Cuáles son los elementos que las marcas deben considerar?

Ángel: En realidad son muchos factores los que afectan la experiencia de los usuarios en un sitio web, especialmente en eCommerce, porque se toca el tema de logística, inventarios, el viaje del usuario, etc. Pero, en esta pregunta quisiera enfocarme solamente en lo que afecta específicamente el sitio web o la aplicación móvil en particular.

1. Área de la página de inicio y la categorización de productos

¿Por qué es importante? Cuando un usuario llega a tu tienda en línea por primera vez, la idea es comunicarle el espectro amplio de toda la oferta que tienes, todos los tipos de productos. Entonces la recomendación sería esa: comunica la mayor cantidad de tipos de producto que hay en tu inventario. Así no se queda con la idea de que solamente vendes zapatos, a lo mejor busca una chamarra y pues es bueno comunicarlo también.

Por otro lado, el tema de la categorización. Todos sus tipos de producto deberían estar ordenados adecuadamente en categorías que pueden incluir todos esos tipos de producto y la navegación principal tiene que estar ligada a eso para que la persona pueda navegar adecuadamente y encontrar lo que busca. También es importante que siempre esté a la vista esa navegación y comunicar al usuario y permitirle saber en dónde está y a dónde puede llegar desde la navegación principal.

2. Búsqueda en el sitio

Este tema comúnmente es minimizado, se percibe como una simple cajita o un input muy pequeño en la página web o en la aplicación, y no sé si realmente se puede explotar demasiado.

Hay que pensar mucho en cómo las personas buscan los productos que necesitan comprar. Pueden hacer búsquedas con palabras exactas, nombre del producto, modelo del producto. También pueden hacerlo de formas más complejas, como buscando sinónimos o buscando por síntomas.

A lo mejor están pensando en productos para la gripe, por ejemplo, o incluso usar símbolos como el de temperatura al buscar chamarras que van de 0 grados o 5 grados, un rango de precios, etcétera. Entonces, eso puede llegar a ser complicado porque puede tocar temas de seguridad en el sitio web, pero es muy valioso cuando sí se hace, se contempla correctamente.

3. Listas de productos y filtrado

¿Esto qué quiere decir? Realmente es cómo se manejan las categorías como tal en el sitio. Por ejemplo, no es recomendable usar categorías como filtros, sino usar atributos de productos que permitan al usuario especificar muy bien su búsqueda, por decir, estamos buscando cámaras fotográficas y hay sitios web —en algún momento Best Buy tuvo esto— en el que dentro de la categoría de cámaras había subcategorías con cámaras con lentes largos, cámaras que tienen Wi-Fi, cámaras para abajo del agua.

Todos estos son atributos del producto y al convertirlos en categorías lo que haces es complicar la navegación al usuario y hacer realmente difícil encontrar un producto que le guste. Entonces tienen que estar cambiando de categoría una y otra vez y termina por irse a otro lado. Es importante cuidar eso.

Ahora, una recomendación para sorprender a una persona en su experiencia es personalizar estos filtros. A lo mejor la persona ya tiene su cámara en el carrito de compras y está buscando también una funda para esa cámara. Si ya sabemos que el producto está en su carrito, podemos agregar un filtro personalizado, por ejemplo, con fundas específicamente para ese modelo y avisarle de dónde sale esa recomendación, ¿no? El modelo de la cámara es de los mejores. Entre paréntesis puede decir: debido a que está en tu carrito o a compras anteriores o a la temporada, en fin, hay un mundo de cosas que las que nos podemos basar para personalizarlo.

Otro punto importante es la herramienta de comparación. Realmente entendiendo que las personas cuando compramos vamos a comparar en algún punto alguna característica, ya sea precio o especificaciones técnicas. Ayudarles con esto con una herramienta de comparación puede ser bastante útil, pero hay que tener mucho cuidado al hacerlo porque se puede prestar a confundirse. En cuanto a lo que va a ser esa herramienta, lo mejor es lo que voy a comparar. ¿Voy a comparar este producto contra otros de otros sitios o voy a comparar los productos solamente de este sitio y cuáles características específicamente?

4. Página de producto

Para este tema en particular existen generalmente cuatro tipos de composición que sirven para la página de detalle del producto. Estos son los que dominan más el mercado y voy a platicar un poquito de cuándo es recomendable usar uno u otro.

a. Formato con secciones acomodadas verticalmente y colapsables

Es una buena práctica en esto, cuando se tiene muchísima información y ofrece mayor ventaja sobre las tabs cuando son horizontales. Esto sí te digo, es buena práctica dejar abierta la primera sección para invitar al usuario a entrar en la interacción y saber cómo funciona la navegación del contenido. También es muy común en los usuarios cuando no encuentran lo que buscan recurrir a la búsqueda dentro de la página, buscan palabras clave dentro de la información y es importante considerar esto en las secciones colapsables para que puedan ofrecer el contenido a ese buscador, es decir, que cuando una persona busca, por ejemplo, WiFi, la sección colapsada se abra al encontrar esa palabra dentro de esa sección. Eso ayuda a mejorar mucho la experiencia.

b. Tabla de contenido que permite seguimiento

Esto es también recomendable cuando los productos son muy complicados, tienen demasiadas especificaciones, hay mucho contenido e información adicional a las imágenes, por ejemplo, y esto es lo que hace es recurrir al scroll, pero siempre te acompaña una pequeña tabla de contenido que te indica en qué parte vas y cómo puedes navegar entre todo el contenido.

c. Tabs horizontales

Esta es la práctica más común en los eCommerce. Son las que están en una cajita, por ejemplo, y arriba tienes pestañas en las que vas dando clic y te van mostrando diferente contenido.

En investigación con usuarios se ha encontrado que no tiene buen desempeño porque muchas veces pasan desapercibidas. Las personas no se dan cuenta que el contenido que buscan está ahí o el título es limitado por lo angosto que es la pestaña, entonces no es fácil comunicar el contenido o incluso cuando sí lo encuentran requiere estar intercambiando de pestaña y pestaña, entonces van y vienen, van y vienen y es una experiencia la verdad compleja, no te facilita la vida, entonces es la que menos se recomienda.

d. Scroll gigante

Sin navegación que acompañe ni nada, un scroll gigante da resultado con mejor desempeño para productos que son muy simples, que no tienen mucha información que acompañe, no tienen especificaciones complicadas, particularmente en productos que solamente requieren de lo visual para comprarse, por ejemplo, algunos tipos de, eh, perdón. Un ejemplo bueno es el maquillaje, por ejemplo, algún un tipo de ropa a veces y lo que no se recomienda utilizar este tipo de composición es para electrónicos o electrodomésticos, porque sí tienen especificaciones complejas que hay que comparar o hay que revisar, muebles o incluso software también.

Ahora, en cuanto a qué se comunica del producto. Pues claro, el nombre del producto, el precio, las variantes, incluso acompañar esas variantes y conectar la imagen con el color de la variante o el tamaño, etcétera. Descripción del producto y el botón de agregar al carrito debe ser lo suficientemente prominente y único con respecto a los demás, ya sea a través del color, el tamaño, etcétera, algo que lo haga distintivo. Hay una prueba que le llaman banana test en inglés, que lo que hace es cambiar las palabras de tus botones por una palabra que no tenga sentido como banana y lo que haces es probar si el call to action o CTA es lo suficientemente distintivo relevante, sin ni siquiera leer lo que dice solamente con el puro color, con el estilo. Entonces eso es un ejercicio que pueden implementar, aunque suena chistoso.

Venta cruzada

Otro tema importante en la página del producto es la venta cruzada. Típicamente se encuentra al final de la sección de la página, o final de la página como tal, y es una sección que normalmente abarca el ancho de la página completa. Y esto lo que hace es comunicar un sentido de: terminó, es el fin de la página. Entonces hay que entender esto muy bien, porque más del 70 por ciento de los sitios de eCommerce utilizan este patrón y cuando lo hacemos diferente podemos entrar en problemas porque a lo mejor, no sé, un sitio pone información todavía del producto debajo de ese módulo y el usuario puede simplemente entender que: ok, venta cruzada, aquí terminé, me voy. Y un ejemplo claro es L’occitane, que esta tienda de productos de belleza en la que una persona buscaba si la crema para manos que estaba comprando tenía, era libre de experimentación en animales, por ejemplo, y qué ingredientes usaba. El módulo estaba debajo de la venta cruzada, pensó que no existía y fue otra tienda a buscar. Entonces una solución a eso puede ser hacer la altura mínima o hacer un alto mínimo para que parezca que toda vez contenido abajo o sea muy notorio, más bien que haya contenido más o usar una barra lateral muy angosta en la que puedas ir acompañando la navegación del usuario. Esto puede ayudar.

5. Carrito de compras y check-out

En éste es súper importante entender la forma en la que se utiliza este carrito de compras y el viaje del usuario al comprar en línea. Como tal, la compra no es un proceso lineal, no es: entro, encuentro, compro. Muy rara vez pasa. Eso es cuando alguien ya tiene muy claro lo que quiere comprar o va por algo que ya ha comprado. De acuerdo, pero normalmente estamos explorando. Entonces el carrito de compra sirve como eso, como un comparador o un lugar en donde puedo guardar productos. Entonces voy viendo, me va gustando, lo voy guardando en el carrito y después voy al carrito y ahí hago la comparación y elimino los que no voy a llevarme, elijo los que sí.

¿Esto de qué me sirve saberlo? Pues sirve para preparar la interface visual, poner imágenes o los thumbnails de un tamaño considerable para poderse revisar a simple vista, tener la consideración de que tal vez el usuario con algún producto sin darse cuenta y tiene todos del mismo tipo.

Tal vez en ese caso sea bueno separarlos para que rápidamente el usuario pueda escanear y darse cuenta. Incluir las características clave de cada producto a simple vista. Hay una página de productos para montañismo y ejercicio que se llama rey.com. Ellos lo que hacen es eso, separar ese ítem cuando es agregado al darle click al botón de agregar al carrito accidentalmente y también realzar las especificaciones en particular de cada producto, no sé, capacidad de la mochila, talla, en fin.

Ahora otra cosa es el tema de la compra como invitado. También es muy común encontrar que los sitios de eCommerce exigen o requieren que el usuario haga una cuenta. Lo recomendable es dejar ese paso lo más al final posible, inclusive dejarlos completar toda la compra como invitado y que la opción de hacerlo así sea la más prominente. Normalmente se deja en chiquito, en gris, muy oculto para forzar a crear la cuenta. Esto es un gran muro.

James: Sí y es frustrante, en lo personal me ha pasado donde antes de que quieres, o sea tú sigues explorando y te piden crear una cuenta y la verdad es frustrante que tú sigues explorando. todavía no estás decidido a comprar y ya te están pidiendo que te registres, ¿no?. Eso es realmente frustrante. De acuerdo completamente.

Ángel: Sí, exactamente, entonces esa es la recomendación: déjalos pasar como invitados, al final sí dales la opción de guardar toda su información en una cuenta, pero déjalos que tengan el éxito de hacer la compra y también el tema de pedir retroalimentación en esto de la experiencia de usuario es: siempre estamos buscando saber más de cómo es la experiencia para cada persona y pues hay encuestas, hay estos NPS que son Bernet Promoter Score para saber qué tan satisfechos están. Es vital encontrar el buen momento para hacer esa solicitud de retroalimentación. Jamás lo hagan durante el checkout o más bien una vez completada la compra, o incluso considerar cuántas respuestas hemos obtenido y limitar ese número y después quitar esa encuesta, ser lo menos invasivo posible.

6. La cuenta del cliente

En este caso es hay muchas cosas que tomar en cuenta, pero para esta respuesta voy a enfocarme nada más en los niveles de navegación y de contenido dentro de la cuenta. Se puede, puede ser muy sencillo de pronto tener demasiada información, demasiados niveles o niveles muy profundos en las categorías dentro de la cuenta. Entonces se recomienda hacerlo lo más sencillo posible que no que, por ejemplo, configurar mis settings del newsletter no me tome entrar a cinco niveles de profundidad para encontrarlos si lo puedo hacer desde más arriba. Esto requiere un análisis importante de cómo estamos ordenando su información y qué palabras estamos utilizando para que la persona entienda o usemos el mismo vocabulario del usuario. También es importante capitalizar en el drop down que podemos encontrar, es un patrón muy común en el simbolito del perfil de la persona: se despliega un submenú y aprovechar ese espacio con las características principales que se pueden hacer en mi cuenta las funcionalidades principales como cambiar contraseña, tal vez métodos de pago, revisión de pedidos o historial, o sea dejar lo que más visitan a la vista. Para fácil acceso.

James: Sí. Lo que estás mencionando, Ángel, entiendo, es o sea, es importante el carro de compra y hablamos de esto, es importante el proceso de conversión, pero ahora también es importante el proceso después de la compra, ¿no? donde ya eres un cliente leal, etcétera. Esa experiencia también importa a los usuarios, ¿no?, no solo el descubrir los productos, no solo el explorar, conocerlos más y el comprar, sino también la parte posventa, vamos a decir y donde estamos buscando que sean leales los clientes, ¿verdad?, ¿a eso te refieres?.

Ángel: Sí, exactamente, exactamente. Esa parte súper importante de la posventa, no nada más cuando haces el pedido, sino también cómo puedo volver. A lo mejor quiero volver a comprar algo que ya compré. Sí, exacto.

7. Seguimiento de devoluciones y pedidos

En el seguimiento todavía estoy en la expectativa de qué va a pasar con lo que compré.

James: Tal vez es tu primer compra

Ángel: Sí, exactamente pensando que esa es la primer compra. A lo mejor me dijeron que toma cinco días o que quiero saber en mi día dos dónde va mi producto, si lo mandaron o no lo mandaron. Hay una cancelación, por ejemplo. ¿Por qué se canceló? Es importante saber las razones y ofrecer canales de comunicación y soporte en estos momentos de incertidumbre. Es importante entender eso y apoyar al usuario o al cliente en estos momentos.

Hay otro tema que también estoy seguro que les ha pasado, cuando en una tienda compras y te dicen va a tardar 5 días hábiles en llegar. Bueno, para los tiempos de Amazon eso es demasiado. Pero es común en cualquier otro tipo de eCommerce que no sea Amazon y lo que se ha encontrado es el factor de sorprender a la persona o al cliente. Es decir, te digo que son 5 días, pero en realidad te llega en tres o te llega en cuatro días con la mejor intención de sorprenderlos positivamente. Pero esto también puede tener un impacto negativo, porque implica afectar la organización, la agenda que tiene la persona, si no lo mandó a su trabajo, lo mandó a su casa y no va a estar ese día y se programó para estar determinado día puede haber una fricción ahí si llega antes y por una razón no lo pudo recibir.

8. Experiencias en móvil y desktop

Y por último, todo esto prepararlo para ambas experiencias. Me refiero a la experiencia móvil y a la experiencia en computadoras de escritorio o laptops. Todos estos siete puntos anteriores deben funcionar y adaptarse al dispositivo en el que se encuentra.

Y ahí empezamos a tocar temas de omnicanalidad, dónde inició el proceso, dónde exploró los productos. A lo mejor solemos empezar en móvil, vemos si existe el producto, sí, sí me gusta, lo guardo en el carrito. Y aquí otro tip puede ser poder enviarme en mi carrito al email, o que sea un carrito que permanezca en el tiempo, aunque no tenga en cuenta tal vez se puede hacer eso o considerarlo, porque se inicia el proceso en móvil, pero quiero hacer la compra llegando a mi casa, en mi computadora de escritorio o en la computadora de la oficina.

Y bueno, eso eran los ocho puntos y cada uno da para profundizar enormemente y estoy seguro que eventualmente podemos hacer más vídeos hablando de cada uno de estos temas

James: De acuerdo. Y bueno, me gustó mucho de esos ocho puntos creo que engloban muy bien toda, todos los elementos que son clave en una experiencia en el sitio web. También mencionábamos el sitio móvil e incluso creo que aplican para las aplicaciones móviles. Podríamos considerarlo con sus variantes, que tendríamos que tomar en cuenta, pero bueno, rescato lo que mencionábamos, ¿no?, tenemos que pensar en la experiencia del cliente desde que él está descubriendo la marca que están descubriendo un producto hasta las etapas donde él ya está decidiendo comprar, hasta las tapas donde él está comprando, pero también la etapa después de eso. Todo eso compone la experiencia y definitivamente todo eso cuenta.