Se voltarmos aos primeiros dias de publicação, obtemos o termo “acima da dobra” como um termo usado para conteúdo que aparecia na metade superior da primeira página de um jornal. O conteúdo acima da dobra aparecia aos leitores como o mais visível, com manchetes cativantes e imagens vívidas comumente usadas para atrair a atenção dos leitores, na esperança de que ao passar pela banca de jornal os convencesse a comprar um jornal.
Agora, avance rapidamente para a transição da abertura para o digital, já que essas mesmas editoras mudaram seus negócios do impresso para o online. Como o web design tem evoluído desde o início dos anos 90, o termo continuou a manter-se. Então o que significa acima da dobra para a sua página inicial? E isso ainda importa em 2019?
Por que é que acima da dobra é importante para o meu site?
Na era do marketing digital, a dobra já não se refere a uma dobra real num jornal, em vez disso, refere-se ao conteúdo que é carregado primeiro quando se visita um site, captando a sua atenção e atraindo-o.
No mundo do web design, onde você está preocupado com o layout e colocação do conteúdo, porque o conteúdo que aparece acima da dobra é o que primeiro é visível quando o visitante do site carrega a página. Esse conteúdo é o principal imóvel que recebe a maior parte da atenção dos visitantes do seu site e a experiência do usuário deve refletir isso. Jakob Nielsen estima que, “…os utilizadores da Web passam 80% do seu tempo a olhar para as informações acima da dobra da página. Embora os usuários estejam rolando mais hoje, eles ainda alocam apenas 20% de sua atenção abaixo da dobra”
Primeiro você tem que se perguntar, qual é o conteúdo mais importante para me ajudar a atingir meus objetivos de negócios?
Após ter respondido a essa pergunta, você sabe o que colocar nessa área de alta visibilidade. O conteúdo deve prender imediatamente a atenção do usuário e apresentá-lo com o conteúdo que ele está procurando para que ele não salte e visite outro site.
Dicas rápidas para aumentar as taxas de conversão
- Hero Image: Não fique muito etéreo aqui. Como são os seus clientes felizes? O que eles estão experimentando? Mostre uma imagem que evoca uma aspiração positiva.
- Cópia de Cabeçalho: Não perca a clareza por ser esperto. Se você confundir, você perde. Mantenha-se fiel a uma mensagem simples que exibe exatamente o que você faz ou empatiza com o desafio central que eles estão enfrentando.
- Chamada para a ação (CTA): A sua CTA primária deve ser óbvia e colocada no canto superior direito da navegação E na secção do herói.
- Tagline: Emparelhe a cópia de cabeçalho clara com uma ou duas frases que posiciona a sua marca para ajudar a resolver o problema do seu cliente.
- Navigation: Menos é mais. O excelente design do site guia o usuário exatamente para onde você quer que ele vá. Demasiadas opções podem resultar em cansaço de decisão.
- Load Speed: O tempo de carregamento da sua página inicial pode estar a fazer com que os visitantes saltem!
Colocar anúncios acima da dobra melhora a sua visibilidade e gera mais receitas de anúncios do que os que são colocados em locais menos visíveis.
Como Mede “A Dobra” no Web Design?
Em suma, é impossível definir exactamente onde é colocada a dobra no seu website. A localização exacta difere devido à variedade de tamanhos de ecrã (desktop e laptop), resoluções de ecrã, plugins de browser e tamanhos de vários telemóveis e tablets.
Como regra geral, a maioria dos web designers concorda que a linha de dobra tem cerca de 1000 pixels de largura e 600 pixels de altura. Esta é a melhor estimativa da combinação monitor/browser mais comum de 1024×768 pixels, com a janela do navegador maximizada e sem barras de ferramentas instaladas no topo empurrando o conteúdo para baixo.
Se você estiver curioso sobre como aprender mais, confira o programa de análise do seu site (se você não tiver um, o Google Analytics é um ótimo lugar para começar), que deve ser capaz de dizer quais são as dimensões de tela mais comuns para seus visitantes. Embora o tamanho de tela comum de 1024×768 seja tradicionalmente o tamanho certo, novas dimensões estão ganhando popularidade, como 320×568 e 360×640, tudo devido ao aumento na visualização móvel de websites.
Visualização e Design Responsivo para Celulares
Nos últimos anos, o uso de dispositivos móveis para navegação na web tem aumentado muito e isso complica ainda mais o conceito de otimização do design da web para acima do conteúdo dobrado.
Um desafio é que os dispositivos móveis oferecem uma grande variedade de tamanhos de tela, bem como, os usuários em dispositivos móveis na maioria das vezes navegam no modo retrato e não no modo paisagem. Novamente impactando o tamanho que um designer tem de exibir conteúdo importante.
Optimizadamente diz: “Com tantas pessoas acessando páginas da web em uma variedade tão grande de dispositivos, as práticas atuais de web design implicam o uso de design responsivo: fazendo uso de layouts flexíveis, imagens e folhas de estilo em cascata. No design responsivo, não há um layout fixo para uma página e o conteúdo reflui para uma tela de qualquer tamanho. Páginas web responsivas reagem ou “respondem” ao ambiente em que são consumidas ou navegadas”
Embora o conteúdo importante ainda precise ser mais alto na página, hoje em dia, as páginas devem ser projetadas para seduzir os usuários a rolar para que eles não percam o conteúdo importante.
A dobra sempre existirá como um conceito, mas é uma regra que pode ser alterada ou modificada, especialmente com o passar do tempo. Como existem tantos dispositivos e resoluções de tela diferentes para navegar em sites, a dobra difere muito de usuário para usuário para ser confiada regularmente. Mas ao certificar-se de colocar apenas os elementos e conteúdos mais importantes acima da dobra, você pode encontrar um bom equilíbrio entre a usabilidade do seu site e servir o conteúdo certo “Above The Fold”.
- 5 Melhores Práticas na página inicial
- 13 Maneiras de aumentar a velocidade do site
Das páginas de destino às páginas iniciais, temos ajudado empresas como a sua a construir experiências de usuários que o drive leva a uma venda. Agende um horário para conversar.