Cuando dibujé la distribución de una tienda de café de ejemplo en 2014, tenía sentido describir la cabecera, la página de inicio, la categoría y la ficha de producto casi como bloques de construcción: logotipo a la izquierda, carrito a la derecha, filtros aquí y botón de compra allí.
Las expectativas básicas de la gente no han cambiado mucho. Lo que ha cambiado es el contexto: la mayoría de los diseños deben funcionar en el móvil, las ofertas son más complejas y cada script adicional compite por la velocidad y la atención. Por eso ya no recomiendo copiar una distribución a ciegas. Recomiendo recorrer las tareas del cliente.
La cabecera debe orientar, no mostrar todas las opciones
En la cabecera, la gente busca la marca, la navegación, la búsqueda, la cuenta y el carrito. No todos necesitan el mismo protagonismo. La prioridad cambia según el catálogo y la fase de compra.
- El logotipo lleva a la página de inicio y tiene un nombre textual comprensible.
- La búsqueda es fácil de encontrar cuando se conoce un producto o un parámetro.
- El carrito muestra su estado y no desaparece después de añadir un artículo.
- El contacto o la ayuda se encuentran fácilmente sin competir con la compra.
- El menú funciona mediante toque, teclado y sin exigir una precisión exacta con el ratón.
Un menú lateral puede ayudar en un catálogo amplio. Con diez categorías, a menudo no es más que un obstáculo vistoso. Google recomienda que las categorías y los productos sean accesibles mediante enlaces de navegación normales; es posible que la búsqueda por sí sola no muestre todo el catálogo a los robots. Los principios se describen en la documentación sobre la estructura de sitios de comercio electrónico.
La página de inicio debe distribuir el tráfico, no narrar todo el catálogo
En la página de inicio necesito entender rápidamente qué vende la tienda, para quién es y por dónde continuar. En lugar de un carrusel automático, prefiero una prioridad clara y varias entradas estables a las principales situaciones de compra.
Los productos más vendidos pueden ayudar, igual que las categorías de temporada, los consejos o un motivo para confiar en la tienda. Cada bloque debe tener una función. «Para que la página no esté vacía» no es una función.
Una categoría ayuda a acotar la elección
Una categoría no es texto SEO pegado encima de una cuadrícula de productos. Es una herramienta de decisión. Su nombre y una breve introducción definen la oferta, los filtros la acotan y la ordenación ayuda según la situación del cliente.
- Nombra los filtros con el lenguaje de los clientes, no con los campos internos de la base de datos.
- Muestra las opciones activas después de filtrar y facilita su eliminación.
- Presenta las subcategorías importantes como enlaces, no solo como valores de un script.
- Muestra en la lista los datos necesarios para comparar; deja el resto para la ficha.
- Un resultado vacío debería ofrecer una forma de volver atrás, no un callejón sin salida.
Las migas de pan ayudan a las personas a entender su posición en el catálogo y pueden ayudar a los motores de búsqueda a comprender la jerarquía. Si utilizas datos estructurados, sigue la documentación actual de Google sobre migas de pan.
La ficha de producto debe responder a las preguntas antes y después del botón
Un botón visible para añadir al carrito es la base, no toda la ficha. Antes de decidir, la gente necesita conocer el nombre, el precio, la variante, la disponibilidad, el envío, las devoluciones, las fotografías y la información adecuada al riesgo de la compra.
En el café importan el origen, el sabor, el tueste, el peso y la preparación. En un taladro importan más las especificaciones, la compatibilidad y el servicio. No existe un orden universal. Sí existe una pregunta universal: ¿qué necesita saber el cliente para comprar la variante adecuada y no devolverla después?
Las reseñas deben ser creíbles y referirse al producto concreto. Los productos recomendados deberían apoyar la elección, no desviar a alguien de una compra casi terminada. Un botón social en una ficha de producto tampoco es una prioridad. Ya deberíamos haber superado la época en la que un botón de «Me gusta» era la respuesta para todo.
El carrito y el proceso de compra deben eliminar las sorpresas
El carrito debe permitir cambiar la cantidad y la variante, así como eliminar artículos. Muestra el precio total, el envío y la fecha de entrega lo antes posible, no después del tercer paso y del registro.
La compra como invitado suele ser una opción predeterminada sensata. Si una cuenta ofrece un valor real, ofrécela después del pedido. Los formularios necesitan etiquetas correctas, autocompletado y errores que expliquen qué hay que corregir. Las áreas táctiles deben ser suficientemente grandes; el criterio actual se describe en WCAG 2.2 dentro de Tamaño del objetivo.
Mide las tareas, no el color del botón
Las pruebas A/B pueden ayudar cuando una empresa tiene suficiente tráfico, una hipótesis y una métrica decisiva. Cambiar los banners cada semana sin una muestra suficiente es un campo de juego, no una conclusión fiable.
Hago un seguimiento del uso de la búsqueda y los filtros, las acciones de añadir al carrito, los errores de los formularios, el abandono en cada paso, las devoluciones y las preguntas al soporte. Completo los números observando a las personas y sus preguntas. La analítica muestra dónde; una persona suele explicar por qué.
La base de la medición está en Google Analytics 4. Explico las comprobaciones de rendimiento en Cómo acelerar una web.
Una tienda online no tiene que ser original en la ubicación de su carrito. Tiene que resultar convincente en cuanto a por qué comprar este producto aquí.
Para conocer argumentos sobre las páginas de producto y de ventas, continúa con Elementos importantes de una página de ventas. La base completa de la web está en Cómo empezar un proyecto web.