Sua chamada de homepage-to-action-Yoast

Michiel Heijmans

O Michiel é um parceiro no Yoast e nosso COO. Veterano da Internet. Seu principal objetivo com a maioria de seus artigos é engrossando a otimização do seu site. Muito a fazer!

Avatar de Michiel Heijmans

É uma noção amplamente superestimada de que uma homepage deve incluir todas as seções do seu website e servir todo tipo de visitantes. Precisa de um claro call-to-action. Esse call-to-action precisa ser a principal coisa que você deseja que seu visitante faça naquela página, como comprar seus produtos ou assinar sua newsletter.

Certifique-se de que um call-to-action se destaca do resto do seu design, usando uma cor de botão contrastante, um link acionável ou um texto de botão e reduzindo a maioria (senão tudo) clutter.

Clutter: Para fazer desordenado ou difícil de usar enchendo ou cobrindo com objetos

A necessidade de colocar tudo em uma homepage

Os sites de emprego fazem isso. “Empregadores assinam aqui”, “Lista de empresas aqui”, “Últimas empregos”, “Construa seu currículo”. Os agentes imobiliários fazem isso. “Compre essas novas casas”, “Venda sua casa com a gente”, “Vendas mais recentes”, “Atualização de eventos”. Isso é realmente apenas a ponta do iceberg.

Parece que a maioria das homepages são projetadas com uma coisa em mente: “Como faço tudo no meu site acessível a partir desta única página.” Bem, você não pode. Não de uma maneira que seu visitante entenda sua empresa, produto ou realmente qualquer coisa alguma.

Um claro call-to-action

Para guiar seu visitante para dentro ou através de seu website, você deve dar orientações a ele. Bem similar a como uma estrada precisa de placas de estrada na verdade. Sim, você pode colocar vários sinais, mas você deve fazer os mais importantes os maiores. Faça-o o mais grande possível. Faça com que se sobressaia. Here’ s nossa própria página de produtos para o Yoast SEO Premium plugin:

imagem01-12-2020-10-12-43

It’s bem claro o que queremos que você faça lá, certo? Nem todos os   sites adicionam chamadas para ação como essa, porém.   Todo mundo visitou aquele ótimo site de olhar em 50 tons de cinza que tinha um botão de RSS alaranjado que chamou toda a atenção. Isso é realmente ruim design na minha opinião. É claro que a coisa que se destaca deve ser apenas o seu call-to-action: é o que você quer que os visitantes clique em.

Uma abordagem diferente para um call-to-action

Há muitas maneiras de usar e implementar essa chamada de call-to-action. Obviamente, uma está usando o botão grande negrito, de preferência em uma cor que não seja usada no design do website (o botão RSS laranja mencionado acima). Você também pode usar o espaço em branco para enfatizar uma parte específica da homepage, fazendo com que ele fique de fora dessa forma.

Recentemente tivemos um cliente para uma review do website que tem essa ideia (bastante comum) de iniciar seu website com uma escolha: três opções para três variações de um produto. É claro que isso implicaria três chamadas para ação …

Nenhum problema, se você combinar as duas maneiras mencionadas acima. Por isso, faça um bloco que se sobressaia (use espaço em branco suficiente ao seu redor) e inclua três chamadas semelhantes à ação, com (muito importante) um título descritivo para aquele bloco, como “Faça sua escolha”. Dessa forma, o bloco inteiro se torna seu call-to-action. It’ s um pouco como fazemos em nossa homepage atual:

imagem01-12-2020-10-12-44

Agora vamos ilustrar a simplicidade de call-to-actions ao ver alguns sites de exemplo (nenhum deles são clientes):

Jobsite.co.uk

Na primeira versão deste artigo, um dos exemplos que usei foi Jobsite.co.uk. Foi terrível, em termos de chamadas para a ação.

Jobsite é um site de recrutamento online líder do Reino Unido, dedicado a ajudá-lo a encontrar seu próximo trabalho.”

Na verdade eu me perdi na homepage já. Sim, eu entendo que você quer que eu procure o meu próximo trabalho em sua página, ou você realmente quer que eu me registre primeiro? Uma questão muito distrativa que esta homepage tem, é que o banner Vision2learn tem o maior call-to-action da página …

jobsite.co .uk 590×508

Como as coisas mudaram ao longo dos últimos anos! O site da Jobsite 2016 tem um call-to-action muito bacana que focaliza apenas isso: encontrar um job.

Clear call to action on the 2016 Jobsite.co.uk

Todas as coisas consideradas, a homepage é muito melhorada. Minha próxima sugestão seria testar a cor do botão (faça-o se destacar mais) e o texto do botão (torná-lo mais convidativo e descritivo, como ‘ Encontre o seu dream job ’).

Scuolaleonardo.com

O segundo site que mencionei de volta em 2012 foi  Scuola Leonardo da Vinci. Desde que fazemos reviews de website para sites de todo o mundo, decidi consultar uma Escola Italiana na Itália. A princípio, na língua italiana. Depois de olhar para o site deles, resolvi me ater ao Google Translate … como não conseguia encontrar onde se candidar a um curso. Como ficou de fora, a pergunta “Onde você quer que eu clique? ???” foi impossível de responder por este website. A falta total de um call-to-action, combinado com a clutter geral, faz com que um visitante se volte para o Google em um piscar de olhos.

Assim como Jobsite.co.uk, este website se desenvolveu ao longo dos anos, mas apenas não tanto. A primeira visualização do website 2016 é esta:

scuola leonardo

Temos a moderna grande imagem em primeira vista, com um belo bloco de texto que poderia ter facilmente sido o call-to-action. Mas ele isn ’t, como a imagem inteira possui sem link. Uma oportunidade perdida. Um pouco mais para baixo que página, nós encontramos alguns botões de call-to-action:

Mais Scuola Leonardo

Por que não começar com estes? Eles fazem tarefas top perfeitas para aquele site e merecem mais algum TLC no meu livro. Mude a cor do botão para fazê-los se destacar mais do resto do design por completo.

Walmart.com

Após a publicação inicial deste post, recebi bastante alguns comentários sobre minha rápida revisão de Walmart’ s chamadas para ação. A You’ d esperar que a empresa monitore e melhore o seu site o tempo todo, certo? Foi o que escrevi em 2012:

“ Me ajude aqui fora, Walmart. Por que você quer que eu clique no meu carrinho vazio? Não me faça mal, para sites de compras, enfatizar o carrinho é sempre uma coisa boa. Mas acho que o que o Walmart quer que eu clique é outra coisa, como a oferta de frete grátis ou talvez um produto que eu poderia comprar. Agora esse deve ser o botão laranja naquela homepage! Além disso, o banner “Shop Top Brands” é apenas uma lista de produtos e preços. O call-to-action sobre esse banner também deve ser claro (“Shop NOW” ou algo assim). ”

wallmart.com 1

Parece que todos aprendemos muito sobre UX e otimização de conversão, já que o website 2016 Wallmart.com realmente tem melhorado muito. Na verdade, pode ser a melhor melhoria dos três exemplos neste artigo:

Walmart 2016 screenshot

O cabeçalho é clicável, o carrinho foi tonificado, a   opção de busca é agradável e proeminente e o   banner é para seus próprios produtos. É tudo de bom? Bem, sempre há espaço para melhorias. Em um mundo ideal, haveria um elemento de botão acionável nesse cabeçalho. Só assim nós ganhamos ’ t errar o banner abaixo do cabeçalho para that.Além disso, a senhora pode estar olhando para aquele botão, em vez do pacote. Por outro lado, sentimos a pura alegria que ela sente ao receber seu pacote Walmart, certo? Estas realmente são coisas que um site deve testar.

Chegar ao trabalho!

Muitas coisas mencionadas neste artigo vão para a sua homepage e landing pages. Para as páginas do produto, há muito mais coisas a considerar. Encontre estes em meu artigo Calling para a próxima ação.

Com os problemas descritos acima, você pode facilmente verificar sua própria homepage. Existe uma clara principal call-to-action? Há muita bagunça?Vá e faça as coisas claras para o seu visitante. You’ll ter um website melhor depois dela!

Leia mais: Foco na clareza primeiro »

Obtenha dicas de SEO grátis direto para sua caixa de entrada!

  • Obtenha dicas semanais sobre como otimizar o SEO do seu website, usabilidade e conversão
  • Obtenha nossos cursos gratuítos imediatamente para aprender a fazer o seu site classificar mais alto.

Fonte: yoast.com/call-to-action