Como utilizar a hierarquia visual para criar páginas Web claras e fáceis de ler

Como utilizar a hierarquia visual para criar páginas Web claras e fáceis de ler

Como utilizar a hierarquia visual para criar páginas Web claras e fáceis de ler

Imagine que entrou numa caverna.

Os seus olhos adaptam-se lentamente ao ambiente e começam a distinguir as formas à sua volta.

Vê três portas: são iguais em tamanho e estão todas à mesma distância de onde se encontra. Como é que escolhe para onde ir primeiro?

Sente-se frustrado, porque não tem informação suficiente para tomar uma decisão. Tudo o que pode fazer é adivinhar.

Agora imagine que entrou numa segunda caverna.

Nesta, há uma grande porta à sua frente. Diz “Tours” e é larga e bem iluminada.

De um lado, há uma pequena porta com uma janela que diz “Tickets” (bilhetes). Ao seu lado, há uma porta sem descrição que diz “Employees only”.

Nesta caverna, sabe exatamente o que deve fazer.

Está aqui para uma visita guiada, por isso dirige-se à bilheteira, compra o seu bilhete e entra pela porta que diz “Tours”.

O seu site é como uma caverna escura

Tem a responsabilidade para com os visitantes do seu sítio de lhes mostrar o caminho e tornar o percurso claro.

Os visitantes que não estão confusos são mais fáceis de atrair ação que você quer que eles tomem no seu site, também.

Lembre-se, cada site que os seus leitores visitam é um pouco diferente do anterior. E sempre que chegam a um novo site, os visitantes passam os primeiros segundos a orientarem-se no novo ambiente.

Como proprietários de sítios, devemos tornar a transição o mais fácil possível.

Conduza-os pela sua página com hierarquia visual

Quando o seu site tem uma hierarquia visual clara, responde à velha questão que está na mente de todos os visitantes do site: “O que é que eu ganho com isso?”

E fá-lo destacando o que o seu sítio oferece para que o visitante veja imediatamente como é que isso o vai beneficiar.

Os olhos do seu visitante têm de percorrer a sua página para consumir a sua informação. Para os guiar sem esforço através desta tarefa, observe todas as suas páginas e configure-as utilizando os passos abaixo.

1. Organize as suas informações em categorias

Para cada página do seu sítio, divida a informação que planeia apresentar em três categorias, conforme descrito abaixo.

Mais importante

Cada página deve ter um elemento de informação “mais importante”. Esta é frequentemente o título ou imagem no topo.

Deve conduzir o visitante do seu site diretamente para a informação secundária ou de apoio, que será a essência da sua página.

Secundária ou de apoio

Esta informação baseia-se na informação mais importante.

Dá-lhe mais detalhes, partilha os pormenores e inclui o seu apelo à ação.

Menos importante

Esta é a informação que precisa de estar na sua página, mas não deve competir com a informação mais importante e secundária.

Inclui informações como avisos de direitos de autor e informações da barra lateral. Nos blogues, pode ser a biografia do autor e as secções de comentários.

2. Torne as suas categorias óbvias através de escolhas de design

Depois de ter categorizado a informação na sua página, o próximo passo é fazer escolhas de design que dêem à sua informação uma hierarquia visual clara.

Siga estas dicas para cada secção:

Mais importante

As suas informações mais importantes são um sinalizador que deve atrair e envolver. Deve ser a primeira coisa em que as pessoas reparam em cada página.

Para atrair os olhos dos visitantes do seu sítio para as suas informações mais importantes, escolha qualquer combinação destes “truques” visuais:

  • Posicione-a no topo da página
  • Torne-o maior
  • Aplique-lhe cores mais vivas (se for uma imagem, torne-a visualmente apelativa)
  • Adicione mais espaço em branco à sua volta

Secundário ou de apoio

É aqui que o visitante do seu site vai para obter os pormenores. Este é o coração da sua página, e o seu principal objetivo deve ser torná-lo fácil de ler e compreender.

Utilize estas dicas para o tornar claro e fácil de folhear:

  • Aplique generosamente a tecla “Return” no seu texto para dividir parágrafos longos em pedaços digeríveis
  • Utilize subtítulos para servirem de “postes de luz” visuais ao longo da sua página para guiar os leitores através do seu texto
  • Utilize citações de bloco para quebrar o texto e acrescentar interesse visual
  • Esqueça as vírgulas sequenciais e crie listas com marcadores, que são fáceis de folhear

Para mais informações sobre como tornar a sua informação de apoio fácil de folhear, leia 8 Maneiras incrivelmente simples de fazer com que mais pessoas leiam o seu conteúdo.

Menos importante

O que podemos dizer sobre a sua informação menos importante? Tem de lá estar, mas queremos que se desvaneça visualmente no fundo.

Se alguém a quiser encontrar, pode fazê-lo. Mas queremos que fique ali como um mordomo num evento formal do século XIX: pronto e à espera, mas na sombra.

Para conseguir isto visualmente, a sua informação menos importante deve ser:

  • Numa fonte mais pequena do que o seu texto principal. Considere utilizar um tipo de letra simples que não chame muita atenção e verifique se ainda é legível num tamanho pequeno.
  • Numa cor de baixo contraste. Considere utilizar um cinzento médio ou colocá-lo num fundo de tom médio para que “desapareça” um pouco.
  • Longe das suas principais áreas de conteúdo. Coloque uma distância física entre o seu texto principal e o seu conteúdo menos importante. Isto significa separar o seu rodapé com espaço em branco e adicionar algum preenchimento entre o seu conteúdo principal e a barra lateral.

Eu percebo que este passo é difícil. Uma coisa é pedir às pessoas que reduzam a informação sobre direitos de autor, outra é convencê-las a não chamar tanta atenção para a informação na barra lateral.

Mas um dos erros de design mais comuns que vejo são as barras laterais ocupadas que chamam demasiado a atenção para si próprias. Pense em reduzi-las para que o visitante do seu site tenha mais facilidade em ler e consumir a sua informação principal

3. Afaste-se e volte: o que é que vê?

Todos nós sofremos daquilo a que chamo “cegueira de design”, que é semelhante à cegueira editorial.

É aquele ponto do processo de criação em que já não consegue ver o seu trabalho objetivamente, e normalmente acontece depois de ter investido algum tempo na sua criação.

A solução para a cegueira de design? Afaste-se da sua página.

Dê-lhe um dia, ou pelo menos uma noite, antes de fazer os ajustes finais e publicar. Regresse com os olhos frescos e olhe novamente para ela.

Pergunte a si próprio:

  • Os meus olhos dirigem-se imediatamente para o item mais importante?
  • Desce naturalmente pelas informações de apoio?
  • A informação menos importante está presente na página, mas não em concorrência com os outros itens?

Se não conseguir responder afirmativamente às perguntas acima, faça ajustes. Volte ao Passo 2 acima e faça os ajustes necessários até que a sua hierarquia visual esteja clara.

Se estiver mesmo em apuros e tiver um amigo por perto, faça o seguinte: peça-lhe para se sentar em frente à sua página e narre em voz alta o que está a pensar enquanto navega por ela.

Se ele não tiver a certeza do que fazer quando chegar à sua página, sabe que ainda tem algum trabalho a fazer.

Reveja os passos acima e continue a ajustar até que a hierarquia visual da sua página seja clara.

Hierarquia visual: uma ferramenta poderosa e subtil

A hierarquia visual é uma daquelas técnicas de design que podem fazer a diferença nas páginas do seu sítio Web.

Quando a sua página usa o seu poder, é fácil de ler e compreender, e guia os visitantes sem esforço através da sua informação.

Quando não é bem utilizado – ou não é utilizado de todo – os seus visitantes ficarão com a sensação de que o seu site está desorganizado e é difícil de navegar.

Está pronto para usar a hierarquia visual?

Junte-se ao no Google+ e ligue-se a mim no Twitter.