Olá leitores da MestreSEO!
Sempre que pensamos em melhorar a usabilidade do site, pensamos em breadcrumb navigation, melhorar a home, melhorar a estrutura de links e uma série de alterações muito importantes para fazer com que a experiência do usuário no site seja excelente. Entretanto, será que não está faltando nada na “checklist de usabilidade”?
O que é CTA?
CTA é um acrônimo para call to action, o que significa a “chamada à uma ação”. Ou seja, são links ou funções de uma página que levam os usuários a realizar ações. Os tipos de CTAs variam de página para página e podem ser links de navegação, links para compras, links para formulários de inscrição, e podem ser classificados da seguinte maneira:
Primários: É aquele que apela para a funcionalidade da página. Por exemplo, vamos supor que desejamos comprar uma geladeira X em um site de e-commerce. A página referente à geladeira que escolhermos tem a funcionalidade de vendê-la. Um claro exemplo de CTA primário nessa página é o botão de comprar/adicionar ao carrinho.
Secundários: Ainda utilizando o exemplo da geladeira, uma boa opção de CTA secundário é oferecer produtos relacionados em um ponto estratégico da página. A foco principal da página da geladeira é vendê-la, entretanto, ela também poderá vender os produtos complementares – o foco secundário.
Porque os CTAs são Importantes?
Usabilidade é a palavra de lei para os CTAs, pois eles facilitam a navegação do usuário, tornando-a mais clara e fácil. Além do mais, eles podem te ajudar no processo de convencer seu usuário a fazer o que você deseja (obviamente, se essa for a vontade do seu usuário).
Apesar de ter utilizado constantemente o exemplo dos sites de e-commerce, os CTAs são muito interessantes para blogs e sites informativos – enquetes, inscrições em feeds, usar um selo, indicar um aplicativo, votar em postagens – que atire a primeira pedra o blogueiro que nunca quis que seus leitores realizassem essas ações.
Devo ressaltar que os CTAs devem ser claros, objetivos e ter uma forte relação com sua proposta. Ninguém gosta de clicar em um botão para realizar uma determinada ação e se deparar com algo completamente diferente daquilo que foi proposto inicialmente.
Como Montar um CTA
Agora que já sabemos como um CTA é importante, fica uma dúvida na cabeça: “Mas como montar um CTA excelente?”. Para tanto, basta prestar atenção nos seguintes itens:
O que os usuários desejam?
Considere o tipo de visitantes de uma página. Como é que essas pessoas chegaram lá? O que elas procuram?
Ao responder a essas perguntas você consegue identificar qual seria o próximo passo lógico de seus usuários e, dessa maneira, poder oferecer o que seus visitantes desejam através do CTA certo.
Conteúdo Específico
Esqueça dos textos âncora genéricos. “Clique aqui” é apenas um exemplo de âncoras que você não vai utilizar. Além de facilitar a vida de seu usuário, utilizar textos âncoras personalizados vai te auxiliar até mesmo no link building de seu site.
Cada tipo de página deverá ter seu próprio tipo de botão. Mas atenção, escreva textos curtos, auto-explicativos e precisos para seus botões. Aliás, uma boa maneira de montar esse tipo de link é através de botões gráficos personalizados.
Cor Utilizada
Por incrível que pareça, a cor a ser utilizada também é muito importante. Assim como temos cuidado na hora de escolher as cores utilizadas no design, é interressante prestar uma certa atenção na hora de escolher a cor dos nossos CTAs, pois para cada tipo existirá uma cor que melhor se adaptará a finalidade do mesmo.
Vermelho: A cor vermelha tem um efeito marcante na percepção visual dos seres humanos, tanto pelo seu aspecto físico (são as ondas mais largas do espectro de cores visíveis pelo homem) tanto na sua simbologia. E é justamente pelo destaque que proporciona, deve ser utilizado com moderação. Geralmente é utilizado para avisos e erros, mas também pode ser a cor perfeita para um botão de “compre agora”.
Curiosidades sobre a cor vermelha: é a primeira cor que o olho enxerga pela manhã e a primeira que a criança consegue reconhecer.
Amarelo: É a primeira cor que o olho humano consegue visualizar, e é justamente por isso que são amplamente utilizadas em placas de trânsito. Amarelo também é uma boa cor a ser utilizada em CTAs. Da mesma maneira que o vermelho, devem ser utilizadas com cautela.
Curiosidade sobre a cor amarela: Estimula a memória.
Laranja: Tem um efeito menos marcante que o vermelho ou o amarelo, mas não é menos interessante. Também é ótimo para CTAs.
Ao considerar a cor para os seus botões, leve em consideração que apesar da cor ter que proporcionar um destaque aos botões em relação às cores utilizadas em seu site, ela não deverá atrapalhar o seu design original. Aliás, se você quer mais algumas dicas nesse assunto, no Monkey C Media você vai encontrar um artigo muito interessante sobre as cores e os CTAs.
Montar CTAs atrativos e eficientes pode ajudar e muito na melhora da conversão de sites e blogs. E, assim como algumas das principais técnicas de SEO, não demanda grandes esforços ou técnicas complicadas, bastando apenas se apoiar na experiência do usuário e como ela pode ser melhorada.
Divulgue este artigo!
Fabiane Lima
Analista Júnior SEO pela MestreSEO e estudante de Ciência da Computação na Unifei. Me siga no Twitter: @fabianemlima
06 de julho de 2009 às 8:56 am
Muito bom o post, Fabiane! Parabéns.
Acredito que muitos botões de comprar surgiram muito mais por “ser bonito” do que por usabilidade, mas é crucial o fator call for action dele.
E achei interessante a informação sobre a cor amarela: acho que vou colocar meu monitor amarelo pra memorizar tudo que leio! xD
Parabéns denovo!
[Responder]
Fabiane Lima disse,
julho 6th, 2009 às 4:16 pm
@Frank Marcel
Realmente muitos sites utilizam botões muito parecidos com o próprio template, sem dar destaque algum para eles. =)
Obrigada!
[Responder]
06 de julho de 2009 às 9:23 am
excelente. até esses dias estavamos falando sobre isso na faculdade!
muito bom!
[Responder]
Fabiane Lima disse,
julho 6th, 2009 às 4:15 pm
@Gustavaum
Obrigada! Compartilhe com a gente o que vc aprendeu lá! =)
[Responder]
06 de julho de 2009 às 10:00 am
Interessante o Artigo,
Já havia me deparado em sites de e-commerce que tive que procurar como comprar? Fala Sério…
Mas o que mais me chamou atenção foi o tal da cor Amarela, talvez por isso os Postits sejam amarelos?
É pode ser…
[Responder]
Fabiane Lima disse,
julho 6th, 2009 às 4:13 pm
@Raphael
É por isso mesmo que a cor padrão de post-it é amarela. =)
[Responder]
06 de julho de 2009 às 11:22 am
[quote]
Ninguém gosta de clicar em um botão para realizar uma determinada ação e se deparar com algo completamente diferente daquilo que foi proposto inicialmente.
[/quote]
“Não confunda facilidade com funcionalidade”
Não coloque funcionalidades que não sejam fáceis de utilizar.
[]’s
M!
[Responder]
06 de julho de 2009 às 12:47 pm
Ótimo artigo Fabiane.
Sem falar que quem já não passou pela situação de estar em um site e ter de ficar procurando o “maldito” botão que seria óbvio estar “ali ou lá” mas não estavam…
As vezes faz parte da criatividade e inovação do design mas principalmente se o site já tem um bom tempo na rede e sofre uma reformulação do layout o CTA se torna indispensável!
[Responder]
Fabiane Lima disse,
julho 6th, 2009 às 4:10 pm
@Fabio Lima
Com certeza, os CTAs ajudam e muito na navegação do usuário. =)
[Responder]
06 de julho de 2009 às 1:54 pm
Parabéns pelo post, Fabiane!
[Responder]
Fabiane Lima disse,
julho 6th, 2009 às 4:06 pm
@Leonardo Neves
Obrigada! =)
[Responder]
06 de julho de 2009 às 9:12 pm
O vermelho sempre deve ser usado com cuidado, muita gente tem uma certa distância da cor.
[Responder]
07 de julho de 2009 às 12:14 pm
É, o vermelho indica “Perigo”.
As vezes a pessoa nem lê o botão só pelo fato de estar em vermelho! Quem nunca viu aqueles banners bem no meio de um artigo dizendo “Parabéns! Você é o visitante nº 999.999 e ganhou um prêmio!” daí logo abaixo, o bendito botão vermelho…
Eu fujo deles e muita gente também…
[Responder]
07 de julho de 2009 às 4:03 pm
Muito bom seu post, em questões como usabilidade e acessibilidade devemos sempre ser
empaticos durante o desenvolvimento, para entender melhor o que os usuarios necessitam,
as vezes colocamos um link de chamada para estimular ações e nao sabemos
o quão importante é esse link.
Existem visitantes que ficam retratidos
quando acham links que os digam o que fazer;
Clique aqui,saiba mais, continuar leitura,leia mais.
Sentem medo de ser um link indicado para algum conteudo viral.
Grande parte das pessoas colocam o cursor em cima do link para ver o
endereço do caminho na “Barra de Status” se acham aquelas URLs assutadoras, com
certeza nao acionam o link
Passar confiança nas estruturas das URLs também é de extrema importancia nessa questão.
Eu não conhecia o termo CTA,
adicionou mais ao meus conhecimentos. Sucesso para Você! Bjs…
[Responder]
07 de julho de 2009 às 4:32 pm
Fabiane falando de usabilidade! Que coisa boa (:
Tenho minhas ressalvas quanto às cores, já dizia o tio Nielsen com seus eyetracking, quanto mais você tenta chamar atenção, menos você tem. [Vide cegueira de banner ]
Como o resto do pessoal disse, cuidado com o vermelho. Acho que algo mais neutro pro compre agora é mais efetivo (azul claro, verde..).
Ícones também ajudam nisso (dá-lhe semiótica antes de tudo hehe).
[]’s
[Responder]
09 de julho de 2009 às 4:00 pm
Parabéns Fabiane! muito bom esse artigo.
[Responder]
13 de julho de 2009 às 1:08 pm
Show de bola o post principalmente no tocante as cores dos cta’s.
[Responder]
20 de julho de 2009 às 4:13 pm
Excelente artigo.
Em exemplo de utilização de cores em botões está no site da Nextel, inclusive utiliza botões assimétricos.
[Responder]
21 de outubro de 2009 às 10:48 am
Em nossa loja usamos muito este conceito, e dá muitos resultados.
Parabéns pelo post!
[Responder]
Fabiane Lima disse,
outubro 21st, 2009 às 7:41 pm
Muito obrigada pelos comentários, pessoal! =)
[Responder]
07 de março de 2010 às 9:46 am
[...] código, devemos compreender os objetivos empresariais de um site, estabelecer com clareza as CTAs (calls to action) e entender as necessidades dos usuários. Sem esses conceitos bem fundamentandos, não há site que [...]