# 4 elementos de design para um bom call to action > Crie botões de chamada à ação que convertem. Domine tamanho, forma, cor e posicionamento para aumentar suas taxas de conversão drasticamente. URL: https://dpw.dev/design/4-elementos-design-call-to-action/ Publicado em: 2010-02-08 Categoria: design Tags: layout, planejamento Autor: Tárcio Zemel O artigo com [dicas para _call to actions_ eficientes](http://www.desenvolvimentoparaweb.com/usabilidade/user-interface-dicas-rapidas/) foi interessante, mas faltou algum detalhamento _extra_, algo a mais sobre a **prática** de se fazer chamadas à ação. Por isso, indicar os **4 elementos de design para um bom _call to action_** vai ser de muita valia para complementar. Depois de ler este texto, você está apto a fazer melhores _call to actions_ e vai incrementar a **usabilidade** de seu _site_. > Artigo baseado em [4 Simple Design Elements Behind a Good Call to Action](http://www.shayhowe.com/web-design/designing-call-to-action/). ## Tamanho Faça a sua **chamada à ação** grande o suficiente para que se destaque bastante na página! É o foco principal, certo? De modo geral, quanto maior é um elemento em uma página, mais visível será, consequentemente, deve ter maior importância. Um bom _call to action_ é grande o suficiente para que ele seja reconhecido facilmente. Antes de fazer botões enormemente e exageradamente gigantes, bastante atenção! Se você criar uma chamada muito grande, uma _call to action_ enorme, os visitantes podem não compreender que o elemento é clicável e você vai perder completamente o "apelo" àquela ação. A dica é criar chamadas à ação grandes **em relação** aos outros elementos da página, tomando o cuidado para não cair no exagero ridículo e ineficiente. Alternativamente, se você tiver mais de uma chamada à ação, utilize o tamanho segundo sua importância. O primeiro _call to action_ deve ser maior do que o segundo e assim por diante. ## Forma Normalmente os melhores _call to actions_ são os que tem forma de botão, chamam bastante atenção e são instantaneamente identificados como clicáveis - experimente usar os cantos arredondados ou circulares nas extremidades de _call to actions_ para lhes dar a forma de um botão. Cantos arredondados funcionam bem, porém alguns usuários podem interpretar mal a chamada à ação, tomando por um anúncio ou _banner_. Como sempre no **desenvolvimento web**, o que vale é o bom senso! Na intenção de fazer os _call to actions_ parecidos com botões, um bom passo nessa direção é usar uma fonte tipográfica única, diferente das do restante da página, de modo a reforçar o "apelo" à ação. A diferença na forma da letra a ajudará a atrair a atenção para o _call to action_. Mais uma vez, **bom senso** na escolha para não destoar completamente do estilo e identidade visual do _site_. ## Cor Não é possível dizer que algum dos **4 elementos para um bom _call to action_** que estão sendo abordados tem mais importância do que os demais, no entanto, a **cor** de seu _call to action_ tem **muita importância**. Uma das formas mais rápidas para agarrar a atenção do usuário é usando um contrastante e visualmente interessante _call to action_. Escolher uma cor que se destaca do resto das cores utilizadas na página irá cumprir sua função. Escolha uma cor que é especificamente exclusiva para sua chamada à ação; uma cor que não seja usada em qualquer outro lugar da página. Por exemplo, se o texto do _site_ é preto e todos os _links_ e botões são azuis, você deve usar cores diferentes de azul ou preto para o seu _call to action_. Ao invés disso, use uma cor mais clara e contrastantes como, por exemplo, o laranja. Ao utilizar laranja, a chamada à ação não ficará despercebida com o resto do azul e preto e vai receber bastante destaque em relação aos outros elementos da página. Também é recomendável que você pratique o **uso de cores de forma apropriada**. É conveniente escolher cores chamativas e contrastantes, mas certifique-se de escolher as cores que se encaixam no esquema de cores geral do _site_. Também tome cuidado ao usar mais de uma chamada à ação na página: se você transformar a página em um arco-íris vai "drenar" o impacto do primeiro _call to action_ e colocar os usuários em estado "não responsivo". ## Posição Posicionar sua _call to action_ "instintivamente", no caminho dos olhos dos usuários, é extremamente importante. Não importa o quão grande, de forma estranha ou brilhantemente e coloridos seja sua chamada à ação seja, os visitantes nunca o verão caso não seja colocado em **uma posição intuitiva**. A posição exata para a sua chamada para a ação vai depender do _layout_ da página, mas, regra geral, o melhor é manter a chamada para ação acima da dobra, numa área de destaque e com a abundância de espaço. Deixando uma boa quantidade de espaço em branco em torno da _call to action_ evita que outros elementos da página interfiram com a importância necessária de estarem ali. Posicione a chamada para ação num local intuitivo, sem qualquer confusão na forma como vai angariar o maior número de conversões. ## Conclusão sobre bons "call to actions" O mais importante é que você não pode ignorar o design de seu _call to action_! 4 elementos de design descritos aqui podem não parecer muito, mas, se bem utilizados, podem fazer maravilhas em sua taxas de conversão! Veja diversos [exemplos de _call to actions_](http://www.smashingmagazine.com/2009/10/13/call-to-action-buttons-examples-and-best-practices/) no artigo da [Smashing Magazine](http://www.smashingmagazine.com/) sobre o assunto. Inspire-se e avalie se você está indo no caminho certo; se está acertando nos julgamentos de _design_ e **estratégia de conversões** de seus projetos. Fazer revisões e aprimoramentos constantes em seus trabalhos é um grande passo para garantir sua qualidade profissional, ao mesmo tempo em que ajudará com que você seja visto como alguém **confiável**, que não "abandona" os _jobs_ realizados, simplesmente. Tem mais alguma dica, exemplo ou comentário a fazer sobre _call to actions_? --- Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR). Guia para agentes: https://dpw.dev/llms.txt Índice completo: https://dpw.dev/sitemap-index.xml Feed: https://dpw.dev/rss.xml