Carrossel no e-commerce: quando usar e como desenhar bem

Use carrossel quando os itens são parecidos entre si e nenhum deles precisa ser visto por todo mundo. Para uma oferta que importa, um banner fixo ou uma grade funciona melhor, porque muita gente rola a página e passa direto pelo carrossel. Se ele ficar, mantenha poucos itens, mostre que existe mais conteúdo, aceite o gesto de deslizar e não deixe girar sozinho.

Por que o carrossel aparece em toda loja

O guia de carrosséis do Nielsen Norman Group (em inglês) aponta a maior vantagem: vários conteúdos dividem o mesmo espaço nobre da home. Isso ajuda a resolver a disputa interna sobre qual campanha merece o topo. O mesmo guia aponta o maior problema: as pessoas costumam rolar direto e perder tudo o que não está no primeiro quadro.

Há um segundo risco no mesmo texto. Quem desenha pensa no conjunto de imagens, mas quem visita vê só uma. Se essa única imagem tiver pouca relação com o negócio, a pessoa sai com uma ideia errada da loja.

O guia do NN/g (em inglês) sugere considerar uma imagem principal fixa no lugar do carrossel. Com uma imagem só, a escolha tende a ser mais forte, e o menu do site deixa de disputar atenção com algo que se mexe. O guia também recomenda repetir o conteúdo importante do carrossel em outro ponto da navegação.

Na prática, a pergunta é direta: se a pessoa vir só o primeiro quadro, a loja perde alguma coisa? Se perde, esse conteúdo não pode depender do carrossel.

Quantos itens cabem

O guia (em inglês) recomenda cinco quadros ou menos. Acima disso, fica difícil lembrar o que já foi visto e achar um item de novo.

O artigo do NN/g sobre carrosséis no celular (em inglês) olha o limite por outro lado. A maioria das pessoas para depois de ver três ou quatro páginas do carrossel. Por isso, o último item deveria estar a três ou quatro toques ou deslizes de distância. Quando cada página mostra vários produtos, cabem mais itens sem quebrar essa conta.

Com muitos itens, o mesmo artigo indica trocar o carrossel por uma lista, em que a pessoa chega direto a qualquer produto.

Mostrar que existe mais

O artigo sobre celular (em inglês) separa sinais fortes de sinais fracos. Os pontinhos embaixo da imagem são fracos, porque são pequenos e passam despercebidos. A imagem cortada na borda da tela é um sinal forte: a pessoa entende na hora que há conteúdo além dela.

Outras regras do guia geral (em inglês):

mostre quantos quadros existem e em qual deles a pessoa está;
deixe os controles dentro do carrossel, e não abaixo dele;
faça botões grandes o bastante para ver e clicar, mesmo sobre uma foto carregada;
se houver um botão por quadro, faça cada um diferente e fiel ao quadro que abre.

O primeiro item pesa mais que os outros. O artigo sobre celular (em inglês) compara esse item a uma carta de recomendação do resto: se ele não interessa, a pessoa ignora o carrossel inteiro. Coloque primeiro o que mais interessa ao público e mantenha os itens parecidos entre si.

Deslizar no celular

No celular, as pessoas deslizam o dedo para ver o próximo item. O mesmo artigo (em inglês) trata como falha um carrossel que não aceita esse gesto. Ele também alerta para um conflito no iPhone: no Safari, deslizar a partir da borda esquerda volta para a página anterior. Uma margem em branco em volta do carrossel ajuda a pessoa a deslizar longe da borda.

Por que não girar sozinho

O artigo de Jakob Nielsen sobre rotação automática (em inglês) conta um teste feito no Reino Unido. A participante procurava ofertas de máquina de lavar no site da Siemens. A oferta estava no maior bloco da home, mas o bloco trocava de painel a cada cinco segundos. Ela desistiu e concluiu que não havia oferta nenhuma. Nesse exemplo, a promoção ficava visível só 20% do tempo.

O mesmo texto lista outros custos da rotação. Quem tem dificuldade motora perde o clique antes de o painel sumir. Quem lê devagar não termina o texto. E o que se mexe parece anúncio, então tende a ser ignorado.

O guia geral (em inglês) aceita a rotação com cuidado. Se for usar, calcule o tempo de cada quadro pela leitura, com a referência de três palavras por segundo. No celular, o guia pede para não girar: a página fica mais lenta, e a pessoa já rolou para baixo quando o quadro muda.

O que a acessibilidade exige

A tradução autorizada das WCAG 2.2, as diretrizes de acessibilidade do W3C, traz o critério 2.2.2, de nível A. Conteúdo que se move sozinho, dura mais de cinco segundos e aparece junto de outro conteúdo precisa de um jeito de pausar, parar ou ocultar. Um carrossel com rotação automática se encaixa exatamente nesse caso.

O padrão de carrossel do guia de práticas ARIA do W3C (em inglês) detalha o mínimo para quem usa teclado ou leitor de tela. ARIA é o conjunto de atributos que descreve um componente para a tecnologia assistiva. O padrão pede:

botões de anterior e de próximo;
um botão para parar e retomar a rotação, como primeiro item focável dentro do carrossel;
rotação que para quando o foco do teclado entra no carrossel e só volta se a pessoa pedir;
rotação que para enquanto o mouse está sobre o carrossel.

O mesmo padrão explica o risco para quem usa leitor de tela. Se o slide troca sem aviso, a pessoa ouve um item do slide 1, e o comando seguinte já cai no slide 2, sem saber que o contexto mudou.

Como aparece na Le Biscuit

No case da Le Biscuit, a loja desktop tem quatro blocos: a barra promocional, o carrossel de categorias, a grade de ofertas e o carrossel de mais vendidos. A loja vende milhares de produtos de casa e lifestyle, e a vitrine precisava aguentar o calendário de merchandising sem quebrar.

Nesse desenho, as ofertas ficam numa grade, onde todas aparecem ao mesmo tempo. Os carrosséis ficam com conjuntos de itens parecidos entre si: categorias de um lado, mais vendidos do outro. É a divisão que as fontes acima sugerem. O que precisa ser visto não depende de um quadro girar, e o carrossel guarda o que a pessoa explora se quiser. Os blocos vêm de um design system de componentes ligado aos esquemas de conteúdo da VTEX IO, assunto do texto sobre VTEX IO headless.

Onde as fontes divergem

Rotação automática. O guia geral (em inglês) aceita girar sozinho com tempo bem calculado e ciclo contínuo. O artigo de Jakob Nielsen (em inglês) diz que carrossel só deveria mudar quando a pessoa pede.
Quantos itens. O guia geral (em inglês) fala em cinco quadros ou menos. O artigo sobre celular (em inglês) conta passos até o último item, três ou quatro, e aceita mais itens quando cada página mostra vários.
O valor do topo. O guia geral (em inglês) cita como vantagem pôr mais conteúdo perto do topo da página. O mesmo guia e o artigo sobre celular mostram que muita gente rola direto e não vê nada além do primeiro quadro.

O erro comum

O erro comum é usar o carrossel para acomodar todas as campanhas que disputam a home. Ele resolve a briga interna e esconde o problema: só o primeiro quadro tem chance real de ser visto. Decida antes qual conteúdo precisa ser visto e dê a ele um lugar fixo. Deixe o carrossel para o que a pessoa pode explorar se tiver interesse.