Hierarquia visual de elementos
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.
Quem leu isto também leu:
Fernando Rossetto é desenvolvedor de interfaces formado pelo Centro Universitário Senac. Sua area de estudo gira em torno de desenvolvimento de intefaces, web 2.0, web 3.0 (semântica), arquitetura de informação, usabilidade e ergonomia em interfaces.
Acesse seu site Siga no Twitter
Pingback: Tweets that mention Hierarquia visual de elementos | Design.Blog.br -- Topsy.com