Princípios de design de sites que funcionam
Muito do que se diz sobre design de sites é preferência apresentada como princípio. Há, no entanto, um pequeno conjunto de regras que aguenta o teste da prática e que se nota quando falta.
Este guia percorre essas regras, com o que cada uma resolve e como verificar se está a ser cumprida.
Hierarquia: dizer o que é mais importante#
A hierarquia é o princípio que mais afeta se as pessoas percebem a página, e o mais fácil de verificar.
- Uma coisa é a mais importante em cada ecrã. Se houver três, o visitante não escolhe nenhuma.
- O tamanho, o peso e o espaço à volta comunicam importância melhor do que a cor.
- A ação principal deve destacar-se visualmente de tudo o resto na página.
- Agrupe o que está relacionado com proximidade; a distância comunica separação.
- Não use mais de dois ou três níveis de título. Mais níveis deixam de ser lidos como hierarquia.
- Teste franzindo os olhos: o que continua legível é o que as pessoas veem primeiro.
O teste dos olhos semicerrados demora cinco segundos e apanha a maioria dos problemas de hierarquia.
Espaço, contraste e legibilidade#
Três coisas mensuráveis que separam páginas confortáveis de páginas cansativas.
| Elemento | Regra prática | Erro comum |
|---|---|---|
| Comprimento de linha | 60 a 80 caracteres | Linhas a toda a largura do ecrã |
| Tamanho do corpo | 16 px ou mais em móvel | 14 px «para caber mais» |
| Entrelinha | 1,5 no corpo de texto | Entrelinha apertada, texto denso |
| Contraste de texto | Pelo menos 4,5:1 | Cinzento claro sobre branco |
| Espaço entre secções | Generoso e consistente | Tudo colado, sem respiração |
| Alvos de toque | Mínimo 44 px | Ligações pequenas em móvel |
| Número de tipos de letra | Um ou dois | Quatro tipos numa página |
Consistência e clareza#
A consistência é o que permite às pessoas aprenderem o site uma vez em vez de o reaprenderem em cada página.
- O mesmo elemento comporta-se sempre da mesma maneira em todo o site.
- Botões de igual importância têm sempre o mesmo aspeto.
- As ligações são identificáveis como ligações sem ser preciso passar o rato por cima.
- Os rótulos dizem o que acontece: «Pedir orçamento» em vez de «Enviar».
- Escreva em linguagem de cliente, não em linguagem interna.
- Erros de formulário aparecem junto ao campo e dizem como corrigir.
- Elementos que não são clicáveis não devem parecer clicáveis.
A regra dos rótulos é a que dá mais retorno: mudar «Enviar» para «Pedir orçamento» aumenta conversões sem alterar mais nada.
O que é gosto e não princípio#
Regras repetidas que não resistem aos dados e que custam tempo a discutir.
| Afirmação | Realidade |
|---|---|
| Tudo tem de estar acima da dobra | As pessoas fazem scroll; a clareza importa mais |
| Menos cliques é sempre melhor | Cliques certos batem cliques poucos |
| O carrossel na entrada é obrigatório | Costuma ter interação muito baixa |
| Minimalismo é sempre melhor | Contexto insuficiente prejudica a decisão |
| Nunca abrir ligações em nova janela | Depende do contexto; documentos são exceção |
| O vermelho é agressivo | Depende inteiramente do setor e da cultura |
| A página tem de ser original | A familiaridade ajuda a usar o site |
Padrões familiares não são falta de criatividade: são o motivo pelo qual as pessoas sabem usar um site que nunca viram.
Perguntas frequentes
Um site bonito converte mais?
Um site claro converte mais; a beleza ajuda pela credibilidade que transmite nos primeiros segundos. Onde a estética falha é quando compete com a compreensão — animações que atrasam, contrastes baixos em nome da elegância, rótulos criativos que ninguém percebe. Clareza primeiro, estética a servir a clareza.
Quantas cores devo usar?
Uma cor de marca, uma cor de destaque para ações, e uma escala de cinzentos. Depois disso, cada cor extra precisa de justificação funcional — estados de erro, de sucesso, de aviso. Paletas grandes tornam difícil destacar o que importa, porque tudo compete com tudo.
Devo seguir tendências de design?
Com moderação. Tendências datam o site e obrigam a redesenhos por razões estéticas em vez de funcionais. O que envelhece bem é tipografia clara, espaço generoso e hierarquia sólida — princípios com décadas. Adote tendências onde são baratas de reverter e evite-as na estrutura.
Como sei se o meu design está a funcionar?
Olhe para o comportamento: as pessoas chegam à ação principal, ou abandonam? Onde param nos formulários? Gravações de sessão e análise de formulários mostram isto em minutos. A opinião interna sobre estética é o pior indicador disponível, porque a equipa vê o site todos os dias e os visitantes uma vez.
princípios design sitehierarquia visuallegibilidade webcontraste textousabilidade sitedesign conversão
