La PLP como filtro de decisión
La Product Listing Page (PLP) es donde el usuario decide si tu catálogo merece su tiempo. Llevo años auditando e-commerces y el patrón se repite: el usuario no llega a ver el producto porque la página de listado ya lo ha expulsado. Según Baymard Institute con más de 18.000 sesiones de usabilidad, los problemas en PLPs están entre las causas principales de abandono temprano.
El problema no es estético. Es estructural. Una PLP mal diseñada oculta productos relevantes, confunde con filtros inútiles y frustra con información insuficiente.
Layout del listado: la primera impresión
Agrupar variaciones de producto
Uno de los errores más costosos que veo en auditorías: mostrar cada variación de color o talla como un producto separado. Si vendes una camiseta en 8 colores, el usuario ve 8 productos casi idénticos ocupando el listado.
| Enfoque | Comportamiento | Resultado |
|---|---|---|
| Variaciones separadas | 8 items idénticos en el grid | Usuario pierde contexto, catálogo parece repetitivo |
| Variaciones agrupadas | 1 item con swatches de color | Catálogo parece más variado, navegación más eficiente |
La regla: agrupa variaciones de un mismo producto en un solo item del listado. Usa swatches o selectores para indicar las opciones disponibles.
Grid View vs List View
No todos los productos se muestran igual de bien en grid. Después de analizar decenas de e-commerces, tengo esto claro:
| Tipo de producto | Vista óptima | Razón |
|---|---|---|
| Moda, decoración, arte | Grid | Decisión visual, comparar estética |
| Electrónica, herramientas | List | Especificaciones técnicas visibles |
| Alimentación | Grid | Reconocimiento visual del producto |
| Software, servicios | List | Comparar features y precios |
Para productos visualmente diferenciados (moda, decoración), usa Grid View por defecto. Para productos spec-driven (electrónica, software), List View permite mostrar más información sin forzar al usuario a entrar en cada ficha.
En móvil, considera ofrecer una sola columna para list items que necesitan información técnica. Dos columnas funcionan bien para productos visuales, pero comprimen demasiado la información en productos complejos.
Paginación vs Infinite Scroll vs Load More
| Método | Pros | Contras | Mejor para |
|---|---|---|---|
| Paginación | Control del usuario, fácil volver | Más clics, fragmenta la experiencia | Catálogos grandes, usuarios que comparan |
| Infinite scroll | Fluido, sin interrupciones | Imposible llegar al footer, difícil volver | Feeds de inspiración, browsing casual |
| Load More | Equilibrio, usuario controla | Requiere acción explícita | La mayoría de e-commerce |
Para e-commerce, mi recomendación es clara: Load More con botón que indique cuántos productos quedan por cargar. El infinite scroll tiene problemas severos de accesibilidad y hace imposible acceder al footer donde suelen estar datos de contacto y políticas.
Si usas infinite scroll, implementa anclas en la URL para que el usuario pueda volver al mismo punto después de visitar una ficha de producto. Sin esto, el usuario pierde su posición y tiene que hacer scroll desde el principio.
Número de productos por defecto
Mostrar muy pocos productos obliga a paginar constantemente. Mostrar demasiados ralentiza la carga y abruma.
| Dispositivo | Productos recomendados | Razón |
|---|---|---|
| Desktop | 24-48 | Suficiente para explorar sin scroll excesivo |
| Tablet | 16-24 | Equilibrio entre densidad y rendimiento |
| Móvil | 12-16 | Scroll vertical natural, carga rápida |
Permite al usuario cambiar este valor. Algunos prefieren ver 100 productos de una vez; otros, 12. La opción por defecto debe ser sensata, pero no la única.
Thumbnails: el escaparate visual
Información visual suficiente
El thumbnail debe permitir evaluar el producto sin hacer clic. Este principio es fundamental y lo veo incumplido constantemente. Para productos visuales, esto significa:
- Producto completo visible, no recortado
- Fondo que no compita con el producto
- Tamaño suficiente para apreciar detalles
- Calidad de imagen adecuada (sin pixelación)
| Error común | Impacto | Solución |
|---|---|---|
| Thumbnail demasiado pequeño | Usuario no puede evaluar | Mínimo 200x200px en desktop |
| Producto recortado | Pierde contexto y proporciones | Mostrar producto completo |
| Fondo que distrae | Dificulta comparación | Fondo neutro consistente |
| Calidad baja | Percepción de producto barato | Imágenes optimizadas pero nítidas |
Múltiples ángulos en hover
Para productos donde el ángulo importa (muebles, ropa, accesorios), mostrar imágenes adicionales en hover acelera la evaluación:
<!-- Ejemplo de thumbnail con hover -->
<div class="product-thumbnail">
<img src="producto-frontal.webp" alt="Producto vista frontal" class="default">
<img src="producto-lateral.webp" alt="Producto vista lateral" class="hover">
</div>En móvil, donde no hay hover, considera un carrusel pequeño dentro del thumbnail o la posibilidad de hacer swipe entre imágenes.
Thumbnails para filtros de color
Cuando el usuario filtra por color, el thumbnail debe mostrar el producto en ese color, no en el color por defecto. Parece obvio, pero he perdido la cuenta de cuántos e-commerce muestran el producto en blanco aunque el usuario haya filtrado por rojo.
Productos con múltiples componentes
Para packs, bundles o productos que incluyen accesorios, el thumbnail debe mostrar todos los componentes incluidos. Si vendes una cámara con funda, el thumbnail debe mostrar ambos.
Información del list item
Datos esenciales visibles
Sin entrar en la ficha de producto, el usuario debe poder ver:
| Dato | Criticidad | Por qué |
|---|---|---|
| Precio | Obligatorio | Principal factor de decisión |
| Nombre del producto | Obligatorio | Identificación básica |
| Valoración media | Alta | Social proof, comparación rápida |
| Número de reviews | Alta | Contexto para la valoración |
| Disponibilidad | Alta | Evita frustración post-clic |
| Variaciones disponibles | Media | Indica opciones sin entrar |
Precio: claridad total
El precio debe ser inequívoco. Estos son los errores que encuentro una y otra vez:
| Error | Problema | Solución |
|---|---|---|
| Precio “desde X€” sin contexto | Usuario no sabe el precio real | Mostrar rango o precio del producto mostrado |
| Precio sin IVA en B2C | Sorpresa negativa al checkout | Siempre precio final con IVA |
| Descuento sin precio original | No se percibe el ahorro | Mostrar precio tachado + precio actual |
| Precio por unidad oculto | Dificulta comparación en multipacks | Mostrar precio/unidad junto al total |
Para productos con variaciones de precio (tallas, colores), muestra el precio de la variación mostrada en el thumbnail, no el precio mínimo.
Valoraciones: cantidad y calidad
Las valoraciones medias sin contexto son engañosas. Lo repito en cada auditoría: un producto con 4.5 estrellas y 3 reviews no es comparable a uno con 4.3 estrellas y 500 reviews.
| Métrica | Qué mostrar | Por qué |
|---|---|---|
| Media | Estrellas o número | Evaluación rápida |
| Cantidad | Número de reviews | Credibilidad de la media |
| Distribución | Opcional: barra de distribución | Detectar productos polarizados |
La regla de oro: media × cantidad. Un producto con menos estrellas pero muchas más reviews suele ser mejor opción que uno con puntuación perfecta y pocas reviews.
Estado de stock
Indicar la disponibilidad en el listado evita que el usuario pierda tiempo visitando productos agotados:
| Estado | Cómo mostrarlo | Acción |
|---|---|---|
| En stock | No necesita indicación | Normal |
| Stock bajo | ”Últimas unidades” | Urgencia legítima |
| Agotado | ”Agotado” + opción de notificación | Permitir alerta de restock |
| Disponible próximamente | Fecha estimada | Gestionar expectativas |
No ocultes productos agotados del listado por completo: el usuario que busca un producto específico necesita saber que existe aunque no esté disponible ahora.
Diferenciación visual
En listados donde los productos son visualmente similares (cables, componentes, productos blancos), añade diferenciadores:
- Badges: “Más vendido”, “Nuevo”, “Oferta”
- Atributos clave: Capacidad, dimensiones, compatibilidad
- Labels de uso: “Para gaming”, “Profesional”
Estos elementos ayudan al usuario a distinguir productos que de otro modo parecerían idénticos.
Funcionalidades del list item
Swatches de color
Para productos con variaciones de color, los swatches son obligatorios en el listado:
| Implementación | Problema | Solución |
|---|---|---|
| Sin swatches | Usuario no sabe qué colores hay | Siempre mostrar swatches |
| Swatches que no actualizan thumbnail | Desconexión visual | Actualizar imagen al seleccionar |
| Solo algunos colores visibles | Usuario pierde opciones | Mostrar todos o indicar “+X más” |
| Swatches demasiado pequeños | Difícil distinguir colores similares | Mínimo 20x20px, mejor 24x24px |
En móvil, asegura que los swatches tengan tamaño táctil suficiente (mínimo 44x44px incluyendo padding).
Guardar en favoritos
Este punto es no negociable: permite guardar productos sin crear cuenta. Forzar login para guardar un producto es garantía de abandono.
<!-- Wishlist sin login obligatorio -->
<button class="save-to-wishlist" aria-label="Guardar en favoritos">
<svg><!-- icono corazón --></svg>
</button>Usa localStorage para usuarios no logueados. Cuando creen cuenta, migra los favoritos guardados.
Comparador para productos técnicos
Para electrónica, electrodomésticos y productos spec-driven, un comparador es esencial:
| Funcionalidad | Criticidad |
|---|---|
| Seleccionar productos para comparar | Obligatoria |
| Ver comparativa en tabla | Obligatoria |
| Specs completos en comparativa | Obligatoria |
| Explicación de specs técnicos | Alta (ayuda inline) |
| Destacar diferencias | Media |
La tabla comparativa debe tener datos completos. Una comparativa con celdas vacías no sirve para tomar decisiones.
Quick View para productos visuales
El Quick View permite ver más información sin salir del listado. En mi experiencia, funciona bien para moda y decoración, donde el usuario quiere ver más fotos sin comprometerse a visitar la ficha completa.
| Contenido del Quick View | Incluir |
|---|---|
| Galería de imágenes | Sí |
| Precio y disponibilidad | Sí |
| Selector de talla/color | Sí |
| Añadir al carrito | Sí |
| Descripción completa | No (enlace a ficha) |
| Reviews completos | No (enlace a ficha) |
En móvil, el Quick View es menos útil porque ocupa toda la pantalla de todos modos. Considera si realmente aporta valor o es mejor ir directamente a la ficha.
Añadir al carrito desde el listado
Para productos de compra recurrente (consumibles, básicos), permite añadir al carrito directamente desde el listado:
| Tipo de producto | Añadir desde listado |
|---|---|
| Producto simple, sin variaciones | Sí |
| Producto con variaciones obligatorias | No (requiere selección) |
| Producto caro o complejo | No (decisión más meditada) |
| Compra recurrente (mismo cliente) | Sí, idealmente con “comprar de nuevo” |
Indicador de productos en carrito
Si el usuario ya tiene un producto en el carrito, indícalo visualmente en el listado. Evita añadir duplicados accidentalmente y ayuda a retomar compras interrumpidas.
Filtros: qué ofrecer
Filtros obligatorios
Independientemente del sector, estos filtros deberían estar siempre. No son opcionales:
| Filtro | Razón |
|---|---|
| Precio | Principal factor de decisión |
| Valoración de usuarios | Social proof, calidad percibida |
| Color | Casi siempre relevante |
| Talla/Tamaño | Crítico para moda, muebles, etc. |
| Marca | Preferencias y confianza |
Filtros específicos de categoría
Cada categoría necesita filtros propios basados en los atributos que diferencian los productos:
| Categoría | Filtros específicos |
|---|---|
| Electrónica | Capacidad, resolución, conectividad |
| Moda | Material, estilo, ocasión |
| Alimentación | Alérgenos, certificaciones, origen |
| Muebles | Material, dimensiones, estilo |
| Cosmética | Tipo de piel, ingredientes, formato |
Los atributos que diferencian productos deben ser filtros, no categorías separadas. Si vendes abrigos y chaquetas, “Tipo de prenda” es un filtro dentro de “Abrigos y chaquetas”, no dos categorías separadas.
Filtros temáticos
No todos los usuarios saben exactamente qué buscan. Los filtros temáticos ayudan:
| Filtro tradicional | Filtro temático |
|---|---|
| Categoría > Subcategoría | ”Regalos para él” |
| Color + Material | ”Look de oficina” |
| Precio + Marca | ”Menos de 50€“ |
| Atributos técnicos | ”Para piel sensible” |
Estos filtros funcionan especialmente bien para ocasiones (bodas, vacaciones), destinatarios (regalos) y problemas que el usuario quiere resolver.
Filtros de estado
| Filtro | Utilidad |
|---|---|
| En oferta / Rebajado | Alta demanda, ahorra tiempo |
| Novedades | Usuarios recurrentes |
| Más vendidos | Social proof, decisión rápida |
| Disponible ahora | Evita frustración |
Filtros: lógica y comportamiento
Lógica AND vs OR
La combinación de filtros debe seguir una lógica predecible. Parece básico, pero he visto implementaciones que lo hacen terriblemente mal:
| Combinación | Lógica | Ejemplo |
|---|---|---|
| Entre tipos de filtro | AND | Color:Rojo AND Talla:M |
| Dentro del mismo filtro | OR | Color:Rojo OR Color:Azul |
Si el usuario selecciona rojo y azul, quiere ver productos rojos O azules, no productos que sean rojos Y azules simultáneamente.
Permitir selección múltiple
Obligar a elegir un solo valor por filtro es limitante. Si quiero ver productos en rojo, azul o verde, necesito poder seleccionar los tres:
<!-- Mal: Radio buttons (un solo valor) -->
<input type="radio" name="color" value="rojo">
<input type="radio" name="color" value="azul">
<!-- Bien: Checkboxes (múltiples valores) -->
<input type="checkbox" name="color" value="rojo">
<input type="checkbox" name="color" value="azul">Mostrar número de resultados
Cada opción de filtro debe mostrar cuántos productos coinciden:
| Sin contador | Con contador |
|---|---|
| ☐ Rojo | ☐ Rojo (45) |
| ☐ Azul | ☐ Azul (12) |
| ☐ Verde | ☐ Verde (0) |
El contador debe actualizarse en tiempo real al aplicar otros filtros. Si ya he filtrado por talla M, el contador de colores debe mostrar solo productos en talla M.
Considera ocultar o deshabilitar opciones con 0 resultados para evitar frustración.
Explicar filtros técnicos
Los filtros con terminología específica del sector necesitan explicación:
<!-- Filtro con tooltip explicativo -->
<label>
<input type="checkbox" name="ipx7">
IPX7
<button aria-label="¿Qué significa IPX7?">ⓘ</button>
</label>El tooltip o modal debe explicar en lenguaje sencillo qué significa el término y por qué podría importarle al usuario.
Persistencia de filtros
Los filtros aplicados deben mantenerse cuando:
- El usuario navega a una ficha de producto y vuelve
- El usuario usa el botón “Atrás” del navegador
- El usuario cambia de página en el listado
Resetear filtros sin motivo es una de las frustraciones más reportadas en tests de usabilidad. Lo he visto provocar abandonos en sesiones de eye-tracking más veces de las que puedo contar.
Filtros visibles y aplicados
El usuario debe poder ver en todo momento:
- Qué filtros tiene aplicados - Chips o lista de filtros activos
- Cómo eliminar cada filtro - X o botón claro en cada chip
- Cómo eliminar todos los filtros - “Limpiar filtros”
<!-- Filtros aplicados visibles -->
<div class="applied-filters">
<span class="filter-chip">
Color: Rojo <button aria-label="Eliminar filtro">×</button>
</span>
<span class="filter-chip">
Talla: M <button aria-label="Eliminar filtro">×</button>
</span>
<button class="clear-all">Limpiar filtros</button>
</div>Filtros: interfaz y layout
Número de opciones visibles
Mostrar demasiadas opciones de filtro abruma. Mi regla: 4-8 opciones visibles inicialmente, el resto con “Ver más”:
| Número de opciones | Tratamiento |
|---|---|
| 1-8 | Mostrar todas |
| 9-20 | Mostrar 8 + “Ver más” expandible |
| 21+ | Mostrar 8 + buscador dentro del filtro |
Filtros numéricos con input libre
Para precio y otras magnitudes, ofrecer solo rangos predefinidos es limitante:
| Implementación | Problema | Solución |
|---|---|---|
| Solo rangos (0-50€, 50-100€…) | No coincide con presupuesto real | Inputs para mín/máx |
| Solo slider | Difícil precisión | Slider + inputs numéricos |
| Solo inputs | Menos visual | Inputs + feedback visual |
La combinación ideal: slider para ajuste rápido + inputs numéricos para precisión.
Acceso a filtros en móvil
En móvil, los filtros suelen estar ocultos tras un botón. Este botón debe ser:
- Prominente: No un icono pequeño que se confunda con decoración
- Con texto claro: “Filtrar” o “Filtros (3)” indicando cuántos hay activos
- Accesible: Posición fija o sticky para acceder sin scroll
<!-- Botón de filtros móvil accesible -->
<button class="filter-toggle" aria-expanded="false">
<svg><!-- icono filtro --></svg>
Filtrar
<span class="filter-count">3</span>
</button>Botón “Aplicar” en móvil
En móvil, los filtros suelen abrirse en un panel. Este panel necesita un botón “Aplicar” sticky en la parte inferior:
| Sin botón sticky | Con botón sticky |
|---|---|
| Usuario hace scroll, pierde el botón | Botón siempre visible |
| No sabe cómo aplicar | Acción clara y accesible |
| Abandona la selección de filtros | Completa la acción |
El botón debe mostrar cuántos resultados coinciden: “Ver 45 productos”.
Orden de opciones de filtro
El orden de las opciones en un filtro no es trivial. Para listas largas (marcas, colores):
| Criterio de orden | Cuándo usarlo |
|---|---|
| Alfabético | Listas largas donde el usuario busca algo específico |
| Por popularidad | Listas cortas, el usuario explora |
| Por relevancia | Filtros contextuales (basados en otros filtros) |
Para marcas: alfabético. Para colores: por popularidad o agrupados por familia (azules, rojos…). Nunca orden aleatorio.
Buscador en filtros largos
Si hay más de 20 opciones en un filtro, añade un campo de búsqueda:
<!-- Buscador dentro de filtro de marca -->
<div class="filter-search">
<input type="text" placeholder="Buscar marca..." aria-label="Buscar marca">
</div>
<ul class="filter-options">
<!-- opciones filtradas -->
</ul>Ordenación del listado
Opciones de ordenación que no pueden faltar
| Criterio | Por qué es necesario |
|---|---|
| Precio (menor a mayor) | Usuarios con presupuesto limitado |
| Precio (mayor a menor) | Usuarios buscando calidad/premium |
| Valoración | Decisión basada en social proof |
| Más vendidos | ”Lo que otros compran” |
| Novedades | Usuarios recurrentes |
Orden por defecto: diversidad
Tengo una opinión clara aquí: el orden por defecto no debe ser “más barato primero” ni “más caro primero”. Debe mostrar una selección diversa que represente el catálogo:
| Orden por defecto | Problema |
|---|---|
| Precio ascendente | Usuario asume que todo es barato |
| Precio descendente | Usuario asume que todo es caro |
| Más vendidos | Homogeneiza, oculta novedades |
| Diversidad/Relevancia | Representa el catálogo real |
Un algoritmo de diversidad mezcla productos de diferentes rangos de precio, marcas y popularidad para dar una imagen completa del catálogo.
Nomenclatura clara
“Precio: bajo a alto” es más claro que “Precio ascendente”. Lo técnico es para los desarrolladores, no para los usuarios:
| Técnico | Claro |
|---|---|
| Ascendente/Descendente | Menor a mayor / Mayor a menor |
| Por rating | Mejor valorados |
| Por fecha | Más recientes |
Mostrar orden actual
El selector de ordenación debe mostrar siempre qué criterio está aplicado:
<!-- Dropdown que muestra selección actual -->
<select aria-label="Ordenar por">
<option value="relevancia" selected>Relevancia</option>
<option value="precio-asc">Precio: menor a mayor</option>
<option value="precio-desc">Precio: mayor a menor</option>
<option value="valoracion">Mejor valorados</option>
</select>Ordenación por valoración: incluir cantidad
Al ordenar por valoración, no uses solo la media. Un producto con 5 estrellas y 2 reviews no debería aparecer antes que uno con 4.7 estrellas y 500 reviews.
La fórmula debe ponderar media y cantidad. Una aproximación simple:
score = (media × reviews) / (reviews + k)Donde k es un factor de suavizado (típicamente 10-50) que evita que productos con pocas reviews dominen.
El coste real de una PLP mal diseñada
Una PLP deficiente no solo pierde la venta actual: crea una percepción de catálogo limitado o de tienda poco profesional. El usuario que no encuentra lo que busca no asume que el problema es la interfaz; asume que el producto no existe.
He visto e-commerces perder entre un 15-25% de usuarios en la fase de exploración del catálogo por problemas de PLP. No es anecdótico: es patrón.
El tiempo invertido en optimizar la PLP tiene impacto directo en métricas de engagement (páginas por sesión, tiempo en sitio) y en conversión. Google documenta la importancia de la estructura de navegación para el rastreo en su guía de SEO, y NNGroup tiene investigación extensa sobre filtros y faceted navigation.
La inversión en una PLP bien diseñada se recupera en cada sesión de usuario. No es solo UX: es negocio.