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.

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.