Os princípios da Gestalt foram descobertos na primeira metade do século XX pelos psicólogos da Gestalt, que estavam tentando entender como as pessoas percebem visualmente o mundo – especificamente, como as pessoas decidem se certos elementos fazem parte do mesmo grupo ou não. Esses princípios incluem proximidade, similaridade e fechamento – que são importantes no design visual das interfaces digitais. Posteriormente, mais princípios de agrupamento (como região comum ) foram adicionados à lista original da Gestalt.

O design da interface do usuário depende muito da proximidade e de outros princípios de agrupamento, pois a interpretação correta de quais elementos estão relacionados é fundamental para a interação bem-sucedida com a interface.

Definição : O princípio da proximidade afirma que os itens próximos provavelmente serão percebidos como parte do mesmo grupo – compartilhando características ou características semelhantes.

Coloque elementos relacionados próximos uns dos outros

A proximidade é um dos princípios de agrupamento mais importantes e pode sobrepor pistas visuais concorrentes, como similaridade de cor ou forma. A prática de colocar elementos relacionados próximos e separar elementos não relacionados pode ser vista em quase toda parte no design da interface do usuário.

O espaço em branco separa as formas em dois grupos distintos pelo princípio da proximidade. Mesmo ao incluir formas diferentes em cada grupo, esses dois agrupamentos ainda são claros.

O uso de quantidades variáveis ​​de espaço em branco para unir ou separar elementos é essencial para a comunicação de agrupamentos significativos. Por exemplo, na área de cabeçalho do site do Conselho da Cidade de Wellington, a função Pesquisar está localizada na mesma linha da navegação principal do site, quando visualizada em uma tela grande. No entanto, o espaço em branco extra entre a navegação principal e a Pesquisa indica que eles pertencem a grupos separados e, portanto, têm funcionalidades distintas. Esse espaço em branco é essencial para destacar a função Pesquisar do restante do menu principal.

Captura de tela do site do Conselho da Cidade de Wellington, como pode ser visto em um navegador de desktop
Site da Câmara Municipal de Wellington, como pode ser visto em um monitor de mesa: espaço em branco extra à esquerda do botão Pesquisar o separa do restante da navegação principal e o identifica como um tipo diferente de funcionalidade, mesmo que ele compartilhe o mesmo tratamento de fonte com o principais categorias no menu de navegação.

Em telas menores, no entanto, não é possível manter esse espaçamento. Para evitar que essas áreas sejam percebidas como um único grupo, a Pesquisa é deslocada para longe da navegação principal. (Sim, outros aspectos desse design podem ser aprimorados ainda mais, como agrupar o rótulo de Pesquisa e o ícone correspondente usando proximidade ou região comum.)

Captura de tela do site do Conselho da Cidade de Wellington, como pode ser visto em um tablet.
No tablet, não há espaço de tela suficiente para manter essa separação e, para evitar que a Pesquisa pareça fazer parte da navegação principal, ela foi alterada, agrupada com outros itens do menu de utilitários.

O aproveitamento da proximidade para criar grupos significativos é refletido mesmo ao apresentar o conteúdo básico do texto: as frases são agrupadas em parágrafos separados acima e abaixo por espaços em branco. Além disso, o espaço em branco em torno dos cabeçalhos bem projetados sinaliza com quais parágrafos eles estão associados – o texto da seção correspondente geralmente é colocado mais próximo do cabeçalho do que o texto da seção anterior.

Captura de tela do conteúdo do texto (1 título com um parágrafo de texto seguido de um subtítulo e 2 parágrafos curtos) e um gráfico mostrando o mesmo layout em que o texto é coberto por caixas cinza.
(Esquerda) A proximidade define grupos de textos relacionados (parágrafos e seções) e ajuda na digitalização. (Direita) Esses agrupamentos são discerníveis mesmo sem a visualização do texto real.

O chunking também se aplica ao design do formulário : quando os campos relacionados aparecem agrupados, o formulário parece mais fácil de digitalizar e menos assustador para ser concluído. Por exemplo, um único formulário com 12 campos pode parecer muito cansativo para preencher, enquanto um formulário de 3 partes com 4 campos parece simples em comparação. (O princípio da proximidade é aplicado de várias maneiras no bom design do formulário. Por exemplo, uma quantidade mínima de espaçamento entre um rótulo alinhado na parte superior e seu campo de formulário correspondente torna esse relacionamento aparente em comparação com uma margem maior antes do próximo par de campos do rótulo .)

2 gráficos simulando um formulário: 1 com um único agrupamento grande de campos de formulário, versus agrupando os campos em 3 seções.
12 campos de formulário em um grupo grande (à esquerda) parecem mais assustadores do que o mesmo número de campos divididos em três grupos (à direita). (Obviamente, supondo que os grupos sejam significativos – por exemplo, informações de remessa em um grupo e informações de cobrança em outro.)

Por outro lado, agrupar elementos não relacionados pode camuflar os usuários. Por exemplo, no site do California EDD, o botão Adicionar para listar as informações do empregador necessárias para um formulário está oculto entre os botões não relacionados para passar para a próxima etapa do processo, Salvar como rascunho e Cancelar . Ao olhar a página, os usuários podem apenas olhar para um item dentro de um agrupamento percebido e usá-lo para julgar quais devem ser os outros itens desse grupo . (Por outro lado, Anterior e Próximo estão relacionados, portanto, agrupá-los aumentaria a usabilidade.)

Captura de tela da etapa 3 no formulário de solicitação do CA EDD.
CA.gov: o botão Adicionar foi colocado próximo a botões não relacionados, longe da área principal do formulário, o que dificultava a localização.

Elementos distantes parecem independentes, são facilmente ignorados

Quando os usuários perdem completamente um link, botão ou parte de informação, mesmo que esteja bem na frente deles, a proximidade (ou melhor, a falta dela) costuma ser a culpa. Como os elementos separados por espaços em branco são percebidos como menos relacionados, itens distantes podem ser facilmente ignorados por usuários focados em tarefas que esperam que todas as informações relevantes e elementos interativos sejam colocados juntos. Às vezes, esse comportamento é descrito como ” visão de túnel ” : os usuários atendem seletivamente a determinadas áreas da tela enquanto concluem sua tarefa e perdem as coisas “à vista” porque estão fora dessa área focal.

Por exemplo, em nossos estudos de usabilidade em dispositivos móveis, os participantes geralmente ficam frustrados quando os aplicativos exigem que eles criem uma conta antes de obter acesso ao conteúdo. No entanto, em muitos desses designs, a criação da conta pode ser ignorada – essa opção é simplesmente difícil de encontrar, pois é colocada no canto superior da página, longe das principais frases de ação.

Captura de tela da tela de login do aplicativo móvel Kayak
Aplicativo móvel Kayak: o link Ignorar é apresentado no canto superior esquerdo da tela, longe do conteúdo principal e das frases de ação mais importantes. Esse canal facilita a negligência e engana os usuários a pensarem que devem fazer login.

Da mesma forma, o aplicativo Hulu em uma Apple TV apresenta instruções sobre como interagir com o conteúdo da tela atual até o canto inferior direito da tela, longe do conteúdo relevante. Além disso, o texto é obscurecido pelo fundo da foto do programa selecionado. Essa falta de proximidade levou meu marido a acreditar que não havia como acessar a tela Detalhes (onde estavam listados os outros episódios da temporada) – felizmente, ele me levou para corrigi-lo!

Fotografia do aplicativo Hulu Apple TV.
Hulu na Apple TV: Instruções para clicar e segurar: (para) Os detalhes são apresentados no canto inferior direito da tela, longe das informações sobre o próximo episódio a ser assistido. Especialmente em uma tela de TV grande, esse posicionamento dificulta a observação.

Proximidade pode mudar em projetos responsivos

Prestar atenção à proximidade de elementos é particularmente importante ao projetar layouts responsivos, pois esses agrupamentos podem mudar à medida que se adaptam a diferentes tamanhos de tela . A redução para dispositivos menores pode minimizar o espaço entre os elementos ou afastá-los, destruindo os relacionamentos de agrupamento.

Por exemplo, na página Transport for London Driving na área de trabalho, os links para informações sobre a Zona de Emissão Ultra Baixa e a Zona de Emissão Baixa aparecem lado a lado, em duas colunas diferentes. A apresentação desses dois links nas proximidades permite que os usuários os vejam e os comparem com facilidade para decidir em que desejam clicar. No entanto, em telas pequenas, esses links parecem distantes porque as duas colunas são empilhadas uma acima da outra, e não lado a lado. Esse posicionamento infeliz pode fazer com que os usuários móveis nunca descubram o segundo tipo de zona de emissão.

Capturas de tela da página Transport for London Driving, como vistas em uma tela da área de trabalho e em um dispositivo móvel.
Transporte para Londres: as informações sobre dois tipos de zonas de baixa emissão aparecem muito próximas em uma tela grande (esquerda). Em um dispositivo móvel (à direita), as seções correspondentes às duas zonas estavam distantes devido à forma como as colunas foram empilhadas no layout responsivo.

Conclusão

Colocar elementos relacionados nas proximidades e usar espaços em branco para criar grupos significativos é um princípio fundamental no design visual. Os usuários concentram-se nas tarefas e podem digitalizar as páginas rapidamente, tornando os agrupamentos visualmente óbvios, aumentando a usabilidade, ajudando os usuários a encontrar e se concentrar rapidamente apenas nos elementos da interface do usuário que estão mais relacionados à sua tarefa atual.