![\"\"](\"http:\/\/2.bp.blogspot.com\/-jp0Q_Nx35S4\/T2Nf4JYy59I\/AAAAAAAAAew\/i9UFgyvYVVY\/s400\/red_green_button.png\")
<\/p>\nMuitos lojistas e desenvolvedores sabem da import\u00e2ncia que a cor dos bot\u00f5es call-to-action (os que levam \u00e0 a\u00e7\u00e3o que se espera.) t\u00eam para o aumento da taxa de convers\u00e3o de uma loja virtual e isso n\u00e3o \u00e9 nenhuma novidade.<\/p>\n
Mas qual \u00e9 a cor que mais gera convers\u00e3o?<\/p>\n
H\u00e1 algum tempo, tenho ouvido muitas pessoas afirmarem que a cor que mais converte views em cliques \u00e9 o verde, por\u00e9m, sempre me mostrei resistente \u00e0 ideia de analisar um elemento da p\u00e1gina de forma individual sem que fosse observado o todo.<\/p>\n
Um dos mais importantes princ\u00edpios da Gestalt diz que o todo \u00e9 maior que a soma de suas partes. Mas o que isso quer dizer?<\/p>\n
O bot\u00e3o \u00e9 apenas um dos elementos da p\u00e1gina e n\u00e3o deve ser avaliado separadamente, pois quando os elementos s\u00e3o vistos juntos, seu c\u00e9rebro ir\u00e1 interpretar todo o conjunto ao mesmo tempo. (Fa\u00e7o um paralelo com uma m\u00fasica. N\u00e3o se pode julgar uma m\u00fasica considerando apenas um instrumento, pois quando voc\u00ea a ouve, percebe todos os sons ao mesmo tempo.)<\/p>\n
Sendo assim, como fazer pra que o bot\u00e3o trabalhe em conjunto com os demais elementos visuais da p\u00e1gina para gerar mais cliques?<\/p>\n
Foi exatamente essa pergunta que o pessoal da\u00a0Hubspot\u00a0fez e para atestar a efic\u00e1cia do bot\u00e3o verde, elaboraram um teste A\/B em uma situa\u00e7\u00e3o real para saber se o verde realmente gerava mais convers\u00e3o.<\/p>\n
As cores escolhidas para o teste foram o verde e o vermelho por serem opostas. O verde carrega consigo a conota\u00e7\u00e3o de \u201cSiga\u201d enquanto o vermelho simboliza o \u201cPare\u201d.<\/p>\n
Qual a sua opini\u00e3o?<\/p>\n
Qual gerou mais cliques?<\/p>\n
Note que a \u00fanica coisa diferente nas duas p\u00e1ginas \u00e9 a cor do bot\u00e3o. Textos e diagrama\u00e7\u00e3o foram mantidos exatamente iguais tanto numa quanto na outra.<\/p>\n
<\/p>\n
Talvez voc\u00ea se surpreenda com o resultado, mas ap\u00f3s 2.000 views, o bot\u00e3o vermelho recebeu 21% mais cliques que o verde.<\/p>\n
\u00c9 isso mesmo! Apesar do peso negativo que a cor traz, ela fez com que o n\u00famero de usu\u00e1rios que efetuaram o cadastro aumentasse em quase \u00bc.<\/p>\n
N\u00e3o se sabe exatamente os fatores que levaram ao aumento significativo da convers\u00e3o para quem visualizava o bot\u00e3o vermelho, mas repare na quantidade de verde que h\u00e1 na p\u00e1gina comparado com a quantidade de vermelho.<\/p>\n
H\u00e1 muito mais verde na p\u00e1gina (alguns inclusive com o mesmo tom do bot\u00e3o), isso fez com que o bot\u00e3o verde ficasse camuflado, enquanto o vermelho se destacava.<\/p>\n
Isso significa que a cor ideal para o bot\u00e3o call-to-action \u00e9 aquela que \u00e9 imediatamente percebida na p\u00e1gina de forma que o usu\u00e1rio saiba onde precisa clicar sem ter que procurar ou mesmo pensar. Por isso, para destacar o seu bot\u00e3o escolha cores que chamem a aten\u00e7\u00e3o, com bastante contraste com os demais elementos do site, em um tamanho que seja f\u00e1cil de localiz\u00e1-lo e, acima de tudo, fa\u00e7a testes A\/B para se certificar que voc\u00ea realmente fez a escolha certa.<\/p>\n
Portanto, contrate um bom profissional de usabilidade, fuja de falsos paradigmas e aposte em cores diversificadas.<\/p>\n