The human brain is wired to see structure, logic, and patterns. Ajuda-nos a dar sentido ao mundo. Na década de 1920, um grupo de psicólogos alemães desenvolveu teorias sobre como as pessoas percebem o mundo ao seu redor, chamados princípios Gestalt.
Por exemplo, o que você vê quando olha para esta imagem?,
Fonte: O olho inspirado
Se você é como a maioria das pessoas, você provavelmente vê um triângulo. Mas na realidade, tudo o que há são três brancos “pac men”.”Vemos o triângulo porque nossos cérebros pegam na informação visual ambígua e organizam—na em algo que faz sentido para nós-algo familiar, ordenado, simétrico e que nós entendemos.quando este processo cognitivo começa, as nossas mentes saltam de compreender todos os elementos como componentes individuais e não relacionados para ver toda a forma como um todo., E como resultado, percebemos formas e objetos onde nenhum foi criado.
para ilustrar este processo, confira o GIF abaixo. O teu cérebro vê um cão a andar, mas não passa de uma série de pontos em movimento.
Fonte: Gizmodo
estes são exemplos simples, mas eles demonstram os tipos de atalhos que os nossos cérebros fazem todo o tempo para fazer rapidamente sentido do mundo.quais são os princípios da Gestalt?,
estes atalhos são conhecidos como os princípios Gestalt da percepção visual, e eles detalham como nossos cérebros criam estrutura por padrão. Mas por que entender isso é importante para web e design móvel?
por que os designers devem se preocupar com os princípios Gestalt
grandes designers entendem o papel poderoso que a psicologia desempenha na percepção visual. O que acontece quando o olho de alguém encontra as suas criações de design? Como sua mente reage à mensagem que sua peça está compartilhando?, – Laura Busche, estrategista de conteúdo de marca na Autodesk
pense sobre essa citação por um minuto. Quando as pessoas vêem os teus desenhos pela primeira vez, como é que os experimentam? Para entender o que faz o design da IU funcionar, você precisa entender a psicologia da percepção humana.a lei fundamental que rege um princípio Gestalt é que tendemos a ordenar a nossa experiência de uma forma regular, ordenada e reconhecível. Isto é o que nos permite criar significado em um mundo complexo e caótico., E ter uma compreensão sólida de como esses princípios funcionam vai ajudá-lo de três maneiras.
- eles irão ajudá-lo a determinar quais os elementos de design mais eficazes em uma dada situação. Por exemplo, quando usar hierarquia visual, sombreamento de fundo, gradientes e como agrupar itens similares e distinguir os diferentes.estes princípios psicológicos têm poder para influenciar a nossa percepção visual, o que permite aos designers direccionar a nossa atenção para pontos específicos de foco, fazer-nos tomar acções específicas e criar mudanças comportamentais.,e, finalmente, ao mais alto nível, os princípios Gestalt ajudam você a projetar produtos que resolvam o problema do cliente ou atendam as necessidades do usuário de uma forma bonita, agradável e intuitiva de usar.neste artigo, vamos discutir Sete Leis Gestalt ou princípios que se aplicam diretamente ao design moderno, e compartilhar alguns exemplos de como eles são usados no design UI. Esta não é uma lista exaustiva, mas você vai rapidamente começar a notar que há uma sobreposição entre muitos dos princípios e que todos eles trabalham juntos fluidamente. Agora vamos mergulhar.,
- Figura-fundo
- Similaridade
- Proximidade
- região Comum
- a Continuidade
- o Fechamento
- ponto Focal
o Princípio #1: figura-fundo
A figura-fundo princípio afirma que as pessoas instintivamente perceber os objetos como sendo em primeiro plano ou plano de fundo. Eles destacam-se proeminentemente na frente (a figura) ou recuam para trás (o chão).,
Fonte: uma anà chamada Warrenna imagem acima, por exemplo, seu olho vê instantaneamente uma maçã branca sentada em um fundo preto.
esta determinação irá ocorrer rápida e subconscientemente na maioria dos casos. Figura / Solo nos permite saber em que devemos nos concentrar e o que podemos ignorar com segurança em uma composição. – Steven Bradley, web designer
quando as pessoas usam seu site ou aplicativo móvel, uma das primeiras coisas que fazem em cada tela é determinar qual é a figura e qual é o solo.,
exemplos do princípio da figura-Solo
a homepage Basecamp tem um monte de gráficos, texto, formas e outras informações. E por causa do princípio figure-ground, você pode dizer imediatamente que você deve se concentrar no conteúdo nas áreas de primeiro plano branco.
Primeiro, o texto e logotipo no lado esquerdo da página estão claramente em cima da imagem de fundo. Em segundo lugar, o texto branco no menu à direita está em cima do fundo preto.,
princípio #2: semelhança
o princípio da semelhança afirma que quando as coisas parecem ser semelhantes umas às outras, as agrupamos. E nós também tendemos a pensar que eles têm a mesma função.
por exemplo, nesta imagem, parecem existir dois grupos separados e distintos baseados na forma: os círculos e os quadrados.
Fonte: Creative Beaconuma variedade de elementos de design, como cor e organização, pode ser usado para estabelecer grupos semelhantes., Na imagem abaixo, por exemplo, mesmo que todas as formas são as mesmas, é claro que cada coluna representa um grupo distinto:
Fonte: Andy RutledgeExemplos de similaridade princípio
GitHub utiliza o princípio de semelhança de duas formas na página a seguir. Primeiro, usam-no para distinguir diferentes secções. Você pode dizer imediatamente que a seção cinza no topo serve um propósito diferente da seção preta, que também é separada e diferente da seção azul.,
Em segundo lugar, eles também usam a cor Azul para distinguir links do texto regular e para comunicar que todo texto azul compartilha uma função comum.
princípio #3: proximidade
o princípio da proximidade afirma que as coisas que estão próximas parecem estar mais relacionadas do que as coisas que estão mais espaçadas.
Fonte: Andy Rutledgea Proximidade é tão poderosa, que substitui similaridade de cor, forma, e outros fatores que podem diferenciar um grupo de objetos.,
Fonte: Steven Bradley
Notice the three groups of black and red dots above? A proximidade relativa dos objetos tem uma influência ainda mais forte no agrupamento do que a cor.
exemplos do princípio de proximidade
a proximidade de cada imagem e seu texto correspondente comunica que eles estão relacionados um com o outro.
e Vice o usa para distinguir entre as imagens, manchetes, descrições e outras informações para cada uma de suas histórias.,
princípio #4: região comum
o princípio da região comum é altamente relacionado à proximidade. Ela afirma que quando os objetos estão localizados dentro da mesma região fechada, nós os percebemos como sendo agrupados juntos.
Fonte: Smashing Magazineadicionar contornos ou outras barreiras visíveis é uma ótima maneira de criar uma separação percebida entre grupos de objetos—mesmo que eles tenham a mesma proximidade, forma, cor, etc.,
exemplos do princípio comum da região
no exemplo do Pinterest abaixo, o princípio comum da região é usado para separar cada pin-incluindo sua foto, título, descrição, contribuinte, e outros detalhes—de todos os outros pinos ao seu redor.
E é usado no exemplo do Facebook abaixo para comunicar que os comentários, gostos e interações estão associados a este post específico—e não as outras postagens que o rodeiam.,
o Princípio #5: a continuidade
O princípio da continuidade afirma que os elementos que são dispostos em uma linha ou curva são percebidos como mais relacionados do que os elementos não sobre a linha ou curva.
Fonte: Smashing MagazineNa imagem acima, por exemplo, os pontos vermelhos em linha curva parece estar mais relacionado com os pontos pretos sobre a linha curva que os pontos vermelhos na linha reta horizontal., Isso é porque seu olho naturalmente segue uma linha ou uma curva, tornando a continuação um sinal mais forte de relacionamento do que a semelhança de cor.
exemplos do princípio da continuidade
Amazon usa continuidade para comunicar que cada um dos produtos abaixo é similar e relacionado uns com os outros.
Sprig usa-o para explicar o processo de três etapas para usar o seu aplicativo.
e Credit Karma utiliza-o para ilustrar os benefícios que os seus serviços proporcionam.,
o Princípio #6: fechamento
O princípio do fechamento afirma que, quando olhamos para um arranjo complexo de elementos visuais, nós tendemos a olhar para um único padrão reconhecível.
em outras palavras, quando você vê uma imagem que tem partes em falta, seu cérebro vai preencher os espaços em branco e fazer uma imagem completa para que você ainda possa reconhecer o padrão.
Fonte: Eduard VolianskyiPor exemplo, quando você olhar a imagem acima, você provavelmente verá uma zebra, mesmo que a imagem é apenas uma coleção de formas pretas., A sua mente preenche as informações em falta para criar um padrão reconhecível baseado na sua experiência.
exemplos do princípio de fechamento
o princípio de fechamento é usado muitas vezes em projetos de logotipo em uma variedade de empresas, incluindo IBM, NBC, Zendesk, e círculo de financiamento.
princípio #7: ponto focal
,
Fonte: Smashing MagazineQuando você olhar a imagem acima, por exemplo, a primeira coisa que você nota é o quadrado vermelho porque é diferente de todos os círculos negros ao redor de ti. É o primeiro ponto de interesse que agarra sua atenção, e daí sua atenção se move para outras partes da imagem.
exemplos do princípio do ponto focal
Twilio usa o princípio do ponto focal para atrair os seus olhos para o seu botão de chamada para acção.,
e, no exemplo abaixo, Instacart combina o princípio do ponto focal com o princípio da figura-solo para atrair os olhos para o primeiro plano branco e, em seguida, para o botão verde “encontrar Reservas”.
Pensamentos finais
Se você entender como a mente humana funciona, é mais fácil direcionar a atenção das pessoas para o lugar certo. E manter esses princípios no topo da mente irá ajudá-lo a manter o usuário no centro de seu processo de desenvolvimento de produto., Se você quiser aprender mais sobre os princípios Gestalt da percepção visual, recomendamos verificar os recursos abaixo.,
bibliografia:
- Simplicidade, Simetria e Mais: a Teoria da Gestalt E Os Princípios de Design Que Deu À luz
- Princípios de Design: a Percepção Visual E Os Princípios De Gestalt
- O Designer Guia a Teoria da Gestalt
- Andy Rutledge da série de cinco partes em Forma de percepção:
- Parte 1: Figura-fundo Relacionamentos
- Parte 2: Similaridade
- Parte 3: Proximidade, Uniforme de Ligação, e Boa Continuação
- Parte 4: Destino Comum
- Parte 5: Fechamento
Quer saber mais?,para saber como a UserTesting pode ajudá-lo a compreender os seus clientes através de uma visão humana a pedido, contacte-nos Aqui.