7 dicas de design sobre como escolher, modificar e melhorar sua imagem deslizante

Nos últimos 7 anos, controles deslizantes (ou carrosséis, se você quiser) são algo que quase todos os sites têm. É uma prática comum. Algo que todos nós estamos acostumados. É a primeira coisa que seu visitante verá em seu site. É o momento de fazer ou quebrar. As imagens deslizantes devem causar uma excelente primeira impressão, ou você perderá seu visitante para sempre.

Quando estou olhando os sites que nossos clientes criaram com nossos temas do WordPress, geralmente vejo imagens de sliders mal preparadas. Na maioria das vezes, as fotos são muito grandes ou muito pequenas. O texto no controle deslizante não é visível o suficiente e as imagens não são otimizadas, então a própria página carrega muito lentamente.

Meu coração se parte um pouco quando vejo um bom site geral com uma boa cópia, mas imagens de slider ruins. Decidi acabar com essa loucura compartilhando alguns truques simples.

1. Escolha a foto certa

Em primeiro lugar. Escolha a foto certa. Escolha uma imagem que seja descritiva o suficiente e tenha bastante espaço em branco. Dê uma olhada onde o texto no controle deslizante aparece e escolha a imagem que tem o mínimo de ruído visual possível nessa área.

2. Uma foto de alta resolução é obrigatória

Use a resolução recomendada pelo criador do tema. Nos últimos 4 anos, eu vi um zilhão de sites com fotos de baixa resolução esticadas por toda a tela. Você não pode perder se escolher uma imagem com 1920px de largura. Nada desencoraja mais seu visitante do que uma foto pixelada no controle deslizante. Excelente recurso de fotos gratuitas e de alta qualidade é o Unsplash. Se você tiver um orçamento, recomendo que você compre fotos premium na Shutterstock. O investimento será recompensado.

3. Escurecer ou clarear a foto

Um bom truque para tornar um texto em seu controle deslizante mais visível é escurecer (ou clarear) a foto. Isso pode ser feito no Photoshop ou em qualquer outro programa de edição de fotos. Para este tutorial, usarei o aplicativo de design gratuito chamado Canva. Depois de se inscrever no Canva, clique em “Criar um design” no canto superior esquerdo. Em seguida, no canto superior direito, clique em “Usar dimensões personalizadas” e insira as dimensões recomendadas pelo desenvolvedor do seu tema. Se não houver uma resolução recomendada, acesse o site de demonstração do tema WordPress e inspecione a foto (ou altere seu provedor de temas WordPress conosco).
Clique em “Projetar!” e vá para “Uploads” no menu à esquerda. Carregue sua imagem deslizante e arraste e solte-a no quadro. No menu superior, clique em “Filtro” e reduza o “Brilho” e o “Contraste” para 10-20%. Se a cor do texto em seu controle deslizante for branca, você deseja tornar sua foto um pouco mais escura para melhorar o contraste. Se você tiver texto em preto no controle deslizante, faça o oposto.

Dê um passo adiante. Colora sua foto com as cores da sua marca movendo o carrossel “Tint” (Matiz) um pouco para a esquerda ou para a direita.

4. Sobreposição de cores semitransparente

Às vezes você simplesmente não consegue encontrar uma foto com espaço em branco suficiente para o texto ou seu cliente quer que você use uma imagem supersaturada onde seu texto não seria visível o suficiente. Nessa situação, a coisa mais simples que você pode fazer é fazer uma sobreposição de cores semitransparente.

Para fazer isso, acesse seu aplicativo Canva > Elementos > Formas e arraste e solte o primeiro retângulo branco ou o segundo retângulo escuro no seu quadro (onde diz livre). Redimensione esse retângulo de ponta a ponta e pinte-o de preto no canto superior esquerdo. Em seguida, no canto superior direito, defina a transparência do retângulo para ~ 50%, depende de quanto contraste você precisa.

5. Adicione brilho interno à sua foto

Outro grande truque para tornar sua foto deslizante mais interessante é adicionar um brilho interno semitransparente preto. Esse método fará com que seu site pareça ainda mais profissional. Ele colocará o foco no centro da tela. No aplicativo Canva, esse efeito é chamado de “Vinheta” e você pode encontrá-lo no menu superior “Filtro” > “Opções avançadas”. Quando estiver satisfeito com sua foto deslizante, salve-a clicando no botão "Download" no canto superior direito.

6. Escolha o tipo de arquivo correto

Quando você está salvando sua imagem de controle deslizante editada, é importante (devido ao tamanho do arquivo) escolher o tipo de arquivo correto. Não se preocupe; a regra é simples. Se a imagem do slider for uma foto real, salve-a como .jpg. Se for qualquer coisa além de uma foto (ou seja, padrão, ícone, doodle), salve-a como .png. Isso é importante porque você deseja que suas imagens de controle deslizante sejam o mais leves e otimizadas possível.

7. A velocidade da página é muito importante

Tanto para o Google quanto para seu visitante. As imagens deslizantes são as maiores imagens (talvez até arquivos) do seu site, por isso é importante tê-las otimizadas. Uma ótima ferramenta para diminuir o tamanho de uma imagem é o TinyPNG. Sua interface simples de arrastar e soltar permite diminuir o tamanho da imagem sem perder qualidade. Veja os melhores guias para otimização de imagem e otimização de velocidade de página.

Dica bônus: use o tamanho recomendado da imagem do controle deslizante

Quando estamos desenvolvendo temas do WordPress, fazemos um esforço extra para escolher o tamanho e a proporção corretos da foto do slider. A foto em si tem que funcionar bem em todos os tamanhos de tela. Vejo muitos casos em que os usuários usam tamanhos diferentes dos recomendados. Na maioria das vezes, as fotos no controle deslizante ocupam muito espaço vertical.

Isso não é um problema para a funcionalidade do slider em si, mas se o visitante tiver que rolar muito para chegar ao conteúdo, não adianta nada em relação à experiência do usuário.

Se você ainda quiser usar imagens maiores do que o recomendado, pelo menos tenha em mente uma boa e velha regra acima da dobra.

O controle deslizante é a primeira coisa que seu visitante verá em seu site. Melhore a experiência do usuário implementando alguns dos truques acima. Não vai demorar muito, mas vai melhorar a sua felicidade, do seu cliente e do visitante do seu cliente.

Agora que você tem uma ideia de como melhorar suas imagens de sliders, vamos discutir os prós e contras de usar sliders. Como se vê, há muitas pesquisas que dizem que os controles deslizantes podem prejudicar seu site mais do que podem ajudá-lo. Mesmo os autores do plugin Yoast SEO dizem que os sliders devem ser banidos do seu site, então definitivamente vale a pena discutir as vantagens e desvantagens dos sliders, bem como quando eles são apropriados e quando é melhor evitá-los.

Contras de usar controles deslizantes em seu site

Primeiro, vamos dar uma olhada nas desvantagens mais importantes dos controles deslizantes.

Muito poucos plugins deslizantes são realmente responsivos a dispositivos móveis

Você já se deparou com um site que usa um controle deslizante e tentou visualizá-lo em seu telefone? Embora seja verdade que os telefones estão ficando maiores, o simples fato é que a maioria dos controles deslizantes é redimensionada para acomodar o tamanho de tela menor.

Isso resulta em imagens e texto muito pequenos para serem lidos e visualizados em telas menores. No final, seu lindo controle deslizante provavelmente será ignorado nos telefones, então pense duas vezes sobre o conteúdo que você está adicionando à sua apresentação de slides.

Se você tiver a sorte de usar um plug-in de controle deslizante responsivo como o Soliloquy, prepare-se para gastar algum tempo personalizando seus controles deslizantes para garantir que fiquem bem em todos os dispositivos. Enquanto isso, certifique-se de testar o controle deslizante e ver como ele fica em uma variedade de tamanhos de tela e dispositivos.

A maioria dos visitantes não passa dos dois primeiros slides

Se você levar em consideração que nosso tempo de atenção está ficando cada vez mais curto, é seguro assumir que a maioria dos visitantes não vai ficar depois dos primeiros slides.

Quando os visitantes chegam ao seu site, eles querem saber instantaneamente o que você faz e como você pode ajudá-los. Se seus slides não responderem a essas perguntas, é provável que eles sigam em frente.

Os controles deslizantes podem ser facilmente perdidos

Os controles deslizantes geralmente são ícones discretos projetados e estilizados para não prejudicar o conteúdo real do slide. Como tal, as setas usadas para navegar pelo controle deslizante podem ser facilmente perdidas.

Esse problema é ainda mais evidente em telas menores, o que significa que seus visitantes móveis terão dificuldade em ir e voltar entre os slides ou clicar no botão que os leva para outra parte do seu site.

Sliders podem deixar seu site mais lento

Se você não tomar cuidado com a otimização de suas imagens para os controles deslizantes e para a Web em geral, os controles deslizantes podem deixar seu site mais lento. Além disso, os controles deslizantes geralmente usam arquivos JavaScript com muitos recursos.

Cada um desses arquivos JavaScript é outra solicitação que um navegador precisa fazer ao servidor de hospedagem em que seu site está. Enquanto o navegador faz essas solicitações, seus visitantes aguardam o carregamento do site, pois o navegador não pode prosseguir até que os arquivos JavaScript necessários (assim como os arquivos de estilo para os controles deslizantes e seu site) sejam carregados.

Como resultado, os visitantes podem ficar frustrados e sair para outro site que carrega muito mais rápido e fornece a mesma solução para a qual eles vieram ao seu site.

Também vale a pena mencionar que, devido ao impacto nos tempos de carregamento do site, os controles deslizantes podem afetar negativamente seu SEO.

O olho humano reage ao movimento

Finalmente, tenha em mente que nossos olhos são naturalmente atraídos pelo movimento. Se você usar controles deslizantes em todo o site, eles podem distrair os usuários e fazer com que eles parem de prestar atenção ao restante do conteúdo do site.

Cada vez que um slide muda, você corre o risco de seu visitante que estava prestes a clicar naquele botão de reserva para se concentrar em outra coisa. Isso pode levar a uma perda nas conversões, o que leva a menos vendas e menos lucro em geral.

Outra coisa a ter em mente é que, se você estiver usando um controle deslizante, não use a opção de slide automático, pois isso pode piorar rapidamente a experiência do usuário para seus visitantes. Imagine se alguém começar a ler o texto no slide e a imagem mudar antes de terminar de lê-lo. Isso pode deixar seus usuários frustrados e fazer com que eles saiam do seu site.

Prós de usar controles deslizantes em seu site

Agora que abordamos os contras do uso de controles deslizantes, vamos dar uma olhada em por que você pode querer considerar o uso de um.

Você pode exibir mais conteúdo em menos espaço

Devido à sua natureza, os controles deslizantes facilitam a exibição de mais conteúdo acima da dobra ou em qualquer outro lugar do seu site sem criar páginas longas. Você pode usar quantos slides quiser para compartilhar a mensagem que quiser por meio dos slides e apresentá-la de maneira visualmente atraente.

Isso permite que você mantenha sua página inicial curta e agradável, concentrando-se nos elementos mais importantes, em vez de usar todo esse espaço para contar uma história visual sobre um único produto ou serviço.

Os controles deslizantes facilitam a adição de texto a imagens sem usar o Photoshop

A maioria dos plugins de controle deslizante permite que você carregue sua imagem e adicione texto a ela sem usar o Photoshop ou outro programa de edição de imagens. Alguns controles deslizantes até permitem adicionar botões e chamadas para ação ou links para outras partes do seu site.

Graças à interface de administração do controle deslizante, você pode facilmente escrever e formatar seu texto usando ferramentas semelhantes às encontradas no editor de postagem ou no Word. Você pode até personalizar o design do slide adicionando cores ou fontes personalizadas, ajustando o tipo de transição e a duração e muito mais.

Sliders forçam os usuários a interagir com seu site

Por mais grosseiro que possa parecer, os controles deslizantes tornam impossível que os usuários não interajam com seu site. Se eles não quiserem esperar que o próximo slide apareça, eles podem simplesmente clicar nas setas para ir e voltar em todos os seus slides.

Se você incluiu links ou botões que os direcionam para uma página diferente, eles podem clicar nos botões e explorar tudo o que você tem a oferecer em seu site. Em outras palavras, os slides fornecem mais engajamento para seus usuários, portanto, se você deseja que os visitantes interajam com seu site desde a primeira vez que acessam, os controles deslizantes podem ser a resposta.

Sliders são uma ótima maneira de compartilhar seu trabalho

Se você é designer, ilustrador, fotógrafo ou artista, os sliders são uma ótima maneira de mostrar seu trabalho sem que seu portfólio ocupe a página inteira. Você pode montar uma apresentação de slides do seu melhor trabalho e compartilhá-la como um slide em sua página inicial ou até mesmo na página do seu portfólio.

Os controles deslizantes também são úteis se você vender produtos, pois podem ser usados ​​para mostrar os produtos mais populares, novidades ou categorias específicas.

O veredicto: você deve usar controles deslizantes?

Com os prós e contras fora do caminho, é hora de tomar uma decisão: você deve usar controles deslizantes em seu site? A resposta a essa pergunta pode ser resumida em duas palavras: depende.

Quando usar um controle deslizante é uma boa escolha?

Prós e contras à parte, ainda existem alguns bons cenários quando usar um controle deslizante é uma boa ideia e uma escolha sólida.

• Use um controle deslizante quando quiser mostrar seu trabalho ou uma galeria. Como mencionado anteriormente, os controles deslizantes se prestam bem à exibição de galerias de fotos ou itens de portfólio. Se o seu site pertence a essa categoria, usar um controle deslizante é uma ótima maneira de mostrar seu trabalho sem sobrecarregar seus visitantes.
• Use um controle deslizante para mostrar um produto. Em uma nota semelhante, se você estiver lançando um novo produto ou serviço; um controle deslizante pode ser uma ótima maneira de demonstrar o produto em ação ou destacar seus benefícios e recursos.
• Use um controle deslizante para compartilhar uma história coesa. Esta pode ser a história de sua marca e sua empresa ou você pode destacar os membros de sua equipe e seus conhecimentos. Não importa que tipo de história você decida compartilhar em seu controle deslizante, certifique-se de que a história faça sentido, caso contrário, seus visitantes verão um monte de slides não relacionados que não fazem sentido. Ao mesmo tempo, certifique-se de que cada slide crie expectativa para o próximo slide e intrigue seus visitantes para que eles permaneçam até o último.

Quando você não deve usar controles deslizantes?

Escusado será dizer que, se o seu site não pertencer a uma das categorias acima ou se você não estiver usando controles deslizantes para adicionar ao seu site, evite os controles deslizantes. Aqui estão mais alguns cenários quando usar controles deslizantes não é uma boa ideia.

• Se você estiver usando apenas um slide porque é quadril. Só porque todo mundo está fazendo isso, isso não significa que você tem que fazer também. Você não apenas corre o risco de não adicionar nada valioso ao seu site com um controle deslizante, mas também corre o risco de se misturar e parecer igual à sua concorrência.
• Se o seu site já estiver lento, evite usar controles deslizantes. Como dissemos acima, os controles deslizantes podem consumir muitos recursos, então a última coisa que você precisa fazer é tornar seu site ainda mais lento para carregar. Trabalhe primeiro para corrigir a velocidade do seu site e, em seguida, considere adicionar um controle deslizante.
• Se você não sabe o que colocar em seu controle deslizante, não adicione um. Um controle deslizante funciona melhor quando há uma história por trás dele. Sem uma história, você tem uma bagunça de imagens que não agregam nenhum valor ao seu site e podem até confundir seus visitantes.
• Se você puder compartilhar o conteúdo de uma forma mais simples, faça isso. Não adianta complicar demais o design do seu site ou sacrificar a velocidade em nome das últimas tendências de design. Uma solução mais simples geralmente significa que seu site será mais fácil de atualizar e manter, sem mencionar que será mais rápido para carregar. Como tal, renunciar a um controle deslizante em favor de uma solução mais simples é uma escolha muito melhor.

Conclusão

Agora que você conhece os prós e os contras do uso de controles deslizantes, você pode tomar uma decisão informada se o uso de um controle deslizante é uma boa opção para o seu site. E com as dicas sobre como otimizar imagens de sliders, você estará no caminho certo para criar slides atraentes que não prejudicarão a experiência do usuário, mas ajudarão você a obter mais conversões.