Sistema de Carrusel y Control Deslizante

¿Qué hace Sistema de Carrusel y Control Deslizante?

Propósito

El Sistema de Carrusel y Control Deslizante proporciona una metodología para diseñar contenedores de desplazamiento horizontal que permiten a los usuarios navegar colecciones de contenido relacionado (tarjetas, imágenes, testimonios) sin consumir un espacio vertical excesivo. Aunque los carruseles suelen ser criticados por su baja interacción, un enfoque sistemático se centra en las señales de navegación, el rendimiento percibido y el control del usuario, garantizando que el descubrimiento horizontal sea intuitivo, accesible y de alto impacto.

Casos de uso

• Descubrimiento de productos: Navegar por "Productos relacionados" o "Novedades" en comercio electrónico.
• Prueba social: Mostrar una secuencia de testimonios de clientes o casos de estudio.
• Galerías multimedia: Colecciones de fotos o vídeos de alta densidad dentro de un viewport limitado.
• Onboarding / Tours de funciones: Guiar a los usuarios a través de una secuencia lineal de propuestas de valor.
• Widgets de panel de control: Gestionar múltiples resúmenes de datos en una fila horizontal para preservar el ritmo de la página.

Cuándo NO usarlo

• Pasos secuenciales críticos: Si un usuario debe ver todos los elementos para completar una tarea, utiliza una pila vertical o una cuadrícula para asegurar que no se pierda nada.
• Volúmenes de contenido pequeños: Si solo tienes 2 o 3 elementos, una cuadrícula estándar es más eficiente y requiere menos interacción.
• Tipos de contenido variados: No mezcles diferentes tipos de tarjetas (por ejemplo, un artículo junto a un producto) en un mismo carrusel; la consistencia es clave para la capacidad de escaneo.
• Controles deslizantes de marketing de bajo valor: Evita usar "Carruseles Hero" grandes para promociones no relacionadas que los usuarios suelen ignorar (Ceguera a los Banners).

Entradas

1. Arquetipo de contenido: ¿Qué se está desplazando? (por ejemplo, tarjetas del sistema-de-interfaz-de-tarjetas, imágenes o bloques de texto).
2. Tamaño del catálogo: ¿Cuántos elementos hay en la colección total?
3. Contexto del contenedor: ¿Es una sección de ancho completo o está contenido dentro de una columna de cuadrícula?
4. Requisitos de interacción: ¿Necesita reproducción automática, bucle infinito o solo desplazamiento manual?
5. Tokens de marca: Sistemas de espaciado, tipografía y color para controles e indicadores.

Salidas

1. Especificación de anatomía del carrusel: Definiciones visuales para el Contenedor, la Pista, la Navegación (Flechas) y la Paginación (Puntos).
2. Estrategia de revelación: Reglas definidas de "Revelación Parcial de Elementos" para señalar contenido oculto horizontalmente.
3. Mapeo responsive: Reglas para elementos por vista en Móvil, Tablet y Escritorio.
4. Plano de accesibilidad: Etiquetas ARIA, gestión del foco y especificaciones de control de movimiento.

Flujo de trabajo

1. Determinar la intención de descubrimiento

Identifica cómo debe interactuar el usuario con los elementos:

• Lineal: El usuario avanza por los elementos uno por uno (por ejemplo, Onboarding).
• Exploratorio: El usuario puede saltar o hojear (por ejemplo, Cuadrícula de productos).
• Ambiental: El contenido se mueve automáticamente (por ejemplo, Marquesina de logotipos).

2. Establecer el "Patrón de revelación"

Señala al usuario que hay más contenido a la derecha:

• Revelación parcial: Asegúrate de que el elemento "siguiente" sea parcialmente visible (generalmente un 10-20% sobresaliendo del borde del contenedor). Esta es la señal visual más fuerte de capacidad de desplazamiento.
• Efecto de desvanecimiento: Aplica un degradado sutil en los bordes del contenedor.

3. Seleccionar las señales de navegación

Proporciona controles claros para el movimiento:

• Flechas (direccionales): Colócalas en el centro vertical de la pista (dentro o fuera del contenedor). Ideal para navegación de alta densidad.
• Paginación (puntos/viñetas): Colócala debajo de la pista. Ideal para secuencias cortas (3-7 elementos) para mostrar el progreso.
• Barra de desplazamiento: Una barra de progreso visual en la parte inferior. Ideal para colecciones muy grandes.

4. Definir la lógica de columnas responsive

Mapea cuántos elementos son visibles a la vez:

• Escritorio: 3–5 elementos por vista.
• Tablet: 2–3 elementos por vista.
• Móvil: 1.2 elementos por vista (1 elemento completo + revelación parcial).

5. Implementar controles y accesibilidad

• Soporte de teclado: Los usuarios deben poder usar FlechaIzquierda y FlechaDerecha para moverse entre los elementos; Tabulador debe moverse al siguiente control enfocable, no entre cada diapositiva.
• Control de movimiento: Si se usa reproducción automática, proporciona un botón visible de "Pausa" y detén la animación al pasar el ratón, al enfocar y siempre que se establezca prefers-reduced-motion: reduce (no te bases únicamente en pasar el ratón/enfocar).
• Roles ARIA: Sigue el patrón de carrusel ARIA APG: role="region" con un aria-label en el contenedor, aria-roledescription="carousel" y aria-live="polite" (o "off" durante la reproducción automática) en la pista de diapositivas para que los lectores de pantalla anuncien los cambios sin abrumarse.
• Visibilidad del foco: Asegúrate de que el indicador de foco en flechas, puntos y contenido de las diapositivas nunca esté oscurecido por diapositivas adyacentes o un borde de revelación fijo (WCAG 2.2 SC 2.4.11).

Reglas de decisión

• La regla de "Revelación Parcial": Siempre muestra un fragmento del siguiente elemento en móvil para indicar el desplazamiento horizontal sin depender de las flechas.
• Flechas vs. Puntos: Usa Flechas si tienes más de 5 elementos. Usa Puntos solo si el recuento total es pequeño (3-7) y mostrar el progreso es valioso.
• Lógica de bucle: Usa "Bucle Infinito" solo para descubrimiento ambiental (como logotipos). Para contenido funcional (como productos), usa un estado "Fin de Pista" donde la flecha derecha se deshabilite.
• Desplazamiento con ajuste: Siempre usa scroll-snap-type: x mandatory para asegurar que los elementos se alineen perfectamente con los bordes del contenedor después de un deslizamiento o clic.

Restricciones

• Accesibilidad: Debe soportar prefers-reduced-motion. Todos los controles interactivos (flechas/puntos) deben cumplir con WCAG 2.2 SC 2.5.8 (tamaño mínimo de objetivo de 24x24px, preferido 44x44px para flechas primarias).
• Responsividad: Los elementos deben ser fluidos. El contenedor del carrusel nunca debe causar desbordamiento horizontal de la página; el desbordamiento debe estar contenido dentro del componente. Usa clamp() para el ancho/espacio de los elementos para que los elementos por vista se escalen suavemente en lugar de saltar en puntos de interrupción fijos.
• Rendimiento percibido: Usa sistema-de-estado-esqueleto para elementos que aún no se han cargado o están fuera de pantalla.

Patrones de fallo comunes

• El "Carrusel Invisible": Sin revelación parcial ni flechas, el componente parece una cuadrícula estática y rota.
• La "Trampa de Reproducción Automática": El contenido gira demasiado rápido para que los usuarios lo lean, o no proporciona forma de detenerlo.
• Ajuste roto: Los elementos se detienen a medio camino entre viewports, cortando el contenido.
• Estados de interacción faltantes: Flechas que no tienen estados al pasar el ratón/enfocar, o que no parecen deshabilitadas cuando se llega al final de la pista.
• Desbordamiento en móvil: Un carrusel que expande el ancho de toda la página, haciendo que los usuarios se "pierdan" al desplazarse horizontalmente.

Criterios de validación

• Hay una "Revelación Parcial" o un indicador visual claro de contenido oculto.
• Los controles de navegación (Flechas/Puntos) cumplen con WCAG 2.2 SC 2.5.8 (área táctil mínima de 24x24px).
• La navegación por teclado (Flechas) y la gestión del foco están implementadas, y los indicadores de foco nunca están oscurecidos (WCAG 2.2 SC 2.4.11).
• Se utiliza scroll-snap para asegurar que los elementos se alineen con la cuadrícula.
• La reproducción automática (si se usa) puede ser pausada por el usuario y se detiene automáticamente bajo prefers-reduced-motion.
• Los recuentos de elementos responsive están definidos para todos los puntos de interrupción principales.
• Los puntos de referencia y etiquetas ARIA se aplican correctamente para los lectores de pantalla.