Layouts para Sites: 7 Características que Prejudicam a Conversão

web design

Muita gente pensa que design de sites é o que você .

Mas Steve Jobs corrigiu a todos nós quando disse que “design é o modo como funciona.”

O mesmo princípio também vale para o design do seu site.

Claro, se você quer melhorar o design do site para vender mais, é importante que ele seja bonito.

Porém, é ainda mais importante que o seu site funcione corretamente — transformando tráfego em leads quentes e novos clientes.

Infelizmente, nem sempre é o caso.

Por exemplo, muitos características de design vistas em grandes sites já se provavam prejudiciais às conversões.

Não acredita em mim? Veja os sete exemplos com dados abaixo e confira se você não está cometendo algum desses erros potencialmente fatais.

1. Fotos de Banco de Imagem

Diga se isso soa familiar.

Você descobre um tema para WorPress bem moderno e bonito no Themeforest.

Tem exatamente o conjunto de características que você busca. É clean. Tem um design contemporâneo.

E mais, custa só $50 pratas!

É centenas de dólares mais barato do que o mais básico design de sites.

Você compra imediatamente e começa a configurá-lo. Só para daí a algumas horas perceber que… bom, não está dando muito certo.

Você não consegue dizer o que, mas sabe que alguma coisa está errada.

Você compara com a versão original e vê porque não se parece com a versão impecável que te encantou.

Só aí você percebe: : Imagens!

As tendências atuais de design de site são relativamente minimalista. Veja este onde você lendo este texto, por exemplo.

Tem bastante espaço em branco, com alguns acentos de cor em negrito e tipografia clean.

image 37

A única coisa que o diferencia são as imagens de qualidade.

Elas combinam perfeitamente, como se alguém houvesse pensado nisso antes de criar o design do site (e de fato, alguém pensou).

Geralmente, os melhores sites na Internet contam com fotografias profissionais e imagens escolhidas para ressaltar a estética geral do site.

Quando isso não acontece, pode ser difícil tentar utilizar fotos de lugares aleatórios.

Então, o que você pode fazer?

Acesse o Pixabay e encontre imagens grátis e de boa qualidade.

Imagens de banco são boas para um blog post, como este.

Porém, elas podem não funcionar nas páginas como foco em conversão do seu site.

Vou explicar como.

A Visual Website Optimizer fez um teste AB simples usando uma foto real contra uma foto de banco.

Essa era a única diferença entre as páginas porque eles queriam ver qual das duas atraía mais cliques no CTA (para novos cadastros).

image01 1024x566

Inicialmente, a página com a foto real superou a que usava imagem de banco, que atraiu 161% a mais de cliques no CTA. Também melhorou a quantidade de cadastros, aumentando a taxa de conversão em 38,4%.

Fotos de banco de imagem não se distanciam apenas da experiência e estética geral. Elas também podem prejudicar a credibilidade do site.

Isso acontece muito com sites pequenos. Veja este exemplo:

pasted image 0 282

Isso parece ser ruim o bastante para prejudicar a credibilidade do site, mas é especialmente ruim se estiver prejudicando a taxa de conversões, como acabamos de ver.

Imagens são poderosas porque as pessoas precisam de apenas 13 milisegundos para compreende-las em nível subconsciente.

Imagens também podem aumentar o engajamento em 94%, portanto são uma das melhores formas de atrair ação e melhorar a taxa de conversão do site.

Então, você deve sempre usar imagens melhores, maiores e com resolução mais alta?

Bom, não exatamente.

Veja por quê.

2. Imagens Enormes, em Tela Cheia e Alta Resolução

Como acabamos de ver, imagens de banco em páginas com foco em conversão podem prejudicar a credibilidade do site e assim, reduzir a taxa de conversão.

Mas isso não quer dizer que imagens grandes e bonitas são a escolha perfeita.

Por exemplo, veja este background de vídeo full-screen retirado de um determinado site:

 

Screen Capture on 2017 07 11 at 08 19 34

Legal, né?

Ele preenche todo o monitor na versão desktop com resolução perfeita.

Então, o que ele tem de ruim?

Isto:

Screen Shot on 2017 07 11 at 083A273A13

Infelizmente, é incrivelmente lento.

Demora 12 segundos para carregar, o que significa que pode perder 31% do tráfego!

A pessoas não gostam de ter que esperar, mesmo que seu site seja bonito.

Como se não pudesse piorar, um relatório recente do Google sobre velocidade de página em dispositivos mobile apontou que “a probabilidade de taxa de rejeição do site aumenta em 113%  caso a página demore sete segundos para carregar.”

A boa notícia é que recentemente o Google lançou uma nova ferramenta que você pode usar para testar sua velocidade  — Test My Site.

Fiz um teste no site que mencionei acima e verifiquei que a performance está nos níveis mais baixos em relação aos parâmetros do mercado.

Screen Shot on 2017 07 11 at 083A273A30

Felizmente, o relatório do Test My Site oferece algumas recomendações para ver quais problemas mais prejudicam o carregamento das páginas.

Veja só o que este site deve fazer.

Screen Shot on 2017 07 11 at 083A283A11

“Otimizar imagens” está no topo da lista, o que não é nada surpreendente quando você compara com o visual anterior.

Mas espera um pouco. Por que estamos falando sobre velocidade em vez de conversões?

Além de espantar o tráfego, baixa velocidade também prejudica o SEO as conversões.

O mesmo relatório do Google que mencionamos antes apontou que “quando a quantidade de elementos —texto, títulos, imagens— na página varia entre 400 e 6.000, a probabilidade de conversões cai 95%”.

Nossa! 95%?!

Melhorar a velocidade de carregamento é um tópico complexo que merece um post próprio, mas aqui vão três dicas rápidas que você deve ter em mente:

  1. Se possível, corte e redimensione as imagens para caber nas dimensões específicas do seu site.
  2. Em seguida, comprima o arquivo, se possível utilizando uma ferramenta como o WP Smush.it.
  3. Por fim, use um CDN (como CloudFlare) para hospedar e entregar suas imagens.

3. CTAs de Equilibrados Corretamente

Pergunta: Em qual dos dois CTAs abaixo você clicaria primeiro?

pasted image 0 280

Seu palpite é tão bom quanto o meu!

Ambos são ruins.

A única vantagem possível aqui é que um CTA está localizado abaixo do outro. Porém, tirando isso, são praticamente iguais.

O tamanho é o mesmo e o texto  “Clique Aqui”, embora seja um OK, apresenta o mesmo peso e fundo nos dois.

Em outras palavras, não há indicação visual para o leitor sobre qual das opções é a primária e qual é a secundária.

À primeira vista, você não tem certeza de onde deve clicar.

Isso é um problema, porque, de acordo com o  MarketingExperiments.com, “as pessoas precisam ser conduzidas”.

Em um teste, pesquisadores examinaram uma página com três CTAs de peso igual e juntaram os três em um CTA principal, como este:

image03 1024x505

A lógica por trás dessa decisão é simples: “As pessoas precisam saber onde podem obter o maior valor. Portanto, aponte-as de forma clara e decisiva em direção ao call-to-action principal.”

Para ilustrar essa afirmação, o Marketing Experiments fez um teste semelhante que mostrou o impacto imediato que pode ser gerado apenas mudando o design dos botões de CTA.

Veja a diferença entre estes dois:

image08

Desta vez, o teste apontou um aumento de 64% nas conversões ajudando os leitores a tomar decisões mais fáceis.

4. Mensagens Confusas

Esse é outro grande problema.

A mensagem do seu site é clara?

Vamos ver um exemplo.

Veja se você consegue identificar o que há de errado nesta landing page.

pasted image 0 272

Pra começar, ninguém vai ler todo esse texto.

Segundo, o uso de jargão e linguagem ‘corporativa’ sofisticada deixa a página praticamente ilegível.

Você deve sempre manter o nível de leitura do seu site abaixo do nível de leitura de um aluno da 7ª ou 8ª série.

Estudos apontam que coisas mais fáceis de entender (palavras, nomes, etc.) na verdade, são vistos como sinais de credibilidade!

A consultoria de gestão McKinsey se refere aos textos complicados como “conversa alheia ao cliente.

Essencialmente, você está dizendo uma coisa, mas os clientes estão interessados em outra completamente diferente.

Você acha que  a ‘mensagem’ não tem nada a ver com design? Dê uma olhada no próximo exemplo e diga se você ainda pensa assim.

good cta landing page example

Esse é um exemplo positivo. A página é simples e direta.

O design enfatiza o espaço branco chama atenção para o a área do CTA, em azul.

É um exemplo perfeito de layout de site com foco em conversão.

5. Design Extremamente Flat

Don’t Make Me Think  é o nome de um dos melhores livros sobre usabilidade e layout de sites com foco em conversão.

A ideia do livro é bem óbvia já a partir do título.

O livro diz que sites devem funcionar exatamente como as pessoas esperam que eles funcionem.

Você já viu uma criança segurar um iPad pela primeira vez?

Geralmente, leva apenas alguns segundos para que elas entendam como usar.

O ideal é que os sites sejam da mesma forma. Infelizmente, nem sempre são assim.

Por exemplo, às vezes a tendência do design flat pode ser levada ao extremo.

Quando é bem feito (como no exemplo abaixo), pode simplificar as páginas tornando-as imediatamente compreensíveis.

pasted image 0 273

Porém, quando não são bem feitas, podem faltar os sinais que educam os usuários sobre o que fazer a seguir.

Veja um exemplo:

Veja esta imagem, que é um heatmap do software CrazyEgg.

suitcase screenshot

O heatmap mostra que ninguém está clicando nas imagens, embora devessem!

A página tem um visual ótimo, mas o design flat não oferece nenhuma indicação para que o usuário clique nestes elementos.

O resultado é que ninguém está visualizando essas páginas de estudos de caso. E portanto, ninguém está contratando essa empresa!

Mesmo algo simples como um título, botão ou algum efeito no layout seria suficiente para informar aos usuários que eles devem clicar nestes elementos.

Por exemplo, veja este exemplo do HubSpot.

pasted image 0 264

Como você pode ver,  é um CTA de imagem (como no exemplo anterior).

Em vez de assumir que você sabe o que é ou por que deveria clicar, o site usa dicas para te ajudar.

  • Título: “Template Grátis”
  • Subtítulo: “Template Grátis para Planejamento de Marketing”
  • Texto: “Defina os objetivos da sua estratégia de marketing e estabeleça prazos para o próximo ano com este template de Excel gratuito.”
  • Imagem: Um laptop Mac com um exemplo do template de planejamento.
  • CTA: Botão com o texto “Receba seu Template” e uma seta.

Percebe a diferença?

Eles não deixam nada para o acaso.

Assim que abre a página, você sabe exatamente o que fazer. E os detalhes extras também ajudam a determinar por que você deve clicar ali.

6. Organização Clara e Lógica


A organização da página é importante.

Principalmente na construção de um layout com foco em conversão.

Por exemplo, a sua página “Sobre” deveria se chamar apenas “Sobre” em vez de “Equipe” ou “Líderes”, “Unidades,” ou “Quem somos”.

Embora os outros títulos da página podem ser mais criativos, nem todo mundo vai entender imediatamente o que cada um significa.

É por isso que todas as páginas de navegação do meu site são super simples e usam nomes comuns.

image 39

Arquitetura da Informação (AI) segue esse princípio e lida com a organização da informação no seu site.

Certas páginas devem ser organizadas de forma semelhante para que as pessoas saibam exatamente como encontrar um novo produto mesmo que nunca tenham visitado o seu site antes.

Veja o que quero dizer.

Você acessa o  Zappos.com  para procurar um novo par de sapatos.

Na parte superior, você nota que os calçados estão divididos por gênero (Masculino e Feminino), em seguida por idade (Infantil), e depois por Departamentos, Marcas e Liquidação.

Isso facilita muito a busca.

Em seguida, quando você clica em um menu (como “Feminino”) e ele se expande para mostrar mais opções organizadas primeiro pelo tipo de “Calçados”, em seguida por “Roupas,” e “Acessórios.”

pasted image 0 271

Viu? Você pode nunca ter acessado esse site antes. Eles têm milhares de produtos. Ainda assim é fácil e lógico encontrar o que você busca.

Nordstrom faz algo parecido no site deles:

pasted image 0 284

Começa com uma divisão simples entre Masculino, Feminino, Infantil, Casa, Beleza e Liquidação.

Quando você acessa o próximo nível, ele se divide em ‘situações de uso’ (Novidades, Tendência, Férias, Casamento) e categorias (Roupas, Calçados, Handbags, Acessórios).

Em outras palavras, eles ajudam a ‘refletir’ algumas das seleções mais comuns dos usuários.

E agora é muito mais fácil (e mais rápido) de encontrar. Além disso, mantém a navegação tão simples quanto possível, para que o usuário não se sinta perdido.

Se mesmo sites de ecommerce gigantes conseguem organizar as páginas de um modo simples e funcional, você também consegue.

Audiências B2B adoram páginas de conteúdo longas e aprofundadas.

Porém, às vezes o usuário pode se confundir sobre onde estão ou que outro tipo de informação está relacionada àquele conteúdo. E aí, o usuário acaba indo embora.

Porém, você pode usar pequenas dicas visuais, como a sub navegação no exemplo abaixo, para sutilmente informar ao usuário exatamente onde ele está.

Na medida em que o usuário desce a tela ou abre uma nova página, a sub navegação vai atualizar para uma nova seleção.

Imediatamente, isso vai situar o usuário em relação à página que ele acabou de visitar, onde ele está agora e para onde deve ir em seguida.

Our Story Tru by Hilton

7. Carrossel de Slide

Guardei o melhor para o fim.

E por “melhor” quero dizer o pior.

Carrossel de slides são utilizados em praticamente todos os sites, de B2B a B2C e até em ecommerces.

Nós acabamos de elogiar o Zappos.com, e mesmo assim eles usam um carrossel de slides que passa por diferentes opções automaticamente.

pasted image 0 268

Não tenho nada contra.

Apenas não sou fã de carrosséis, porque já foi provado  (muitas e muitas vezes) que eles prejudicam as conversões, em vez de aumentá-las.

Por exemplo, Harrison Jones conduziu um estudo para a  Search Engine Land e descobriu que ninguém clica em carrosséis!

Dê uma olhada na taxa de cliques destes carrosséis. Nada bom, não?

image02

Claro, eu posso entender por que você quer utilizar um slide de carrossel no seu site.

Você quer mostrar todos os aspectos únicos da sua empresa, produto ou serviço.

Na verdade, o truque é mostrar apenas uma coisa de cada vez. Caso contrário, você corre o risco de antecipar algumas ações, e acabar com uma taxa de cliques na casa dos 0.16%.

Carrosséis são muito comuns em empresas de ecommerce que, por algum motivo, querem exibir todas as suas marcas.

Por exemplo,  veja o site da Forever 21 utilizando um slider:

pasted image 0 278

H&M, por outro lado, escolheu um caminho um pouco diferente. Eles usam duas seções estáticas para prender o foco de atenção do usuário.

Há uma chamada de vendas no topo da página e um único produto embaixo.

image 38

Conclusão

Se você quer melhorar o layout do seu site para vender, o layout deve ser lindo.  Porém, isso não quer dizer que ele não deve funcionar bem.

O ideal é que você possa sempre usar imagens reais (de tamanho adequado) que provoquem identificação imediata nos visitantes.

Desse modo, você ganha tempo para que sua mensagem e os seus CTAs sejam compreendidos antes que o usuário deixe o site.

Em seguida, o seu design deve ser fácil de entender.

Isso significa apostar em uma organização simples, nomes de seções convencionais, e pequenas indicações visuais que lembrem os visitantes do que eles deveriam fazer naquela página.

E acima de tudo, esqueça o carrossel de slide.

Quais características de web design você já viu ajudar ou prejudicar as conversões?

Compartilhe