sistema-ui-carrito-compras

Sistema de IU para Carrito de Compras

Propósito

El Sistema de IU para Carrito de Compras proporciona un marco visual y estructural accesible y de alta conversión para carritos de compras de comercio electrónico directo al consumidor (DTC) y multicanal. Actuando como el puente transaccional esencial entre el descubrimiento de productos (PDP) y la finalización del pago, el carrito de compras debe manejar elegantemente las actualizaciones de pedidos, los incentivos promocionales, las ventas cruzadas y los indicadores de progreso de envío en tiempo real.

Un enfoque de diseño sistemático resuelve los puntos de fricción estándar del carrito, como cambios inesperados en el diseño (CLS) cuando se actualizan los artículos, resúmenes de artículos ilegibles, controles interactivos ocultos en dispositivos móviles, selectores de cantidad inaccesibles y la falta de un camino psicológico claro hacia el pago. Este sistema garantiza estilos consistentes, microinteracciones fluidas, resiliencia del diseño y el cumplimiento estricto de las reglas de accesibilidad WCAG AA.

Casos de Uso

• Portales de Comercio Electrónico y Directo al Consumidor (DTC): Plataformas minoristas de alto volumen que utilizan minicarritos persistentes y revisiones de pago dedicadas.
• Pedidos de Catálogo B2B y Mayoristas: Mesas de pedidos al por mayor con listas tabulares, selectores de múltiples SKU y herramientas de agregado rápido.
• Motores de Reserva de Servicios y Experiencias: Organización de pases de varios días, reservas, complementos de alquiler o pases para eventos.
• Agrupadores de Software, SaaS y Bienes Digitales: Agregación de licencias, complementos de servicio y niveles de suscripción antes del pago final.

Cuándo NO Usar

• Pagos de un solo artículo o de un solo clic: Para plataformas que evitan el carrito y van directamente al pago (por ejemplo, Apple Pay en PDP), use checkout-flow-optimization y product-detail-layout-system.
• Navegación principal de productos: Para mostrar tarjetas de artículos o resultados de listas, use card-ui-system y filter-and-sort-system.
• Comparación de productos lado a lado: Para comparar planes o características de productos distintos, use comparison-matrix-system o pricing-table-ui-system.
• Pedidos CSV de productos al por mayor: Para paneles de entrada administrativos tabulares altamente especializados, use data-table-ui-system.

Entradas

1. Tokens de Diseño de Comercio Electrónico: Escala tipográfica global, paleta de colores de marca (CTA principal, rojo de advertencia, verde de éxito), escala de espaciado fluida y elevaciones de sombra de superficie.
2. Metadatos de SKU de Producto: Reglas de relación de aspecto de imagen, restricciones de título, cadenas de variación (por ejemplo, "Color: Ónix / Tamaño: L"), precio unitario y estados de oferta/descuento.
3. Configuraciones de Lógica y Cumplimiento: Umbrales de envío gratuito, reglas de códigos de cupón, estimaciones de envío y límites de cantidad.
4. Datos de Catálogo de Ventas Cruzadas: Recomendaciones mapeadas por los artículos actuales del carrito para poblar módulos de compra impulsiva.
5. Límites de la Ventana Gráfica Móvil: Dimensiones del dispositivo, pautas de objetivos táctiles y restricciones del área segura del entorno.

Salidas

1. Cajón Deslizante de Minicarrito (Panel Lateral Deslizante): Plano de cuadrícula a nivel de componente para una visión general rápida del carrito y un pago rápido optimizado para móviles.
2. Página de Carrito Dedicada (Cuadrícula de Página Completa): Diseño espacial de 2 columnas (Lista Principal del Carrito + barra lateral de Resumen del Pedido) para revisiones profundas.
3. Arquitectura de Fila de Artículos del Carrito: Especificaciones detalladas para espaciado, diseños, controles de cantidad interactivos y elementos de eliminación dentro de una sola fila.
4. Barra de Progreso de Envío Gratuito y Promocional: Diseño espacial que muestra comentarios en tiempo real y umbrales de mensajes dinámicos.
5. Especificación de Enrutamiento A11y y Lector de Pantalla: Pautas detalladas para trampas de enfoque, orden de tabulación del teclado, tabindex móvil, anuncios aria-live y reglas de objetivos táctiles.

---

Flujo de Trabajo

1. Definir la Mecánica Espacial: Cajón de Minicarrito vs. Página de Carrito Dedicada

Un diseño optimizado debe soportar ambos formatos visuales de alto impacto dependiendo del tamaño de la pantalla y el contexto:

• El Cajón de Minicarrito (Escritorio y Móvil): Se desliza desde el borde derecho, cubriendo los 400px–460px derechos de la pantalla en escritorio y el 100% de la pantalla en móvil. Se superpone a la ventana gráfica principal detrás de un fondo semitransparente (background: rgba(0,0,0,0.5)). Use un diseño elástico que divida el cajón en tres áreas fijas:
  • Encabezado (Altura fija): Título del carrito (con recuento), botón de cerrar (✕) y rastreador de progreso de envío gratuito.
  • Artículos Desplazables (Crecimiento flexible/desplazamiento automático): La lista de artículos añadidos (overflow-y: auto;).
  • Pie de página (Altura fija, anclado): Subtotal, aviso de impuestos/envío, mensaje promocional y CTA de pago prominente.
• La Página de Carrito Dedicada (Escritorio >1024px): Utiliza un diseño de cuadrícula asimétrico de 2 columnas:
  • Columna Izquierda (Ocupa 60–65%): Contiene una vista limpia y alineada a la izquierda, de tipo tabular, de los artículos del carrito, incluyendo acciones de eliminación masiva y estados vacíos.
  • Columna Derecha (Ocupa 35–40%): Alberga la tarjeta de Resumen del Pedido pegajosa (position: sticky; top: var(--header-height);), que contiene cálculos de subtotal, envío estimado, entrada de código de cupón, insignias de pago dinámicas y el botón principal de Pago.

2. Diseñar la Arquitectura de la Fila de Artículos del Carrito

Cada fila en el carrito representa una jerarquía en miniatura. Estandarice el flujo de diseño dentro de un contenedor de ancho 100% usando CSS Flexbox o Grid:

+-------------------------------------------------------------+
| [Miniatura]  [Título del Artículo]             [Eliminar X] |
| (64x64px)    Tamaño: M / Color: Azul                       |
|                                                             |
|              [-] [ 1 ] [+]                     [Precio]     |
|              (Entrada de Cantidad)             $120.00      |
+-------------------------------------------------------------+

• Miniatura del Producto: Ancle usando un contenedor compacto de relación de aspecto fija (64x64px hasta un máximo de 96x96px) con border-radius: var(--radius-s) y object-fit: cover;. Asegúrese de que el texto alternativo esté presente pero sea descriptivo (por ejemplo, alt="Chaqueta de Lana en Azul Marino").
• Pila de Metadatos: Diseño vertical estándar que contiene:
  • Título: Negrita, oscuro neutral, vinculado al PDP.
  • Atributos de variante: Gris apagado, tamaño de fuente más pequeño (por ejemplo, 12px/0.75rem).
  • Precio unitario: Sutil si es un solo artículo, pero enfatizado si la cantidad es > 1.
• El Selector de Cantidad Accesible: Asegúrese de que los botones sean más grandes que el texto típico. Envuelva la entrada de valor en bordes visuales planos.
  • Botón de Disminución (-), Cuadro de entrada de Cantidad (texto o número), Botón de Incremento (+).
  • Asegúrese de que el botón de disminución se convierta en un icono de papelera de basura visible si la cantidad es 1, indicando que hacer clic en él eliminará el artículo del carrito.
• Precio del Artículo: Alinee a la parte inferior derecha de la fila. Si el artículo tiene descuento, renderice el precio original tachado en gris claro directamente adyacente al precio de oferta activo (renderizado en rojo de alto contraste o negrita de la marca).
• El Botón de Eliminar: Colocado en la esquina superior derecha de la fila. Utilice un aria-label explícito como aria-label="Eliminar [Nombre del Artículo] del carrito" para evitar que los lectores de pantalla anuncien solo "botón" o "X".

3. Construir el Motor de Progreso de Envío Gratuito y Promocional

Fomente valores de pedido promedio (AOV) más altos brindando a los usuarios comentarios instantáneos sobre los objetivos de cumplimiento:

• Barra de Progreso Visual: Use un contenedor horizontal (height: 8px) con extremos redondeados, estilizado en gris claro, que se llena de izquierda a derecha usando un color de acento brillante (por ejemplo, verde, azul) a medida que el subtotal del usuario se acerca al objetivo.
• Microcopia Dinámica: Escriba mensajes claros y orientados a la acción arriba o abajo de la barra:
  • Por debajo del umbral: "¡Te faltan $15.00 para el Envío Gratuito! [Añadir más]"
  • Por encima del umbral: "🎉 ¡Felicidades! Has desbloqueado el Envío Gratuito!"
• Ubicación del Diseño: Coloque el motor de progreso en la parte superior tanto del cajón de minicarrito como de la página principal del carrito para que permanezca visible sobre el pliegue.

4. Optimizar el CTA de Pago y el Resumen del Pedido

El ancla de pago es el punto focal de la experiencia del carrito de compras. Asegúrese de que se lea como un bloque sólido y confiable:

• Lista de Cálculos: Renderice el subtotal, los descuentos aplicados (texto verde con insignia de código promocional, por ejemplo, SUMMER20 [x]), el envío estimado (o "Calculado en el pago") y el total estimado final utilizando diseños de lista de clave-valor con líneas de puntos claras o cuadrículas alineadas.
• Botón de Pago Principal: Alto contraste, ancho completo (100%), con tipografía en negrita. Debe mostrar indicadores de carga claros al hacer clic (por ejemplo, convertir el texto de la etiqueta "Pago Seguro" a un spinner) para evitar dobles clics.
• Insignias de Pago Admitidas: Insignias de iconos de pago en escala de grises apagados o color estándar (Visa, Mastercard, Amex, PayPal, Apple Pay, Klarna) directamente debajo del botón de pago para generar confianza.

5. Crear Adaptación de Diseño Fluida y Responsiva

Los carritos de compras se usan mucho en dispositivos móviles. Diseñe los puntos de interrupción con extrema precisión:

• Superposición Móvil del Minicarrito: En un ancho de ventana gráfica <768px, fuerce que el minicarrito abarque 100vw. Coloque el activador de cierre explícitamente en un objetivo grande y fácil de tocar en la parte superior izquierda o superior derecha.
• Apilamiento de Artículos en la Página del Carrito: En ventanas gráficas móviles, la fila horizontal se colapsa:
  • La miniatura del producto y el título se sientan uno al lado del otro.
  • El Selector de Cantidad y el Precio se colapsan debajo del título, con la cantidad alineada a la izquierda y el precio alineado a la derecha en el mismo eje horizontal.
• Cajón de Pago Móvil Fijo: En las páginas de carrito móviles, implemente un pie de página fijo en la parte inferior que ancle el subtotal y el CTA de pago de forma segura por encima de los elementos de la IU del navegador, utilizando padding-bottom: env(safe-area-inset-bottom);.

6. Establecer Enrutamientos de Enfoque de Teclado y Disparadores ARIA Live

Un carrito inaccesible impide que los usuarios de lectores de pantalla y solo teclado finalicen las compras.

• Trampa de Enfoque del Minicarrito: Cuando se abre el cajón del minicarrito:
  1. Active el enfoque inmediatamente al primer elemento interactivo (generalmente el botón Cerrar o el título del primer artículo).
  2. Implemente una trampa de enfoque, evitando que los usuarios tabulen a elementos ocultos detrás del fondo.
  3. Atrape la tecla de escape (Esc) para cerrar el cajón. Devuelva el enfoque limpiamente al botón activador que originalmente abrió el carrito (por ejemplo, el Icono del Carrito en el Encabezado).
• Anuncios Dinámicos (aria-live): Alternar la cantidad, eliminar un artículo o aplicar un cupón debe comunicar instantáneamente las actualizaciones a través de un elemento aria-live="polite" invisible. Los lectores de pantalla deben anunciar: "Cantidad de Chaqueta Ónix actualizada a dos. Subtotal actualizado a doscientos cuarenta dólares."
• Anillos de Enfoque: Evite los contornos estándar del navegador; implemente un indicador de enfoque personalizado, de alto contraste y sin recortar alrededor de todos los controles interactivos en el carrito.

---

Reglas de Decisión

Disparadores de Página de Carrito Dedicada vs. Cajón de Minicarrito

Evento Desencadenante	Patrón de Respuesta UX Óptimo	Justificación del Diseño
El usuario añade un artículo desde el PDP	Abrir deslizando el Cajón de Minicarrito	Confirma la acción de añadir al carrito, actualiza el subtotal al instante, proporciona comentarios inmediatos, pero mantiene al usuario en el PDP para seguir comprando.
El usuario hace clic en el icono global del carrito en el encabezado	Alternar el Cajón de Minicarrito (si el recuento de artículos > 0) / Navegar a la Página de Carrito (Opcional)	Acceso rápido para editar la lista de artículos sin cargar una nueva página. Si el catálogo es altamente complejo (por ejemplo, cientos de piezas B2B), navegue directamente a la Página de Carrito Dedicada.
El carrito está vacío (0 artículos)	Mostrar Estado Vacío en Línea con CTAs	En lugar de una página en blanco o cerrar el cajón, renderice un mensaje claro (por ejemplo, "Tu carrito está actualmente vacío") acompañado de 3 a 4 enlaces de compras principales basados en categorías objetivo.

Selección de Estilo de Entrada de Cantidad

Estilo de Interfaz	Aplicación del Caso de Uso	Justificación del Diseño
Pulsador de Botones [-] [ 1 ] [+]	DTC, Minorista, Ropa, comercio electrónico estándar	Interacción de un solo toque más fácil en móvil, evita errores de escritura, incremento simple.
Campo de Entrada de Texto Nativo	Hojas de pedido de catálogo B2B pesado, cantidades al por mayor	Permite al usuario escribir números grandes arbitrarios (por ejemplo, 150) directamente en lugar de hacer clic 150 veces.
Menú Desplegable Estándar (Cant: 1) v	Artículos de alto valor, electrónica, suscripciones con límite de cantidad única	Limita las compras a escalas de cantidad preestablecidas (por ejemplo, máx. 10) y evita solicitudes de inventario de alto recuento no controladas.

---

Restricciones

• Accesibilidad (WCAG AA Mínimo):
  • SC 2.4.7 Enfoque Visible: El cajón del carrito debe mantener contornos de enfoque altamente visibles en los botones de cierre, anclas de título, pulsadores y entradas.
  • SC 2.5.8 Tamaño del Objetivo: Los objetivos táctiles para los botones de incremento (+) y decremento (-), papeleras de eliminación y enlaces de eliminación de promociones deben tener al menos 24x24px en escritorio y 44x44px en ventanas gráficas móviles.
  • SC 1.1.1 Contenido No Textual: Cada imagen debe tener un texto alternativo claro. Los fondos decorativos dentro de los estados vacíos deben ignorarse (role="presentation" o alt="").
• Prevención de Cambio de Diseño Acumulativo (CLS):
  • Estandarice las alturas de los artículos o reserve alturas mínimas de estado esqueleto durante los estados de carga.
  • Los cálculos promocionales dinámicos no deben empujar el botón CTA de pago fuera de la pantalla o del pliegue abruptamente.
• Bloqueo de Desplazamiento de Superposición Dinámica:
  • Abrir la superposición del cajón de minicarrito debe bloquear el desplazamiento de fondo en el elemento del cuerpo principal (overflow: hidden; aplicado a <body>). Esto evita el doble desplazamiento y los artefactos de navegación saltarina.

---

Patrones de Falla Comunes

• El Cierre Fantasma del Carrito: Cerrar el cajón o hacer clic fuera de él restablece completamente el índice de enfoque, dejando caer a los usuarios de teclado de vuelta a la parte superior de la página subyacente y obligándolos a tabular todo de nuevo.
• El Objetivo de Eliminación Críptico: Diseñar iconos de papelera o activadores de eliminación "X" como símbolos de texto sin etiquetar, lo que hace que los lectores de pantalla emitan "botón" o "botón sin etiquetar", dejando a los usuarios incapaces de podar su carrito.
• La Deriva de Actualización Retrasada: Permitir un retraso entre hacer clic en + y actualizar el precio sin mostrar un spinner de carga. Si el usuario hace clic en + tres veces rápidamente, el precio se queda atrás de la acción y conduce a totales inexactos.
• El Teclado Móvil Bloqueado: Centrar una entrada de cupón en la página de carrito dedicada en una pila de diseño que se bloquea por completo o se empuja fuera de la pantalla visible cuando aparece el teclado del dispositivo móvil.