[Artigo] Hierarquia visual de elementos

[João Prado 64]

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.

 

 

 

 

 

Fonte

[Pantoja 5]

ótima materia cara, muitos nem ligam para a hierarquia visual, saem tacando texto e imagens em qquer lugar pois julgam que basta colcar as informações que o user se vira... sabemos que noa é bem assim que funciona, parabens!

[Bruno Augusto 417]

Excelente artigo http://forum.imasters.com.br/public/style_emoticons/default/clap.gif

 

Não sou designer, mas tenho um senso crítico elevadíssimo (e às vezes irritante) e muitas vezes dá coceira de ver sites que não respeitam um Hierarquia Visual.

 

Já outros que respeitam, mas cometem pequenas gafes, principal, mas não exclusivamente, espaçamentos incoerentes entre elementos, alinhamentos verticais e entre-linhas, tornam a experiência tanto de quem usa, quanto até mesmo de quem avalia (aqui pelo fórum mesmo), frustrante ou desmotivante pois, iniciante ou não, sabe-se que a pessoa se esforçou na composição da página, mas não foi meticulosa o suficiente para perceber detalhes sutis, porém importantes.