{"id":531,"date":"2013-08-11T19:33:23","date_gmt":"2013-08-11T19:33:23","guid":{"rendered":"http:\/\/artigos.marcomapa.com\/?p=531"},"modified":"2013-08-11T19:33:23","modified_gmt":"2013-08-11T19:33:23","slug":"botoes-call-to-action","status":"publish","type":"post","link":"https:\/\/marcomapa.com\/artigos\/botoes-call-to-action\/","title":{"rendered":"Bot\u00f5es Call-to-Action"},"content":{"rendered":"

\"call-to-action-button\"<\/a><\/p>\n

Bot\u00e3o call-to-action \u00e9 o bot\u00e3o que chama o usu\u00e1rio para uma a\u00e7\u00e3o principal na p\u00e1gina. Nas lojas virtuais, os bot\u00f5es call-to-action mais comuns s\u00e3o os bot\u00f5es cadastrar, pagar, adicionar ao carrinho e, um dos mais importantes, o bot\u00e3o comprar.<\/p>\n

Existem boas pr\u00e1ticas que podem (e devem) ser seguidas por qualquer lojista para facilitar a navega\u00e7\u00e3o e a vida dos clientes.<\/p>\n

1. Tamanho<\/b>
\nO tamanho dos bot\u00f5es \u00e9 determinante para criar bot\u00f5es eficazes, pois bot\u00f5es muito pequenos ficar\u00e3o perdidos na p\u00e1gina enquanto bot\u00f5es grandes demais v\u00e3o chamar tanto a aten\u00e7\u00e3o que ir\u00e3o sobrepor outras informa\u00e7\u00f5es importantes (como valor do frete e prazo de entrega nas p\u00e1ginas de detalhes do produto) e at\u00e9 correm o risco de serem confundidos com um banner.<\/p>\n

2. Forma<\/b>
\nBot\u00f5es precisam ter formato de bot\u00f5es. Eles n\u00e3o precisam necessariamente ser retangulares, mas \u00e9 importante que o usu\u00e1rio os reconhe\u00e7am como um elemento clic\u00e1vel.\u00a0 H\u00e1 uma grande probabilidade de que bot\u00f5es com formatos incomuns, cores chapadas e sem volume gerem menos cliques.
\n
\n3. Cor<\/b>
\nUm dos fatores mais importantes, sem d\u00favida, \u00e9 a escolha adequada das cores dos bot\u00f5es. As cores t\u00eam o poder de influenciar nosso comportamento despertando sensa\u00e7\u00f5es e emo\u00e7\u00f5es. O bot\u00e3o call-to-action deve ser de uma cor que desperte o interesse do seu cliente, deve combinar com as demais cores do site e, minha dica valiosa, devem ter uma cor exclusiva, ou seja, evite usar a cor do bot\u00e3o em outros elementos da p\u00e1gina como t\u00edtulos, \u00edcones ou textos. Quando usar, escolha elementos que voc\u00ea quer que tenham alguma liga\u00e7\u00e3o com o bot\u00e3o, por exemplo, o pre\u00e7o na p\u00e1gina do produto.<\/p>\n

4. Texto<\/b>
\nH\u00e1 v\u00e1rias formas de dizer a mesma coisa. Quando escolher o texto, use verbos no imperativo e d\u00ea informa\u00e7\u00f5es suficientes para que o cliente n\u00e3o tenha d\u00favidas. Por exemplo, no carrinho, evite usar bot\u00f5es com o texto \u201ccontinuar\u201d, pois eles n\u00e3o especificam bem a a\u00e7\u00e3o que ser\u00e1 tomada. Voc\u00ea vai continuar comprando? Continuar com o processo de compra?
\nSe o cliente ficar em d\u00favida, h\u00e1 grande chance de ele escolher outra loja para comprar. Assim como \u00e9 importante fornecer informa\u00e7\u00f5es claras, os bot\u00f5es tamb\u00e9m devem deixar claro para onde seremos levados quando clicarmos.
\nAqui deixo outra dica valiosa. Agregue valor aos seus bot\u00f5es mostrando ao usu\u00e1rio o que ele ir\u00e1 ganhar ao clicar. Por exemplo, na p\u00e1gina do produto, use \u201cCompre com frete gr\u00e1tis\u201d em vez de simplesmente \u201cComprar\u201d.<\/p>\n

5. Fonte<\/b>
\nFontes simples e de f\u00e1cil leitura aumentam a convers\u00e3o dos bot\u00f5es. Evite o uso de fontes cursivas ou fontes de tamanhos muito pequenos. Quanto mais r\u00e1pido o bot\u00e3o passar a informa\u00e7\u00e3o que precisa, mais cliques ele ir\u00e1 gerar.<\/p>\n

6. \u00cdcones<\/b>
\nV\u00e1rios estudos de usabilidade indicam que a associa\u00e7\u00e3o de \u00edcones e textos facilitam a compreens\u00e3o do usu\u00e1rio, portanto, use \u00edcones que transmitem a informa\u00e7\u00e3o por si s\u00f3, mas sempre associe-os com textos. \u00cdcones sozinhos correm o risco de n\u00e3o serem reconhecidos por muitos usu\u00e1rios.<\/p>\n

7. Posicionamento<\/b>
\nA posi\u00e7\u00e3o adequada do bot\u00e3o na p\u00e1gina melhora sua visibilidade. \u00c9 importante dizer que tudo o que aparece antes da dobra (aquilo que aparece sem a necessidade de rolar a p\u00e1gina) tem mais destaque do que o que vem depois da rolagem, por isso \u00e9 importante que o bot\u00e3o principal esteja sempre antes da rolagem.<\/p>\n

8. Respiro<\/b>
\nSabe aquela sensa\u00e7\u00e3o claustrof\u00f3bica de quando voc\u00ea entra em um ambiente pequeno cheio de quinquilharias e parece que voc\u00ea mal consegue respirar? Pois \u00e9, o mesmo se aplica \u00e0 Internet.
\nP\u00e1ginas com muita informa\u00e7\u00e3o e sem o espa\u00e7amento correto fazem com que as informa\u00e7\u00f5es sejam mais dif\u00edceis de serem localizadas e passam a mesma sensa\u00e7\u00e3o de desconforto ao usu\u00e1rio descrita acima, portanto, saiba utilizar o espa\u00e7amento correto entre os elementos e principalmente ao redor dos bot\u00f5es principais.<\/p>\n

9. Repeti\u00e7\u00e3o<\/b>
\nAlguns players do mercado t\u00eam usado uma estrat\u00e9gia que funciona. Repetir o bot\u00e3o em outros locais da p\u00e1gina para incentivar o clique. Use essa estrat\u00e9gia sabiamente e veja os resultados que ela traz.<\/p>\n

10. Call-to-action \u00e9 Call-to-action<\/b>
\nSe a sua p\u00e1gina tiver v\u00e1rios bot\u00f5es, lembre-se de que h\u00e1 uma hierarquia de interesses na p\u00e1gina e foque apenas naquele interesse principal, seja ele a venda, o cadastro ou o compartilhamento.
\nN\u00e3o caia no erro de encher a sua p\u00e1gina com bot\u00f5es call-to-action, pois isso n\u00e3o funciona. Foque em no m\u00e1ximo 2 bot\u00f5es por p\u00e1gina. Caso sejam necess\u00e1rios outros bot\u00f5es, d\u00ea um peso secund\u00e1rio escolhendo cores com menos contrastes e em tamanhos menores.<\/p>\n

Fa\u00e7a o teste, adeque seus bot\u00f5es para que eles fiquem mais atraentes e veja o aumento do n\u00famero de cliques e da sua taxa de convers\u00e3o.<\/p>\n","protected":false},"excerpt":{"rendered":"

Bot\u00e3o call-to-action \u00e9 o bot\u00e3o que chama o usu\u00e1rio para uma a\u00e7\u00e3o principal na p\u00e1gina. Nas lojas virtuais, os bot\u00f5es<\/p>\n","protected":false},"author":1,"featured_media":532,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,5],"tags":[],"class_list":["post-531","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","category-web"],"_links":{"self":[{"href":"https:\/\/marcomapa.com\/artigos\/wp-json\/wp\/v2\/posts\/531","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marcomapa.com\/artigos\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marcomapa.com\/artigos\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marcomapa.com\/artigos\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/marcomapa.com\/artigos\/wp-json\/wp\/v2\/comments?post=531"}],"version-history":[{"count":2,"href":"https:\/\/marcomapa.com\/artigos\/wp-json\/wp\/v2\/posts\/531\/revisions"}],"predecessor-version":[{"id":534,"href":"https:\/\/marcomapa.com\/artigos\/wp-json\/wp\/v2\/posts\/531\/revisions\/534"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marcomapa.com\/artigos\/wp-json\/wp\/v2\/media\/532"}],"wp:attachment":[{"href":"https:\/\/marcomapa.com\/artigos\/wp-json\/wp\/v2\/media?parent=531"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marcomapa.com\/artigos\/wp-json\/wp\/v2\/categories?post=531"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marcomapa.com\/artigos\/wp-json\/wp\/v2\/tags?post=531"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}