Del catálogo a la tienda: diseño orientado a la conversión en WooCommerce

Que una tienda online tenga buen aspecto no es suficiente para que venda. El diseño orientado a la conversión trata de algo concreto: eliminar los obstáculos que impiden que el usuario complete la acción que queremos que haga, ya sea añadir al carrito, rellenar un formulario o finalizar la compra.

En esta charla para el Meetup de WordPress de A Coruña recorremos las pantallas de una tienda WooCommerce de principio a fin: la homepage, el listado de productos, la ficha de producto, el carrito, el checkout y la página de confirmación. Cada una tiene sus propios patrones y sus propios errores habituales.

Lo primero: legibilidad y estructura del contenido

Antes de hablar de funcionalidades concretas hay una capa más básica que tiene un impacto enorme en la conversión: la legibilidad del contenido. Un texto que cuesta leer es un texto que no convence, y eso aplica igual a una página de producto que a una ficha de servicio.

Algunas reglas que funcionan bien en contextos de venta:

• listas cuando hay elementos comparables,
• imágenes que contextualizan o demuestran el producto en uso,
• párrafos cortos de 3-4 líneas,
• ancho máximo de columna para no forzar líneas demasiado largas,
• y jerarquía visual clara con títulos de segundo y tercer nivel.

Y una única llamada a la acción principal, que puede repetirse en la página, pero siempre la misma.

Hay dos conceptos tipográficos que afectan más de lo que parece: el ritmo vertical (la coherencia en el espaciado entre elementos) y el false bottom (la sensación de que la página ha terminado cuando todavía hay más contenido debajo). Ambos pueden hacer que el usuario abandone antes de llegar a la información que importa.

Formularios: el objetivo es recopilar datos con la menor fricción posible

Los formularios son el punto donde se gana o se pierde más conversión. El objetivo número uno de cualquier formulario es recopilar los datos necesarios evitando la fricción. Eso significa pedir solo lo imprescindible, y cuando pidas algo que pueda parecer invasivo (como el DNI), explicar con claridad para qué lo necesitas. Si puedes evitar pedirlo o dejarlo para el final, mejor.

Validar en tiempo real es mucho mejor que mostrar los errores al enviar. Si el usuario escribe un email con formato incorrecto, díselo en el momento, con un mensaje amable y descriptivo. No pongas el nombre del campo dentro del placeholder: cuando el usuario empiece a escribir, el texto desaparece y ya no sabe qué ponía ahí. Usa el placeholder para mostrar un ejemplo real, como “Por ejemplo: maria@gmail.com”.

Algunos principios que se aplican casi siempre: una única columna (los formularios de dos columnas obligan al ojo a saltar y aumentan la tasa de abandono), no usar desplegables si hay menos de cinco opciones (mejor radio buttons o botones directos), y pedir el correo lo antes posible en el flujo para poder recuperar al usuario aunque no termine el proceso. Autocompleta lo que puedas, como el país o la ciudad a partir del código postal.

Dos errores habituales que conviene evitar: pasarse con las restricciones de la contraseña (si el usuario tiene que inventarse una contraseña ultra-compleja para comprar unos calcetines, probablemente abandone) y usar Captchas (generan fricción a todos los usuarios, incluidos los legítimos, y hay alternativas menos intrusivas para el spam).

Si el formulario es largo, divídelo en pasos con una barra de progreso. Que el usuario sepa en qué paso está y cuántos quedan reduce la sensación de que el proceso es interminable.

La homepage: que quede claro qué vendes y que lleguen rápido a los productos

La página de inicio de una tienda tiene dos objetivos que conviene tener muy claros: que la proposición única de valor quede clara en pocos segundos, y que el usuario llegue lo antes posible a una categoría o a un producto concreto. No es un escaparate para lucir todo lo que tienes: es un distribuidor eficiente.

Los elementos que no pueden faltar: una navegación sencilla y lógica, un buscador bien visible, una llamada a la acción adecuada a la fase de compra del visitante (distinta si aterrizan por primera vez que si ya te conocen), y la posibilidad de destacar categorías especiales o promociones sin que eso convierta la portada en un bazar. La disputa interna sobre qué productos salen en la homepage es clásica en cualquier proyecto de e-commerce: la respuesta siempre es la misma, los que ayudan al usuario a orientarse, no los que la empresa quiere promover.

El listado de productos: para encontrar, comparar y elegir

La página de listado tiene tres objetivos: que el usuario encuentre lo que busca, que pueda comparar opciones y que llegue fácilmente al producto que quiere. Para eso hacen falta buenos filtros, una opción de ordenar y etiquetas que destaquen productos especiales (nuevo, oferta, más vendido).

Las tarjetas de producto en el grid no necesitan botón de “añadir al carrito”. El objetivo del listado es llevar al usuario a la ficha de producto para que tome una decisión informada, no que compre desde el listado sin ver los detalles. Toda la tarjeta debe ser clicable, con buenas fotos que permitan comparar a primera vista. Sobre la elección entre lista y grid: depende del tipo de producto. Para artesanales o de decoración el grid funciona mejor; para electrónica o productos técnicos con muchos atributos comparables, la vista de lista ayuda más.

La paginación tiene ventajas sobre el scroll infinito en e-commerce: el usuario puede volver a la misma página si quiere recuperar un producto, y el rendimiento de carga es mejor. El scroll infinito puede funcionar bien en contextos de exploración abierta, pero en listados con filtros suele crear problemas de navegación.

La ficha de producto: dar información suficiente y convencer

La página de producto tiene dos objetivos: dar la información suficiente para que el usuario pueda evaluar el producto y convencerle de que es el correcto. Eso es más de lo que parece. Las imágenes que transmiten la experiencia de uso (el producto puesto, en contexto, con escala) convierten mejor que las fotos de catálogo sobre fondo blanco. Si el producto lo permite, el zoom es un detalle que da confianza.

Las reseñas son uno de los elementos que más influyen en la decisión de compra, especialmente en productos de precio medio-alto. Mostrar colores y tallas disponibles de forma visual, y marcar claramente las variaciones no disponibles, evita frustraciones después de añadir al carrito.

La información sobre facilidades de pago (pago fraccionado, Bizum, etc.) y gastos de envío tiene que estar visible cerca del botón de compra, no enterrada abajo del todo. Las condiciones importantes (política de devolución, plazo de entrega, garantía) reducen la ansiedad de compra cuando están donde el usuario las espera encontrar. Y el botón de compra tiene que ser el elemento más prominente de la página, sin que haya que buscar o hacer scroll para encontrarlo.

El carrito: claridad máxima antes del salto final

El carrito es la pantalla de revisión antes del pago. El usuario ya ha decidido comprar; ahora tu objetivo es que no cambie de opinión. Eso significa claridad máxima: qué hay en el carrito, cuánto cuesta cada cosa, cuál es el total con impuestos y envío. Sin sorpresas.

Los gastos de envío gratuitos a partir de cierto importe son uno de los incentivos que mejor funcionan para aumentar el ticket medio: mostrar claramente cuánto le falta al usuario para conseguirlos es una buena práctica. La opción de actualizar cantidades o eliminar productos tiene que ser fácil y visible, y las fotos pequeñas del producto en el carrito ayudan a la confirmación visual de que está lo que tiene que estar. El campo para el cupón de descuento tiene su debate: si está visible, puede hacer que el usuario abandone a buscar un cupón que no tiene. Hay quien lo oculta detrás de un enlace, pero depende del tipo de tienda.

El checkout: menos distracciones, más confianza

El checkout es donde se pierde más conversión, y hay unos cuantos principios que cambian mucho los resultados. El primero: deja comprar como invitado. Obligar a crear una cuenta antes de pagar es una de las mayores causas de abandono. Si quieres que se registren, ofrecéselo después de la compra.

El segundo: que parezca seguro. Un sello de compra segura, los logos de los métodos de pago reconocidos, un número de contacto visible para resolver dudas de última hora. Elimina la navegación principal y el enlace del logo durante el checkout: en esta página no quieres que el usuario se distraiga o salga del flujo. Que el resumen del pedido esté siempre visible, especialmente en móvil, para que no haya dudas sobre qué está comprando.

La página de confirmación: el momento que más se descuida

La página de confirmación (la famosa “página de gracias”) es la pantalla más infravalorada del e-commerce. El usuario acaba de comprarte: está en el mejor momento emocional para recibir información, suscribirse a tu newsletter o compartir la compra. Y sin embargo es la pantalla a la que menos diseño se dedica.

Lo imprescindible: mostrar todos los detalles de la compra (qué ha comprado, cómo, cuándo llegará) y decirle qué va a pasar ahora (recibirá un email, el pedido se prepara en X días, puede seguir el estado en tal sitio). A partir de ahí, esta página puede hacer mucho trabajo: la opción de continuar comprando, una venta cruzada de productos relacionados, la invitación a suscribirse a la newsletter, o la opción de compartir en redes sociales si el producto es de los que se comparten.

La charla

Te lo ha contado

Ana Cirujano

Soy diseñadora y ayudo a negocios online a fortalecer su marca, mejorar la experiencia de usuario y obtener mejores resultados.

Quién soy Cómo te puedo ayudar