8 Consejos de usabilidad para tu tienda WooCommerce

Una de las cosas que más detesto, es entrar a una tienda online dispuesto a gastar mi dinero en una compra y terminar desistiendo porque me resulta imposible encontrar el producto en el catálogo o porque a la hora del pago, son tantos los datos que solicitan, que acabo por cerrar la página y yendo a otra tienda. Sin duda, esta es la mejor forma de conseguir que jamás vuelva a entrar ahí.

Todos estos aspectos y muchísimos más están relacionados con lo que se conoce como usabilidad web. Un concepto que se te debe de grabar a fuego si tienes una tienda online y quieres que tus visitas se acaben convirtiendo en ventas.

En esta entrada voy dar algunos consejos sobre usabilidad para tu tienda WooCommerce de forma que te ayuden a mejorar la experiencia de usuario en el proceso de compra y por qué no, conseguir que gracias a esa experiencia positiva la gente repita compra en un futuro.

Usabilidad para WooCommerce. Cómo convertir la compra online en algo sencillo.

A pesar de todas las técnicas que engloba el concepto de usabilidad web, el objetivo de ésta es conseguir que cualquier persona pueda usar una web, aplicación o tienda online de forma sencilla e intuitiva.

A continuación voy a mencionar los que para mi son los aspectos más importantes para conseguir que una tienda WooCommerce cumpla con los principios de usabilidad.

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 WooCommerce 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ás usando muchas categorías -por ejemplo, decenas de ellas- para clasificar tus productos, intenta agruparlas dentro de categorías padre más generales (yo recomiendo un máximo de 5). Después, has todo lo posible por trabajar con una plantilla WooCommerce que use menús desplegables (dropdown) para así mostrar un menú mucho más limpio y ordenado.

Navegación menú dropdown WooCommerce

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.

Un consejo que suelo dar, es fijarse como 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 web de un ecommerce; «el 40% de los compradores abandonarían la página si tardara más de 3 segundos en cargar«.

Puede que el porcentaje varíe dependiendo del caso, pero con esos datos te puedes hacer una idea aproximada de la «pasta» que dejas de ganar si la velocidad de carga de tu tienda WooCommerce no 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 WooCommerce, 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.

Es un tema muy extenso que darían para escribir 20 entradas sólo sobre eso, pero al que sin duda dedicaré alguna entrada en este blog.

3. Permitir la compra como invitado

Ten siempre en mente que tu principal objetivo es vender. No conseguir usuarios registrados.

WooCommerce dispone 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.

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.

Estructura de categorías en WooCommerce

No tengas miedo de crear varios niveles de categorías si con ello consigues organizar mucho mejor tu catálogo. Eso si, yo personalmente no recomiendo superar los 3 niveles de jerarquización de categorías (categoría principal o padre > categorías hijas > categorías nietas).

5. Llamadas a la acción (CTAs)

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 en WooCommerce usando herramientas destinadas a este propósito.

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.

Mi recomendación en este campo es que trabajes siempre con plantillas o temas de calidad adaptados a WooCommerce, a ser posible premium. Esto te garantiza que han sido diseñados por profesionales y que van a cumplir el 99% de todas estas recomendaciones.

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.

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 yo recomiendo usar siempre «breadcrumbs» (en español «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.

La mayoría de plantillas premium adaptadas a WooCommerce disponen de breadcrumbs. Y en caso de que no lo incluyan, el propio plugin «WordPress SEO by Yoast» incluye un ajuste para mostrar breadcrumbs en tu tienda online.

8. Seguridad

Y por último y según mi opinión, el factor más importante; la seguridad.

Si tú tienda WooCommerce 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 siempre recomiendo, es instalar un certificado SSL en tu tienda WooCommerce, con esto consigues el famoso «candadito» de color verde en la barra del navegador.

Usabilidad en WooCommerce para generar confianza

Otra aspecto muy importante es añadir siempre que se pueda, sellos que certifiquen que el sitio web es seguro, 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.

Estos son mis 8 consejos de usabilidad para tu tienda WooCommerce, pero seguro que hay muchísimos más.

Espero que después de leer esto empieces a darle la importancia que se merece a la usabilidad de tu tienda online. Y viendo los ratios de conversión de los ecommerce en España, más vale hacer todo lo que esté en tus manos para que tu tienda online sea rentable.

10 comentarios en “8 Consejos de usabilidad para tu tienda WooCommerce”

  1. Hola.

    Antes de nada agradecerte el curro que te estas pegando con este blog y lo mucho que estamos aprendiendo con él.

    Una preguntilla. Sabes como extraer un feed correcto de productos que sirva para Google Merchant Center? el feed-> /tienda/feed no da los datos de la ficha de producto y tampoco encuentro ningún plugin «exprofeso».

    Un saludo

  2. Hola Antonio,

    Muy bueno el artículo.

    Hay un punto que comentas como es el de Breadcrumbs que considero muy importante pero que en Woocommerce genera un conflicto con la usabilidad. Cuando tienes un producto A que pertenece a distintas categorías (categoria 1, categoria 2 y categoria 3) el breadcrumb de producto A siempre sera tienda/categoria-1/producto A independientemente que accedas al producto A a través de la categoría 2 o categoria 3 por lo que si una persona quisiera volver atrás a través del breadcrumb se encontraría que no puede volver a la categoría 2 o categoría 3. Creo que esto representa un problema en la usabilidad de los breadcrumb de woocommerce.

    ¿Sabes algún truco o consejo para paliar este problema?

    1. Hola Miguel Ángel,

      Llevas razón. Es un fallo de WooCommerce a la hora de interpretar la ruta de acceso al producto.

      Lo que ocurre es que no se puede resolver el problema a través de ningún filtro o acción de WooCommerce.

      Sin embargo, existe una solución (aunque no es perfecta) que consiste en crearte una copia del fichero breadcrumb.php de WooCommerce en tu plantilla (/tu-plantilla/woocommerce/global/breadcrumb.php). Y después modificar la parte del código que genera la ruta del breadcrumb en las fichas de producto.

      He hecho la prueba en local y me ha funcionado. Pero es demasiado compleja para explicarla en un comentario. Así que he decidido escribir un artículo explicando cómo hacerlo y lo publicaré en los próximos días.

      Un saludo! Y permanece atento a las publicaciones del blog 😉

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Responsable: Antonio Cantero, siendo la Finalidad; envío de mis publicaciones así como correos comerciales. La Legitimación; es gracias a tu consentimiento. Destinatarios: tus datos se encuentran alojados en mi plataforma de email marketing Active Campaign ubicada en EEUU y acogida al Privacy Shield. Podrás ejercer Tus Derechos de Acceso, Rectificación, Limitación o Suprimir tus datos en contacto@woodemia.com

Scroll al inicio