As Leis da Gestalt Aplicadas ao Design de Interfaces
Como os princípios da Gestalt podem auxiliar na criação de interfaces que façam mais sentido aos olhos dos seus usuários.
Se você já está familiarizado com a Gestalt e suas leis, deve ter notado o quanto essa teoria é constantemente utilizada na criação de interfaces. Se ainda não conhece, mas está acostumado a lidar diariamente com diferentes sites e aplicativos, você já pode ter visto (com mais frequência do que imagina) a Gestalt aplicada por aí, mesmo sem saber.
É que a Gestalt dita a forma como nós iremos, mesmo que inconscientemente, compreender tudo o que estamos visualizando em uma tela. De que forma iremos interpretar um conjunto ou agrupamento de elementos contidos em uma interface, é um exemplo disso.
Por isso, resolvi trazer para este artigo um aprofundamento sobre a definição da Gestalt, das suas leis e de que forma podemos aplicar esses conhecimentos na construção de interfaces que sejam mais significativas e de mais fácil entendimento para os usuários.
⠀
O que é Gestalt?
A palavra Gestalt tem origem alemã e significa “forma”. Então, essa teoria da forma, como também é conhecida, nos diz que nosso cérebro sempre irá perceber um objeto como inteiro e completo, antes de distinguir suas partes separadamente.
De acordo com a Gestalt, a nossa percepção da soma dessas partes, sempre será diferente da percepção do inteiro. Um exemplo disso é a sensação de movimento que temos ao nos depararmos com luzes pisca pisca.
⠀
Mas… de que forma isso interfere no design de interfaces?
Existem designs de tela que além de muito bonitos, demonstram o talento e a criatividade do designer. Esses estilos de design, apesar de amplamente divulgado em portfólios pessoais e em sites como o Dribbble, não são tão populares no mercado.
Isso acontece porque são estilos desconhecidos entre o público alvo das grandes empresas. Beleza e criatividade são, sim, importantes, mas é preciso que uma interface seja familiar e de fácil compreensão para seus usuários.
A Gestalt nos mostra que existem alguns princípios organizacionais que são essenciais para auxiliar o cérebro humano na estruturação das percepções visuais. São eles:
Figura-fundo (figure-ground)
É a maneira como organizamos a nossa percepção do que está sendo visto em primeiro plano e em segundo plano. Veja alguns exemplos:
Na imagem acima, você consegue distinguir facilmente a folha, que está em primeiro plano, da imagem embaçada de um arvoredo, em segundo plano.
Da mesma forma, podemos perceber claramente a diferença entre a logo do Spotify e o plano de fundo preto, na tela de carregamento acima.
Objetos em primeiro plano, estarão automaticamente em destaque. Já o segundo plano pode ser ilimitado (como o plano de fundo preto da tela do Spotify) ou vagamente definido (como o arvoredo embaçado no fundo do primeiro exemplo).
Um outro exemplo comum da aplicação da Figura-Fundo em uma interface, é uma notificação sobrepondo o conteúdo de uma tela.
⠀
A lei de Pregnância (Pragnanz)
Pragnanz é uma outra palavra proveniente do alemão e significa precisão, concisão. Portanto, a lei de Pregnância, também conhecida como a lei da simplicidade, diz que sempre tentaremos organizar a nossa percepção de maneira simples.
Independente de sua complexidade, imagens e objetos sempre serão interpretados da maneira mais simples possível. No caso do design de interfaces, isso pode significar dificuldade para que o usuário entenda o que precisa fazer em uma tela, caso ela contenha um grande número de informação. Observe a aplicação desse conceito nos exemplos:
Na interface genérica (e caótica) acima, não é difícil perceber a confusão que qualquer usuário poderia sentir para encontrar a principal ação que precisa realizar.
Já na interface do Duolingo, a quantidade reduzida de informações guiam o usuário diretamente para a ação principal do site.
Outros bons exemplos conhecidos dessa simplicidade que dá certo, são sites de busca como o Google, o Yahoo e o Bing.
⠀
A lei da similaridade
É comum que o nosso cérebro busque por padrões. Por causa disso, acabamos por interpretar objetos semelhantes como pertencentes a um mesmo grupo. Veja:
Apenas a mudança de cor entre os quadrados da imagem acima é suficiente para passar a sensação de que eles não pertencem ao mesmo grupo ou não possuem o mesmo significado.
Se estivesse definido que, por exemplo, cada quadrado representa um aluno em uma sala de aula, eu poderia dizer que os quadrados em amarelo estão representando alunos que preferem matemática, enquanto os quadrados da cor laranja representam os alunos que preferem português.
Para que essa sensação seja causada, basta que alguma diferença seja percebida entre os elementos. Ao invés de cores diferentes, os quadrados poderiam ter tamanhos diferentes, por exemplo. Veja este conceito aplicado a uma interface:
Na primeira tela, do Banco Inter, o menu é um conjunto. Mas observe que o item “O Inter”, quando selecionado, possui um fundo acinzentado, que se destaca das outras opções. Isso mostra ao usuário que aquela é a opção do menu que ele está navegando.
Já na segunda tela, do Mercado Livre, a oferta que o usuário está selecionando se torna maior em comparação as outras, desbloqueando informações adicionais sobre o produto de interesse.
⠀
Lei da Proximidade
Outra forma de indicar que determinados objetos pertencem a um mesmo grupo, é através da proximidade. Objetos próximos uns dos outros, automaticamente são percebidos como partes de um mesmo inteiro. Observe o exemplo:
Dessa vez os objetos da imagem acima apresentam, além de um mesmo tamanho e formato, a mesma cor. Ainda assim, o nosso cérebro tende a perceber os quadrados da esquerda como um grupo e os quadrados da direita como um outro grupo, diferente e independente do primeiro.
Um exemplo comum dessa percepção em interfaces, são os menus. Na interface do Banco Inter, já citada, apesar de cada uma das opções representar algo diferente, elas estão ordenadas lado a lado, com uma proximidade padronizada.
Observe esse outro menu:
Por causa da Lei da Proximidade, os objetos “Motorista”, “Passageiro”, “Empresas”, “99 Food”, “Segurança” e “Ajuda” demonstram fazer parte da composição de um mesmo inteiro: O menu.
Já a logo da empresa e o botão “Quero ser motorista”, são objetos dispostos com um espaçamento maior, porque não participam desse mesmo grupo.
⠀
Lei da Continuidade
Ainda com o intuito de relacionar objetos entre si, também podemos dispor esses objetos ao longo de linhas, sejam elas retas ou curvas. Isso passa a impressão visual de continuidade.
Ao terminar de preencher o primeiro campo de um formulário bem construído, por exemplo, você dificilmente terá dúvidas sobre qual campo deverá ser preenchido em seguida, correto?
Na interface da MaxMilhas, exemplificada acima, o usuário tende a preencher primeiro o campo “Origem”, seguido pelos campos “Destino”, “Ida” e “Volta”, respectivamente.
Além disso, você já deve ter visto objetos incompletos na sequência de alguma lista. A intenção é mostrar que existe uma continuidade de elementos.
Na lista acima, por exemplo, um pedaço do último título à direita foi colocado ali propositalmente. Isso indica ao usuário que existem mais itens naquela lista, “Quem matou Sara?” não é o último.
Sem aquela pequena parte do próximo título da lista, o usuário poderia ter uma ilusão de completude e, nesse caso, o conteúdo adicional jamais seria descoberto.
⠀
Lei da Simetria
O conceito de que simetria é sinônimo de beleza já é bem popular. Mas, segundo a Gestalt, a simetria também pode trazer outras vantagens visuais.
Além de visualmente agradáveis, os elementos simétricos são harmoniosos e, portanto, de mais fácil interpretação. Isso não significa que a sua interface precisa ser 100% simétrica — até porque, poucas realmente são. Mas é necessário entender a importância da simetria para utilizá-la a seu favor.
Um elemento assimétrico pode se destacar em meio a uma interface simétrica. Esse elemento em destaque, poderia ser um botão Call to Action, por exemplo. Com criatividade é possível sair do óbvio, mas sempre tomando o cuidado necessário para manter uma boa usabilidade e a harmonia do projeto.
⠀
A Lei do Fechamento
Muitas vezes, o nosso cérebro não precisa de uma informação completa para atribuir determinada forma a um objeto. Observe:
É normal a visualização de um quadrado na parte central da imagem acima. Mas perceba que não existe um fechamento para esse quadrado. O seu cérebro o está completando por conta própria.
É comum a utilização dessa lei em ícones de aplicativos e logomarcas, como nos exemplos abaixo:
O ideal é utilizar essa lei para simplificar informações. O seu usuário não precisa de ícones complexos para entender a mensagem que você deseja passar.
⠀
Lei do Destino Comum
Nós também costumamos perceber objetos que “andam” em conjunto e possuem um mesmo destino, como pertencentes a um mesmo grupo. Um exemplo comum dessa lei aplicada a interfaces, são e-commerces.
Quando o usuário está passeando por uma loja online e decide comprar mais de um item, ele começa a adicionar os objetos desejados em uma lista de desejos ou em um carrinho virtual.
Essa lei também pode ser aplicada quando você oferece a opção de selecionar muitos itens para realizar uma ação em comum com eles, como excluir muitos e-mails de uma só vez.
⠀
Conclusão
A Gestalt surge no design de interfaces como uma ferramenta capaz de auxiliar no entendimento do que pode estar ambíguo ou muito difícil de interpretar em uma tela.
A partir da aplicação dos conceitos vistos neste artigo, torna-se possível melhorar interfaces, guiando o usuário nas tarefas que ele precisa realizar e transmitindo, da melhor forma possível, as nossas intenções como designers.
É claro que quando se trata dos usuários e suas diferentes percepções, as coisas podem se tornar imprevisíveis e jamais podemos assumir que sabemos de tudo. Por causa disso, testes de usabilidade nunca são desnecessários ou substituíveis.
⠀
Referências
O material que me auxiliou na escrita deste artigo (e que pode ser útil para os seus estudos também):
Obrigada por ler até aqui. Vamos nos conectar no LinkedIn? Você pode me encontrar clicando aqui.
