UX da tela de código de verificação: 10 boas práticas | aut2fa

A tela de código de verificação é um dos pontos onde mais usuários desistem do cadastro. A pessoa já preencheu tudo, falta um passo, e uma experiência ruim nesse momento custa caro.

Aqui estão 10 boas práticas de UX para a tela de OTP que reduzem atrito e aumentam a conversão.

1. Diga onde o código foi enviado

Em vez de "Digite o código", escreva: "Enviamos um código pelo WhatsApp para +55 31 9••••-9999". A pessoa sabe onde olhar e confere se o número está certo.

Com a aut2fa, o status do envio informa o canal usado, então você pode mostrar a mensagem certa.

2. Ofereça "alterar número"

Erro de digitação no telefone é comum. Um link "Número errado? Alterar" ao lado do número evita que a pessoa fique presa esperando um código que nunca vai chegar.

3. Use um único campo com autocomplete

Prefira um único input a seis caixinhas separadas, ou, se usar as caixinhas, faça-as se comportarem como um campo só. Configure:

<input
  type="text"
  inputmode="numeric"
  autocomplete="one-time-code"
  pattern="[0-9]*"
  maxlength="6"
/>

inputmode="numeric" abre o teclado numérico no celular.
autocomplete="one-time-code" permite que o sistema sugira o código recebido.

4. Permita colar o código

Muita gente copia o código do WhatsApp e cola. Garanta que colar 482913 (ou 482 913, com espaço) preencha tudo corretamente. Remova espaços e traços antes de validar.

5. Envie automaticamente ao completar

Quando o sexto dígito for digitado, verifique na hora. Um botão "Confirmar" extra é aceitável, mas não deve ser obrigatório.

6. Reenvio com contagem regressiva

O botão "Reenviar código" deve ficar desativado por alguns segundos, com contagem visível: "Reenviar em 0:30". Isso reduz ansiedade e evita disparos repetidos.

Se a API responder HTTP 429, use o header Retry-After para ajustar a contagem. Na aut2fa, esse header diz exatamente quantos segundos esperar.

7. Mostre o status da entrega

Se você tiver o status, use: "Código entregue" ou "Código lido às 18:05". Isso transmite confiança. A aut2fa registra sent, delivered e read com horário em GET /v1/send/{id}/status.

8. Mensagens de erro específicas

Evite "Erro, tente novamente". Seja claro:

Código incorreto: "Código incorreto. Você tem mais 3 tentativas." (use o attempts_left da resposta)
Código expirado: "Esse código expirou. Enviamos um novo?"
Tentativas esgotadas: "Muitas tentativas. Peça um novo código."

9. Informe o prazo de validade

"O código vale por 10 minutos" ajuda quem vai buscar o celular em outro cômodo. Na aut2fa, o código expira 10 minutos depois do envio e o expires_at vem na resposta.

10. Não perca o progresso

Se a pessoa sair do app para abrir o WhatsApp e voltar, a tela deve continuar no mesmo ponto, com o número e a contagem preservados. Nada de voltar ao início do cadastro.

Bônus: acessibilidade

Rótulo visível no campo ("Código de verificação").
Mensagens de erro anunciadas por leitores de tela (aria-live="polite").
Contraste adequado e área de toque confortável no botão de reenvio.

Conclusão

A tela de código parece um detalhe, mas é o último passo antes de um usuário virar cliente. Clareza sobre onde o código foi, facilidade para digitar ou colar e reenvio bem resolvido fazem diferença direta na conversão.

A aut2fa entrega os dados que essa tela precisa (canal, status, validade, tentativas restantes e Retry-After) em três endpoints. Comece grátis e veja a documentação.

UX da tela de código de verificação: 10 boas práticas que aumentam a conversão