Os princípios da Gestalt e como interpretamos o que enxergamos
Este artigo foi escrito em parceria com Raquel Roverssi.
Em tudo que enxergamos, buscamos compreender a relação entre cada elemento, identificando o contexto geral. E muitas vezes, essa percepção é guiada de forma automática por nosso cérebro a partir dos padrões desenvolvidos ao longo de nossa evolução.
Na imagem a seguir, você pode estar vendo o cubo e pensando para que lado está sua face superior. Mas se olhar um pouco mais, talvez você comece a perceber que pode estar voltado para outro lado.
Este é o Cubo de Necker, apresentado em 1832 por Louis Albert Necker, como uma ilusão de ótica. Ele mostra como nosso cérebro interpreta uma imagem, tentando propor algum sentido diante da disposição e relação dos elementos.
Algumas ilusões de ótica são explicadas pela Gestalt. Este é um termo usado para definir o estudo sobre a teoria da forma, com base na psicologia cognitiva, e como nossa mente percebe estímulos visuais do mundo ao seu redor. Através da percepção do todo e não apenas de pontos isolados — levando em consideração o contexto — , os princípios da percepção visual mostram como o cérebro é capaz de criar padrões e aprender com eles.
A Gestalt está presente dentro do nosso dia a dia em diferentes situações e, devido à nossa capacidade cognitiva, já estamos acostumados com sua presença. Por exemplo, a maneira em que as estantes do supermercado estão organizadas dentro de cada categoria de produto, como propagandas publicitárias são montadas e até, de modo geral, como relacionamos cada objeto conforme suas características, padrões, disposição e relações entre cada uma das partes.
Tratando-se da experiência do usuário, o uso do produto é impactado pela percepção visual, proporcionando uma facilidade maior ou menor para executar tarefas, sempre de acordo com a capacidade de entendimento do que está sendo representado visualmente.
No fluxo de navegação, a atenção do usuário pode ser direcionada para um ponto específico e informações podem ser correlacionadas dependendo do visual e do arranjo dos elementos, afetando assim a tomada de decisão da pessoa usuária.
Esses princípios podem contribuir para o uso adequado de cores, formas, layout, espaçamentos, hierarquia e comportamentos na interface.
Sete princípios da Gestalt: bem caracterizados, podem ser percebidos e aplicados na interface conforme a necessidade e a proposta de interação. A seguir, explicaremos a você leitor cada um deles e daremos exemplos de aplicações dentro das interfaces digitais.
Proximidade
Segundo este princípio, os elementos próximos tendem a ser relacionados entre si, por mais que possuam forma ou cor diferente. Essa associação é reforçada com o uso de espaço branco entre grupos de elementos para distingui-los. Diante de elementos próximos, o usuário não necessariamente lê todos, podendo apenas ler alguns e identificar a relação com os demais.
Como aplicar: crie espaçamentos horizontais ou verticais com o mesmo padrão de alinhamento, fazendo com que os elementos que se relacionam entre si tenham uma distância menor do que a distância para outro grupo.
Similaridade
A similaridade traz a percepção que elementos parecidos são parte do mesmo grupo e possuem o mesmo comportamento. Quando um elemento precisa ter destaque, é desejado que se diferencie visualmente comparado com os demais.
Como aplicar: utilize formas e propriedades como cantos e sombras de forma semelhante. O uso de cores pode relacionar elementos mesmo com formas diferentes. E tamanhos iguais podem ser um reforço para a similaridade.
Continuidade
Dispondo elementos de forma continua, é possível criar a percepção de uma sequência e a relação entre eles. Isso conduz o olhar e a interação do usuário de forma sequencial. A continuidade pode evidenciar que há mais elementos relacionados a um grupo, mesmo que algum deles não esteja visível na tela, como em um carrossel.
Como aplicar: coloque elementos, ou grupos de elementos, de forma sequencial e alinhada. Esse princípio pode ser estruturado utilizando a proximidade e similaridade.
Fechamento
As pessoas tendem a preencher o vazio das imagens de forma a completar uma forma conhecida, a partir de um elemento segmentado ou um objeto total, convertendo objetos complexos em formas simples e/ou conhecidas.
Como aplicar: disponha os elementos alinhados de forma a criar a percepção de uma região delimitada, como blocos de conteúdo, mesmo que não haja separadores ou bordas.
Ilusão do fechamento: quando todo conteúdo está contido no campo de visão da tela, pode dar impressão de que o conteúdo acabou junto dos limites visíveis na tela. Se isso for algo intencional de ocorrer na interface, não há problema, mas é necessário ter cuidado para não criar a ilusão de maneira acidental.
Figura-fundo
Pelo princípio de figura-fundo, o usuário busca separar a imagem em profundidade, distinguindo o que há no fundo e o que está à frente. Aplicando propriedades visuais, é possível dar maior ou menor destaque aos elementos nas camadas.
Como aplicar: utilize contraste entre os elementos, de forma que o elemento dê impressão de sobressair na tela, bem como a aplicação de sombras. O uso de máscaras com transparência ou desfoque pode ser aplicado no conteúdo de fundo para diminuir seu foco. Esse exemplo é notado na segunda imagem da tela do Waze, onde o mapa é coberto com uma camada cinza transparente, dando destaques para os elementos sobre ele.
Região comum
Este princípio cria a percepção de que os elementos contidos em uma região delimitada estão relacionados, sendo considerados parte de um mesmo grupo. Com uma região comum bem delimitada, é possível sobrepor outros princípios visuais, como a proximidade ou similaridade.
Como aplicar: crie áreas utilizando borda, divisores e/ou cores para que haja uma região visível, podendo agrupar elementos mesmo que eles sejam diferentes entre si. Esta é uma boa opção para quando há pouco espaço branco para separar grupos diferentes.
Ponto focal
O princípio de ponto focal permite criar a diferenciação de um elemento, dando mais destaque e atraindo a atenção do usuário para ver alguma informação ou realizar alguma ação.
Como aplicar: utilize cores, formas, contraste, sombras ou imagens que não são predominantes na tela, de forma a criar essa diferenciação dos demais elementos, gerando um ponto focal.
A boa aplicação dos princípios de Gestalt promove uma interface otimizada para o entendimento da pessoa usuária diante de informações visuais. Basta manter esses princípios em mente, percebendo como cada um pode promover uma melhoria e sempre tendo em vista os motivos e objetivos individuais de cada aplicação.
Convido vocês a perceberem a influência da Gestalt no dia a dia e a tentarem aplicá-la no design de interfaces digitais, proporcionando uma melhor experiência de navegação.
Em seguida, algumas referências e sugestões de conteúdo sobre o tema:
