The Good, The Bad and The UX

Une collection de patterns UX avec des exemples comparatifs

Back to all examples
Forms

Verification code paste support

Allow users to paste verification codes instead of typing digit by digit

inputverificationpasteOTPmobile

Bad example

Your code:

Click to copy

Enter verification code

Good example

Your code:

Click to copy

Enter verification code

Support du collage pour les codes de vérification

Description

Quand les utilisateurs doivent saisir un code de vérification (OTP, 2FA), ils devraient pouvoir coller le code entier d'un coup au lieu de taper chaque chiffre individuellement.

Pourquoi c'est important

  • Rapidité : Les utilisateurs reçoivent souvent les codes par SMS ou email et veulent les copier-coller rapidement
  • Réduction des erreurs : La saisie chiffre par chiffre est sujette aux fautes de frappe
  • Expérience mobile : Coller est beaucoup plus facile que de changer de clavier et taper sur un petit écran
  • Accessibilité : Certains utilisateurs ont des difficultés avec la frappe précise

Quand appliquer

  • Champs d'authentification à deux facteurs (2FA)
  • Codes de vérification email/téléphone
  • Mots de passe à usage unique (OTP)
  • Toute saisie de code à plusieurs chiffres

Quand ne pas appliquer

  • Codes PIN que les utilisateurs devraient mémoriser (considération de sécurité)
  • Cas où vous voulez explicitement ralentir la saisie (scénarios type CAPTCHA)

Published on Dec 6, 2025

Explore more examples

Forms

Auto-submit verification code

Automatically submit verification codes when all digits are entered

verificationotpauto-submitinput
View example
Modals

Autofocus on Modal input

When a modal opens with a single input, it should be automatically focused

modalinputaccessibilitymobile
View example
Forms

Date of birth input

Use three text fields (day, month, year) with auto-advance instead of native date pickers or long dropdowns.

forminputdatebirthday
View example