A psicologia do web design: Como viés cognitivos e princípios do design fazem usuários voltar ao seu website

Imagem: Kit de desenho Imagem: kit de desenho

Enquanto lia o livro “Rápido e devagar: as duas formas de pensar” de Daniel Kahneman, comecei a questionar sobre como o cérebro humano toma decisões quando deve escolher uma ao invés de outra marca, ou porque prefere uma e não de outra publicidade.

O livro mostra que todos tomamos decisões baseadas em vieses dos diferentes tipos. Mas como ocorre o processo de tomada de decisão, especialmente quando as condições são impostas por elementos do design?

A inter-relação entre design e psicologia tem determinado as cores, palavras e demais estratégias de marketing adotadas por empresas já há várias décadas.

Neste artigo trazemos a relação entre essas duas áreas, apontando como os vieses cognitivos1 e princípios apontados por Kahneman e outros autores influenciam as decisões tomadas por usuários de seu website.

Nele apresentamos 7 variáveis de análise. Ao descreve-las, detalhamos como cada fenómeno influencia o design em geral e afunilamos para o web design. Essas variáveis são: a necessidade de instruir o usuário quanto ao uso de seu produto, a necessidade de seguir os princípios Gestalt; entender as limitações de atenção do cérebro humano; transmitir o senso de comunidade e confiança; explorar a aversão a perda que as pessoas têm; e a tendência a cair em vícios.

1. Instruir o usuário ao usar o produto

Usuários de certos produtos aparentemente sabem usa-los logo após a compra ou após vários usos. Imaginemos que você tenha comprado um celular novo ou um laptop. Após tira-lo da embalagem você começará instantaneamente a usá-lo. Mas não foi assim na primeira compra ou uso. Você provavelmente leu o manual e tutoriais online que explicassem como usar o dispositivo.

O mesmo processo acontece no uso de um website. A primeira vez que um usuário interage com ele tende a ser algo complexo. Lembra-se do primeiro dia em que usou Instagram? Provavelmente você teve que perguntar sobre uma ou outra coisa a seu amigo ou procurar a resposta para suas dúvidas em FAQ’s.

Se você deteta que o usuário visita ou se inscreveu pela primeira vez no seu website, lhe dê instruções sobre como usá-lo, quer seja através de um manual em PDF, ou mostrando exemplos sobre como preencher os campos de um formulário, ou mesmo apresentando as instruções através de pop-ups toda a vez que o usuário coloca o mouse ou clica sobre determinado elemento.

Image: Exemplo do Google drive
Imagem 1: Pop up do Google drive

É necessário prever possíveis erros que o usuário possa cometer e construir as respetivas mensagens, indicando os erros cometidos e como estes devem ser eliminados.

Estas ações deixarão o usuário de seu app ou website mais confortável ao saber que, por mais que não precise, existem instruções disponíveis para ele.

As pessoas gostam de atividades ou comprar itens que parecem familiares e lhes apresentar um manual com instruções de uso gera esse senso de familiaridade. Os faz pensar que já conhecem seu produto, embora seja a primeira vez a usá-lo.

2. Os princípios da Gestalt

Os princípios da Gestalt foram criados pelos psicólogos Max Wetheimer, Kurt Koffka e Wolfgang Kohler para entender como elementos visuais (capturados pelos olhos) são interpretados pelo cérebro.

Desde sua identificação, os princípios da Gestalt têm sido usados em design para prever as respostas de usuários perante determinados produtos e marcas.

Segundo estes princípios o cérebro humano entende partes de objetos antes deste criar a imagem completa de um objeto na mente, pelo que se apresentadas figuras complexas o cérebro tende a reparti-las em pequenas porções que possam ser atribuídas algum sentido.

Existem 7 princípios da Gestalt aplicáveis ao web design2. Estes pressupõem que grupos de objetos devem ser formados em função de sua similaridade e proximidade, e entendidos em função de seu término, simetrias, justaposições e balanço.

a) Lei de proximidade

A lei de proximidade estabelece que objetos pertencentes a um grupo devem ser separados dos de outro grupo. Assim sendo, elementos próximos um ao outro são entendidos como pertencentes do mesmo grupo. Um exemplo desta lei aplicada em web design é a relação entre a imagem, título e nota introdutória dos artigos apresentados na página inicial de nosso website. Enquanto os olhos percorrem a tela seguindo estes elementos, o cérebro entende eles como parte do mesmo grupo – de um único artigo.

Image: Artigo da Retrate Labs
Imagem 2: Artigo da Retrate Labs

b) Lei da semelhança

Esta lei pressupõe que objetos similares devem ser agrupados juntos. Assume-se que cores, ícones, fontes, imagens e linhas por exemplo devem ser agrupadas juntas para criar um senso de união. Em nosso website aplicamos esse conceito ao separar as secções de “portfólio” e de “artigos recentes” apresentados na página inicial. Para além de apresentar elementos similares em cada uma das secções determinamos as diferenças entre uma e outra através da adoção de um background cinza para a secção de portfólio.

Image: Página inicial da Retrate Labs
Imagem 3: Seções da página inicial da Retrate Labs

c) Lei do fechamento

Esta lei relaciona-se à rapidez do sistema 1 em pular para conclusões sobre factos não claros, como Kahneman refere. Temos tendência a completar objetos, palavras e grupos quando apresentados incompletos. Estes objetos geralmente são compostos por padrões, tais como espaços coloridos seguidos por espaços vazios, que levam o usuário a criar a figura completa em sua mente.

O website do jogo Closer faz uso deste princípio ao apresentar a silhueta de um homem no fundo. Apesar da transparência e falta de outros elementos que tornam a imagem a figura completa de um homem, o cérebro ainda assim entende a imagem como sendo um homem. O mesmo processo acontece com as letras do nome do produto (“sleep”) apresentadas no fundo do website da MA.

Image: Exemplo da página do jogo Closer
Imagem 4: Exemplo da página do jogo Closer
Image: Exemplo da MA
Imagem 5: Exemplo da MA

d) Lei da continuidade

Retas ou curvas, pontiagudas ou arredondadas nos extremos, linhas tem o poder de direcionar a atenção do usuário para determinado objetivo – aprender sobre algo, identificar, memorizar ou clicar um objeto. Esta lei pressupõe que um usuário tende a continuar o desenho de uma linha, criando um início e fim, por mais que esta seja interrompida, ao ter certos pontos apagados ou cobertos por outros elementos.

Esta página da agência jam3 faz um bom uso deste princípio e da lei de fechamento ao convidar os usuários a interpretar o símbolo de infinito como o A e M presentes no nome da agencia, assim como entender a junção de todas as linhas como JAM.

Image: celebração de awards pela Jam3
Imagem 6: Página de celebração de Awards recebidos pela Jam3

e) Lei da Pregnância

Procuramos perceber formas ou objetos complexos da forma mais simples possível. Temos tendência a quebrar elementos complexos em pequenas unidades por forma a entende-las. Por esse motivo preferimos websites com visual menos confuso, com imagens de caras amigáveis e sem elementos sobrepostos sem que se faça uma diferenciação entre eles.

f) Segregação

Nós somos capazes de entender elementos gráficos em função do contraste entre o primeiro plano e plano de fundo apresentados. Textos, imagens, tabelas, formulários e logos se tornam visíveis em um website quando colocados sobre um fundo adequado. Por exemplo, texto em fontes escuras não ficará bem visível se colocado sobre fundos escuros. A combinação entre o plano de fundo e primeiro plano ofereceram ao cérebro uma melhor compreensão da informação passada.

g) Ponto focal

Usuários de um website são induzidos a clicar sobre o elemento que mais se destaca na tela, quer pela sua cor ou gráficos diferentes. Um botão vermelho ou verde chamará mais atenção do usuário se colocado entre elementos cinza ou vice-versa.

Neste exemplo da Mixlegno, veja como os quadrados no centro da tela chamam a atenção do usuário para o link dentro destes.

Image: página inicial da Mixlegno
Imagem 7: Mixlegno homepage

A adoção dos princípios da Gestalt é importante para criar uma boa impressão em novos visitantes de um website por estes explorarem, o lado irracional de nosso cérebro. Nós fazemos o que somos direcionados a fazer (por mais que nos consideremos autónomos), assumimos que o barulhento ou brilhante é mais importante, e de forma geral, detestamos matemática ou estatística. Se alguém puder agrupar elementos em função de suas diferenças e passar-nos já agrupados, ficaremos bem felizes.

3. Deficit de atenção (ou concentração)

Nós temos dificuldades em manter o foco em determinadas tarefas. À medida que executamos determinada tarefa, nosso nível de concentração tende a reduzir, chegando ao ponto em que nos distraímos por qualquer coisa e abandonamos o que fazíamos.

Por exemplo, um usuário pode aceder uma plataforma de reserva de mesas em restaurantes, iniciar o processo de reserva, e no meio do processo se distrair por um ad, e esquecer totalmente o que lhe fez ir ao website.

Se esse for o caso, podemos lembrar ao usuário o que lá fazia mostrando um pop-up de saída quando este mover o mouse em direção ao botão para fechar ou abrir nova aba, apresentando informações sobre locais disponíveis, os benefícios ou outros gatilhos que lhe lembrem sobre seu objetivo.

Para chamar gerar mais concentração do usuário na tarefa, pode-se “espelhar” seu comportamento fazendo questões (usando pop-ups ou chatbots) que confirmem suas ações e lhes encaminhem a seguir o processo de reserva conforme planificado. Por exemplo:

Se o usuário clica em “Reservar mesa"; Responder: Você clicou “reservar uma mesa”. Para quantas pessoas você deseja fazer a reserva?

Se usuário seleciona “2”; Responder: Você selecionou uma mesa para "2". Você já tem um prato preferido?

Se usuário seleciona o prato; Responder: Você adicionou “nome do prato” no carrinho de compras. Quando você quer que o jantar ocorra?

Após o usuário inserir a data e preencher outros campos do formulário; Responder: Seu carinho de compras esta pronto. Deseja finalizar a compra agora?

Se usuário for distraído antes de finalizar a compra e demonstra interesse em sair da aba; Apresentar a mensagem: Parece que você esta nos abandonando. Sua compra não foi finalizada. Deseja finalizar a compra agora?

Para ajudar mais o usuário a não se distrair, opte por um design minimalista em seu website. Remova elementos que não são necessários para a principal tarefa que o usuário deve executar na página. A exemplo de finalizar uma compra, não apresente elementos que não conduzem o usuário a esta finalidade.

Crie também uma hierarquia de navegação e de elementos visuais, tais como botões de chamada para ação, que não sejam distrativos.

4. As pessoas não gostam de pensar

O psicólogo Barry Schwartz expõem em seu livro e Ted talk que quando o usuário pretende comprar um item e lhe são apresentadas várias opções, as chances deste finalizar a compra reduzem à medida que novos itens forem exibidos. Este processo é designado “o paradoxo da escolha” e caracteriza-se pelo aumento de dúvidas e receio do usuário em fazer a escolha errada, perante tantas alternativas.

Você pode pensar que este problema pode ser ultrapassado apresentando ao usuário a descrição completa de cada produto, o que permitiria fazer uma melhor comparação, mas isso só complicará mais as coisas.

Oferecer mais informações a um usuário com várias opções não funciona por 2 razões: (1) eles não vão ler todo o texto (botões, imagens ou tabelas) apresentado porque pessoas não gostam de ler e não tomarão nenhuma decisão porque pensarão que tem algo sobre o produto que ainda não tem conhecimento, por mais que a informação esteja colocada à sua frente. E (2) quanto mais o usuário ler sobre os produtos apresentados, mais elementos para comparação este juntará, o que vai tornar o processo mais complexo.

Nós não gostamos de complexidade. Tudo o que queremos é comprar a garrafa de água mineral e seguir em frente. Lá me interessa o quão sofisticada a técnica de empresa a ou b é para engarrafar a água? Porque você me daria essa informação?

Num website de e-commerce, se o usuário pretende comprar um perfume3 e lhe são apresentadas diversas opções desde o início do funil de vendas até o momento de finalizar a compra, maiores são as chances deste abandonar a compra (churn-rate).

Tanta informação e opções para escolher lhe farão pensar “se eu comprar este item, eu não terei aquele e aquele tem essa essência que este não tem. O terceiro é mais barato, mas de uma marca que eu não conheço. Quem me garante que seja bom?... etc., etc., etc.

Evite fazer o usuário de seu website pensar sobre esses elementos no momento de finalizar a compra omitindo qualquer informação que gere pensamentos de dúvida. Mesmo na página de categorias do produto ou nos resultados de busca, não apresente todas as opções disponíveis em sua loja. O Google, por exemplo, não apresenta todos os resultados de busca em uma única página. Imagine se isso acontecesse? Você (e seu computador) ficaria paralisado e não haveria de clicar sobre nenhum link.

Steve Krug escreveu um livro que se tornou um conceito bem popular em web design: “Não me faça pensar”. Não faça o usuário de seu app/ website pensar. Seu trabalho como designer é pensar pelo usuário e oferecer as respostas para seus problemas da forma mais simplificada possível.

5. As pessoas confiarão em ti se outras pessoas também confiarem

Visitantes de seu website comprarão seu produto ou baixarão seu app se este for validado por outras pessoas.

Chamado de prova social, este princípio estabelece que pessoas estão dispostas a fazer ou comprar coisas que outras pessoas descrevem como experiências positivas.

Uma das formas de aumentar suas taxas de conversão é através da adição de testemunhos em seu website, com vista a fazer seus visitantes confiar em ti ao ler sobre a opinião de outros usuários, tal como fizemos no site da Smile Mozambique.

Image: Testemunhos nas páginas da Smile Mozambique
Imagem 8: Testemunhos de clientes da Smile Mozambique

Na página inicial do site do colchão Emma são apresentadas, não só as revisões de clientes satisfeitos, como também premiações atribuídas por entidades reguladoras da Europa.

Image: testemunhos e awards dos colchões Emma
Imagem 9: Testemunhos e awards recebidos pelo colchão Emma

A melhor forma de adicionar testemunhos em seu website, app ou página nas redes sociais é através da gravação de vídeos. Testemunhos dados através de vídeos não são suscetíveis a alterações e permitem comprovar a autenticidade – você consegue ler a linguagem corporal, o movimento dos lábios, o tom de voz, entre outros elementos.

Se um vídeo não estiver disponível, use screenshots de comentários ou revisões deixadas por seus clientes em redes sociais ou plataformas de e-commerce por si usadas.

As pessoas confiarão mais em ti e seu produto se estes perceberem que um membro de sua família ou amigo também confia.

Cruzando dados que você possui sobre o perfil de seu usuário, com os disponíveis em redes sociais, você pode identificar conhecidos, amigos e membros da família do visitante de seu website que também compraram ou demonstraram interesse pelo seu produto. Apresentar esta informação ao visitante aumenta seu volume de compras – (“Oh! O João comprou. Hmmm... Deve ser bom. Vou comprar também”) – mas esteja atendo a GDPR e outras leis sobre o uso e partilha da informação de usuários.

6. As pessoas não gostam de perder

Aversão a perda é o motivo que conduz pessoas a tomar decisões rápidas e impulsivas quando são apresentados descontos ou ofertas especiais. Quando as pessoas detetam uma oportunidade de ganhar algo ou poupar dinheiro – por mais que seja um centavo – em seu website, as chances destas revisitarem-no ou assinarem a sua lista de emails são grandes.

Você pode tirar proveito deste viés adicionando cronómetros para ofertas especiais e descontos em sua loja virtual, e escrevendo copy que faça o usuário acreditar que encontrou o “negócio do século”.

Image: Promoções da Hostgator
Imagem 10: Promoções da Hostgator

Se um usuário estiver para abandonar o carrinho de compras, por exemplo, pode ser apresentada uma mensagem questionando “Você deseja perder todos os benefícios que nosso produto oferece?”. Substituindo a palavra “benefícios” com termos que descrevem benefícios reais de seu produto, as chances do usuário finalizar a compra aumentam, bem no último minuto.

7. As pessoas gostam de coisas viciantes

Escrevemos previamente um artigo explicando como gamification pode aumentar suas vendas. Você pode ler mais sobre este princípio nesse artigo. Em regra geral, as pessoas gostam de coisas viciantes. Qualquer atividade que permita a geração de dopamina é bem-vinda.

Em experiências digitais, a dopamina é gerada sempre que são completadas tarefas que levam o usuário a novos níveis, novos grupos ou que aumentem seu senso de aprovação social (gostos, seguidores, compartilhamentos, etc). Isso faz com que o usuário, inconscientemente, retorne ao seu website em busca da mesma sensação.

Leia o artigo sobre gamification para exemplos.

Notas finais

O entendimento do comportamento de usuários é importante para fazer vendas e construir produtos dos quais estes gostem. Para esse fim, têm muito o que designers podem aprender com psicologia.

Não ignore os vieses cognitivos (embora não apontados conforme nomeados no livro) e princípios apresentados acima no seu próximo projeto e nos informe sobre o que você acha sobre eles.

Anotações

  1. Não apresentamos neste artigo os vieses nomeados conforme no livro.
  2. A lista variará em função do julgamento feito por cada autor.
  3. Este é só um exemplo. Usuários de fragâncias tendem a ser fiéis à suas marcas.

Share this article in your favourite social network

Artigos similares