Lei da proximidade: o que está perto parece da mesma família

A lei da proximidade explica por que o olho agrupa o que está perto. Veja como usar a distância para organizar convites, cardápios e páginas sem acrescentar nada.

Compartilhar
Capa do episódio A distância, da série Design × Manim, com dois convites da Feira Gráfica antes e depois de reagrupar as informações

Seu convite tem todas as informações certas e mesmo assim ninguém entende. Nome do evento, tema, data, horário, endereço, inscrição. Tudo legível. Mas quem lê precisa montar um quebra-cabeça para saber o que pertence a quê.

O problema não é falta de palavra, de linha ou de cor. É distância. E a regra que resolve isso tem mais de cem anos.

O que é a lei da proximidade

A lei da proximidade diz que elementos próximos são percebidos como um grupo, e elementos afastados, como coisas separadas. O olho faz esse agrupamento antes da leitura, sem esforço e sem pedir licença.

Quem descreveu o princípio foi o psicólogo Max Wertheimer, em 1923, num estudo sobre como organizamos o que vemos. Ele mostrava fileiras de pontos com espaçamentos diferentes e as pessoas viam pares, trios, colunas. Os pontos eram iguais. O que mudava era só a distância. Wertheimer chamou isso de fator de proximidade, o primeiro dos princípios que hoje a gente conhece como Gestalt.

No dia a dia do design, a tradução é simples: o que está perto parece da mesma família.

O convite que se explica sozinho

No episódio 10 da série Design × Manim, eu mostro isso com um convite para uma feira gráfica. Seis informações espalhadas com a mesma distância entre elas.

Convite da Feira Gráfica com seis informações à mesma distância, ligadas por setas com pontos de interrogação
Antes: seis informações à mesma distância. O olho não sabe o que pertence a quê.

Depois mudam só as distâncias, sem trocar nenhuma palavra. O nome se aproxima do tema. A data se aproxima do horário. O endereço fica junto deles. A inscrição ganha uma área própria.

O mesmo convite com três grupos: nome e tema, data com horário e endereço, e inscrição separada embaixo
Depois: as mesmas seis informações em três grupos. Nenhuma palavra mudou.

A página começou a se explicar. E quem explicou foi a distância.

A regra que vale salvar

Distância pequena dentro do grupo. Distância grande entre os grupos.

É isso. O espaço funciona como uma pontuação silenciosa: aproxima ideias, separa assuntos, mostra onde uma informação termina e onde a outra começa. Tudo antes de alguém ler a primeira palavra.

O cardápio é o exemplo que todo mundo já viveu. Você sempre sabe qual preço é de qual prato e nunca precisou que alguém explicasse. Quando o preço fica colado no nome e há um respiro entre os itens, a leitura acontece sem pensar. Quando tudo fica com o mesmo espaçamento, você hesita.

Cardápio em duas versões: antes, preços e pratos com espaçamento igual; depois, cada preço colado no seu prato e mais espaço entre os itens
Antes: espaço igual entre tudo, 48 px. Você hesita.
Cardápio reorganizado com 8 px entre prato e preço e 64 px entre itens
Depois: 8 px dentro do grupo, 64 px entre grupos. Você lê sem pensar.

Repare nos números da segunda imagem. Oito pixels entre o prato e o preço, sessenta e quatro entre um item e outro. A proporção importa mais do que o valor exato: o espaço entre grupos precisa ser claramente maior do que o espaço dentro deles.

Proximidade não é apertar tudo

Tem um erro que aparece muito por aí: a peça que junta tudo para "ficar organizada". Tudo perto demais vira uma massa só, e a página volta a ficar difícil de ler.

Proximidade é contraste de distâncias. Se todos os espaços são pequenos, não há grupo nenhum, do mesmo jeito que se todos são grandes também não há. O que cria sentido é a diferença.

Antes de acrescentar, mova

Quando uma peça não comunica, a tentação é acrescentar. Uma linha para separar, uma caixa para agrupar, uma cor para destacar. Às vezes é preciso. Quase sempre não é.

Em treze anos trabalhando com marcas, eu aprendi a fazer o teste nessa ordem:

  1. Mova antes de acrescentar. Aproxime o que pertence junto e afaste o que é outro assunto.
  2. Confira os grupos. Olhe de longe, sem ler. Se você enxerga os blocos certos, a proximidade está funcionando.
  3. Só então decida o resto. Linha, caixa e cor entram para reforçar um grupo que já existe, não para inventar um que o espaço não criou.

A proximidade também não trabalha sozinha. O alinhamento reforça a conexão entre os elementos de um grupo. O contraste mostra o que importa dentro dele. A repetição ajuda a reconhecer grupos parecidos em várias páginas. São os próximos assuntos desta série.

O espaço não é sobra

Antes de acrescentar uma linha, uma caixa ou outra cor, mova os elementos. Aproxime o que pertence junto. Separe o que precisa de destaque. Deixe o espaço trabalhar.

Porque o espaço em branco não é o que sobrou na página. É o que faz você entender todo o resto.

Referências

  • Wertheimer, Max. "Untersuchungen zur Lehre von der Gestalt II". Psychologische Forschung, v. 4, p. 301–350, 1923. Tradução em inglês: Laws of Organization in Perceptual Forms, em Ellis, W. (org.), A Source Book of Gestalt Psychology, 1938.
  • Série Design × Manim, episódio 10 (A distância que cria sentido) e Dica 01 (Proximidade em 30s), @jeansousadesign.