FORMULAIRES - BONNES PRATIQUES
2016
1. Introduire le formulaire
2. Accompagner l’utilisateur
3. Clarté et lisibilité
4. Quels composants utiliser ?
5. Simplif...
Remplir un formulaire, c’est pénible. 

Tout le monde s’accorde sur ce point.
Pourtant, le formulaire permet de collecter ...
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
...
Créer des étapes
• Le nombre d’étapes doit être clairement
annoncé dès le début du parcours.
• La progression de l’utilisa...
Bien accompagner l’utilisateur
Aide
LES AIDES COURTES - PLACEHOLDER
Le placeholder peut aider l’utilisateur à
comprendre ce qu’on attend de lui (format
e...
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 compren...
Aide
RÉASSURANCE
L’utilisateur a besoin d’être rassuré tout au
long du formulaire.
Lorsqu’il saisit des données sensibles
...
Champs obligatoires
Un bon formulaire comporte très peu de
champs facultatifs. Il n’est donc pas
nécessaire de marquer tou...
Erreurs
MINIMISER LES RISQUES D’ERREUR
En respectant toutes les bonnes pratiques de
ce document, on réduit déjà énormément...
Erreurs
INDIQUER LES ERREURS AU FIL DE LA SAISIE
Les erreurs doivent être mentionnées à
l’utilisateur au fur et à mesure q...
Erreurs
PROPOSER DES SOLUTIONS
On doit toujours expliquer à l’utilisateur la
raison de son erreur.
Il est également possib...
Clarté et lisibilité
Positionnement des labels
AU-DESSUS DU CHAMP
La proximité du libellé et de son champ
favorise une lecture rapide et donc u...
Positionnement des labels
À L’INTÉRIEUR DU CHAMP (PLACEHOLDER)
Le libellé du champ doit être rappelé quelque
part, sans qu...
Positionnement des labels
À CÔTÉ - FERRÉ À DROITE
L’occupation verticale est moindre.
Ce type d’alignement est préconisé p...
Positionnement des labels
À CÔTÉ - FERRÉ À GAUCHE
Ce type de positionnement n’est pas à
favoriser car il est très difficil...
Mise en page
CRÉER DES PROXIMITÉS VISUELLES
Gérer les espaces est primordial pour une
bonne compréhension du contenu.
Exem...
Mise en page
MISE EN AVANT DE L’ÉTAT FOCUS
Le champ actif/sélectionné doit être
clairement différent des autres.
Sur mobil...
Mise en page
AFFORDANCE DES CHAMPS
La longueur d’un champ doit indiquer le
contenu attendu.
Par exemple, un champ de code ...
Mise en page
UNE SEULE COLONNE
Il est fortement recommandé de faire des
formulaires sur une seule colonne, le multi-
colon...
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 lo...
Quels composants utiliser ?
Quels composants utiliser ?
BOUTONS RADIOS OU CASES À COCHER
Les boutons radios permettent de choisir un
seul élément dans...
Quels composants utiliser ?
SWITCH
Un switch permet de choisir entre deux
éléments. Le plus souvent OUI/NON, ON/
OFF…
Les ...
Quels composants utiliser ?
LISTES DÉROULANTES
Les listes déroulantes permettent de choisir un
élément au sein d’une liste...
Quels composants utiliser ?
SLIDERS ET STEPPER
Les sliders permettent de sélectionner
approximativement une valeur ou une
...
Quels composants utiliser ?
TIME PICKERS ET DATE PICKERS
Ces composants sont utilisés principalement
sur mobile (natifs).
...
Simplifier la complétion
Rythmer le formulaire
VARIER LES COMPOSANTS
Un formulaire long, utilisant uniquement des
champs et des menus déroulants, s...
Rythmer le formulaire
AJOUTER UNE TOUCHE LUDIQUE
Il y a plusieurs moyens de rendre le formulaire
plus agréable à compléter...
Rythmer le formulaire
AFFICHAGE PROGRESSIF DES CHAMPS
Pour que le formulaire paraisse moins long, on
peut afficher progres...
Minimiser les saisies de texte
SUGGÉRER
La saisie de texte est toujours pénible et
source d’erreur, d’autant plus lorsque
...
Minimiser les saisies de texte
DÉDUIRE
Il est possible de déduire certains
éléments.
Par exemple, si l’utilisateur a donné...
Minimiser les saisies de texte
COMPLÉTER AUTOMATIQUEMENT
Vous l’aurez compris, dès que c’est possible, il
faut proposer à ...
Minimiser les saisies de texte
ÉVITER DE DEMANDER DEUX FOIS UNE
INFORMATION
Devoir remplir deux fois la même information
p...
Navigation au clavier
RÈGLES DE BASE
• Pouvoir passer facilement d’un champ à
l’autre :
- Sur mobile : avec des boutons « ...
Validation et fin du formulaire
Les boutons de validation
VISIBILITÉ MAXIMUM
Le bouton de validation (le call to action du
formulaire) ou le passage à l’é...
Les boutons de validation
BOUTONS PRINCIPAUX ET SECONDAIRES
Lorsqu’il y a plusieurs boutons (ex : sauvegarder
et annuler),...
Les boutons de validation
POSITIONNEMENT SUR LE WEB
Pour les formulaires qui comportent des
boutons de type « envoyer » ou...
Les boutons de validation
POSITIONNEMENT SUR MOBILE
Sur mobile, il est important que le bouton de
validation soit toujours...
Fin de formulaire
RÉCAPITULATIF
Juste avant l’envoi du formulaire, on peut
proposer un récapitulatif des informations
sais...
Fin de formulaire
CONFIRMATION
Le message de confirmation permet de
rassurer l’utilisateur et de l’informer de la
bonne va...
Pour aller plus loin…
Le formulaire simple
UNE SEULE QUESTION À LA FOIS
Les formulaires comme TypeForm proposent
une seule question à la fois, c...
Le langage naturel
UNE PHRASE COMPLÈTE
Le langage naturel consiste à demander les
informations dans une phrase et non plus...
Le mode conversationnel
PAR SMS OU PAR TCHAT
Le formulaire peut devenir une discussion par
SMS ou tchat entre l’utilisateu...
www.backelite.com	
  
01	
  73	
  00	
  28	
  00
Prochain SlideShare
Chargement dans…5
×

Les Formulaires - Les bonnes pratiques pour une meilleure expérience utilisateur

1 515 vues

Publié le

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 pour assurer la meilleure expérience utilisateur possible !

Suivre quelques bonnes pratiques peut rendre un formulaire intuitif et ludique, instaurant ainsi une relation positive entre l’humain et la marque.

Publié dans : Internet
0 commentaire
3 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 515
Sur SlideShare
0
Issues des intégrations
0
Intégrations
100
Actions
Partages
0
Téléchargements
28
Commentaires
0
J’aime
3
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Les Formulaires - Les bonnes pratiques pour une meilleure expérience utilisateur

  1. 1. FORMULAIRES - BONNES PRATIQUES 2016
  2. 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. 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. 4. Introduire le formulaire
  5. 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. 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. 7. Bien accompagner l’utilisateur
  8. 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. 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. 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. 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. 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. 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. 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. 15. Clarté et lisibilité
  16. 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. 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. 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. 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. 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. 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. 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. 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. 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. 25. Quels composants utiliser ?
  26. 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. 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. 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. 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. 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. 31. Simplifier la complétion
  32. 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. 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. 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. 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. 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. 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. 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. 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. 40. Validation et fin du formulaire
  41. 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. 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. 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. 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. 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. 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. 47. Pour aller plus loin…
  48. 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. 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. 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. 51. www.backelite.com   01  73  00  28  00

×