Sistema de Carrossel e Slider

O que Sistema de Carrossel e Slider faz?

Propósito

O Sistema de Carrossel e Slider fornece uma metodologia para projetar containers de rolagem horizontal que permitem aos usuários navegar por uma coleção de conteúdo relacionado (cartões, imagens, depoimentos) sem consumir espaço vertical excessivo. Embora os carrosséis sejam frequentemente criticados por baixo engajamento, uma abordagem sistemática focada em affordances, performance percebida e controle do usuário garante que a descoberta horizontal seja intuitiva, acessível e de alto impacto.

Casos de Uso

• Descoberta de Produtos: Navegar por "Produtos Relacionados" ou "Novidades" em e-commerce.
• Prova Social: Exibir uma sequência de depoimentos de clientes ou estudos de caso.
• Galeria de Mídia: Coleções de fotos ou vídeos de alta densidade dentro de um viewport limitado.
• Onboarding/Tours de Funcionalidades: Guiar os usuários por uma sequência linear de propostas de valor.
• Widgets de Dashboard: Gerenciar múltiplos resumos de dados em uma linha horizontal para preservar o ritmo da página.

Quando NÃO Usar

• Etapas Sequenciais Críticas: Se o usuário precisa ver todos os itens para completar uma tarefa, use uma pilha vertical ou grade para garantir que nada seja perdido.
• Pequenos Volumes de Conteúdo: Se você tem apenas 2 ou 3 itens, uma grade padrão é mais eficiente e requer menos interação.
• Tipos de Conteúdo Variados: Não misture diferentes tipos de cartões (ex.: um artigo ao lado de um produto) em um único carrossel; a consistência é fundamental para a escaneabilidade.
• Sliders de Marketing de Baixo Valor: Evite usar grandes "Carrosséis Hero" para promoções não relacionadas que os usuários normalmente ignoram (Cegueira de Banner).

Entradas

1. Arquétipo de Conteúdo: O que está sendo rolado? (ex.: cartões card-ui-system, imagens ou blocos de texto).
2. Tamanho do Catálogo: Quantos itens existem na coleção total?
3. Contexto do Container: É uma seção de largura total ou contida dentro de uma coluna de grade?
4. Requisitos de Interação: Precisa de reprodução automática, loop infinito ou rolagem apenas manual?
5. Tokens da Marca: Sistemas de espaçamento, tipografia e cor para controles e indicadores.

Saídas

1. Especificação da Anatomia do Carrossel: Definições visuais para o Container, Trilha, Navegação (Setas) e Paginação (Marcadores).
2. Estratégia de Revelação: Regras definidas de "Revelação Parcial de Item" para sinalizar conteúdo oculto horizontalmente.
3. Mapeamento Responsivo: Regras para itens-por-visualização em Mobile, Tablet e Desktop.
4. Blueprint de Acessibilidade: Rótulos ARIA, gerenciamento de foco e especificações de controle de movimento.

Fluxo de Trabalho

1. Determinar a Intenção de Descoberta

Identifique como o usuário deve interagir com os itens:

• Linear: O usuário move-se pelos itens um por um (ex.: Onboarding).
• Exploratório: O usuário pode pular ou folhear (ex.: Grade de Produtos).
• Ambiente: O conteúdo se move automaticamente (ex.: Marquee de logotipos).

2. Estabelecer o "Padrão de Revelação"

Sinalize ao usuário que há mais conteúdo à direita:

• Revelação Parcial: Garanta que o próximo item esteja parcialmente visível (geralmente 10-20% transbordando a borda do container). Este é o indicador visual mais forte de capacidade de rolagem.
• Efeito de Desvanecimento: Aplique um degradê sutil nas bordas do container.

3. Selecionar as Affordances de Navegação

Forneça controles claros para o movimento:

• Setas (Direcionais): Coloque no centro vertical da trilha (dentro ou fora do container). Melhor para navegação de alta densidade.
• Paginação (Marcadores/Pontos): Coloque abaixo da trilha. Melhor para sequências curtas (3-7 itens) para mostrar progresso.
• Barra de Rolagem: Uma barra de progresso visual na parte inferior. Melhor para coleções muito grandes.

4. Definir a Lógica de Colunas Responsivas

Mapeie quantos itens ficam visíveis de uma vez:

• Desktop: 3–5 itens por visualização.
• Tablet: 2–3 itens por visualização.
• Mobile: 1,2 itens por visualização (1 item completo + revelação parcial).

5. Implementar Controles e Acessibilidade

• Suporte a Teclado: Os usuários devem poder usar as teclas ArrowLeft e ArrowRight para navegar entre os itens; Tab deve mover para o próximo controle focalizável, não entre cada slide.
• Controle de Movimento: Se usar reprodução automática, forneça um botão visível de "Pausar" e pare a animação ao passar o mouse, focar e sempre que prefers-reduced-motion: reduce estiver definido (não confie apenas em hover/foco).
• Funções ARIA: Siga o padrão ARIA APG para carrossel — role="region" com um aria-label no container, aria-roledescription="carousel" e aria-live="polite" (ou "off" durante reprodução automática) na trilha de slides para que os leitores de tela anunciem mudanças sem sobrecarregar.
• Visibilidade do Foco: Garanta que o indicador de foco nas setas, pontos e conteúdo do slide nunca seja obscurecido por slides adjacentes ou por uma borda de revelação fixa (WCAG 2.2 SC 2.4.11).

Regras de Decisão

• A Regra da "Revelação Parcial": Sempre mostre uma pequena parte do próximo item no mobile para indicar rolagem horizontal sem depender de setas.
• Setas vs. Marcadores: Use Setas se você tiver mais de 5 itens. Use Marcadores apenas se o número total for pequeno (3-7) e mostrar progresso for valioso.
• Lógica de Loop: Use "Loop Infinito" apenas para descoberta ambiente (como logotipos). Para conteúdo funcional (como produtos), use um estado de "Fim da Trilha" onde a seta direita fica desabilitada.
• Scroll-Snap: Sempre use scroll-snap-type: x mandatory para garantir que os itens se alinhem perfeitamente às bordas do container após um deslize ou clique.

Restrições

• Acessibilidade: Deve suportar prefers-reduced-motion. Todos os controles interativos (setas/pontos) devem atender ao WCAG 2.2 SC 2.5.8 (tamanho alvo mínimo de 24x24px, 44x44px preferido para setas primárias).
• Responsividade: Os itens devem ser fluidos. O container do carrossel nunca deve causar transbordamento horizontal da página; o transbordamento deve ser contido dentro do componente. Use clamp() para largura/espaçamento dos itens para que a quantidade de itens por visualização escale suavemente em vez de saltar em pontos de quebra fixos.
• Performance Percebida: Use skeleton-state-system para itens que ainda não foram carregados ou estão fora da tela.

Padrões Comuns de Falha

• O Carrossel "Invisível": Sem revelação parcial e sem setas, fazendo o componente parecer uma grade estática e quebrada.
• A "Armadilha da Reprodução Automática": Conteúdo girando muito rápido para os usuários lerem, ou sem a opção de pará-lo.
• Snap Quebrado: Itens que param no meio do caminho entre viewports, cortando o conteúdo.
• Estados de Interação Ausentes: Setas que não têm estados de hover/foco ou que não parecem desabilitadas quando o fim da trilha é alcançado.
• Transbordamento Mobile: Um carrossel que expande a largura de toda a página, fazendo com que os usuários se "percam" ao rolar horizontalmente.

Critérios de Validação

• Uma "Revelação Parcial" ou indicador visual claro de conteúdo oculto está presente.
• Os controles de navegação (Setas/Marcadores) atendem ao WCAG 2.2 SC 2.5.8 (área de toque mínima de 24x24px).
• A navegação por teclado (Setas) e o gerenciamento de foco estão implementados, e os indicadores de foco nunca estão obscurecidos (WCAG 2.2 SC 2.4.11).
• scroll-snap é usado para garantir que os itens se alinhem à grade.
• A reprodução automática (se usada) pode ser pausada pelo usuário e para automaticamente sob prefers-reduced-motion.
• Contagens de itens responsivos são definidas para todos os principais pontos de quebra.
• Marcos e rótulos ARIA estão corretamente aplicados para leitores de tela.