Os editores de jornais perceberam isto muito antes de a web existir. A notícia que vale a pena ler vai acima da dobra física. Tudo o que fica abaixo compete contra a decisão de virar a página. Num website, aplica-se o mesmo princípio à primeira área visível que um visitante vê antes de deslocar a página.
Above the fold refere-se à parte de uma página web que fica visível na janela do navegador quando a página carrega pela primeira vez, antes de o visitante deslocar. É a única secção da página que todos os visitantes veem. Tudo o que está abaixo tem de merecer a deslocação. O termo vem da imprensa: um jornal dobrado ao meio numa banca mostra só a metade de cima da primeira página. Essa metade tinha de conquistar atenção. A área above the fold de um website funciona da mesma maneira.
O que fica above the fold varia consoante o dispositivo, o tamanho do ecrã e o navegador de cada visitante. Um monitor grande de computador mostra muito mais conteúdo above the fold do que um telemóvel na vertical. Desenhar para a dobra significa pensar em todos eles, não só na versão que vês no teu ecrã.
Porque importa o conteúdo above the fold?
A investigação sobre comportamento de leitura mostra, de forma consistente, que os visitantes passam mais tempo com o conteúdo perto do topo de uma página. Quanto mais em baixo está o conteúdo, menos visitantes lá chegam. Não é uma falha de atenção. É uma resposta racional a um tempo limitado. Os visitantes fazem um juízo rápido sobre se a página vale a pena ser lida, e esse juízo acontece na primeira secção visível.
Above the fold é onde respondes à primeira pergunta do visitante: estou no sítio certo? Se o título, a imagem e as primeiras linhas de texto deixarem a resposta clara, os visitantes deslocam. Se ficarem confusos ou inseguros, a maioria nem dá hipótese ao resto da página.
O que deve ir above the fold?
A área above the fold tem pouco espaço e muito em jogo. Cada elemento que aparece lá deve merecer a sua posição, servindo o visitante ou avançando o objetivo da página.
Um título claro que diga do que trata a página ou o que o visitante ganha com ela. Uma frase de apoio ou subtítulo que acrescente contexto ou especificidade. Uma imagem que reforce a mensagem, em vez de apenas decorar. Um apelo à ação que dê ao visitante um próximo passo claro, se já estiver convencido.
A navegação pertence ao above the fold. Os visitantes esperam encontrar no topo da página uma forma de explorar o resto do site, e um menu escondido ou difícil de encontrar cria atrito logo de início. O artigo sobre o que é a navegação de um website explica como desenhar menus que funcionam bem em todos os dispositivos.
O que não pertence ao above the fold é tudo o que ocupa espaço sem contribuir para a compreensão ou a decisão do visitante. Imagens decorativas grandes sem valor informativo, faixas rotativas que atrasam o carregamento ou blocos de texto introdutório que o visitante tem de percorrer até chegar ao ponto desperdiçam, todos, o espaço mais valioso da página.
Como difere o above the fold no telemóvel?
No telemóvel, a área above the fold é bastante mais pequena do que no computador. Um ecrã de telemóvel na vertical mostra cerca de 600 a 800 píxeis de altura. Um monitor de computador pode mostrar 900 a 1200 píxeis. O mesmo design pode revelar duas ou três secções above the fold no computador e mostrar apenas um título e uma imagem no telemóvel.
A consequência prática é que os visitantes de telemóvel decidem se ficam ou se deslocam com muito menos informação do que os visitantes de computador veem à primeira vista. O que mais importa tem de caber numa janela mais pequena. As secções hero com imagens de fundo grandes e pouco texto são um problema comum: ficam impressionantes no computador, mas ocupam o ecrã inteiro do telemóvel com muito pouco conteúdo antes de o visitante ter de deslocar.
Testar o above the fold num telemóvel real é importante, porque as pré-visualizações do navegador e as simulações de computador não representam com exatidão o que os visitantes de telemóvel veem. Para uma lista completa de pontos a ver no telemóvel, o artigo sobre como tornar um website adaptado ao telemóvel explica o que verificar antes de ires online.
O above the fold afeta a velocidade da página?
Diretamente. A área above the fold é a primeira coisa que o navegador apresenta, por isso qualquer recurso que atrase a sua apresentação prejudica o tempo de carregamento percebido, mesmo que o resto da página carregue depressa.
Imagens hero grandes, tipos de letra web que precisam de carregar antes de o texto aparecer e scripts que correm antes de a página ser apresentada empurram o conteúdo above the fold para baixo. Do ponto de vista do visitante, a página carrega devagar mesmo que o tempo técnico de carregamento seja razoável. Uma área above the fold em branco ou só em parte carregada, enquanto o resto da página se atualiza, é uma das causas mais comuns de taxas de saída altas em páginas que, de resto, estão bem desenhadas.
Manter a imagem hero otimizada, dar prioridade ao carregamento dos recursos above the fold e adiar scripts não essenciais são as correções mais eficazes. O artigo sobre o que é a velocidade de um website explica a parte técnica do desempenho de carregamento e o que mais o afeta.
O above the fold afeta o SEO?
O conteúdo above the fold é um sinal que os motores de pesquisa usam para avaliar a qualidade da página. As páginas que carregam muita publicidade ou conteúdo de baixa qualidade above the fold, empurrando o conteúdo principal para baixo, são penalizadas. Houve uma atualização específica do algoritmo dirigida a sites que enterravam conteúdo útil abaixo de grandes blocos de anúncios.
Para além dessa penalização específica, o above the fold afeta o SEO indiretamente através de sinais de comportamento. Os visitantes que chegam a uma página e saem logo, porque a área above the fold não lhes deu uma razão para ficar, geram taxas de saída altas e pouco tempo de permanência. Com o tempo, estes sinais indicam aos motores de pesquisa que a página não serviu a intenção por trás da pesquisa.
Um bom design above the fold também apoia uma melhor estrutura de títulos. Um título claro visível above the fold, apoiado por uma estrutura lógica da página mais abaixo, ajuda visitantes e motores de pesquisa a perceber a página depressa. O artigo sobre o que é o web design explica como decisões de layout, como a hierarquia de títulos, moldam a experiência do visitante. Para a imagem completa sobre classificações nas pesquisas, o artigo sobre o que é o SEO cobre os fatores técnicos e de conteúdo que mais importam.
Como a WEMASY trata do design above the fold
Os modelos do criador de websites da WEMASY são feitos a pensar na área above the fold. As secções hero estão otimizadas para carregar depressa, e o editor visual deixa-te pré-visualizar como cada secção aparece em diferentes tamanhos de ecrã antes de publicares. A pré-visualização de telemóvel mostra exatamente o que os visitantes veem num telemóvel antes de deslocarem, para ajustares o conteúdo e o layout sem adivinhar.
Vê o que está incluído no criador de websites da WEMASY ou consulta os planos na página de preços.
Perguntas frequentes
O above the fold ainda é relevante com o comportamento de deslocação de hoje?
Sim. Os visitantes deslocam com mais facilidade do que há uma década, mas a área above the fold continua a ter um peso desproporcionado. Os visitantes passam mais tempo com o conteúdo perto do topo de uma página, independentemente de quanto deslocam. A área above the fold é onde acontece a decisão de ficar ou sair. Torná-la clara, rápida e convincente é tão importante agora como sempre foi. Com o criador de websites da WEMASY, podes configurar isto diretamente no teu website.
Que altura deve ter uma secção hero?
Uma secção hero deve revelar conteúdo suficiente above the fold para comunicar o objetivo da página, sem consumir toda a área visível. No computador, um hero que ocupa a altura total do ecrã só com um título e uma imagem pode ser impressionante, mas também atrasa o acesso do visitante ao conteúdo real. Uma abordagem melhor é um hero alto o suficiente para causar uma boa primeira impressão, mas que ainda mostre uma amostra do conteúdo abaixo, a sinalizar aos visitantes que há mais para ver se deslocarem.
O que é um apelo à ação above the fold?
Um apelo à ação above the fold é um botão ou ligação colocado na primeira secção visível de uma página, que dá aos visitantes já convencidos uma forma de agir de imediato, sem deslocar. Exemplos comuns são "Começar", "Marcar uma chamada" ou "Ver preços". Nem todos os visitantes estão prontos a agir quando chegam ao above the fold, e é para isso que existe o resto da página, mas ter uma ação clara disponível cedo reduz o atrito para quem está.
Todas as páginas precisam de uma boa secção above the fold?
Sim, mas o que significa "boa" varia consoante o tipo de página. O above the fold de uma página inicial tem de estabelecer quem és e o que ofereces. O above the fold de um artigo de blogue tem de confirmar que o leitor está no artigo certo e dar-lhe uma razão para continuar a ler. O above the fold de uma página de produto tem de mostrar o produto com clareza e tornar o preço acessível. O princípio é o mesmo em todos os tipos de página: a primeira área visível deve responder à pergunta mais imediata do visitante.
Como testo o que aparece above the fold em diferentes dispositivos?
A forma mais exata é ver as tuas páginas em dispositivos reais. Usa um monitor de computador, um tablet e um telemóvel, na vertical e na horizontal. As ferramentas de programador do navegador têm um modo de simulação de dispositivos que dá uma aproximação razoável, mas não conta com as barras de ferramentas do navegador, as barras de endereço e as áreas de notificações que reduzem a altura visível do ecrã em telemóveis reais. O que parece bem numa pré-visualização do navegador tem muitas vezes um corte da dobra bem diferente num dispositivo real.