Os elementos de interfaces de mídias digitais ficam dispostos no espaço da tela do dispositivo, de modo a que as funcionalidades, a estrutura informacional e o conteúdo fiquem claramente identificáveis e utilizáveis. A percepção nesse contexto funcional e editorial é condicionada pelo equilíbrio visual de 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, esses 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 modo resumido, os cinco princípios são:

1) Proximidade – Elementos similares são agrupados, enquanto os elementos diferentes são separados visualmente. Quando percebemos um conjunto de objetos, tendemos a ver os 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 títulos, hierarquizá-los, agrupar blocos de textos, ajuda o leitor a fazer uma varredura rápida 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.

Os elementos do menu estabelecem identificação por diferenciarem visualmente os assuntos editoriais (em branco) dos institucionais (em azul claro) (acesso em 23.4.2020)
No caso acima, o conteúdo editorial não fica diferenciado visualmente do conteúdo publicitário, embora este último tenha, na legenda, a indicação “Patrocinado”. De qualquer modo, num longo roll vertical de rolagem, a diferenciação não fica clara (acesso em 24.4.2020)

Na imagem abaixo, além da proximidade entre os itens, ao fazer com que fiquem associados verticalmente, vemos que alguns elementos 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 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)
No exemplo acima, a chamada centralizada sobre fundo branco na home page destaca os objetivos de negócio da empresa, em especial 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 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.4.2020)

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