Los compradores que no llegan directamente a una página de producto casi siempre pasan antes por una página de categoría o de resultados de búsqueda. Ahí es donde una tienda los ayuda a reducir cientos de productos a unos pocos, o los pierde por el botón de retroceso. El diseño de páginas de listado de productos recibe menos atención que la página de inicio o el proceso de pago, pero decide si los visitantes llegan alguna vez a un producto. Esto es lo que hay que hacer bien: filtros, tarjetas de producto, orden y la búsqueda interna de la tienda.
Qué debe lograr el diseño de páginas de listado de productos
Una buena UX de páginas de categoría ayuda al visitante a hacer cuatro cosas en rápida sucesión:
- Orientarse: ver en qué categoría está, cuántos productos contiene y qué abarca la gama.
- Acotar: reducir la lista según los atributos que le importan.
- Comparar: revisar rápidamente los productos restantes sin abrir cada uno.
- Avanzar: abrir un producto, o volver a la lista sin perder su lugar.
Una introducción breve y enlaces a subcategorías ayudan con el primer paso; el resto depende de los filtros y las tarjetas de producto. Las páginas de categoría son una de las plantillas que prototipamos en Figma como parte del trabajo de diseño UX para comercio electrónico, junto con las páginas de producto y el proceso de pago.
UX de filtros en comercio electrónico que ayuda en lugar de ocultar
La mayoría de los problemas de los filtros empiezan en los datos, no en el diseño. Los filtros solo pueden ser tan buenos como los atributos de producto en los que se basan, así que la primera pregunta es qué atributos usan realmente los compradores para elegir: talla y ajuste en la ropa, compatibilidad en las piezas, dimensiones en los muebles, potencia en las herramientas. Los términos que la gente escribe en el cuadro de búsqueda de su tienda y las preguntas que escucha su personal de ventas son las mejores fuentes.
- Muestre el conteo junto a cada valor de filtro, y oculte o desactive los valores que no devolverían nada.
- Muestre los filtros aplicados sobre los resultados como etiquetas que se pueden quitar una por una, con un solo "borrar todo".
- Use las palabras de los clientes: "Compatible con modelos de 2018 a 2023" en lugar de un código interno.
- Ordene los filtros por utilidad, no alfabéticamente, y mantenga la lista corta cuando solo importan unos pocos atributos.
- Mantenga la página estable. Actualizar los resultados sin recargar está bien, siempre que la página no salte y los filtros elegidos sobrevivan al botón de retroceso.
Cuando los atributos son inconsistentes en miles de productos, la solución está en los propios datos de producto, y de ese lado se ocupa nuestro servicio de integración de ERP y PIM.
Filtros en celular
En un teléfono, los filtros en celular funcionan mejor en un panel de pantalla completa que se abre desde un botón fijo "Filtrar" colocado junto a "Ordenar". Deje que las personas seleccionen varios valores y los apliquen juntos con un botón que indique cuántos productos quedarán. Después de aplicarlos, llévelas de vuelta al inicio de los resultados y mantenga visibles los filtros aplicados sobre la lista.
Diseño de tarjetas de producto
Cada tarjeta tiene que responder "¿vale la pena abrir esto?" en uno o dos segundos. Un diseño de tarjetas de producto útil incluye:
- Imágenes con una proporción y un fondo uniformes, para que el ojo compare productos y no fotografías.
- Un nombre que incluya el detalle distintivo, como el modelo, el tamaño o la capacidad, y no solo la línea de producto.
- El precio, con los precios de oferta mostrados de forma clara y honesta.
- Uno o dos datos decisivos: muestras de color, tallas en existencia o plazo de entrega.
- Valoraciones solo cuando provienen de reseñas reales.
Deje fuera lo que corresponde a la página de producto. Una tarjeta saturada de insignias y botones hace más lenta la lectura rápida, y en el celular cada línea adicional empuja al siguiente producto fuera de la pantalla.
Opciones de orden, paginación vs desplazamiento infinito
Ofrezca opciones de orden que coincidan con la forma en que la gente compra en la categoría: relevancia o más vendidos como valor predeterminado, precio en ambos sentidos, lo más nuevo para moda y tecnología, y valoración donde abundan las reseñas. Recuerde la elección mientras el visitante navega.
El debate sobre paginación vs desplazamiento infinito tiene una respuesta práctica para la mayoría de las tiendas: un botón de "cargar más". El desplazamiento infinito hace inalcanzable el pie de página y dificulta volver al mismo punto después de abrir un producto, mientras que la paginación clásica agrega toques en el celular. Un botón de cargar más mantiene a las personas en control, y cada bloque cargado debería tener igualmente su propia URL rastreable para que los buscadores lleguen a todos los productos.
Búsqueda interna en comercio electrónico y la página sin resultados
Los visitantes que usan la búsqueda suelen saber lo que quieren, así que la búsqueda interna en comercio electrónico merece tanto cuidado como el menú. Debe tolerar errores de escritura y plurales, entender sinónimos como "sofá" y "couch", encontrar productos por SKU y número de modelo, y sugerir productos y categorías mientras el visitante escribe. Revise el registro de búsquedas cada mes: los términos que no devuelven nada son una lista ya preparada de productos, sinónimos y atributos que faltan.
Una página sin resultados nunca debe ser un callejón sin salida. Ofrezca una corrección ortográfica, categorías populares, unos cuantos productos más vendidos y una forma de consultar a una persona. Quien buscó es alguien con intención, y una página sin resultados útil conserva al menos a algunos de ellos.
Preguntas frecuentes: diseño de páginas de listado de productos
¿Cuántos filtros debe tener una página de categoría?
Tantos como los compradores usen realmente para decidir, y no más. Ordénelos por importancia, y mueva los filtros poco usados detrás de un enlace "más filtros" en lugar de eliminarlos.
¿Deben aparecer en los listados los productos agotados?
Por lo general sí, pero más abajo en la lista y claramente marcados, con una opción para ocultarlos. Quitarlos por completo rompe enlaces y oculta productos que pronto volverán.
¿Cómo sabemos si los cambios en el listado funcionaron?
Mida el uso de los filtros, las búsquedas que terminan sin un clic y cuántas visitas al listado llevan a una página de producto. Para cambios mayores, una prueba A/B da una respuesta más limpia, algo que cubre nuestro servicio de optimización de la tasa de conversión.
¿Se pierden los compradores entre su menú y sus productos? Nuestro servicio de diseño UX y UI para comercio electrónico comienza con una auditoría de experiencia de usuario y pasa luego a prototipos en Figma de páginas de categoría, filtros, páginas de producto y proceso de pago para tiendas WooCommerce, Magento y PrestaShop. Envíenos la dirección de su tienda y sus categorías más vendidas, y le sugeriremos por dónde empezar.
