Construire des formulaires plus efficaces
La première étape de la construction d’un formulaire est une bonne planification. Voici donc cinq bonnes pratiques qui amélioreront l’expérience de vos utilisateurs et rendront vos formulaires plus efficaces, satisfaisants et efficients.
1 – Précisez la nature et le but de vos formulaires
Le formulaire doit être contextualisé à l’utilisateur. Il faut donc lui indiquer l’objectif qui sera atteint une fois le formulaire complété. Ex. : Compléter une commande, création de compte, télécharger un document.
(JACOBSON 2017; BACCINO, SALMERON et CANAS 2008)
2 – Soyez concis dans vos demandes
Évitez de prendre trop de temps et d’énergie à votre utilisateur. Proposez lui un formulaire avec uniquement les champs nécessaires. Gardez à l’esprit qu’un formulaire paraissant long à remplir peut lui donner l’impression que l’effort nécessaire pour atteindre son but est trop grand pour le bénéfice qu’il en tirera. Cette conclusion peut conduire à l’abandon du formulaire.
(JACOBSON 2017; LIDWELL, HOLDEN et BUTLER 2011 ; KISSANE 2013)
3 – Prévenez les erreurs sur vos formulaires
Agissez proactivement en informant l’utilisateur d’une erreur au moment où celle-ci risque de se produire. Cette mesure évite la frustration chez l’utilisateur si les erreurs ne sont signalées qu’une fois le formulaire soumis. La validation des champs en temps réel est une bonne mesure préventive.
Ex. : Lorsqu’un utilisateur entre son numéro de téléphone avec des tirets «-», vous pouvez lui indiquer immédiatement qu’il faut entrer le numéro sans tiret (NIELSEN 2012; BOUCHER 2011).
Offrez également des outils explicatifs dans vos formulaires en utilisant des annotations, des compléments d’information au survol ou encore des icônes (COYLE 2016).
4 – Pensez vos formulaires en mobile!
Il est important de prendre en considération les personnes qui naviguent uniquement via leur tablette ou leur téléphone pour entreprendre le design de votre formulaire.
Pour être certain que le formulaire convient au format mobile, il ne faut pas hésiter à utiliser les options natives du dispositif mobile. Par exemple, si l’utilisateur doit donner sa localisation, vous pouvez utiliser l’outil de localisation GPS.
Également, n’oubliez pas que les utilisateurs de mobile utilisent un écran tactile : laissez donc de l’espace entre les différents champs pour qu’ils puissent les sélectionner facilement sans en activer un autre.
(NIELSEN 2012; BOUCHER 2011)
5 – Guidez l’utilisateur grâce aux codes visuels
N’oubliez pas que l’architecture de vos formulaires, les couleurs choisies ainsi que l’affordance de vos champs sont des éléments clés pour aider l’utilisateur dans sa tâche. Alignez donc vos libellés près de vos champs et préférablement en haut de ceux-ci. Évitez d’utiliser les place holder pour vos libellés et rentabilisez cet espace en y ajoutant de l’information complémentaire. Vous pouvez par exemple donner des exemples de réponses possibles pour ce champ! Finalement, ajustez vos champs à la longueur de l’information qui y sera entrée. Par exemple, il n’est pas nécessaire d’avoir un champ très long pour un code postal (INTERACTION DESIGN FOUNDATION 2017 ; COYLE 2016).
Conseil bonus : Testez vos formulaires grâce au test A/B!
Faites une ou deux variantes de votre formulaire et observez le comportement des utilisateurs! Faire des tests A/B vous permet de valider vos choix afin de proposer la meilleure option à vos utilisateurs. Vous pouvez, par exemple, changer la couleur d’un bouton et observer laquelle des deux versions obtient le plus de réponses (COYLE 2016).
Sources :
BACCINO, T., SALMERON, L., et CANAS, J. (2008), «La lecture des hypertexte», Ergonomie des documents électroniques, Paris, Presses universitaires de France, p.9-34.
BOUCHER, A., (2011). «Règle n8. Gestion des erreurs: le site prévoit que l’internaute se trompe», Ergonomie Web: pour des sites Web efficaces, Eyrolles, Paris, p. 146-157
COYLE, A. (2016). «Design Better Forms: Common mistakes designers make and how to fix them» retrouvé le 31 décembre 2017 à https://uxdesign.cc/design-better-forms-96fadca0f49c
INTERACTION DESIGN FOUNDATION (2017). «Gestalt Principles» retrouvé le 31 décembre 2017 à
https://www.interaction-design.org/literature/topics/gestalt-principles
JACOBSON, M. 2017, «What Encourages People to Complete Online Forms? [UPDATED] , trouvé le 31 octobre 2017 à https://www.theleverageway.com/blog/designing-successful-online-forms/
KISSANE, E. (2013). Stratégie de contenu web, Paris, Eyrolles, 85 p.
LIDWELL, W., HOLDEN, K., BUTLER, J. (2011). «Cost vs Benefit», Universal Principles of Design, 2e edition, Beverly, Rockport Publishers, p.68-69
NIELSEN, J. (2012). «Usability 101: Introduction to Usability», retrouvé le 31 décembre 2017 à https://www.nngroup.com/articles/usability-101-introduction-to-usability/
Recherchiste: Marianne Delasalle
