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