Quando um visitante chega ao teu website, os olhos não leem a página de cima para baixo, por ordem. Percorrem-na por alto, saltando entre os elementos que se destacam. A hierarquia visual é o princípio de design que controla o que notam primeiro, em segundo e em terceiro lugar. Sem ela, até o conteúdo bem escrito se perde, porque nada guia o olhar para o que mais importa.
A hierarquia visual num website é a organização deliberada dos elementos por tamanho, cor, contraste, espaçamento e posição, para que os visitantes se concentrem naturalmente primeiro na informação mais importante. Determina se alguém percebe a tua proposta de valor em segundos ou sai confuso sobre o que o teu negócio oferece. Acertar na hierarquia é uma das decisões de design com maior impacto que podes tomar.
Porque é importante a hierarquia visual?
Os visitantes demoram, em média, alguns segundos a decidir se ficam numa página. Nesse tempo, não estão a ler parágrafos. Estão a percorrer títulos, imagens e botões para perceber se é relevante. Uma página com forte hierarquia visual comunica o seu objetivo de imediato. Uma página sem ela obriga os visitantes a esforçar-se mais, e a maioria não se vai dar ao trabalho.
A hierarquia também leva à ação. Quando o apelo à ação principal é visualmente dominante, mais visitantes clicam nele. Quando se mistura com o conteúdo à volta, as taxas de conversão descem. A relação entre hierarquia visual e resultados de negócio é direta: uma hierarquia clara produz caminhos mais claros para as ações que queres que os visitantes tomem.
Que ferramentas criam hierarquia visual?
Os designers usam um conjunto consistente de propriedades visuais para estabelecer prioridades. Cada uma pode ser ajustada de forma independente ou combinada para um efeito mais forte.
Tamanho
Os elementos maiores atraem a atenção primeiro. Um título principal com 36 píxeis chama o olhar antes do texto do corpo com 16 píxeis. As diferenças de tamanho entre níveis de título criam uma ordem de leitura clara. Quando tudo na página tem mais ou menos o mesmo tamanho, nada se destaca e os visitantes não têm ponto de entrada.
Cor e contraste
Os elementos de alto contraste sobre um fundo neutro exigem atenção. Um botão brilhante numa página branca é impossível de não ver. Os elementos de baixo contraste recuam. Usa a cor principal da tua marca com moderação, nos elementos que mais importam: o título principal, o apelo à ação principal e as estatísticas ou testemunhos importantes. O conteúdo à volta deve usar tons neutros que apoiem, em vez de competirem.
Espaçamento e espaço em branco
Os elementos rodeados de espaço em branco parecem mais importantes do que os elementos muito juntos. Um espaçamento generoso à volta de um botão de apelo à ação sinaliza que merece atenção. Os esquemas apertados fazem tudo parecer igualmente urgente, o que quer dizer que nada parece urgente. O artigo sobre como usar o espaço em branco no teu website trata deste princípio de forma prática.
Posição
Os visitantes percorrem as páginas web em padrões previsíveis, normalmente começando no canto superior esquerdo e descendo. O conteúdo mais importante pertence ao topo da página e, em telemóvel, acima da dobra.
Como aplicar a hierarquia visual num website de negócio
Uma hierarquia forte segue um padrão consistente em todos os tipos de página. Os detalhes mudam, mas a estrutura mantém-se.
Hierarquia da página inicial
A página inicial precisa da hierarquia mais clara de todo o site, porque serve o público mais vasto. O título principal diz o que o negócio faz. Um botão de apelo à ação principal fica em destaque logo abaixo. O artigo sobre como fazer o teu website parecer profissional trata de como a hierarquia se encaixa no objetivo mais amplo de um aspeto cuidado. O artigo sobre o que é o design de UX explica como a hierarquia se liga à experiência mais ampla do visitante.
Como a WEMASY trata da hierarquia visual
Os modelos da WEMASY são construídos com a hierarquia visual como princípio de design central. Os tamanhos de título, o estilo dos botões, o espaçamento predefinido e os esquemas dos blocos de conteúdo estão estruturados para que os elementos mais importantes se destaquem naturalmente. O editor visual permite ajustar a hierarquia mudando níveis de título, estilos de botão e espaçamento das secções, mantendo intacta a estrutura de base em computador e telemóvel.
Vê o que está incluído no criador de websites da WEMASY ou consulta os planos na página de preços.
Perguntas frequentes
O que é a hierarquia visual num website?
A hierarquia visual é a organização dos elementos da página para que os visitantes notem primeiro a informação mais importante. Tamanho, cor, contraste, espaçamento e posição contribuem todos para estabelecer essa ordem. Com o criador de websites da WEMASY, podes configurar isto diretamente no teu website.
Porque é importante a hierarquia visual para as conversões?
Uma hierarquia clara guia os visitantes para a ação que queres que tomem. Quando o apelo à ação é visualmente dominante e a proposta de valor é visível de imediato, mais visitantes percebem o que fazer e seguem até ao fim. Sem hierarquia, os apelos à ação perdem-se entre elementos que competem.
Como sei se a minha página tem boa hierarquia visual?
Semicerra os olhos para a página ou vê-a ao longe. O elemento que mais se destaca deve ser o teu título principal ou o apelo à ação principal. Se nada se destaca, ou se domina o elemento errado, a hierarquia precisa de ajuste. Pede a alguém que não conhece o teu site para identificar a mensagem principal em cinco segundos.
Qual é a diferença entre hierarquia visual e esquema?
O esquema determina onde os elementos são posicionados na página: colunas, grelhas e ordem das secções. A hierarquia visual determina quais desses elementos atraem primeiro a atenção, através do tamanho, da cor e do contraste. Uma página pode ter um esquema lógico mas má hierarquia, se todos os elementos competirem por igual pela atenção.
A hierarquia visual funciona da mesma forma em telemóvel?
Os princípios são os mesmos, mas a aplicação é diferente. Os ecrãs de telemóvel mostram menos conteúdo de uma vez, por isso a hierarquia tem de ser mais apertada. Empilha os elementos na vertical por ordem de prioridade. Garante que o título principal e o apelo à ação principal aparecem antes de o visitante descer. Reduz o número de elementos concorrentes em comparação com a versão de computador.
Os modelos podem dar uma boa hierarquia visual?
Sim. Os modelos bem desenhados estabelecem a hierarquia através da estrutura de títulos, do estilo dos botões e do espaçamento predefinido. A personalização deve trabalhar dentro dessa estrutura, e não anulá-la. Mudar um título para um tamanho muito maior ou acrescentar vários botões de cores vivas pode quebrar a hierarquia que o modelo oferece.