O botão de envio de formulário com pior desempenho na maioria dos estudos é sempre o mesmo. Não tem cor própria. Mistura-se com a página. A etiqueta tem uma só palavra. E funciona de forma fiável em todos os websites que querem menos conversões.
Esse botão diz "Enviar".
Nem todos os visitantes que chegam ao teu botão estão prontos para clicar. Alguns ainda estão a decidir. Alguns estão nervosos. Alguns procuram a garantia de que preencher este formulário vale o seu tempo. O botão é muitas vezes a última impressão que decide se avançam. Uma etiqueta genérica de uma palavra deixa-os a preencher essa garantia por si. Um botão bem pensado, com texto específico, remove a dúvida.
Este capítulo explica o que o texto, a cor e a posição do botão realmente mudam nas taxas de envio dos formulários, como o contexto do teu formulário afeta o texto de botão que funciona e como evitar os padrões de design e de texto que matam as conversões sem dares por isso.
Que texto de botão afeta realmente a conversão
A investigação sobre botões de chamada para ação mostra padrões consistentes. Os botões genéricos como "Enviar" e "Submeter" rendem 30 a 40 por cento menos do que o texto específico da ação. Um botão que diz "Quero a minha proposta grátis" converte mais do que um que diz "Enviar". Um botão que diz "Confirmar o meu registo" funciona melhor do que "Enviar". Mas isto não é ser engenhoso com as palavras. É ser claro sobre os resultados.
Quando um visitante pára o rato sobre um botão com a etiqueta "Enviar", está a responder a uma pergunta implícita. O que estou a enviar? Para onde vai? O que acontece a seguir? Não tem a resposta. Está a fazer uma suposição. O texto genérico de botão cria atrito porque obriga o visitante a deduzir o que vem a seguir.
O texto de botão específico e orientado para a ação responde a essa pergunta de imediato. "Quero a minha proposta grátis" diz ao visitante exatamente o que acontece quando clica. "Confirmar o meu registo" explica o passo seguinte. "Pedir uma demonstração" deixa claro que está a iniciar uma conversa, não a comprometer-se com algo desconhecido.
O padrão repete-se em vários tipos de formulários e setores. Num estudo de um instituto de investigação em usabilidade sobre formulários de pagamento, "Concluir encomenda" superou "Enviar" em 25 por cento na taxa de conversão. Num teste de uma empresa de software de marketing a formulários de contacto, "Enviar o meu pedido" bateu "Enviar" em 18 por cento. Numa análise de testes de taxa de conversão em 50 lojas online, os botões que incluíam um benefício ou um passo seguinte superaram as ações de uma só palavra em 23 por cento, em média.
A melhoria não é pequena. Não é uma otimização de 2 por cento. É mudar a taxa de envio do teu formulário de 15 por cento para 19 por cento. Ou de 300 envios por mês para 370. O texto do botão é uma das alterações de maior alavancagem que podes fazer a um formulário.
Texto do botão por tipo de formulário
O mesmo texto de chamada para ação não funciona em todos os formulários. O contexto em que alguém preenche um formulário determina a que texto de botão responde.
Formulários de inscrição e de registo
Quando alguém cria uma conta, está a comprometer-se com algo. A decisão normalmente já está tomada. Já não pergunta "devo?". Pergunta "vai funcionar?" e "é seguro?". O texto do botão num registo deve confirmar a ação e dar tranquilidade.
Padrões eficazes: "Criar a minha conta", "Vamos começar", "Confirmar o meu registo". Evita o genérico "Enviar". Evita etiquetas que pareçam definitivas ou pesadas, como "Comprometer-me com a criação de conta". Mantém o tom leve e a avançar.
Nos registos com palavra-passe, o texto do botão pode reconhecer o atrito: "Criar palavra-passe e continuar". Isto diz ao visitante que não está a criar uma palavra-passe sem motivo. É um passo para algo. A ação é clara.
Formulários de contacto e de pedido de informação
Os formulários de contacto beneficiam de um texto de botão conversacional e humano. O visitante está a contactar-te. Está a pedir algo. O botão deve soar como se reconhecesses esse pedido.
Padrões eficazes: "Enviar o meu pedido", "Entrar em contacto", "Enviar a minha mensagem", "Pedir mais informações". Fazem o formulário parecer uma conversa, não um despejo de dados.
Evita a linguagem clínica ou formal. Não digas "Submeter pedido". Diz "Enviar o meu pedido". A diferença é subtil. Um parece uma transação. O outro parece falar com uma pessoa.
Formulários de marcação e de reserva
Quando alguém preenche um formulário de marcação, a intenção já está confirmada. Quer a marcação. O texto do botão deve ser direto e tirar dúvidas sobre o que vem a seguir.
Padrões eficazes: "Confirmar a minha marcação", "Marcar a minha sessão", "Agendar a minha chamada", "Reservar o meu lugar". Reconhecem que a pessoa já decidiu. O botão é o passo final de confirmação.
Evita tudo o que crie ambiguidade. "Reservar" funciona. "Inscrever-me" dá menos clareza sobre o que se está a reservar. A clareza nesta fase aumenta as taxas de conclusão.
Formulários de pagamento
O pagamento numa loja online é onde há mais a perder com um texto de botão vago. Cada palavra aqui afeta diretamente a receita. O visitante está pronto para comprar. Não crie hesitação.
Padrões eficazes: "Concluir a minha compra", "Pagar agora", "Finalizar encomenda", "Comprar agora". Algumas lojas testam textos centrados no benefício, como "Quero o meu [product name]", para reforçar o que recebem e não o que pagam.
Nunca uses o genérico "Enviar". Testa se "Concluir a minha compra" ou "Comprar agora" rende melhor para o teu público. Alguns setores e escalões de preço respondem a linguagem diferente. Mas ambos superam uma etiqueta genérica.
Formulários de opinião e de inquérito
Os botões de inquéritos devem parecer rápidos e fáceis. O visitante está a fazer-te um favor. O texto do botão deve reconhecê-lo e tornar tudo sem esforço.
Padrões eficazes: "Enviar a minha opinião", "Enviar a minha resposta", "Partilhar o que penso". Parecem rápidos. Evita linguagem que faça a opinião parecer uma submissão formal. "Enviar a minha opinião" parece mais leve do que "Submeter inquérito".
Qualificação de contactos e formulários B2B
Os formulários B2B pedem muitas vezes mais informação porque estão a filtrar contactos. O texto do botão pode reconhecer o que vem a seguir sem afastar ninguém.
Padrões eficazes: "Pedir uma proposta", "Agendar uma consulta", "Começar o meu teste grátis", "Pedir um orçamento à medida". Deixam claro qual é o passo seguinte. O visitante não receia estar a comprometer-se com algo vago.
O design do botão afeta as taxas de clique mais do que a maioria das pessoas pensa
O texto do botão é só parte da história. O aspeto do botão e o sítio onde está na página determinam se alguém sequer o vê como clicável.
Contraste de cor e destaque visual
Um botão que se mistura com o fundo da página recebe menos cliques do que um botão com alto contraste. Não se trata de design vistoso. Trata-se de ser fácil de encontrar. Se um botão não se destaca visualmente do formulário, o visitante pode simplesmente não o ver.
Os botões eficazes têm um contraste de cor de pelo menos 4,5 para 1 em relação ao fundo. Na prática, isto quer dizer que a cor do botão deve ser claramente diferente do fundo da página e dos outros elementos do formulário.
Testa o que funciona para a tua marca. Algumas marcas usam uma cor própria que naturalmente se destaca. Outras usam cores quentes, como laranja ou vermelho, sobre fundos frios, como cinzento ou branco. A cor específica importa menos do que o contraste. Torna o botão fácil de encontrar.
Tamanho e espaço em branco
Os botões demasiado pequenos não parecem clicáveis. Os demasiado grandes parecem insistentes. O tamanho certo é relativo ao formulário e à página. Um botão que ocupa metade da largura do formulário parece agressivo. Um botão com 150 píxeis de largura num formulário de contacto de largura total parece adequado.
O espaço em branco à volta do botão aumenta as taxas de clique. Um botão rodeado de outros elementos do formulário mistura-se. Um botão com espaço livre à volta destaca-se e parece clicável. Acrescenta margem acima e abaixo do botão. Deixa-o respirar.
Forma e estilo do botão
Os cantos arredondados parecem mais modernos e simpáticos. Os cantos retos parecem mais corporativos ou técnicos. Nenhum é melhor em geral. Testa que estilo combina com a tua marca e o teu público.
Os botões sólidos com fundo bem definido têm melhor desempenho do que os botões só com contorno ou os fantasma, na maioria dos contextos de formulários. Um botão só com contorno que combina com o estilo do formulário mistura-se. Um botão sólido e contrastante destaca-se.
As sombras e os efeitos ao passar o rato aumentam a sensação de que algo é clicável. Um botão que muda de cor ou tem um estado visível ao passar o rato mostra ao visitante que responde à interação.
Tamanho do botão no telemóvel
Os utilizadores de telemóvel tocam com o polegar. Um botão demasiado pequeno recebe toques falhados. Uma das grandes plataformas de telemóveis recomenda uma área de toque mínima de 44 por 44 píxeis. O Android recomenda 48 por 48 píxeis. Os formulários no telemóvel devem ter botões grandes o suficiente para que o toque de um polegar acerte de forma fiável.
No telemóvel, os botões costumam empilhar-se na vertical. Um botão de largura total parece mais clicável do que um botão só parcialmente visível. Um botão fixo que continua visível enquanto se desce pelo formulário aumenta as taxas de conclusão no telemóvel.
A posição determina quem vê o botão
O melhor texto e o melhor design de botão não ajudam se as pessoas passarem por ele sem reparar. O sítio onde o botão está na página afeta a visibilidade.
Botões na parte visível sem scroll
O ideal é o botão principal ser visível sem fazer scroll no computador. Se o formulário ocupa quase todo o ecrã, pode ser preciso descer para chegar ao botão. É inevitável. Mas se houver espaço na parte visível, põe lá o botão para o visitante não ter de o procurar.
Botões fixos no telemóvel
Os formulários de telemóvel exigem muitas vezes scroll. Um botão fixo que fica visível no fundo do ecrã aumenta as taxas de conclusão. O visitante nunca perde o botão de vista enquanto preenche os campos. Pode concluir a qualquer momento sem ter de descer até ao fim.
Botões principais e secundários
Alguns formulários têm vários botões. "Enviar", "Guardar como rascunho", "Passo seguinte". Quando tens vários botões, torna a ação principal visualmente dominante. Um botão principal forte deve ser claramente mais clicável do que as opções secundárias. Usa a cor, o tamanho ou a posição para mostrar a hierarquia.
Um erro comum é fazer os botões principal e secundário idênticos. Se "Cancelar" e "Enviar" têm o mesmo tamanho e cor, alguns visitantes clicam no errado. Os designers testam isto e descobrem que fazer o botão principal 30 a 40 por cento maior do que os secundários reduz os cancelamentos acidentais.
O texto por baixo do botão aumenta a conclusão
O botão em si é só a interação final. O texto por baixo ou junto ao botão dá a última garantia que empurra os visitantes hesitantes a clicar.
O texto de garantia responde à objeção final. Se o teu formulário pede um endereço de email, uma linha por baixo do botão a dizer "Nunca partilhamos a tua informação" remove a última razão para não enviar. Se o formulário exige um número de telefone, "Sem chamadas de spam, contactamos-te num dia útil" cria confiança.
Este texto de garantia deve ser pequeno e secundário. Já não estás a vender. Estás a responder à última dúvida. Exemplos: "Respondemos-te em 24 horas", "Os teus dados estão sempre protegidos", "Não é preciso cartão de crédito para começar o teu teste grátis", "A tua privacidade é a nossa prioridade".
Os testes mostram que o texto de garantia por baixo dos botões aumenta as taxas de conclusão em 3 a 5 por cento nos formulários de grande atrito. Nos formulários de baixo atrito, como as newsletters, o impacto é menor. Nos formulários B2B que pedem muita informação, o texto de garantia pode aumentar as conclusões em 10 por cento ou mais.
Estados de erro e feedback de carregamento
O que acontece depois de alguém clicar no botão determina se se sente confiante quanto ao envio.
Estado desativado durante o envio
Quando alguém clica no botão, desativa-o de imediato. Um botão desativado evita envios duplicados. Mais importante, mostra ao visitante que o clique foi registado. O botão deve mostrar um estado de carregamento: "A enviar..." ou um indicador a rodar ou texto animado.
Sem um estado de carregamento, o visitante não sabe se o clique funcionou. Pode clicar outra vez. Pode fechar o navegador. Um atraso de um segundo entre o clique e qualquer feedback parece longo para um utilizador. Mostra logo que algo está a acontecer.
Texto para recuperar de erros
Quando o envio de um formulário falha, o botão e o texto à volta devem explicar o que correu mal e o que fazer a seguir. Não mostres só uma mensagem de erro no topo do formulário. Atualiza o próprio botão.
Um botão que diz "Tentar novamente" é mais útil do que "Enviar" quando ocorre um erro. O texto junto ao botão deve explicar em concreto o que falhou: "Este email já está registado" ou "Preenche todos os campos obrigatórios."
Torna a recuperação de erros evidente. Alguns formulários destacam o campo com problema. Alguns mostram mensagens de erro junto ao campo. Alguns fazem as duas coisas. Quanto mais claro o erro, mais depressa o visitante o corrige.
Formulários WEMASY e otimização do botão de enviar
O criador de formulários do WEMASY permite personalizar o texto, o design e a posição do botão para combinar com a estratégia do teu formulário. Podes definir texto de botão diferente para tipos de formulário diferentes. Podes acrescentar lógica condicional que muda a etiqueta do botão com base nas respostas. Podes personalizar as cores, o tamanho e o estilo do botão para combinar com a tua marca.
A análise de formulários mostra que campos causam abandono. Se o teu botão tem uma taxa de abandono alta em particular, é sinal de que o texto ou o design do botão precisa de ser testado. Se os visitantes chegam ao botão mas não clicam, testa texto e designs diferentes sem refazer o formulário.
Vê como o criador de formulários do WEMASY trata da personalização de botões e da análise de formulários. Para saber mais sobre textos de formulários que levam à conclusão, lê sobre como escrever etiquetas e textos de ajuda que funcionam e o que causa o abandono de formulários e como evitá-lo.