6 conceitos de hierarquia visual para reter visitantes do site

Você já notou o quanto um chef de cozinha se preocupa com a apresentação do seu prato, tanto quanto o sabor, as texturas e os aromas? E as embalagens de muitos produtos, independente do quão bom eles são? As capas de livros, dos grandes discos de vinil do passado ou das revistas?

A importância da estética, do visual, da aparência que tem e é percebida em um primeiro contato, é determinante se o consumidor daquele produto vai além ou não, se ele é atraído e quem sabe até estenda o braço em direção à prateleira. Com um site, não é muito diferente.

É por essa razão que vamos tratar aqui do conjunto de aspectos de cunho visual que podem fazer toda a diferença quanto ao consumo do conteúdo que você tem no site e que se conhece por hierarquia visual.

O papel da comunicação visual em sites

Comunicação visual é o conjunto de estratégias e técnicas que fazem uso de elementos visuais diversos (imagens, cores, tipografica, layout, etc), para transmitir alguma – ou até mais de uma – mensagem de forma rápida.

Os conceitos de comunicação visual são conhecidos e praticados há muito tempo em várias áreas, especialmente no Marketing e Publicidade.

De modo bastante simplista, o primeiro e mais importante objetivo, é transmitir alguma informação rapidamente, em apenas uma passada de olhos por parte do receptor, ou alvo da comunicação.

O resultado almejado deve estimular o indivíduo a ir além, produzindo curiosidade, desejo, despertando atenção, interesse, ou qualquer sensação que faça-o dedicar uma parte do seu tempo àquela peça.

Não é nossa pretensão esgotar o assunto, o qual é extremamente amplo e se apoia em estudos e pesquisas em áreas como psicologia, neurologia, cognição, entre outras.

Em vez disso, vamos abordar pontos e fundamentos que se bem aplicados, podem contribuir de modo importante para o consumo do conteúdo que você tem em seu site. Isso porque há uma série de estudos que concluem que mais da metade dos visitantes de um site, dedicam até 15 segundos correndo os olhos e avaliando um site, para decidir se vão além ou retornam para onde vieram, que pode ser uma página de resultados de busca (SERP) ou outro site que continha um link para o seu.

Esse é o tempo máximo que você tem para comunicar algo de valor para aquele visitante e conquiste sua atenção. Naturalmente e dependendo do tipo de conteúdo que você tem, não será um longo texto que vai convencê-lo a ficar! Você tem que apelar para outras coisas!

Por isso, nesse bate-papo, vamos nos concentrar especificamente naquilo que é chamado de hierarquia visual de um site.

6 aspectos de hierarquia visual para conquistar a atenção do visitante do site

Os aspectos que apresentaremos a seguir, podem produzir resultados variáveis de acordo com o tipo de site, a habilidade na sua adoção, ou a combinação entre eles.

É preciso sobretudo, bom senso. Aplicar tudo em todo e qualquer site, não é garantia de nada. Inclusive, exagero pode resultar em ineficiência e não atrair o visitante como se pretende.

Portanto, não são regras absolutas, cabendo ao administrador, ao web designer, observação e mensurar os resultados após cada modificação implementada, afinal diferentes públicos tendem a ser impactados em diferentes graus por cada aspecto.

Sabe-se por exemplo, que gerações mais novas são mais influenciadas por imagens e que os mais velhos, consomem mais textos, o que deve fazê-lo considerar o contexto do site, como por exemplo, o público-alvo ou a persona, o tipo de conteúdo e até o tipo de site, afinal um fórum de discussão é estruturalmente e visualmente diferente de um blog.

1. Padrão “F” e “Z”

Como o nome faz supor, hierarquia visual relaciona-se com o que prevalece em termos visuais quando alguém observa algo.

Especialmente nas culturas ocidentais, as pessoas leem a partir da esquerda para a direita e de cima para baixo. É principalmente por essa razão, que o canto esquerdo superior de qualquer página de site, é das primeiras coisas a ser observada e por isso que é geralmente onde se posiciona o logotipo de praticamente qualquer site.

Há raras exceções, como a página da busca do Google. No entanto, compreende-se que sendo uma página bem minimalista, a quantidade de elementos que podem atrair a atenção, não concorre com o logotipo da marca.

Mais recentemente e com razoável consenso a respeito, acredita-se que predominem duas formas de se avaliar um conteúdo de uma página por parte de um visitante, seguindo os formatos das letras “F” e “Z”.

O padrão baseado no formato do “F”, acontece em páginas mais pesadas, com predominância de texto, como é o caso de artigos ou posts de um blog.

Assim, o visitante tende a ler o título principal, o começo do primeiro parágrafo e eventualmente algum subtítulo e palavras-chave relacionadas com o que buscava ao acessar a página.

Já no caso de um passar de olhos seguindo o formato da letra “Z”, ele ocorre em páginas com blocos de conteúdos mais diversos, onde a informação não está organizada vertical e sequencialmente como em parágrafos de um texto.

O movimento do leitor concentra-se primeiro no topo da página, da esquerda para a direita e depois desce em direção à diagonal oposta, repetindo-se na parte inferior, da esquerda para direita.

Ou seja, posicionar os elementos mais importantes, chamativos e que contém informações mais relevantes e atraentes ao longo dessa linha, aumentam as chances de conseguir alguma atenção.

2. Tamanho e escala

O tamanho é outro fator que deve ser usado para atrair os olhos do visitante, já que coisas ou elementos grandes, especialmente quando a diferença de tamanho é evidente, produzem destaque.

Quando mesmo um texto, parte dele ou apenas uma só palavra aparece em tamanho maior, ela destaca-se e dependendo o caso, pode até mesmo quebrar a “regra” da observação em padrão “F” ou “Z”.

Destacar coisas pelo tamanho que têm, também dá ênfase e significância ao elemento, fazendo com que o visitante suponha que seja um elemento de maior valor.

Já a escala, que tem a ver com diferentes proporções entre diferentes elementos, pode ser usada para a hierarquizar o valor que esses elementos têm. Fica mais claro perceber isso, quando vemos uma imagem de nuvem de tags, em que é maior a escala quanto maior é a relevância de uma palavra em relação às demais.

3. Cores

O uso adequado das cores no site, também influencia a hierarquia visual.

Naturalmente o vermelho, especialmente quando contrasta com a cor de fundo, branco por exemplo, chamará mais atenção que o preto ou azul escuro.

As cores brilhantes são mais propensas a chamar a atenção do que os tons pasteis.

Há também cores que quando combinadas e usadas com propósitos específicos, pressupõe situações que vivenciamos quotidianamente. Assim, o vermelho, amarelo e vermelho, podem indicar um semáforo e por sua vez, pare, fique alerta e prossiga, respectivamente.

Essa analogia – do vermelho, amarelo e verde – é bastante comum até mesmo em sistemas operacionais, onde ícones ligados a alertas do sistema, usam as três cores para indicar um problema, uma situação que requer atenção e uma proibição ou erro.

Pela mesma razão, boa parte dos sites de e-commerce usam o botão associado a compra, na cor verde.

Já os tons de cinza, costumam estar associados a neutralidade, inatividade, monotonia e serem cansativos para leitura, especialmente quando o conteúdo de texto for extenso.

Mas tão importante quanto escolher e usar cores, é preciso saber contrastá-las. Um site inteiro em tons de cinza, preto e branco, pode até ter um efeito visual interessante, mas dificilmente conseguirá chamar atenção para algum elemento usando contraste. Mas uma simples palavra em amarelo em fundo preto, mesmo em fonte pequena, quase grita aos olhos do observador.

4. Tipografia

Outro elemento fundamental na hierarquia visual e intimamente relacionado com o que falamos até aqui, é a tipografia ou as fontes usadas no site.

Tem relação com o que já vimos, porque não basta escolher uma fonte esteticamente agradável e que combine com o layout e design. Também não é questão de ser moderna ou conservadora, ou tampouco pelo fato de ser mais ou menos legível.

Tudo isso importa, é claro. Mas estamos falando de dar destaque ao que importa, variando tamanho e escala, cores e contraste e posicionar tais textos nas linhas dos formatos de “F” ou “Z”.

Além disso, negrito, itálico e tamanhos relacionados com títulos, ajudam na ênfase que o conteúdo relacionado deve ter.

Até mesmo usar uma fonte diferente daquela usada como padrão ou que predomina no site, pode ser um recurso de hierarquizar um determinado conteúdo.

5. Espaçamento, repetição e alinhamento

Por contraditório que possa soar, espaços contém informação. É ele que separa um parágrafo do outro, por exemplo, o que inconscientemente na cabeça do leitor, está subentendido. Ou ainda em uma diagramação em duas colunas de texto, indica a ordem de leitura.

O espaço em branco – também chamado de espaço negativo – não é necessariamente o que está na cor branca, mas o que está vazio ou sem texto, imagens, ícones, botões ou qualquer outro elemento do site.

É também automaticamente pressuposto que espaço ou distância menor entre dois elementos, torna-os mais semelhantes que os que estão mais espaçados.

Além da legibilidade, espaços ajudam a compor o layout e o design.

Mas sob a ótica da hierarquia visual, isolar um elemento qualquer com espaços em branco, automaticamente consegue-se atrair a atenção do visitante para ele.

Tal como os espaços em branco, a repetição de elementos, também “diz” alguma coisa – mesmo que inconsciente – ao visitante. Elementos que se repetem – como botões ou subtítulos – dizem ao leitor que são semelhantes ou que desempenham mesmo papel.

Já no caso do alinhamento, uma quebra nele, pode por exemplo, indicar um elemento diferente e, portanto, que merece atenção ou ainda que tem uma hierarquia diferente.

O conceito de alinhamento pode parecer um tanto abstrato, especialmente para quem não tem familiaridade com o assunto, porque não se restringe apenas se você adota um texto justificado, centralizado ou alinhado à esquerda.

Fica mais claro, quando se observa um layout em três colunas, em que temos um menu de navegação à esquerda, o texto ao centro e banners de publicidade à direita e tudo isso fica evidente, pelo uso de espaços em branco separando esses blocos de conteúdos.

6. Imagens

Não é por outra razão que se diz que “uma imagem vale por mil palavras”!

Na verdade uma boa imagem, pode valer até por mais…

Escolher, produzir e posicionar boas imagens é um importante recurso de captação da atenção do visitante.

Olhares diretos, pessoas atraentes, com expressões faciais fortes, felicidade, paz, harmonia e amor, são algumas das situações e sentimentos que se uma imagem suficientemente expressiva consegue transmitir, torna-se cativante e capaz de fazer o visitante dedicar uma fração do seu tempo.

Ou seja, naquele instante de atenção dispensada pelo visitante a uma boa imagem, ele pode sentir-se curioso quanto a o que aquele conteúdo tem a dizer-lhe e como se relaciona com ela.

No entanto, é preciso que haja conexão com o conteúdo da página, afinal de nada adianta um linda foto que nada tem a ver com o restante. Vai parecer clickbait.

Conclusão

Captar a atenção do visitante em poucos segundos e fazê-lo decidir se permanece na página ou se clica no botão de voltar, requer o uso de hierarquia visual.