Sliders do carrossel do site: por que, como e quando usá-los (incluindo 13 exemplos)

vamos falar sobre carrosséis do site, também conhecidos como sliders, também conhecidos como slideshows, também conhecidos como galerias.

parece que toda a internet tem sua própria variação, mas coletivamente todos nós queremos dizer que o elemento de design com o conteúdo em movimento e muitas vezes, exibe três pequenos pontos na parte inferior.

quando se trata de carrosséis, você está na equipe 👏 ou na equipe 🙅. A primeira equipe normalmente inclui os clientes, a segunda equipe os web designers.

aqui no Ycode, somos a Suíça. Acreditamos que os carrosséis podem ser as peças centrais que tornam o seu web design mais atraente, mas que eles também têm o potencial de arrastar a usabilidade do seu site para baixo.

neste artigo, veremos as melhores práticas do carrossel (e o que evitar). Como os carrosséis podem ser usados para muitas ocasiões, mostraremos diferentes exemplos de Controles deslizantes bem feitos.

práticas recomendadas de design de carrossel (ou principalmente, o que não fazer)

embora sejam usadas em muitos sites, os designs de carrossel podem facilmente perder a marca. Existem algumas boas razões para isso. Vamos começar com algumas coisas a evitar Antes de falarmos sobre quais práticas recomendadas do carrossel você deve usar.

Don Não: erros de carrossel a evitar

1. conteúdo: quando um carrossel quer fazer muito em pouco tempo, pode fazer com que os olhos dos visitantes do site girem. O texto não pode ser lido corretamente, as informações são perdidas e os visitantes perdem o interesse.

2. Design: se um controle deslizante for mal projetado e não se misturar ao design do seu site, ele pode ser confundido com um anúncio. Como resultado, as pessoas rolam para a direita após o conteúdo. É chamado de cegueira de banner, um fenômeno de Web design onde as pessoas ignoram conteúdo que se assemelha a um anúncio—consciente ou inconscientemente.

3. SEO: do ponto de vista de SEO, evite vários cabeçalhos H1 se você usar controles deslizantes como a primeira coisa na página. Cada página da web deve ter um H1 em seu código HTML. Se você usar vários H1S por causa dos diferentes slides, o Google pode estar confuso sobre quais palavras-chave são as mais importantes para essa página da web. Além disso, a estrutura do site pode não ser clara. Ambos os fatores podem afetar negativamente sua classificação.

4. móvel: para dispositivos móveis, é melhor ir para controles deslizantes manuais. Certifique-se de que os gestos sejam suportados (por exemplo, usuários móveis deslizando para mostrar o próximo slide) e que as setas sejam claramente mostradas e grandes o suficiente para pressionar. Se seus slides contiverem texto, verifique se ele é legível em telas móveis.

5. rotação: Com nossa atenção limitada nos dias de hoje, é difícil manter o interesse do usuário por mais de alguns segundos. Como todos temos Lugares para estar, mantenha o controle deslizante baixo (menos de cinco) e dê aos visitantes a oportunidade de controlar o carrossel mostrando os controles deslizantes. Isso garante que as pessoas não tenham que sentar e esperar pelo próximo slide.

👍 Do’s: melhores práticas do carrossel

1. mantenha cada slide simples para que as informações possam ser digeridas em segundos.

2. faça o design se misturar com o resto do seu site.

3. deixe as pessoas controlarem a rotação com setas claras.

4. tenha tempo suficiente entre slides (5-10 segundos), ou melhor ainda, abandone a reprodução automática completamente.

5. menos é mais (tanto no design quanto na quantidade de slides).

6. antes de inserir um carrossel, pergunte: isso adicionará mais valor do que o conteúdo estático?

tendo dúvidas?

em caso de dúvida, teste as duas opções e veja qual opção gera uma taxa de conversão mais alta. Muitas vezes, os clientes pedem apresentações de slides porque não estão claros sobre a mensagem que desejam promover em primeiro lugar. Por que não mostrar tudo? Eles pensam.

se for esse o caso, o trabalho é criar uma mensagem mais focada—não usar um controle deslizante. Ou, escolha o importante USP (Ponto de venda exclusivo) e mencione os outros mais abaixo na página. As pessoas são mais propensas a rolar do que folhear seus slides.

se você decidir que é um inferno sim, escolha cada slide intencionalmente. Não basta adicionar todos os seus novos blogs ou produtos, mas escolha cuidadosamente o conteúdo mais importante que pode gerar mais interatividade dos usuários.

13 exemplos de carrossel de sites

agora que você sabe o que não fazer, vejamos exemplos de carrossel que estão pregando. Aqui estão 13 exemplos de carrossel de sites, da página inicial às apresentações de slides de produtos e imagens.

carrosséis Homepage

se você pensou que os campos já estavam divididos o suficiente, você não encontrou Controles deslizantes homepage. Alguns raiz para colocá-los diretamente no topo (muitas vezes visto em modelos de blog), enquanto outros não querem vê-los implementados em qualquer lugar acima da dobra.

a razão pela qual as pessoas evitam colocar um carrossel de página inicial diretamente no topo é porque acreditam que esse espaço deve ser reservado para uma mensagem clara que atraia o leitor a rolar para baixo e aprender mais. Com carrosséis, é difícil transmitir uma mensagem forte. Além disso, você não tem certeza se as pessoas estão vendo todos os slides ou rolando para a direita passado.

no entanto, também há muitas pessoas que adoram cumprimentar os visitantes com um carrossel de página inicial para mostrar instantaneamente histórias ou produtos em destaque.

exemplo 1: Nicole Gibbons Studio

o carrossel da página inicial do Nicole Gibbons Studio funciona muito bem! Isso é bom por algumas razões.

• possui boa funcionalidade e agrega valor. Designer Nicole mostra rapidamente interior diferente exemplos diretamente quando as pessoas entram em seu site

• Os slides estão manual, de modo que o usuário decide se e em que ritmo que eles querem para folhear

• não Há texto sobreposição de tirar as imagens

Exemplo 2: Pele urbana RX

Nós amamos este compacto carrossel de Pele Urbana RX, pois tem grande acessibilidade.

incorpora dois slides, ambos projetados de forma atraente no mesmo estilo do resto do site. O tempo de rotação é definido o tempo suficiente para ler o texto. As fontes grandes e os botões clear call to action (CTA) facilitam a digestão do que é o slide.

Nota: Se você percorrer a página inicial da marca, verá que ela é adaptada para pessoas que já estão familiarizadas com o Urban Skin RX. O foco é mostrar produtos, sem explicar por que alguém precisa deles em primeiro lugar. É por isso que um controle deslizante de produto se encaixa na página—eles não precisam do espaço de cabeçalho para mostrar uma mensagem clara que motive os visitantes a descobrir mais.

exemplo 3: Mejuri

o que amamos neste carrossel da joalheria Mejuri é que ele mostra duas coisas diferentes ao mesmo tempo, sem se sentir opressor.

todo o carrossel contém três slides, dos quais cada um tem duas opções—veja a campanha ou compre as joias. As linhas de progressão são sutilmente mostradas na parte inferior, Embora você possa precisar de olhos de águia para detectar isso. Isso pode ser um ponto para otimização.

Exemplo 4: Fresco Irmãos Pizza

quem diz Que um controle deslizante precisa abranger toda a largura de uma página? Você também pode dividir seções em grades e usar controles deslizantes menores, como na página inicial da Fresh Brothers Pizza.

concedido, com este layout de Web design, as coisas podem ficar um pouco muito. Embora os controles deslizantes mostrem informações aos visitantes, o olho é atraído para a grande imagem à esquerda. Nem todo mundo verá as informações do controle deslizante. No entanto, como as informações são sobre medidas COVID e novas pizzas que as pessoas verão ao fazer seu pedido, isso não é grande coisa.

carrosséis de produtos

carrosséis de produtos estão lá para atrair visualmente as pessoas a aprender mais sobre o produto, e bem, espero comprá-lo!

esses tipos de carrosséis geralmente são colocados em um dos dois pontos em sites de comércio eletrônico: a página inicial ou a página do produto. O controle deslizante pode mostrar produtos diferentes ou um produto de maneiras diferentes (mostrando seus recursos).

exemplo 5: Keys Soulcare

nesta página do produto Keys Soulcare, um carrossel é usado para exibir cada item incluído no Pacote Harmony ritual. Um controle deslizante se encaixa perfeitamente no design do site, pois permite que os visitantes vejam todas as informações relevantes sem ter que rolar.

exemplo 6: KeepCup

este carrossel de produtos da KeepCup é colocado no meio do site de comércio eletrônico e permite que você navegue facilmente pelos copos de to-go mais populares da marca. Tome nota de como o nome, preço, botão de compra e setas são colocados—super elegante (adereços para os designers gráficos).

exemplo 7: Homesick

Candle company homesick usa uma variedade de elementos deslizantes em seu site de comércio eletrônico, para mostrar suas velas, bem como comentários e citações de marcas.

no meio da página inicial, há esta apresentação de slides – uma galeria em movimento de suas velas mais vendidas (adoramos o conceito de perfume!). Depois de passar o mouse sobre um controle deslizante de imagem, ele para e uma imagem ligeiramente diferente é mostrada (por exemplo, mostrando a vela acesa).

exemplo 8: barra de leite

as páginas de produtos da barra de leite são uma alegria de percorrer, e não apenas porque as imagens são de dar água na boca. Pegue a página da Web da líder de torcida abaixo, com o elemento deslizante à esquerda e todos os detalhes do produto à direita, os visitantes veem tudo à primeira vista.

no entanto, ao rolar para baixo, você verá banners interativos e mais informações sobre produtos, como entrega, ingredientes, guloseimas semelhantes e outro Carrossel exibindo avaliações de clientes.

carrosséis de conteúdo

se você deseja adicionar um carrossel de conteúdo ao seu site, lembre-se de que a parte mais valiosa do conteúdo deve estar no primeiro slide. O slide inicial sempre terá mais exposição e as impressões diminuem após cada slide adicional.

exemplo 9: Art of Tea

no site abaixo da Art of Tea, você verá muitas coisas diferentes em um controle deslizante de tela cheia.

o controle deslizante de abertura é um CTA para ingressar em seu programa de afiliados. Em seguida, são slides mostrando novas latas de chá, sacos, pacotes e shakers. Um slide também se dedica a ingressar em seu tea club mensal.

o que este Web design de carrossel faz bem é que as imagens mostram do que se trata cada slide e o texto de suporte é mantido no mínimo. Uma coisa a melhorar são os botões. Quando você escolhe botões que têm apenas um contorno, é difícil vê-los claramente na imagem.

exemplo 10: Canva Design School

a página da Escola de Design do Canva é um bom exemplo de uma instância em que um carrossel é mais eficaz do que qualquer outro elemento do site.

como há muito conteúdo a ser mostrado na página de destino, um carrossel ajuda a exibir os diferentes cursos de forma mais compacta. Por exemplo, a seção tutorial abaixo ocupa muito mais espaço em comparação com a apresentação de slides.

blog carousels

muitas vezes WordPress modelos para blogs vêm com um elemento deslizante interativo que mostra automaticamente os artigos mais recentes.

embora este seja um ótimo recurso, fique atento a quais artigos são mostrados. Alguns podem não ser tão dignos de cliques, mas mostrados primeiro no controle deslizante da página inicial porque foram publicados mais recentemente. Nesse caso, é melhor selecionar manualmente os blogs que você acha que atrairão os visitantes a clicar.

exemplo 11: COCOCOZY

a blogueira de design de interiores Colette Shelton abre seu blog com um controle deslizante mostrando uma seleção de seus blogs. Depois de passar o mouse, o título do blog é mostrado. No celular, a imagem é mostrada com o título abaixo dela.

carrosséis de imagem

os carrosséis de imagem são frequentemente vistos em sites semelhantes a portfólio, onde é usado para exibir peças do trabalho do artista. Certifique-se de que suas imagens são de alta qualidade e falam por si, sem a necessidade de nenhum texto adicional.

exemplo 12: Mix Design Collective

Mix Design Collective é uma empresa de design. Como seu trabalho é altamente visual, faz sentido abrir o site com a navegação e um controle deslizante de fotos diretamente abaixo.

a apresentação de slides tem uma mistura de imagens, de cozinhas a banheiros e salas de estar, para que os visitantes tenham uma ideia do estilo e dos serviços de design do coletivo.

carrosséis de comparação

os controles deslizantes funcionam bem quando os usuários precisam escanear rapidamente uma variedade de conteúdo ou produtos. Este é exatamente o caso quando as pessoas estão comparando itens. Vamos dar uma olhada em alguns exemplos.

exemplo 13: Amazon

indiscutivelmente, o exemplo de comparação mais conhecido vem da Amazon. Em cada página do produto, você encontrará um carrossel com todos os produtos relacionados que você poderia comprar também. Nesse caso, um controle deslizante é mais eficaz do que imagens estáticas, pois permite que os usuários naveguem rapidamente por muitos produtos similares.

Qual é a sua opinião sobre carrosséis de sites?

como você leu, os controles deslizantes da web podem ser sim, por favor ou não. Tudo depende de como o elemento é usado em seu web design e de como o controle deslizante é fácil de usar para navegar. Certifique-se de que cada slide tenha um propósito claro e que a experiência geral do usuário seja ótima. Se você pode dizer com confiança que um controle deslizante é o melhor elemento para exibir o conteúdo, você está pronto para ir.