Design para conversão: três princípios que levam o visitante até a ação
Como usar hierarquia visual, regra dos terços e espaço em branco para deixar claro o próximo passo, e o que a Lei de Hick ensina sobre o número de opções na tela.
Karine Sackt · Designer de landing pages e fundadora da Fysi Lab Digital
· Atualizado em · 6 min de leitura
Neste artigo
- O que é design para conversão?
- Hierarquia visual: o que o visitante vê primeiro
- Regra dos terços: onde posicionar o assunto da imagem
- Espaço em branco: o respiro que dá peso ao conteúdo
- Lei de Hick: menos opções, decisão mais rápida
- Perguntas frequentes
- Um layout desenhado para o visitante chegar ao botão
Design para conversão é o design que organiza a página para o visitante entender a oferta e dar o próximo passo: preencher o formulário, chamar no WhatsApp ou comprar. Três princípios sustentam esse trabalho: hierarquia visual, regra dos terços e espaço em branco. A Lei de Hick completa a lista, ao tratar da quantidade de opções que a tela oferece.
| Princípio | O que faz pela conversão | Como aplicar |
|---|---|---|
| Hierarquia visual | Mostra o que ler primeiro e onde clicar | Título em destaque e cor própria para o preço e o botão |
| Regra dos terços | Deixa a imagem atraente e explicativa | Assunto principal sobre as linhas ou nos cruzamentos da grade |
| Espaço em branco | Dá peso ao conteúdo e facilita a leitura | Área vazia em volta de títulos, imagens e botões |
| Lei de Hick | Encurta o tempo de decisão | Menos opções à vista em cada tela |
O que é design para conversão?
Design para conversão é a união da estética com uma experiência de uso fluida, que coloca o usuário no centro e trata a usabilidade com seriedade. Todo site criado para gerar contatos ou vendas precisa desse cuidado. Beleza sozinha resolve pouco: a página bonita que esconde o conteúdo ou o botão principal perde o visitante na hora em que ele ia agir.
Em 2021, a loja virtual das Havaianas mostrava os dois lados. A estética era impecável. O layout, porém, deixava o site pesado e, em alguns momentos, elementos da página cobriam o botão principal. Os demais exemplos citados aqui foram observados na mesma época.
Trate os princípios a seguir como direções para criar uma boa experiência. A confirmação vem do teste: uma rotina de experimentação mostra quais formatos e ideias convencem a sua audiência. Veja como rodar um teste A/B e, se a sua empresa vende para outras empresas, como esses cuidados se aplicam a sites B2B.
Hierarquia visual: o que o visitante vê primeiro
A hierarquia visual é a ordem de importância dos elementos da página, e ela dá ao visitante as pistas para se orientar. O título fica em destaque porque carrega o conteúdo mais importante e traduz a oferta. A página inicial do Evernote, aplicativo de organização, trazia a proposta de valor no título e completava a explicação no subtítulo.
O tamanho marca a hierarquia, e a cor também. A Mobly, loja virtual de móveis e itens para casa, usava uma cor diferente para destacar o preço e o botão de chamada para ação (CTA).
Para montar a hierarquia do seu site, decida onde você quer que o visitante clique. Um formulário de cadastro pesa mais que o link para a página “Sobre”. Conhecer o fluxo de navegação dos usuários ajuda nessa decisão.
Nos dois exemplos, a ordem era fácil de entender e a estética continuava preservada. Quem abria a página sabia qual era o próximo passo e encontrava as informações necessárias. O texto completa o trabalho: veja o que é microcopy e como as pequenas frases da interface ajudam a converter.
Regra dos terços: onde posicionar o assunto da imagem
Imagens ajudam o visitante a contextualizar a oferta, e a regra dos terços orienta a composição delas. Duas linhas horizontais e duas verticais dividem a imagem em nove partes iguais. O assunto principal fica sobre uma dessas linhas ou em um dos pontos em que elas se cruzam, fora do centro.
Uma página do Basecamp, sistema de gestão de projetos, exibia um exemplo claro do software em funcionamento. No site da Conta Azul, sistema de gestão financeira para empresas, uma imagem seguia a regra dos terços e, ao mesmo tempo, apresentava um pouco do produto.
Espaço em branco: o respiro que dá peso ao conteúdo
Espaço em branco é a porção da página que fica vazia. Esse respiro permite que o visitante compreenda cada elemento e evita a sobrecarga de informação. Ele serve para destacar gráficos, imagens, títulos, cores e botões.
Uma página completamente cheia parece desordenada e dá preguiça de ler, como acontece em muitos jornais e portais de notícia. Com o texto muito apertado, o leitor tem dificuldade para manter o foco. Veja como a legibilidade do site afeta a conversão.
Abrir espaço preserva o conteúdo. O respiro dá mais peso ao que já existe e aumenta a chance de cada informação ser lida e entendida. A página de produto da Tok&Stok era um exemplo clássico: o espaço em branco destacava as informações que importam para a compra.
Lei de Hick: menos opções, decisão mais rápida
Segundo a Lei de Hick, quanto mais opções uma pessoa tem à disposição, mais tempo ela leva para decidir. O princípio leva o nome do psicólogo britânico William Edmund Hick, que o descreveu em 1952.
A lei vai além do design e alcança todas as frentes de criação de uma interface: quais e quantos produtos mostrar, que tamanho dar ao conteúdo, quantas imagens incluir. Sempre que puder, faça o esforço pelo visitante e deixe menos escolhas à vista.
A quantidade de escolhas também entra na análise heurística, atividade da rotina de CRO (otimização da taxa de conversão) que procura os problemas em potencial de uma interface e confere se ela atende a um conjunto de critérios ligados à conversão.
Perguntas frequentes
Site bonito converte mais?
Beleza ajuda quando vem junto com usabilidade. O design para conversão une a estética a uma experiência fluida, com o usuário no centro. Um layout impecável que deixa o site pesado ou cobre o botão principal atrapalha a ação. O visitante precisa entender a oferta e enxergar o próximo passo.
O que é hierarquia visual em um site?
Hierarquia visual é a ordem de importância dos elementos da página, marcada por tamanho e cor. O título fica em destaque porque traduz a oferta, e o botão principal ganha uma cor que o separa do resto. Para definir a hierarquia, decida primeiro onde você quer que o visitante clique.
Espaço em branco significa tirar conteúdo da página?
O conteúdo fica. O espaço em branco é a área vazia em volta dos elementos, e ela dá mais peso ao que já está na página. Com respiro entre títulos, imagens e textos, o visitante lê com mais foco e entende melhor as informações que importam.
O que é a Lei de Hick?
A Lei de Hick é o princípio segundo o qual o tempo de decisão cresce com o número de opções disponíveis. No site, ele orienta a quantidade de produtos, de conteúdo e de imagens em cada tela. A aplicação prática é deixar menos escolhas à vista e facilitar o caminho até a ação principal.
Um layout desenhado para o visitante chegar ao botão
A Fysi Lab Digital cria sites e landing pages com copy, design no Figma e construção em WordPress, e faz o redesign de sites que já estão no ar. Veja a criação de sites, o redesign de sites e os projetos no portfólio.
