A chamada para ação (CTA), também conhecida como botão de Call To Action, é o elemento fundamental de uma interface. O botão de CTA é a principal ferramenta de conversão. É onde as decisões do usuário se transformam em ação.

<div class="mq_ar_9f38462c ae_ar_9f38462c css-86" title="Além do “clique aqui”: como escrever bons textos para botões" role="heading" aria-level="1" data-automation-id="TitleTextId">
<div class="mq_ar_9f38462c ae_ar_9f38462c css-86" title="Além do “clique aqui”: como escrever bons textos para botões" role="heading" aria-level="1" data-automation-id="TitleTextId">
<p>A chamada para ação (CTA), também conhecida como botão de Call To Action, é o elemento fundamental de uma interface. O botão de CTA é a principal ferramenta de conversão. É onde as decisões do usuário se transformam em ação. Devemos dar toda a atenção necessária ao planejar uma tela, tanto em termos de design visual quanto de texto. Um botão pode ter um design visual impecável, mas se o texto que o acompanha estiver confuso, a experiência do usuário e a usabilidade do sistema serão prejudicadas. Por isso, apresentamos algumas dicas com estratégias de <a href="https://www.dtidigital.com.br/blog/ux-writing">UX Writing.</a></p>
<div id="toc_container" class="toc_white no_bullets"><p class="toc_title">Sum&aacute;rio</p><ul class="toc_list"><li><a href="#Pense-sempre-na-geracao-de-valor-do-CTA-e-nao-na-acao-a-ser-realizada"><span class="toc_number toc_depth_1">1</span> Pense sempre na geração de valor do CTA, e não na ação a ser realizada</a></li><li><a href="#Esqueca-o-sim-ou-nao-para-CTA"><span class="toc_number toc_depth_1">2</span> Esqueça o “sim ou não” para CTA</a></li><li><a href="#Use-termos-consistentes-e-especificos"><span class="toc_number toc_depth_1">3</span> Use termos consistentes e específicos </a></li><li><a href="#Fale-a-lingua-de-quem-vai-usar-seu-produto"><span class="toc_number toc_depth_1">4</span> Fale a língua de quem vai usar seu produto</a></li><li><a href="#Use-os-padroes-que-ja-existem-em-CTA"><span class="toc_number toc_depth_1">5</span> Use os padrões que já existem em CTA</a></li></ul></div>
<h2><span id="Pense-sempre-na-geracao-de-valor-do-CTA-e-nao-na-acao-a-ser-realizada"><strong>Pense sempre na geração de valor do CTA, e não na ação a ser realizada</strong></span></h2>
<p>O objetivo de qualquer interface é resolver um problema ou responder a algum desejo de quem a utiliza. Por isso, faz mais sentido escrever qual será o valor gerado por aquele clique, ao invés de redigir uma descrição simples da ação a ser realizada. Isso é especialmente importante para botões em landing pages e CTAs. Ao apresentar logo de cara os ganhos gerados pela interação, a taxa de conversão desses botões será muito mais alta.</p>
<p>Em um produto que faz o envio de pacotes, por exemplo, pode ser necessário fazer um cadastro antes de completar a solicitação. Nesse caso, mesmo que a ação imediata do botão seja levar a pessoa usuária ao formulário de cadastro, o melhor texto  não deve falar sobre isso, mas sim sobre a entrega dos pacotes, que será o valor real gerado por aquela interação (mesmo que isso demore mais alguns passos).</p>
<p><img fetchpriority="high" decoding="async" class="alignnone wp-image-22545" src="http://www.cms.dtidigital.com.br/wp-content/uploads/2022/03/Botoes.png" alt="A imagem contém dois botões azuis lado a lado. O da esquerda diz &quot;Cadastre-se&quot; e o da direita, &quot;Quero enviar um pacote&quot;" width="1096" height="102" srcset="https://www.cms.dtidigital.com.br/wp-content/uploads/2022/03/Botoes.png 1600w, https://www.cms.dtidigital.com.br/wp-content/uploads/2022/03/Botoes-300x28.png 300w, https://www.cms.dtidigital.com.br/wp-content/uploads/2022/03/Botoes-1024x95.png 1024w, https://www.cms.dtidigital.com.br/wp-content/uploads/2022/03/Botoes-768x72.png 768w, https://www.cms.dtidigital.com.br/wp-content/uploads/2022/03/Botoes-1536x143.png 1536w" sizes="(max-width: 1096px) 100vw, 1096px" /></p>
<h2><span id="Esqueca-o-sim-ou-nao-para-CTA"><strong>Esqueça o “sim ou não” para CTA</strong></span></h2>
<p>É muito comum que as pessoas apenas escaneiem os textos das interfaces, ao invés de ler tudo com cuidado. Por isso, botões que usam verbos para confirmação de ações no sistema acabam criando um atalho de entendimento para as pessoas usuárias.</p>
<p>Existem exceções, claro, onde o texto explicativo é mais complexo e não há uma ação clara que possa ser compreendida com poucas palavras. No entanto, o ideal é que o texto do botão tenha a <a href="https://uxmovement.medium.com/5-rules-for-choosing-the-right-words-on-button-labels-dc3f74c2c2a3">capacidade de fornecer o direcionamento necessário para o clique de forma independente.</a></p>
<p><img decoding="async" class="alignnone wp-image-22546" src="http://www.cms.dtidigital.com.br/wp-content/uploads/2022/03/Salvar-alteracoes.png" alt="Modal de salvar com texto &quot;Salvar alterações - Deseja salvar as alterações feitas no documento?&quot; e dois modais, o da esquerda possui contorno azul claro e fundo branco e texto &quot;Sair&quot;, e o da direita possui fundo azul escuro e o texto &quot;Salvar&quot;." width="1193" height="412" srcset="https://www.cms.dtidigital.com.br/wp-content/uploads/2022/03/Salvar-alteracoes.png 1481w, https://www.cms.dtidigital.com.br/wp-content/uploads/2022/03/Salvar-alteracoes-300x104.png 300w, https://www.cms.dtidigital.com.br/wp-content/uploads/2022/03/Salvar-alteracoes-1024x354.png 1024w, https://www.cms.dtidigital.com.br/wp-content/uploads/2022/03/Salvar-alteracoes-768x266.png 768w" sizes="(max-width: 1193px) 100vw, 1193px" /></p>
<h2><span id="Use-termos-consistentes-e-especificos"><strong>Use termos consistentes e específicos </strong></span></h2>
<p>Ao se referir a uma certa ação ou conteúdo do sistema de alguma forma, é importante usar os mesmos termos durante todas as interações similares. Manter o texto consistente é crucial para ter uma interação fluida e evitar atritos de comunicação.</p>
<p>Além disso, também é importante prestar atenção no significado específico dos termos. Existem palavras que podem parecer sinônimos exatos, mas na verdade têm significados levemente diferentes, mas o suficiente para alterar o entendimento das pessoas usuárias.</p>
<p>Nesse exemplo, o card da direita pode ficar confuso ao usar os termos “remover” e “deletar” num mesmo contexto. O card à esquerda apresenta consistência e usa o termo mais adequado para a situação.</p>
<p><img decoding="async" class="alignnone wp-image-22571" src="http://www.cms.dtidigital.com.br/wp-content/uploads/2022/03/Remover-musica.png" alt="Dois modais lado a lado com textos iguais e dois botões. No modal da esquerda temos o botão da esquerda com contorno azul claro, fundo branco e texto &quot;Cancelar&quot; e botão da direita com fundo azul claro e texto &quot;Remover&quot;. No modal da direita temos o botão da esquerda com contorno azul claro, fundo branco e texto &quot;Cancelar&quot; e botão da direita com fundo azul claro e texto &quot;Deletar&quot;" width="1184" height="198" srcset="https://www.cms.dtidigital.com.br/wp-content/uploads/2022/03/Remover-musica.png 1600w, https://www.cms.dtidigital.com.br/wp-content/uploads/2022/03/Remover-musica-300x50.png 300w, https://www.cms.dtidigital.com.br/wp-content/uploads/2022/03/Remover-musica-1024x171.png 1024w, https://www.cms.dtidigital.com.br/wp-content/uploads/2022/03/Remover-musica-768x128.png 768w, https://www.cms.dtidigital.com.br/wp-content/uploads/2022/03/Remover-musica-1536x256.png 1536w" sizes="(max-width: 1184px) 100vw, 1184px" /></p>
<h2><span id="Fale-a-lingua-de-quem-vai-usar-seu-produto"><strong>Fale a língua de quem vai usar seu produto</strong></span></h2>
<p>Para garantir eficácia, é necessário que as pessoas que utilizarão a interface estejam familiarizadas com a linguagem utilizada. Alguns exemplos de linguagem inadequada: explicações complexas sobre um sistema para um usuário leigo ou o uso de expressões regionais em um produto global.</p>
<p>Por exemplo, usar o termo spam para se referir a e-mails indesejados já se tornou um padrão, mas para alguns grupos de pessoas, a expressão ainda pode ser confusa. Por isso, é  importante realizar testes e pesquisas para garantir que <a href="https://brasil.uxdesign.cc/afinal-qual-o-nome-do-bot%C3%A3o-d70494c585ec">a linguagem do seu produto está adequada ao seu público</a>.</p>
<p><img loading="lazy" decoding="async" class="alignnone wp-image-22573" src="http://www.cms.dtidigital.com.br/wp-content/uploads/2022/03/Lixo-eletronico-Spam.png" alt="Dois botões com fundo azul escuro. O botão da esquerda diz &quot;Lixo eletrônico&quot; e o botão da direita diz &quot;Spam&quot;." width="1128" height="105" srcset="https://www.cms.dtidigital.com.br/wp-content/uploads/2022/03/Lixo-eletronico-Spam.png 1600w, https://www.cms.dtidigital.com.br/wp-content/uploads/2022/03/Lixo-eletronico-Spam-300x28.png 300w, https://www.cms.dtidigital.com.br/wp-content/uploads/2022/03/Lixo-eletronico-Spam-1024x95.png 1024w, https://www.cms.dtidigital.com.br/wp-content/uploads/2022/03/Lixo-eletronico-Spam-768x72.png 768w, https://www.cms.dtidigital.com.br/wp-content/uploads/2022/03/Lixo-eletronico-Spam-1536x143.png 1536w" sizes="(max-width: 1128px) 100vw, 1128px" /></p>
<h2><span id="Use-os-padroes-que-ja-existem-em-CTA"><strong>Use os padrões que já existem em CTA</strong></span></h2>
<p>Nesse caso, o texto segue um princípio parecido com o dos ícones: se já existe um padrão nas interfaces dos produtos que usamos, é bom reproduzi-lo. Ao interagir com um sistema novo, a tarefa da pessoa usuária fica muito mais fácil se ela já estiver familiarizada com o contexto dos termos usados na interface.</p>
<p>Um exemplo é o botão “Adicionar ao carrinho”, como forma de selecionar um item para compra. É um texto que já demonstra a intenção de compra, mas não a conclusão e pagamento imediato. Tentar alterar esse texto pode deixar as pessoas confusas, e até influenciar na taxa de conversão.</p>
<p><img loading="lazy" decoding="async" class="alignnone wp-image-22574" src="http://www.cms.dtidigital.com.br/wp-content/uploads/2022/03/Comprar-adicionar-ao-carrinho.png" alt="Dois botões azul claro. O botão da esquerda diz &quot;Comprar&quot; e o botão da direita diz &quot;Adicionar ao carrinho&quot;." width="1128" height="105" srcset="https://www.cms.dtidigital.com.br/wp-content/uploads/2022/03/Comprar-adicionar-ao-carrinho.png 1600w, https://www.cms.dtidigital.com.br/wp-content/uploads/2022/03/Comprar-adicionar-ao-carrinho-300x28.png 300w, https://www.cms.dtidigital.com.br/wp-content/uploads/2022/03/Comprar-adicionar-ao-carrinho-1024x95.png 1024w, https://www.cms.dtidigital.com.br/wp-content/uploads/2022/03/Comprar-adicionar-ao-carrinho-768x72.png 768w, https://www.cms.dtidigital.com.br/wp-content/uploads/2022/03/Comprar-adicionar-ao-carrinho-1536x143.png 1536w" sizes="(max-width: 1128px) 100vw, 1128px" /></p>
<p>Além de seguir essas dicas, é importante realizar testes constantes com o conteúdo da sua interface. Acompanhar as decisões dos usuários de perto é a melhor solução para compreender o texto mais adequado. Seja com testes A/B, de usabilidade (supervisionados ou não), ou testes específicos para conteúdo, é a partir do feedback das pessoas usuárias que conseguimos ter a certeza de que o texto do produto está realmente funcionando.</p>
</div>
<p><strong>Por: Luiza Christófaro Bragança</strong></p>
</div>


Chegou o momento de impulsionar os resultados da sua empresa! Para entrar em contato com a gente, clique no botão abaixo e preencha o formulário.

Além do “clique aqui”: como escrever bons textos para botõe de CTA

One-stop shop em tecnologia

Confira outros artigos