FORMULAIRES - BONNES PRATIQUES2016
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
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.
Introduire le formulaire
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.
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
Bien accompagner l’utilisateur
AideLES 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).
AideAIDE 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
AideRÉ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.
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
ErreursMINIMISER 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.
ErreursINDIQUER 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.
ErreursPROPOSER 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
Clarté et lisibilité
Positionnement des labelsAU-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.
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
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).
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 formulaireferré à gauche
Mise en pageCRÉ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
Mise en pageMISE 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.
Mise en pageAFFORDANCE 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.
Mise en pageUNE 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.
La taille de typo diminue au fil de la saisie
Mise en pageVOIR 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)
Quels composants utiliser ?
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
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 ».
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…)
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
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
Simplifier la complétion
Rythmer le formulaireVARIER 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
Rythmer le formulaireAJOUTER 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
Rythmer le formulaireAFFICHAGE 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.
Minimiser les saisies de texteSUGGÉ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.
Minimiser les saisies de texteDÉ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
Minimiser les saisies de texteCOMPLÉ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
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 SchaefersLuke Wroblewski
Navigation au clavierRÈ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…).
Validation et fin du formulaire
Les boutons de validationVISIBILITÉ 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
Les boutons de validationBOUTONS 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. Wroblewski7 basic best practices for buttons - Caroline Jarett
Les boutons de validationPOSITIONNEMENT 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.
Les boutons de validationPOSITIONNEMENT 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é.
Fin de formulaireRÉ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.
Fin de formulaireCONFIRMATION
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 !
Pour aller plus loin…
Le formulaire simpleUNE 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/
Le langage naturelUNE 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).
ExempleTympanus - Natural language
Le mode conversationnelPAR 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.
www.backelite.com 01 73 00 28 00