Carrossel (carousel)

Componente que alterna itens num mesmo espaço, por seta, swipe ou tempo. Útil em alguns casos, problemático em outros.

Hard

O que é

Carrossel é um componente que cicla entre vários itens dentro de uma área fixa. A pessoa avança por seta, swipe, pontinhos ou por tempo automático, e cada item ocupa a área enquanto os outros ficam escondidos ou aparecem so em parte.

A tentação do time costuma ser clara: enfiar várias mensagens num mesmo lugar nobre da tela. O problema é o que a evidência de uso mostra, porque na vitrine de home a maioria das pessoas vê so o primeiro slide. Por isso, pra hero de promoção, o carrossel costuma decepcionar.

Mesmo assim, ele funciona bem em alguns contextos: galeria de fotos de um produto já escolhido, fileiras horizontais de catálogo (como na Netflix, onde rolar de lado é o padrão esperado) e sequência de depoimentos. Quando você for usar, o cuidado maior é a acessibilidade, porque autoplay precisa de pausa, navegação por teclado e cada slide com significado próprio.

Em uma frase

Carrossel de home não rende, quase ninguém passa do primeiro slide, vamos escolher uma promoção so.

A pergunta que ele responde

Vale colocar várias mensagens girando num carrossel no topo da home?

Quando usar

Em galeria de imagens de um item já escolhido, fileira horizontal de catálogo e sequência de depoimentos.

Como não usar

O erro é usar o carrossel como hero rotativo de home contando que a pessoa vai ver todos os slides, ou deixar o autoplay sem pausa e sem suporte a teclado.

Na prática

Imagine o time querendo 5 promoções no topo da home e colocando tudo num carrossel. Os dados mostram que quase ninguém passa do primeiro slide, e as outras 4 promoções acabam virando invisíveis.

Não confunda com

Vale entender que o carrossel costuma ser uma má ideia pra hero de home, porque ali a maioria das pessoas so vê o primeiro slide. Ele rende bem em galeria de produto e em fileira de catálogo, mas não em vitrine rotativa de promoções. A diferença está em se a pessoa espera deslizar entre itens ou se ela so olha o que está na frente.

D

Em inglês

Carousels

Pronúncia

kâ-ra-sél

Também chamado de

carrossel, carousel, slider

Origem

n/a

Fonte

Saiba mais

Nielsen Norman Group, artigo sobre eficácia de carrosséis