Desbravando as heurísticas de Gestald

Costumeiramente chamadas de leis, as heurísticas de Gestald empoderam Designers e podem ser um trunfo no mundo ágil contemporâneo.

--

Costumeiramente tratadas como leis, a proposta deste artigo é demonstrar como a percepção de heurística se adapta melhor quando falamos sobre Gestald. A heurística é justamente o ‘método de investigação baseado na aproximação progressiva de um dado problema.’ Ou seja, não é uma certeza, mas sim uma maneira de nos empoderar sobre algo.

Em um dos estudos desenvolvidos pela Interaction Design Foundation essa visão é reforçada da seguinte maneira:

As leis da Gestalt não são exaustivas nem infalíveis, mas fornecem aproximações amplamente bem-sucedidas que nos ajudam a fazer julgamentos imediatos e inconscientes.

Pensadores Gestaltistas iniciais: Max Wertheimer, Wolfgang Kohler and Kurt Koffka

Os pensamentos sobre Gesltdad evoluiram através da história, da evolução dos humana e sua exposição aos diferentes ambientes durante séculos de existência. Portanto, designers precisam considerar essa evolução tanto para compreender os cenários de exposição inicial destas heurísticas até mesmo para compreender como tudo se adapta ao mundo contemporâneo.

Conhecendo algumas heurísticas

Compreendendo que precisamos compreender a origem e expandir a maneira como vemos essas heurísticas, o próximo passo é justamente analisar esses dois mundos. O primeiro que é justamente a origem de Gestald e o segundo que é uma visão baseada nos estudos de profissionais da psicologia como Palmer e Becker (2007).

Pregnância

Trata da nossa capacidade de perceber elementos complexos de uma maneira simples. Um exemplo é a famosa logo do Instagram, primordialmente ela se assemelhava muito com a realidade, atualmente ela utiliza de formas simples abusando desta heurística. Perceba como isto até mesmo se traduz em maior conforto para a nossa visão:

Simplificação da logo do Instagram — Logomarcas.net

Esta heurística, em especial, no auxilia a normalizar e simplificar a forma como a informação é construída e absorvida. Diariamente nos deparamos com um número cada vez maior de informação e isto gera uma alta carga cognitiva. Portanto, a simplicidade desta heurística nos auxilia até mesmo na manutenção deste volume de informação.

Similaridade

A habilidade humana de perceber objetos similares pertencentes ou formando um grupo é um fenómeno que foi denominado como 'Similaridade'. Este princípio pode parecer simples, ou quem sabe até sem valor, mas quando olhamos para interfaces conseguimos perceber seu valor de algumas maneiras muito marcantes.

Página do Mercado Livre

Repare no exemplo acima da página inicial do mercado livro. O agrupamento, similaridade, foi utilizado para criar grupos de informação e facilitar a leitura e identificação de conteúdo dentro da página. Isto faz com que o esforço cognitivo durante a jornada de experiência seja muito reduzido.

Ao mesmo tempo, a consistência proporcionada por este princípio facilita a compreensão de como elementos se comportam e o relacionamento deles ente as diferentes páginas que a pessoa usuária estiver explorando.

Proximidade

Ainda falando de agrupamentos, temos a proximidade como outro fator importante quando buscamos baixar o esforço cognitivo e ao mesmo tempo criar um maior sentido das informações para as pessoas usuárias. Neste caso, quanto mais distantes os itens em uma interface estiverem, menor será a chance de percebermos os mesmos relacionados entre si.

Página de checkout da Amazon — Exemplo Cartimize

No exemplo da Amazon temos a proximidade entre as informações criando agrupamentos e fazendo com que a leitura, e preenchimento, aconteça por etapas. Isto faz com que o esforço diminua e portanto a velocidade com que as pessoas usuárias consigam ler uma página seja muito maior.

Ainda que ambos os conceitos estejam próximos, podemos analisar o exemplo da Amazon e ver como os dois cenários se mesclam aqui. Enquanto temos a proximidade dos elementos na página criando etapas para o checkout. A similaridade entre as informações diminui o esforço na leitura e reconhecimento do que temos em tela.

Quando temos elementos próximos, mas com pouca ou nenhuma similaridade, tendemos a nos esforçar muito para compreender qual o grande objetivo daquelas informações.

Familiaridade e Significado

Como seres humanos tendemos a procurar e atribuir significado a tudo que está próximo de nós. Ao mesmo tempo utilizamos os nosso modelos mentais, já pre-estabelecidos, para trazer novas formas e fazer ligação com algo que já nos é conhecido. Observe a imagem abaixo.

Tomada — Maisumnerdalone

Posso garantir que ao olhar para esta tomada e se concentrar na parte central, você relacionou os furos com dois olhos e uma boca. Isso, pois a combinação de linhas se relaciona com o modelo mental, simples, de um rosto (como nos desenhos animados).

Este princípio pode nos ajudar muito no dia-a-dia quando estamos olhando para interfaces, principalmente as digitais. Ou seja, as formas que utilizamos e a maneira como distribuímos podemos ser relacionadas com diferentes contextos, principalmente quando trazemos o fator cultural.

Site da Globo.com

O portal de notícias da Globo faz uso da familiaridade para organizar o seu conteúdo. Repare que cada tipo de assunto está relacionado com uma cor diferente e como isso, após algum tempo, gera familiaridade para as pessoas usuárias. Com isso, conseguimos perceber que a familiaridade e nosso modelos mentais podem tanto ser aproveitados (ex. tomada), como também podem ser desenvolvidos (ex.Globo).

As próximas heurísticas, princípios, não foram originalmente descritas no documento produzido por Wertheimer, Koffka e Kohler. No entanto, a visão que Palmer e Rock trouxeram com estes novos pontos de vista são muito ricos para como o design de interfaces é pensado.

Sincronia

A percepção de sincronia acontece até mesmo quando não temos a proximidade em um grupo. Podemos ter isto, por exemplo, no mundo físico quando pensamos em um avião. O painel de controle de aeronaves possui diferentes comandos e nem sempre eles estão próximos, contudo, é importante que exista feedback para que as pessoas que estejam pilotando a aeronave consigam interagir com a interface de maneira segura.

Cockpit — Flickr

No exemplo acima, percebemos que nos painéis existem vários botões que nos passam a sensação de agrupamento / sincronia tanto por estarem ligados quanto desligados.

Olhando para User Experience Design e User Interface Design podemos relacionar o princípio da sincronia com Dashboards. Na imagem a seguir repare como as informações estão separadas, mas mesmo assim elas parecem estar em sincronia uma com a outra. Isso, na verdade, se transforma em uma boa prática. A sincronia entre diferentes informações (como no gráfico inferior), facilita a leitura e o agrupamento auxilia no momento de absorver diferentes informações (mesmo que distintas) simultaneamente.

AR Shakir — Case Dribbble

Região comum

Indo além no que vimos até agora, chegamos justamente na visão de que objetos (mesmo que sem relação) compartilhando uma mesma região acabam passando um senso de grupo.

Nosso primeiro exemplo, da página de notícias do Google, faz com que a região comum seja delimitada por estruturas de UI. No caso, esses grupos são distintos (repare nos espaçamentos entre grupos) e possuem seu conteúdo agrupado em uma 'caixa' que possui até mesmo um título organizando as informações.

Google News

Repare como o jornal The New York Times trabalha com algo muito similar utilizando esta heurística. O agrupamento acontece em dois momentos diferentes. O primeiro é com a divisão clara de linhas mais fortes, o segundo através de uma divisão mais sútil, criando sub-grupos dentro de um principal.

Jornal The New York Times

Este é um conceito que pode ser muito bem explorado quando temos um grande número de informação e precisamos criar um experiência agradável para as pessoas usuárias.

Conclusão

Olhar para Gestald é uma maneira de criar uma forma de checklist enquanto se está projetando uma interface. Como mencionado, as 'leis' devem ser interpretadas como heurísticas, ou seja, ao invés de pensar nelas como mandatórias ver como uma opção de de melhorar o seu Design.

--

--