Acima da dobra ainda importa?

A dobra mudou, a pergunta continua a mesma

Hoje cada tela tem a sua própria dobra. Um notebook de 1440 x 900 mostra cerca de 750 pixels da sua página depois que a barra do navegador pega a parte dela. Um iPhone no Safari mostra uns 650, e menos ainda quando a barra de endereço fica embaixo. Cada visitante vê uma fatia diferente do que está acima da dobra. O que ele quer dessa fatia continua igual. Estou no lugar certo, e vale a pena rolar mais?

As pessoas rolam, e decidem rápido

Quem usa celular desde 2010 rola sem pensar. O dedo se mexe antes de o cérebro terminar a frase. Então aquele medo antigo de que ninguém lê abaixo da dobra ficou velho. Mesmo assim, as pessoas saem rápido. Alguém clica no seu anúncio, lê o título, não acha o que o anúncio prometeu e some em segundos. Rolar não custa nada para o leitor. A atenção dele é a parte escassa.

Meça a sua dobra antes de desenhar

Abra a sua página nos três aparelhos que os seus dados realmente mostram. Para a maioria dos meus clientes isso significa um iPhone, um MacBook de 13 polegadas e um monitor externo 1080p. Tire um print do topo da página em cada um, sem rolar. O celular normalmente mostra um título e meio botão. O monitor grande normalmente mostra um título flutuando em 400 pixels de espaço vazio. Desenhe para os dois, separadamente.

O que costuma desperdiçar o espaço

Três coisas comem a primeira tela e não devolvem nada. Carrosséis que giram sozinhos perdem a pessoa no primeiro slide, então o segundo e o terceiro nunca são vistos. Títulos abstratos como “Crescimento, reimaginado” caberiam em qualquer site de qualquer categoria. Imagens de topo gigantes empurram o botão para fora da tela do celular. Confira essa última num aparelho de verdade, porque o canvas do Framer é generoso de um jeito que o celular não é.

O que merece lugar acima da dobra

Cinco coisas, mais ou menos nesta ordem de prioridade. O nome do produto e a categoria a que ele pertence. O resultado que o comprador leva, escrito com as palavras dele. Uma prova, como uma fileira de logos ou um número que você consegue defender. Um botão principal com um verbo. E uma imagem do produto real ou do trabalho real, em vez de uma foto de banco de imagens com um time sorrindo.

Dê para onde a rolagem ir

A borda de baixo da primeira tela deve parecer cortada de propósito. Comece uma seção logo acima da linha da dobra. Mostre meia fileira de logos. Deixe um título espiar de baixo. Uma borda dura e um espaço largo bem nessa linha dizem ao olho que a página acabou. Em páginas longas eu deixo a seção de topo com cerca de 80 por cento da altura da tela, então sempre aparece um pedacinho da seção seguinte.

Como conferir a sua em dez minutos

Mostre o topo da sua página para alguém de fora da empresa por cinco segundos. Esconda e pergunte o que a empresa vende e para quem. Se a pessoa não souber responder, a dobra falhou, e nenhuma animação vai salvar. Depois do lançamento, olhe um mapa de rolagem. Se boa parte das sessões nunca chega à segunda seção, o problema está dentro daqueles primeiros 650 pixels.