A Teoria da Gestalt recebeu grande destaque na última edição da Revista Webdesign. O objetivo foi apresentar como os seus princípios básicos podem influenciar na produção do designer de interfaces.

Para falar sobre o assunto, convidamos o artista plástico e webdesigner Ronaldo Gazel, que trabalha atualmente na agência mineira Bhtec. O bate-papo foi tão bom, que acabou rendendo 11 páginas na edição impressa e mais alguns materiais extras que estamos publicando nesta semana no site.

Dentre eles, Gazel selecionou seis projetos web e fez uma análise prática de como estes conceitos foram aplicados na construção das interfaces. Boa leitura

EXEMPLO 1: HOTSITE HAVAIANAS

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.

Ela não é exibida inteiramente no campo visual, sendo mostrada de acordo com as direções às quais o usuário se dirige dentro da navegação. À medida que se desloca, mantêm-se uma perfeita harmonia entre as formas, transmitindo imediatamente uma forte relação entre cada cena criada por nós durante o deslocamento, sinal de grande unificação gestáltica.

Além disso, a macro-composição foi estrategicamente desenhada para que em qualquer posição dentro dela o usuário seja direcionado naturalmente, sem se perder, o que demonstra um potencial incrível de continuidade, mesmo quando os elementos são interrompidos. Esse caso é peculiar porque estamos habituados a tratar de continuidade para elementos geralmente dispostos em linhas retas.

Para fechar, o uso de paletas com tonalidades harmônicas aliados a formas gráficas que só existem dentro de um subgrupo acabam por criar, pela proximidade, uma unidade cognitiva: assim sabemos separar uma área da outra.”

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

EXEMPLO 2: NEWTOYORK

Área e continuidade: “Trata-se de uma interface nos moldes tradicionais, mas que faz excelente uso desses princípios. Vejamos que, usando uma separação por contraste, pelas cores branca e vermelha, criamos uma divisão sólida entre as duas macro-áreas da interface.

Porém, 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.

Quanto à similaridade, o designer utilizou a área superior direita para assinar e compor um menu principal absolutamente delicado, contrastando com a complexidade da ilustração. A linha horizontal suave serve para delimitar um aspecto de ordem para aquele quadrante, contrastando com a linha angulada. Já na parte inferior da composição, percebemos o uso do princípio de área, compondo elementos brancos de suporte para textos e imagens, relacionando ainda mais os dois grupos cromáticos. Basicamente, essa excelente distribuição de cores trouxe grande continuidade.”

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

EXEMPLO 3: THEATRE FESTIVAL FETA – INTERNATIONAL STREET & OPEN-AIR

Unidade, Segregação, Semelhança e Unificação: “Quando olhamos para essa composição, ficamos um pouco perdidos, pois não conseguimos fechar a Gestalt imediatamente (é aquela história de prolongar a catarse no fechamento da Gestalt). Percebemos certa unidade estética que nos agrada, devido ao arranjo de linhas que parecem orientar o posicionamento das frases textuais – porém, tais frases mais parecem elementos gráficos não-cognitivos, puramente decorativos, muitas vezes ininteligíveis. Parecem textos feitos para não serem lidos. Mas, através de elementos peculiares, as caixinhas vermelhas (que contrastam com o universo caótico da cena) remetem aos únicos elementos capazes de trazer alguma luz a essa verdadeira bagunça (semelhança). Isso porque são muito parecidos, tanto visualmente quando em seu comportamento e estão posicionados estrategicamente próximos uns aos outros, mantendo certa ordem cognitiva, algo que nos remete a um tipo de menu.

Ok, a Gestalt está querendo se fechar – vamos lá e clicamos em um dos itens. E imediatamente sentimos o prazer de compreender que a cada clique nos itens de menu, haverá um novo arranjo, desta vez muito mais inteligível. É nesse momento que notamos a unificação da composição: o que parecia caótico, comportando-se de maneira pouco usual, estabelece conosco uma cumplicidade especial, pois sentimos prazer (fim maior da catarse) em desvendarmos esse pequeno enigma comunicacional. Por mais caóticos que pareçam os posicionamentos, notamos uma grande unificação, uma grande harmonia entre cada situação proposta. É um caso notável de interface baseada numa experiência artística que não abdicou de uma interface inteligível de controle. Ampliaram o tempo de fechamento da Gestalt, arriscaram (é fato) não serem compreendidos, mas o resultado foi um sucesso.”

EXEMPLO 4: CONCAVE SCREAM

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

EXEMPLO 5: SOLILOQUY

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

EXEMPLO 6: FIZTV

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