Gestalt: conceito, princípios e como usar no seu design

A Importância da Abordagem Psicologia no design

O cérebro humano é incrivelmente talentoso na montagem de formas abstratas num todo, e assim tornando o mundo mais lógico para nós. A nossa percepção é influenciada pela forma como o nosso cérebro processa, combina e complementa a informação visual disponível.

As Seis Regras da Gestalt

Os princípios de Gestalt são leis de percepção visual em que podemos confiar, quando estamos a construir as nossas interfaces. Existem 6 leis principais para colocares em prática nos teus projetos:

Lei da Proximidade

➡️ Mantém as coisas que pertencem juntas, como os itens do menu, perto umas das outras.

As coisas que estão próximas umas das outras são entendidas como uma unidade e elementos que estão mais afastados como estando separados. A distância a outros elementos permite-nos agrupar as coisas simplesmente através da nossa perceção.

Onde utilizar? Podes utilizar esta lei para agrupar coisas de uma forma fácil, por exemplo, colocar o header, texto e imagem de um tópico mais perto uns dos outros do que de outros tópicos. Desta forma, cada tópico pode ser rapidamente identificado como um tópico separado.

Lei de Pregnância

➡️ Mantém os ícones simples!

A perceção humana procura sempre a forma mais simples de evitar uma sobrecarga mental. As formas simples são, portanto, melhor compreendidas e lembradas do que os elementos muito complexos.

Onde utilizar? Tem isto em mente quando estiveres a criar/importar ícones para o teu website ou app. Não entres em detalhes ao criar a tua iconografia.

Lei da Região Comum

➡️ Utiliza a cor de fundo para agrupar facilmente os elementos.

As áreas comuns, marcadas por borders ou cores de fundo, permitem-nos perceber os elementos individuais que as compõem como um grupo.

Onde utilizar? Os cartões são o melhor exemplo para a lei da região comum. Utilizar um layout de cartão para o teu design é a forma mais rápida de agrupar as coisas de forma visível.

Lei da Conectividade

➡️ Cria timelines ou contexto entre elementos utilizando linhas de ligação.

Os elementos que estão visualmente ligados, por exemplo por linhas ou setas, são mais suscetíveis de serem percebidos como uma unidade do que os elementos que não estão ligados.

Onde utilizar? Se quiseres mostrar um processo de avanço, podes utilizar ligações entre as etapas de um único processo. Isto permite ao utilizador ver o que o processo contém, até que ponto passou pelo processo e que etapas virão a seguir.

Lei da Similaridade

➡️ Utiliza um design consistente e semelhante para botões, navegação e links num único sistema.

Os elementos que se parecem uns com os outros são percebidos como uma só unidade. Isto acontece mesmo que não estejam próximos uns dos outros. A semelhança pode ser influenciada pela cor, forma, orientação ou tamanho.

Onde utilizar? Os headings são um bom exemplo de similaridade. Têm o mesmo aspeto e são apenas diferentes em tamanho. Todos os teus H1s são iguais, todos os teus H2s são iguais e os utilizadores reconhecem este padrão sem qualquer problema. Seguir a Lei da Semelhança também te permite criar facilmente hierarquia no teu design.

Lei do Fechamento

Nosso cérebro produz contornos que não existem. Por isso chamamos de Fechamento Sensorial da forma. Dessa forma, os elementos são agrupados se eles parecem se completar. Ou seja, nossa mente ver um objeto completo mesmo quando não há um.

Onde utilizar? O ideal é utilizar essa lei para simplificar informações. O seu usuário não precisa de ícones complexos para entender a mensagem que você deseja passar.

Sobre a TheStarter

A TheStarter é uma edtech nascida em 2021, focada no ensino personalizado de tecnologias digitais, como Research, UX Design, UI Design e Marketing Digital, através de programas 100% práticos e de ensino progressivo. A TheStarter, ao contrário do formato expositivo de aulas atuais noutras escolas, faz da prática o motor principal do seu método, e não apenas um detalhe extra. Separado em desafios, como em fases de jogos, os alunos da TheStarter aprendem em microturmas através da construção de projetos, tendo contacto simultâneo com a teoria e com a sua aplicação prática.

Influenciados também pelo panorama atual da indústria do UX/UI Design em Portugal, uma área em crescimento mas pouco desenvolvida, o projeto foi moldado para trazer uma maior especialização ao ecossistema do Design, com a introdução de cursos especializados, pioneiros em Portugal, e a criação de programas de carreira com ligação direta ao mercado de trabalho. A missão é ajudar a nova geração de iniciantes a vingar no mercado e aumentar a maturidade das empresas nos processos de pesquisa, design e desenvolvimento de produtos digitais.

Segue-nos nas redes sociais em TheStarter e Clube de UI, e junta-te à nossa comunidade aberta no Slack.