Psicologia do Design 6 Layout do Site

Publicados: 2022-04-06

Cada escolha que um designer faz impactará a forma como o consumidor interage com um produto, serviço ou empresa. Isto é especialmente verdadeiro para a forma como um site é organizado.

Nesta instalação final de nossa série sobre a psicologia do design, vamos mergulhar profundamente em alguns dos princípios da psicologia que influenciam a jornada do usuário de um site. De práticas recomendadas de conteúdo a dicas para frases de chamariz eficazes, conteúdo fechado, navegação de menu e muito mais, estamos analisando alguns dos efeitos psicológicos que afetarão se seus clientes interagem ou não com seu(s) site(s).

Nas seções a seguir, abordaremos alguns dos princípios da psicologia que afetam:

  • Priorização de conteúdo
  • Estrutura de navegação
  • Conteúdo fechado e campos de formulário
  • Carrinhos e processos de checkout
  • Chamadas à ação

Priorizando seu conteúdo corretamente

Falamos um pouco sobre a importância da hierarquia de conteúdo do seu site na parte quatro de nossa série, mas vamos expandir mais essa análise básica aqui. A priorização de conteúdo, ou sua hierarquia de conteúdo, significa definir a ordem exata em que seu público deve digerir as informações em seu site para garantir que eles tenham o melhor e mais completo entendimento dos benefícios de seu produto ou serviço.

Até este ponto, você já deve ter ouvido designers falarem sobre a importância de colocar informações importantes acima da dobra. “Acima da dobra” é um antigo termo de jornal que fez a transição para a terminologia de web design nos primórdios da internet. Refere-se a qualquer conteúdo que é exibido para o usuário que visita seu site, sem rolagem – assim como um jornal colocaria a história mais importante acima da dobra do meio da página.

No entanto, o conceito de conteúdo acima da dobra, assim como a maioria dos jornais impressos, está um pouco desatualizado por alguns motivos. Para começar, muitos usuários agora visitam sites em telas menores (como telefones e tablets), pois o tráfego móvel continua a ultrapassar o desktop. Por esse motivo, muitos visitantes do site esperam rolar, então o conteúdo acima da dobra tem menos peso do que antes.

Isso não quer dizer que o conteúdo acima da dobra não possa ser útil – as páginas de destino oferecem um ótimo exemplo – mas tenha cuidado para não dar muita importância a ele. Quando estiver projetando, pense no efeito de posição serial.

Um termo cunhado pelo psicólogo alemão Hermann Ebbinghaus, o Efeito de Posição Serial refere-se ao fato de que as pessoas são mais propensas a lembrar o primeiro e o último itens de uma lista. Isso ocorre porque nossos cérebros mostram favoritismo aos itens que vemos primeiro (efeito de primazia) e itens que vimos mais recentemente (efeito de recência).

Essa tática funciona bem quando você precisa que os usuários lembrem apenas um ou dois pontos importantes do seu conteúdo (talvez um nome de produto ou um grande benefício). No entanto, para tópicos mais complexos com várias etapas ou muitas informações para processar, convém adotar uma abordagem diferente.

Uma tática de divulgação progressiva é uma maneira melhor de ajudar seus usuários a entender tópicos altamente complexos. Refere-se à técnica de espalhar informações em várias telas e exigir que as interações passem de uma para a outra. Isso ajuda a diminuir a chance de seu usuário final se sentir sobrecarregado com as informações apresentadas. O conteúdo truncado e as exibições sanfonadas são apenas duas das maneiras comuns pelas quais os designers usam a divulgação progressiva no design da web.

Ambos os efeitos o ajudarão a explorar os padrões naturais de pensamento humano que podem solidificar sua mensagem na mente dos consumidores. Antes mesmo de começar a ler seu conteúdo, os usuários podem decidir navegar pelo seu site para algo específico. A próxima seção ajudará você a tornar esse processo perfeito para seus visitantes.

Estruturando sua navegação

A maioria dos botões de navegação do site é estruturada de duas maneiras: em uma barra na parte superior da página ou em um menu de hambúrguer ao lado. Esse tipo de navegação se tornou quase uma segunda natureza para os usuários e, como diz o ditado, “se não está quebrado, não conserte”.

Quando você está projetando sua navegação, é fácil seguir o padrão, mas há alguns casos em que você pode querer mudar sua estrutura. A primeira ideia com a qual você deve se preocupar é a Lei de Hick.

No início da década de 1950, dois pesquisadores, William Edmund Hick e Ray Hyman, examinaram a relação entre a quantidade de estímulos e a quantidade de tempo que um indivíduo levava para tomar uma decisão. A conclusão deles? Muitas opções é paralisante. Um menu de navegação expansivo com toneladas de clicáveis, então, pode ser demais para novos usuários.

Em vez disso, seus botões de navegação devem ser claros, bem posicionados e poucos. Para sites maiores, aninhe botões de menor importância sob o guarda-chuva de outro botão em sua navegação. Por exemplo, a navegação de nível superior da Amazon é bastante simples, mas ao passar o mouse, os usuários obtêm uma visão expandida de suas opções.

Uma captura de tela da página inicial do Flywheel mostra um menu de navegação com 8 opções principais. Passar o mouse sobre a opção Produto revela cinco itens de menu adicionais que foram aninhados abaixo dela.
O site do Flywheel mantém o menu de navegação bastante limitado, mas ao passar o mouse sobre certas opções, você pode expandir o menu para opções adicionais

Ao limitar o número de botões que você exibe inicialmente aos espectadores, você os ajuda a restringir suas escolhas e a tomar melhores decisões de navegação. Você também pode usar o efeito de primazia para forçar seus usuários a realizar a ação que você mais gostaria que eles realizassem.

Embora a maioria dos sites organize sua navegação da mesma maneira (página Sobre, Serviços ou Produtos e Contato), colocar o conteúdo mais importante primeiro ajudará a obter mais visibilidade. Portanto, se seu objetivo principal é fazer com que clientes em potencial entrem em contato com você, tente colocar o botão da página de contato primeiro em sua navegação.

O menu de navegação é onde muitos designers lutam para encontrar o equilíbrio certo entre sua visão estética e a experiência do usuário final. O efeito de usabilidade estética refere-se à correlação entre um design agradável e a tendência do usuário de ignorar questões funcionais.

Acontece que os usuários tendem a julgar um livro pela capa, e eles serão mais tolerantes com problemas funcionais se o site em que estiverem parecer bom. Portanto, quando você estiver concluindo seu teste de UX, tome cuidado extra para analisar o feedback dos usuários que se concentram nos efeitos positivos do seu design, mas têm pouco a dizer sobre como ele funciona. Aprofunde seus resultados para ter certeza de que eles não estão perdoando suas falhas funcionais em favor de elogiar seu design.

Criando portões e campos de formulário que seus visitantes usarão

Embora os usuários passem mais tempo online do que nunca, eles estão se tornando menos propensos a fornecer dados pessoais. Esta é provavelmente uma das razões pelas quais a maioria das pessoas tem pelo menos dois endereços de e-mail.

Apenas um é o endereço de e-mail principal que é verificado regularmente. O outro, infelizmente, raramente é verificado. Ou é uma conta antiga à qual o usuário perdeu o acesso ou está sendo usada quando um endereço de e-mail é necessário para acessar algo, mas a pessoa por trás do nome de usuário não quer uma tonelada de e-mails de marketing inundando sua caixa de entrada principal.

Quando um usuário preenche um campo de formulário para entrar em contato com sua empresa ou baixar conteúdo fechado, seja de forma ativa ou inconsciente, ele passa por uma rápida análise de custo-benefício em suas mentes. Eles estão pensando se vale a pena preencher o formulário ou não, dando espaço em sua caixa de entrada - e em sua mente.

A melhor maneira de garantir que seu valor supere a hesitação de seus usuários é tornar seus campos de formulário o mais fáceis de usar possível. Embora seja tentador pedir a um usuário muitas informações demográficas para que você possa obter o lead mais qualificado possível, isso corre o risco de perdê-lo completamente. Otimize seus formulários para preenchimento automático para ajudar seus usuários a inserir suas informações ainda mais rapidamente, economizando alguns dos custos de envio.

Além disso, se você achar que há perguntas que gostaria de incluir, mas que podem exigir muito de alguns usuários, como um campo para um comentário curto, torná-lo opcional permitirá aos visitantes a oportunidade de reduzir ainda mais o custo de entrada .

Você também pode criar incentivos psicológicos para preencher um campo de formulário ao longo da jornada do usuário para ajudar a impulsionar seus visitantes a enviar. Isso é chamado de priming, que é o ato de usar intencionalmente palavras ou imagens que são relativas umas às outras para criar associações mais rápidas e memoráveis ​​no cérebro. Esses pequenos gatilhos podem significar a diferença entre um usuário inserir seu “endereço de lixo eletrônico” ou o principal.

Uma maneira simples de alguns web designers prepararem seus visitantes para preencher um portão ou formulário de contato é por meio do priming semântico. Você pode usar o priming semântico para criar associações linguísticas que inconscientemente levam os visitantes a enviar um formulário. Por exemplo, quando os profissionais de marketing prometem uma solução “rápida” ou “fácil” para um problema com o conteúdo do outro lado do portão, essas palavras-chave também podem influenciar a maneira como o visitante vê a ação de digitar seus dados pessoais .

Solidificando conversas por meio de carrinhos e checkouts

Quando você é um vendedor online, o processo de checkout é um dos aspectos mais importantes do design do seu site. É o momento decisivo para a conversão, portanto, se algo der errado ou demorar muito, você poderá perder uma venda.

É quando muitas equipes de marketing confiam em campanhas de banner digital para lembrar os usuários sobre seu produto. No entanto, os efeitos da “cegueira de banner” podem conter o progresso até mesmo da campanha digital mais bem colocada.

A cegueira de banner é um tipo de descaso seletivo no qual as pessoas naturalmente ignoram coisas que consideram irrelevantes para a tarefa em questão. É por isso que é tão fácil ignorar anúncios digitais quando você está rolando para uma receita ou outdoors quando está dirigindo. O cérebro filtrará automaticamente o máximo de informações irrelevantes possível e, como os anúncios estão em toda parte, eles são uma das primeiras coisas a serem eliminadas. Então, como combater a cegueira de banner?

Se possível, e-mails de carrinho abandonados ou mensagens pop-up na página podem ajudar a transformar seu potencial comprador em um comprador real. Essas mensagens são uma tentativa de chamar a atenção do usuário de volta ao processo de checkout. Para estimular ainda mais o subconsciente em ação, use o efeito Zeigarnik.

Esta é uma observação feita pelo psicólogo lituano Bluma Zeigarnik que estipula que tarefas interrompidas ou inacabadas são mais facilmente lembradas do que tarefas concluídas. É a razão pela qual os programas de televisão geralmente incluem cliffhangers; é mais provável que você se lembre - e retorne - de algo que parece inacabado.

A barra de progresso do checkout mostra cinco etapas, as duas primeiras com marcas de seleção vermelhas para mostrar a conclusão. As etapas são: sua cesta, informações de entrega, forma de pagamento (em negrito para mostrar que esta etapa está em andamento), revisar pedido e confirmar compra
Uma lista inacabada permite que os usuários se lembrem mais facilmente da mentalidade em que estavam quando começaram a fazer o check-out

Portanto, quando você exibe um pop-up sobre o carrinho abandonado de um usuário, incluindo uma barra de progresso incompleta ou uma lista numerada de etapas, isso os ajudará a lembrar o que estavam fazendo quando deixaram o carrinho, incluindo a mentalidade de “checkout” em que estavam. Isso incentiva o comprador voltar e terminar o que estava fazendo. A satisfação proposta de uma tarefa concluída pode ser o empurrão final que o usuário precisava para finalizar sua compra.

Criando a chamada para ação

A chamada para ação é sem dúvida a parte mais importante do seu site. Não importa quais sejam seus objetivos na criação de um site – uma venda, coleta de dados, construção de seguidores nas redes sociais – o call to action é onde você pode pedir.

Para a maioria dos sites, você provavelmente terá várias frases de chamariz com diferentes graus de importância. Se seu objetivo principal for vender produtos, por exemplo, você provavelmente ainda terá solicitações secundárias, como assinar um boletim informativo ou indicar um amigo. Isso é ótimo, porque nem todo usuário quer seguir exatamente a mesma jornada, portanto, dar a eles opções permite que eles escolham seu próprio caminho.

Este é outro exemplo em que a Lei de Hick entra em jogo. Também chamado de paradoxo da escolha, ocorre quando uma quantidade excessiva de opções causa paralisia de decisão entre os usuários. Para salvar seus usuários do paradoxo da escolha e ajudá-los a tomar decisões rápidas, identifique e siga rigorosamente o uso de apenas duas a três chamadas para ação. Isso ajudará a acelerar o tempo de processamento do usuário e permitirá que ele reduza a melhor escolha para suas necessidades de forma mais eficaz.

Como um dos aspectos mais importantes do seu site, o call to action também deve chamar muita atenção. Uma maneira fácil de destacar essas seções é usando o efeito Von Restorff. Também conhecido como efeito de isolamento, é a observação de que, quando múltiplos estímulos são apresentados, um item visivelmente diferente dos demais será mais facilmente lembrado.

Captura de tela da página inicial do site do Flywheel na qual o botão Visualizar planos se destaca em negrito amarelo, enquanto o botão Explorar ferramentas da agência parece menos em negrito com apenas uma pequena seta azul indicando que é um elemento clicável
A página inicial do Flywheel usa o efeito Von Restorff para diferenciar a call to action principal, View Plans, da call to action secundária, Explore Agency Tools

Então, quando você estiver criando suas chamadas para ação, identifique e diferencie a escolha que você mais gostaria que seus visitantes fizessem. Para continuar usando o exemplo acima, no qual os usuários são solicitados a comprar um produto, assinar um boletim informativo ou indicar um amigo, há um objetivo principal claro: fazer uma venda.

Ao diferenciar o call to action de vendas dos outros dois usando cores, tamanho, forma, tipografia, posicionamento ou algum outro elemento físico, você chama mais atenção para o seu pedido mais importante. Embora cada página deva ter pelo menos uma chamada para ação, você pode promover uma em detrimento da outra e incentivar os usuários a realizar a ação mais importante usando o efeito Von Restorff.

As mentes por trás de um ótimo design

Há muito mais para descobrir e entender sobre os impactos psicológicos que o design de um site pode ter sobre seus usuários, e esta série apenas arranha a superfície. É por isso que estamos continuamente dissecando o design de todos os ângulos e selecionando conteúdo com freelancers e profissionais de design em mente.

Quer mais conteúdo cobrindo os elementos de design para ajudá-lo a aumentar seu kit de ferramentas criativas? Assine o boletim informativo do Layout abaixo para receber uma dose semanal das melhores ferramentas, práticas e insights necessários para aprimorar suas habilidades e gerar mais negócios.