Sistema de Diseño de Páginas de Detalle de Producto
Propósito
El Sistema de Diseño de Páginas de Detalle de Producto proporciona un marco visual y espacial estandarizado y de alto rendimiento para estructurar las Páginas de Detalle de Producto (PDP) de comercio electrónico. La Página de Detalle de Producto es el motor de conversión más crítico de cualquier sitio web de comercio electrónico o directo al consumidor. Requiere equilibrar medios enriquecidos, configuradores multivariante, modelos de precios dinámicos, señales de confianza y llamadas a la acción principales dentro de una interfaz cohesiva, escaneable y completamente accesible.
Un enfoque sistemático resuelve puntos de fricción de diseño comunes, como cuadros de compra desalineados, sliders de medios desorientadores, cambios de diseño durante cambios de variante, desencadenantes de compra ocultos en móvil y bloqueos críticos de accesibilidad en selectores personalizados. Este sistema cierra la brecha entre la presentación de marketing y la implementación técnica, asegurando que las páginas se carguen de manera estable y generen la máxima conversión, cumpliendo estrictamente con los estándares WCAG AA.
Casos de Uso
- Comercio Electrónico B2C y Directo al Consumidor (DTC): Diseño de páginas de producto altamente pulidas para productos físicos, ropa, cosméticos o electrónica.
- Ventas de Productos Digitales y Suscripciones: Organización de aspectos destacados de funciones, selectores de nivel y procesos de pago en páginas de aterrizaje de software, membresías o servicios.
- Páginas de Catálogo Industriales y B2B: Estructuración de páginas de piezas de hardware complejas y con muchas especificaciones, con esquemas descargables y creadores de cotizaciones.
- Vistas de Detalle de Marketplace: Estandarización de cuadrículas de diseño para listados diversos de múltiples vendedores (bienes raíces, reservas de viajes, ventas entre iguales).
Cuándo NO Usar
- Páginas de Comparación de Planes SaaS: Para comparar paquetes de suscripción distintos uno al lado del otro, use
pricing-table-ui-systemocomparison-matrix-system. - Descubrimiento de Productos Primarios (PLP): Para navegar catálogos o listas de resultados de búsqueda, use
card-ui-systemyfilter-and-sort-system. - Captura de Prospectos o Formularios Simples: Para formularios de contacto básicos, boletines informativos o registros de un solo paso, use
form-design-system. - Contenido Editorial y Blogs: Para narración de historias, boletines y columnas de solo texto, use
article-layout-system.
Entradas
- Inventario de Contenido y Activos: Imágenes/vídeos de producto de alta resolución (relaciones de aspecto, requisitos de zoom), especificaciones, reseñas, estructuras de precios y garantías de confianza.
- Complejidad de la Matriz de Variantes: Número de opciones (ej. color, tamaño, material) y presencia de relaciones de dependencia (ej. "La talla L solo está disponible en Negro").
- Escala Tipográfica y de Espaciado: Escalas de tamaño relativas y tokens de espaciado fluidos (de
fluid-typography-systemyfluid-spacing-system). - Tokens de Elevación y Color: Colores de acento de la marca, tonos de estado (oferta, advertencia, sin stock), elevaciones de superficie y estados activo, foco y hover (de
accessible-color-systemyelevation-and-depth-system). - Restricciones de la Ventana Móvil: Límites de la ventana gráfica y muescas del dispositivo (notablemente el indicador de inicio de iOS y las barras de menú del navegador).
Salidas
- Plano Espacial de Doble Panel: Cuadrícula estructural que divide la pantalla en un Panel de Medios de alto impacto a la izquierda y un Panel de Configuración de Compra (Cuadro de Compra) escaneable a la derecha.
- Reglas de Apilamiento y Flujo Responsivas: Especificaciones de transición que muestran cómo el diseño se colapsa en una pila vertical óptima para móvil.
- Cajón de Compra Fijo en Móvil: Especificación para una barra de compra anclada a la ventana gráfica que persiste en las vistas móviles más allá del pliegue de la CTA principal.
- Anatomía del Selector y Muestra Interactiva: Diseños a nivel de componente para botones de talla, muestras de color y contadores de cantidad.
- Especificación Aria live y Teclado: Rutas de tabulación de teclado claras, tabindex rotativo, retención de foco y activadores de anuncio de estado para cumplimiento con lectores de pantalla.
Flujo de Trabajo
1. Establecer el Diseño Espacial de Doble Panel (Escritorio >1024px)
Estructurar la vista de escritorio utilizando un diseño de Cuadrícula CSS de 2 columnas o Flexbox, dividido proporcionalmente:
- Columna Izquierda: El Panel de Medios (Ocupa 50–55%): Muestra activos visuales de producto de alta fidelidad. Para evitar que los usuarios pierdan el contexto de compra durante desplazamientos largos, configure la columna padre con
align-items: start;y haga que el contenedor de medios sea fijo:position: sticky; top: calc(var(--global-header-height) + var(--space-m));. - Columna Derecha: El Configurador de Compra / Cuadro de Compra (Ocupa 45–50%): Alberga todos los metadatos y controles de transacción. Manténgalo en una sola columna vertical con una jerarquía clara que se lea de arriba a abajo.
- Canal de la Cuadrícula: Mantenga un canal visual generoso (ej.
gap: clamp(24px, 4vw, 48px)) para mantener los medios y los controles distintos pero unificados.
2. Diseñar la Jerarquía Visual del Configurador de Compra (Cuadro de Compra)
Aplicar el flujo de lectura "Patrón-F" hacia abajo en la columna del Cuadro de Compra. Ordene los elementos lógicamente:
- Migas de Pan e Indicador de Categoría: Texto pequeño y atenuado en la parte superior (ej. "Tienda > Exterior > Chaquetas") para contexto.
- Encabezado del Producto: Título principal usando
h1con estilofont-size: clamp(1.75rem, 3.5vw, 2.5rem)y peso negrita. - Resumen de Prueba Social: Bloque de calificación por estrellas que muestre la calificación promedio y un enlace de texto activo para desplazarse directamente a la sección de reseñas (ej. "★ ★ ★ ★ ☆ (128 reseñas)").
- Bloque del Motor de Precios: Precios muy visibles. Precio activo en negrita, PVP tachado más pequeño (si está en oferta) y una insignia de oferta de color claro (ej. "Ahorra $20"). Coloque mensajes de pago a plazos (ej. "O 4 pagos de $25 con Klarna") inmediatamente debajo.
- Configurador de Variantes: Tallas, muestras de color o materiales. Use títulos de etiqueta consistentes y espacios de separación (ej.
margin-bottom: var(--space-m)). - Reaseguro de Inventario y Envío: Alertas de stock en tiempo real sutiles (ej. "● Solo quedan 3 en stock - se envía mañana") cerca de las variantes.
- CTA de Compra Principal: Botón prominente y de alto contraste "Añadir al Carrito" o "Comprar Ahora" que ocupe todo el ancho del Cuadro de Compra.
- Insignias de Confianza y Políticas de Devolución: Grupos de iconos/texto muy visibles (ej. "✓ Envío Gratis", "✓ Devoluciones en 30 Días") colocados directamente debajo de la CTA principal para minimizar la fricción de compra.
3. Estructurar la Galería de Medios de la Izquierda
Organizar las imágenes para garantizar una navegación rápida, ligera y que preserve la estabilidad del diseño:
- Contenedor de Visualización Principal: Anclar la imagen activa en un contenedor con una relación de aspecto fija (típicamente
1:1cuadrada o3:4retrato) usandoaspect-ratio: 1 / 1; object-fit: cover;. Esto evita el Cambio Acumulativo de Diseño (CLS) al cargar imágenes de tamaños ligeramente variables. - Navegación por Miniatura: Apilar miniaturas de apoyo horizontalmente debajo de la imagen principal (o verticalmente a la izquierda). Asegúrese de que las miniaturas activas tengan un borde de alto contraste y
aria-current="true". - Disparador de Ampliación/Zoom: Incluya un icono de zoom sutil en la esquina inferior derecha de la imagen activa. Al activarlo, se abre un lightbox modal a pantalla completa y con capacidad de deslizamiento (
image-gallery-and-lightbox-system).
4. Crear el Apilamiento Móvil y el Cajón de Compra Fijo en Móvil (<768px)
En pantallas móviles, los diseños estándar de varias columnas se rompen. Aplique estas reglas de adaptación:
- Flujo Vertical Lineal: Colapse la página en una pila de una sola columna. Coloque la Galería de Medios en la parte superior (ancho completo o ligeramente insertada), seguida inmediatamente por el Encabezado del Producto, Precio, Configurador de Variantes, CTA y luego las especificaciones detalladas.
- El Cajón de Compra Fijo en Móvil: Dado que la CTA principal se desplaza rápidamente fuera de la pantalla en móvil, implemente un cajón de pago fijo en la parte inferior:
- Mantenga el cajón oculto cuando la CTA en línea sea visible en la pantalla.
- Una vez que el usuario desplace la CTA en línea fuera de la vista (Umbral > 600px de desplazamiento), deslice hacia arriba una barra inferior fija compacta que contenga: [Miniatura del Producto + Título] (opcional/contraído en viewports pequeños), [Precio] y una [CTA principal de Añadir al Carrito] que ocupe la mitad derecha de la barra.
- Utilice
padding-bottom: env(safe-area-inset-bottom);para respetar las zonas de deslizamiento del dispositivo móvil y evitar superposiciones con los controles del sistema.
5. Estandarizar la Interacción del Selector de Variantes y Muestras Personalizado
Los selectores personalizados (como círculos de color o matrices de botones) deben tener un aspecto pulido e interactuar de forma limpia:
- Muestras Visuales: Los círculos de color deben tener al menos
32x32pxen escritorio y40x40pxen móvil. Las muestras activas se indican mediante un anillo de borde concéntrico externo (dejando un espacio blanco de 2px entre el círculo de color y el borde). - Botones de Talla: Use contornos de píldora redondeados para las tallas (ej. "S", "M", "L"). Tache y atenúe las tallas no disponibles (ej. opacidad
0.4con una línea diagonal) pero manténgalas enfocables para que los lectores de pantalla puedan anunciar "Talla S - Sin Stock". - Retroalimentación Dinámica: Alternar una muestra debe actualizar instantáneamente el precio visible, el aviso de inventario y la galería de imágenes principal sin recargar toda la página.
6. Diseñar para la Navegación por Teclado y la Accesibilidad del Lector de Pantalla
Los configuradores personalizados son lugares frecuentes de fallos de accesibilidad. Aplique estas pautas estrictas:
- Selección Semántica de Muestras: Implemente las muestras usando
<input type="radio">estándar envuelto en etiquetas<label>, con estilo para ocultar la entrada nativa visualmente mientras se mantiene completamente accesible. Esto garantiza la navegación nativa con teclas de flecha, la agrupación automática de radio y los estados de foco de teclado. - Anuncios Aria Live: Cuando un usuario selecciona una muestra o variante, use un div
aria-live="polite"invisible para anunciar la actualización a los lectores de pantalla (ej. "Color seleccionado: Rojo Carmesí. Precio actualizado a noventa y nueve dólares. En stock."). - Enlaces de Salto y Anclajes Contextuales: Asegúrese de que el "Enlace de Reseña de Estrella de Calificación" tenga un anillo de foco visible y desplace el foco del teclado suavemente hacia la Sección de Reseñas (
#reviews) usandotabindex="-1"en el destino.
Reglas de Decisión
Selección de Estilo de Muestra
| Número de Opciones | Patrón de Selector de UI Recomendado | Justificación de Diseño |
|---|---|---|
| 2 - 5 Opciones (ej. Rojo, Azul, Verde) | Botones de Píldora Visuales o Muestras | Visibilidad inmediata, baja carga cognitiva, objetivos fáciles de un solo toque. |
| 6 - 15 Opciones (ej. 10 tallas de zapatos) | Matriz de Cuadrícula Flexible Adaptativa | Agrupación compacta, encaja perfectamente en la columna del Cuadro de Compra sin desplazamiento largo. |
| 16+ Opciones (ej. 50 modelos de dispositivos) | Menú de Selección Personalizado con Búsqueda | Evita el desorden visual y los bloques de diseño abrumadores de "parálisis por elección". |
División del Diseño (Viewports de Escritorio vs. Tableta)
- Escritorio (>1024px): Cuadrícula de 2 Columnas (Medios fijos a la izquierda, Configurador desplazable a la derecha).
- Tableta (768px - 1023px): Reevaluar los anchos de columna. Cambiar a una división 50/50 o colapsar el diseño temprano a una pila de Columna Única con un contenedor simplificado alineado a la izquierda si el configurador de variantes contiene entradas de matriz densas.
- Móvil (<768px): Pila de 1 Columna estricta. El Cajón de Compra Fijo en Móvil se activa al desplazarse.
Estrategia de Presentación de Precios
- Presentación en Oferta: Muestre el precio de oferta activo en rojo de alto contraste o negrita de la marca (mínimo 24px/
1.5rem). Muestre el precio original (PVP) tachado en gris atenuado junto a él, e incluya una insignia de píldora compacta y sólida que indique el ahorro (ej. "Ahorra $30" o "-25%") para maximizar el valor percibido. - Presentación Estándar: Muestre el precio activo en negrita neutro-oscuro/neutro-claro (que coincida con el color del encabezado del cuerpo principal).
Restricciones
- Accesibilidad (WCAG AA Mínimo):
- SC 2.4.11 Foco No Obscurecido: Asegúrese de que las píldoras de variante enfocables o los botones de cantidad nunca estén oscurecidos por encabezados fijos o el cajón de compra inferior móvil. Use
scroll-margin-topyscroll-margin-bottomglobales apropiadamente. - SC 2.5.8 Tamaño del Objetivo: Cada selector de variante, burbuja de muestra y activador de incremento de cantidad (
+/-) debe proporcionar un objetivo táctil de al menos 24x24px con una separación clara, y 44x44px en pantallas táctiles. - Contraste AA: El texto principal, los precios y los estados de borde seleccionados deben mantener al menos una relación de contraste de 4.5:1. Los círculos de muestra de color deben tener una etiqueta de texto adjunta (ya sea adyacente o como texto de información sobre herramientas/lector de pantalla) para evitar depender únicamente del color (SC 1.4.1 Uso del Color).
- SC 2.4.11 Foco No Obscurecido: Asegúrese de que las píldoras de variante enfocables o los botones de cantidad nunca estén oscurecidos por encabezados fijos o el cajón de compra inferior móvil. Use
- Preservación del Cambio Acumulativo de Diseño (CLS):
- Siempre reserve espacio para el título del producto, el contenedor de la imagen y los cuadros de aviso dinámicos. Un estado de esqueleto (
skeleton-state-system) o dimensiones explícitas deben evitar que el contenido salte cuando se carguen reseñas dinámicas o contadores de inventario.
- Siempre reserve espacio para el título del producto, el contenedor de la imagen y los cuadros de aviso dinámicos. Un estado de esqueleto (
- Alturas de Ventana Gráfica Dinámicas: El cajón de compra fijo en móvil debe respetar las zonas seguras del entorno (
env(safe-area-inset-bottom)) para garantizar que los botones de deslizamiento físicos del inicio no entren en conflicto con la CTA de pago principal.
Patrones de Falla Comunes
- El Cambio de "Cuadro de Compra Escalonado": Botones de variante de talla o color que envuelven líneas de manera diferente según el producto, causando que la CTA principal de "Añadir al Carrito" salte hacia arriba y hacia abajo dinámicamente.
- El Punto Ciego de Solo Color: Usar círculos de color sin etiquetar como muestras. Los usuarios daltónicos no pueden distinguir entre muestras verdes y marrones, y los lectores de pantalla solo leerán "Botón de Color" a menos que se asocie un texto de etiqueta explícito.
- El Bloqueo del Teclado Virtual Móvil: Posicionar una barra inferior fija en pantallas móviles de una manera que bloquee o se superponga a los campos de formulario cuando el teclado virtual móvil se expande, atrapando al usuario.
- El Salto de la Relación de Aspecto de la Imagen: No declarar relaciones de aspecto explícitas en la visualización de la galería principal, causando que todas las columnas del diseño se colapsen y expandan a medida que el usuario alterna entre imágenes de producto apaisadas y verticales.
- El Bloqueo de Doble Barra de Desplazamiento: Configurar la columna fija izquierda demasiado alta o permitir que se desborde, causando que la columna izquierda se desplace de forma independiente dentro de una ventana pequeña y creando barras de desplazamiento dobles adyacentes entre sí.
Criterios de Validación
- Configuración de Doble Panel: El diseño de escritorio presenta una columna de medios fija a la izquierda y una columna de Cuadro de Compra desplazable a la derecha con bordes limpios de 1px o una clara división de espacio en blanco.
- Cascada Móvil Lineal: El viewport móvil colapsa la cuadrícula en una pila de una sola columna