Blog de Inbound Marketing

Cómo aplicar diseño y usabilidad UX para mi tienda online

Relativamente bien poco, el objetivo principal de cualquier site era generar tráfico, y tener muchas visitas. Afortunadamente, esto ha cambiado, y la usabilidad es un término cada día más nombrado y repetido en el mundo online, y por una sencilla razón: una óptima experiencia de usuario y una buena usabilidad puede marcar la diferencia entre el éxito o el fracaso de un sitio. Páginas como la cesta, modo de entrega, envío y facturación, las modalidades de pago, resumen del pedido, etc. añaden aún más complejidad en la creación de sitios usables.

La usabilidad es un requisito previo para todas aquellas tiendas online que quieran aprovechar todo su potencial. Si los usuarios no pueden comprar, o no están dispuestos a pasar por un proceso de compra aparentemente largo y sin garantías, el site es inútil y abocado al fracaso. Si el visitante no puede encontrar un producto o servicio o, si se queda atascado en una de las etapas del proceso de compra, da igual lo bueno o caro que sea dicho producto o servicio. Una vez que el usuario ha decidido lo que quiere comprar, su siguiente objetivo es finalizar la comprar lo más rápidamente posible, y el trabajo de un site es del de acelerarlo y agilizarlo de la manera más eficaz posible.
Existen pocas reglas escritas respecto a la experiencia de usuario. Realmente la ergonomía web óptima es el resultado de combinar “prueba y error”, con algo sentido común y tests de usuario. Muy relacionado con esto estarían los tests A/B o multivariante, pero eso lo dejamos para otro día . ;)

La mejor manera de facilitar la vida a tus clientes potenciales es aplicar las mismas recetas que se están aplicando en cualquier website, y que con el paso del tiempo, ya se han estandarizado:

  • Los enlaces subrayados y en otro color.
  • El carro de la compra arriba a la derecha.
  • El hacer clic en el logo te devuelve a la homepage.
  • El menú principal se mantiene en el mismo sitio en todas las páginas del site.
  • Las imágenes pequeñas se agrandan al hacer clic sobre ellas.
  • Los textos en formato de letra legible y los contrastes suaves (evitar escribir en rojo sobre un fondo azul marino)
  • Mejor escribir letra oscura sobre fondo claro que al revés.

 

Consejos de cómo hacer tu tienda online "usable"

A pesar de todas las técnicas que engloba el concepto de usabilidad, el objetivo de ésta es conseguir que cualquier persona pueda usar una web o navegar por ella sin dificulta, aplicación o tienda online de forma sencilla e intuitiva. A continuación voy a comentar los que para mi son los aspectos más importantes para conseguir que una tienda online cumpla con los principios de usabilidad.

 

experiencia de usuario Estas son las áreas representativas de la experiencia de usuario aplicado a aquellos que tengáis una tienda online. Mi consejo es que puntúeis del 1 al 10. ¡Poned vuestro ecommerce a examen!

1. Navegación

La única manera de conseguir que cualquier usuario pueda encontrar el producto que le interesa de forma fácil y rápida, sin tener que estar dando vueltas por la página, es organizando y categorizando todas los productos y secciones de tu tienda online de forma correcta. Aquí juegan un papel muy importante el menú principal, el menú secundario en caso de que lo haya y los enlaces del sidebar.

Si estáis usando muchas categorías -por ejemplo, decenas de ellas-para clasificar tus productos, intenta agruparlas dentro de categorías padre más generales mi recomendación son máximo 5. Después, has todo lo posible por trabajar con menús desplegables (dropdown) para así mostrar un menú mucho más limpio y ordenado.

 

usabilidad En esta captura podemos ver el esquema de un menú despegable, uno de las características más comunes y algunas veces más olvidadas de las tiendas online

 

Piensa mucho la jerarquización de tus productos y páginas y cómo mostrarlos en el menú. El objetivo es conseguir que una persona que visita por primera vez tu tienda, sepa a primera vista cómo está ordenado tu catálogo y donde tiene que clicar para encontrar lo que busca.Hay que fijarse cómo lo hacen las tiendas online referentes de tu sector y que ya tienen una cierta experiencia.

 

2. Velocidad de carga

Hay una frase que se repite en muchos de los estudios actuales sobre rendimiento de un ecommerce; “el 40% de los compradores abandonarían la página si tardara más de 3 segundos en cargar“. Ojo! Al dato :S. Puede que el porcentaje varíe dependiendo del caso, pero con esos datos te puedes hacer una idea aproximada del dinero que dejas de ganar si la velocidad de carga de tu tienda onlineno está optimizada. Por no decir, que cada vez es un factor de más peso en los resultados de búsqueda de los principales buscadores. Hay infinidad de aspectos que influyen en la velocidad de carga de una tienda online, desde el tamaño y número de imágenes, hasta el número de plugins, pasando obviamente por la propia configuración del servidor.

 

3. Permitir la compra como invitado

Ten siempre en mente que tu principal objetivo es vender. No conseguir usuarios registrados, esto es secundario. Tu tienda online debe disponer de una opción para habilitar la compra como invitado, sin necesidad de registro previo. Cuanto más simple y rápido sea el proceso de compra, mejor.

Si una persona puede elegir entre varias tiendas para comprar el producto que busca al mismo precio, es más probable que se decante por comprarlo en aquella que no le obligue a registrarse. En muchos se tratan de compras puntuales para una ocasión especial y los usuarios no tienen intención de volver más. Por tanto, no tiene ningún sentido obligarles a pasar por un proceso de registro. De hecho, si es el caso, acabarán abandonando la compra. Lo importante es vender, captar usuarios o leads, para fusilarlos con nuestra newsletter, es secundario, si tenemos un producto bueno volverá y ahí será el momento de captar. La recurrencia de compra es importante, pero hacer una primera compra aún más.

 

 

ux conversión Uno de los pasos fundamentales o características de usabilidad que fomentan la conversión es no obligar al usuario a registrarse, darle opciones.

 

4. Catálogo estructurado

Si tu listado de referencias de productos apenas supera la decena, no hay que complicarse mucho. Es decir, el catálogo será simple si o si.Pero cuando trabajas con cientos o miles de productos diferentes, es de vital importancia definir bien una estructura lógica de categorías antes de que sea demasiado tarde. Por tanto, antes de empezar a instalar plugins como un loco, define muy bien las categorías principales que vas a usar y sus categorías hijas en caso de que las necesites. No tengas miedo de crear varios niveles de categorías si con ello consigues organizar mucho mejor tu catálogo. Eso si, yo no recomiendo superar los 3 niveles de jerarquización de categorías (categoría principal o padre > categorías hijas > categorías nietas) porque sino se vuelve todo un "locurón".

 

5. Calls to Action

Las llamadas a la acción no sólo se deben usar para animar al cliente a comprar, sino también para guiarlo en todo el proceso de compra. No hay que olvidar que la compra no se acaba hasta que el cliente hace el pago. Así que en cada paso hay que definir bien las llamadas a la acción que queremos que lleve a cabo. Es decir, desde indicar cómo y donde buscar un producto, cómo calcular sus gastos de envío, hasta cómo hacer el pago.

Hay CTAs que son imprescindibles para que las visitas acaben en venta, pero también puede ser interesante definir llamadas a la acción para otro propósito justo después de terminar la compra, como por ejemplo: indicarles cómo pueden dejar una valoración de su compra en WooCommerce, cómo compartir su producto favorito en redes sociales o como ganar un descuento si consiguen que un amigo o referido haga otro pedido. Las llamadas a la acción deben ser explícitas y visibles en todo el proceso de compra sin llegar a ser molestas.

Y por supuesto, hay que probar diferentes versiones de la llamada a la acción, variando colores, tamaño, tipo de letra, etc. Todo con el objetivo que maximizar las conversiones. Para medir los resultados de estas pruebas es necesario hacer test A/B como y hemos comentando antes usando herramientas destinadas a este propósito que veremos luego.

 

 

comprar online Ejemplo de Call to action en el Market Place de Zalando.

 

6. Diseño consistente o predecible.

Un diseño consistente tiene como objetivo mantener una organización en la página para conseguir que todos y cada uno de los elementos que la forman (botones, enlaces, menús, formularios, etc) tengan una disposición y comportamiento “predecible” al de cualquier persona en ese entorno.

Es importante mantener una coherencia entre la disposición de los elementos de tu tienda WooCommerce en todas las pantallas. Esto quiere decir que no debes cambiar de posición los botones, menús o secciones de tu tienda en cada página, porque así evitarás desorientar a tus clientes. Otro aspecto muy importante es el uso de convenciones, que no son más que recomendaciones basadas en mapas mentales de los usuarios creados a partir experiencias previas. Por ejemplo, una de estás recomendaciones sería utilizar un icono de carrito de compra o cesta para el botón de acceso a la página del carro o también situar el carrito de compra en la esquina superior derecha de la cabecera de la web.

La disposición de los botones “Añadir al carro” también está basada en estás convenciones y por eso siempre veremos estos botones justo a la derecha de la foto de producto o debajo de ella. Por supuesto, siempre podrás adaptar el diseño a la imagen marca de tu tienda, pero evita marcar tendencia alterando la localización de los botones y menús, o las imágenes de los iconos. Si están dispuestos así, será por algo.

 

 

usabilidad en ecommerce La disposición del botón comprar o añadir al carrito es fundamental.

 

7. Mantener informado al cliente

El cliente debe saber en todo momento en qué página de tu tienda se encuentra y cómo puede volver hacia atrás si decide cambiar de idea. Para facilitar esta información de forma sencilla y rápida recomendamos usar siempre “breadcrumbs” (migas de pan) justo debajo del menú principal. Un breadcrumbs no es más que una línea de texto que indica la ruta que el usuario ha seguido hasta llegar a esa página. Cada nivel del breadcrumbs enlaza a la página correspondiente.

 

8. Seguridad

Y por último y según mi opinión, el factor más importante; la seguridad. Si tú tienda online no transmite seguridad, da igual todo lo demás. Nadie te comprará. Hay varias formas de generar confianza a tus visitantes. Una de ellas y que recomiendo, es instalar un certificado SSL en tu tienda online, con esto consigues el famoso “candadito” de color verde en la barra del navegador.

Otra aspecto muy importante es añadir siempre que se pueda, sellos que certifiquen que tu tienda es segura, logos de empresas/marcas reconocidas con las que trabajes y también de los bancos y pasarelas de pago que se estén usando. Sin olvidar por supuesto, tener siempre visibles los datos de la empresa, como pueden ser: el NIF, nombre de la sociedad, dirección, email, números de teléfono, etc. Todo suma a la hora de conseguir aumentar la sensación de seguridad de los clientes. Cuanto mayor confianza se transmita, mayor probabilidad habrá de conseguir ventas.

 

 

sistema de seguridad SSL Esquema de cómo funciona un sistema de seguridad SSL para nuestra tienda online.

 

 

Herramientas para medir la usabilidad de tu tienda online

Google Analytics

 

La herramienta gratuita de Google nos puede dar métricas y datos sobre usabilidad, aunque con el paso del tiempo han convertido sus “Vanity Metrics” en algo más. Dándonos datos de edad, género, cada vez más perfilado. Estos datos y la creación de eventos específicos nos hacen saber si nuestros usuarios actuales y potenciales están clickando donde deben.

 

mapas de calor Ver mapas de calor, o clicks en partes de nuestra web o tienda online es posible con GA, sólo tenemos que ir a analítica de la página, tenemos que establecer un parámetro sobre los clicks en este caso por encima del 0.50%

 

Usabilia

Después de GA quizás una de las más conmocidas, empresas internacionales, como Disney, Levi´s, o EA Sports han confiado en ella. Tiene un trial jugoso, que enseña muchas bondades del producto. El pricing está en torno a unos 49 $. Merece la pena si de verdad quieres saber de usabilidad en tu tienda online.

 Crazy Egg

Una de las que más me gusta, adoro sus mapas de calor. Saber en una tienda donde se está registrando el push, se hace indispensable. Su uso es muy facilito. Dale tu URL y cuántas visitas quieres rastrear. Metes un código en tus páginas, y el resultado te aparecerá en forma de excelentes informes gráficos del “heat map” de tu site. Tiene un modelo de pricing muy flexible.

 

usabilidad mapas de calor Con Crazy Egg podemos mapear nuestra tienda, donde nuestros clientes actuale sy potenciales navegan y clickan más.

FiveSecondTest

Brinda dos modalidades para grabar que es lo que realiza el usuario dentro de la web, en un plazo de 5 segundos. Con planes que van desde el gratuito, hasta los 200 $, brinda también la posibilidad de saber que es lo que se ha buscado internamente en el site, y desde que palabra clave se llegó a la misma, esto último me encanta :)

 

trackear clics Captura de cómo configurar tu cuenta, ojo! con poder trackear click en botones y ver cual puede ser el propósito de la página.

Test & Target

Con la compra de Omniture por parte de Adobe, de esto ya hace unos cuantos años, se llevaron consigo una de las “joyas de la corona” sin lugar a dudas. El Test & Target fue durante mucho tiempo, la referencia a seguir por parte de las demás empresas de medición. Disponía incluso de un módulo de testing A/B para medir la conversión online de ambas variantes de diseño.

 

campañas Podemos medir campañas de Test A/B de manera sencilla, sobre todo si estamos probando cosas nuevas en nuetsra tienda. Muy útil para campañas estaionales, rebajas y liquidaciones de stocks.

 

Consecuencias de mejorar la usabilidad

  • Progresión geométrica del aumento de conversión. El ideal es conseguir que tu tienda online sea tan usable que venda sola. Que la navegación sea tan cómoda, que no haga casi falta hacer ninguna acción, obviamente esto es el ideal.
  • Caída libre del abandono de carritos. Suprimir el % de abandono de carritos es el sueño de cualquier eCommerce Manager. Porque supone un incremento de ventas sustancial.
  • Descenso del % de rebote del site. Hacer que tus futuros clientes no salgan huyendo de tu tienda, está genial. Con un diseño usable y mejorando la experiencia de usuario, esto se puede conseguir.
  • Fidelidad y recurrencia. Es lo más difícil de conseguir en comercio electrónico. Los clientes online o los heavy buyers son infieles y hay que ganárselos, Por ello, la usabilidad puede ser el arma perfecta para desmarcarte de tu competencia.

Topics: Marketing Digital, eCommerce

Escrito por Jennifer Ungria el 15.12.2014
Encuentrame en: