Carrosséis de Imagem em Web Design - Benefícios e Melhores Práticas

Não há escassez de slideshows do recurso de carrossel Na internet. Na verdade, essa tendência não fez nada além de crescer nos últimos 5-10 anos com mais suporte ao navegador agora do que nunca. Mas os carrosséis de imagens realmente valem o esforço? Que tipos de benefícios eles produzem e como devem ser usados ​​de maneira produtiva em um layout?

Eu gostaria de compartilhar tendências comuns, exemplos ao vivo e ideias para web designers interessados ​​em carrosséis de imagens. Esses controles deslizantes dinâmicos são muito debatidos, mas acho que eles agregam valor quando criados no contexto certo.

Carrosséis de produtos para e-commerce

O mundo do comércio eletrônico está repleto de carrosséis giratórios em páginas iniciais e páginas de produtos. O objetivo é manter uma densidade de informação clara com fotos e texto que conte uma história única e valiosa para ajudar a vender produtos.

tem dois canais principais para um controle deslizante de produto de comércio eletrônico:

1. Na home page de uma loja
2. Numa página de produto

Ambos funcionam de maneira diferente, mas servir o mesmo objetivo - para vender produtos de maneira visual.

Exemplo 1: Linens finos Au Lit - página inicial

Dê uma olhada na página inicial do Au Lit Fine Linens, que usa um carrossel de rotação automática em tela cheia para mostrar diferentes produtos, como edredons, travesseiros e colchas.

As imagens ocupe toda a largura da home page, e eles aparecem bem acima da dobra. Na verdade, esse controle deslizante deve ser a primeira coisa a chamar sua atenção ao aterrissar na primeira página. Cada slide leva a uma página diferente no site para orientar os clientes através da experiência de compra.

Esse controle deslizante pode ser um pouco intimidante quando chegar na primeira página, mas com o link de botão e texto de sobreposição também pode ser muito encorajador para os visitantes que apenas querem mergulhar e comprar.

Exemplo 2: caso de telefone Eden - página do produto

Você pode ver um exemplo mais específico na página do produto do caso do telefone Eden. Ele usa um controle deslizante de rotação automática para mostrar imagens do produto.

Eu acho que estes são um pouco “demais” no mundo do e-commerce. Ao olhar para um produto que eu quero ser no controle de alternar entre imagens.

A melhor escolha é fazer uma galeria de imagens com controle dado ao visitante. Por exemplo, a página Design by Humans usa miniaturas para cada foto o que é muito mais encorajador e concede mais controle ao usuário.

Carrosséis de portfólio da Web

Portfólios de sites on-line são um pouco diferentes porque esses slides nem sempre clica para outra página. É verdade que alguns levarão a um estudo de caso ou escreverão sobre um projeto, mas muitos carrosséis em sites de portfólios mostre o trabalho visual.

Exemplo 1: Biboun - home page

O artista francês que trabalha sob o nome Biboun tem um controle deslizante de carrossel na home page apresentando trechos de obras de arte. Os slides individuais levam a páginas internas no portfólio que cobrir um projeto inteiro com várias fotos.

Isso é provavelmente a melhor maneira de fazer um slider em um site de portfólio. Apenas mostrar uma lista aleatória de trabalho é inútil, a menos que esses trabalhos específicos tenham um motivo para serem exibidos.

Todas as peças são requintado no controle deslizante de Biboun, e não ocupa muito espaço ou. Embora eu saiba que algumas pessoas odeiam os slideshows auto-rotativos por um bom motivo, em um layout tão minimalista eu tenho dificuldade em reclamar sobre esse recurso de design.

Exemplo 2: Website de Aaron Blaise - home page

Eu realmente gosto do exemplo encontrado no site de Aaron Blaise porque ele mostra seu trabalho como um portfólio, mas principalmente usa este site para vender seus vídeos de arte. Aaron Blaise trabalhou na Disney por algumas décadas, e ele tem o conjunto de habilidades para provar isso.

Enquanto o controle deslizante da página inicial de seu site gira automaticamente, não acho incrivelmente irritante ou fora do lugar. Cada slide tem um pouco de conteúdo relevante para a imagem, e isso ajuda Aaron chamar atenção para suas últimas lições em vídeo que ensinam jovens artistas a dominar habilidades específicas.

Um grande carrossel de portfólio concentra-se nos recursos visuais, e leva os visitantes ainda mais no site. Se você puder obter essas duas coisas, então eu não seria contra um recurso como este em um site de portfólio pessoal.

Tendências comuns de design

Se você olhar alguns dos meus exemplos acima, você notará que geralmente há dois tipos diferentes de controles deslizantes: tela cheia e Largura fixa.

Essas escolhas estilísticas frequentemente relacionar-se com o layout e quanto conteúdo pode conter. Se um layout ocupa toda a largura da página, faz sentido ampliar o controle deslizante também. Mas isso também força você a encontre imagens de alta qualidade que ainda parece bom em tela cheia em monitores de alta resolução.

Eu pessoalmente prefiro o estilo de largura fixa, como você verá nos dois exemplos de portfólio de arte. Esses são muito mais fácil de controlar, e eles são frequentemente não tão alto - tornando mais fácil para os visitantes simplesmente ignorá-los se eles quiserem.

Considere também o valor dos slides de avanço automático e quão difícil pode ser para os usuários capturarem esse conteúdo. Há um ótimo estudo de caso do Nielsen Norman Group mostrando que é melhor não ter sliders de avanço automático.

Eu estou a bordo com esta abordagem no sentido de que é menos intensivo na memória com menos animações e movimento no navegador, e a maioria das pessoas também não gosta de carrosséis de rotação automática - e você deve sempre atender ao seu público.

No entanto, não posso dizer que nunca vale a pena adicionar um controle deslizante de avanço automático, especialmente porque você está usando sliders estáticos não receba tantas visualizações, e você também precisa faça o seu primeiro slide o mais importante quantos usuários não passarão para o próximo slide. Decidir se fazer um controle deslizante girando ou não é infelizmente área de tentativa e erro.

O que evitar a todo custo

Aqui está uma coisa importante que eu pessoalmente acho cai sob “evitar a todo custo”. Dê uma olhada ou clique na imagem abaixo e tente adivinhar o que pode ser.

O site do café Yozenn usa um controle deslizante de tela inteira. Ele não gira automaticamente, o que é ótimo, mas os slides também não servem para outro fim que decoração.

As imagens não liga em qualquer lugar, e eles mostram um pequeno punhado de produtos. Eles poderiam todos ser apenas adicionado ao fundo da home page sem o controle deslizante para salvar a confusão e kilobytes extras de JavaScript.

Eu diria que esse recurso deslizante de fundo não agrega muito valor a um site já apertado. Se as imagens tivessem links ou textos de acompanhamento, seriam pelo menos mais relevantes.

Sinta-se à vontade para usar imagens na seção de cabeçalho que ocupam a página inteira, no entanto, se não vincule em qualquer lugar ou ofereça qualquer informação genuína então não os transforme em um carrossel.

Recursos interativos

A maneira como os usuários navegam em um carrossel afeta o próprio design. Existe um variedade de estilos de navegação, mas estes são os mais populares:

• Navegação baseada em pontos
• Navegação de seta
• Navegação de miniaturas
• Listar links ou itens de título

O mais comum é o navegação de pontos que você encontrará em centenas de sites modernos.

Exemplo 1: Chic at Home - home page

Chic at Home é um ótimo exemplo usando três pequenos pontos abaixo do controle deslizante para denotar a navegação. Cada imagem gira automaticamente e o ponto relacionado na série fica cheio de preto. Os outros dois pontos vazios denotar slides em potencial para os usuários navegarem.

Isto é um padrão de design popular que muitos usuários já reconhecem. Ele cai na mesma categoria que o menu de hambúrguer que muitos designers não gostam, mas os usuários já reconhecem, e instintivamente sabe como usá-lo.

Exemplo 2: Ciclos Puros - home page

A home page do Pure Cycles usa um combinação de navegação por pontos e setas. Desta forma, os usuários têm a navegação para frente e para trás, mas veja também o “No geral” navegação através de links de pontos na parte inferior.

Eu realmente acho que os links de pontos neste exemplo são difíceis de ver. A dificuldade com slides visuais é que muitos elementos não são fáceis de distinguir, então setas e pontos podem facilmente misturar no fundo.

Exemplo 3: IGN - home page

Na página inicial da IGN, você encontrará outra carrossel auto-rotativo que usa links de título para a navegação. Isso é muito comum para editores que desejam vender manchetes em vez de produtos. Cada link vai para o slide individual que eventualmente leva à página do artigo.

Esses links poderia ser substituído por miniaturas, ou até mesmo incluir miniaturas de cada história - no entanto, o aspecto visual é mostrado no carrossel, omitindo a miniatura, na verdade, economiza espaço.

Diferentes sites usam diferentes estilos de navegação por diferentes razões. Considere o (s) objetivo (s) de seus visitantes, e design para a melhor experiência do usuário.

Principais tópicos

Você deve procurar produzir valor genuíno ou informações extras com um carrossel. Esta pode ser uma informação que o visitante não tinha antes, ou pode levar a páginas que o visitante pode não ter encontrado de outra forma.

Tente evitar carrosséis de rotação automática e use-os somente nas principais páginas de destino (a home page é um exemplo). Enquanto o carrossel tem um propósito, e não parece um anúncio, seu design deve fazer bem.

Se você está procurando mais informações sobre carrosséis da web, confira alguns dos seguintes posts:

• Carrosséis por Brad Frost
• 8 Requisitos de UX para criar um carrossel de fácil acesso à página inicial
• Usabilidade do carrossel: projetar uma interface do usuário eficaz para sites com sobrecarga de conteúdo