Dando continuidade à sequência de artigos falando de Gestal do objeto em websites, falaremos hoje de três conceitos importantes: proximidade, semelhança e boa continuidade. Cada um deles, quando bem aplicado, consegue traduzir graficamente para o usuário o objetivo principal de determinado site.

Leia também os artigos anteriores: parte 01 e parte 02

Proximidade

Elementos ópticos próximos uns dos outros tendem
a ser vistos juntos e, por conseguinte, a constituírem um todo ou
unidades dentro do todo. Em condições iguais, os estímulos mais próximos
entre si, seja por forma, cor, tamanho, textura, brilho, peso, direção,
e outros, terão maior tendência a serem agrupados e a constituírem
unidades (GOMES FILHO, 2006, p.34).

A lei da proximidade é simples e lógica, definindo que, de acordo com a
distância, podemos atribuir o sentido de grupo ou não a determinados
objetos. Essa é uma técnica que pode muito bem ser usada em websites
para definir regiões de conteúdo em uma página, ou sistemas
agrupados de navegação, ou seja, se itens possuem similaridades em
termos de conceitos e funcionalidades, estes têm de permanecer juntos.
Abaixo vemos um exemplo de proximidade que deu muito certo:

 

O Google usa a
técnica da proximidade. Veja que o campo onde se deve digitar o tema a
ser procurado está unido aos botões responsáveis pelo comando que
executará a ação e a outras opções relacionadas a esta ação, no caso a
busca em si. Tal proximidade é maior do que com relação ao logotipo
acima e os links abaixo.

Vemos, assim, que o grupo contendo o campo, os
botões e as opções de pesquisa formam um grupo pela proximidade,
passando para o usuário a idéia de que, nesta região, ele terá todas
as ferramentas e opções relacionadas ao sistema de busca. O uso do
logotipo próximo é intencional, visto que assim a marca é associada aos
serviços. Tanto é que, abaixo do logotipo e das ferramentas do mecanismo
de busca, encontramos a mesma menção à empresa, através de links
relacionados aos demais serviços e à própria companhia.

Vemos, então, as
relações: três grupos na área central formados respectivamente por
logotipo, ferramentas de busca e links. Esses três grupos, por sua vez,
formam outro grupo maior e único em relação à página com fundo branco,
prendendo a atenção do internauta no centro da página onde se
encontra a ferramenta de busca.

Utilizando uma página de outro serviço do Google, podemos ver o
princípio da proximidade. Veja a página do Gmail e
note, no lado direito, a proximidade entre as duas caixas.

Qual o motivo? A
resposta está em o que se deseja transmitir. Vê-se que
na primeira caixa se trata de um formulário de acesso a contas de
usuários do Gmail, além de
um link relacionado à função deste formulário. A caixa abaixo traz
algo também relacionado ao serviço, através de uma chamada para que o
usuário se cadastre, caso não possua uma conta, além de links
descritivos de tal serviço.

Qual é a idéia a ser transmitida: Entrar
no Gmail.

Com base nessa proximidade de conceito, fez-se a
diagramação visual da forma como vemos, ou seja, caixas aproximadas umas
das outras. À esquerda também vemos outros itens próximos uns dos outros.

Entretanto, tanto nas caixas quanto nesses itens, vemos outro princípio:
o da semelhança. Adiante trataremos dessa outra lei com mais
detalhes. 

Abaixo vemos outro exemplo do uso da proximidade na web: 

No site
acima, note o princípio da proximidade sendo aplicado para separar os
tópicos de informação que constam na página inicial. O simples
espaçamento entre os textos faz com que três colunas sejam formadas,
dividindo os tópicos “Atendimento Eficiente”, “Ambiente Aconchegante” e “Cardápio Variado”. Perceba que não há nenhum elemento gráfico dividindo
os textos, somente um espaço.

Além disso, outra lei gestalística é
aplicada a esse mesmo layout: a semelhança. Através da
semelhança de cor e de forma das colunas, vemos que as informações ali
dispostas tratam de assuntos afins, no caso, informações relacionadas
aos produtos e serviços oferecidos pelo restaurante.

Semelhança

A igualdade de forma e de cor desperta também a
tendência de se construir unidades, isto é, de estabelecer agrupamentos
de partes semelhantes. Em condições iguais, os estímulos mais
semelhantes entre si, seja por forma, cor, tamanho, peso, direção, e
outros, terão maior tendência a serem agrupados, a constituírem partes
ou unidades (GOMES FILHO, 2006, p.35). 

Segundo RIBEIRO (1985, p. 68) a semelhança ou similaridade mostra que
“os elementos semelhantes tendem a ser vistos como pertencentes à mesma
estrutura”.

A Ready
Made Designs utiliza o princípio da similaridade através das cores.
As chamadas “Who are we”, “Why use us” e “What do I get” estão sobre um
mesmo retângulo escuro e se relacionam por possuírem semelhança de
fundo. 

Semelhança e proximidade são dois fatores que, além de
concorrerem para a formação de unidades, concorrem também para
promoverem a unificação do todo, daquilo que é visto, no sentido da
harmonia, ordem e equilíbrio visual (GOMES FILHO, 2006, p.35)

Vemos a semelhança e a proximidade no exemplo acima concorrendo
para a unidade visual do layout. Note que o retângulo contendo as três
chamadas está sobre um fundo semelhante em termos de cor. O background
ou fundo incide sobre a formação da unidade visual. Tal detalhe reflete o
conceito “figura-fundo” dos gestalistas, tão presente
em suas discussões. “

Rubin usa a expressão figura e fundo, ao
assinalar que ‘destaca-se uma parte da configuração total do
estimulo (figura) enquanto uma outra parte recua e é mais amorfa'”
(RIBEIRO 1985, p. 73).

Nota-se no exemplo do site Ready Made
Designs que o fundo é semelhante em cor à maioria dos elementos
do layout que estão sobre ele, entretanto mais “amorfo”, dando unidade
visual, e não tirando a atenção das partes principais do projeto
gráfico. Note também que, neste layout, há diferença de cor de alguns
elementos, mas não existem cores vivas, apenas cores amenas, suaves,
criando a relação e a tão desejada unidade visual.

Retomando o exemplo da página do Gmail, na
aplicação do principio da semelhança observamos que as caixas azuis, além
de estarem próximas, possuem semelhança de cor e de forma, criando um
agrupamento, relacionando assim as informações de mesmo teor.

O layout acima foi retirado do site Template Monsters e
será usado aqui para fins didáticos. Vemos nele a semelhança sendo
aplicada em itens que têm funcionalidades iguais. Devido ao fato de que
cada item do menu ter um formato de “ovo”, percebe-se que tais objetos
têm uma ligação entre si. Nesse caso, todos os quatro são botões de
navegação para que o usuário possa visualizar o conteúdo do Website. Um
fator também que chama a atenção é a simetria, o alinhamento, ou outra
lei da Gestalt, a direção ou boa continuidade.

Boa continuidade

A boa continuidade, ou boa continuação, é a impressão visual
de como as partes se sucedem através da organização perceptiva da forma
de modo coerente, sem quebras ou interrupções na sua trajetória ou na
sua fluidez visual. É também a tendência dos elementos de acompanharem
uns aos outros, de maneira tal que permitam a boa continuidade de
elementos como: pontos, linhas, planos, volumes, cores texturas,
brilhos, degradês, e outros. Ou de um movimento numa direção já
estabelecida. A boa continuidade atua ou concorre, quase sempre, no
sentido de se alcançar a melhor forma possível do objeto, a forma mais
estável estruturalmente. (GOMES FILHO, 2006, p.35)

Tomamos a liberdade e fizemos uma alteração na imagem anterior para
tentarmos quebrar a boa continuidade.
Veja o resultado:

A imagem fala por si só. Nossos olhos ficam vagueando de um lado para
outro sobre a figura total, pois tentamos buscar uma lógica no
conjunto, que agora passa uma sensação de desarmonia, devido a um
contraste mal empregado entre objetos semelhantes. E, como o resultado
dessa busca é negativo (o cérebro não consegue estabelecer uma ordem, a
chamada boa forma), sentimos uma sensação incômoda.

Vemos, assim, a
necessidade de tal princípio ser seguido nesse caso, pois o mesmo
concorre para a unidade visual final de todo o projeto gráfico, que, como
vemos, fornece intuitivamente informações e valores funcionais
referentes aos objetos.

Entretanto, há o que se pensar: o “ovo” que foi
movido da trajetória dos demais “ovos” parece chamar mais a atenção?
Seria isso uma forma de “quebrar uma regra” ou lei e tirarmos benefício
dessa “desobediência”? No próximo artigo veremos um exemplo disso e também as
leis 4- Disposição Objetiva, aprendizagem ou experiência
passada, 5- Fechamento ou Clausura e 6 – Pregnanz ou simplesmente
pregnância.

Espero que tenham gostado. Abraços a todos os leitores.  

Referência:

• GOMES FILHO,
  João. Gestalt do Objeto: Sintaxe da Leitura Visual da
  Forma. 7a Ed. São Paulo: Escrituras, 2006.