{"id":3073,"date":"2017-12-27T10:00:28","date_gmt":"2017-12-27T12:00:28","guid":{"rendered":"http:\/\/blog.iset.com.br\/estude-as-cores-do-seu-site-para-aumentar-as-taxas-de-conversao\/"},"modified":"2019-10-02T16:19:09","modified_gmt":"2019-10-02T19:19:09","slug":"estude-as-cores-do-seu-site-para-aumentar-as-taxas-de-conversao","status":"publish","type":"post","link":"https:\/\/www.iset.com.br\/blog\/estude-as-cores-do-seu-site-para-aumentar-as-taxas-de-conversao\/","title":{"rendered":"Estude as cores do seu site para aumentar as taxas de convers\u00e3o"},"content":{"rendered":"

Voc\u00ea sabia que as cores do seu site<\/a> t\u00eam grande influ\u00eancia nas suas taxas de convers\u00e3o<\/strong>? Isso ocorre porque as tonalidades despertam diferentes rea\u00e7\u00f5es nos usu\u00e1rios que navegam pela p\u00e1gina, o que pode conduzi-los mais facilmente a realizar alguma a\u00e7\u00e3o<\/strong>.<\/p>\n

 <\/p>\n

Para obter melhores resultados nesse sentido, o melhor a ser feito \u00e9 testar diversas cores buscando encontrar uma paleta adequada. Essas varia\u00e7\u00f5es s\u00e3o fundamentais para chegar \u00e0 escolha ideal.<\/strong><\/p>\n

 <\/p>\n

Quer saber mais sobre o assunto e aprender como as cores do seu site podem aumentar as taxas de convers\u00e3o do seu neg\u00f3cio<\/strong>? Ent\u00e3o continue lendo este post!<\/p>\n

Buscando as melhores cores<\/span><\/h2>\n

As tonalidades usadas no seu site<\/strong> devem ter rela\u00e7\u00e3o com as cores institucionais<\/strong>, afinal, n\u00e3o \u00e9 interessante fugir da identidade visual<\/strong> da empresa<\/strong>. O que voc\u00ea pode fazer \u00e9 buscar varia\u00e7\u00f5es nos tons para gerar uma experi\u00eancia mais agrad\u00e1vel aos usu\u00e1rios<\/strong>.<\/p>\n

 <\/p>\n

Procure focar sempre no uso b\u00e1sico de tr\u00eas cores diferentes<\/strong>. Cada uma delas deve estar presente em 60%, 30% e 10% do total da p\u00e1gina. A distribui\u00e7\u00e3o deve ser feita de forma gradativa<\/strong>, com as mais fortes compondo os 10%. Quanto mais suave for a cor, mais ela pode estar presente.<\/p>\n

Rela\u00e7\u00e3o das cores com o CTA<\/span><\/h2>\n

O call to action, ou CTA<\/strong>, \u00e9 a chamada para a realiza\u00e7\u00e3o de uma a\u00e7\u00e3o dentro da p\u00e1gina<\/strong>, que pode ser a assinatura de um e-mail<\/a><\/strong> ou uma compra<\/strong>. Essa frase precisa estar sempre em destaque para atrair a aten\u00e7\u00e3o do usu\u00e1rio<\/strong>.<\/p>\n

 <\/p>\n

Para isso, a cor utilizada precisa ser mais forte<\/strong>. \u00c9 recomendado usar as tonalidades que comp\u00f5em 10% da p\u00e1gina, pois esse contraste desperta a curiosidade do usu\u00e1rio<\/strong>, fazendo-o perceber que ali h\u00e1 uma chamada para a\u00e7\u00e3o. Lembre-se de que a cor certa transmite a seguran\u00e7a necess\u00e1ria para a efic\u00e1cia do CTA.<\/strong><\/p>\n

Realizando testes sobre as taxas de convers\u00e3o<\/span><\/h2>\n

As cores atingem as pessoas que navegam pelo site de formas diferentes. Por isso, \u00e9 importante observar como elas reagem \u00e0s diversas tonalidades<\/strong>. Uma boa maneira de definir isso \u00e9 realizando o teste A\/B.<\/strong><\/p>\n

 <\/p>\n

Nessa estrat\u00e9gia<\/strong>, voc\u00ea disponibiliza duas p\u00e1ginas iguais, mas com cores distintas. A p\u00e1gina \u201cA\u201d \u00e9 a cor atual e a \u201cB\u201d \u00e9 a que configura o teste. As p\u00e1ginas aparecer\u00e3o aos usu\u00e1rios de forma aleat\u00f3ria, funcionando normalmente. Depois disso, analise as m\u00e9tricas e verifique qual das duas obteve melhor desempenho nas taxas de convers\u00e3o.<\/strong><\/p>\n

Entendendo a psicologia das cores<\/span><\/h2>\n

Comprovadamente, as cores despertam diferentes sentimentos, rea\u00e7\u00f5es e sensa\u00e7\u00f5es nas pessoas<\/strong>. \u00c9 fundamental levar isso em conta na hora de posicionar tonalidades em seu site<\/strong>, conforme a sua inten\u00e7\u00e3o ao se relacionar com o cliente<\/a><\/strong>. A seguir, confira o que as cores prim\u00e1rias oferecem a n\u00edveis psicol\u00f3gicos<\/strong>:<\/p>\n

 <\/p>\n