The Good, The Bad and The UX

Une collection de patterns UX avec des exemples comparatifs

Back to all examples
Forms

Auto-submit verification code

Automatically submit verification codes when all digits are entered

verificationotpauto-submitinputux

Bad example

Test code:

Click to copy

Enter verification code

Press Enter or click Verify

Good example

Test code:

Click to copy

Enter verification code

Code validates automatically when complete

Soumission automatique du code de vérification

Description

Quand les utilisateurs saisissent le dernier chiffre d'un code de vérification, validez-le automatiquement au lieu de leur demander de cliquer sur un bouton "Vérifier" ou d'appuyer sur Entrée.

Pourquoi c'est important

  • Réduction des frictions : Une action de moins pour l'utilisateur
  • Flux plus rapide : Les utilisateurs passent immédiatement à l'étape suivante après la saisie
  • Attente naturelle : Les utilisateurs s'attendent à ce que le système "sache" quand ils ont terminé
  • Mobile-friendly : Pas besoin de trouver et toucher un bouton de soumission sur petit écran

La psychologie derrière

Les codes de vérification ont une longueur fixe et connue (généralement 4-6 chiffres). Quand les utilisateurs saisissent le dernier chiffre, leur intention est claire — ils veulent vérifier. Leur demander une action supplémentaire ajoute une charge cognitive inutile et semble redondant.

Quand appliquer

  • Codes de vérification OTP/SMS
  • Codes de vérification email
  • Codes d'authentification à deux facteurs
  • Toute saisie numérique de longueur fixe où la complétion est sans ambiguïté

Quand ne pas appliquer

  • Codes ou mots de passe de longueur variable
  • Quand les utilisateurs pourraient vouloir vérifier avant de soumettre
  • Actions irréversibles à fort enjeu (préférer une confirmation explicite)
  • Si le processus de vérification est lent (> 2 secondes) - affichez un état de chargement clair

Conseils d'implémentation

  1. Afficher l'état de chargement : Montrez un spinner immédiatement après la soumission auto pour confirmer que l'action a été prise en compte
  2. Gérer les erreurs gracieusement : Videz le champ et refocusez pour que les utilisateurs puissent réessayer immédiatement
  3. Désactiver le champ pendant la vérification : Empêchez les saisies supplémentaires pendant le traitement
  4. Restez rapide : La soumission auto fonctionne mieux quand la vérification est rapide (< 1 seconde)
  5. Fournir un feedback visuel : La transition de la saisie à l'état vérifié doit être fluide

Published on Dec 7, 2025

Explore more examples