5 erros de navegação na web que estão custando conversões

Se os visitantes não conseguirem encontrá-lo, então ele não existe.

Os profissionais de marketing da Web geralmente ficam muito presos à estética dos sites da Web e se esquecem de tornar mais fácil para os usuários encontrar o que precisam.

Claro, uma aparência moderna e profissional é essencial para ganhar a confiança dos visitantes da web. No entanto, o web design deve apoiar as tarefas do usuário e não prejudicar a usabilidade e a capacidade de descoberta.

Aqui estão alguns erros comuns que atrapalham a navegação eficiente dos usuários em seu site:

1. Navegação Oculta em Telas Grandes

Em dispositivos móveis em que você tem espaço de tela pequena para trabalhar, não há problema em ocultar a navegação em um menu (normalmente o ícone de hambúrguer). Isso não faz sentido, no entanto, na área de trabalho, onde há muito espaço para mostrar as opções de navegação.

Exemplo: WhySoCool.com

Um estudo realizado pela Nielsen Norman Group e WhatUsersDo mostrou que, em comparação com a navegação visível ou parcialmente oculta, a navegação oculta é…

• usado menos e usado mais tarde na tarefa (se a pessoa usar) no celular e no desktop
• mais provável de ser usado no celular do que no desktop – Isso pode ser porque …
  • em telas menores, o ícone do menu é mais perceptível
  • navegação oculta é a norma no celular
  • os tempos de carregamento são mais lentos em dispositivos móveis e as pessoas preferem usar o menu do que rolar para encontrar o que precisam (já que normalmente há menos conteúdo acima da dobra)

O estudo também revelou que a experiência do usuário é afetada negativamente pela navegação oculta em dispositivos móveis e desktops:

• A capacidade de descoberta de conteúdo é menor
• As classificações de dificuldade são mais altas
• O tempo na tarefa é maior

Portanto, exponha as opções de navegação de nível superior na área de trabalho. Ocultá-los em um menu não ajuda seus usuários nem as conversões do seu site, apesar da popularidade do “mobile first”.

2. Fundo Falso

Quando não é imediatamente óbvio para os usuários que há mais conteúdo além de um determinado ponto , você tem um problema de 'fundo falso'.

Aqui estão alguns culpados para as pessoas acreditarem que chegaram ao fim do conteúdo e, portanto, têm dificuldade em localizar o que precisam:

Imagens ou gráficos grandes que preenchem a tela inteira

As fotos de heróis são famosas por monopolizar imóveis acima da dobra e derrubar outros elementos importantes, como símbolos de confiança e pontos de entrada claros para diferentes segmentos de clientes. Além disso, quando a imagem ocupa a tela inteira, a parte inferior da imagem também pode ser confundida com a parte inferior da página.

Exemplo: NhoraOsorio.com

Se você realmente precisa ter uma tela cheia de imagens ou gráficos, pelo menos tenha uma indicação direcional explícita .

WeAreMinimal.com, por exemplo, usa deliberadamente o movimento, na forma de uma flecha saltitante, para chamar a atenção do usuário e sinalizar que há mais abaixo da dobra.

Exemplo: WeAreMinimal.com

Linhas horizontais

Em geral, as linhas e regras horizontais são interpretadas pelo cérebro como sinais de parada.

Tenha cuidado ao colocar linhas horizontais que abrangem toda a largura da página entre as seções de conteúdo. Eles podem desencorajar os usuários de explorar mais. Os usuários podem não perceber que o separador sinaliza o final de uma seção e não a página.

Exemplo: StudioRakelShop.com

Anúncios que interrompem o fluxo de conteúdo

Anúncios grandes, aqueles que dificultam a visualização do que está abaixo, também podem ser mal interpretados como o fim do conteúdo.

Cosmopolitan.com parece reconhecer esse problema e tenta aliviá-lo rotulando o anúncio e direcionando os usuários para 'Continue lendo abaixo'.

Exemplo: Cosmopolitan.com

Uso excessivo de espaço negativo

O espaço negativo ajuda a criar ênfase visual e hierarquia na página. Muito espaço negativo entre os elementos de conteúdo, no entanto, pode significar 'não há mais nada para ver'.

O problema é pior em telas pequenas, onde a lacuna entre os elementos se torna mais pronunciada, tornando o conteúdo mais abaixo na página ainda menos detectável.

Exemplo: ShopGraceGow.com

3. Falta de Significantes de Acessibilidade

Uma razão pela qual os usuários não conseguem encontrar o que devem fazer em seguida é a falta de significantes de affordance. A falta de dicas visuais para sinalizar com quais elementos podem interagir resulta em incerteza de cliques – os usuários passam o mouse sobre diferentes itens na página para identificar qual deles é clicável.

No corpo da página inicial do BHLDN.com, por exemplo, os itens clicáveis ​​são imperceptíveis. A página usa setas para sinalizar que você pode interagir com os elementos, mas os elementos clicáveis ​​não se assemelham a elementos clicáveis, como botões.

Em vez disso, você obtém uma mistura aleatória de rótulos que podem ser clicados, rótulos que não podem ser clicados e nenhuma boa maneira de diferenciar entre os dois.

Exemplo: BHLDN.com

4. Etiquetas de navegação vagas

Os rótulos são os sinais de trânsito do seu site – se forem confusos, os usuários se perderão.

Certifique-se de que seus rótulos sejam claros e precisos. Eles devem ser capazes de dizer aos usuários o que acontece quando eles clicam em um elemento de navegação.

Uma versão mais antiga da página inicial do Teforia.com, por exemplo, tinha 'Chá Transformado' como um call-to-action (CTA). Esse é um rótulo sem conteúdo – ele realmente não comunica nada sobre o que os usuários podem esperar se clicarem nele.

O GorillaMovers.com, por outro lado, tem opções de navegação de nível superior pouco claras. Há 'Comprar', mas não está claro o que é possível comprar; e há 'Candidate-se conosco', que pode significar 'solicite-se conosco para obter uma cotação' ou 'solicite-se conosco para conseguir um emprego'.

Exemplo: GorillaMovers.com

5. Desvio das Convenções da Web

O cérebro humano depende muito de atalhos. Se o seu site não corresponder ao modelo mental dos usuários de como um site deve funcionar, você tornará a navegação mais problemática do que vale a pena para muitos visitantes.

Aqui estão alguns exemplos de padrões de design que os usuários foram condicionados a esperar em páginas da web:

Colocação do logotipo

Quando os usuários da Web acessam uma página, eles normalmente são orientados sobre onde estão na Web, procurando no canto superior esquerdo da página o logotipo da empresa. O logotipo também é tradicionalmente um elemento clicável que permite aos usuários navegar facilmente para a página inicial.

Portanto, tenha cuidado ao posicionar o logotipo no centro ou no canto superior direito da página. Isso pode funcionar em telas menores, onde a distância entre o canto esquerdo e o canto direito é insignificante. Em telas maiores, no entanto, pode afetar negativamente a eficiência dos usuários na navegação para a página inicial.

Cor do hiperlink do corpo

As pessoas passam a maior parte do tempo em outros sites e, em outros sites, os hiperlinks no corpo da página geralmente são identificados por cores para que não se misturem.

Você pode usar qualquer cor, desde que apareça e não seja usada em outro texto da página. Dessa forma, os usuários podem identificar imediatamente os hiperlinks. Dito isso, sua melhor aposta é a cor azul, pois os usuários da web foram condicionados a associar essa cor a hiperlinks.

Juntando tudo

Acertar a navegação pode ser complicado quando você tem um mundo com vários dispositivos e vários canais. Dito isto, apenas aprender os fundamentos pode levá-lo muito longe.

Se você se abster de criar fundos falsos, seguir as convenções da web, evitar ocultar a barra de navegação em desktops e laptops, mostrar significantes que informam aos visitantes quais itens são clicáveis ​​e rotular suas opções de navegação claramente, você fará com que menos visitantes saiam sem fazer nada .