Por muitos anos, usamos o conteúdo acima da dobra de um site como um portal para que os usuários tivessem acesso a praticamente tudo em nossos sites. Teríamos ali uns 600 pixels, mais ou menos, de espaço valioso com todas as seções importantes que queremos que nossos visitantes vejam.

No entanto, a chegada de smartphones e tablets mudou para sempre a forma como as pessoas consomem informação e navegam pela web. Smartphones ensinaram os usuários a rolar a página e a digitar com o método swipe, e isso reinventou o design de páginas. Então, o que tem a dobra? Como isso mudou nesse mundo multitelas?

A área acima da dobra ainda tem uma enorme importância, mas em vez de apenas colocar tudo ali, o medo está na ideia de que os usuários não vão querer rolar a página. Em vez disso, agora nós precisamos aprimorar nosso foco, usando a área da dobra para as ideias principais que vão fazer com que as pessoas queiram ler o restante da página.

História da dobra

O termo “acima da dobra” (do inglês, above the fold) tem origem no mundo dos jornais impressos, que são apresentados geralmente dobrados ao meio, e por isso mostrando apenas a metade superior da página. Os editores usavam esse espaço para reter a atenção do leitor com histórias importantes, manchetes impactantes e um forte trabalho de imagens, de forma a incentivar a compra do jornal.

Em um site, a dobra é a área mostrada para o usuário sem que ele tenha que rolar a página. Tem como base uma tela de 1366×768 pixels de resolução (veremos mais sobre isso daqui a pouco). Veja na imagem abaixo a área destacada em vermelho: geralmente é assim que o conteúdo é apresentado em uma landing page (acima da dobra).

A área acima da dobra ainda é tão valiosa?

No final de 2013, Peep Laja falou durante o evento SearchLove sobre Princípios do Web Design Persuasivo. Ele observou que, apesar de estarmos em 2013 (e agora em 2014), e em um mundo “scroll-oriented”, o conteúdo colocado acima da dobra ainda recebia cerca de 80% da nossa atenção.

Image source

E isso faz com que a área acima da dobra seja muito valiosa para prender a atenção do usuário. A diferença é que hoje os usuários não têm mais a mesma paciência de antes. Isso se deve ao enorme volume de informações a que eles têm acesso, o que faz ganhar essa atenção algo crescentemente competitivo.

Por isso, esse precioso espaço não deve mais ser entupido com um amontoado de coisas e informações. Em vezs disso, deve ter uma forte proposição de valor que explique para o usuário exatamente o que a página pode oferecer.

Com tantos dispositivos, como fazer o design para a área acima da dobra?

Este mundo multitelas em que vivemos mudou totalmente as características dessa área. Com tantos dispositivos diferentes e designs responsivos, a dobra vai aparecer em locais diferentes dependendo de diversos fatores, como resolução da tela, largura da barra de ferramentas do usuário, se a página está com algum zoom etc.

Como criar um design para isso? Não existe uma solução única, mas o que é possível fazer é garantir que o conteúdo mais importante esteja sempre em direção ao topo da página e otimizado para atender à maioria dos usuários.

Para descobrir a resolução de tela mais usada pelos seus usuários, faça o seguinte:

1. Abra o Google Analytics
2. Na aba “audiência”, veja “Tecnologia” e selecione “Navegadores e Sistemas Operacionais” (Browser & OS)
3. Escolha “Resolução de Tela”

Como visualizar o seu site em diferentes resoluções

Para checar onde a dobra fica em mais de uma dimensão de tela, use o “Inspecionar Elemento” no Chrome para verificar a sua própria resolução de tela.

1. Clique com o botão direito em qualquer lugar do seu site, usando o navegador Chrome, e selecione “Inspecionar Elemento”

2. Clique no botão de configuração no canto inferior direito da tela

3. Selecione “Overrides” e marque a caixa “Enable” para habilitar. Marque “Device Metrics” e coloque ali a resolução de tela que você quer visualizar. Ao fechar a janela de override, seu navegador voltará para a resolução padrão.

Criando designs para além da dobra

Ok, então sabemos que a área acima da dobra ainda é extremamente importante para prender a atenção do usuário. E quanto ao restante do nosso lindo conteúdo? Um estudo da Clicktale mostra que, se uma página tem uma barra de rolagem, isso vai ser utilizado por 76% dos usuários em algum momento. 22% farão o scroll até o fim da página. Então, como mostrado pelo expert em Usabilidade Jakob Nielsen, a área acima da dobra ainda prende a maior parte da atenção e as pessoas rolam a página, mas precisamos ter certeza de que estamos fazendo um design que encoraje a rolagem.

Enquanto dispositivos móveis desenvolveram o scroll como um comportamento natural do usuário, temos que garantir que os layouts das nossas páginas sejam feitos de forma a mostrar todo o conteúdo. Então, como a dobra deve ficar? De forma ideal, temos que fazer com que o conteúdo na linha da dobra leve os olhos dos usuários para o restante da página.

Três formas de encorajar o scroll

1. Criar colunas com tamanhos diferentes

Ao colocar o conteúdo em colunas de diferentes larguras e tamanhos, prevenimos o problema de ter um espaço vazio na página, o que faz parecer com que a página acaba ali. Um parágrafo maior ou uma imagem quebrada pela dobra encoraja o usuário a rolar a página para ver mais informações. Esse estilo é comumente usado em sites de notícias como o New York Times e a BBC.

2. Mostrar o caminho com “trilhas”

Usar um caminho tracejado que guie o usuário pela página é uma ótima forma de encorajar o scroll. A dobra disseca o caminho, e o usuário vai segui-lo naturalmente. Um ótimo exemplo disso é o Guia de WordPress do Simply Business.

3. Às vezes você precisa apenas falar!          

Image source

Em alguns momentos, mais do que tentar um auxílio visual para que os usuários façam a rolagem da página, você pode apenas falar com eles que há mais conteúdo a ser visto. Essa é a opção do Put Things Off para mostrar outras características do app mobile.

Pontos-chave

• A dobra é importante. Enquanto o espaço acima dela deve ser usado como um portal de entrada para que o usuário explore as outras seções do site, seu propósito é agora prender a atenção dele e introduzi-lo à sua marca/produto.
• Vivemos em um mundo multitelas e rolar a página é algo habitual. Se estamos fazendo páginas que demandam scroll, temos que encorajar esse comportamento através de dicas visuais e lembrar o usuário que há mais conteúdo após a dobra.
• Continue monitorando o comportamento do usuário, particularmente em relação às resoluções de tela mais comuns, para garantir que o conteúdo principal se mantenha acima da dobra.

***

Este artigo é uma republicação feita com permissão. Moz não tem qualquer afiliação com este site. O original está em http://moz.com/blog/life-above-and-beyond-the-fold