Princípios da Gestalt aplicados à comunicação visual e UI Design
O seu cérebro sempre está tentando compreender o mundo e as formas baseando-se nos padrões de comportamento visual adquiridos nas suas experiências passadas.
E para entender mais sobre esse processo, vamos a um exemplo:
Você já olhou para um objeto e lembrou de um rosto humano? Já se perguntou o por que isso acontece?
Isso acontece pela forma como o seu cérebro funciona! Mas ao utilizar a teoria de Gestalt você poderá compreender melhor como a informação será passada através das formas criadas.
O que é Gestalt?
Gestalt, é um grupo de princípios de percepção visual desenvolvidos por psicólogos alemães em meados de 1920. E baseia-se na teoria de que “um todo organizado é percebido como maior que a soma de suas partes”.
Essas leis auxiliam as pessoas a entenderem e assimilarem as informações que são passadas pelas imagens, com elas, também podemos perceber o porquê algumas formas agradam mais que as outras, ou o porquê enxergarmos um objeto de tal maneira.
Ao utilizar Gestalt a nosso favor, nossos projetos podem ser melhorados para alcançarmos melhor os objetivos de comunicação.
Conheça os 7 principais princípios e como eles podem ser aplicados no UI Design:
1. Proximidade
Esse princípio refere-se aos elementos que estão próximos uns dos outros. Pois, coisas próximas entre si são percebidas como mais relacionadas do que coisas que estão distantes.
Princípio da proximidade aplicado em UI Design
Podemos utilizar esse princípio para agrupar as informações que são semelhantes, organizar conteúdo e layouts, e afastar as que não são relacionadas, aqui o espaço em branco pode te auxiliar no fluxo de informações.
Exemplo: No site da tog.design, nessa seção em que refere-se aos serviços nós optamos por agrupar todos eles em uma única parte, e se observar mais atentamente dentro de cada um dos serviços possui subgrupos que estão mais próximos, como por exemplo, o nome do serviço e a descrição dele.
2. Semelhança
Elementos que compartilham características visuais semelhantes são mais relacionados do que aqueles que não compartilham. Essa semelhança pode ser cor, forma, tamanho, textura, etc.
Princípio da semelhança aplicado em UI Design
O princípio da semelhança pode nos ajudar a organizar e classificar os objetos dentro de um grupo. E é possível tornar os elementos semelhantes atribuindo a eles a mesma forma, cor, orientação, arquitetura, etc.
Exemplo: No site da tog.design, nessa seção do time, cada espaço reservado para apresentar cada um dos colaboradores da equipe possui a mesma arquitetura, ou seja, cada pessoa terá sua foto, nome e cargo exposto aqui.
3. Fechamento
O fechamento se estabelece através da nossa percepção, pois nosso cérebro interpreta uma forma completa ou uma figura reconhecível se os elementos estão estruturados de uma forma definida. Ele também ocorre quando um objeto está incompleto ou partes dele não estão incluídas.
Princípio do fechamento aplicado em UI Design
Quando esse princípio é apresentado com a quantidade certa de informações, é possível diminuir o número de elementos necessários para transmitir uma mensagem. Um uso comum é em iconografias, onde a simplicidade da comunicação pode auxiliar no entendimento do todo de forma mais rápida.
Exemplo: Na tog.design, utilizamos o princípio do fechamento na iconografia da submarca tog.lab.
4. Simetria
Os elementos simétricos tendem a ser percebidos como pertencentes a um mesmo grupo, e isso ocorre de forma independente de sua distância, aqui o importante é que seja passado a sensação de solidez e ordem.
Princípio da simetria aplicado em UI Design
Geralmente layouts simétricos tendem a ser visualmente mais agradáveis, mas ao utilizá-los sem existir uma flexibilidade podem deixá-los cansativos. Por isso é recomendado criar uma simetria visual mais dinâmica, onde nela é possível adicionar um ou outro elemento assimétrico afim de tornar tudo mais fluído, aqui o importante é tentar manter o equilíbrio entre a simetria e a assimetria.
Exemplo: No wireframe do site da tog.design, podemos ver esse equilíbrio na seção dos projetos, onde apenas alguns cases são mantidos iguais.
5. Continuação
Elementos organizados em uma linha curva suave são considerados facilmente elementos relacionados.
Princípio da continuação aplicado em UI Design
Utilizar a continuidade em uma composição pode nos auxiliar na interpretação da direção e do movimento das informações, pois ao criar uma ordenação de conteúdo você conseguirá guiar a leitura do seu usuário, e ao realizar uma interrupção poderá sinalizar o final de uma seção, chamando a atenção para uma nova parte do conteúdo.
Exemplo: No wireframe do site da tog.design, podemos ver essa interrupção na parte final da página de apresentação dos cases, onde sugerimos outros trabalhos que estão relacionados ao anterior com uma listagem partindo da esquerda para a direita.
6. Destino Comum
Elementos que seguem a mesma direção ou um mesmo destino tendem a serem entendidos como pertencentes a um mesmo grupo.
Princípio do destino comum aplicado em UI Design
O princípio do destino comum tem mais relevância quando os elementos se movem de forma sincronizada, utilize a mesma direção e velocidade, e a diferença entre eles será algo irrelevante para a percepção do usuário.
Exemplo: Na versão publicada do site da tog.design, utilizamos o princípio do destino comum na seção dos cases, aqui além dos elementos serem semelhantes entre si eles também possuem uma movimentação padrão.
7. Região comum
Os elementos que estão dispostos em uma mesma região são entendidos como pertencentes ao mesmo grupo.
Princípio da região comum aplicado em UI Design
Além de nos auxiliar no agrupamento e na organização das informações semelhantes, esse princípio pode nos ajudar a realizar a separação do conteúdo, pois ao afastar certos elementos você passará a percepção de que eles não são pertencentes do mesmo grupo.
Exemplo: No site da tog.design, utilizamos esse princípio abaixo do título “O que se encontra por aqui” onde as tag presentes naquela seção refere-se as informações contidas dentro da área de estratégia, deixando perceptível a hierarquia criada.
Conclusão
Saber utilizar corretamente esses princípios e ter uma compreensão de como o cérebro humano funciona ajudará você a se tornar um “mestre na comunicação visual”, e apesar dessa definição soar meio que pesada para alguns, o que deixo claro é que, saber escolher qual elemento visual é mais eficaz para determinadas situações fará com que você influencie a percepção do seu usuário, fazendo com que a visão e comportamento dele sejam direcionadas para o objetivo ou foco que foi determinado.
O design da interface do usuário não é só sobre saber criar um layout bonito ou utilizar cores legais, mas sim sobre a comunicação e experiência que são passadas, e ao saber montar isso de forma correta você fará com que os seus usuários se “apaixonem” pela sua solução.
Se você curtiu esse artigo eu recomendo que você também veja esses links que vou deixar aqui embaixo:
E se você chegou até aqui não custa nada pedir para que você siga a tog.design também no Instagram ❤
