Diretrizes, práticas recomendadas e exemplos dos botões Chamada para ação

Botões de call to action em sites são frequentemente negligenciados. Os designers às vezes não entendem exatamente o que faz um bom botão de ação, além de ser atraente e se encaixar no design geral. Mas os botões de call to action são muito importantes para serem projetados sem algum tipo de entendimento do que os torna efetivos. Afinal de contas, o ponto principal de um botão de call to action é fazer com que os visitantes Faz alguma coisa.

É importante obter pelo menos uma compreensão básica de como a cor, a escala, a linguagem e outros fatores influenciam a taxa de conversão de um botão de call to action. Os conceitos aqui não são complicados, mas eles exigem um pouco de previsão e planejamento para criar os botões de call to action mais eficazes possíveis dentro de um determinado design. Continue lendo para obter mais informações sobre cada um desses pontos e mais.

O objetivo dos botões "Chamada para ação"

Chamada para botões de ação pode servir uma variedade de funções. Depois de tudo, “apelo à ação” é realmente um pouco vago. Tudo o que isso significa é que o objetivo principal é levar um visitante ao seu site para faça alguma coisa. Isso poderia estar adicionando um produto ao carrinho de compras, baixando algo, solicitando informações ou qualquer outra coisa.

Como os botões de call to action têm propósitos tão variados, muita consideração deve ser levada em consideração para o que o botão pretende alcançar. O tipo de site, o mercado-alvo e a ação desejada podem ter um papel na melhor maneira de criar um botão de chamada para ação.

Tipos de botões "Chamada para ação"

Existem alguns tipos diferentes de botões de apelo à ação. Embora cada tipo tenha como objetivo fazer com que os visitantes executem uma determinada ação, essa ação pode variar consideravelmente. Abaixo estão os tipos mais comuns de botões de apelo à ação, com base na ação que você deseja executar.

1. Adicionar ao carrinho botões

Os sites de comércio eletrônico geralmente usam vários botões de apelo à ação, mas o mais utilizado é o “Adicionar ao carrinho” botão. Esses botões geralmente aparecem em páginas de produtos individuais. Sua finalidade é atrair clientes para comprar um item. Elementos comuns de design para adicionar botões incluem texto simples (como “Adicionar ao carrinho” ou “Adicionar ao saco” ou “Compre“) e o uso de ícones (geralmente um saco ou carrinho).

2. Botões de download

Os botões de download são semelhantes aos botões para adicionar ao carrinho, pois tentam convencer um visitante a tomar posse de um item. No caso de botões de download, muitos designers optam por incluir mais informações do que outros tipos de botões (como informações de versão ou tamanho de download).

3. Botões de Teste

Alguns sites tentam convencer seus visitantes a testar suas ofertas, geralmente na forma de uma avaliação gratuita. Isso pode ser um download gratuito ou uma conta gratuita, dependendo do site específico. Alguns sites usam o “menos é mais” filosofia e manter o idioma em seus botões a um mínimo, enquanto outros gostam de oferecer mais informações sobre o que o julgamento contém.

4. Aprenda mais botões

Aprender mais botões geralmente são usados no final de um bloco de informações do teaser (geralmente na página inicial). Estes botões são geralmente simples, mas muitas vezes grandes para atrair a atenção do visitante.

5. Inscreva-se Botões

Os botões de inscrição aparecem mais comumente em duas versões diferentes. O primeiro tipo é geralmente associado diretamente a um formulário de inscrição. O segundo tipo é geralmente usado de maneira similar ao “Adicionar ao carrinho” botões, como forma de os usuários comprarem ou se inscreverem em um serviço ou conta antes de chegarem a um formulário de inscrição.

Existem outros tipos de botões de apelo à ação, mas estes são os mais comuns. Diretrizes que se aplicam àquelas mencionadas provavelmente também se aplicarão a qualquer outro tipo de botão de call to action que você possa estar projetando.

Usando o Espaço Negativo Efetivamente

Você quer que os seus botões de call to action se distingam do conteúdo ao redor e realmente chamam a atenção dos visitantes do seu site. Para esse fim, você precisa fazer uso do espaço negativo em torno desses botões. Incorpore espaço em branco entre seu conteúdo e seu botão de ação para ação. Embora isso seja menos importante (e menos comum) em alguns botões, como botões de adicionar ao carrinho, com outros, como aqueles para aprender mais, trabalhe melhor com mais espaço.

É importante equilibrar a quantidade de espaço negativo em torno dos botões com o tamanho dos próprios botões. É sobre proporção. Você quer que seu botão, o espaço ao redor e o conteúdo ao redor pareçam estar juntos, mesmo com disparidades de tamanho. Você pode ter que mexer com as coisas um pouco para fazê-las parecerem corretas.

Algumas diretrizes:

Certifique-se de que há espaço suficiente em torno do botão para que ele não pareça entulhado
Considere princípios como a regra dos terços ou a Proporção Áurea ao determinar quanto espaço incluir
O espaço negativo dá à sua sala de ação uma chamada para se destacar do seu outro conteúdo e o diferencia

Tamanho e cor

O tamanho dos seus botões de call to action é muito importante. Um botão muito grande irá dominar tudo ao seu redor. Um botão pequeno demais se perderá na reprodução aleatória de todos os outros conteúdos de uma página. Você quer que seu botão seja grande o suficiente para se destacar sem sobrecarregar o design.

A cor pode ser usada com grande eficácia para ajudar a equilibrar o tamanho dos seus botões. Para botões maiores, escolha uma cor que seja menos proeminente em seu design (mas ainda se destaque novamente no plano de fundo). Para um botão menor, você pode querer escolher uma cor mais clara e contrastante para realmente tornar o botão pop. Em ambos os casos, certifique-se de que a cor que você usa define o botão separadamente sem colidir com o design geral do site.

Algumas diretrizes:

Os seus botões de call to action devem, idealmente, ser os maiores botões de uma determinada página
Use cores contrastantes para destacar botões menores
Use cores menos distintas para fazer com que os botões superdimensionados se ajustem melhor
Você chama a ação botões precisam chamar a atenção sem sobrecarregar o seu design

Língua

As palavras exatas que você escolhe usar em seus botões de call to action podem ter um efeito enorme na conversão. Comparar “Compre” com “Adicionar ao carrinho“. Um é muito mais urgente que o outro. Ou que tal “Experimente Grátis” com “Teste grátis“? Um é muito mais perfurado que o outro e se destaca mais.

O idioma que você usa em seus botões de call to action deve ser o mais simples e direto possível. Você quer que os visitantes saibam com apenas um relance exatamente o que eles receberão quando clicarem em um botão. Se eles questionarem, isso significa que eles foram pausados, o que pode levar a taxas de conversão mais baixas.

Não esqueça também o tamanho das suas fontes. O texto em seu botão de chamada para ação deve ser grande e em negrito, adequado ao tamanho e à cor do próprio botão. Verifique se há contraste suficiente e se o texto é fácil de ler.

Algumas diretrizes:

Use uma linguagem simples e direta
Use uma fonte grande e em negrito no botão do texto principal
Certifique-se de que a linguagem exige claramente uma ação específica

Criar Urgência

Você deseja que os visitantes em seu site realizem as ações desejadas com o mínimo de pensamento possível. Embora você não queira enganar seus visitantes, quanto mais oportunidades você der a eles para parar e considerar o que eles estão fazendo, mais oportunidades você terá para dizer “não”.

Você quer que seus botões lhes dêem a impressão de que precisam agir imediatamente. Você quer incentivá-los a tomar sua decisão imediatamente, no calor do momento. Embora isso não funcione para todos os botões de ação (especialmente os que compram itens caros), para ações gratuitas ou de baixo custo, fazer com que os visitantes cliquem com pouca previsão é desejável..

Algumas diretrizes:

Incentive seus visitantes a agir imediatamente
Não dê aos seus visitantes qualquer motivo para pausar
Embora a urgência seja importante, não induza em erro seus visitantes de maneira alguma

Fornecer informações extras

Quando apropriado, use seus botões de apelo à ação para dar aos visitantes informações adicionais sobre o que eles obterão se clicarem no botão. Isso é mais comumente visto com botões de avaliação ou botões de download. Exemplos comuns de informações extras incluem o tempo de duração de uma avaliação gratuita ou o tamanho de um download de arquivo. Informações de versão também são comumente vistas.

Ao incluir informações extras, lembre-se de que você precisa manter o foco na chamada real à ação. Certifique-se de que o texto da língua que atrai os visitantes a agir seja mais proeminente, com outras informações muito menos visíveis.

Algumas diretrizes:

Incluir apenas informações extras quando adicionar à experiência do usuário
Informações extras só são apropriadas em alguns tipos de botões de apelo à ação, principalmente botões de download ou de avaliação
Certifique-se de que o principal apelo à ação ainda seja o texto mais proeminente no seu botão

Prioritizar

É importante priorizar os botões de apelo à ação na sua página, se houver mais de um. Isso pode ser feito de várias maneiras, mas as mais comuns são através do uso de cor e tamanho.

Use cores para realçar o botão mais importante de uma página ou para que os menos importantes pareçam menos proeminentes. Ou use o tamanho para destacar o botão mais importante (tornando-o maior) e sem enfatizar os menos importantes.

Ícones e Imagens

A inclusão de dicas visuais nos seus botões de call to action também pode ajudar a aumentar as taxas de conversão. Um, ícone, de, um, carrinho de compras, ligado, um “Adicionar ao carrinho” botão, por exemplo, ou uma seta em um botão de download são bons exemplos. Pense em ícones exclusivos para usar também, mas certifique-se de que o ícone acrescente à experiência do usuário, esclarecendo para que serve o botão, e não adicione confusão.

Algumas diretrizes:

Certifique-se de que os ícones que você usa ajudam a esclarecer o significado do seu botão, em vez de confundi-lo
Ícones facilmente reconhecidos podem indicar imediatamente o significado para seus visitantes
Não tenha medo de usar ícones menos comumente usados, desde que seu significado ainda esteja claro

Exemplos

Aqui estão alguns exemplos de excelentes botões de apelo à ação. Embora nem todos estejam em perfeita conformidade com as diretrizes acima, eles atendem a critérios suficientes para serem considerados excelentes.

Transmissão ao vivo - Diferenciar os botões "compre agora" (para opções pagas) e "inscreva-se" (para opções gratuitas) é uma boa estratégia.

Windows 7 - O grande e verde botão "Obter o Windows7" é fácil para os visitantes.

QG de Fileshare - O botão verde brilhante aqui realmente se destaca contra o fundo branco.

Diário de bordo - A utilização de cores diferentes para os botões "Download" e "Comprar" diferencia-os e dá prioridade ao botão "Comprar".

TasteBook - Este botão faz grande uso de um ícone e usa texto em negrito maior para se destacar.

GoodBarry - Outra chamada verde brilhante para o botão de ação.

Criativo Lifetree - Continuar o mesmo tipo de letra a partir da cópia do corpo para o botão de chamada para ação cria um senso de coesão.

O Resumator - Uma chamada vermelha brilhante para botão de ação com tipo negrito destaca-se contra o fundo azul.

Notepod - Um bom exemplo de incluir informações extras em um botão de chamada para ação.

Inkd - Um ótimo exemplo de priorizar botões com tamanho.

Temas elegantes - Outro excelente exemplo do uso de cores para se destacar sem colidir com elementos de design adjacentes.

ZenDesk - Outro excelente exemplo de como fazer um botão se destaca usando cores.

Storenvy - Um botão redondo é inesperado e se destaca, especialmente quando cercado por uma borda branca.

Bara'Mail - Às vezes, um botão que combina melhor funciona no design geral do seu site, especialmente quando a ação é menos urgente.

Mais recursos

Botões de call to action: exemplos e melhores práticas - da revista Smashing
Bons botões de call-to-action - do estande UX
Call to Action Buttons: O tamanho é importante? - De Get Elastic
10 Técnicas para um Eficaz “Apelo à ação” - De Boagworld
5 dicas para criar um botão de call to action eficaz - From SitePoint