Princípios de Design: Percepção Visual e os Princípios da Gestalt
Este artigo faz parte de uma nova série sobre princípios de design que podem servir tanto como um fortalecimento para designers experientes como uma referência para os recém-chegados à indústria. Esperamos que o conteúdo aqui abordado não seja demasiado óbvio e auto-explicativo, mas é sempre óptimo ter um revigoramento rápido e agradável de vez em quando, não é?
Em 1910, o psicólogo Max Wertheimer teve uma percepção quando observou uma série de luzes a acender e a apagar numa linha férrea. Era semelhante à forma como as luzes que rodeavam uma marquise de cinema se acendiam e apagavam.
Para o observador, parece que uma única luz se move em torno da cobertura viajando de lâmpada em lâmpada, quando na realidade é uma série de lâmpadas que se ligam e desligam, e as luzes não se movem de todo.
Esta observação levou a um conjunto de princípios descritivos sobre a forma como percebemos visualmente os objectos. Estes princípios estão no núcleo de quase tudo o que fazemos graficamente como designers.
Muitos dos princípios de design que seguimos surgem da teoria da Gestalt. Neste artigo, vou guiá-lo através de um pouco de teoria e oferecer-lhe algumas definições básicas dos princípios da Gestalt.
As ideias-chave por detrás da Teoria da Gestalt
“O todo é diferente da soma das partes”.
— Kurt Koffka
A citação acima é Gestalt em poucas palavras. Quando os seres humanos vêem um grupo de objectos, percebemos a sua totalidade antes de vermos os objectos individuais. Vemos o todo como mais do que a soma das partes, e mesmo quando as partes são entidades completamente separadas, vamos procurar agrupá-las como um todo. Há várias ideias-chave por detrás da Gestalt e da terapia Gestalt.
EMERGÊNCIA (O TODO É IDENTIFICADO ANTES DAS PARTES)
A emergência é o processo de formação de padrões complexos a partir de regras simples. Ao tentarmos identificar um objecto, procuramos primeiro identificar o seu contorno. Depois fazemos corresponder este padrão de contorno a formas e objectos que já conhecemos para encontrar uma correspondência. Só depois de o todo emergir através desta concordância de padrões de contorno é que começamos a identificar as partes que constituem o todo.
Ao criar um design, tenha em mente que as pessoas identificarão os elementos primeiro pela sua forma geral. Um objecto simples e bem definido comunicará mais rapidamente do que um objecto detalhado com um contorno difícil de reconhecer.
REIFICAÇÃO (A NOSSA MENTE PREENCHE AS LACUNAS)
A reificação é um aspecto da percepção em que o objecto tal como é percebido contém mais informação espacial do que o que está realmente presente. Ao tentarmos relacionar o que vemos com os padrões familiares que temos armazenados na memória, nem sempre existe uma correspondência exacta. Em vez disso, encontramos uma correspondência próxima e depois preenchemos as lacunas do que pensamos que devemos ver.
A reificação sugere que não precisamos de apresentar o esboço completo para que os telespectadores o vejam. Podemos deixar de fora partes do esboço, desde que forneçamos o suficiente para permitir uma concordância de padrões suficientemente próxima. Podemos ver exemplos disto um pouco mais abaixo sob o princípio do fechamento.
MULTI-ESTABILIDADE (A MENTE PROCURA EVITAR A INCERTEZA)
A multi-estabilidade é a tendência das experiências perceptivas ambíguas se moverem de forma instável para trás e para a frente entre interpretações alternativas. Alguns objectos podem ser percebidos de mais do que uma forma. Um exemplo de baixo, na secção de figura/fundo, é um exemplo que provavelmente já viu antes. A imagem pode ser vista ou como duas faces em perfil ou como um vaso.
Não se pode ver ambas ao mesmo tempo. Em vez disso, salta-se rapidamente para a frente e para trás entre as duas alternativas estáveis. Uma tenderá a ser a sua percepção dominante e quanto mais tempo passar sem começar a ver a outra, tanto mais difícil será ver essa outra percepção.
Do ponto de vista do design, se quiser mudar a percepção de alguém, não tente mudar tudo ao mesmo tempo. Encontre uma forma de conseguir que eles vejam uma alternativa. Depois trabalhe para reforçar essa visão alternativa, enfraquecendo ao mesmo tempo o original.
INVARIÂNCIA (SOMOS BONS A RECONHECER SEMELHANÇAS E DIFERENÇAS)
A invariância é uma propriedade de percepção em que objectos simples são reconhecidos independentemente da sua rotação, translação e escala. Uma vez que frequentemente encontramos objectos de diferentes perspectivas, desenvolvemos uma capacidade de os reconhecer, apesar da sua aparência diferente.
Imagine que você só conseguisse reconhecer alguém que conhecesse se ele estivesse directamente à sua frente e o confrontasse, mas não conseguisse reconhecê-lo se tivessem virado em perfil. Apesar da perspectiva visual diferente, ainda podemos reconhecer as pessoas.
Pode ver estas ideias em jogo nos princípios abaixo. A ideia principal é que os princípios de Gestalt são sobre percepção e o que é comunicado visualmente pelos objectos. Os princípios falam ao núcleo da linguagem visual dentro da qual trabalhamos.
Princípios de Gestalt
A maior parte dos princípios são relativamente fáceis de compreender. Há um tema comum que percorre muitos deles.
“Sendo todos os outros iguais, os elementos que estão relacionados por X tendem a ser agrupados perceptualmente em unidades de ordem superior”.
— Stephen Palmer
Muitos dos princípios abaixo seguirão este padrão. Os princípios ou definem X ou a ordem superior que é percebida.
LEI DE PRÄGNANZ (BOA FIGURA, LEI DA SIMPLICIDADE)
“As pessoas irão perceber e interpretar imagens ambíguas ou complexas como a(s) forma(s) mais simples possível”.
Este é o princípio fundamental de Gestalt. Preferimos coisas que sejam simples, claras e ordenadas. Instintivamente, estas coisas são mais seguras. Demoram menos tempo a processar e apresentam surpresas menos perigosas.
Quando confrontados com formas complexas, tendemos a reorganizá-las em componentes mais simples ou num todo mais simples. É mais provável que se veja a imagem da esquerda acima composta pelo simples círculo, quadrado e triângulo como se vê à direita do que como a forma complexa e ambígua do conjunto das formas.
Neste caso, ver três objectos distintos é mais simples do que ver um objecto complexo. Noutros casos, é mais simples ver um único objecto.
FECHAMENTO
FECHAMENTO
“Quando vemos um arranjo complexo de elementos, tendemos a procurar um padrão único e reconhecível”.
Tal como com Prägnanz, o fechamento procura a simplicidade. O fechamento é o oposto do que vimos na imagem de Prägnanz acima, onde três objectos eram mais simples do que um. Com o fechamento, em vez disso, combinamos partes para formar um todo mais simples. O nosso olho preenche a informação em falta para formar a figura completa.
Na imagem esquerda acima, deve ver-se um triângulo branco, embora a imagem seja na realidade composta por três formas negras do tipo Pac-Man. Na imagem da direita, vê-se um panda, embora a figura seja composta por várias formas aleatórias. Ver o triângulo e o panda é mais simples do que tentar fazer sentido das partes individuais.
O fechamento pode ser pensado como a cola que mantém os elementos juntos. Trata-se da tendência humana para procurar e encontrar padrões.
A chave do fechamento é fornecer informação suficiente para que o olho possa preencher o resto. Se faltar demasiado, os elementos serão vistos como partes separadas em vez de um todo. Se for fornecida demasiada informação, não há necessidade de ocorrer o fechamento.
SIMETRIA E ORDEM
“As pessoas tendem a perceber os objectos como formas simétricas que se formam à volta do seu centro”.
A simetria dá-nos uma sensação de solidez e ordem, que tendemos a procurar. É da nossa natureza impor ordem ao caos. Este princípio leva-nos a querer equilíbrio na composição, embora as nossas composições não necessitem de ser perfeitamente simétricas para estarem em equilíbrio.
Na imagem acima, deverá ver três pares de parênteses de abertura e fecho. O princípio de proximidade, a que chegaremos mais tarde nesta publicação, poderá sugerir que devemos ver algo mais. Isso sugere que a simetria tem precedência sobre a proximidade.
Uma vez que os nossos olhos encontrarão rapidamente simetria e ordem, estes princípios podem ser utilizados para comunicar informação de forma eficaz e rápida.
FIGURA/FUNDO
“Os elementos são percebidos ou como figura (o elemento em foco) ou como fundo (o plano de fundo sobre o qual a figura repousa)”.
Figura/fundo refere-se à relação entre os elementos positivos e o espaço negativo. A ideia é que o olho irá separar figuras inteiras do seu fundo, a fim de compreender o que está a ser visto. É uma das primeiras coisas que as pessoas farão quando olharem para qualquer composição.
A relação figura/fundo pode ser estável ou instável, dependendo da facilidade com que se determina qual é qual. O exemplo clássico de onde a relação é instável é a imagem esquerda acima. Ou se vê um vaso ou duas faces, dependendo se se vê a cor preta como figura e o branco como fundo, ou vice versa. O facto de se poder saltar facilmente entre as duas percepções demonstra a relação instável.
Quanto mais estável for a relação, melhor podemos levar o nosso público a concentrar-se no que queremos que ele veja. Dois princípios relacionados podem ajudar-nos:
Área — O menor de dois objectos sobrepostos é visto como figura. O maior é visto como fundo. Pode ver isto na imagem acima. A forma mais pequena é a figura, independentemente da cor.
Convexidade — Os padrões convexos, em vez de côncavos, tendem a ser vistos como figuras.
CONECTIVIDADE UNIFORME
“Os elementos que estão visualmente conectados são percebidos como mais relacionados do que os elementos sem conexão”.
Na imagem abaixo, as linhas ligam dois pares de elementos. Esta ligação leva-nos a perceber que os elementos ligados estão relacionados entre si de alguma forma.
De todos os princípios que sugerem que os objectos estão relacionados, a conectividade uniforme é a mais forte. Na imagem acima, embora vejamos dois quadrados e dois círculos, vemos os pares de círculo e quadrado como mais fortemente relacionados porque estão visualmente ligados.
Note-se que as linhas não precisam de tocar nos elementos para que a ligação seja percebida.
REGIÕES COMUNS
“Os elementos são percebidos como parte de um grupo se estiverem localizados dentro da mesma região fechada”.
Outra forma de mostrar uma ligação entre elementos é encerrá-los de alguma forma. Tudo dentro do cerco é visto como relacionado. Tudo o que se encontra fora do cerco é visto como separado. Os círculos na imagem abaixo são todos iguais, no entanto, vemos dois grupos distintos, com os círculos em cada cerco relacionados de alguma forma.
A forma típica de mostrar uma região comum é desenhar uma caixa à volta dos elementos relacionados, como fiz acima. Colocar os elementos sobre uma cor de fundo diferente da do seu ambiente imediato também funcionará.
PROXIMIDADE
“Os objectos que estão mais próximos são vistos como mais relacionados do que os objectos que estão mais afastados”.
A proximidade é semelhante a regiões comuns, mas utiliza o espaço como cerca. Quando os elementos são posicionados próximos uns dos outros, são vistos como parte de um grupo e não como elementos individuais. Isto é especialmente verdade quando os elementos do grupo estão mais próximos uns dos outros do que estão de quaisquer elementos fora do grupo.
Os objectos não precisam de ser semelhantes de qualquer outra forma para além de estarem agrupados perto uns dos outros no espaço, para serem vistos como tendo uma relação de proximidade.
CONTINUAÇÃO
“Os elementos dispostos numa linha ou curva são vistos como mais relacionados do que os elementos que não se encontram na linha ou curva”.
É instinto seguir um rio, um caminho ou uma linha de vedação. Uma vez que se olha ou se move numa determinada direcção, continua-se a olhar ou move-se nessa direcção até se ver algo significativo ou até se determinar que não há nada significativo para ver.’
Outra interpretação deste princípio é que vamos continuar a nossa percepção das formas para além dos seus pontos finais. Na imagem acima, vemos uma passagem de linha e curva em vez de quatro segmentos de linha e de curva distintos que se encontram num único ponto.
DESTINO COMUM (SINCRONIA)
“Os elementos que se movem na mesma direcção são vistos como mais relacionados do que os elementos que estão estacionários ou que se movem em diferentes direcções”.
Independentemente da distância entre os elementos colocados ou de quão diferentes aparecem, se forem vistos como movendo-se ou mudando em conjunto, serão percebidos como estando relacionados.
Os elementos não precisam de estar em movimento para que o princípio do destino comum esteja presente. É mais que eles são vistos como tendo um destino comum. Por exemplo, se quatro pessoas estiverem agrupadas, mas duas forem observadas em direcção à direita, serão vistas como tendo um destino comum. Mesmo que duas pessoas estejam apenas a olhar na mesma direcção, serão vistas como tendo um destino comum.
Na imagem acima, as setas são suficientes para indicar que os elementos partilham um destino comum. Embora não seja necessário movimento ou mudança, ambos continuam a ser uma indicação mais forte do destino comum do que coisas como setas ou olhar na mesma direcção que apenas implicam movimento.
PARALELISMO
“Elementos que são paralelos uns aos outros são vistos como mais relacionados do que elementos não paralelos uns aos outros”.
Este princípio é semelhante ao princípio do destino comum acima referido. As linhas são frequentemente interpretadas como apontando ou movendo-se em alguma direcção. As linhas paralelas são vistas como apontando ou movendo-se na mesma direcção e estão assim relacionadas.
Deve-se notar que para que o paralelismo seja percebido, as linhas também podem ser curvas ou formas, embora com estas últimas as formas devam ser um pouco parecidas com linhas para que apareçam paralelas.
SIMILARIDADE
“Os elementos que partilham características semelhantes são vistos como mais relacionados do que os elementos que não partilham essas características”.
Qualquer número de características pode ser semelhante: cor, forma, tamanho, textura, etc. Quando um espectador vê estas características semelhantes, percebe os elementos como estando relacionados devido às características partilhadas.
Na imagem abaixo, os círculos vermelhos são vistos como estando relacionados com os outros círculos vermelhos e os círculos pretos com os círculos pretos devido à semelhança de cor. Os círculos vermelhos e pretos são vistos como sendo diferentes um do outro, apesar de serem todos círculos.
Um lugar óbvio para encontrar similaridade online está na cor dos links. Tipicamente, os links dentro do conteúdo serão modelados da mesma maneira, muitas vezes azul e sublinhados. Isto permite ao espectador saber que as diferentes peças de texto estão relacionadas. Uma vez descoberto que um é um link, comunica os outros também são links.
PONTOS DE FOCO
“Elementos com um ponto de interesse, ênfase ou diferença irão captar e prender a atenção do espectador”.
Este princípio sugere que a nossa atenção será atraída para o contraste, para o elemento que, de alguma forma, é diferente dos outros. Na imagem abaixo, o seu olho deve ser atraído para o quadrado. É uma forma e cor diferente dos outros elementos. Também lhe dei uma sombra para o realçar ainda mais.
O princípio dos pontos focais surge provavelmente da nossa necessidade de identificar rapidamente o desconhecido para nos alertar para o perigo potencial.
Os princípios de semelhança e pontos focais estão ligados, e os pontos focais não podem ser vistos sem a presença de semelhança entre outros elementos.
EXPERIÊNCIAS PASSADAS
“Os elementos tendem a ser percebidos de acordo com a experiência passada de um observador”.
A experiência passada é talvez o princípio da Gestalt mais fraco. Em conjunto com qualquer dos outros princípios, o outro princípio dominará sobre o princípio da experiência passada.
A experiência passada é única para o indivíduo, por isso é difícil fazer suposições sobre como ela será percebida. No entanto, há experiências comuns que todos partilhamos. Por exemplo, muito significado de cor surge de experiências passadas.
Tendo visto semáforos ao longo das nossas vidas, esperamos que o vermelho signifique paragem e o verde signifique partida. Provavelmente vê a imagem acima como um semáforo no seu lado, devido às três cores comuns. Essa é a experiência passada no trabalho.
Muitas das nossas experiências comuns também tendem a ser culturais. A cor fornece novamente exemplos. Em alguns países, o branco é visto como puro e inocente e o preto como o mal e a morte. Em outros países, estas interpretações são invertidas. As convenções podem surgir quando a experiência é comummente partilhada, embora mais uma vez seja importante lembrar que nem todos partilhamos as mesmas experiências.
Resumo de Gestalt
Os princípios de Gestalt são importantes para compreender. Eles situam-se na base de tudo o que fazemos visualmente como designers. Descrevem a forma como todos percebem visualmente os objectos.
Os princípios acima mencionados devem ser relativamente fáceis de compreender. Para a maioria deles, a definição e a imagem são provavelmente tudo o que era necessário para compreender o princípio. Ao mesmo tempo, compreender as ideias básicas destes princípios não é o mesmo que compreender como eles influenciam o design.
Esta publicação é uma tradução do artigo Design Principles: Visual Perception And The Principles Of Gestalt de Steven Bradley, enquadrado nas aulas de Design de Software da Baoba Hub.
