Você deve manter os princípios de design acima da dobra?
O campo de design e desenvolvimento da Web prepara muitos dilemas para você: usar um estilo limpo ou não, incorporar as últimas tendências em seu site ou não, enfatizar a frente visual ou a funcionalidade, tornar o design responsivo ou não, etc.
Não podemos responder a todas essas perguntas de uma só vez; em vez disso, começaremos com um aspecto muito importante: o fold.
O que significa a dobra?
A dobra é um termo usado por proprietários e desenvolvedores de sites para identificar a parte do conteúdo do site que é mostrada sem rolar para baixo. Esta é uma área visível logo quando um usuário entra em um site.
Origem do jornal
De onde vêm as origens? Tudo é simples: a imprensa definiu esse termo muito antes de o web design se tornar um campo tão importante e desenvolvido. Os jornais impressos tinham os artigos mais sensacionais apresentados no topo da página para envolver os leitores a folhear o jornal inteiro.
Variedade de resoluções de tela
O problema da dobra hoje é a resolução. O iPad tem resolução de 1024×768, o iPhone 4 tem resolução de 960×640, meu monitor de 22 polegadas tem resolução de 1920×1080, e ainda hoje o mais comum é 1280×720. Não é mais um tipo de computador que todo mundo tem, mas hoje há uma grande quantidade de designs e tamanhos de monitores de computador, por isso é difícil criar um design geral acima da dobra. De qualquer forma, alguns usuários verão mais, outros menos, então onde está o meio-termo? Suponho que esteja na negação da dobra, porque o termo geral está morto agora.
Os dispositivos móveis estão mudando a dobra
Falamos sobre a resolução da tela apenas algumas linhas acima, mas também vale a pena mencionar que não sabemos quais dispositivos aparecerão amanhã, em um mês ou em alguns anos. Hoje as pessoas usam tablets e smartphones, mas eles estavam fora de nosso conhecimento algumas décadas atrás.
Época de rolagem
Rolagem acima de tudo – é assim que os sites são criados hoje em dia. Era comum navegar em um site acima da dobra e não saber como agir quando os navegadores da web eram inexplorados. Hoje os usuários vivem online, se comunicam, compram, anunciam e fazem negócios na Internet, e sabem tudo sobre ela. Outra coisa é que os usuários não gostam de ler e prestam muita atenção em uma seção do site, então rolam, rolam e rolam de novo. É sua tarefa fazê-los parar neste ou naquele elemento e, como você entende, não se trata da dobra. São apenas alguns segundos quando os usuários olham para a área principal do site, então você não precisa colocar tudo em uma zona de página. Você deve colocar uma proporção certa de conteúdo em toda a página e, assim, dobrará suas chances de ser notado e lido.
Exemplos de como envolver os usuários na rolagem
Depois de decidir tornar seu site ativo em rolagem, você precisa pensar em todas as opções possíveis para fazê-lo funcionar e ser envolvente. Como os usuários entenderão que precisam rolar? Por que eles precisam rolar? O que eles obterão se rolarem?
Trilhas de caminho para rolar – É quando você usa alguns elementos para mostrar o caminho pelo seu site. Aqui eu quero dizer tanto flechas elementares quanto soluções criativas como balão de ar, furtividade, qualquer coisa que você possa imaginar.
Site Javali de Praia com Raquete de Tênis de Mesa
Estúdio Sparks
Layout da coluna – esse recurso pode ajudar muito a intrigar os usuários, especialmente se uma das colunas estiver quebrada pela dobra. Em seguida, os usuários começam a rolar para ler até o final da seção e, sem querer, chegam ao Rodapé e obtêm outra parte das informações que você preparou.
A navegação é a pedra angular de qualquer site e não é surpresa que ela tenha a melhor posição e a funcionalidade mais amigável. A melhor posição é acima da dobra, sem dúvida. Por quê? Porque os usuários podem não querer rolar toda a página inicial, mas eles têm um objetivo concreto e precisam ver uma página específica, como sobre nós, contato, pagamento, portfólio etc. eles vão desistir de tudo e encontrar outro site. Muitos desenvolvedores cometem um erro ao projetar enormes áreas de heróis com imagens ocupando todo o espaço acima da dobra (e a grande área de heróis está na moda atualmente). É melhor colocar a barra de navegação sobre esta imagem na parte superior, em vez de torná-la abaixo da seção e visível somente após um pouco de rolagem.
Design de site com navegação superior
Onde as chamadas à ação são mais eficazes?
A resposta a esta pergunta depende de muitos fatores: que tipo de serviços/produtos você oferece, um cliente pode tomar uma decisão imediatamente ou precisará ler mais antes, você tem uma ou duas frases de chamariz para serem apresentadas no página. Agora, vamos descrever cada ponto um após o outro.
O botão de chamada para ação (CTA) é eficaz acima da dobra, quando você fornece informações exaustivas sobre seu produto no cabeçalho. Pode ser uma apresentação de slides, listas de marcadores com as vantagens do seu produto, quaisquer estatísticas, etc. Assim, o usuário formou uma impressão de sua empresa e pode tomar uma decisão. Nesse caso, os botões acima da dobra funcionarão a seu favor.
Site de uma página com botão CTA acima da dobra
Se você tem uma longa história para contar aos seus clientes e deseja que eles conheçam cada pró e contra do seu produto, você precisa colocar seu CTA abaixo da dobra e, melhor, fazer no rodapé. Assim, quando o cliente tiver certeza de que precisa, verá um push bem na sua frente. Porém, você deve tornar sua história atraente, interessante, envolvente e proposital, caso contrário, você não terá resposta.
Quando você pode usar várias chamadas para ação? Somente quando você os fizer com propósitos diferentes e colocados em diferentes seções de conteúdo. Além disso, é melhor criar vários designs para todos diferenciarem um do outro. Se você colocar o mesmo botão em todos os lugares, isso prejudicará sua presença online e piorará seus resultados finais.
Site com várias chamadas para ação
Como colocar o CTA no meio? Existem alguns truques que você deve saber:
- coloque a chamada para ação em uma barra lateral, de preferência no lado esquerdo, porque geralmente lemos da esquerda para a direita e tudo à esquerda vem primeiro aos olhos:
- tornar o design de chamada para ação perceptível, colori-lo brilhantemente e usar fontes grandes;
- use espaços em branco ao redor de sua frase de chamariz para destacá-la entre outros conteúdos.
O maior erro que você pode cometer é misturar CTA com outros itens de conteúdo. Portanto, nunca coloque em um layout desordenado e bagunçado, com certeza não funcionará.
Informações de contato: Acima ou abaixo da dobra?
Nem todos os usuários gostam de navegar em sites longos e com muito conteúdo, alguns deles encontram esses sites apenas para conseguir contatos da empresa para fazer uma ligação. É por isso que é melhor que os contatos estejam acima da dobra, pode ser uma única linha com número de telefone ou um bloco compacto com informações mais detalhadas. Além disso, não se esqueça de uma página de contatos separada, é uma obrigação para qualquer site.
Acima da dobra ainda é importante: página inicial e destino
O princípio de design acima da dobra não é igual para todas as páginas do site. Embora não seja importante e desnecessário nas páginas de conteúdo, é bastante vital para o design da página inicial e das páginas de destino. Aqui você tem a chance de atrair espectadores por uma bela seção de heróis com imagens ou por uma apresentação de slides. No entanto, mantenha as regras de todos os projetos de ação e navegação que discutimos anteriormente.
Dicas Finais: Elementos para Apresentar Acima da Dobra e Abaixo dela
Esperamos que você não tenha se confundido com o artigo; de qualquer forma, daremos a você os pontos-chave do design acima da dobra brevemente e resumiremos tudo em dicas simples a seguir:
- Destaque seu nome acima da dobra. O logótipo tem um grande impacto na notoriedade da marca e é por isso mesmo que o site é criado – para promover o seu nome/empresa.
- Use a navegação superior. Este é o elemento mais vital de um site de várias páginas, então os princípios da dobra realmente importam aqui.
- Coloque as principais notícias acima da dobra. Deixe os clientes saberem de seus eventos e novos produtos imediatamente, não os deixe adivinhando.
- Botões de mídia social funcionam bem tanto acima quanto abaixo da dobra. Se a página do seu site tiver rolagem longa, não faça uma escolha – basta colocar os botões de compartilhamento social na parte superior e inferior. Os botões de cabeçalho são bons para visitantes que já o conhecem e estavam procurando seu site exatamente para encontrar esses botões de seguir. Botões de rodapé são ótimos, porque se os usuários estiverem interessados em seu conteúdo, eles rolarão para baixo de qualquer maneira.
- Encontre a posição de chamada à ação apropriada para o seu site específico. Cada empresa e provedor de serviços tem um objetivo diferente para ter um site, portanto, as chamadas para ação também são diferentes para eles. Nesse post damos um bom esclarecimento sobre essa questão do design, esperamos que você leia com atenção, volte se não.
- Não coloque tudo acima da dobra. Em outro caso, você obterá um site terrível com layout desordenado, além disso, com design vazio e chato abaixo da dobra.
- Negligencie os princípios acima da dobra, se o seu site for usado principalmente por usuários móveis. As pessoas estão acostumadas a rolar quando navegam em sites por meio de smartphones ou tablets.
- A rolagem está na moda, portanto, dê uma melhor exposição a ela em vez do design acima da dobra, o que não é obrigatório no mundo digital moderno.