Hello there!! Você já ouviu as expressões "above the fold" e "below the fold"? Elas são muito usadas quando estamos falando em web design, UX/UI e marketing digital, e vêm de um contexto bem curioso! Então saber o que essas expressões significam, e quando usar cada uma corretamente, é essencial para quem trabalha com sites, landing pages e experiência do usuário em geral.
Ready to learn the difference? Check it out!
Qual é a diferença entre ABOVE THE FOLD e BELOW THE FOLD?
ABOVE THE FOLD
A palavra "fold", em inglês, significa "dobra", então "above the fold" significa literalmente "acima da dobra".
Essa expressão vem dos jornais impressos, que eram dobrados ao meio nas bancas. Tudo o que ficava above the fold (acima da dobra) era o que as pessoas viam primeiro quando estavam andando na rua e passavam na frente de uma banca, ou seja, o título principal, as fotos de destaque e as manchetes.
Claro que o objetivo era fazer com que essa parte que ficava above the fold fizesse a pessoa parar e querer comprar o jornal.
Com o tempo, esse conceito foi levado para o mundo digital, onde "above the fold" se refere à primeira parte de um website que aparece na tela do usuário, sem que ele precise rolar.
Resumindo, "above the fold" é a área visível imediatamente ao abrir um site, ou seja, o lugar ideal para colocar conteúdo importante, como o título principal, um botão relevante ou uma imagem chamativa.
Take a look at some examples:
- The call to action should always be above the fold. (O botão de chamada para ação deve sempre ficar acima da dobra.)
- Users spend most of their time looking at content above the fold. (Os usuários passam a maior parte do tempo olhando o conteúdo acima da dobra.)
- We redesigned the homepage to highlight key elements above the fold. (Refizemos a página inicial para destacar os elementos principais acima da dobra.)
BELOW THE FOLD
Já "below the fold" significa "abaixo da dobra", ou seja, a parte da página que o usuário só vê depois de rolar. Primeiro o usuário vê o conteúdo above the fold e, depois que ele rola a tela, encontra o conteúdo below the fold.
Apesar de essa área receber menos atenção inicial, ela é importante para aprofundar o conteúdo e mostrar alguns detalhes, benefícios, depoimentos e informações complementares que ajudam o usuário a tomar uma decisão.
For example:
- Most users scroll down to see more details below the fold. (A maioria dos usuários rola a página para ver mais detalhes abaixo da dobra.)
- Important information shouldn't be hidden below the fold. (Informações importantes não devem ficar escondidas abaixo da dobra.)
- We placed testimonials below the fold to keep the focus on the product first. (Colocamos os depoimentos abaixo da dobra para manter o foco inicial no produto.)
Enquanto "above the fold" é o espaço para prender a atenção do usuário, "below the fold" é o lugar para desenvolver a mensagem e convencer quem decidiu continuar lendo.
Can you think of examples from websites you use every day? (Você consegue pensar em exemplos de sites que você usa todos os dias?)
Continue estudando com a gente no artigo "Você conhece a sigla UEBA em cibersegurança?". See you next time!