Os elementos de interfaces de mídias digitais ficam dispostos no espaço da janela do navegador, de modo a que as funcionalidades, a estrutura informacional e o conteúdo fiquem claramente identificáveis e utilizáveis. A percepção neste contexto funcional e editorial é condicionada pelo equilíbrio visual da sua disposição no espaço da tela.

Para entender como os componentes das interfaces digitais se organizam em áreas mais ou menos fáceis de visualizar, bem como em áreas mais ou menos ocupadas, recorremos aqui à psicologia da Gestalt, aplicada à percepção visual nos anos 1930 e 1940 especialmente pelos psicólogos Max Wertheimer, Wolfgang Köhler e Kurt Koffka. Eles criaram modelos para investigar a percepção humana de grupos de objetos e de como esta se baseia em segmentos para constituir objetos inteiros. Suas pesquisas geraram os cinco princípios de Gestalt de percepção.

Aplicados à experiência de usuários de interfaces, estes princípios nos ajudam a entender a percepção dos conjuntos de componentes, que antecede a percepção e o uso de cada um. Evidenciam a importância dos contextos de uso, compostos pelo ambiente de uso somado aos conjuntos de telas, e também de cada tela, composta por conjuntos de elementos estruturados.

De maneira resumida, os cinco princípios são:

1) Proximidade – Elementos similares são agrupados, enquanto os elementos distintos são separados visualmente. Quando percebemos um conjunto de objetos, tendemos a ver aqueles que estão mais próximos uns dos outros como parte de um grupo.

Disposição de elementos silimares

Disposição de elementos similares

A proximidade entre elementos pode criar associações entre eles, ou, pelo contrário, dissociá-los, como no exemplo acima, em que a separação das duas linhas em cima e embaixo do fundo negro faz com que se leia separadamente duas afirmativas em vez de uma.

Proximidade entre elementos

Os elementos da barra de navegação horizontal estabelecem identificação por proximidade, apesar da diferença entre cores identificar cada um dos três temas principais (acesso em 26.2.2012)

Cada objeto ou elemento de um conjunto tem um campo gravitacional em relação aos que gravitam em torno de seu centro: sua posição afeta seu peso visual e a dos outros.

A proximidade faz com que os olhos do observador criem associações ou dissociações instantâneas entre itens. No caso abaixo, por exemplo, a diferença de tipologias sugere a grafia de duas afirmativas em vez de uma.

Agrupamento de elementos por afinidade visual

Agrupamento de elementos por afinidade visual

A organização de textos e imagens de modo a definir a estrutura de sentidos e relacionamentos, destacar os títulos, hierarquizá-los, agrupar blocos de textos relacionados, ajuda o leitor a fazer uma varredura rápidas das páginas, guia o usuários nos processos de interação e diminui o tempo de leitura e compreensão do conteúdo online publicado.

2) Similaridade – Elementos serão percebidos como parte de um grupo caso se assemelhem uns com os outros. No caso abaixo, a proximidade contribui para criar identidade entre os quadrados.

Similaridade

Os elementos da barra de navegação horizontal colorida, no alto, estabelecem identificação por terem cores diferentes dos demais elementos: destoam dos demais links da página. A funcionalidade destes itens, associada à sua importância hierárquica em relação ao conteúdo, também fica sinalizada por sua similaridade. (acesso em 26.2.2012)

Na imagem abaixo, além da proximidade entre os itens, ao fazer com que fiquem associados verticalmente, vemos que alguns dentro do grupo se assemelham horizontalmente e também podem ser associados.

Similaridade

Composição visual do layout – proximidade de itens

3) Figura e fundo – Na percepção de um campo visual, alguns objetos se destacam (as figuras) e outros se restringem ao fundo. As figuras são percebidas com mais destaque que o fundo, podendo haver uma certa diferença de profundidade entre eles, mesmo que situados sobre o mesmo plano. A figura tende a ser percebida na frente do fundo.

Relação entre figura e fundo

Uma imagem individualizada tende a se destacar muito em relação a um fundo branco e vazio (acesso em 26.2.2012)

 

A chamada centralizada sobre fundo branco na home page destaca os objetivos de negócio da empresa, com destaque para a expressão em itálico. (acesso em 23.8.2015)

Quanto menos elementos no conjunto, mais os elementos individualizados ganham destaque. Qual é a menor quantidade possível de detalhes necessária para criar destacar os elementos?

4) Simetria – Quando se percebe um objeto, tende-se a observar sua simetria em relação a um centro.

Simetria

A linha tende a ser percebida por sua simetria, embora os tamanhos das abas sejam diferentes (acesso em 26.2.2012)

Muitos objetos podem ser divididos em duas metades mais ou menos simétricas e quando vemos as duas desconectadas, tendemos inconscientemente a reintegrá-las em um objeto único.

5) Fechamento (enclosure) – O olho procura fechar espaços ou completar objetos/ideias incompleto/as.

Closure

Lei do fechamento

Em user-interface design, chamam-se enclosures agrupamentos de elementos que resumem visualmente eventos funcionais (como avisos de notificações e mensagens, áreas do usuário, informações de mesma natureza). São encontrados em diversas plataformas, e os usuários já estão acostumados a identificar sua função.

(Atualizado em 23.8.2015)

 

Referências

Effective design principles for web designers: Proximity, Ryan Boudreaux (Interactiondesign.org acesso em 13.6.2013)

Gestalt principles of form perception, Mads Soegaard (Interactiondesign.org acesso em 26.2.2012)

Global Experience Language (BBC – Gel, acesso em 1.12.2011)

Design principles (IBM, acesso em 28.3.2008)

 

Programas auxiliares

ClickTale – ferramenta de acompanhamento de uso de websites (acesso em 28.3.2010)

AttentionWizard – programa que avalia layouts de websites a partir da simulação dos movimentos do olho humano e da verificação dos principais pontos de atenção (SiteTuners.com, acesso em 4.12.2009)

Sketchbook Pro – permite o desenho livre de esboços, com suporte de ferramentas de texto e alguns efeitos de texturas