we are developers
Design & UX
Tem 4 artigos publicados com 1600 visualizações desde 2013
É analista de SEO na Distilled.
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.
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).
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.
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:
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.
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.
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.
***
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
De 0 a 10, o quanto você recomendaria este artigo para um amigo?
É analista de SEO na Distilled.
Fique em dia com as novidades do iMasters! Assine nossa newsletter e receba conteúdos especiais curados por nossa equipe