Em Websites “conteúdo acima da dobra” refere-se textos, informações e arquivos visíveis na parte superior da página e que o usuário vê sem rolar, a área acima da dobra também é conhecida como dobra superior da página.
- Como surgiu o conceito acima da dobra?
- Qual a importância da sessão acima da dobra?
- Conteúdo abaixo da dobra raramente é visto pelos usuários?
- Qual conteúdo é mais relevante, acima ou abaixo da dobra?
- Relação conteúdo acima da dobra e Core Web Vitals
- O que deve ter na área de conteúdo acima da borda?
- E o conteúdo abaixo da dobra?
- Dicas para impulsionar conversões
Durante os anos 90 e início dos anos 2000, acreditava-se que colocar todos os elementos importantes de uma página da Web acima da dobra era a melhor prática, nessa época, a rolagem não era tão intuitiva para os usuários.
Com o passar do tempo esse conceito foi considerado irrelevante, atualmente sabe-se que usuários de smartphone ou tablets rolam quase involuntariamente as páginas que acessam.
Como surgiu o conceito acima da dobra?
O conceito de acima da dobra vem do início da impressão dos jornais, que eram impressos em grandes folhas de papel, eram dobrados e empilhados para serem vendidos em bancas de notícias, transeuntes que passavam pela banca viam apenas a parte superior do jornal com os principais destaques.
A indústria jornalística rapidamente descobriu que para conquistar a audiência, eles deveriam apresentar manchetes, conteúdos e imagens que chamassem a atenção na metade superior da página.
Esse princípio básico permaneceu e também é usado em sites e conteúdo digital, obviamente sites não têm uma dobra física como os jornais, no site a primeira área visível antes da rolagem é a área “acima da dobra”, qualquer coisa que não seja visível imediatamente e que requer rolagem, é considerada abaixo da dobra.
Qual a importância da sessão acima da dobra?
É a primeira coisa que um usuário vai ver no seu site. E por isso que ela precisa estimular a navegação, seja ela vertical ou para entrar em outra página, a decisão de continuar ou não vai depender do conteúdo que o usuário vê neste espaço.
Mesmo com o scroll tornando-se natural, a maioria das pessoas só vai descer se for convencida disso. É o que mostra o estudo de Jakob Nielsen, que conclui o seguinte: o primeiro espaço visível capta 80,3% da atenção numa página.
Sendo assim, uma navegação voltada a orientar o usuário nessa área poderá acarretar no aumento da probabilidade de conversão. E isso não quer dizer que devemos ter medo de construir páginas que crescem verticalmente. Na verdade, o que é necessário é estimular com que o usuário desça com os argumentos corretos.
Conteúdo abaixo da dobra raramente é visto pelos usuários?
Na década de 90 foi criado uma teoria de que qualquer coisa colocada abaixo da dobra raramente era vista pelos visitantes do site. Por causa dessa teoria até os anos 2000, aconselhava-se colocar todos os elementos importantes de uma página na seção acima da dobra.
Artigos com muito conteúdo tinham as vezes várias páginas, exigindo que os usuários clicassem em vez de rolar para ler mais. Nessa época, a rolagem não era tão intuitiva para os usuários.
Embora as pessoas não estivessem acostumadas a rolar em meados dos anos noventa, hoje em dia é absolutamente natural rolar e ver conteúdo contínuo, como um artigo ou um tutorial, a rolagem fornece uma usabilidade simplificada e facilita o entendimento do conteúdo.
Qual conteúdo é mais relevante, acima ou abaixo da dobra?
Muitos acreditam que as informações que você exibe no topo da sua página podem impactar na experiência do usuário, taxas de rejeição e SEO.
Veja um exemplo de um site antigo, Microsoft em 1996, que concentrava muita informação na parte web que é visível, tornando a página bastante confusa e sem definir um foco.
Após os anos 2000 a rolagem em Websites tornou-se mais fácil e intuitiva, uma ação comum do usuário em Websites, até porque uma página Web é um documento vertical, mas a mudança de comportamento dos usuários pode ser atribuída em grande parte ao aumento do uso de dispositivos móveis, que segue o modelo de verticalização.
Ao usar um smartphone ou um tablet, os usuários rolam quase involuntariamente as páginas em Websites, tornando o conteúdo acima da dobra quase irrelevante. Como a tela do smartphone é menor os usuários logo rolam a página para ver mais informações abaixo da dobra.
Esse conceito é amplamente utilizado por grandes empresas e redes sociais, como o Facebook, Instagram e até aplicativos como o TikTok. Eles abordam a tendência que o usuário têm de realizar o scroll, e essa é tática é aproveitada, a cada scroll eles tem nova oportunidade para oferecer novo conteúdo de acordo com as análises e métricas para manter você na plataforma.
A maioria dos usuários dá um scroll para ver se há algo mais relevante, e não sai da página imediatamente como se pensava.
Relação conteúdo acima da dobra e Core Web Vitals
A atualização do Core Web Vitals para o algoritmo do Google enfatizou a velocidade de carregamento da página e a experiência do usuário. Uma vez que é a primeira coisa visível ao carregar em seu site, o conteúdo acima da dobra é um fator de métricas do Core Web Vitals (LCP).
LCP pontua quanto tempo leva para todo o conteúdo acima da dobra carregar. Qualquer coisa abaixo de 2,5 segundos é considerada uma boa pontuação do CLP. Otimizar seu conteúdo acima da dobra para carregar em menos de 2,5 segundos é uma ótima maneira de obter uma boa pontuação LCP.
Para evitar tempos de carregamento de página mais longos, tente ajustar o CSS e Javascript que você usa em sua página web. Você pode tentar:
- Implementação de CSS críticos: “Critical CSS” é uma técnica para carregar apenas o CSS necessário do conteúdo acima do dobra, assim renderizar esta área o mais rápido possível.
- Pré-carregando as imagens maiores: As imagens são o elemento acima mais proeminente para o conteúdo. Carregá-los mais rápido auxilia nas velocidades da página. O uso de “link rel=preload” diminuirá significativamente os tempos de LCP.
O que deve ter na área de conteúdo acima da borda?
Você não deve considerar que a área de conteúdo acima da dobra é a área mais importante de seu site, e sim usá-la para para capturar a atenção do usuário para o conteúdo que vem a seguir.
Certifique-se de que qualquer conteúdo que você inclua acima da dobra vá motivar o usuário a ler mais e informar os bots crawl. O conteúdo acima da dobra é a primeira coisa que os usuários veem quando entram na página, então você precisará deixar sua marca. Use etiquetas H1, marcas visuais e uma chamada à ação para engajar seus visitantes.
- Evite sobrecarregar a área acima da borda com conteúdo desnecessário
- Minimize a quantidade de informações para que não fique confuso para o visitante
- Se você tem preocupação com SEO e Web Vitals evite colocar slide, carrossel ou animações
- Use CTAs acima da dobra com moderação e com ação direta (“Agendar”, “Reserve”, etc)
- Uma tag H1 marcante pode motivar o visitante a permanecer na página e ver mais conteúdo.
- Imagens cativantes, vão sinalizar que o conteúdo abaixo poderá ser útil
- Não use animações em quanto a página está carregando
Muito conteúdo pode sobrecarregar o usuário ou diminuir a velocidade da página. Em vez disso, use imagens, código enxuto e linguagem simples para comunicar do que se trata a página.
Com alguns ajustes na velocidade de carregamento desta área, você terá uma grande chance de subir nas buscas do Google!
E o conteúdo abaixo da dobra?
Existem vários estudos que mostram como elementos colocados abaixo da dobra atraem atenção do usuário da mesma forma ou mais em comparação com elementos colocados acima da dobra.
“Posições ligeiramente abaixo da dobra entre 600 e 1000 pixels normalmente têm alta audiência e alto engajamento, 66% da atenção em uma página de mídia normal é gasta abaixo da dobra” — Chartbeat.
“O link mais clicado na página inicial está na parte inferior” — Milissa Tarquini.
Mas para os usuários darem o scroll na página eles precisam de uma razão convincente, e você deve usar a área acima da borda para esse fim, motivar a leitura do conteúdo adicional, dar uma prévia animadora do conteúdo que está abaixo.
Dicas para impulsionar conversões
Abaixo estão algumas dicas para fazer os usuários rolarem e se envolverem mais conteúdo de seu site.
1) Incentivar os usuários a rolar
Considere sua página como uma história. A cada linha de conteúdo e elemento, seus usuários devem ser motivados a visualizar a próxima seção da sua página web, por isso você deve colocar acima da dobra o conteúdo essencial que irá conduzir o usuário.
2) Inclua um elemento que está em ambos os lados da dobra
Usar um elemento de texto, imagem ou vídeo na sessão abaixo vai influenciar as pessoas se conferir o conteúdo a seguir, veja o exemplo abaixo.
3) Ofereça conteúdo de qualidade
Seguir todas as práticas recomendadas de SEO e criação de conteúdo, ter um site rápido e bem elaborado ou ter um design visualmente atraente acima da borda não garante um alto engajamento com os usuários. Em grande parte, a qualidade do seu conteúdo determina até onde os usuários vão navegar pela sua página web.
Em quanto seu conteúdo estiver atrativo para o visitante ele permanecerá na página, concentre seus esforços em elaborar o conteúdo para que fique uma leitura agradável e atrativa, dividir o texto em etapas permitirá que o usuário entenda melhor seu material e permaneça descobrindo mais em seu site.