A página inicial não é uma galeria nem um folheto. É um mecanismo de encaminhamento. A sua única função é levar o visitante certo ao produto certo o mais depressa possível. Cada decisão de design na página inicial deve servir esse objetivo.
Este artigo explica como desenhar uma página inicial de loja online que funcione. O que incluir, o que deixar de fora, que erros matam as conversões e como pensar o layout no telemóvel, onde a maioria dos teus compradores está a navegar.
Se queres ter a visão completa das páginas de que a tua loja precisa, começa por que páginas toda a loja online precisa de ter.
Para que serve realmente a página inicial?
A página inicial serve visitantes que ainda não decidiram. Sabem alguma coisa sobre a tua marca, ou encontraram-te através da pesquisa ou das redes sociais, mas ainda não se comprometeram a comprar. A página inicial é o momento em que decidem se vão mais longe.
Tem de responder a três perguntas de imediato. O que vende esta loja? É para alguém como eu? O que devo fazer a seguir? Se alguma destas respostas não for clara, os visitantes saem. Não porque os teus produtos sejam maus, mas porque a página inicial não lhes deu um motivo para ficar.
Como desenhar a secção principal (hero)
A secção hero é a primeira coisa que o visitante vê. Fica visível sem deslocar a página, e carrega a maior parte do peso da primeira impressão.
Um bom hero tem quatro elementos. Um título que nomeia o que vendes em linguagem simples. Uma frase de apoio curta que acrescenta contexto, muitas vezes um benefício ou diferencial principal. Uma imagem que mostra o produto ou o resultado que ele cria. Um único botão de apelo à ação que diz ao visitante exatamente para onde ir.
O título é a peça mais importante. Mantém-no específico. "Malas de couro feitas à mão para o dia a dia" funciona. "Onde o artesanato encontra a função" não funciona. Os compradores percorrem a página depressa. Se o teu título exige interpretação, já os perdeste.
O botão de apelo à ação deve nomear um destino, não um sentimento. "Ver malas" ou "Ver novidades" funciona. "Descobre mais" ou "Explora agora" não funciona. Dá ao visitante uma direção, não uma sugestão.
A imagem do teu hero deve mostrar o produto com clareza. As imagens de estilo de vida funcionam bem quando o produto precisa de contexto para fazer sentido, como roupa ou artigos de casa. As fotografias só do produto funcionam melhor quando a clareza importa mais do que a aspiração, como em ferramentas ou eletrónica. Usa imagens de alta qualidade. Um hero desfocado ou mal iluminado mina tudo o resto.
O que mostrar abaixo do hero
Quando um visitante passa o hero, procura motivos mais específicos para ficar. Esta secção da página inicial deve destacar produtos ou categorias que correspondam ao que os teus compradores mais provavelmente querem.
Não tentes mostrar tudo. Escolhe os teus mais vendidos, os produtos de maior margem ou a categoria em que a maioria dos teus compradores acaba. Três a seis produtos em destaque é um intervalo razoável. Mais do que isso começa a parecer desarrumado e cria paralisia de decisão.
Os blocos de categoria funcionam bem em lojas com uma gama alargada de produtos. Em vez de produtos individuais, mostra as três ou quatro categorias principais, com uma imagem clara e um nome para cada. Deixa os compradores escolher sozinhos a secção certa da loja.
A secção em destaque também deve ser dinâmica. Faz rodar produtos sazonais, artigos em promoção ou novidades. Uma página inicial que nunca muda não dá aos visitantes recorrentes nenhum motivo para percorrer.
Como usar a prova social na página inicial
Os compradores confiam mais noutros compradores do que nas lojas. A prova social na página inicial cria credibilidade antes de o visitante chegar a uma página de produto.
As formas mais eficazes de prova social na página inicial são avaliações curtas de clientes ou classificações por estrelas, um número de clientes ou de encomendas enviadas, menções na imprensa ou logótipos de meios de comunicação e selos de confiança de terceiros, como ícones de pagamento seguro ou marcas de certificação reconhecidas.
Mantém-na concisa. Um ou dois bons testemunhos são mais eficazes do que uma parede de avaliações de cinco estrelas. Um único logótipo de imprensa de um meio reconhecível faz mais do que uma lista de dez nomes desconhecidos. Escolhe a prova que vai significar mais para o comprador que está mais cético em comprar a ti pela primeira vez.
Deves incluir uma secção com a história da marca?
Uma secção curta com a história da marca na página inicial é opcional, mas ajuda em certos contextos. Funciona melhor quando a história do fundador faz parte do motivo pelo qual um comprador escolheria esta marca em vez de um concorrente maior. Artigos feitos à mão, abastecimento ético, marcas orientadas para a comunidade e produtos liderados pelo fundador beneficiam todos de um breve momento humano na página inicial.
Se incluíres uma, mantém-na curta. Duas ou três frases e uma ligação para a página Sobre nós completa chegam. Não a coloques acima da dobra nem acima dos produtos em destaque. A história acrescenta calor, mas são os produtos que levam à decisão.
Em lojas onde o produto se sustenta por si, salta a secção da história. Uma página que vende artigos comuns não precisa de uma história de origem. Usa esse espaço para dar mais destaque aos produtos.
O que a página inicial não precisa de ter
A desarrumação na página inicial é tão prejudicial como uma secção em falta. Cada elemento que não está a cumprir uma função está a tirar atenção a algo que está.
Os erros comuns na página inicial incluem demasiados apelos à ação a competir ao mesmo nível, vídeos ou animações de reprodução automática que abrandam a página, grandes blocos de texto que ninguém lê, um menu de navegação com mais de seis ou sete itens e popups que aparecem antes de o visitante ter tido tempo de ver o que quer que seja.
Cada escolha adicional que forças a um visitante é um pequeno custo de atrito. A página inicial deve parecer clara, não movimentada. Se não consegues decidir entre dois elementos, remove o que não está diretamente ligado a levar um visitante a um produto.
Design da página inicial no telemóvel
Mais de metade de todo o tráfego do e-commerce vem do telemóvel. O design da tua página inicial deve ser pensado primeiro para o telemóvel, não adaptado depois a partir do computador.
No telemóvel, o título do hero deve ser curto o suficiente para se ler em duas linhas. O botão de apelo à ação deve ser grande o bastante para tocar com facilidade. As imagens de produto devem empilhar-se bem numa só coluna. A navegação deve recolher-se num menu que não domine o ecrã.
Testa cada alteração da página inicial num telemóvel antes de a publicares. O que parece limpo num monitor de computador pode tornar-se um deslocamento confuso num ecrã pequeno. A experiência do comprador no telemóvel é a tua principal restrição de design, não um complemento.
A clareza sobre os envios também conta no telemóvel. Os compradores em telemóveis estão muitas vezes perto de uma decisão de compra. Um banner visível com os limites de envio grátis ou a entrega estimada na página inicial pode transformar uma sessão de navegação numa sessão de compra. Para saberes mais sobre como configurar os envios da tua loja, vê como configurar os envios da tua loja online.
Como a WEMASY apoia o design da página inicial
O sistema de e-commerce da WEMASY inclui ferramentas de layout da página inicial pensadas para lojas online. Secções hero, grelhas de produtos em destaque, blocos de categoria e secções de prova social estão todos disponíveis sem código à medida. O mesmo sistema trata do layout para telemóvel automaticamente.
Vê que ferramentas de página inicial e de loja estão disponíveis em cada nível na página de preços da WEMASY.
Perguntas frequentes
Quantos apelos à ação deve ter uma página inicial?
Um apelo à ação principal visível sem deslocar a página, e depois apelos secundários mais abaixo, ligados a secções específicas. O apelo principal deve ser a ação mais importante que queres que um visitante de primeira vez faça, tipicamente "Comprar agora" ou uma ligação a uma categoria concreta. Vários apelos principais ao mesmo peso visual diluem a atenção e reduzem os cliques em todos eles. Com o criador de websites da WEMASY, podes configurar isto diretamente na tua loja.
Devo mostrar preços na página inicial?
Não necessariamente na própria página inicial, mas mostrar preços nos cartões de produtos em destaque é útil. Os compradores percorrem as gamas de preços para perceber se a loja cabe no seu orçamento. Esconder os preços até à página de produto acrescenta atrito e pode parecer evasivo. Se os teus produtos são premium, mostrar um preço inicial cria expectativas positivas em vez de uma surpresa.
Com que frequência devo atualizar a página inicial?
Atualiza os produtos em destaque e as secções sazonais sempre que tiveres novidades, uma promoção a decorrer ou uma mudança sazonal no que os compradores procuram. A secção hero pode manter-se estável durante mais tempo, mas renova-a quando a tua oferta principal ou o teu posicionamento mudar. Uma página inicial que parece igual durante um ano inteiro sinaliza uma loja que não está ativa.
A velocidade de carregamento da página inicial afeta as vendas?
Sim. Uma página inicial que demora mais de três segundos a carregar no telemóvel perde uma parte significativa dos visitantes antes de verem o que quer que seja. As imagens grandes e sem compressão são a causa mais comum. Comprime as imagens antes de as carregares, evita vídeo de reprodução automática no hero e limita os scripts de terceiros. A velocidade é uma decisão de design da página inicial, não apenas técnica.
A página inicial deve ligar a todas as categorias de produtos?
Não necessariamente. Liga às categorias que a maioria dos teus compradores vai querer. Um menu de navegação pode levar a lista completa de categorias. O corpo da página inicial deve destacar as categorias que geram mais conversões ou que queres priorizar. Ligar a tudo cria ruído visual e dilui as páginas que mais importam.
Onde devem ficar os selos de confiança na página inicial?
Perto do hero, junto ao apelo à ação, ou numa barra de confiança dedicada entre o hero e os produtos em destaque. Os compradores têm mais probabilidade de procurar sinais de confiança no momento em que ponderam clicar num apelo à ação. Pôr os selos só no rodapé chega apenas aos compradores que já percorreram até ao fim, o que é tarde demais para a maioria dos visitantes de primeira vez.