Por que ocorrem falhas nas submissões e como reduzi-las
Este artigo faz parte de uma série sobre otimização de campos de formulário específicos. Links para outros artigos da série estão abaixo:
Otimizando o campo de título
O que é um envio de formulário com falha?
Simplificando, um envio com falha ocorre quando alguém passa pelo seu formulário ou finaliza a compra, depois de fornecer todas as suas informações pessoais valiosas, clica em enviar, mas não consegue passar para a dados do exterior próxima etapa do processo.
Isso é como deixar dinheiro na mesa – essas pessoas querem gastar / registrar-se com você. Elas se esforçaram para preencher seu formulário, mas não conseguem progredir porque algo deu errado.
Não é um problema incomum. Quando olhamos para os dados do Zuko para formulários , frequentemente vemos que o botão de envio tem o maior volume de abandono e, frequentemente, a maior taxa de abandono também.
Este é um exemplo clássico de dados do Zuko revelando alto abandono no botão de envio
Este artigo prova social: use-a para aumentar as vendas examina problemas em torno do botão de envio que podem causar abandono do usuário. Ele analisa como identificar, diagnosticar e corrigir esses problemas para aumentar a conversão (você pode ler um artigo sobre abandono de formulário mais geral aqui ).
A primeira coisa a ser notada informações ricas é que altas taxas de abandono no botão de envio podem não indicar um problema com o botão em si, mas revelar problemas com a experiência do formulário antes desse ponto. Há mais sobre isso depois, mas para começar, veremos algumas das possibilidades que você pode verificar e corrigir para tornar o UX do botão de envio o mais suave possível.
Possibilidade 1 – É um problema técnico
Felizmente, com um bom QA isso não é provável, mas ao longo dos anos vimos muitos exemplos de botões de envio quebrados, acabando com qualquer chance do usuário enviar o formulário com sucesso. Aqui estão algumas coisas a serem observadas:
O envio é muito lento
Seu envio está demorando muito? Talvez o usuário esteja clicando furiosamente várias vezes, o que está fazendo com que o formulário seja enviado mais de uma vez e possivelmente atrapalhando o processo.
O gatilho de envio está redefinindo campos
Não é estritamente uma questão puramente técnica, mas é bem próximo disso. Alguns formulários redefinem a entrada de campo (ou seja, excluem o que foi inserido anteriormente) se o envio não for bem-sucedido devido a um erro. Nem é preciso dizer que isso pode ser muito frustrante para o usuário se seu trabalho duro for desfeito devido a um único erro (como esta esquete sobre formulários do comediante britânico Michael McIntyre demonstra apropriadamente).
O botão está quebrado
Às vezes, as coisas simplesmente quebram: seu botão não funciona mais e não envia o formulário.
Então, como você descobre e diagnostica esses tipos de problemas? Algum nível de rastreamento de erros de back-end por meio de um provedor como o Sentry pode ser útil ou você pode usar a funcionalidade de alerta no Zuko para notificá-lo quando houver uma queda repentina nos envios para que você possa ir e verificar se há um problema.
Possibilidade 2 – É uma questão de design de IU
A maneira como você projeta seu formulário pode, às vezes, ter um impacto negativo na experiência do usuário. Aquele esquema de cores de aparência estranha que ficou ótimo na reunião pode estar causando confusão e abandono no mundo real. Fique de olho em problemas como estes:
O botão de envio é difícil de ver ou clicar
Se o usuário não puder ver o botão de envio, ele não poderá clicar nele!
Você precisa ter certeza de que é óbvio onde clicar para enviar. Primeiro, você precisa garantir que o botão tenha o tamanho adequado – um mínimo de 44px para torná-lo adequadamente acessível e tocável no formato móvel.
Então, dê uma olhada nas cores e contraste do fundo, botão e texto e garanta que eles sejam claramente distinguíveis e visíveis. Este guia é um bom lugar para começar .
Por fim, certifique-se de que seu botão se parece com um botão. A lei de Jakob , ou a lei da familiaridade, infere que fazer algo diferente de outros sites aos quais o usuário não está acostumado pode levar à confusão. Agora não é hora de ser original. Não tente ser muito inteligente com seu botão. Não pense que usar um link de texto seria útil e definitivamente não opte por um botão fantasma que dificilmente pode ser visto ( este estudo de caso citou 20% menos cliques em um botão fantasma em comparação a um botão sólido).
Não complique as coisas como esse botão fantasma – o usuário não vai agradecer
O CTA não é claro
Você está rotulando seu botão de envio com texto sem graça como “Enviar”? Você pode estar perdendo um truque. Se você mudar isso para o que o usuário realizará ao enviar o formulário, você deixará as coisas muito mais claras, especialmente úteis para aqueles que usam leitores de tela. Considere CTA’s como:
Você está executando uma validação falsa?
A validação em linha é ótima para reduzir erros e eliminar frustrações, mas se você fizer errado, poderá piorar as coisas.
Para ser específico, você está executando uma validação “falsa” do lado do cliente no campo, mas depois validando o lado do servidor no envio? Isso pode resultar em situações em que o usuário preenche um campo de e-mail e recebe um tique verde positivo porque seguiu as regras de formatação. No entanto, no envio, a validação determina que existe uma conta com esse endereço de e-mail e rejeita a entrada.
Configurações como essas podem trazer confusão e frustração ao processo. Se você for validar o lado do servidor, faça isso no momento da entrada, não depois, quando o usuário achar que completou o campo com sucesso.
O seu botão de envio está em um estado inativo?
Alguns designers de formulários gostam de manter o botão de envio em um “estado inativo” até que todos os campos obrigatórios tenham sido preenchidos – como o exemplo à esquerda aqui:
Fonte: Revista Smashing
Esse padrão pode ser prejudicial à UX , levando à frustração e potencial abandono pelos seguintes motivos:
Clicar em um botão ativo fornece feedback – ele acionará quaisquer erros, ajudando você a entender onde errou. Se você clicar em um botão inativo, ele não fará nada, levando a cliques de raiva e sentimentos de que a interface está “quebrada”.
Eles são difíceis de ver – o contraste é baixo, o que significa que o usuário pode não vê-los, especialmente se tiver problemas de visão.
Eles não são focáveis - usuários de teclado não poderão usar a tecla Tab para acessá-los.
Você está confirmando o envio de forma inequívoca?
Quando um usuário envia com sucesso, você precisa dizer isso a ele. Use uma mensagem clara de agradecimento, seja na página ou em um redirecionamento, para que eles saibam que terminaram. Não esconda a mensagem embaixo da dobra ou bem no topo do formulário para que eles não possam vê-la. A falta de clareza levará o usuário a martelar o botão de envio, possivelmente bombardeando seu back-end com vários envios.
Esta página de agradecimento confirma claramente que o envio foi bem-sucedido. Além disso, também explica os próximos passos e oferece uma chance de se envolver mais.
O temido tempo limite
Se você tem um limite de tempo em seu formulário, é provável que alguns usuários cheguem ao envio, mas sejam frustrados quando recebem a mensagem fatídica de que demoraram muito. Poucas coisas certamente irritam mais um cliente em potencial do que isso.
Se você realmente precisa usar um timer, garanta que ele seja longo o suficiente para cobrir a grande maioria dos casos e avise-os antes de fazer isso. Além disso, é melhor salvar as entradas dos usuários para que eles não tenham que passar por toda essa ladainha novamente.
Possibilidade 3 – São os erros estúpidos
O problema essencialmente está relacionado a alguns campos antes do botão de envio.
Então, como saber se isso está acontecendo e como diagnosticar onde estão os problemas reais?
A melhor maneira é se aprofundar mais na sua ferramenta de análise de formulários .
Dê uma olhada no exemplo abaixo. Ele mostra o que acontece imediatamente depois que as pessoas no segmento “abandoners” clicam em ‘Submit’.
Isso nos diz que 42% das pessoas estão desistindo logo após enviarem. No entanto, também podemos ver grupos consideráveis de usuários fazendo outra coisa. Para tentar corrigir o erro que acabaram de ser informados.
Este método nos permite identificar os campos que os usuários estão tentando, e não conseguem, preencher depois de tentarem enviar.
Como você evita que esse problema aconteça? Uma maneira eficaz é usar validação inline ao vivo. Dispare mensagens de erro imediatamente após o usuário inserir sua resposta e passar para o próximo campo. Não espere até que eles cheguem ao final do formulário antes de dizer o que fizeram de errado. Isso levará a níveis muito menores de frustração no estágio de envio,
Claro, uma maneira ainda melhor é ajudar a garantir que eles não cometam nenhum erro em primeiro lugar. Algumas coisas comuns que você pode fazer são: