Explorando os Princípios de Design da Gestalt

Publicados: 2022-03-11

Ouça a versão em áudio deste artigo

O espaço negativo tem sido um elemento básico do bom design. Deixar espaço em branco ao redor dos elementos de um design é a primeira coisa que geralmente vem à mente. Mas existem designs que usam esse espaço em branco para inferir um elemento que não está realmente lá (a seta escondida entre o E e o X no logotipo da FedEx imediatamente vem à mente como exemplo).

espaço negativo é um dos principais elementos e princípios do design — O “E” e o “x” no logotipo da FedEx criam uma seta dentro do espaço negativo entre eles.

O cérebro humano é excepcionalmente bom em preencher as lacunas de uma imagem e criar um todo maior que a soma de suas partes. É por isso que vemos rostos em coisas como folhas de árvores ou rachaduras na calçada.

Este princípio é uma das ideias subjacentes mais importantes por trás dos princípios gestálticos da percepção visual. A proposta inicial mais influente escrita sobre a teoria foi publicada por Max Wertheimer em suas leis da Gestalt de organização perceptual de 1923, embora a discussão de 1920 de Wolfgang Kohler sobre a Gestalten Física também contenha muitas ideias influentes sobre o assunto.

Independentemente de quem propôs as ideias pela primeira vez (há ensaios que datam de 1890), os princípios da gestalt são um conjunto importante de ideias para qualquer designer aprender, e sua implementação pode melhorar muito não apenas a estética de um design, mas também sua funcionalidade e facilidade de uso.

Em termos mais simples, a teoria da gestalt é baseada na ideia de que o cérebro humano tentará simplificar e organizar imagens ou designs complexos que consistem em muitos elementos, organizando subconscientemente as partes em um sistema organizado que cria um todo, em vez de apenas um conjunto. série de elementos díspares. Nossos cérebros são construídos para ver a estrutura e os padrões para que possamos entender melhor o ambiente em que vivemos.

Existem seis princípios individuais comumente associados à teoria da gestalt: similaridade , continuação , fechamento , proximidade , figura/fundo e simetria e ordem (também chamado pragnanz ). Há também alguns princípios adicionais, mais novos, às vezes associados à gestalt, como o destino comum.

Similaridade

É da natureza humana agrupar coisas semelhantes. Na gestalt, elementos semelhantes são agrupados visualmente, independentemente da proximidade entre si. Eles podem ser agrupados por cor, forma ou tamanho. A similaridade pode ser usada para unir elementos que podem não estar próximos um do outro em um design.

exemplo do princípio da gestalt de semelhança — Os quadrados aqui são todos igualmente espaçados e do mesmo tamanho, mas nós os agrupamos automaticamente por cor, mesmo que não haja rima ou razão para sua colocação.

Claro, você pode fazer coisas diferentes se quiser que elas se destaquem da multidão. É por isso que os botões para chamadas à ação geralmente são projetados em uma cor diferente do restante da página, para que eles se destaquem e chamem a atenção do visitante para a ação desejada.

No design de UX, o uso de similaridade deixa claro para seus visitantes quais itens são semelhantes. Por exemplo, em uma lista de recursos usando elementos de design repetitivos (como um ícone acompanhado por 3-4 linhas de texto), o princípio de similaridade facilitaria a varredura por eles. Por outro lado, alterar os elementos de design para os recursos que você deseja destacar os destaca e lhes dá mais importância na percepção do visitante.

Mesmo coisas tão simples como garantir que os links em todo o design sejam formatados da mesma maneira dependem do princípio da similaridade na maneira como seus visitantes perceberão a organização e a estrutura do seu site.

Continuação

A lei da continuidade postula que o olho humano seguirá o caminho mais suave ao visualizar as linhas, independentemente de como as linhas foram realmente desenhadas.

um exemplo do princípio gestalt de continuidade — O olho tende a querer seguir a linha reta de uma extremidade à outra da figura e a linha curva de cima para baixo, mesmo quando as linhas mudam de cor no meio do caminho.

Essa continuação pode ser uma ferramenta valiosa quando o objetivo é guiar o olhar do visitante em uma determinada direção. Eles seguirão o caminho mais simples da página, portanto, certifique-se de que as partes mais vitais que eles devem ver estejam dentro desse caminho.

Como o olho segue naturalmente uma linha, colocar itens em uma série em uma linha atrairá naturalmente o olho de um item para o próximo. Os controles deslizantes horizontais são um exemplo, assim como as listagens de produtos relacionados em sites como a Amazon.

Fecho

O fechamento é um dos princípios da gestalt mais legais e eu já toquei no início desta peça. É a ideia de que seu cérebro preencherá as partes que faltam de um design ou imagem para criar um todo.

Em sua forma mais simples, o princípio do fechamento permite que seu olho siga algo como uma linha pontilhada até o final. Mas aplicações mais complexas são frequentemente vistas em logotipos, como o do World Wildlife Fund. Grandes pedaços do contorno do panda estão faltando, mas seu cérebro não tem problemas em preencher as seções que faltam para ver o animal inteiro.

o logotipo do fundo mundial para a vida selvagem é um exemplo do princípio gestalt de fechamento — O princípio gestalt de fechamento é ilustrado lindamente no logotipo do panda do World Wildlife Fund. O cérebro completa as formas brancas, embora não estejam bem definidas.

O fechamento é frequentemente usado no design de logotipos, com outros exemplos, incluindo os da USA Network, NBC, Sun Microsystems e até mesmo da Adobe.

Outro exemplo muito importante de fechamento no trabalho no design de UX e UI é quando você mostra uma imagem parcial desaparecendo da tela do usuário para mostrar que há mais a ser encontrado se ele deslizar para a esquerda ou para a direita. Sem uma imagem parcial, ou seja, se apenas imagens completas forem mostradas, o cérebro não interpreta imediatamente que pode haver mais para ser visto e, portanto, é menos provável que o usuário role a tela (já que o fechamento já é aparente).

Procuravam-se designers de UI freelancers em tempo integral nos EUA

Proximidade

A proximidade refere-se a quão próximos os elementos estão uns dos outros. As relações de proximidade mais fortes são aquelas entre assuntos sobrepostos, mas apenas agrupar objetos em uma única área também pode ter um forte efeito de proximidade.

O oposto também é verdade, é claro. Ao colocar espaço entre os elementos, você pode adicionar separação mesmo quando suas outras características são as mesmas.

Veja este grupo de círculos, por exemplo:

o princípio da gestalt de proximidade ilustrado com grupos de círculos — A única coisa que diferencia o grupo da esquerda dos da direita é a proximidade das linhas. E, no entanto, seu cérebro interpreta a imagem à direita como três grupos distintos.

exemplo de princípio gestalt de proximidade em ação prejudicando ux — Um exemplo de formulário USPS PDF em que o princípio da gestalt de proximidade está prejudicando a UX. Como os rótulos dos campos estão mais próximos dos campos abaixo deles, as pessoas acreditam erroneamente que é onde as informações vão para “c”. e “d”. No entanto, as informações devem ser fornecidas nos campos acima dos rótulos de texto.

No design UX, a proximidade é usada com mais frequência para fazer com que os usuários agrupem certas coisas sem o uso de coisas como bordas rígidas. Ao colocar coisas semelhantes mais próximas, com espaço entre cada grupo, o espectador imediatamente perceberá a organização e a estrutura que você deseja que eles percebam.

Figura/fundo

O princípio figura/fundo é semelhante ao princípio de fechamento, pois aproveita a maneira como o cérebro processa o espaço negativo. Você provavelmente já viu exemplos desse princípio circulando em memes nas mídias sociais ou como parte de logotipos (como o logotipo da FedEx já mencionado).

Seu cérebro distinguirá entre os objetos que considera estar no primeiro plano de uma imagem (a figura ou ponto focal) e o fundo (a área sobre a qual as figuras repousam). Onde as coisas ficam interessantes é quando o primeiro plano e o plano de fundo contêm duas imagens distintas, como esta:

um exemplo da relação figura-fundo formando elementos e princípios de design — Algumas pessoas verão imediatamente a árvore e os pássaros ao ver o logotipo do Pittsburgh Zoo & PPG Aquarium, enquanto outros verão o gorila e o leão olhando um para o outro.

grande exemplo do princípio da gestalt figura-fundo — Outro grande exemplo do princípio da gestalt figura/fundo.

Um exemplo mais simples pode ser visto com esta imagem, de duas faces criando um castiçal ou vaso entre elas:

um exemplo simples de princípio de figura-fundo, um princípio de design gestalt — Nesta famosa ilusão desenvolvida pelo psicólogo dinamarquês Edgar Rubin, o espectador geralmente é apresentado a duas interpretações de forma – dois rostos ou um vaso. É outro excelente exemplo do princípio figura/fundo.

Em termos gerais, seu cérebro interpretará a área maior de uma imagem como o fundo e a menor como a figura. Como mostrado na imagem acima, porém, você pode ver que cores mais claras e mais escuras podem influenciar o que é visto como a figura e o que é visto como o fundo.

O princípio figura/fundo pode ser muito útil quando os designers de produto desejam destacar um ponto focal, principalmente quando ele está ativo ou em uso - por exemplo, quando uma janela modal aparece e o restante do site desaparece em segundo plano, ou quando uma barra de pesquisa é clicada e o contraste é aumentado entre ela e o resto do site.

Assine o blog de design Toptal e receba nosso eBook

Simetria e Ordem

A lei da simetria e da ordem também é conhecida como pragnanz , a palavra alemã para “boa figura”. O que esse princípio diz é que seu cérebro perceberá formas ambíguas da maneira mais simples possível. Por exemplo, uma versão monocromática do logotipo olímpico é vista como uma série de círculos sobrepostos, em vez de uma coleção de linhas curvas.

outro dos princípios de design da gestalt, o princípio de pragnanz é ilustrado com o logotipo das olimpíadas

Aqui está outro bom exemplo do princípio de design gestalt “ pragnanz ”:

um exemplo complexo do princípio de pragnanz, outro princípio da gestalt

Seu cérebro interpretará a imagem à esquerda como um retângulo, círculo e triângulo, mesmo quando os contornos de cada um estiverem incompletos porque são formas mais simples do que a imagem geral.

Destino comum

Embora o destino comum não tenha sido originalmente incluído na teoria da gestalt, desde então foi adicionado. No design UX, sua utilidade não pode ser negligenciada. Este princípio afirma que as pessoas agruparão coisas que apontam ou estão se movendo na mesma direção.

Na natureza, vemos isso em coisas como bandos de pássaros ou cardumes de peixes. Eles são compostos de um monte de elementos individuais, mas como eles se movem aparentemente como um, nossos cérebros os agrupam e os consideram um único estímulo.

um bando de pássaros ilustra o princípio do destino comum — Um bando de pássaros é visto como uma única unidade quando voa na mesma direção e, assim, compartilha um destino comum. (por Martin Adams em Unsplash)

Isso é muito útil em UX, pois os efeitos animados se tornam mais predominantes no design moderno. Observe que os elementos na verdade não precisam estar se movendo para se beneficiar desse princípio, mas eles precisam dar a impressão de movimento.

Princípios da Gestalt em UX Design

Como acontece com qualquer princípio psicológico, aprender a incorporar os princípios de percepção visual da gestalt em seu trabalho de design pode melhorar muito a experiência do usuário. Entender como o cérebro humano funciona e explorar as tendências naturais de uma pessoa cria uma interação mais perfeita que faz com que o usuário se sinta confortável em um site, mesmo que seja sua primeira visita.

Os princípios da Gestalt são relativamente fáceis de incorporar em praticamente qualquer design e podem elevar rapidamente um design que parece aleatório ou como se estivesse lutando pela atenção de um usuário para um que ofereça uma interação natural e perfeita que guie os usuários para a ação que você deseja que eles executem.

• • •