Exemplos da guestalt

no Design Digital

Material retirado da revista Wide

Edição de n°83

Gestalt aplicada no design de interfaces: exemplos práticos

www.revistawide.com.br/index.php/gestalt-interfaces-exemplos/

Unidade e Pregnância: “A composição inteira é percebida como mancha visual harmônica, cujas linhas visuais de leitura se resolvem internamente, sem remeter a algo externo, gerando ruído. Dá a impressão que não falta nem sobra nada. Também se percebe que, mesmo com a riqueza de formas, tudo é assimilado imediatamente como uma entidade visual harmônica de alta pregnância.”

Unificação, Continuidade e Proximidade: “É um caso interessante de três níveis perceptivos, com micro-elementos (ícones, textos, boxes, detalhes menores das ilustrações), as subcomposições, formadas pelo que se vê no campo visual dentro das dimensões do monitor, e a composição macro, que é gigante, representando a união de todas as partes.

Segregação e Semelhança: “Temos um verdadeiro caos controlado aqui. Percebemos uma riquíssima paleta de cores, formas e elementos visuais, mas que, pela genialidade do profissional, conseguem ser nitidamente percebidas individualmente por seguirem uma semelhança estética, graças ao uso de tipografia única, uma área de fundo sólida (em contraste com a composição repleta de linhas e formas), bem contrastada e variando entre círculos e caixas com arestas arredondadas.”

http://200.186.92.250/awards/2007/havaianas/havaianas/port/index.html#

Continuidade: houve a preocupação com dois detalhes que quebraram a ‘dureza’ das duas áreas, dando grande continuidade a elas de uma forma sutil: primeiro, angulou em uns 15 graus a linha, desestabilizando propositalmente a visão, tirando o aspecto formal da separação e deslocando o peso visual para o lado esquerdo da composição, onde inseriu um elemento pictórico formado por caracteres gráficos na mesma cor do fundo, vermelho. Mas, ao mesmo tempo, inseriu uma ilustração baseada num revólver que sobrepõe parte das duas áreas, vermelha e branca, servindo como elo entre as áreas, como uma ponte. Criamos assim, grande continuidade entre as áreas.

Unidade e Similaridade: “Após termos percebido a unidade do layout, que distribuiu os elementos de maneira a criar um ritmo não-linear na percepção do campo visual, evitando estacionar o olhar em um ponto específico, vemos aqui a disposição cognitiva do conteúdo textual: nota-se que títulos são semelhantes, usando o mesmo estilo, porém, dentro da categoria WORDS, encontramos um novo estilo com fontes de maior tamanho, denotando conteúdo mais importante, mais humanizado, mais atualizável do que os demais, geralmente automatizados. É a similaridade e suas modulações.”

http://www.newtoyork.com/

Segregação, fechamento e pregnância: “O pontilhismo tridimensional nos mostra, de maneira deliciosa, como as partes formam o todo, ponto culminante da Teoria da Gestalt. Se observarmos os pontos isoladamente (falo da imagem 3D que gira pela tela), jamais notaremos nada inteligível; porém, vendo-as como uma unidade (pelo princípio do fechamento), fica claro que se trata de um livro.Vemos também que o posicionamento das estruturas inteligíveis da interface foram dispostas de maneira magistral, usando alta pregnância, sem ruídos e sem muito texto para demonstrar os controles usados para manipular a interface, criando itens isolados de alta pregnância, de grande assimilação cognitiva.”

Proximidade e Similaridade: “Os livros que ficam ao lado esquerdo estão todos próximos e possuem forma extremamente parecidas. Porém, ao destacarmos propriedades específicas de um ou mais deles, como no caso, brilho e contraste, criamos similaridades que distanciam tais elementos do seu grupo original, colocando-o num status de item ativo, mas sem romper totalmente com sua origem comum aos demais elementos.”

http://www.concavescream.com/

Unidade e Continuidade: “À primeira vista, temos a sensação exata de que a composição está absolutamente estabilizada. Sim, formas estáveis, centralizadas, quadradas e ainda sustentadas por linhas, são, sem dúvidas, composições das mais estáveis possíveis. Quase impossível desviarmos nossos olhos da mancha visual central. A unidade então fica claríssima, tudo parece fazer parte de um mesmo objeto; é tudo muito harmônico e relacionado, até mesmo o logotipo na parte superior direita, que mesmo não fazendo parte do polígono interno delimitado pelas linhas, acabou por ser a única referência direcionadora do olhar na composição. Outra coisa: percebam claramente o princípio e a continuidade ao ler os itens de menu. Ainda que haja espaçamentos enormes entre algumas letras, nada disso nos impede de compreender o texto, justamente porque o fechamento se dá buscando em nosso subconsciente, a imagem do que pode ser mais próximo entre um C ,um ONT e um ACT -> contact!”

Pregnância: “A utilização do elemento humano (a moça), criando uma ideia de tridimensionalismo ao arrancar parte do ‘papel’, é fator de alta pregnância. Remete ao mundo real e não há nada que tenha mais pregnância do que elementos relacionados ao mundo real, tridimensional – uma vez que o bidimensional é mais relacionado ao mundo das abstrações, demandando muito mais paciência – e porque não dizer – talento, para criar mais pregnância usando elementos do universo abstrato. E podemos falar dos elementos que remetem aos adesivos, aos papéis sujos, que reforçam ainda mais a tridimensionalidade da proposta.”

Unidade, Segregação, Unificação: “Por mais caóticos que pareçam estar os elementos dessa interface, eles estão, na verdade, extremamente bem posicionados, criando uma grande unidade visual. Não há elementos faltantes e nem sobrando. O que, na verdade, parece poluído, na prática é extremamente limpo e objetivo.Vejamos o seguinte: A leitura do campo visual se faz em uma linha diagonal que vai do canto superior esquerdo até o canto inferior direito. Há uma grande unidade na proposta, justamente porque ao fazemos essa varredura, percebemos que os itens possuem grande unidade gestáltica, não nos remetendo a nenhum outro ponto específico dentro da interface, fazendo-nos, na verdade, ‘passear’ de modo modularizado por entre os elementos. E é aí que notamos a preocupação na segregação dos submódulos da composição para que estes ‘conversem’ harmonicamente com os demais itens, gerando a unidade.

Vejamos o grupo MAIS RECENTES, formado por quadrados de arestas arredondados com baixo contraste, e disposição numa matriz irregular. Existe, nessa irregularidade, um espaço para o filtro de exibição dos itens, tudo muito próximo, gerando a unificação cognitiva pela proximidade. Os itens que ficam próximos foram trabalhados de tal maneira a criar um alto contraste, rompendo o princípio de semelhança para mostrar que, ainda que estejam próximos, trata-se de itens completamente diferentes cognitivamente.Cores como lilás, azul claro e vermelho foram usadas com grande eficácia para separar semanticamente itens cuja prioridade perceptiva são maiores. Some-se a isso uma área bem arejada do lado esquerdo onde os vídeos são exibidos, evitando que haja ruídos por parte da interface na hora de usufruir da experiência com o conteúdo.”