Princípios de Gestalt aplicados a interface
O cérebro agrupa elementos automaticamente, com ou sem sua permissão — é melhor saber como.
A psicologia da Gestalt (início do século XX) descreveu como o cérebro humano agrupa elementos visuais automaticamente, antes de qualquer raciocínio consciente. Isso importa pra interface porque esse agrupamento acontece de qualquer jeito — a única pergunta é se ele confirma a estrutura real da sua tela ou entra em conflito com ela.
Proximidade
Itens colocados fisicamente perto uns dos outros são percebidos como relacionados, mesmo sem nenhuma borda ou cor os conectando. É por isso que a distância entre um label e seu campo de formulário importa mais do que parece: se o espaço entre o label e o campo seguinte for menor do que o espaço entre o label e o campo que ele realmente descreve, o olho associa o label ao campo errado.
No primeiro caso, o label "Nome completo" fica mais perto do campo abaixo do espaço maior, e mais longe do campo que ele deveria descrever — a proximidade confunde qual label pertence a qual campo. No segundo, o espaçamento reforça o agrupamento correto: label colado no seu campo, respiro maior antes do próximo grupo.
Similaridade
Itens que compartilham aparência — mesma cor, forma ou tamanho — são percebidos como parte do mesmo grupo, mesmo estando fisicamente distantes. É por isso que todos os links de navegação costumam ter a mesma cor: essa cor sozinha já comunica "esses elementos fazem parte do mesmo conjunto", sem precisar de mais nenhuma explicação.
Continuidade
O olho tende a seguir linhas e alinhamentos, presumindo que elementos alinhados numa mesma direção continuam relacionados. Uma lista de itens alinhados à esquerda é lida como uma sequência única; se um item quebra esse alinhamento, ele é percebido como "fora do grupo" mesmo que pertença logicamente a ele.
Figura-fundo
A percepção separa automaticamente o que é "figura" (o que está em primeiro plano, recebendo atenção) do que é "fundo" (o que sustenta, mas não deveria competir por atenção). Um modal com um overlay escurecendo o resto da tela usa exatamente esse princípio: ele diz ao cérebro "isso aqui atrás virou fundo, o modal é a figura agora".
Fechamento
O cérebro completa formas incompletas automaticamente. Um ícone feito só de alguns traços soltos — como um contorno tracejado de um quadrado — ainda é percebido como um quadrado, porque o cérebro "fecha" a forma sozinho. É por isso que ícones minimalistas com poucos traços ainda funcionam: você não precisa desenhar cada detalhe, só o suficiente pra o cérebro completar o resto.
Exercício
Um menu de navegação tem cinco links. Quatro deles são azuis e sublinhados; o quinto (que na verdade faz parte do mesmo menu) é cinza e sem sublinhado, só porque foi adicionado depois por outra pessoa do time. Qual princípio de Gestalt explica por que esse quinto link parece "não pertencer" ao menu, e como resolver?