Como alguns princípios da Gestalt pode te ajudar a criar interfaces mais bonitas

A intenção desse post não é abordar a Gestalt em detalhes, mas mostrar como alguns de seus príncipios podem transformar a sua interface.

Jesica Vieira
Jun 10, 2018 · 5 min read

Uma rápida introdução

A Psicologia da Gestalt é um movimento que surgiu em Berlim no início do século XX com o objetivo de entender como a mente humana compreende visualmente as coisas. Desse estudo concluiu-se que nós estamos acostumados a percebê-las em conjuntos e não individualmente.

Veja a imagem abaixo, o que você enxerga?

Aqui nós vemos um rosto. Não um par de olhos, um nariz e uma boca.


Gestalt e a percepção visual no design

Logo depois que foi introduzida na psicologia, a Gestalt foi aplicada ao campo da percepção visual por teóricos como Max Wertheimer, Wolfgang Kohler e Kurt Koffka. A idéia principal era que, quando percebemos o mundo, há muitas informações diferentes chegando ao mesmo tempo e uma forma de organizá-las era visualizando-as como formas ou grupos unitários. Seria o modo como decidimos que alguns objetos “andam juntos”.

Ao todo a Gestalt possui 6 leis básicas, são elas:

  • Semelhança
  • Proximidade
  • Continuidade
  • Pregnância
  • Fechamento
  • Unidade

Porém eu vou falar aqui sobre os 4 princípios que mais utilizo.

Proximidade

Conceito: tendemos a agrupar elementos que estejam próximos um do outro formando uma unidade.

Como exemplo, pense em como o kerning adequado pode ajudar o olho a entender quais letras formam palavras individuais. Em alguns casos, espaços excessivos entre as letras podem causar confusão quando uma palavra termina e a próxima começa.

No exemplo abaixo, enxergamos 3 colunas distintas. Você consegue ver como a proximidade dos elementos entre si causa automaticamente essa percepção em nosso cérebro?

Como aplicar: você pode utilizar a proximidade para definir a hierarquia numa UI.

Na imagem acima vemos 3 elementos (título, texto e botão) formando juntos um bloco do header.

Aqui temos o número 01 no topo, mais distante do título e texto. Temos a sensação de enxergar 2 blocos. Apesar dos tamanhos de fontes serem diferentes, nosso cérebro entende que o título e o texto fazem parte do mesmo bloco.

Semelhança

Conceito: percebemos elementos como pertencentes ao mesmo grupo, se eles se parecem uns com os outros. Podemos aplicar o princípio da semelhança usando cor, tamanho, orientação, textura e até mesmo fontes.

Na imagem abaixo podemos observar que a semelhança foi usada para diferenciar os títulos e links do menu.

O que está em branco pode ser entendido como grupo de títulos e o que está em cinza como links.

Aqui os títulos se agrupam por um cinza mais escuro, enquanto que os links se assemelham pelo cinza claro.

Como aplicar: você pode definir cores para os links de menus e subtítulos ou definir uma combinação de fontes para os títulos e textos.

Nessa interface os links e subtítulos foram definidos pela cor azul. E note que a fonte utilizada nos títulos é diferente da usada nos textos.

Continuidade

Conceito: acontece quando elementos estão próximos e alinhados entre si dando a sensação de seguir uma direção.

Perceba como os logos abaixo, dispostos um do lado do outro, nos dão a sensação de juntos formarem uma linha.

Os itens de um menu também são um bom exemplo de continuidade.

Vemos ainda outro exemplo nesse formulário, aonde os campos foram postos lado a lado de forma muito próxima.

Como aplicar: mantenha os elementos de forma alinhada na página. Lembrando que a distância utilizada entre cada elemento também contribui para dar a sensação de continuidade.

Fechamento

Conceito: o princípio do fechamento se aplica quando nosso cérebro completa informações que estão faltando. Nossas mentes reagem a padrões que são familiares, embora muitas vezes recebamos informações incompletas.

Na imagem abaixo podemos observar que embora não exista nenhuma linha delimitando os conteúdos, automaticamente dividimos as informações em 3 colunas. Criamos essa linha imaginária em volta dos elementos.

Como aplicar: agrupe informações em blocos.

Nessa UI a imagem, data, categoria, título e descrição dispostos um embaixo do outro formam um bloco. Veja que por mais que haja uma hierarquia de informações enxergamos um todo.

Na imagem acima podemos ver 4 blocos de informações, 2 são imagens e outros 2 são grupos compostos por título, descrição e botão.


Muitos outros princípios da Gestalt podem ser utilizados para desenhar interfaces mais bonitas, desafio você a se aprofundar no assunto e experimentá-los nos seus layouts, pode ter certeza que esses pequenos detalhes farão uma diferença enorme para o seu usuário.

Comenta aqui como foi a sua experiência depois.

Um abraço.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store