7 Gestalt principles of visual perception: cognitive psychology for UX (Português)

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.

  1. 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.,

    1. Figura-fundo
    2. Similaridade
    3. Proximidade
    4. região Comum
    5. a Continuidade
    6. o Fechamento
    7. 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 Warren

    na 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 Beacon

    uma 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 Rutledge

    Exemplos 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 Rutledge

    a 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 Magazine

    adicionar 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 Magazine

    Na 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 Volianskyi

    Por 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 Magazine

    Quando 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.

Leave a Comment