La homepage como punto de decisión
La homepage de un e-commerce tiene segundos para comunicar tres cosas: qué vendes, por qué eres diferente, y cómo encontrar lo que busco. Según NNGroup, el 52% del espacio en homepages se desperdicia en elementos que los usuarios ignoran: autopromociones, relleno visual y espacios vacíos.
Solo el 24% del espacio se dedica a contenido de interés real para el usuario. El resto es ruido.
El problema no es estético. Es de conversión. Un usuario que malinterpreta tu catálogo en la homepage abandona antes de ver un solo producto.
Tipos de producto: filtros, no categorías
Uno de los errores más costosos que veo en e-commerce es tratar los subtipos de producto como categorías cuando deberían ser filtros.
El problema
Si vendes ropa y estructuras tu navegación así:
Mujer
├── Abrigos
├── Chaquetas
├── Trenches
├── CazadorasEl usuario que busca “chaqueta de cuero” tiene que adivinar si está en “Chaquetas” o en “Cazadoras”. No puede ver todas las opciones juntas. Está encerrado en silos que fragmentan el catálogo.
La solución
Implementa los tipos de producto como filtros cuando comparten atributos comunes:
Mujer
└── Abrigos y chaquetas [Ver todo]
Filtros: Tipo (Abrigo | Chaqueta | Trench | Cazadora)
Material (Cuero | Lana | Plumas | Algodón)
Ocasión (Formal | Casual | Deporte)| Enfoque | Comportamiento | Resultado |
|---|---|---|
| Subtipos como categorías | Usuario elige una opción y pierde el resto | Abandono por catálogo percibido como limitado |
| Subtipos como filtros | Usuario ve todo y refina según necesidad | Mayor exploración, más productos vistos |
La regla: usa categorías cuando los productos son mutuamente excluyentes (electrodomésticos vs ropa). Usa filtros cuando comparten atributos y el usuario podría querer comparar entre tipos.
Espaciado táctil en móvil
En móvil, los elementos interactivos necesitan espacio suficiente para el dedo. El estándar mínimo son 44x44 píxeles según las WCAG, pero en e-commerce recomiendo 48px mínimo entre elementos tapeables.
| Elemento | Tamaño mínimo | Separación mínima |
|---|---|---|
| Botones de acción | 48x48px | 8px |
| Links en menú | 44px altura | 12px |
| Filtros/chips | 40px altura | 8px |
| Iconos de navegación | 48x48px | 16px |
El problema típico: menús con links de 32px de altura y 4px de separación. En pantallas táctiles, el usuario toca el enlace equivocado el 20-30% de las veces.
Variedad de producto en homepage
Los usuarios nuevos usan la homepage para evaluar qué tipo de sitio es y qué variedad de productos ofrece. Si solo muestras una categoría o un tipo de producto, asumen que eso es todo lo que vendes.
Lo que funciona
- Mostrar productos de múltiples categorías en la homepage
- Incluir diferentes rangos de precio visibles
- Representar variedad de estilos, colores o usos
Lo que no funciona
- Homepage dominada por una sola colección o promoción
- Solo productos premium o solo productos en oferta
- Imágenes genéricas sin productos reales
Para sitios DTC (Direct-to-Consumer) con catálogo pequeño, la homepage debe mostrar una muestra representativa del catálogo completo. Si tienes 50 productos, el usuario debería poder hacerse una idea de los 50 viendo la homepage.
Publicidad en homepage: con precaución
Los anuncios en la homepage generan rechazo casi universal. En móvil, además de la percepción negativa, causan problemas reales de usabilidad:
| Problema | Impacto |
|---|---|
| Anuncios intersticiales | Bloquean contenido, frustran al usuario |
| Banners que empujan contenido | CLS alto, usuario pierde contexto |
| Anuncios que parecen contenido | Confusión, clicks accidentales |
| Exceso de anuncios | Percepción de sitio de baja calidad |
Si necesitas monetizar con ads, mantenlos below the fold y claramente diferenciados del contenido. Nunca en el primer viewport en móvil.
Carruseles: si los usas, hazlo bien
Los carruseles son controvertidos en UX. NNGroup reporta que los carruseles con autorotación tienen tasas de interacción muy bajas: la mayoría de usuarios solo ven el primer slide.
Problemas de los carruseles
| Problema | Por qué ocurre |
|---|---|
| Contenido ignorado | Usuario no espera a que cambie |
| Interacción difícil | Controles pequeños o poco visibles |
| Banner blindness | Usuario asume que es publicidad |
| Accesibilidad | Difícil de navegar con teclado o lector de pantalla |
Si decides usar carruseles
- Nunca autorotación en móvil: El usuario no puede predecir cuándo cambiará
- Controles prominentes: Flechas grandes, indicadores de posición claros
- Primer slide debe ser el más importante: Asume que nadie verá los demás
- Pausar en hover/focus: El usuario debe poder leer sin que cambie
<!-- Controles accesibles para carrusel -->
<div role="region" aria-label="Ofertas destacadas">
<button aria-label="Anterior" class="carousel-prev">←</button>
<button aria-label="Siguiente" class="carousel-next">→</button>
<div role="tablist" aria-label="Slides">
<button role="tab" aria-selected="true">1</button>
<button role="tab" aria-selected="false">2</button>
<button role="tab" aria-selected="false">3</button>
</div>
</div>Enlaces con scope limitado: claridad en el texto
En móvil es común mostrar accesos directos como “Ver novedades” o “Comprar ahora”. El problema: si el enlace lleva a un scope limitado (solo novedades de mujer, solo una categoría), el usuario debe saberlo antes de hacer tap.
| Mal | Bien |
|---|---|
| ”Ver colección" | "Ver colección Mujer Primavera" |
| "Comprar ahora" | "Comprar camisetas hombre" |
| "Novedades" | "Novedades en calzado" |
| "Ofertas" | "Ofertas hasta -50% en electrónica” |
El texto del enlace debe incluir el scope completo. Si el usuario espera ver “todas las ofertas” y solo ve ofertas de una categoría, la experiencia es confusa y puede abandonar pensando que el catálogo es más limitado de lo que realmente es.
Imágenes de marca propias
Las imágenes de stock o puramente funcionales transmiten falta de profesionalidad. Los usuarios evalúan la calidad de los productos basándose en la calidad de las imágenes.
| Tipo de imagen | Percepción |
|---|---|
| Stock genérico | ”Sitio poco fiable, productos dudosos” |
| Producto sobre fondo blanco (solo) | “Funcional pero sin personalidad” |
| Lifestyle con producto real | ”Marca profesional, producto de calidad” |
| Imágenes de marca propias | ”Confianza, diferenciación” |
La inversión en fotografía propia se recupera en conversión. Un e-commerce con imágenes de marca consistentes genera más confianza que uno con imágenes de proveedor mezcladas.
DTC y catálogos pequeños: mostrar el valor
Para sitios Direct-to-Consumer o con catálogo reducido, la homepage debe comunicar no solo qué vendes, sino por qué comprarte a ti.
Elementos que deben estar visibles
- Propuesta de valor única: ¿Qué te diferencia?
- Políticas clave: Envío gratis, devoluciones, garantía
- Prueba social: Reviews, testimonios, menciones en prensa
- Calidad del producto: Materiales, origen, proceso
| Elemento | Ubicación recomendada |
|---|---|
| Propuesta de valor | Hero o justo debajo |
| Políticas (envío, devolución) | Barra superior o hero |
| Reviews/testimonios | Below the fold, con producto |
| Garantías/certificaciones | Footer o near checkout |
Los usuarios de sitios nicho evalúan rápidamente si pueden confiar en la marca. La falta de claridad en cualquiera de estos puntos genera abandono prematuro.
Pedidos recientes en homepage
Para usuarios logueados, mostrar pedidos recientes o el estado de pedidos abiertos en la homepage reduce fricción:
- El usuario no tiene que buscar en “Mi cuenta”
- Genera confianza (el sitio recuerda su actividad)
- Facilita recompra de productos habituales
Implementación típica:
<!-- Sección de pedidos recientes para usuario logueado -->
<section aria-label="Tus pedidos recientes">
<h2>Tu último pedido</h2>
<div class="order-summary">
<p>Pedido #12345 - En camino</p>
<a href="/tracking/12345">Ver seguimiento</a>
</div>
<a href="/account/orders">Ver todos tus pedidos</a>
</section>Navegación temática o guiada
No todos los usuarios saben exactamente qué quieren. Ofrecer navegación temática ayuda a quienes buscan inspiración:
| Navegación tradicional | Navegación temática |
|---|---|
| Categoría > Subcategoría > Producto | ”Regalos para él” |
| Filtros técnicos | ”Looks de oficina” |
| Búsqueda por keyword | ”Preparar las vacaciones” |
La navegación guiada funciona especialmente bien para:
- Regalos: “Para ella”, “Para niños”, “Menos de 50€”
- Ocasiones: “Bodas”, “Entrevistas de trabajo”, “Vacaciones”
- Problemas: “Piel sensible”, “Espacios pequeños”
Considera incluir un wizard embebido en la homepage para usuarios que necesitan ayuda eligiendo. “¿No sabes qué elegir? Te ayudamos en 3 preguntas.”
Claridad en áreas clicables
Los usuarios deben saber dónde pueden hacer clic sin tener que descubrirlo. Las imágenes con múltiples zonas clicables son problemáticas si no está claro qué hace cada zona.
Problemas comunes
- Imagen de hero donde solo parte es clicable
- Banners donde no está claro si la imagen o el texto son el enlace
- Hover states que no existen en móvil
Solución
- Si toda la imagen es clicable, hazlo evidente con un CTA visible
- Si hay múltiples destinos, usa botones explícitos
- Añade estados hover/focus claros para desktop
/* Hacer evidente que un elemento es clicable */
.clickable-card {
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
}
.clickable-card:hover,
.clickable-card:focus-within {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}Logo enlazado a homepage
Parece básico, pero el logo debe enlazar siempre a la homepage. Es una convención universal que los usuarios esperan. Si el logo no es clicable o lleva a otra página, genera confusión.
Cuando el usuario está perdido en el sitio, su primer instinto es hacer clic en el logo para “volver al inicio”. Si eso no funciona, el siguiente paso suele ser abandonar.
Geolocalización: país e idioma
Para sitios internacionales, detectar país e idioma por IP mejora la experiencia inicial:
| Detección | Comportamiento recomendado |
|---|---|
| País | Preseleccionar pero permitir cambiar fácilmente |
| Idioma | Sugerir basado en navegador, no forzar |
| Moneda | Mostrar precios en moneda local |
| Envío | Indicar si se envía al país detectado |
El error típico: forzar un idioma sin opción de cambio visible, o redirigir a un sitio regional sin preguntar.
<!-- Selector de país/idioma accesible -->
<div role="region" aria-label="Seleccionar país e idioma">
<p>Parece que estás en España. <a href="/es">Ir a la tienda española</a></p>
<button>Cambiar país/idioma</button>
</div>Categorías principales visibles
En sectores donde la navegación por categorías es el método principal de descubrimiento, las categorías deben estar visibles en la homepage, no solo en el menú.
| Sector | Navegación principal |
|---|---|
| Moda | Categorías (Mujer, Hombre, Niños) |
| Electrónica | Categorías + Búsqueda |
| Alimentación | Categorías |
| Especializado/nicho | Búsqueda + Filtros |
Para e-commerce de moda o gran consumo, incluir las categorías principales directamente en la homepage (no solo en el header) acelera el descubrimiento y reduce clics hasta el producto.
El coste de una mala homepage
Según la investigación de Baymard Institute basada en más de 18,000 sesiones de usabilidad, los problemas de homepage y navegación están entre las causas principales de abandono temprano en e-commerce.
Una homepage que no comunica el catálogo correctamente no solo pierde esa visita: crea una percepción negativa que el usuario recordará si vuelve a encontrar la marca.
El tiempo invertido en optimizar la homepage tiene ROI directo en reducción de bounce rate y aumento de páginas vistas por sesión. No es cosmético: es conversión.