Hierarquia visual é um dos princípios mais importantes por trás de um design eficaz. Este artigo irá examinar por que o desenvolvimento de uma hierarquia visual é crucial para o web design, a teoria por trás disso e como você pode usar alguns exercícios básicos em seus próprios projetos para colocar esses princípios em prática.
Design = Comunicação
Na sua essência, o projeto é toda a comunicação sobre o visual: para ser um designer eficaz, você tem que ser capaz de comunicar claramente suas ideias para os usuários, ou então irá perder a atenção deles. Pessoas são volúveis – e se você lhes der um bloco maciço de informações, as chances são de que 99 em cada 100 pessoas não se preocupem em ler o conteúdo do seu site/blog. Por quê? Porque a maioria das pessoas pensa muito mais visualmente do que processando dados e informações.
Para descobrir por que isso é verdade, é importante entender um pouco sobre a maneira como as pessoas vêem as coisas. Ao invés de pegar as informações visuais e processá-las de maneira uniforme, elas organizam o que vêem em termos de “relações visuais”. Veja a imagem a seguir com atenção:
Ao ver esta imagem, você não pensa inicialmente em dois círculos; em vez disso, você processa algo como "um círculo preto ao lado de um círculo vermelho menor". A razão é muito simples: quando apresentado a algo tão simples, uma pessoa vai tentar encontrar uma maneira de diferenciar os dois. Um círculo pode ser maior ou menor, ou de uma cor ou de outra, e estas diferenças nos permitem distinguir entre objetos e dar-lhes significados únicos.
Vamos agora olhar para uma imagem mais complexa:
Provavelmente, agora você classificou a imagem acima como "um conjunto de círculos e um quadrado". Isso é normal. A complexidade na verdade reforça o nosso desejo de “classificar” os objetos em termos de relacionamentos. Diferenças de escala sugerem que um objeto está mais perto de nós do que o outro ou que um é mais dominante do que o outro; Variações na cor podem sugerir que um objeto tem uma personalidade única que o diferencia de outro objeto. Muita informação pode ser entregue em apenas uma única imagem usando algumas ferramentas muito rudimentares. Entender que as pessoas vão ver nossos projetos em termos relacionais é fundamental para fazer de você um designer melhor e mais eficaz.
Mas vamos voltar ao Web Design. Embora possa parecer que criar diferenciações ou semelhanças seja o suficiente para repartir informações, a nossa tarefa como web designers é a de quebrar essas informações em pequenos pedaços visuais e relevantes para tornar a comunicação mais eficaz na hora de passar uma mensagem.
Os princípios da Hierarquia
Há uma centena de explicações sobre o porquê as pessoas vêem as coisas em relacionamentos. Talvez a explicação mais prática seja que essa é simplesmente a maneira mais fácil que nossos cérebros utilizam para categorizar informações: agrupando elementos visuais similares e organizando-os em padrões significativos.
Considere a seguinte imagem de dois blocos de texto:
No exemplo acima, vemos a forma mais rudimentar de um sistema de hierarquia visual aplicada ao texto. As informações em cada um dos dois exemplos não é diferente, mas como ele foi "quebrado" com títulos isso muda dramaticamente a maneira como o percebemos. Quando falamos de hierarquia visual em termos de tipografia, isso é o que queremos dizer. A proximidade, a escala e a semelhança da formatação de texto permite que o leitor o organize mentalmente na busca da melhor leitura. A hierarquia dá aos títulos mais significado do que a outra informação, e torna a distinção entre a chamada e o conteúdo mais fácil para ser processado visualmente.
Tudo bem, até agora isso é tudo muito básico, certo? Vamos dar um mergulho em alguns exemplos mais profundos de como você pode aplicar este princípio básico para alguns projetos mais sofisticados:
As ferramentas hierárquicas
O Tamanho
Os objetos que são maiores demandam mais atenção. Utilizar o tamanho como hierarquia é uma forma interessante de guiar o olhar de um leitor a uma área específica da página. Como essa ferramenta é uma das mais poderosas formas de organização, é importante correlacionar tamanho com importância em um projeto. Os maiores elementos devem ser os mais importantes na maioria dos casos, e os menores elementos deve ser o menos importantes.
Site da C&A coloca tamanhos diferentes nos elementos que deseja destacar primeiramente e secundariamente. Um pouco de contraste aqui ajudou a reforçar esse destaque.
A Cor
A cor é uma ferramenta interessante, pois pode funcionar tanto como uma ferramenta organizacional, bem como uma ferramenta de personalidade. Cores fortes e contrastantes em um elemento particular de um site vão exigir atenção (por exemplo, com botões ou mensagens de erro ou hiperlinks). Quando usado corretamente, a cor pode se tornar um dos mais sofisticados tipos de hierarquia. Ela pode afetar tudo, desde a marca do site até a classificação da informação dentro de uma página:
A Globo.com utiliza cores para representar diferentes categorias de notícias, por isso é fácil encontrar um determinado tipo de informação com base em sua divisão de cores.
Contraste
Contraste pode demonstrar a importância relativa de um objeto ou bloco de objetos. Mudanças dramáticas no texto, de tamanho ou cor transmitem a mensagem de que algo está diferente e isso requer atenção. Mudar de uma cor de fundo clara para um fundo de cor escura pode separar rapidamente o conteúdo do núcleo de uma página de um rodapé, por exemplo.
O contraste entre o corpo arejado e claro e a seção de rodapé, mais escuro, cria uma hierarquia distinta de informações.
Alinhamento
Alinhamento cria ordem entre os elementos. Pode ser tão simples como a diferença entre uma “coluna de conteúdo” e uma “coluna lateral”, mas o alinhamento também pode assumir funções hierárquicas mais complexas. Considere, por exemplo, o poder da informação colocada no canto superior direito da página web. Usuários em geral esperam que as informações nessa parte da tela estejam associadas com áreas de login e senha, carrinhos de compras, etc.
Esse modelo utiliza um layout inspirado em grade para desenvolver uma hierarquia visual orientada
Repetição
Repetição atribui significado em relação aos elementos; Se todo o texto de parágrafo é cinza, quando um usuário vê uma nova caixa de texto em cinza em outro lugar da página, ele deduz que aquela é uma caixa de texto que tem uma relação com a anterior. O mesmo serve quando o usuário encontra um link azul ou um título em preto, ele irá criar associações entre todos esses itens e suas funções específicas.
O UOL cria elementos repetitivos, como títulos e subtítulos, e só quebra a repetição quando quer chamar a atenção.
Proximidade
Proximidade separa os elementos uns dos outros e cria sub-hierarquias. Dentro de uma página pode haver elementos que estão separados um do outro por um espaço. E dentro esses widgets pode haver uma nova hierarquia de título, subtítulos, e conteúdo. A proximidade também é o caminho mais rápido para associar conteúdo semelhante. No exemplo a seguir, é fácil de encontrar certos tipos de conteúdo simplesmente com base na proximidade com o outro.
O site da MicrocampSp tem vários elementos que que reforçam o sentido de proximidade.
Aliás, o site da MicrocampSP tem grandes qualidades hierárquicas: cor, contraste, alinhamento e repetição, entre outras, podem ser notadas aqui.
Densidade e espaços em branco
Criar uma variedade de elementos em um espaço muitas vezes pode torna-los “pesados” e desordenados; Quando os elementos são espaçados demais, eles podem perder as relações um com o outro. Quando uma página é projetada da maneira correta, o olho vai reconhecer facilmente os elementos que se relacionam.
Utilizando os espaçamentos e mantendo uma abundância de espaço em branco na página, torna-se mais fácil para as pessoas movimentarem o olhar e encontrar as caixas pequenas, com bastante conteúdo.
Ficou fácil perceber qual conteúdo deve ser observado com mais atenção, não é?
Quando a hierarquia falha
É importante notar que a hierarquia pode ser usada tanto para o bem e o mal. Pense em todas as propagandas irritantes com Flash, janelas pop-up, banners com estrelinhas piscando, entre outras pragas que tem atormentado a web com o passar dos anos. Enquanto esses anúncios conseguirem a atenção do usuário (e, bem, essa é mesmo a função deles, enfim…), isso pode destruir a hierarquia visual dentro de um site. Da mesma forma, se um designer cria uma hierarquia visual de tal forma que algumas peças chave de informação são quase impossíveis de encontrar, ele terá falhado em sua tarefa. Boa hierarquia visual não é sobre gráficos loucos e selvagens ou os mais novos filtros do Photoshop, trata-se de organizar a informação em uma forma que é útil, acessível e lógica para o visitante do site.
Por que Hierarquia deve ser relevante para Web Designers
Nós, como indivíduos, sempre tivemos um grande senso de organização visual. No entanto, como sociedade, estamos sendo bombardeados com um tsunami de informação visual nas duas últimas décadas. Como resultado, as pessoas hoje em dia são hipersensíveis a hierarquia visual. Este é especialmente o caso na web onde os estudos têm demonstrado que os internautas regulares já aprenderam a fazer sua própria”varredura” de conteúdo; buscar automaticamente informações que são relevantes para os seus interesses e descartando a informação que não é.
Devido a isso, aprender sobre hierarquia visual não é opcional, é obrigatório. Como as típicas plataformas expandindo-se a partir do monitor tradicional para telefones, tablets e até mesmo televisores, está se tornando cada vez mais importante que nós usamos sistemas visuais fortes e claros para se comunicar com os internautas.
Um exercício para testar hierarquia visual
Para concluir, eu gostaria de terminar com um exercício muito simples. Como exemplo, vamos usar um site que você frequente, ou um projeto que você trabalhou recentemente. O exercício é assim:
1) Liste os principais pontos de informação que os visitantes estão procurando.
2) Atribua valores (1 a 10) de acordo com a importância do conteúdo para o visitante.
Agora, olhe para o projeto real novamente e faça o seguinte:
3) Atribua valores (1 a 10) de acordo com a real importância visual do projeto;
4) Considere o seguinte: a hierarquia corresponde a importância real projetada?
Na maioria dos casos, a resposta será “não”. Há muitas razões para isso – demanda dos clientes, designers inexperientes, design por comissão – ou por vários outros motivos que você possa imaginar. Em alguns casos, o designer pode até querer enganar o usuário . Seja qual for a razão, a compreensão da hierarquia visual e sua interpretação é uma maneira de melhorar a maneira como você vê o web design através de uma nova luz. Esperemos que isso o ajude a aprimorar o seu próprio trabalho também!
Gostou do tema? Tem alguma outro para acrescentar ou sugerir algo para o próximo Post? Deixe o seu comentário no espaço abaixo dando a sua sugestão e lembre-se: o blog do Web design é feito para você! Queremos saber a sua opinião e receber mais sugestões sobre nosso trabalho.
Um grande abraço e até o próximo Post!
