Nas aulas anteriores do curso Presença Digital de Zero a Dez, vimos em detalhes o que é arquitetura da informação focada em conversão. Com essas informações em mãos, vamos ver agora como criar uma home page para o seu projeto.
Home page, que muitas vezes é utilizada como sinônimo de site, na verdade é o termo utilizado para designar a página inicial do seu site.
Saber como criar uma home page com maestria é importante porque a página inicial é, quase sempre, a página mais visitada de um site.
Além disso, você só tem 8 segundos para causar uma boa impressão.
Segundo o estudo Trust and mistrust of online health sites, este é o tempo médio que a maioria das pessoas leva para analisar os tipos de layout de um site.
Por conta disso, muita gente comete um grande erro ao tentar descobrir como criar uma home page perfeita.
E que erro é esse?
Querer jogar tudo na página inicial.
Você já deve ter se deparado com esse tipo de design por aí. A página inicial tem tanta coisa, mas tanta coisa, que você não sabe nem para onde olhar.
Para evitar isso, vamos ver nesta aula os 10 elementos que não podem faltar se você quer saber como criar uma home page perfeita. Começando pela sua marca.
1. A sua marca no lugar esperado
Independentemente do modelo de negócio que você selecionou na aula sobre modelos de negócio, sua marca deve ser uma constante para criar o relacionamento com sua persona.
Tradicionalmente, a marca de um site fica posicionada no canto superior esquerdo e contém um link para a página inicial.
Isso serve como uma espécie de âncora. Assim, quando o usuário se sentir perdido, ele sabe que sempre pode clicar ali e voltar para o começo.
O primeiro passo, portanto, para saber como criar uma home page perfeita é posicionar sua marca no lugar ideal. E depois criar um menu de navegação.
2. Menu de navegação simples e objetivo
O segundo passo sobre como criar uma home page perfeita é desenvolver um menu de navegação simples e objetivo.
Resista à tentação de colocar todos os links possíveis e inimagináveis no seu menu de navegação.
Se você fez a tarefa da aula sobre arquitetura da informação com cuidado, já sabe o que colocar ali. Somente o essencial.
Caso você tenha muitas seções no seu site, uma dica é ter, além do menu de navegação principal, espalhados, por exemplo, entre a barra lateral e o rodapé da página.
3. Proporção ideal da área de conteúdo
Dependendo do tipo de layout que você vai escolher, precisará atentar para a proporção entre a área de conteúdo e as chamadas “barras laterais”.
Atualmente, a maior parte dos sites que focam em conteúdo restringem-se a criar uma só barra lateral ou nenhuma.
Em qualquer caso, a linha de leitura não deve ser nem muito curta nem muito longa.
Um estudo do Instituto Brasileiro de Amigabilidade e Usabilidade, por exemplo, sugere que a linha de conteúdo deve ter entre 40 e 60 caracteres.
Esse é um dado importante para saber como criar uma home page com base em estatísticas.
No entanto, esse tipo de cálculo é mais difícil de ser exato com os layouts responsivos.
Como o layout responde ao tamanho da tela do dispositivo que o está acessando, não dá para garantir a quantidade exata. Mas dá para estimar.
4. Chamadas para as páginas internas
Como vimos na aula anterior, para saber como criar uma home page perfeita, você antes tem que saber quais são os objetivos de conversão do seu site.
O que você quer que o visitante faça?
Comprar um produto? Assinar uma newsletter? Clicar em um anúncio? Deixar um comentário?
Na maior parte das vezes, a página inicial contém chamadas para as páginas internas.
Ela apresenta o que há de mais importante no site, de forma reduzida. O visitante que se interessar por algum conteúdo clica e lê mais.
Por isso, lembre-se de redigir chamadas criativas e instigantes para as páginas internas. Assegure-se de que título, resumo e imagem sejam sempre clicáveis, para facilitar a vida do usuário.
Uma página interna que merece atenção especial é a Página Sobre, aquela em que você apresenta a si mesmo ou ao seu projeto, de forma a deixar claro para o visitante o que ele pode encontrar naquele site.
5. Imagens com moderação e otimização
As imagens são um ponto crucial no design de uma boa página inicial. Afinal, como criar uma home page bonita só com textos?
Mas, se por um lado as imagens deixam o site mais atrativo e fácil de navegar, por outro lado podem aumentar imensamente o tempo de carregamento.
Com isso, podem acabar até prejudicando o seu posicionamento em mecanismos de busca, como o Google.
A solução é sempre utilizar imagens de forma moderada e otimizada.
Não existe uma regra de bolso, mas manter a quantidade de imagens em torno de dez a vinte arquivos é um bom referencial.
Mais importante, todas as imagens devem ter exatamente as dimensões que são apresentadas no site.
Um erro muito comum entre iniciantes é subir uma imagem, por exemplo, com 1.000 pixels de largura e apresentá-la, no site, com 100 pixels de largura.
Isso significa que você está, desnecessariamente, utilizando uma imagem dez vezes maior, que vai levar dez vezes mais tempo para carregar.
Além das dimensões corretas, a imagem deve ser exportada em qualidade suficiente para a web. Não adianta deixar a imagem super pesada, com alta resolução, se isso não vai fazer a diferença.
Se você não sabe como otimizar bem uma imagem, basta enviar o arquivo para o site TinyPNG e baixar a versão otimizada.
6. Cadastro de usuários
A probabilidade de uma pessoa cair no seu site é muito pequena. Existem zilhões de páginas na internet, sobre todos os assuntos possíveis e inimagináveis.
De alguma forma, um usuário caiu no seu site em busca de determinada informação.
Para aproveitar isso, você deveria ter, já na sua home page, uma forma de esse usuário se cadastrar para receber informações suas.
Geralmente, essa fidelização é feita por meio de uma página de captura de emails. Mas pode ser também pedindo para a pessoa seguir você em redes sociais. O importante é que seja um meio para você manter contato.
Assim, você converte aquele visitante esporádico em um usuário acostumado a receber informações suas, o que pode gerar um relacionamento duradouro.
Uma boa forma de aumentar essa conversão é oferecendo algo em troca do cadastro, como um ebook ou um vídeo com conteúdo gratuito.
7. Links para suas redes sociais
As redes sociais são uma realidade há muito tempo. Se você quiser criar um relacionamento com seus usuários, elas são uma excelente forma de manter contato.
Assim, crie na sua home page links para os seus perfis ativos nas redes sociais.
Geralmente, esses links são colocados ou na barra lateral (quando existente) ou no rodapé do site.
Lembre-se, no entanto, de colocar apenas os links para as redes nas quais você mantém atividade. Nada pior do que acessar um perfil que está desatualizado há meses.
Outra opção é você utilizar widgets que mostrem diretamente no site a sua atividade recente em uma determinada. Podem ser suas últimas fotos no Instagram, seu último vídeo no YouTube ou seus tweets mais recentes.
Fique atento apenas para o tempo de carregamento, pois como esses widgets vão chamar a informação de outra rede, isso pode acabar deixando o seu site mais lento.
8. Tipografia consistente
Houve um tempo em que a escolha de fontes para um site era muito limitada. Basicamente, você escolhia entre Verdana, Arial ou Helvetica.
Hoje em dia, as opções são muito mais amplas, por conta de sistemas como o Google Fonts ou Adobe Fonts.
Isso é bom por um lado. Mas também pode prejudicar o desempenho do seu site, já que quanto mais fontes ele tiver, mais tempo levará para carregar.
A sugestão aqui é que você escolha uma ou duas fontes e mantenha a tipografia consistente não apenas na home page, mas em todo o site. Ter uma fonte para os títulos e outra para os textos já é mais do que suficiente.
Além disso, a fonte deve ter um bom contraste (letra preta sobre fundo branco é o básico ideal) e um tamanho legível.
Um estudo publicado pelo Quicksprout mostrou que uma fonte tamanho 11 conseguia reter usuários em um blog até 27 segundos a mais do que uma fonte tamanho 8.
Esse mesmo estudo mostrou que 78% dos blogs avaliados utilizavam uma fonte de tamanho 12 a 14 pixels.
No site Pearsonfield, você pode informar a largura da sua área de conteúdo e ele indicará o tamanho de fonte ideal, com base em cálculos matemáticos.
9. Espaços em branco
O espaço em branco é um “não-elemento” que deve estar presente no estudo sobre como fazer uma home page ideal.
Como falamos no início da aula, acumular dezenas de itens na página inicial é um erro clássico.
O oposto disso seria focar apenas nos elementos essenciais e deixar um espaço em branco entre eles, como uma área de respiro.
Isso não tem apenas finalidade estética, mas também serve como elemento isolador de atenção para um ponto ao qual você quer direcionar o olhar do visitante.
10. Caixa de busca no tamanho e no lugar corretos
Colocar um mecanismo de busca interna pode ser bastante útil para sites com muito conteúdo ou para projetos baseados em pesquisa, como um e-commerce.
Por padrão, os usuários estão acostumados a procurar a caixa de busca no canto superior direito dos sites. Garanta que a sua esteja lá ou, ao menos, por perto.
Além disso, tenha a caixa de busca em bom tamanho. Caixas maiores encorajam os usuários a digitarem mais palavras-chave, levando a um resultado mais preciso.
Além disso, há menor número de erros de digitação quando o usuário pode ver tudo o que digitou.
Estudo da Nielsen/Norman Group mostra uma relação entre o número de caracteres digitados e o percentual de todas as consultas em um estudo realizado pela consultoria de Jakob Nielsen.
Em metade das pesquisas, o usuário precisou de várias palavras para expressar o que estava procurando.
Esse estudo também mostra que a média de caracteres em uma caixa de busca na web é de 18 caracteres.
Essa média de 18 caracteres ainda é considerada pequena pela Nielsen/Norman Group, já que com esse tamanho 27% das buscas são mais longas que a largura da caixa.
Com isso, o usuário fica mais propenso a erros. A recomendação deles é que se use uma caixa com 27 a 30 caracteres.
Dica extra: como criar uma home page só com o essencial
A melhor dica para você saber como criar uma home page perfeita, só com o que é essencial para o seu site, é utilizar a ideia do mobile first.
Tradicionalmente, os sites são desenhados em uma tela de computador. Depois, eles têm o design adaptado para caber em uma telinha de celular.
O que a ideia do mobile first prega é fazer o contrário. Desenhar o site, primeiramente, para uma tela de celular.
As vantagens dessa metodologia são muitas. Primeiro, com a tela menor, você provavelmente ficará mais atento para colocar na página inicial apenas o que for essencial.
Por consequência, o seu site provavelmente ficará mais leve, o que facilita o acesse por celular, especialmente os que não estiverem no wi-fi.
Além disso, sites velozes e responsivos são fatores de posicionamento positivos em mecanismos de busca como o Google. E um site mais bem posicionado tende a ter mais acesso. O que gera mais conversão.
Conclusão: como criar uma home page perfeita com os 10 elementos essenciais
Chegamos ao final de mais uma aula do curso Presença Digital de Zero a Dez. Aqui vimos como criar uma home page perfeita para o seu projeto, que contenha os 10 elementos essenciais:
- A sua marca no lugar esperado
- Menu de navegação simples e objetivo
- Proporção ideal da área de conteúdo
- Chamadas para as páginas internas
- Imagens com moderação e otimização
- Cadastro de usuários
- Links para suas redes sociais
- Tipografia consistente
- Espaços em branco
- Caixa de busca no tamanho e no lugar corretos
Claro que você pode desrespeitar algumas regras, de acordo com os objetivos do seu projeto. Apenas saiba o que está fazendo.
Plano de Ação: Como criar uma home page perfeita
Ao final de cada aula do curso, costumo oferecer tarefas específicas para você executar.
A ideia é não ficarmos apenas na teoria. É partirmos para executar, na prática, o seu objetivo de criar presença digital para trabalhar pela internet.
Nesta aula, no entanto, o que você tem a fazer é revisar a sua arquitetura da informação para garantir que a página inicial rascunhada contém todos os 10 elementos essenciais que vimos aqui.
Na próxima aula do curso, falaremos sobre os tipos de layout que existem para você escolher o melhor para o seu site.
