Botão Tímido
CTA sem contraste e sem microcopy de confiança
"O botão de compra é o único elemento da página que PRECISA ser impossível de ignorar."
— Hierarquia Visual
Por que isso mata conversão
O CTA (Call to Action) é a ação mais importante da sua loja. É o momento em que intenção vira receita. Se o botão não tem contraste visual forte, o olho do cliente não encontra ele imediatamente.
Além disso, o texto do botão importa mais do que parece. "Comprar" é genérico. "Adicionar ao carrinho" é o mínimo. "Garantir o meu" ou "Comprar com frete grátis" adiciona urgência e valor. Embaixo do botão, micro-textos como "Troca grátis em 30 dias" ou "Pague em até 12x sem juros" reduzem objeções no momento exato da decisão.
Impacto do Microcopy no CTR do Botão
Testes A/B agregados (referência)
O Princípio do Contraste Absoluto
O botão principal deve ter: (1) a maior diferença de cor em relação ao fundo da página, (2) tamanho proporcionalmente maior que outros elementos clicáveis, (3) microcopy de suporte que reduz a objeção principal do cliente.
Como corrigir hoje
- 1Faça o teste do "piscar": olhe para a página de produto por 2 segundos. Feche os olhos. Abra. O botão de compra é a primeira coisa que você vê? Se não, mude a cor.
- 2Use uma cor que NÃO existe em nenhum outro lugar da página para o botão de compra.
- 3Adicione microcopy abaixo do botão: "Troca grátis em 30 dias", "Pagamento seguro", "12x sem juros".
- 4No mobile, o botão deve ser fixo na parte inferior (sticky) quando o usuário rola além do botão original.
- 5Tamanho mínimo do botão no mobile: 48px de altura, full-width.
- 6Nunca use cinza, branco ou cores pastéis para o CTA principal.
Botão de Compra
- -Cor cinza ou similar ao fundo
- -Texto: "Comprar"
- -Sem microcopy abaixo
- -Tamanho pequeno, alinhado à esquerda
- -Sem destaque visual
- +Cor vibrante e única na página (ex: verde forte)
- +Texto: "Comprar agora – Frete Grátis"
- +Microcopy: "🔒 Pagamento seguro • Troca grátis 30 dias"
- +Full-width no mobile, 48px+ de altura
- +Sticky no mobile ao rolar
Microcopy para abaixo do botão de compra
🔒 Pagamento 100% seguro • Troca grátis em 30 dias • Parcele em até 12x sem juros
Erro Comum: "Meu designer disse que o botão verde é feio"
Bonito não vende. Eficiente vende. O botão de compra não é peça de arte — é ferramenta de conversão. Se o verde é a cor de maior contraste na sua loja, use verde. Depois meça. Se converter mais, o designer vai concordar.
Checklist: Botão que Converte
0/6Teste A/B Simples
Versão A: botão atual. Versão B: botão com cor contrastante + microcopy de segurança abaixo ("Pagamento seguro • Troca grátis"). Meça: taxa de clique no botão e taxa de adição ao carrinho.
Mini-Quiz
1. Qual é a principal função do microcopy abaixo do botão de compra?
Faça agora em 10 minutos
Abra a página do seu produto mais vendido no celular. Faça o teste do piscar. Se o botão não é a primeira coisa que você vê, mude a cor agora. Adicione pelo menos uma frase de confiança abaixo dele.
Métrica para Acompanhar
Taxa de clique no CTA (add-to-cart clicks / product page views). Impacto esperado: aumento de 15% a 35% na taxa de adição ao carrinho.
Resumo do Módulo
- 1O botão de compra precisa ter a cor de maior contraste da página.
- 2Microcopy abaixo do botão reduz objeções no momento crítico.
- 3No mobile, botão sticky + full-width é obrigatório.
Próximos passos para aplicar na sua operação
Depois deste módulo, você pode avançar direto para as páginas principais da Performa.AI e conectar o aprendizado com implementação prática na sua loja.
Perguntas frequentes deste módulo
Use este bloco para revisar a decisão de implementação antes de seguir para o próximo módulo.
O que você aprende no módulo "Botão Tímido"?
Seu botão de compra precisa gritar, não sussurrar. Este conteúdo faz parte do curso Guia Rápido de Conversão e aprofunda cta sem contraste e sem microcopy de confiança.
Como aplicar "Botão Tímido" na prática do e-commerce?
Abra a página do seu produto mais vendido no celular. Faça o teste do piscar. Se o botão não é a primeira coisa que você vê, mude a cor agora. Adicione pelo menos uma frase de confiança abaixo dele.
Quanto tempo leva para implementar os ajustes deste módulo?
A leitura estimada é de 6 min. Com execução focada, você já consegue transformar os principais aprendizados em ação no mesmo dia.
Qual é o próximo passo depois deste módulo?
Depois de aplicar este módulo, avance para "Parcelamento Invisível" em /masterclass/guia-rapido-conversao/modulo-04. O botão de compra precisa ter a cor de maior contraste da página.