A homepage do seu website é, na grande maioria das vezes, a página de entrada com mais visitas e de onde os utilizadores vão partir quando entram no seu site. É uma página, normalmente, rica em conteúdo e onde temos urgência para comunicar uma série de coisas. Neste artigo vamos abordar uma série de erros comuns em termos de layout e UX na homepage dos websites e deixar 7 dicas para otimizar a sua homepage, e assim, converter ainda mais.

1 – Implemente uma sticky homepage

Se ainda não tem ou não sabe o que é uma sticky homepage, está na hora de acompanhar esta fantástica tendência de mercado. Uma sticky homepage, como o nome sugere, é uma homepage que fica fixa para o utilizador após este escolher que tipo de homepage, isto é, que tipo de conteúdos quer ver. Este método é maioritariamente usado em fashion, onde o utilizador entra no site e é apenas confrontado com duas opções: Homem ou Mulher, num banner único. Após escolher um destes, o utilizador vai, naquele momento e sempre que entrar no site, ver uma homepage personalizada para o tipo de roupa ou calçado que lhe interessa.

Isto vai permitir tornar o site mais rápido e, por sua vez, ter melhor ranking nos motores de busca, já que a 1ª Homepage é super curta, com apenas 2 blocos para o utilizador selecionar. Ainda, este é um passo na direção da personalização, a qual sabemos o quão importante é no mundo do digital e para conseguirmos converter e fidelizar um potencial cliente.

Exemplo – Sticky Homepage da Asos

2 – Tenha um banner principal fixo

Se ainda tem um banner principal rotativo no seu site, que mostra um banner diferente a cada 5 segundos, está na hora de o retirar. Pode parecer muito apelativo poder, num mesmo local, mostrar 3 ou 4 conteúdos diferentes ao utilizador. Mas além destes 3 ou 4 conteúdos, o utilizador tem ainda uma série de conteúdos para consumir no scroll da homepage. O resultado é que o utilizador, na verdade, não sabe para onde deve focar a sua atenção. Assim, em vez de conseguirmos chamar a atenção para uma próxima ação ou um conteúdo em específico importante, estamos simplesmente a bombardear o utilizador com informação, que fica sem saber o que fazer a seguir. Existem vários estudos que comprovam a ineficácia do uso de banners rotativos, inclusive a associação negativa que existe entre a rotatividade (o movimento) e publicidade. Deixamos alguns links caso queira ler mais sobre este assunto:

https://conversionxl.com/blog/dont-use-automatic-image-sliders-or-carousels/

https://yoast.com/opinion-on-sliders/

https://www.ironpaper.com/webintel/articles/4-reasons-website-homepage-sliders-bad-business/

Exemplo – Banner não rotativo da Function of Beauty

3 – Coloque um CTA em todos os blocos da homepage

É normal querermos uma homepage longa, cheia de conteúdo espetacular que não só mostra a nossa marca, como também, alguns dos nossos produtos em destaque e algumas campanhas e promoções. No entanto, é importante que nunca coloque um bloco, um vídeo, uma imagem ou um pedaço de texto, se estes não tiverem um objetivo claro e um call-to-action associado. Alguns exemplos de CTA podem ser:

  • Ver coleção
  • Comprar coleção
  • Saber mais
  • Ver mais
  • Comprar agora
  • Ler mais
  • Ir para “nome da categoria”

Este call-to-action deve, por sua vez, estar associado a uma página de destino relevante no site e no seguimento do conteúdo visualizado. Esta página de destino pode ser uma listagem de produtos, um lookbook, uma página de produto, o blog, entre outros. Colocar uma imagem só porque “fica bonito” na homepage, poderá frustrar os utilizadores que podem querer ver mais sobre esse conteúdo ou comprar uma produto que aparece nessa imagem. Assim, além de colocar o link na própria imagem, coloque sempre um botão (CTA) claro e bem visível.

Exemplo – Bloco de conteúdos da Asos

4 – Otimize a ferramenta de pesquisa

Embora a ferramenta de pesquisa não esteja necessariamente associada à homepage, decidimos abordá-la na mesma neste artigo, por ser uma ferramenta muito usada pelos compradores online. A necessidade de ter uma search bar depende da natureza do seu site, se tem menos de 100 produtos e apenas 3 categorias, uma search bar não é essencial. Mas se tem 1000 produtos e mais de 6 categorias, então a ferramenta de pesquisa será essencial para alguns utilizadores poderem encontrar o que procuram.

Em primeiro lugar, comecemos pela localização da barra de pesquisa. Deve colocá-la na sua posição mais “tradicional”, que é no topo da página, alinhada com o menu principal e os ícones que estão à direita, preferencialmente mais junto destes.

De seguida, importa falarmos da usabilidade desta ferramenta:

  • Preenchimento automático – o site preenche (em formato de sugestão) à medida que a pessoa começa a escrever, tornando mais fácil e rápida a pesquisa. É especialmente útil quando  o utilizador procura um produto mas não tem a certeza como se escreve corretamente.
  • Imagens e sugestões – o site mostra algumas sugestões de pesquisas semelhantes à nossa e algumas imagens de produtos que tenham match com a nossa pesquisa. Enriquece bastante a pesquisa e dá muitas mais possibilidades ao utilizador de avançar para uma página de produto, mesmo que esta já não tenha tanto que ver com a sua pesquisa inicial.
  • No match – o site sugere outras pesquisas quando o utilizador escreve uma palavra que não tenha nenhum match no site. Devolver uma pesquisa deste género para uma página “sem resultados” é o pior que podemos fazer. O utilizador está confuso e provavelmente não sabe o nome do que procura. A ferramenta deve devolver outras sugestões ou categorias de produto para o utilizador navegar.
Exemplo – Search bar da Adidas

5 – Dê destaque a facilitadores de compra e a propostas de valor

Facilitadores de compra e propostas de valor, embora pareçam expressões para designar a mesma coisa, estamos a falar de duas coisas distintas. Facilitadores de compra são pequenos benefícios que oferece ao seu cliente como parte do seu serviço, como por exemplo:

  • Entregas em 2 dias úteis
  • Envios gratuitos
  • Devoluções gratuitas
  • Devoluções até 30 dias
  • Apoio ao cliente 24 horas por dia

Propostas de valor são as propostas acerca da sua marca e que a distingue de as demais. Eis alguns exemplos:

  •  “CALVIN KLEIN for her is synonymous with refined luxury and sophisticated simplicity.”
  • “Tudo sobre eCommerce dedica-se a ensinar tudo o que existe sobre o mercado das vendas online.”
  • “Oferecemos as últimas tendências e a mais alta qualidade de produtos de ténis para homens, mulheres, e crianças.”

Quer os facilitadores de compra, quer as propostas de valor, devem estar em destaque na sua homepage, e repetidos algumas vezes ao longo da mesma. Use ícones ou pequenas imagens para auxiliar o texto e tente que este seja sempre o mais curto e conciso possível.

Exemplo – Propostas de valor da Function of Beauty
Exemplo – facilitadores de compra da PROF

6 – Coloque o texto no código

Um outro erro comum, que vemos mais vezes do que as que gostaríamos, é websites, mais em concreto homepages, com banners onde o texto está na própria imagem em vez de estar no código.

Percebemos que ao colocar-se o texto numa imagem é mais fácil e dá flexibilidade em termos de design, mas é um erro em termos de SEO, porque os motores de pesquisa têm dificuldade em interpretar as imagens e dão preferência ao texto simples. O texto deve ser colocado em formato de texto, por cima da imagem, legível pelos motores de pesquisa, para estes poderem indexar o conteúdo e associar as palavras-chave à página em questão.

Exemplo – Texto por cima da imagem, no código

7 – Tire a subscrição da newsletter do footer

É muito comum vermos, em qualquer homepage de qualquer site, um pequeno bloco para subscrever a newsletter no fim da homepage, inclusive no footer da página. Sendo que apenas 22% dos utilizadores fazem scroll até ao fim da página (Fonte: ClickTale), estamos basicamente a retirar aos restantes 78% a possibilidade de subscreverem a newsletter.

O nosso objetivo nº1 do website, e a ação que queremos que o utilizador tome, é sempre a compra. No entanto, nem sempre conseguimos agarrar o potencial cliente dessa forma, e mais dificilmente, na 1ª interação.  Assim sendo, o nosso objetivo nº2 deve ser manter o contacto com o cliente, para que consigamos ter a oportunidade de o converter mais tarde. É estranho que a maioria dos websites pareçam estar quase a esconder a subscrição de newsletter aos utilizadores, quando esta é das principais ações que queremos que eles tomem.

Assim, aconselhamos que, para além do footer, coloque um bloco de subscrição da newsletter várias vezes ao longo da homepage e do seu website. Coloque inclusive na página de produto. Não se esqueça que, um campo para colocar um email e o texto “Subscrever newsletter” não é de todo suficiente para classificar como um bloco de subscrição. O utilizador deve ficar a conhecer quais as vantagens que vai ter se subscrever, caso contrário, porque o haveria de fazer? Coloque sempre ao lado um pequeno bloco de texto (e ícones) que expliquem os benefícios de subscrever. Alguns exemplos:

  • Desconto de 10% no seu aniversário
  • Acesso a campanhas e descontos exclusivos
  • Envios gratuitos
  • Acesso em 1ª mão a novidades
  • Desconto de 10% na 1ª compra
  • Envio gratuito na 1ª compra
  • Envio de amostras gratuitas

Gostava de ler mais dicas para otimizar outras páginas da sua loja online? Temos mais artigos sobre este assunto:


Bárbara Costa
Bárbara Costa

Ecommerce & Digital Marketing Consultant