Não adianta ser lindo e não ter conteúdo. Essa frase pode ser aplicada em muitas áreas da vida e uma delas, com certeza, é a Otimização da Taxa de Conversão (CRO). Todo site que tem como foco aumentar a taxa de conversão de leads ou vendas deve entregar um design voltado para a conversão.
Por isso, quem faz o design de um site tem o desafio de unir a estética a uma experiência fluida e que faça sentido, ou seja, que coloque o usuário no centro e se preocupe de verdade com a usabilidade.
O e-commerce das Havaianas tem uma estética impecável, no entanto, tem melhorias necessárias na experiência do usuário. O layout pesa o site e, em alguns momentos, determinados elementos escondem o CTA principal.
Para ajudar você a entender melhor como funciona um design para conversão, listei abaixo 3 princípios que utilizamos aqui na Supersonic. Não se trata de regras, afinal, não existe isso no CRO. São apenas direcionamentos que você pode utilizar para criar uma boa experiência para o seu usuário.
O ideal é sempre testar para entender quais são as melhores decisões de design. Você deve implementar uma rotina de experimentação que permita encontrar bons formatos e testar ideias para convencimento da sua audiência.
Saiba como realizar testes A/B aqui.
Muito bem. Com isso posto, vamos lá?
1 – Hierarquia visual
Um dos elementos mais importantes do layout de um site é a hierarquia. Por meio dela, você dá pistas para o usuário se orientar. Dessa forma, o título deve estar em destaque. Ele entrega o conteúdo mais importante da página e traduz a oferta para o usuário.
A home page do aplicativo de organização Evernote traz a proposta de valor em seu título, explicando um pouco mais no subtítulo. A hierarquia fica bem clara.
Mas não é apenas o tamanho que define a hierarquia. As cores também a influenciam.
O site da Mobly, e-commerce de móveis e itens para casa, destaca preço e CTA utilizando uma cor diferente.
Para definir a hierarquia do seu site, é preciso entender onde você quer que o usuário clique. Um formulário de cadastro, por exemplo, será mais importante do que o link para a página de “Sobre”.
Conheça um pouco mais sobre o fluxo navegacional do seu usuário para estabelecer a hierarquia ideal.
Veja nos exemplos acima como a hierarquia é fácil de se entender e nem por isso a estética é prejudicada. Sabemos perfeitamente qual é o próximo passo e as informações necessárias estão claras.
A hierarquia também deve vir acompanhada de um copywriting de qualidade. Entenda aqui o conceito de microcopy e aprenda a escrever para converter.
2 – Regra dos três
É uma ótima ideia utilizar imagens no seu design. Elas ajudam o usuário a contextualizar a oferta.
Essa página do sistema de gestão Basecamp traz um exemplo claro de como o software funciona.
Mas é ideal, para que a imagem seja atraente e explicativa, que ela siga a Regra dos Três: deve ser dividida em 9 partes iguais por duas linhas horizontais e duas verticais iguais.
Veja como a imagem abaixo é mais interessante à direita:
Veja outro exemplo de uma imagem no contexto de um site que segue a regra:
Essa imagem no site da ContaAzul, sistema de gestão financeira para empresas, traz a harmonia da Regra dos Três enquanto mostra um pouco do que é o software.
3 – Espaços brancos
O “respiro” é muito importante para interfaces de alta conversão. Trata-se da porção de uma página que fica vazia e permite que o usuário compreenda melhor os elementos, evitando a sobrecarga de informações.
Na verdade, não é só uma questão de espaço em branco, mas de destacar gráficos, imagens, títulos, cores e outros elementos. Uma página completamente cheia fica com aparência desordenada e dá “preguiça de ler”. Isso acontece muito em páginas de jornais ou portais de notícia.
Veja como o texto está muito próximo e temos dificuldade em focar.
Por mais que pareça, incluir espaços em branco no design para conversão não significa tirar conteúdo. Na verdade, significa trazer mais peso para o conteúdo que existe e garantir que ele será lido e entendido.
Observe uma página que faz bom uso do espaço em branco:
A página de produto do e-commerce da TokStok é um clássico exemplo de como o espaço em branco ajuda a compreender as informações que são realmente importantes.
Bônus: Lei de Hick
Resolvi incluir um bônus aqui porque a Lei de Hick vai além do design para conversão e atinge todas as frentes de criação de uma interface. Ela define quais e quantos produtos você vai colocar, qual será o tamanho do conteúdo e a quantidade de imagens que você deseja incluir.
Vou explicar. Segundo a Lei de Hick, quanto mais opções um usuário tem à sua disposição, maior será o tempo que ele vai demorar para se decidir. Por isso, se você puder, faça o esforço pelo visitante e deixe menos escolhas à vista.
Esse, inclusive, é um preceito da análise heurística, atividade que faz parte da rotina de CRO e que foca em entender os potenciais problemas de uma interface e se ela atende a um conjunto de instruções para melhorar a conversão.
Também temos por aqui um template pronto que você pode utilizar para criar novas páginas. Utilize-o para começar da melhor forma possível fazendo o download abaixo.
De curioso a cliente
Um passo a passo eficiente para transformar seus visitantes em compradores
baixar e-book
