Como projetar links e CTAs infalíveis

Publicados: 2021-07-19

Você já olhou para as estatísticas do seu site e se perguntou: “Por que as pessoas não estão indo para onde eu quero?”

Por que eles não estão visitando as páginas de seus produtos? Por que eles não estão fazendo compras?

Nesta postagem, compartilharei algumas dicas de especialistas que podem ajudá-lo a controlar o progresso dos visitantes em seu site.

Identifique o problema

Primeiro, precisamos identificar qual poderia ser o problema. Ferramentas úteis como o Google Analytics podem fornecer muitas informações estatísticas sobre o seu site, mas descobri que mais ferramentas visuais, como Crazy Egg, Heatmap.com e Inspectlet, podem realmente ajudá-lo a identificar com precisão onde estão os problemas em seu mentira do site.

Ter um quadro de referência visual, como um mapa de calor, pode mostrar instantaneamente o que está chamando a atenção do público. É especialmente útil quando combinado com um mapa de rolagem, que pode dizer a que ponto os visitantes da sua página estão olhando! Às vezes, os problemas podem ser rápidos e fáceis de corrigir, mas às vezes não é tão claro. Esperançosamente, essas dicas irão ajudá-lo a melhorar seu site e atingir mais de seus objetivos.

Soluções

Clareza

Por mais estúpido que pareça, às vezes o problema pode ser tão simples quanto os clientes não saberem de relance o que constitui um link e o que não é. Embora isso possa parecer óbvio para você e para os outros, devemos lembrar que todo mundo opera de maneira diferente e podem ver seu site de forma diferente de como você o vê.

Por exemplo, as imagens promocionais em seu site podem dificultar a determinação exata de onde os visitantes devem clicar. Este é um problema muito comum em sites como downloads.cnet e filehippo.com:

Call-to-action do site Filehippo, criação de links
Você encontrou imediatamente o link de download correto? Dica, é o botão verde abaixo da barra de pesquisa no canto superior direito. Confuso, sim?

download.cnet apelos à ação, criação de links

Download.cnet.com é tão ruim quanto filehippo para isso. Você viu o link de download ou o grande banner laranja e azul brilhante na parte superior da página primeiro? Nesse caso, ele apenas o levaria ao site da empresa, mas outro poderia levá-lo a qualquer lugar.

Como eles podem consertar isso? Simplesmente tornar isso mais claro resolveria esse problema instantaneamente. Eles precisam desassociar seus links dos anúncios que estão tentando enganar as pessoas. Uma maneira poderia ser adicionando uma borda grande e gritante ao redor do título e o link de download subsequente, ou mesmo uma cor de fundo completa e espaçamento para enfatizar o título e o link de download ainda mais. Mesmo algo tão simples como uma seta apontando para o link de download faria maravilhas! Qualquer coisa para fazer seu link se destacar dos demais rapidamente e, assim, reduzir quaisquer "cliques perdidos".

Estilo

Outro problema pode ser como seus links e CTAs são estilizados. Agora, não há certo ou errado quando se trata de estilo. Tudo depende do que funciona com o seu design e site e o que você acha que fica melhor, bem como o que funciona melhor para o seu público.

Dito isso, você deve ter notado nos últimos anos uma grande onda de botões grandes e brilhantes em vastos oceanos de “espaço em branco”. Há uma razão muito boa para essa tendência. Pesquisas e estatísticas mostram que os visitantes são mais propensos a se envolver com esses tipos de links, talvez mais do que outras variantes:

PayPal como criar frases de chamariz
O Paypal é um bom exemplo disso. Muito pouco conteúdo e apelos à ação brilhantes e óbvios.

Mas por que isso? Por que, como usuários, somos atraídos por sites com poucos elementos para interagir, em vez de um site com muitos caminhos e links para explorar?

É simples: isso não apenas elimina qualquer desordem, mas o estilo torna muito claro e óbvio o que é ou não clicável. Os CTAs e os botões Sign up / Log in chamam nossa atenção e nos convidam a clicar neles.

Mas isso significa que todos os nossos links devem ser botões grandes e brilhantes?

De jeito nenhum. Queremos apenas destacar nossas “frases de chamariz”, ou seja, nossos links com os quais queremos que nossos visitantes se envolvam - algo, achamos, que irá beneficiá-los e a nós de alguma forma, como uma página de vendas promocional ou as últimas notícias história.

Voltando ao exemplo do PayPal, não há problema em usar links de texto simples para links mais padrão ou menos importantes, contanto que ainda sejam claramente links para algo. Antigamente, isso sempre era indicado com texto sublinhado, e ainda podemos usar isso hoje, desde que se encaixe no design - embora algumas pessoas achem que os links sublinhados têm pouco lugar no design moderno.

Por exemplo, observe o texto abaixo do link “Saiba mais” do PayPal, “Não é cliente do PayPal? Iniciar. “Simplesmente encorajando essas duas últimas palavras, a atenção dos visitantes é atraída e eles são sutilmente encorajados a interagir. “Este texto é diferente”, pensam eles. “Tem algo aí? Por que essa parte está em negrito e o resto não? ” Isso convida o usuário a passar o mouse sobre ele e descobrir que é um link!

É uma diferença simples, mas em um mundo onde temos que lutar por cada segundo da atenção do usuário, é uma diferença que pode resultar em um clique e pode ser muito fácil de implementar. Veja o que funciona melhor para o seu site e sua clientela.

Localização na tela

Os usuários têm tão pouco tempo para vasculhar um site em busca de um link, e mais tempo perdido resultará em mais pessoas deixando seu site. Então, como podemos evitar isso? Mais uma vez, simplesmente fazemos com que os usuários possam identificar os links o mais facilmente possível.

Os mapas de rolagem podem ser uma grande ajuda aqui. Pela minha experiência, quase todos os visitantes de uma página verão o topo da página, mas menos de 20% das pessoas irão rolar até o final - ainda mais baixo para páginas mais longas. No entanto, mais de 80% verão os primeiros 50% da página.

O tamanho da tela desempenha um grande papel nisso, junto com as resoluções da tela e o tamanho do dispositivo. No entanto, isso significa que qualquer coisa abaixo da parte inferior da tela provavelmente não será vista pelos visitantes. Então, idealmente, queremos ter certeza de que nossos preciosos CTAs ocupem uma posição elevada na página. Problema resolvido, certo?

Isso é uma boa coisa a se considerar como regra prática e funciona especialmente bem para produtos e promoções individuais. Mas e quando você está comparando os resultados de pesquisa de um produto, por exemplo? Você terá muitos objetos lutando pela atenção do visitante.

É aqui que você precisa combinar as três coisas em seu design: Clareza, Estilo e Localização. O principal a ser lembrado é que, se houver muitas informações na tela, o usuário perderá o interesse rapidamente. Se você tem muitos produtos para exibir, deve fornecer a eles as informações mínimas que puder dar - de preferência, título, preço e um CTA “Mais informações / compre agora”.

Cabe a você decidir o que mais incluir. Mas para bons exemplos de design, olhe para sites de grandes supermercados como o Tesco:

Tesco Bread, como projetar vários CTAs, eCommerce

Uma simples pesquisa por “pão” produz centenas de produtos diferentes, mas a Tesco permitiu que todos os produtos respirassem e simplificaram o processo de compra para “Quantidade?” e adicione".

Você também pode notar que os botões seguem todas as regras: eles são claros, têm um espaço e um estilo atraentes e aparecem logicamente na grade, abaixo do produto e de qualquer descrição que ele possa ter.

Pesquise outros exemplos para ver o que os grandes sites de comércio eletrônico fazem quando se trata de apresentar vários CTAs. Você pode se surpreender com o que encontrará!

Resumo

Espero que este blog tenha lhe dado algumas dicas sobre os tipos de truques simples que podem realmente ajudar a impulsionar o sucesso do seu site. Em resumo, o que você precisa lembrar ao criar seus links e CTAs é:

  • Clareza . Certifique-se de que seus CTAs se destaquem de qualquer outra coisa na página, especialmente se houver outros links e botões que possam causar confusão. Você deve ser capaz de distinguir o real do falso instantaneamente.
  • Estilo. As pessoas são atraídas por botões grandes e brilhantes, e nós somos atraídos por grandes campos de texto que chamam nossa atenção. Quanto menos esforço o usuário tiver de fazer para identificar um link ou botão, maior será a probabilidade de ele clicar neles. Isso se aplica a links menores e menos importantes - você nunca quer perder um link em um texto ou imagem, então defina diretrizes rígidas sobre como criar seus links e CTAs. Use fontes em negrito, cores diferentes ou qualquer outra coisa para destacar e distinguir seus clicáveis ​​dos não clicáveis. Apenas certifique-se de que eles sejam usados ​​de forma consistente. Da mesma forma, certifique-se de que nenhuma de suas imagens incorpore esses elementos, a menos que você tenha um bom motivo para isso.
  • Localização, localização, localização . Onde você coloca seus links e CTAs são importantes. Se o seu link “Compre agora”, altamente valioso e importante, não aparecer acima da dobra para alguém, há menos de 50% de chance de um cliente clicar nele, já que menos de 50% dos usuários rolarão para baixo até aqui.

Espero que este conselho ajude! Não se esqueça de sempre pesquisar e ver o que outras pessoas estão fazendo para resolver este problema, e compare o site deles com o seu para ver onde e como o seu poderia ser melhorado.