Quando um utilizador abre um formulário é porque já decidiu alguma coisa: pedir um orçamento, subscrever uma lista ou concluir uma compra.
Esse passo não deveria levá-lo a mudar de ideias, mas basta um único campo a mais, uma mensagem de erro confusa ou um botão que não explica porque está bloqueado para que abandone a sessão.
Um formulário que segue boas práticas de UX consegue que quase 8 em cada 10 pessoas o preencham bem à primeira; um que não as segue, 4 em cada 10. A diferença não está no que se pede, mas na forma como se pede.
Neste artigo analisamos o custo de um formulário mal desenhado, o que muda quando se aplicam boas práticas de UX e os erros mais comuns a evitar antes de o publicar.
Quanto perde o seu negócio com um formulário mal desenhado
Nem todos os formulários perdem o mesmo quando falham. Um de contacto perde leads, um de compra perde vendas, um de subscrição perde base de dados, e o impacto pode variar muito consoante o tipo.
Em média, um formulário de contacto é concluído por pouco mais de um terço de quem o começa (37,9%), um de compra por pouco mais de metade (58,2%) e um de pedido de orçamento ou demonstração por quase três quartos (74,5%).
Imagine-o no seu próprio funil: em cada 100 pessoas que chegam ao checkout, quantas concluem a compra? A diferença entre esse número e os 100% não é um mistério: são vendas que estavam quase fechadas e ficaram pelo caminho. Multiplique-a pelo seu ticket médio e verá que o problema tem um preço muito concreto na sua conta de resultados.
No B2B a situação muda, mas a pergunta é a mesma: de cada 100 empresas que começam a preencher o seu formulário de pedido de orçamento, quantas chegam a enviá-lo? Aqui não falamos de um ticket de 50 €, mas de leads que podem valer milhares de euros cada um, pelo que perder alguns pelo caminho já tem um impacto direto no pipeline comercial.
Por isso vale a pena rever cada decisão do formulário:
- Esse campo é indispensável para processar a encomenda?
- A mensagem de erro diz o que fazer, e não apenas que algo falhou? O formulário do cartão transmite confiança suficiente para introduzir um número de 16 dígitos?
- Está a pedir um orçamento exato antes de o utilizador confiar na sua empresa?
- Obriga-o a deixar um telefone quando preferiria começar por email?
- Fica claro o que acontece depois de enviar o formulário, ou os dados desaparecem num vazio sem confirmação?
Porque se abandona um formulário: segurança, extensão e perguntas desnecessárias
O motivo mais citado para abandonar não é o preço nem o produto, é a desconfiança perante dados sensíveis: quase 3 em cada 10 pessoas abandonam por dúvidas de segurança. Segue-se a extensão do formulário, com pouco mais de 1 em cada 4, e por fim as perguntas que não parecem ter relação com o que o utilizador quer fazer, com 1 em cada 10.
Aspetos-chave de um bom formulário
Etiquetas visíveis e agrupamento lógico dos campos
O label (etiqueta) indica que informação vai em cada campo e deve ser sempre colocado por cima, nunca substituído por um placeholder (texto de exemplo), que desaparece assim que o utilizador começa a escrever.
Agrupar os campos relacionados (morada, pagamento, contacto) em blocos visuais reduz a sensação de formulário longo, mesmo com os mesmos campos, apoiando-se nos princípios de agrupamento visual da Gestalt.
Menos campos, menos fricção e mais conversão
O checkout médio pode chegar a mostrar quase o dobro dos campos de que realmente se precisa para concluir uma encomenda. Em qualquer formulário ativo, convém perguntar primeiro se a ausência de algum dos campos impediria processar a informação ou entregar a encomenda.
Validar no momento certo, não antes do tempo
A validação ideal acontece quando o utilizador termina de preencher o campo, não enquanto ainda está a escrever. Validar demasiado cedo é frustrante: se o campo de email assinala erro logo após as primeiras letras, avisa de uma falha antes de o utilizador ter acabado de escrever. Feita no momento certo, este tipo de validação reduz os erros até 22% e acelera notavelmente o tempo de preenchimento.
Tornar visível o progresso em formulários longos ou de vários passos
Quando um formulário ultrapassa os 8 ou 10 campos, dividi-lo em passos com um indicador claro, como «Passo 2 de 4», ajuda o utilizador a saber quanto lhe falta e a não o abandonar a meio. Dividir em passos não melhora a conversão por si só: num formulário curto pode acrescentar fricção desnecessária, mas num longo ou com várias decisões ajuda a torná-lo mais fácil de gerir.
Formulário numa só coluna
Um formulário numa só coluna preenche-se, em média, 15 segundos mais depressa do que um com várias colunas, porque o utilizador não tem de se reorientar visualmente entre campos. No ambiente de trabalho (desktop) podem colocar-se na mesma linha campos curtos e relacionados, como localidade e código postal, sem quebrar a ordem de leitura.
Dica: ligue e meça bem o seu formulário
Embora neste artigo nos concentremos na experiência do utilizador, um formulário bem desenhado de nada serve se os dados não chegam a lado nenhum ou se não estão a ser medidos corretamente. Se a sua loja utiliza PrestaShop, o módulo Google Tag Manager + Google Analytics 4 (GA4) PRO ajuda a registar os eventos da loja.
Lembre-se: o design e os dados têm sempre de andar juntos. Antes de publicar, convém rever estes quatro pontos:
Tipos de formulário consoante a estrutura
Formulário num só ecrã vs. de vários passos
Um formulário num só ecrã funciona melhor quando a compra ou o registo é simples e não há demasiados campos para preencher: o utilizador vê tudo de relance e conclui o processo sem interrupções.
Um formulário de vários passos, pelo contrário, faz sentido quando há várias decisões ou blocos de informação distintos (dados pessoais, envio, pagamento): dividi-lo reduz a sensação de formulário longo, embora acrescente uma fricção visual que só se justifica se o conteúdo o exigir.
Mensagens de erro específicas vs. genéricas
Uma mensagem de erro específica identifica exatamente o que falta ou o que está errado, em vez de se limitar a assinalar que algo falhou. Se o problema tiver uma solução alternativa, como um dado que já existe no sistema, ofereça-a diretamente (em vez de rejeitar apenas o dado completo) para o resolver com indicações concretas e evitar o abandono do formulário.
Indicador de progresso claro
Em formulários longos ou divididos em passos, mostrar em que ponto está o utilizador («Passo 2 de 4») ajuda a minimizar o abandono a meio. O formato pode variar (número de passos, percentagem, barra visual), mas a função é sempre a mesma: que o utilizador saiba quanto lhe falta antes de começar a impacientar-se.
Atenção: não convém passar de quatro passos. A partir daí, cada ecrã extra reduz a probabilidade de o utilizador concluir o formulário.
Erros que disparam o abandono em qualquer formulário (e como reduzi-los no seu site)
Pedir informação desnecessária antes de concluir a ação
Cada campo adicional aumenta o esforço necessário para terminar. Antes de o manter, convém perguntar se a sua ausência impediria processar a ação: um segundo telefone, uma data de nascimento sem relação com a compra ou uma pergunta sobre preferências comerciais costumam poder adiar-se para outra fase, tornar-se opcionais ou eliminar-se diretamente.
Mensagens de erro pouco claras
Uma mensagem como «dado incorreto» avisa de que existe um problema mas não ajuda a resolvê-lo. O cliente tem de adivinhar que campo falhou e que formato se espera, quando a mensagem deveria identificar o problema e indicar como corrigi-lo, sempre junto ao campo correspondente.
Botões desativados sem explicação
Um botão bloqueado sem qualquer indicação deixa o utilizador sem saber o que falta completar. Manter o botão sempre ativo e, ao tentar continuar, assinalar os campos pendentes é mais claro do que deixar um botão cinzento sem contexto.
Um botão que apaga tudo o que o utilizador escreveu
Os botões de «repor» ou «apagar formulário» não resolvem nenhum problema real do utilizador e introduzem o risco de alguém perder o seu trabalho com um clique acidental. Se o formulário recolhe dados sensíveis e o utilizador quer desistir deliberadamente, basta um botão de cancelar, sempre com muito menos destaque visual do que o de enviar.
Formulário não acessível nem navegável por teclado
O formulário deveria poder ser preenchido sem usar o rato, com uma ordem de tabulação lógica e cada campo com o seu label corretamente associado. Os erros também devem poder ser anunciados a leitores de ecrã e estar ligados ao campo correspondente, e não apenas assinalados com cor.
Checklist para reduzir o abandono nos seus formulários
Faça a si próprio estas perguntas-chave antes de publicar qualquer formulário no seu site:
- Cada campo é indispensável para concluir a ação, ou pode ser eliminado, adiado ou marcado como opcional?
- Os labels permanecem sempre visíveis enquanto o utilizador preenche e revê os seus dados?
- Os erros aparecem junto ao campo afetado e explicam como corrigi-los?
- O formulário foi testado num telemóvel real, com preenchimento automático e o teclado adequado a cada tipo de dado?
- Pode ser preenchido por completo com o teclado e mantém uma ordem de foco lógica?
- Fica claro o progresso quando o formulário está dividido em vários passos?
- Mede-se em que campos se produzem mais erros ou abandonos, para dar prioridade às melhorias?
Lembre-se: nada disto exige uma remodelação completa do site. Na maioria das vezes basta rever o formulário campo a campo: o que se pede, quando aparece um erro e quanto tempo demora o utilizador a chegar ao fim.
Se não sabe por onde começar, na Línea Gráfica analisamos o seu site no âmbito do nosso serviço de otimização de conversões (CRO) e dizemos-lhe exatamente o que está a travar as suas conversões.
Fontes
FormStory — Form Abandonment Statistics: https://formstory.io/learn/form-abandonment-statistics/
FinancesOnline — 109 Online Form Abandonment Statistics: https://financesonline.com/form-abandonment-statistics/
Nielsen Norman Group — Website Forms Usability: Top 10 Recommendations: https://www.nngroup.com/articles/web-form-design/
Feathery — 150 Online Form Statistics: https://www.feathery.io/blog/online-form-statistics
Marketing4ecommerce — Los 5 mejores checkouts del eCommerce español (em espanhol): https://marketing4ecommerce.net/formularios-de-checkout-y-registro-de-5-grandes-ecommerces/
uiFromMars — Diseño de formularios: por qué el 67% los abandona (y cómo evitarlo) (em espanhol): https://uifrommars.com/diseno-formularios-reducir-abandono/
CXL — Form Design Principles: 13 Empirically Backed Best Practices: https://cxl.com/blog/form-design-best-practices/
WPForms — 101 Unbelievable Online Form Statistics & Facts: https://wpforms.com/online-form-statistics-facts/
Stripe — Proceso de compra de una página vs. de varios pasos (em espanhol): https://stripe.com/mx/resources/more/one-page-checkout-vs-multistep-checkout
Shopify — Pago en una página (em espanhol): https://www.shopify.com/es/blog/pago-en-una-pagina
