Por que above the fold é comportamento, não altura em pixels

O que significa above the fold?

Conteúdo above the fold é tudo que um visitante consegue ver sem rolar, o que faz disso uma propriedade da tela dele e não um número que você escreve num arquivo de design. O termo vem dos jornais broadsheet, que eram dobrados ao meio para exposição na banca, de modo que só a metade de cima da primeira página ficava virada para o comprador. Os editores colocavam ali a matéria que precisava vender o jornal.

A web herdou a ideia porque as telas ainda terminam em algum lugar. Amy Schade, do Nielsen Norman Group, explicou o mecanismo de forma direta em 2015: "What is visible on the page without requiring any action is what encourages us to scroll." A dobra não impede as pessoas. Ela decide se elas se dão ao trabalho.

Por que uma altura fixa em pixels é a forma errada de definir a dobra?

Porque não existe uma dobra única para definir. O argumento de Schade contra um número fixo é direto: "A responsive design may have 2, 3, 4, or more different folds, specific to the devices and screen sizes that the design was optimized for." Qualquer valor que você escolha está certo para uma minoria dos seus visitantes e errado para todo o resto.

A altura disponível para o seu conteúdo se move por razões que nada têm a ver com o seu layout:

• O chrome do navegador. Barras de ferramentas, tiras de abas e barras de favoritos comem quantidades diferentes em cada navegador e sistema.
• A barra de endereço no celular, que recolhe ao rolar, então o viewport fica fisicamente mais alto depois do primeiro deslize do que era antes dele.
• Escala de exibição no nível do sistema e o tamanho de fonte padrão do visitante.
• Nível de zoom, que é diferente de zero com mais frequência do que os designers supõem.
• Orientação do dispositivo, que corta pela metade ou dobra o número em uma rotação.

Trate a dobra como distribuição e não como linha. A pergunta útil não é "onde está a dobra" e sim "o que o percentil 25 dos meus visitantes vê antes de rolar", e isso é respondível a partir dos seus próprios dados em vez do número de um post de blog.

O que a pesquisa diz sobre rolagem above the fold?

O Nielsen Norman Group rodou eyetracking em páginas de notícia, ecommerce, blog, FAQ e enciclopédia, com 120 participantes em telas de 1920 por 1080, reunindo mais de 130.000 fixações oculares. Therese Fessenden publicou os resultados em 15 de abril de 2018. O destaque é que as pessoas de fato rolam, e que a atenção ainda se empilha pesadamente no topo.

Região da página	Parcela do tempo de visualização
Acima da dobra	57%
Duas primeiras telas (até 2160px)	74%
Três primeiras telas	81%
20% do topo da página	mais de 42%
40% do topo da página	mais de 65%

A mudança ao longo do tempo é a parte que vale discutir. No estudo de 2010 do NN/g, feito em monitores de 1024 por 768, 80% do tempo de visualização ficava acima da dobra. Em 2018 eram 57%. Rolar virou normal, então a dobra ficou menos absoluta e mais relativa, mas não deixou de importar: mais de 65% do tempo de visualização acima da dobra se concentrou na metade de cima do viewport, o que significa que a atenção afina dentro da primeira tela, e não só depois dela.

A medição de 2015 de Schade sobre a própria fronteira é a versão mais afiada do efeito. Os 100 pixels logo acima da dobra foram vistos 102% mais que os 100 pixels logo abaixo, e em todos os dados dela a diferença média em como os usuários tratam informação acima e abaixo da dobra foi de 84%. Uma linha de pixel de movimento muda muito pouco; cruzar a fronteira mais ou menos dobra as chances de o conteúdo ser visto.

Above the fold: antes e depois

Estudo de 201080%

Estudo de 201857%

Até onde os leitores realmente descem na página?

Farhad Manjoo publicou os dados de rolagem da Chartbeat para a Slate em 6 de junho de 2013, e os números envelheceram melhor que a maioria das estatísticas da web porque descrevem um comportamento e não uma tecnologia.

Comportamento	Slate	Rede Chartbeat
Chegam e saem sem engajar	38%	não informado
Nunca rolam	cerca de 5%	cerca de 10%
Leitor mediano alcança	cerca de 50% do artigo	cerca de 60%
Passam do pixel 1600	25%	não informado

O enquadramento de Manjoo foi a parte memorável: para cada 161 pessoas que caíam na página, cerca de 61 já tinham ido embora, e das 100 que ficavam, cinco nunca rolariam. A descoberta que ele enterrou é a que deveria mudar comportamento. Existe uma relação muito fraca entre profundidade de rolagem e compartilhamento, então os artigos mais tuitados não são os artigos lidos mais fundo. Quem trata compartilhamentos como prova de que o conteúdo foi consumido está medindo outra coisa.

Duas conclusões saem de colocar os números do NN/g e da Chartbeat lado a lado. A maioria das pessoas rola, então esconder tudo que importa nos primeiros 600 pixels é desnecessário. E a atenção decai de forma acentuada, então a ordem do seu conteúdo importa muito mais do que se um elemento qualquer passa de uma linha imaginária. Se você quer saber onde os seus próprios leitores param em vez de onde os da Slate paravam em 2013, é para isso que existe o rastreamento de profundidade de rolagem.

O que é um piso falso, e por que ele custa mais que uma página alta?

Um piso falso é o modo de falha que a dobra de fato causa. Kim Flaherty chamou isso de ilusão de completude no NN/g em 17 de janeiro de 2016: "The illusion of completeness happens when the visible content on the screen appears to be complete, when in fact more information exists outside of the viewable area."

Em um teste de usabilidade que ela descreve, seis de oito participantes não rolaram a página nenhuma vez, e 75% dos participantes ficaram frustrados depois de informar dados pessoais só para descobrir que o serviço não estava disponível na região deles, porque nunca perceberam que existia mais conteúdo abaixo. A página não era longa demais. Ela parecia terminada na fronteira.

A correção é visual e não estrutural. Deixe algo cruzar a linha. Um título cortado ao meio, uma imagem que continua além da borda, uma fileira de cards em que o quarto está recortado: todos dizem ao olho que a página não acabou. Seções de destaque em viewport inteiro com uma borda horizontal limpa embaixo são a forma mais confiável de fabricar um piso falso.

Como a variedade de viewports deve mudar o que você coloca no topo?

Pare de desenhar para a dobra e comece a desenhar para a primeira tela do seu tráfego real. Três movimentos práticos:

• Meça sua própria distribuição de viewport. window.innerHeight no carregamento, agrupado em faixas e reportado, mostra o formato real. Combine com visualViewport se você se importa com zoom e teclados na tela. Um mapa de calor segmentado por classe de dispositivo mostra a mesma coisa no espaço, o que costuma ser mais fácil de discutir; nosso guia sobre ler um mapa de calor de site cobre como não interpretar demais.
• Use unidades de viewport que conhecem a barra de endereço. O CSS oferece svh, lvh e dvh ao lado de vh justamente porque o viewport no celular muda de tamanho durante a rolagem. Um destaque dimensionado em 100vh transborda no viewport pequeno e deixa uma folga no grande.
• Coloque a promessa above the fold, não a página inteira. A primeira tela tem um trabalho: deixar alguém confirmar que está no lugar certo e ver que existe mais. Todo o resto pode viver abaixo, porque a pesquisa diz que eles vão chegar lá.

Velocidade interage com tudo isso. Conteúdo que está tecnicamente above the fold mas ainda não foi pintado não está acima de nada, e é por isso que o Largest Contentful Paint é pontuado sobre o maior elemento dentro do viewport e não sobre a página inteira. Uma imagem de destaque que chega aos quatro segundos está abaixo da dobra em todo sentido que importa para o visitante. Se você está trabalhando em uma página específica, nosso passo a passo de como analisar uma landing page coloca essas checagens em ordem.

Perguntas frequentes

A dobra ainda importa agora que todo mundo rola?

Sim, mas como peso e não como muro. O NN/g mediu 57% do tempo de visualização acima da dobra em 2018 e uma diferença de 102% entre os 100 pixels logo acima da fronteira e os 100 logo abaixo. As pessoas rolam além dela; elas não dão atenção igual dos dois lados.

Qual é a altura em pixels da dobra?

Não existe uma. Um design responsivo tem tantas dobras quantos tamanhos de tela alvo, e chrome do navegador, zoom, escala de exibição e a barra de endereço recolhível do celular movem a fronteira de novo em cada dispositivo. Meça seus próprios visitantes em vez de adotar um número.

A chamada para ação deve sempre ficar above the fold?

Só se o visitante já tiver informação suficiente para agir. Em uma página que vende algo familiar, um CTA na primeira tela funciona. Em uma página que precisa explicar algo antes, um CTA precoce é ignorado e a posição útil é depois do argumento. Repetir costuma ser melhor que mudar de lugar.

Quanto conteúdo deve ficar na primeira tela?

O suficiente para responder "estou no lugar certo", mais um sinal visível de que a página continua. O NN/g encontrou mais de 65% da atenção acima da dobra na metade de cima do viewport, então a metade de cima da primeira tela faz a maior parte do trabalho independentemente de quanto você coloque lá.

Páginas longas performam pior que páginas curtas?

Não pelo comprimento sozinho. Os dados da Chartbeat mostraram o leitor mediano parando por volta da metade de um artigo, o que penaliza enchimento e não comprimento. Uma página longa com o valor na frente supera uma página curta que parece terminada na dobra.

De onde vem o termo above the fold?

Dos jornais. Broadsheets eram dobrados ao meio para exposição, então só a metade de cima da primeira página ficava visível para quem passava por uma banca, e a manchete mais forte ia ali. A web pegou o termo emprestado quando as telas mostraram ter a mesma propriedade.

Quanto menos atenção o conteúdo abaixo da dobra recebe?

A Nielsen Norman Group descobriu que os 100 pixels logo acima da dobra receberam 102% mais visualizações que os 100 pixels logo abaixo. Em todo o conjunto de dados de Schade, a diferença média de atenção entre o que fica acima e abaixo da dobra foi de 84%. Cruzar essa linha praticamente dobra a chance de um visitante notar algo.

Por que a dobra se move no celular assim que a pessoa começa a rolar a página?

A barra de endereço do navegador móvel recolhe assim que o visitante rola a página, então o viewport fica fisicamente mais alto depois do primeiro gesto do que estava ao carregar. A mesma página tem uma dobra ao abrir e outra diferente um segundo depois, no mesmo celular. É mais um motivo pelo qual um único número em pixels não consegue descrever a dobra.

O que é a ilusão de completude?

É o termo de Kim Flaherty para uma página que parece terminada na borda da tela mesmo havendo mais conteúdo abaixo dela. Em um teste da NN/g que ela descreve, seis de oito participantes nunca rolaram a página, e 75% dos participantes ficaram frustrados depois de inserir dados pessoais e descobrir que o serviço não estava disponível na região deles. A página não tinha terminado, só parecia.

Compartilhamentos nas redes sociais provam que um artigo foi lido?

Segundo os dados da Chartbeat por trás do artigo de Farhad Manjoo na Slate em 2013, não. A relação entre profundidade de rolagem e compartilhamentos foi muito fraca, e os artigos mais compartilhados não foram os mais lidos. O número de compartilhamentos mede algo diferente de quanto o texto foi realmente lido.