1. FORMULAIRES - BONNES PRATIQUES
2016

2. 1. Introduire le formulaire
2. Accompagner l’utilisateur
3. Clarté et lisibilité
4. Quels composants utiliser ?
5. Simplifier la complétion
6. Validation et fin du formulaire
7. Pour aller plus loin
SOMMAIRE

3. Remplir un formulaire, c’est pénible.
Tout le monde s’accorde sur ce point.
Pourtant, le formulaire permet de collecter des données,
d’interagir avec un service, de devenir acteur d’une
interface.
Il est donc essentiel de soigner vos formulaires !
S’il est trop long, s’il induit en erreur ou suscite la
méfiance, vous laisserez une mauvaise impression auprès
des utilisateurs.
Suivre quelques bonnes pratiques peut rendre un
formulaire intuitif et ludique, instaurant ainsi une relation
positive entre l’humain et la marque.

4. Introduire le formulaire

5. Préparer l’utilisateur
Avant d’entrer dans le vif du sujet, l’utilisateur
doit savoir ce qu’on attend de lui et la nature
du formulaire qu’il va remplir : accompagner
le formulaire d’un titre clair et d’une
introduction rassurante sera une bonne
entrée en matière.
On peut également lui rappeler les documents
à préparer et les conditions requises pour
pouvoir remplir le formulaire, ce qui évitera
une rupture du processus.

6. Créer des étapes
• Le nombre d’étapes doit être clairement
annoncé dès le début du parcours.
• La progression de l’utilisateur doit être
marquée.
• Des messages d’encouragement réguliers
agrémenteront aussi le parcours.
• L’utilisateur doit pouvoir revenir à l’étape
précédente sans perdre ses données
saisies.
Exemple 1
Exemple 2

7. Bien accompagner l’utilisateur

8. Aide
LES AIDES COURTES - PLACEHOLDER
Le placeholder peut aider l’utilisateur à
comprendre ce qu’on attend de lui (format
e-mail, par exemple, ou de date de
naissance).
Il ne peut pas se substituer à l’aide quand
l’utilisateur a besoin d’informations pendant
qu’il saisit son texte (puisque le placeholder
disparaitra à la saisie).

9. Aide
AIDE PLUS LONGUE - AFFICHÉE OU MASQUÉE
On a parfois besoin d’un texte d’aide un peu
plus long pour bien faire comprendre à
l’utilisateur ce qu’on attend de lui.
Ce texte peut être affiché à côté, en-dessous
ou au-dessus du champ.
Selon l’importance du message, on pourra
l’afficher tout le temps, lors de la saisie ou le
cacher derrière une bulle d’aide.
Affichage à l’entrée dans le champ
Affichage au clic sur une bulle d’aide

10. Aide
RÉASSURANCE
L’utilisateur a besoin d’être rassuré tout au
long du formulaire.
Lorsqu’il saisit des données sensibles
(coordonnées, données bancaires…), par
exemple un picto ou un texte peuvent le
rassurer sur la sécurisation et la non-utilisation
de ces données…
On peut également lui proposer de joindre un
conseiller ou d’être recontacté (tchat, call
back…), ce qui lui laisse un recours en cas de
blocage sur le formulaire.
Call back
Sécurité des données
Note : attention : de
bien préciser le délai
d’attente avant le
rappel.

11. Champs obligatoires
Un bon formulaire comporte très peu de
champs facultatifs. Il n’est donc pas
nécessaire de marquer tous les champs
comme obligatoires…
On peut indiquer le caractère obligatoire de
tous les champs par un message en début de
formulaire. On peut indiquer le caractère
facultatif d’un champ à côté ou à l’intérieur de
celui-ci (placeholder).
Sources :
Anthony - UX mouvement

12. Erreurs
MINIMISER LES RISQUES D’ERREUR
En respectant toutes les bonnes pratiques de
ce document, on réduit déjà énormément les
risques d’erreur.
Il y a d’autres astuces à ne pas oublier :
• En fonction du type de champs, bloquer la
saisie de certains caractères ;
• Gérer les espaces côté serveur.

13. Erreurs
INDIQUER LES ERREURS AU FIL DE LA SAISIE
Les erreurs doivent être mentionnées à
l’utilisateur au fur et à mesure qu’il remplit le
questionnaire (et pas d’un bloc à la fin).
Les champs en erreur doivent être
immédiatement identifiables.

14. Erreurs
PROPOSER DES SOLUTIONS
On doit toujours expliquer à l’utilisateur la
raison de son erreur.
Il est également possible de lui proposer
directement une solution à son erreur, sur
laquelle il n’aura plus qu’à cliquer pour éviter
de re-saisir du texte (ex : ré-écrire
correctement un e-mail).
Message d’erreur explicite
Proposition de solution
95 00

15. Clarté et lisibilité

16. Positionnement des labels
AU-DESSUS DU CHAMP
La proximité du libellé et de son champ
favorise une lecture rapide et donc une
complétion efficace.
C’est l’option à favoriser dans la majorité des
cas.

17. Positionnement des labels
À L’INTÉRIEUR DU CHAMP (PLACEHOLDER)
Le libellé du champ doit être rappelé quelque
part, sans quoi, lorsque le champ est
sélectionné, l’utilisateur ne sait plus ce qui lui
était demandé.
La meilleure solution est un placeholder qui se
positionne en petit au-dessus du champ quand
celui-ci est rempli (ex 1).
Le libellé peut aussi être évoqué par un
pictogramme, mais celui-ci doit être très
explicite (ex 2).
Exemple 2
Exemple 1

18. Positionnement des labels
À CÔTÉ - FERRÉ À DROITE
L’occupation verticale est moindre.
Ce type d’alignement est préconisé pour des
formulaires très courts car il est plus difficile à
lire.
Note : Ce positionnement marche uniquement avec des
libellés courts (une quinzaine de caractères grand max).

19. Positionnement des labels
À CÔTÉ - FERRÉ À GAUCHE
Ce type de positionnement n’est pas à
favoriser car il est très difficile à scanner
visuellement pour l’utilisateur qui doit faire un
effort pour passer du label au champ.
Pour aller plus loin :
Anthony - UX mouvement
Exemple d’eye tracking
sur un formulaire
ferré à gauche

20. Mise en page
CRÉER DES PROXIMITÉS VISUELLES
Gérer les espaces est primordial pour une
bonne compréhension du contenu.
Exemple de gestion des proximités :
- Entre 1 label et 1 champ = 10 px
- Entre 1 champ et un autre label = 30 px
- Entre 2 « groupes de champs » = 60 px

21. Mise en page
MISE EN AVANT DE L’ÉTAT FOCUS
Le champ actif/sélectionné doit être
clairement différent des autres.
Sur mobile, le champ actif peut également
remonter en haut de la zone de scroll.

22. Mise en page
AFFORDANCE DES CHAMPS
La longueur d’un champ doit indiquer le
contenu attendu.
Par exemple, un champ de code postal ne
contenant que 5 caractères sera moins long
qu’un champ e-mail.

23. Mise en page
UNE SEULE COLONNE
Il est fortement recommandé de faire des
formulaires sur une seule colonne, le multi-
colonnage pouvant nuire à la lisibilité.
Les seules exceptions sont les champs Nom /
Prénom ou Code postal / Ville qui peuvent être
positionnés côte-à-côte.

24. La taille de typo diminue au fil de la saisie
Mise en page
VOIR L’INTÉGRALITÉ DE LA SAISIE
Parfois, le contenu est trop long par rapport à
la taille du champ, ce qui empêche de voir
l’intégralité du texte saisi.
Pour remédier à ce problème, il est possible
d’adapter la taille de la police à l’intérieur
du champ.
Sources :
Nicolas Catherin - Livre blanc (p. 43)

25. Quels composants utiliser ?

26. Quels composants utiliser ?
BOUTONS RADIOS OU CASES À COCHER
Les boutons radios permettent de choisir un
seul élément dans une liste (ex : civilité,
emploi…)
Les cases à cocher permettent de
sélectionner plusieurs éléments dans une liste.
Une case à cocher seule peut aussi évoquer
une acceptation.
Sources :
Which input When - Morgan Carter
Boutons radios
Cases à cocher

27. Quels composants utiliser ?
SWITCH
Un switch permet de choisir entre deux
éléments. Le plus souvent OUI/NON, ON/
OFF…
Les états sélectionnés/non sélectionnés
doivent être très clairs.
Exemple 1
Exemple 2
Sur les Segmented Control iOS, par exemple, ce n’est
pas toujours facile de distinguer l’onglet « actif » de
l’onglet « sélectionnable ».

28. Quels composants utiliser ?
LISTES DÉROULANTES
Les listes déroulantes permettent de choisir un
élément au sein d’une liste.
Les listes déroulantes posent plusieurs problèmes
:
• nombre de clics inutiles pour une petite liste ;
• difficultés pour sélectionner dans une liste trop
grande (surtout sur mobile) ;
• difficultés de personnalisation CSS ;
• …
Il faut toujours se demander si la liste
déroulante est vraiment le composant le plus
approprié (dans la plupart des cas, la réponse est
d’ailleurs non…)

29. Quels composants utiliser ?
SLIDERS ET STEPPER
Les sliders permettent de sélectionner
approximativement une valeur ou une
fourchette de valeurs. (ex : luminosité, volume,
fourchettes de prix…). Ils ne doivent pas être
utilisés pour un montant précis car ils peuvent
être difficiles à manipuler.
Le stepper permet d’augmenter ou de réduire
une valeur. Il est recommandé pour des
valeurs qui varient peu.
Slider
Stepper

30. Quels composants utiliser ?
TIME PICKERS ET DATE PICKERS
Ces composants sont utilisés principalement
sur mobile (natifs).
Le time picker permet de sélectionner un
horaire (heures/minutes/secondes).
Le date picker permet de sélectionner une
date (jour/mois/année).
Time picker
Date picker iOS

31. Simplifier la complétion

32. Rythmer le formulaire
VARIER LES COMPOSANTS
Un formulaire long, utilisant uniquement des
champs et des menus déroulants, sera
ennuyeux pour l’utilisateur.
Stepper, switch, slider… sont autant de
composants qui, utilisés au bon endroit et au
bon moment, vont rythmer la complétion.
Sources :
Which input When - Morgan Carter

33. Rythmer le formulaire
AJOUTER UNE TOUCHE LUDIQUE
Il y a plusieurs moyens de rendre le formulaire
plus agréable à compléter :
• Des icônes pour l’habiller visuellement ;
• Un ton rédactionnel plus sympathique ;
• Quelques animations discrètes (ex : bouton
de chargement ou de validation) ;
• …
Des icônes
Un ton réactionnel sympathique

34. Rythmer le formulaire
AFFICHAGE PROGRESSIF DES CHAMPS
Pour que le formulaire paraisse moins long, on
peut afficher progressivement les champs
dépendants.
Par exemple, on n’affichera les champs
« profession » et « secteur d’activité »
seulement si l’utilisateur choisit « actif »
comme statut professionnel.
Note : attention à ne pas abuser de cette astuce, cela
donnerait l’impression à l’utilisateur que chaque champ
va en cacher d’autres.

35. Minimiser les saisies de texte
SUGGÉRER
La saisie de texte est toujours pénible et
source d’erreur, d’autant plus lorsque
l’utilisateur est sur mobile (pas forcément
assis, ni très concentré).
La charge cognitive nécessaire lors de la
saisie de texte est plus importante que lors
d’une sélection dans une liste.
Il est conseillé de pré-remplir un maximum
de champs.
Exemple : la ville de départ est pré-remplie
(géolocalisation de l’utilisateur) et la date de départ est
automatiquement à la date du jour.

36. Minimiser les saisies de texte
DÉDUIRE
Il est possible de déduire certains
éléments.
Par exemple, si l’utilisateur a donné son code
postal, on peut lui proposer une liste réduite de
villes (ex 1).
Ou encore, si l’utilisateur renseigne les
4 premiers chiffres de sa carte, on peut en
déduire que c’est une Visa ou une Mastercard
(ex 2).
Exemple 1
Exemple 2

37. Minimiser les saisies de texte
COMPLÉTER AUTOMATIQUEMENT
Vous l’aurez compris, dès que c’est possible, il
faut proposer à l’utilisateur une alternative à la
saisie :
• Autocomplétion ;
• Scan (ex : carte bancaire) ;
• Identification automatique (ex : Facebook
connect) ;
• Recherche vocale.
Auto-completion
Scan de carte

38. Minimiser les saisies de texte
ÉVITER DE DEMANDER DEUX FOIS UNE
INFORMATION
Devoir remplir deux fois la même information
peut être très contraignant.
Pour un mot de passe, par exemple, on peut
donner la possibilité à l’utilisateur de l’afficher
ou de le masquer afin de vérifier que la saisie
est correcte.
Sources :
Klaus Schaefers
Luke Wroblewski

39. Navigation au clavier
RÈGLES DE BASE
• Pouvoir passer facilement d’un champ à
l’autre :
- Sur mobile : avec des boutons « suivant/
précédent »
- Sur desktop : avec la touche « tab »
• Sur mobile, il faut amener le bon clavier en
fonction du contenu demandé dans l’input
(ex : clavier numérique pour un prix, clavier
e-mail pour un e-mail, clavier téléphone pour
un téléphone…).

40. Validation et fin du formulaire

41. Les boutons de validation
VISIBILITÉ MAXIMUM
Le bouton de validation (le call to action du
formulaire) ou le passage à l’étape suivante
doit être clair et visible.
Le texte du bouton doit indiquer l’action sans
ambiguïté et inciter au clic.
Sources :
7 Basic Best Practices for Buttons - Caroline Jarett

42. Les boutons de validation
BOUTONS PRINCIPAUX ET SECONDAIRES
Lorsqu’il y a plusieurs boutons (ex : sauvegarder
et annuler), il est préférable de les différencier
pour attirer l’attention sur l’action principale.
Les boutons destructifs (annuler, supprimer…)
doivent être plus difficiles à trouver : moins gros,
plus discrets.
Sources :
Primary & Secondary Actions in Forms - L. Wroblewski
7 basic best practices for buttons - Caroline Jarett

43. Les boutons de validation
POSITIONNEMENT SUR LE WEB
Pour les formulaires qui comportent des
boutons de type « envoyer » ou
« sauvegarder », il est préférable de
positionner ceux-ci à gauche, alignés avec
les champs.
De cette manière, ils sont dans la continuité du
chemin vertical parcouru par l’oeil.

44. Les boutons de validation
POSITIONNEMENT SUR MOBILE
Sur mobile, il est important que le bouton de
validation soit toujours visible, même une fois
le clavier monté.
On peut le coller au clavier ou le mettre en
haut de l’écran.
Dans tous les cas, il est bon de se référer
aux guidelines des OS pour utiliser les codes
auxquels l’utilisateur est déjà habitué.

45. Fin de formulaire
RÉCAPITULATIF
Juste avant l’envoi du formulaire, on peut
proposer un récapitulatif des informations
saisies.
Cela permet à l’utilisateur de se relire et de
vérifier ses informations.

46. Fin de formulaire
CONFIRMATION
Le message de confirmation permet de
rassurer l’utilisateur et de l’informer de la
bonne validation du formulaire.
S’il est accompagné d’une petite illustration ou
d’une animation, ce sera une sorte de
récompense pour l’utilisateur, surtout si le
formulaire était long !

47. Pour aller plus loin…

48. Le formulaire simple
UNE SEULE QUESTION À LA FOIS
Les formulaires comme TypeForm proposent
une seule question à la fois, ce qui permet à
l’utilisateur d’être concentré sur ce qu’il doit
remplir.
Ce type de formulaire n’est pas adapté aux
formulaires trop longs ou trop complexes
(surtout quand il est intéressant d’avoir 2 ou 3
champs sous les yeux en même temps).
Exemple :
http://www.typeform.com/

49. Le langage naturel
UNE PHRASE COMPLÈTE
Le langage naturel consiste à demander les
informations dans une phrase et non plus
par champs morcelés.
Cela permet de donner un ton plus humain au
formulaire.
Ce type de formulaire s’adapte
particulièrement bien à un formulaire de
recherche (comme l’exemple ci-contre).
Exemple
Tympanus - Natural language

50. Le mode conversationnel
PAR SMS OU PAR TCHAT
Le formulaire peut devenir une discussion par
SMS ou tchat entre l’utilisateur et la marque.
Hello Bank, par exemple, propose déjà une
première mise en relation sous ce format.

51. www.backelite.com
01
73
00
28
00