UX eCommerce: Cómo mejorar la experiencia de tus usuarios con iconos

La utilización de la tecnología lleva consigo la necesidad de una alfabetización digital, es decir, el aprendizaje y compresión de los lenguajes digitales propios del medio: la distribución del espacio en la pantalla, la ubicación de ventanas, su secuencia de apertura y la iconografía que nos guía a través del sitio elegido. Todo esto hace del UX eCommerce un tema en el que todas las empresas deben prestar atención.

El desarrollo y popularización del e-commerce requiere del aprendizaje de los lenguajes de compra online, es decir, la comprensión de las notas, palabras o íconos que nos guían en el proceso de compra. En el presente artículo usamos la definición de ícono como la de una imagen que reemplaza al objeto o acción real.

Si bien se podría decir que este reconocimiento de la simbología digital ya se ha difundido de manera tan extensiva que abarca a casi toda la población (consideremos que los smartphones comparten en buena parte este lenguaje digital), también es cierto que hay grupos de nuevos usuarios del servicio que, por razones de edad, educación, cultura o simplemente menor exposición al medio, no están familiarizados con el lenguaje de la compra online.

Hasta hace no muchos años, la compra online de artículos de consumo masivo era poco usual y no muchos supermercados brindaban este servicio. Hoy existe una gran variedad de ofertas de supermercados o tiendas de bienes de consumo online y hasta algunas de ellas, como Amazon, que carecen de locales para la compra física de productos.

Nuestra intención es revisar algunos de los ejemplos de tiendas online en nuestra región y la iconografía utilizada para guiar al comprador en su proceso de compra (1). ¿Existe uniformidad en el lenguaje digital utilizado? ¿El uso o no de íconos tiene relación con el grado de alfabetización digital del target comprador o del país en cuestión? ¿Se ha “globalizado” o al menos regionalizado el fenómeno?


Consulta los beneficios del e-commerce para tu empresa.


Elementos para mejorar el UX eCommerce

1.- Ubicación espacial:

Para la mayoría, sino todas las páginas de tiendas online analizadas, las opciones de elección de categorías de productos o áreas de negocios se encuentra en una barra horizontal en la parte superior de la pantalla. Esta barra despliega el menú de opciones utilizando sólo textos, textos más íconos o sólo íconos. Veamos algunos ejemplos de USA:

íconos para sitio web

En los dos primeros ejemplos de las empresas Target y Cotsco, podemos apreciar que el camino de compra está guiado por textos con los nombres de las categorías o servicios que se ofrecen. En el tercer ejemplo, Walmart, no hay palabras, solo íconos para guiarnos en la compra.

Se podría argumentar que la UX eCommerce de Walmart está enfocado en un usuario más digitalmente alfabetizado dado que no utilizada las palabras y asume que todos los compradores están familiarizados con la iconografía del medio. Es posible, pero ciertamente no se condice con el posicionamiento socio-económico del target de la cadena.

Conoce más de la importancia de la experiencia del usuario.


2.- Iconografía más frecuente:

En primer lugar, debemos destacar que existen íconos que rápidamente remiten a la acción buscada, que simbolizan claramente el objeto o acción y que facilitan la experiencia de usuario en un e-commerce, como por el ejemplo el carro o cesto de compras.

Podríamos asumir que aún un usuario poco experimentado con el medio decodificará correctamente el significado del ícono: 

íconos de compra para página webEn algunos casos el carro agrega un contador acumulativo de los gastos incorporados al carro de compra.

Entre las tiendas departamentales el carro es reemplazado por una bolsa de compras, pero en la misma ubicación y con el mismo sentido de uso:

imageCon algunas variaciones los sitios muestran íconos similares para significar el carro o bolsa de compras, con contador de gastos o sin él.

Un ícono quizás menos figurativo es aquel que representa el menú a desplegar.image

Este ícono aparece en algunos casos asociado a una palabra o frase que aclara su función, veamos algunos ejemplos de cadenas de Chile y USA:

ejemplo de UX eCommerce

Este ícono es de uso frecuente en las aplicaciones de los teléfonos celulares o sitios web, a veces reemplazado por 3 puntos horizontales.

Otros íconos utilizados para una mejor UX eCommerce se refieren a distintas acciones como las que siguen (cabe aclarar que no todos los sitios online comparten los mismos íconos u opciones de entradas):

image    Marcar como preferido, pero sin comprar

image Ubicación de locales o puntos de contacto (2)

imageOpciones de reparto, seguimiento de pedidos

image Búsqueda por productos o marcas

image Iniciar sesión o registrarse como comprador frecuente. En algunos casos solo se observa la frase “iniciar sesión”.

image La “ayuda” puede estar indicada con un signo “?”, sólo o en una burbuja de llamada como se ve aquí, o con asesores virtuales, personificados en un chat en un lugar de la pantalla (usualmente en la parte inferior derecha)

 

3.- Iconografía complementaria:

En gran parte de los sitios consultados las cadenas exhiben los íconos propios de las redes sociales invitando al seguimiento, valoración o formar parte de la comunidad online de la marca. En algunos casos se muestran en la parte inferior de la pantalla, en otras ocupan un lugar más destacado en la barra superior.

iconografía de sitio online

Un juego de letras con símbolos matemáticos, en Unimarc Chile, ofrece ampliar el cuerpo de los textos para mejorar la visión.
  image

4.- Heterogeneidad dentro de una misma cadena:

Analizamos aquí el caso de Walmart. Misma cadena en varios países de la región, pero con un layout diferente en la página web. Identificamos las diferencias entre las pantallas de acceso de varios países de la región (USA, México, Brasil, Argentina, Chile y Puerto Rico):

íconos para ecommerce

En Walmart USA, como ya observamos, no hay texto, solo íconos que nos guían en la compra. Las 3 barras horizontales de la izquierda despliegan las secciones y categorías de la tienda online.

iconografía para tienda online

En el otro extremo, la UX eCommerce de Walmart México sólo emplea texto. No hay íconos a excepción de la lupa en la ventana de búsqueda. El menú de secciones se despliega haciendo clic en la palabra “Departamentos”.

¿Qué significado tienen estas diferencias? ¿Es posible pensar que la marca asume que en USA el comprador está más digitalmente alfabetizado y no requiere de textos? Y si sólo fuera producto de la heterogeneidad de diseños locales, ¿Es plausible pensar que la página de México está en un estadio anterior al de USA?

image

Brasil y Argentina utilizan una combinación de textos e íconos para casi la totalidad de las opciones de Clic. Brasil agrega imágenes de los productos junto a los textos de las secciones más generales para hacer su UX eCommerce más amigable.

UX eCommerce más amigable

En el caso de Walmart Chile, no vemos íconos excepto la lupa, pero un botón en el ángulo superior derecho nos envía al sitio de su franquicia local, Líder.cl.

image

Finalmente, en el caso de Puerto Rico sólo vemos información corporativa y comunicación de servicios y ofertas ya que no permite la compra online. Únicamente podemos ver iconos de redes sociales.

¿Existe uniformidad en UX eCommerce en los mercados más desarrollados?

la observación de los sitios de compra de algunas cadenas de USA (3) nos muestra también la inexistencia de uniformidad en la forma de guiar la compra a través de textos o íconos. Podríamos haber conjeturado que aquellas cadenas que asumen un target de compradores con mayor alfabetización digital (y quizás de mayor nivel educativo) tendrían más íconos que textos, pero el análisis mostró lo contrario.

Una cadena como Whole Foods, que se precia de ser distribuidor de productos orgánicos y sofisticados, no emplea íconos, solo texto. En el otro extremo, como ya mencionamos, Walmart que es una cadena de posicionamiento más “popular”, de precios bajos, es la que muestra su página sin textos.

Concluyendo, aún no se ha unificado el lenguaje iconográfico para las compras online. Existen imágenes mayormente aceptadas sobre todo aquellas cuyo significado es fácilmente decodificable por el comprador, como el caso del carro de compras.

Si bien en la mayoría de los casos las opciones se refuerzan con textos, éstos muchas veces también van asociados a íconos diversos. No se encuentra correlación con el target de compra y el mayor o menor uso de íconos por lo que no se puede asociar fácilmente con algún supuesto de grado de alfabetización digital del target comprador.

En síntesis, parecería que aún asistimos a una fase temprana del desarrollo de los sitios web de compra masiva online. Es de esperar una evolución en el corto plazo que favorezca universalmente al proceso de compra.

¡COLABORA CON NOSOTROS!

En QuestionPro necesitamos tu talento, si quieres colaborar en nuestro blog da click aquí



Autor: Victor Hugo Hernandez

Consultor Senior en VHH Consulting, Market Research & Innovation Solutions. Más de 25 años de experiencia en Latinoamérica en agencias globales de investigación de mercados.

Website: www.vhhconsulting.com

Twitter: @VHHConsulting

 

(1) Para este efecto se han analizado los sitios web de las siguientes cadenas por país: Argentina (Walmart, Carrefour, Coto, Dia %); Chile (Walmart -Líder-, Jumbo, Tottus, Monserrat, Unimarc, París, Falabella, Ripley, La Polar); Brasil (Walmart); México (Walmart); Puerto Rico (Walmart).
(2) Walmart Argentina utiliza un ícono propio y diferente que no se encontró en los otros casos.
(3) Se revisaron los sitios de cadenas de mayor cobertura como Walmart, Target, Kroger, Cotsco, HEB y Whole Foods.

 

Crea tu primera encuesta online completamente gratis