Dicas práticas para reduzir a carga de visitantes e aumentar as conversões

[Nota do editor: Este post foi publicado originalmente em 5 de maio de 2014 e foi atualizado para incluir uma discussão sobre o sistema 1 e o sistema 2 de Kahneman e mais dicas para reduzir a carga de visitantes do site.]

Muitas vezes enfatizamos que os sites precisam evitar adicionar carga cognitiva aos usuários para facilitar a conversão. Neste post, falamos sobre os dois modos de funcionamento do cérebro de acordo com Daniel Kahneman e os diferentes tipos de carga do usuário (e como minimizá-los).

Para simplificar um ponto feito pelo psicólogo vencedor do Prêmio Nobel Daniel Kahneman , todos os nossos cérebros têm dois modos de operação .

Existe o sistema que está ativo quando estamos escovando os dentes, comendo nossos cereais ou entrando em um trem. Esse sistema é rápido, inconsciente e automático. É muito útil e é parte da razão pela qual nós, como espécie, sobrevivemos por tanto tempo. É o modo que dizia aos nossos ancestrais para correr ou se esconder quando ouviam sons suspeitos e pensavam que um predador estava por perto. Um processo de pensamento lento, cuidadoso e deliberado os teria comido.

Esse é o sistema 1 .

Há também o sistema que está ativo quando tentamos dividir 328 por 17, escrevendo um ensaio de 10 páginas sobre Moby Dick, ou para usar um exemplo de marketing online, escrevendo uma expressão regular que manterá as visitas internas fora do Google Analytics. Esse sistema é lento, consciente e altamente dependente do esforço. Assim como o sistema 1, também é muito útil – simplesmente não podemos usá-lo o tempo todo.

Esse é o sistema 2 .

Como nosso cérebro geralmente falha é quando tenta usar o sistema 1 para tarefas complexas ou o sistema 2 para coisas que exigem ação imediata.

Uma peculiaridade dos modos é que, para tarefas cotidianas, nossos cérebros “preferem” o sistema 1. Se você der a um cérebro uma escolha entre uma tarefa do sistema 1 e uma tarefa do sistema 2 para atividades do dia-a-dia, ele geralmente usará como padrão sistema 1.

Para um profissional de marketing online, o sistema 2 é a morte . Os visitantes têm a opção de mudar para outro site em vez de fazer transações com você. Se usar seu site parece mais perto de dividir 328 por 17 em vez de comer cereais, os visitantes provavelmente irão para um site que parece mais comer cereais.

Tornar as coisas fáceis de usar é complicado

Seu trabalho como profissional de marketing é ajudar seus usuários a realizar suas tarefas. Você precisa torná-lo o mais rápido e fácil possível para que seus visitantes cheguem ao que precisam.

Isso parece uma coisa simples, mas na prática, pode ficar bastante complicado.

Você pode simplificar para si mesmo, entendendo os diferentes tipos de coisas que podem sobrecarregar o usuário:

• A carga visual pertence ao seu design. Quanta pressão você está colocando no usuário para entender visualmente suas páginas?
• A carga do motor é sobre o movimento. Quanta pressão você está colocando em seus usuários para usar o mouse/ponteiro e teclado/teclado para fazer algo?
• A carga cognitiva é sobre a quantidade de processamento mental necessária para dar sentido a uma página. Quanta carga intelectual você está impondo aos seus visitantes para entender o que você está tentando dizer?
• A carga de memória refere-se à quantidade de trabalho que os usuários precisam realizar ao coletar algo para usar seu site. Quanta pressão na memória do usuário é necessária para usar seu site?

Vamos abordar esses tipos de carga.

Carga visual

Visual é o mais barato entre todos os tipos de carga porque os humanos têm vários maquinários para processamento visual. Dito isso, você ainda precisa se certificar de que não estressa seus visitantes. Para minimizar a carga visual, você precisa pensar em algumas coisas:

Acessibilidade

Deve ser imediatamente óbvio quais elementos da página são interativos e quais não são. Portanto, os botões devem parecer que podem ser clicados. Geralmente, os elementos interativos devem aparecer, e os elementos que podem ser lidos devem ser subjugados.

Legibilidade

Torne seu site fácil de ler.

• Estabeleça uma hierarquia visual clara usando tamanhos de fonte maiores para subtítulos e títulos.
• Dê suporte ao comportamento de varredura do usuário da Web apresentando informações em marcadores, em vez de parágrafos.
• Certifique-se de que os estilos de fonte sejam consistentes e evite aqueles que são muito ornamentados. Estilos de fonte excessivamente criativos podem atrapalhar a legibilidade.
• Faça tamanhos de fonte grandes o suficiente para seu público-alvo (ou seja, usando fontes maiores para públicos mais velhos).

Exemplo de muita carga visual

A página inicial do NewYorkBarbells.com, por exemplo, é obrigada a sobrecarregar os usuários visualmente (setas vermelhas adicionadas para ênfase):

• A página precisa ser mais disciplinada com o uso de cores e fontes. Ele usa diferentes cores e tipos de fonte e não consegue estabelecer uma hierarquia visual clara.
• Não é imediatamente óbvio quais elementos são interativos e quais não são:
  • A “Lista de Produtos”, um elemento clicável, carece de significantes de affordance e não se parece com um botão.
  • “Clique para continuar a ler” em texto sublinhado em azul é clicável, mas “Serving Fitness Industry …”, que também é texto sublinhado em azul, não é clicável.
• A página tem muito texto e não suporta o comportamento de varredura dos usuários da web.

Lembre-se de que quanto mais fácil for para os usuários digitalizarem e entenderem imediatamente sua página, mais leve será a carga visual que você impõe aos visitantes.

Carga do motor

Ao pensar em como minimizar a carga do motor, lembre-se da Lei de Fitts . Ele afirma que o tempo que alguém leva para chegar ao que está tentando interagir é uma função do tamanho do alvo e da distância até o alvo .

O alvo pode ser um botão no qual o usuário está tentando clicar ou tocar, um campo de formulário no qual está tentando clicar ou um menu sanfonado que está tentando expandir.

A distância, por outro lado, diz respeito à distância do alvo de onde o ponteiro do usuário (por exemplo, cursor do mouse, dedo) começa.

Assim, alvos grandes que estão próximos ao ponteiro exigirão menos esforço, enquanto alvos pequenos que estão distantes imporão maior carga motora.

Aqui estão algumas coisas que você pode fazer para reduzir o esforço físico exigido dos usuários:

• Agrupe tarefas relacionadas . Dessa forma, não é preciso muito trabalho para alternar entre as coisas necessárias para um conjunto de tarefas relacionadas.
• Aumente o tamanho dos botões necessários para as principais tarefas. Dessa forma, a distância que o ponteiro precisa percorrer é compensada pelo tamanho do call to action (CTA).

Exemplo de conservação de carga do motor

O carrinho de compras da Shoes.com torna o botão “Checkout” visualmente proeminente e reduz a carga do motor tornando o botão repetitivo. Quer o ponteiro comece na parte superior da página ou na parte inferior da página (presumivelmente após o usuário revisar os itens no carrinho), o ponteiro nunca está muito longe do botão CTA.

Tenha em mente que a distância necessária para os usuários realizarem suas tarefas impede a conclusão da tarefa. Os usuários só tolerarão uma quantidade definida de espaço antes de desistir. Portanto, minimize a carga do motor sempre que possível.

Carga cognitiva

A carga cognitiva é a quantidade de processamento mental necessária para dar sentido a uma página. Quando você tem vários pontos de alinhamento ou locais inconsistentes para tarefas interativas, a carga cognitiva é afetada. Geralmente, você precisa considerar o seguinte:

Disponibilidade

Isso se refere à capacidade de descoberta de informações quando os usuários precisam delas. A ideia é tornar mais fácil para os visitantes identificarem o que precisam em uma página. Isso pode significar dar aos elementos que são mais comumente usados ​​pelos visitantes mais realismo ou ênfase visual em uma página.

Por exemplo, o número de telefone no SK-II.com pode ser difícil de encontrar. O usuário terá que rolar até o rodapé da página, clicar em “Fale Conosco” e depois clicar no ícone “Ligar” (que também não possui significantes de affordance):

Outro exemplo de um problema de disponibilidade ou descoberta é quando o usuário se pergunta o que deve fazer na página porque a chamada para ação não é clara ou imperceptível. Portanto, certifique-se de que os elementos de navegação sejam visualmente proeminentes. Lembre-se, se o usuário não consegue encontrar algo, então pode não existir.

Pontos de Alinhamento

As páginas da Web parecem mais intimidantes se houver mais pontos de alinhamento, então fique com alguns. Isso é especialmente importante em formulários. Quando dois formulários têm o mesmo número de campos, aquele com mais pontos de alinhamento tem a carga cognitiva mais pesada.

O formulário de checkout do SK-II.com, por exemplo, tem vários pontos de alinhamento. No entanto, o site evita uma carga cognitiva desnecessária desativando outras seções da página até que o usuário conclua a primeira etapa. Caso contrário, a página pareceria muito complicada:

Consistência e Organização

Mover as mesmas funções para lugares diferentes faz o usuário parar e pensar. Fornecer funções altamente usadas em áreas obscuras e difíceis de ver faz o usuário parar e pensar. Você pode seguir as convenções da web e evitar as armadilhas.

Exemplo de carga cognitiva desnecessária

Celine.com, por exemplo, pede que seus visitantes aprendam seu sistema desviando muito das convenções da web:

• O nome/logotipo da empresa, que normalmente é encontrado no canto superior esquerdo da página (ou no meio do topo da página para sites de moda), fica no canto inferior esquerdo.
• Os itens de navegação estão localizados na parte inferior. Esta colocação não convencional dos elementos de navegação também causa um problema de fundo falso. Não é imediatamente óbvio que os usuários podem rolar para baixo para ver mais conteúdo abaixo da dobra.

Comentários

Quando os usuários interagem com algo na página, ou quando ocorre um erro, a página deve fornecer mecanismos para mostrar o que ocorreu.

Certifique-se de que o feedback seja visualmente proeminente, para que o usuário não precise procurá-lo e se perguntar se o site reconheceu a ação que acabou de realizar.

A página de detalhes do produto do AntonsFloristNJ.com, por exemplo, não fornece nenhum feedback ao usuário se ele digitar um CEP que a empresa não atende. Após o usuário clicar em “Adicionar ao carrinho”, a mensagem “Erro: CEP desconhecido” aparece acima das migalhas de pão. Isso certamente passará despercebido pelos usuários, pois a mensagem está longe do bloco de ação – parece não ter relação com a ação que o usuário acabou de realizar. A mensagem de erro também se parece mais com scripts internos do que com conteúdo voltado para o público:

Ao projetar suas páginas, lembre-se do título do livro de Steve Krug: Don't Make Me Think. Torne suas páginas intuitivas e usáveis, para que você exija o mínimo de esforço mental dos usuários.

Carga de memória

A carga de memória é a tensão causada por ter que lembrar de coisas para fazer algo funcionar.

Nos sites, muito disso pode ser evitado disponibilizando informações quando necessário.

Quando os visitantes precisam seguir as instruções para preencher um formulário, essas instruções não devem estar em uma página diferente – elas devem estar no próprio formulário. Quando você tem um assistente com um conjunto de etapas, essas etapas devem ser exibidas conforme o usuário as executa – o visitante não deve memorizar etapas de outra página.

Se você tiver os recursos técnicos para fazer o preenchimento automático de formulários funcionar, poderá economizar um pouco de carga de memória para os usuários. Ajude-os com campos de formulário quando eles começarem a digitar informações que tendem a usar em vários sites. Apenas tome cuidado para testar isso, para que você não ultrapasse um limite de fator assustador ao tentar conservar a carga de memória.

Exemplo de conservação de carga de memória

Mostrar o código promocional disponível na página onde o usuário deve digitá-lo é uma forma de conservar a carga de memória online. Kiehls.com, por exemplo, mantém o banner do código promocional da página inicial para o carrinho de compras. Dessa forma, o usuário não precisa memorizar o código ou voltar para a página inicial quando chegar à página do carrinho de compras:

O objetivo é sempre minimizar o trabalho que o usuário tem que fazer em seu site. Isso inclui não pedir que eles se lembrem de muitas coisas para trabalhar com sua interface.

Evite o Sistema 2 sempre que possível

Lembre-se: o sistema 2 é onde suas conversões vão morrer.

Se você fizer os visitantes pensarem demais para usar seu site, os usuários sairão e trabalharão com sites mais fáceis de usar.

Muitas vezes, apenas reduzir o número de elementos em suas páginas pode fazer maravilhas para os quatro tipos de carga de visitantes. Experimente e siga estas dicas:

• Reduza o texto na página o máximo possível.
• Livre-se de distrações visuais, especialmente movimento.
• Minimize o número de opções disponíveis. Apresente as 3 ou 4 opções simples que um visitante pode processar facilmente.
• Siga as convenções da web e evite fazer com que os usuários conheçam seu sistema.

Para ir além e garantir que a carga de visitantes seja a menor possível, você precisa avaliar suas páginas mais usadas em termos de carga visual, motora, de memória e cognitiva. Você não pode tornar a experiência sem atrito para todos os quatro tipos de carga, mas pode tomar decisões muito deliberadas quando entender as vantagens e desvantagens envolvidas.