[Dsg Blog] Hierarquia visual de elementos

[Jvchequer 63]

Uma das maiores frustações dos internautas acontece quando a interface do site não os levam em direção a informação que eles precisam saber. Normalmente problemas desse tipo acontecem em sites onde o volume da informação rotativa é grande.

 

 

 

Para definir melhor o problema, a partir de agora o chamaremos  de falta de heirarquia visual. Em outras oportunidades já falei um pouco sobre isso, mas, agora eu pretendo aprofundar um pouco mais no assunto.

 

A heirarquia visual propõe um caminho para a visualização do conteúdo de acordo com a sua importância, comparada com as demais. Algumas palavras ou trechos são essenciais para o entendimento do contexto, ou seja, existem palavras que devem ser vistas primeiro, outras em segundo e assim por diante.

 

Como, pode se ver na imagem ao lado, existe um comparativo entre elementos com uma heirarquiva gráfica definida com outros que não seguem um padrão de leitura.

 

Alguns elementos pesam graficamente (certamente foi a primeira imagem que você olhou) mais do que os outros, como podemos perceber a heirarquia visual tem um forte apelo para o design gráfico, os elementos com maior destaque guia os usuários para o resto das informações de acordo com a sua evolução.

 

Quando essa heirarquia visual é evidente e direta, o usuário navega pelo site com grande clareza e objetividade, de certa forma, isso é criar meios coerentes para que os usuários tenham uma boa experiencia durante a navegação no seu site.

 

Informações objetivas os motivam a passar mais tempo no site procurando por outras informações que lhe podem ser uteis.

 

 

Peso Visual

O peso visual dos elementos reforçam a heirarquia dos mesmos. Criando contrastes de cores, posicionamento e tamanho dos elementos, podemos atribuir mais importância para alguns objetos, como eu já citei em outro artigo, o UX bem feito se parece com uma conversa, flui naturalmente.

 

 

No caso da heirarquia visual partimos do mesmo princípio, o conjunto visual é como se fosse uma narativa, se conseguirmos explicar bem os pontos chaves da história, ela é facilmente entendida e passada adiante.

 

Por exemplo, não deixando espaço suficiente entre as linhas de texto, você pode inadvertidamente criar uma seção que é visualmente densa e muitas vezes mais difícil de ler e distrair heirarquia visual estabelecida.

 

Ao aplicar o espaçamento adequado, você permite que o texto para respire e as posições ao redor também, imagens e texto para mantém a sua prioridade e equilíbrio em relação ao texto.

 

Por meio destes elementos podemos melhorar muito a experiência do usuário em busca de uma determinada informação, em meio a milhares de informações perdidas na web, cabe a nós UX designers tornar esse mundo virtual um lugar melhor.

 

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

 

.

Artigos relacionados

• Re-desenhando um site (dica)
• Erros em web design que devem ser evitados
• Criando wireframes online
• Princípios e boas maneiras de user experience
• Design Blog Podcast – Episódio 02

</img> </img> </img>

 

View the full article