Gestalt para Design: princípios, exemplos e como aplicar na prática

Gestalt para Design: princípios, exemplos e como aplicar na prática

A Teoria da Gestalt é um princípio do campo de estudo da psicologia, que envolve a forma como os seres humanos percebem o mundo à sua volta.

De acordo com a psicologia, a percepção é uma combinação entre a captação de estímulos sensoriais através dos nossos cinco sentidos:

  • Visão;
  • Audição;
  • Tato;
  • Olfato;
  • Paladar.

Somados à interpretação desses estímulos usando o nosso intelecto. Portanto, a percepção tem duas etapas: receber um estímulo e depois processar essa informação de acordo com os nossos conhecimentos adquiridos ao longo da vida.

Apenas captar as sensações não configura percepção, nosso sistema cognitivo é, portanto, necessário para que ela aconteça.

Tipos de percepção

  • Percepção visual: enxergar e processar a informação que chega aos nossos olhos.
  • Percepção auditiva: ouvir e interpretar os dados sonoros que chegam aos ouvidos através das ondas de frequência.
  • Percepção tátil somatossensitiva ou háptica: receber estímulos de pressão ou vibração na pele.
  • Percepção olfativa: sentir o cheiro proveniente de substâncias químicas que se dissolvem no ar.
  • Percepção gustativa: processar informações palatares de substâncias químicas dissolvidas na saliva.

Outros tipos

Além das percepções originárias dos cinco sentidos, existem outras formas de perceber o nosso ambiente, como a percepção social, por exemplo, em que combinamos os estímulos aos nossos sentidos para identificar e interpretar o comportamento dos nossos semelhantes.

Por exemplo, dois amigos de longa data, dependendo da situação, sabem o que o outro está pensando ou sentindo só de olhar suas expressões faciais ou observar sua linguagem corporal.

A percepção de espaço, por sua vez, representa a capacidade de compreender o nosso entorno. Um bom exemplo de situação em que exercemos a noção de espaço é quando vamos estacionar um veículo numa vaga estreita.

Precisamos saber mais ou menos o tamanho do automóvel e da vaga para não bater em um poste próximo. Enxergamos o veículo todo? Não, mas mesmo assim somos capazes de realizar essa tarefa.

Outro exemplo é a percepção cinestésica, que vem do movimento. É a noção de movimento ao redor do nosso corpo, como quando sabemos que existem outros automóveis andando na via mesmo sem enxergá-los totalmente. É uma mistura das percepções visuais, auditivas, de espaço, de tempo, entre outras.

Existem, ainda, a percepção de tempo, formato, vestibular (noção de gravidade de acordo com a posição da nossa cabeça em relação ao chão — ajuda a manter o equilíbrio e a postura), térmica, interoceptiva (percepção dos nossos órgãos internos), entre outras.

Como a percepção funciona

Como você viu no início desse texto, a percepção é um processo com duas etapas, então as duas precisam acontecer para que a percepção de fato exista.

Relembrando, as etapas são: receber os estímulos através dos cinco sentidos ou de uma combinação deles e, em seguida, processar essas informações com o nosso cérebro.

Nesse processo vários outros quesitos precisam ser cumpridos para que o todo se complete; por exemplo, é fundamental que haja luz sobre um objeto para que possamos vê-lo, assim como é necessário o ar para que as ondas de frequência de som cheguem aos nossos ouvidos.

Partindo desse princípio, a psicologia orienta que é preciso selecionar, organizar e interpretar as informações.

Seleção

É humanamente impossível processar todos os estímulos a que somos expostos todos os dias.

Por exemplo, se você sai para dar uma volta na rua, perceberá pessoas, veículos, animais domésticos, comunicações publicitárias, poluição sonora e visual, temperaturas altas ou baixas etc.

Portanto, o nosso cérebro filtra e literalmente escolhe quais informações vamos priorizar. Quem faz esse filtro é a atenção.

Organização

Depois de receber um estímulo, o próximo passo da percepção é a organização das informações para que depois o cérebro consiga dar um significado a elas.

Esse processo não é individual, ele vai acontecendo ao mesmo tempo, principalmente quando recebemos mais de um estímulo por vez.

E para essa organização, de acordo com a psicologia, o intelecto segue os princípios de Gestalt, que ditam critérios específicos de priorização, que veremos a seguir.

O que é Gestalt

Também conhecida como a Teoria da Forma ou Psicologia da Gestalt, esta é uma doutrina que define a compreensão humana a partir do todo, e não de partes. Antes de entender a parte, é necessário entender o todo.

Um dos temas mais importantes da Gestalt é trazer à tona o que está escondido, implícito ou disfarçado.

Quando estamos com algum problema pessoal é comum que essa questão afete o nosso julgamento, então projetamos em outras situações as nossas opiniões mais disfarçadas e internalizadas.

Nesse aspecto a Gestalt trabalha para que voltemos o olhar para as nossas próprias questões.

De acordo com a Gestalt, não é possível conhecer o todo através das partes. O todo não é a soma das partes, é mais do que isso.

2+2 não são 2+2, e sim 4, um outro número com características próprias. Inclusive, esse conceito da Gestalt se chama supersoma.

Há ainda a transponibilidade, que dita que independentemente dos elementos que ajudam a compor um objeto, a forma final se destaca, como a imagem de tigre que você viu no início deste conteúdo.

Se você prestar bem atenção, vai ver que o contorno do animal não existe, mas o nosso cérebro o completa para que possamos interpretar esse estímulo visual.

Uma pessoa é mais do que um amontoado de matéria orgânica, por exemplo. Veja a seguir os princípios da Gestalt e como é importante aplicá-los na jornada de Designer.

Proximidade

O primeiro princípio aponta que objetos e formas próximas parecem estar mais relacionadas umas com as outras do que quando estão distantes.

Quando você estava na escola e, mesmo seguindo todas as regras, ao ser pego com uma turminha bagunceira, também ia para a diretoria mesmo sem ter feito nada, era a proximidade agindo: se estava junto, também estava fazendo arte.

Trazendo este princípio para o universo do Design, a distância ou proximidade dos elementos podem fazer a diferença numa interpretação.


O conceito de proximidade e distância ajuda o usuário a entender se elementos fazem parte de um mesmo grupo ou se cada um faz parte de uma comunicação diferente. Veja esse exemplo no site da Awari:

gestalt no site da Awari
Por que um princípio da psicologia é tão importante para o universo do Design de Produtos? Descubra neste conteúdo!

Você não sabe bem o motivo, mas entende que cada conjunto de informações composto por uma imagem, título e texto representa um grupo diferente. A distância entre os elementos te ajuda a interpretar dessa maneira.

Exemplo de elementos no site Awari
Exemplo de elementos no site Awari

Já nesse outro exemplo, sabemos que os campos representam um grupo de informações que faz parte de uma mesma família, que é um formulário de preenchimento. Vê como os elementos estão próximos? Isso é Gestalt.

Assinatura Awari | Cursos Design

Similaridade

O princípio da similaridade indica que elementos parecidos devem pertencer ao mesmo grupo.

Nesse caso, mesmo que estejam próximos ou distantes, caso tenham propriedades iguais, acreditamos que pertencem ao mesmo conjunto.

Fonte: Immaginare

No Design, elementos com cores, tamanhos e outros componentes visuais parecidos costumam representar grupos de informação similares.

Por exemplo, a tipografia de um menu é sempre igual entre seus itens no que diz respeito a tamanho, cor e fonte, isso porque a ideia de um menu é representar um aglomerado organizado de informações específicas.

Se você acessar um site e navegar pelo menu, verá letras iguais, mas a partir do momento que passa o cursor e outras letras aparecem, normalmente diferentes, na hora você já entende que se trata de um submenu.

Continuidade

O princípio da continuidade indica que elementos posicionados em uma linearidade representam uma ordem natural das coisas.

Por exemplo, quando acessamos um site de viagens, normalmente preenchemos as informações da esquerda para a direita, correto?

Não é obrigatório fazer dessa forma, mas sempre fazemos assim porque parece ser o certo.

Portanto, no Design de Produtos, quando quisermos que o usuário faça o preenchimento de um formulário numa ordem específica, basta criá-lo de maneira linear.

Fechamento

O princípio de fechamento é a capacidade de enxergarmos uma figura, mesmo que ela não esteja totalmente representada. Veja o exemplo abaixo.


Fonte: Update or Die

O desenho de uma caneta não existe inteiramente, mas somos capazes de vê-la mesmo que estejam faltando algumas partes. Esse é o princípio do Fechamento.

No Design, os usuários percebem fechamentos mesmo que não haja linhas ou outros elementos de separação entre os conjuntos de informação. Veja este exemplo no site da Awari.

Exemplo do site da Awari
Exemplo do site da Awari

Não há linhas, caixas e nem um outro tipo de separação, mas entendemos que cada aglomerado de texto e ícone representa uma informação diferente.

Figura-fundo

O princípio da figura-fundo defende que a nossa percepção automaticamente enxerga objetos estando à frente ou ao fundo.

Como não somos capazes de ver ambos ao mesmo tempo, a cabeça escolhe um ou outro para enxergar de cada vez.

Na imagem você vê o rosto de uma mulher ou o perfil de um homem tocando um saxofone?

É possível ver os dois, mas não ao mesmo tempo. Este é o princípio de figura-fundo.

No Design esse princípio é utilizado constantemente quando precisamos dar mais foco ao elemento da frente em detrimento ao fundo, com caixas de diálogo, pop ups, mensagens de erro etc.

Região comum

Assim como no princípio da proximidade, a região comum diz respeito a elementos próximos, ou seja, da mesma região.

Você pode retornar ao item de proximidade e observar o exemplo que demos do site da Awari.

Desde o título até o último box de informações, todos os elementos estão na mesma região, e portanto aparentam pertencer ao mesmo grupo – e de fato pertencem, já que corroboram o mesmo assunto.

Ponto focal

O ponto focal é um princípio que fala sobre o destacamento visual de um elemento caso ele seja diferente dos demais que estejam na mesma região.


Fonte: Medium

No UI Design esse princípio é muito importante, principalmente no que tange à hierarquização de conteúdo, ou seja, quais elementos terão mais destaque e quais terão menos.

exemplo de hierarquização
Exemplo de hierarquização

Nesta propaganda do Burger King a ideia é divulgar o lanche, tanto que a rede presenteou seus clientes com um Whopper grátis na compra de batata frita e refrigerante. Por isso o nome do sanduíche está em destaque, e é assim que funciona o ponto focal.

Interpretação

Depois de captar e organizar os estímulos, nosso sistema nervoso dá um significado a eles, baseados em nossas vivências e aprendizados anteriores. Assim fica completo o ciclo da percepção.

Por que um profissional do Design precisa estudar a Gestalt?

A habilidade de perceber o ambiente no qual estamos inseridos é muito importante para a vida pessoal e profissional, sendo parte de soft skills fundamentais do nosso desenvolvimento no mundo corporativo.

Um Designer de Produto deve compreender a fundo como a percepção funciona para que possa prever e antecipar as ações dos usuários que vão interagir com seus produtos.

Lembre-se que cada vez mais estamos inseridos num contexto tecnológico que cria determinados comportamentos e ações, tanto coletivas quanto individuais.

Saber como os princípios da Gestalt e da percepção funcionam ajuda muito na hora de desenvolver uma interface, porque esse conhecimento influencia na experiência do usuário e na forma como ele vai usar o produto.

Agora que você já entende os conceitos, faça o exercício de olhar para as interfaces sob esse ponto de vista de análise e encontre todas as estratégias de percepção que puder. 

Treinar esse olhar proporciona uma facilidade maior na hora de determinar quais elementos visuais são mais eficazes em diversas situações, como sombreamento de fundo, hierarquia visual, proximidade ou distanciamento de grupos de informação etc.

Como consequência, você terá a capacidade de guiar a atenção do usuário para os pontos que você quiser na interface, porque já vai saber como funciona o processo de percepção dele.

A partir daí conseguirá gerar respostas e comportamentos específicos.

💻 Quer ingressar na área de UX Design? Conheça a Awari!

A Awari é uma plataforma de ensino completa que conta com mentorias individuais, cursos com aulas ao vivo e suporte de carreira para você dar seu próximo passo profissional.

Conheça nossa trilha de Design e confira os nossos cursos de UX/UI com jornada personalizada e materiais complementares desenvolvidos por especialistas no mercado.

Avance sua carreira

Conheça a Awari

Dê seu próximo passo profissional com nossos cursos e aprenda com mentorias individuais dos melhores profissionais do mercado.

Saiba mais

Escrito por

Avance sua carreira

e cuide do seu futuro

Esse é o momento para investir em seu futuro e dar seu próximo passo profissional. Comece agora e crie sua conta na Awari:

Começar agora