desenvolvimento para web » séries

Gestalt aplicado ao design web (parte 6): princípio da experiência passada

Tárcio Zemel — Sat, 22 Mar 2008 19:26:42 +0000

Este artigo é o último da série “Gestalt aplicado ao design web“. Confira a lista de todas as partes:

Gestalt aplicado ao design web (parte 1): origem do termo, significado e utilidade;
Gestalt aplicado ao design web (parte 2): princípio da proximidade;
Gestalt aplicado ao design web (parte 3): exemplos web do princípio da proximidade.
Gestalt aplicado ao design web (parte 4): princípio da boa continuidade ou princípio do alinhamento.
Gestalt aplicado ao design web (parte 5): exemplos web do princípio do alinhamento
Gestalt aplicado ao design web (parte 6): princípio da experiência passada (artigo atual)

No último artigo da série, apresentei alguns exemplos de aplicação do uso do princípio do alinhamento em alguns web sites. Neste artigo, falo um pouco sobre o princípio da experiência passada, ou, como alguns preferem, princípio da aprendizagem. Quebrando um pouco o estilo da série, apresento a parte conceitual desta lei de Gestalt e alguns exemplos, de uma vez.

O princípio da experiência passada refere-se, como o próprio nome sugere, à experiência já adquirida (no passado…) que o observador de determinada obra, peça, cena, web site, etc, tem e de quais maneiras isso pode (ou não pode) ajudá-lo a interpretar, reconhecer e “conectar“.

É algo bastante pessoal, subjetivo, já que a experiência ocorrida é peculiar e cada indivíduo tem suas próprias vivências, histórias e situações; quer dizer, algo observado pode (e geralmente tem) um significado diferente de pessoa para pessoa devido, dentre outras coisas, às experiências passadas.

Pelo exposto, não é complicado inferir que é a partir do processo de associação que a interpretação acontece: associamos coisas / elementos que já conhecemos previamente quando em face ao novo. Valendo-me das palavras de Danilo Medeiros, do digitalminds,

[...] se a gente vê uma coisa com caule, galhos e folhas a gente imagina que seja uma árvore, se a gente vê uma coisa com quatro patas que late a gente imagina que seja um cachorro [...]

Isso é associação! ;-)

E, como faz parte de um processo de aprendizagem / interpretação humano, certamente que podemos nos valer disso para a feitura de web sites; podemos “tirar vantagem” do princípio da experiência passada para compor layouts!

Exemplos do princípio da experiência passada aplicado ao web design

No site Spot.BG, por exemplo, vemos esta estranha forma, esta coisa irreconhecível, à esquerda, sorrindo. “Estranha forma”? Não, não… A não ser que você seja alguém que jamais viu uma mulher antes, em toda sua vida, seu cérebro fará a correta associação e identificará, instantaneamente, que esta é a cabeça de uma mulher, cujo corpo está “escondido” atrás do corpo do site.

No restaurantica podemos perceber (em resolução de tela de 1280 por 1024, ou superior) como o princípio da experiência passada é bem utilizado, apresentando estes bonitos talheres (viu, é possível saber que são talheres porque sabemos como são os talheres, dado que já os vimos no passado).

Vejam que bonitos livros fazem parte da composição do design do site dustycover.da. São livros, não são? ;-)

No site desta Igreja Batista Missionária, por exemplo, podemos perceber a sutil árvore posta em background. Todos percebemos que é uma árvore porque uma já foi vista em algum momento de nossas vidas, e conseguimos, segundo prega a lei da experiência passada, associar e interpretar a composição, identificando que, realmente, trata-se de uma árvore.

Usabilidade na web e o princípio de Gestalt da experiência passada

Pessoalmente, acredito que o princípio da experiência passada tem muito a ver com a usabilidade na web, já que é a partir de situações já passadas por pessoas que utilizam a internet (estudas por especialistas da área) que determinados comportamentos foram “consagrados” nos “esquemas” de web sites. Por exemplo, posições de determinados elementos num web design facilitam e melhoram a experiência de quem os usam e facilitam a realização de tarefas.

A usabilidade na web é um assunto amplíssimo; só citei a respeito para complementar o assunto e deixar claro que faço parte daqueles que pensam que o princípio da experiência passada e a usabilidade têm muito a ver um com o outro.

Mas este é um assunto para uma outra série…

Conclusão

Como os exemplos de sites mostraram, é possível obter efeitos interessantes e visualmente agradáveis se valendo da teoria do princípio da experiência passada. Como costumo dizer, o mais importante é saber quando usar e, mais importante, o motivo e os efeitos que esta técnica podem causar na experiência de quem vê a obra.

Bem, pessoal, este foi o último artigo sobre Gestalt aplicado ao design web. Muito obrigado a todos que acompanharam a série, gostaram e/ou aprenderam algo sobre Gestalt. Espero ter podido ajudar e, querendo que escreva sobre algo, em especial, envie uma mensagem para mim.

Abraços e até a próxima!

Gestalt aplicado ao design web (parte 5): exemplos web do princípio do alinhamento

Tárcio Zemel — Tue, 11 Mar 2008 23:41:38 +0000

No quinto artigo da série, apresento alguns exemplos web do princípio da boa continuidade ou, como prefiro, princípio do alinhamento.

Este artigo é parte da série “Gestalt aplicado ao design web“. Confira a lista de todas as partes, até agora:

Gestalt aplicado ao design web (parte 1): origem do termo, significado e utilidade;
Gestalt aplicado ao design web (parte 2): princípio da proximidade;
Gestalt aplicado ao design web (parte 3): exemplos web do princípio da proximidade.
Gestalt aplicado ao design web (parte 4): princípio da boa continuidade ou princípio do alinhamento.
Gestalt aplicado ao design web (parte 5): exemplos web do princípio do alinhamento (artigo atual)

Como apresentado no artigo anterior, o princípio do alinhamento é muito importante! Quando utilizado correta e conscientemente, podemos fazer layouts mais organizados, mais consistentes e profissionais, já que, utilizando este princípio de Gestalt, podemos insinuar que elementos visuais têm interelações entre si (e outras coisas mais).

Em qualquer web design feito por alguém que estudou o mínimo, é possível encontrar aplicações do princípio do alinhamento. Lembrem-se: nada é por acaso (tanto no desenvolvimento web, quanto na vida)!

Este artigo contém imagens com tamanho significativo. Em função disso, há um link, logo abaixo, para continuar ler o restante da matéria.

Em cada screenshot, tracei linhas para evidenciar como o alinhamento nas páginas web acontece. Percebam, novamente, que nada é por acaso. Mesmo em sites “abertos”, sem muitos elementos de delimitação, é possível identificar o uso do princípio da boa continuidade em ação. É justamente através dele que elementos

Exemplos do princípio da proximidade aplicado ao web design

Vejam no site da aleusia como os blocos de textos superiores mantém um perfeito alinhamento com os da parte inferior. A base da caixa de busca, acima e à direita, possui a mesma “linha base” que o logotipo. Vejam que recurso interessante eles utilizaram: os textos à direita “Quote of The Day” e “Support“, estão alinhados com a linha que fica abaixo do subtítulo “Welcome to Aleusia“. Por que eles simplesmente não eliminaram esta linha e desceram um pouco o subtítulo? Já que, inconscientemente, os visitantes percebem que este elemento está um pouco desalinhado, eles “prestam mais atenção” naquele ponto, que “incomoda” sua percepção; dessa forma, é garantido que a maioria das pessoas que visitarem este web site lerão o texto de apresentação.

Conhecimento é poder, meus caros!

No site da desi9n, eles pecaram só um pouquinho no alinhamento dos textos de descrição dos serviços (em baixo das respectivas imagens). Percebam que eles estão ligeiramento recuados à esquerda. Retirar esta margem e justificar o texto, talvez resolvesse o caso; entretanto, talvez eles tenham escolhido um texto alinhado à esquerda para não passar a idéia de conservadorismo; para dizer que eles são “despojados” (no bom sentido, claro). Coisa que, aparentemente, é característica quase que obrigatória no mundo de designers… Nos textos das 3 colunas, abaixo, suas bases estão quase alinhadas, também. Eles poderiam ter pensado melhor nas palavras para promover um perfeito alinhamento entre todos (mas isso, às vezes, é bem difícil de fazer, mesmo, por isso, essa passa… rsrs).

A brasuca Luxicom tem um design muito bonito e com imagens bem trabalhadas! Utilizaram muito bem o recurso da sangria naquele dispositivo móvel (“sangria” é quando algum elemento “extrapola os limites”). Percebam que a parte superior do site (acima do retângulo escuro) está bem alinhadinha; entretanto, a parte inferior não respeito a boa continuidade: está com seus elementos desalinhados em relação aos que estão em cima. O botão “Buscar” não é desalinhado no web site; deve ter dado algum problema quando o superscreenshot gerou a imagem…

Enfim, existem literalmente milhões de exemplos de aplicação do princípio de Gestalt do alinhamento pela web à fora. Basta procurar que, agora que você já tem consciência de sua existência e aplicação, vai identificar os acertos e equívocos dos web designers rapidinho! ;-)

Ah! Perceberam que, além dos elementos estarem alinhados, alguns deles (os mais próximos), apresentam uma outra característica em comum? Eles estão exatamente com as mesmas distâncias um do outro! Não se esqueçam do princípio da proximidade!

No próximo artigo: princípio da experiência passada.

Gestalt aplicado ao design web (parte 4): princípio da boa continuidade ou princípio do alinhamento

Tárcio Zemel — Mon, 25 Feb 2008 17:20:28 +0000

No quarto artigo da série, falo sobre um importante princípio de Gestalt: o princípio da boa continuidade ou princípio do alinhamento.

Este artigo é parte da série “Gestalt aplicado ao design web“. Confira a lista de todas as partes, até agora:

Gestalt aplicado ao design web (parte 1): origem do termo, significado e utilidade;
Gestalt aplicado ao design web (parte 2): princípio da proximidade;
Gestalt aplicado ao design web (parte 3): exemplos web do princípio da proximidade.
Gestalt aplicado ao design web (parte 4): princípio da boa continuidade ou princípio do alinhamento (artigo atual).

Geralmente quem está começando a mexer com web design, tende a colocar os elementos visuais da composição de forma um tanto que ao acaso, tentando preencher qualquer espaço em branco que apareça. O mais triste é que fazem isso, geralmente, desconsiderando os demais elementos constituintes. Quando o site é inaugurado, os visitantes perceberão que há algo errado (embora não conseguirão dizer, exatamente, o quê).

Na verdade, o que acontece é que o web designer não se atenta para um importantíssimo princípio de Gestalt: o princípio da boa continuidade ou princípio do alinhamento.

Segundo o princípio do alinhamento (gosto mais dessa nomenclatura), cada elemento constituinte de um layout deve ter uma conexão visual com outro elemento. Quer dizer, nada deve ser feito/colocado arbitrariamente, sem levar em consideração a totalidade da composição. E essa “conexão” pode ser feita alinhando os elementos que precisam passar a idéia de que são ligados. Mesmo estando distantes um do outro, estes elementos, se corretamente alinhados, transmitem a idéia de “relacionamento”.

Quando os elementos de um design estão inter-relacionados, quem olha percebe, intuitivamente (ou inconscientemente, se preferível), que aquela é uma estrutura mais coesa, forte, mais organizada! Aplicando a lei da proximidade, podemos indicar que elementos próximos são interconectados; através do princípio do alinhamento, podemos indicar que elementos distantes mantém uma relação, quer dizer, fazem parte da mesma “transmissão” (de idéias, conceitos, sentimentos, etc).

No próximo artigo da séria sobre Gestalt: exemplos do princípio do alinhamento aplicados ao web design.

Gestalt aplicado ao design web (parte 3): exemplos web do princípio da proximidade

Tárcio Zemel — Thu, 14 Feb 2008 18:23:35 +0000

No terceiro artigo da série, apresento alguns exemplos do princípio da proximidade Gestalt aplicado ao web design.

Este artigo é parte da série “Gestalt aplicado ao design web“. Confira a lista de todas as partes, até agora:

Gestalt aplicado ao design web (parte 1): origem do termo, significado e utilidade;
Gestalt aplicado ao design web (parte 2): princípio da proximidade;
Gestalt aplicado ao design web (parte 3): exemplos web do princípio da proximidade (artigo atual).

No artigo anterior foi apresentado o princípio da proximidade que, aplicado ao design web, informa que elementos visuais próximos transmitem a idéia de unicidade e, além disso, que estes elementos são relacionados, de alguma maneira.

Navegando pela web, “pincei” alguns exemplos do princípio de Gestalt da proximidade aplicado à designs de web sites. Como este artigo tem algumas imagens um pouco pesadas, coloco, abaixo, o link para quem realmente quiser acompanhar os exemplos e ler o post até o fim.

Exemplos do princípio da proximidade no design web

Vejam neste screenshot do site do GMail e percebam os relacionamentos:

Itens da direita: O formulário para entrar na conta de e-mail e, abaixo, para se cadastrar no GMail. Esse relacionamento é inferido devido a os dois terem o fundo colorido;
Itens da esquerda: Justamente por todos terem fundo branco, estão relacionados, já que apresentam informações gerais sobre a conta de e-mail.

Com o ato simples de colocar cor no fundo de alguns elementos, o princípio da proximidade foi muito bem aplicado.

No site da Whoooz! Webmedia o princípio da proximidade foi usado para separar os tópicos de informação que constam na página inicial. Percebam que o simples espaçamento entre os textos fez com que colunas se formassem, cada uma delas relativa ao respectivo tópico, que está em negrito. Eles se valeram apenas de texto puro e, aplicando o princípio da proximidade, conseguiram o resultado da divisão destes tópicos.

No web site Photorec, o princípio da Gestalt também foi utilizado: cada um dos retângulos mostrados na parte inferior contém uma informação sobre o serviço oferecido. Os retângulos foram explicitamente colocados devido à composição do design, entretanto, mesmo que não estivessem ali, quem entrasse no site continuaria sabendo que cada coluna seria uma “chamada” diferente, mas que trata de um assunto em comum.

A treforest design, com muita propriedade, utilizou o princípio da proximidade para “dividir” as informações presentes. Notem que os textos (brancos) estão “ligados” aos respectivos tópicos (amarronzados). A proximidade entre os dois sugere que cada texto é referente a cada tópico. Além disso, quem olha interpreta que são vários tópicos diferentes em função da distância entre cada tópico.

A Web Major (com um excelente web site, diga-se de passagem) utiliza o princípio da proximidade da Gestalt através dos espaçamentos e das cores. O retângulo escuro, é a “chamada” principal (tem letras maiores e fica na parte superior); ele é “separado” das “chamadas” secundárias, que estão abaixo. Estas secundárias, por sinal, são “divididas” umas das outras através do espaçamento e do fundo aplicado a cada um. Vejam que elas são inter-relacionadas, e isto é transmitido devido ao fato de todas apresentarem igual distância e terem o mesmo background.

O belo site da Guardian Community torna nítida a separação entre conteúdo principal e conteúdos relacionados. O texto que é devido à página inicial é apresentado sem background, inserido diretamente no grande retângulo branco inferior; a seu lado, estão indicações para os visitantes se informarem mais a respeito do web site, que é, ao mesmo tempo, um convite para que que se continue lendo o restante dos conteúdos. Os três retângulos coloridos tratam de assuntos de alguma forma relacionados, já que possuem o mesmo tamanho, têm igual espaçamento e títulos e conteúdos iguais. Elementos próximos são elementos relacionados.

Breves considerações sobre o princípio da proximidade

Eu poderia inserir mais um monte de exemplos, mas, creio, já deu para perceber a aplicação do princípio de Gestalt da proximidade em sites profissionais e de muita qualidade. Percebam que os web designers destes sites que apresentei como exemplo têm muita consciência das leis de Gestalt e as aplicam com muita propriedade, o que os permite elaborar composições bonitas e inteligentes, que realmente chamam a atenção do visitante e agrada aos sentidos.

Como comentei no artigo anterior desta série,sabendo que elementos próximos dão a idéia de unicidade e relacionamento, que têm ligação entre si, é possível planejar melhor o design de um web site. Logicamente que o princípio da proximidade não foi e não é aplicado sozinho para a construção de layouts. Outras leis de Gestalt também fazem parte desta verdadeira maestria.

No próximo artigo da série: princípio do alinhamento.

Gestalt aplicado ao design web (parte 2): princípio da proximidade

Tárcio Zemel — Thu, 24 Jan 2008 16:03:04 +0000

No segundo artigo da série, apresento o princípio da proximidade, muito útil de se saber e efetivamente aplicar, nos trabalhos do dia-a-dia.

Este artigo é parte da série “Gestalt aplicado ao design web“. Confira a lista de todas as partes, até agora:

Gestalt aplicado ao design web (parte 1): origem do termo, significado e utilidade;
Gestalt aplicado ao design web (parte 2): princípio da proximidade (artigo atual).

Foi visto no artigo anterior que pesquisadores alemães começaram a estudar as percepções visuais humanas, quer dizer, as relações entre algo sendo observado e as sensações que este “algo” provoca em que observa, dando origem à teoria Gestalt.

A partir deste estudo, foram deduzidos alguns princípios – ou “leis”, como preferem alguns – que descrevem alguns aspectos interessantes e, para o caso, úteis de se saber, sobre como o ser humano interpreta o que vê. Nesta série não serão vistos todos os princípios, mas, sim, aqueles que são úteis para o escopo a que se propõe: o desenvolvimento para web.

O princípio da proximidade basicamente diz que quando vários itens estão próximos entre si, formam uma unidade visual única, coesa, e não mais parecerão distintos. E mais: esta relação que forma o “um” sugere que estes elementos são relacionados, de alguma maneira.

Ainda não acredita? Você mesmo “se depara com o princípio da proximidade” diariamente… O princípio da proximidade “transforma” milhões de pontinhos (pixels) no monitor que olhamos em verdadeiras imagens!

Deste princípio da proximidade, pode-se inferir que elementos relacionados devem ser agrupados.

Esta é uma informação muito importante, quando o assunto é desenvolvimento de layouts! Sabendo que elementos próximos dão a idéia de unicidade e relacionamento, que têm ligação entre si, é possível planejar melhor o design de um web site, por exemplo.

Utilizando o princípio da proximidade, é possível conferir organização a um layout; é fazer com que a experiência dos usuários, ao visitarem determinado site, seja agradável e, até mesmo, prazerosa. As pessoas se sentem bem quando as coisas estão organizadas, não é verdade? ;-)

No próximo artigo da série, mostrarei alguns exemplos do princípio da proximidade na web.

Gestalt aplicado ao design web (parte 1): origem do termo, significado e utilidade

Tárcio Zemel — Fri, 18 Jan 2008 20:28:51 +0000

Neste primeiro artigo da série, falo sobre o que é Gestalt, apresento um breve histórico e cito sua utilidade para aplicação no web design. Posteriormente, mostrarei alguns princípios de design conhecidos por todos os profissionais do ramo – na verdade, “medidas simples” que devem ser tomadas no momento de compor um layout.

Sobre o termo “Gestalt“

Segundo o Instituto Gestalt de São Paulo,

a palavra Gestalt (plural Gestalten) é um termo intraduzível do idioma alemão para o português. O Dicionário Eletrônico Michaelis apresenta como possibilidades as palavras figura, forma, feição, aparência, porte; estatura, conformação; vulto, às quais ainda se pode acrescentar estrutura e configuração.

Complementando, o psicólogo Leonel Vieira diz, em seu artigo Descubra suas “gestalts abertas”, que, para a tradução do termo, também se pode usar“forma total” ou “forma global”.

Mas o que, exatamente, é “Gestalt“?

Gestalt é uma teoria – uma escola de pensamento, se ficar melhor – que estuda como os seres humanos percebem as coisas. Surgiu no início do século passado, na Alemanha, e teve como principais expoentes Kurt Koffka, Wolfgang Köhler e Max Werteimer. Ela apregoa que nossa percepção não se dá por “pontos isolados”, mas, sim, por uma visão de “todo”. Citando Juliana Fausto, em seu artigo Gestalt, publicado no web site do designer Tiago Teixeira,

somos bombardeados por estímulos físicos todo o tempo e, para compreendê-los, formamos organizações perceptuais (termo que se aplica tanto ao processo de organização quanto ao resultado em si). Há várias maneiras de se organizar esses estímulos, e, de fato, o fazemos, mas de tal modo que exista sempre apenas uma: nunca há dois tipos de organização em um só momento. Esse empreendimento se dá de maneira espontânea, inerente ao indivíduo, porém o consciente pode exercer um papel nesse processo, pois a organização perceptual ocorre dentro e fora da consciência: se a pessoa quiser, poderá criá-la conscientemente, mas se não o fizer, o inconsciente agirá.

No web site do Instituto Gestalt de São Paulo é possível saber que a Gestalt se divide em 3 sub áreas, quais sejam, Psicologia da Gestalt, Gestalt Terapia e Gestaltpedagogia, cada uma com seu próprio “momento de chegada”, seus próprios pensadores e abordagem focada.

Para que serve a Gestalt?

Levando em conta a Psicologia da Gestalt, que é o que interessa, para o caso, sua utilidade é analisar e “diagnosticar” as maneiras pelas quais percebemos o mundo em que vivemos. Os elementos que o compõem (vistos como um “todo”, como falado) e de que maneira isso influi na vida das pessoas.

Quer dizer, sabendo como é a “visão humana”, é possível fazer, o que quer que seja, levando-se em consideração determinadas práticas benéficas que agradam à percepção, que são mais benignas, diga-se dessa maneira. Por exemplo: fazendo um design web levando-se em conta determinados princípios, é possível criar uma composição que agrada aos olhos e à percepção dos visitantes!

Quando alguém entra em um web site e pensa “Não gosto deste site, mas não sei explicar o motivo…”, na verdade sabe o que há de errado, sim; mas o sabe de forma inconsciente! Seu cérebro, num limiar que não é percebido naquele momento, “capta” que existem discrepâncias entre os elementos, que eles estão fora do lugar, que não se “ajeitam”…

O estudo de princípios básicos de Gestalt, aplicados ao design para web, podem oferecer a quem os usa a chance de compor melhores layouts e, conseqüentemente, agradar mais aos visitantes dos sites que produz. As pessoas se sentirão confortáveis e navegar por ali será um verdadeiro prazer!

Esse é o objetivo da teoria Gestalt aplicada ao desenvolvimento de designs para web. Saber disso é dar um passo rumo a trabalhos mais profissionais e consistentes e, mais importante, realizar projetos de maior qualidade, que agradam às pessoas para as quais estes são feitos!

desenvolvimento para web » séries

Gestalt aplicado ao design web (parte 6): princípio da experiência passada

Exemplos do princípio da experiência passada aplicado ao web design

Usabilidade na web e o princípio de Gestalt da experiência passada

Conclusão

Artigos Relacionados

Gestalt aplicado ao design web (parte 5): exemplos web do princípio do alinhamento

Exemplos do princípio da proximidade aplicado ao web design

Artigos Relacionados

Gestalt aplicado ao design web (parte 4): princípio da boa continuidade ou princípio do alinhamento

Artigos Relacionados

Gestalt aplicado ao design web (parte 3): exemplos web do princípio da proximidade

Exemplos do princípio da proximidade no design web

Breves considerações sobre o princípio da proximidade

Artigos Relacionados

Gestalt aplicado ao design web (parte 2): princípio da proximidade

Artigos Relacionados

Gestalt aplicado ao design web (parte 1): origem do termo, significado e utilidade

Sobre o termo “Gestalt“

Mas o que, exatamente, é “Gestalt“?

Para que serve a Gestalt?

Artigos Relacionados