image

Design #2 Quelles bonnes pratiques faut-il privilégier lors de la conception d’un formulaire en ligne ?

image
Bérengère Noël
5 mai 2020

Le formulaire est bien souvent l’étape clé d’un parcours utilisateur : paiement en ligne, création de compte, prise de contact, etc. Un formulaire mal conçu génère de nombreux irritants et pénalise la qualité générale d’une expérience utilisateur. Par conséquent, il convient de maîtriser les bonnes pratiques correspondantes et concevoir des formulaires qui ne comportent aucun obstacle.

Éliminez les champs inutiles et superflus qui ralentissent l’utilisateur et incitent à l’abandon

Lors de la conception d’un formulaire, il est recommandé de faire un tri afin d’éliminer le plus possible les champs inutiles ou superflus. Chaque champ superflu augmente la friction de l’utilisateur. La meilleure chose à faire pour améliorer le remplissage d’un formulaire est de sélectionner soigneusement ce dont vous avez vraiment besoin de savoir sur votre utilisateur. Dans l’idéal, votre formulaire ne doit comporter aucun champ facultatif.

Le progress tracker permet de regrouper par thématique les données attendues, de fixer des attentes claires et de suivre les progrès au sein d’un processus complexe

Certains formulaires s’avèrent nécessairement riches et complexes. Pour encourager le visiteur, il peut être judicieux de le guider via une interface spécifique qui découpe le processus en plusieurs étapes simples et intuitives. Si l’effort semble trop important, ou bien si le moindre blocage apparaît, l’utilisateur cherchera d’autres options. Un progress tracker permet de réduire ce risque. Il décompose le formulaire en plusieurs étapes logiques et numérotées, affiche la progression des étapes accomplies ainsi que l’emplacement actuel de l’utilisateur. La décomposition du formulaire en 3 à 5 étapes est généralement suffisante.

Proposez aux utilisateurs pressés de s’inscrire via leurs réseaux sociaux favoris

Dans le but de permettre à votre utilisateur de gagner du temps, vous pouvez lui proposer de s’inscrire via des comptes externes, comme Facebook, Google ou Linkedin. Cette pratique de plus en plus courante facilite la connexion et l’inscription sur votre site web ou application avec un compte que votre utilisateur utilise tous les jours et qu’il va retenir.

Référez vous à la théorie de Gestalt lorsqu’il s’agit de composer un formulaire

En n’utilisant qu’une seule colonne, le parcours visuel de l’utilisateur sera plus naturel, grâce à une lecture de haut en bas. L’enchaînement des questions est également important. Parmi les différentes lois mise en avant au travers la théorie de la forme (également connue pour le nom Gestalttheorie) le principe de proximité définit que les composants d’une interface liés les uns aux autres doivent a minima être proches visuellement. Lors de la conception, vous pouvez appliquer ce principe en regroupant les informations connexes.

Les dimensions des champs de saisie aident l’utilisateur à appréhender visuellement la quantité de données à renseigner.

Par conséquent, les champs tels que les numéros de téléphone ou l’adresse e-mail doivent être plus courts que les autres.

Faites en sorte de fournir un clavier lorsque nécessaire pour faciliter la complétion du formulaire

Sur mobile lorsque l’utilisateur doit saisir des numéros, l’application ou le site doit afficher le clavier numérique, afin de lui éviter des actions supplémentaires.

Facilitez le travail de l’utilisateur et aidez-le à éviter les erreurs

Afin d’accompagner l’utilisateur, vous devez indiquer, via une aide, où trouver l’information qu’il doit saisir. Par exemple, si le numéro de compte client est sur une facture, vous pouvez représenter celle-ci en surlignant la zone concernée. De même, si la plupart des champs sont obligatoires ou facultatifs, indiquez le clairement à l’utilisateur. Puis dans les cas où vous appliquez une limite de mots ou de lettres dans un champ, l’utilisation d’un compteur est recommandée afin d’afficher le ratio entre nombre de caractères utilisés et la limite imposée.

Faites en sorte que les messages d’erreur soient compréhensibles et diffusés au bon endroit et au bon moment

Même si vous prenez soin d’indiquer toutes les informations nécessaires, l’utilisateur commettra inévitablement des erreurs. Les messages d’erreur sont alors primordiaux. N’attendez pas que l’utilisateur ait terminé la complétion du formulaire mais fournissez les informations lorsqu’il renseigne le champ correspondant. Afin de limiter sa frustration, assurez-vous que les messages d’erreurs soient clairs et qu’ils se trouvent dans un emplacement adapté. Pour cela, vous pouvez d’une part répertorier en haut de la page toutes les erreurs et d’autre part les indiquer à proximité immédiate du champ en question. Pensez également à indiquer comment la corriger. Pour une compréhension optimum de votre utilisateur, n’utilisez pas que la couleur pour renseigner l’état d’erreur ou de validité du formulaire. Il est primordial de rendre votre formulaire accessible aux utilisateurs en situation de mobilité. L’ajout d’un libellé vous assurera une meilleure compréhension du message.

Soignez la place, la forme ainsi que le libellé du CTA

L’utilisateur doit détecter rapidement votre CTA (Call To Action ou bouton d’incitation à l’action), car il s’agit de l’action que vous souhaitez qu’il réalise. Grâce à son affordance – capacité à rendre un objet ou un service « intuitif » – il doit évoquer son utilisation et sa fonction d’un seul coup d’œil. Il est donc important que cet élément interactif apparaisse comme cliquable. Par ailleurs, le libellé du bouton doit expliquer sa fonction. Évitez les étiquettes génériques telles que « Soumettre » et « Envoyer », en utilisant à la place des libellés qui décrivent l’action telle que « Créer mon compte ».

À la fin de la complétion, pensez à rassurer l’utilisateur et fournir un état de réussite

Une fois le formulaire renseigné, il est essentiel d’informer l’utilisateur en lui indiquant que sa soumission a réussi puis diriger le vers une nouvelle page. Vous pouvez également fournir un récapitulatif des informations précédemment renseignées.

Conclusion

Notre motivation en tant que concepteurs est d’accompagner au mieux le processus de remplissage d’un formulaire, nous devons nous efforcer de créer des interactions sans couture. Cependant rien de tel que des tests utilisateurs pendant et après la conception pour valider vos hypothèses et augmenter votre taux de conversion.

image
image
Bérengère Noël
28 mai 2020
Design . Mobile

Marketing #1 Comment augmenter l’engagement de vos clients et de vos utilisateurs grâce aux mécanismes de gamification ?

Dans le domaine du web et des applications mobiles, la gamification, consiste à exploiter des mécanismes issus de l’univers du jeu dans d’autres domaines, comme des applications ou des sites internet. Elle vise à capter l’attention de l’utilisateur dans un processus de récompenses lui donnant envie de continuer et d’y revenir régulièrement. Le jeu et […]
image
image
IKOMOBI
26 mai 2020
Stratégie

Après le confinement : comment faire pour réussir sa transformation digitale ?

La mise en quarantaine d’une large partie de nos entreprises et services publics, bien que imprévisible, raisonne comme un coup de semonce pour chaque dirigeant, notamment vis à vis du niveau de “digitalisation” de son entreprise. Pour les entreprises à maturité digitale plutôt élevée, cette situation s’est transformée en stress test impromptu, impitoyable révélateur des dysfonctionnements […]
image
image
Bérengère Noël
5 mai 2020
Design

Design #2 Quelles bonnes pratiques faut-il privilégier lors de la conception d’un formulaire en ligne ?

Le formulaire est bien souvent l’étape clé d’un parcours utilisateur : paiement en ligne, création de compte, prise de contact, etc. Un formulaire mal conçu génère de nombreux irritants et pénalise la qualité générale d’une expérience utilisateur. Par conséquent, il convient de maîtriser les bonnes pratiques correspondantes et concevoir des formulaires qui ne comportent aucun […]
image
image
Bérengère Noël
28 avril 2020
Design . Mobile

Design #1 En e-commerce, quelles bonnes pratiques faut-il adopter sur mobile pour proposer des fiches produits qui vont déclencher l’acte d’achat ?

Le mobile est définitivement devenu le point central de la relation client. Il répond aux besoins d’immédiateté des consommateurs. Ces derniers veulent être en mesure de vivre une expérience d’achat sans couture autrement dit sans frein ni obstacle, quelque soit le lieu ou le moment. Dans ce contexte, la fiche produit est l’élément central de […]
image
image
Équipe iOS
23 avril 2020
Mobile . Technologie

TechnIKO #2 Migration UIWebview vers WKWebview

UIWebview vs WKWebview UIWebview est un composant d’interface permettant d’afficher du contenu HTML directement dans une application. C’est un composant déjà ancien puisqu’il est apparu avec iOS 2. Il est fortement présent au sein de nos applications pour, par exemple, afficher le contenu des FAQ, des CGV, le tunnel de commande, la création de compte […]
image
image
Équipe Android
20 avril 2020
Mobile . Technologie

TechnIKO #1 Appeler une méthode Javascript dans une Webview via Kotlin

Le TechnIKO, c’est quoi ? Chez IKOMOBI, nos experts sont tous les jours confrontés à des problématiques nouvelles qui les amènent à concevoir des solutions innovantes pour nos clients. Grâce à TechnIKO nous allons vous faire découvrir les coulisses de ces différentes innovations, au travers notamment la diffusion des techniques et méthodes de développements chères […]
image
image
Florian Hureau
23 décembre 2019
Actualités

IKOMOBI News #6 : Spotify, Youtube Ads, 5G, voice, Dior, mèmes et autres actualités digitales

Chaque sprint (toutes les 2 semaines), retrouvez les infos UX design, transformation digitale, développement mobile, web et marketing mobile par IKOMOBI. « 圣诞老人到了! » D’où vient cette citation ? Scrollez au bas de l’article pour voir la source 😉 2019 Wrapped : Spotify donne un aperçu de l’usage des données personnelles pour les années à venir La fin […]
image
image
Florian Hureau
3 décembre 2019
Actualités

IKOMOBI News #5 : Tesla, Black Friday, TikTok et autres actualités digitales

Chaque sprint (toutes les 2 semaines), retrouvez les infos UX design, transformation digitale, développement mobile, web et marketing mobile par IKOMOBI. “La reconnaissance faciale va protéger les droits et intérêts légitimes des citoyens contre les escroqueries et les inscriptions frauduleuses.” D’où vient la citation de la semaine ? Scrollez au bas de l’article pour voir […]
image
image
Florian Hureau
19 novembre 2019
Actualités

IKOMOBI News #4 : Disney+, WeChat, Motorola et autres actualités digitales

Chaque sprint (toutes les 2 semaines), retrouvez les infos UX design, transformation digitale, développement mobile, web et marketing mobile par IKOMOBI. « L’informatique doit être au service de chaque citoyen. Elle ne doit porter atteinte ni à l’identité humaine, ni aux droits de l’homme, ni à la vie privée, ni aux libertés individuelles ou publiques. » D’où […]
image
image
Équipe Android
7 novembre 2019
Technologie

London droidcon 2019 : l’incontournable grand-messe européenne des développeurs d’applications mobiles Android

Les 24 et 25 octobre derniers, deux représentants de notre équipe de développement Android se sont rendus, à Londres, à la droidcon 2019 pour faire le plein de nouveautés techniques à propos de leur plateforme fétiche. Reportage. À peine sortis de l’Eurostar, nous prenons le métro londonien pour rejoindre le Business Design Centre qui héberge […]
image
image
Florian Hureau
5 novembre 2019
Actualités

IKOMOBI News #3 : l’actualité digitale via le prisme de l’agence mobile

Chaque sprint (toutes les 2 semaines), retrouvez les infos UX design, transformation digitale, développement mobile, web et marketing mobile par IKOMOBI. Adobe Photoshop sur iPad : fin de la version bêta La vingt-et-unième mouture de cet éditeur d’image comporte son lot de nouveautés portant sur l’amélioration continue des centaines (milliers ?) d’outils qu’il propose : […]
image
image
Florian Hureau
15 octobre 2019
Actualités

IKOMOBI News #2 : l’actualité digitale via le prisme de l’agence mobile

L’actualité UX design, transformation digitale, développement mobile, web et marketing mobile par IKOMOBI Mastercard, Stripe, eBay et Visa quittent Libra, la monnaie virtuelle de Facebook Après les interrogations voire réticences de nombreux gouvernements à travers le monde, ce sont maintenant ses partenaires historiques qui font faux bond au projet Libra. Tour à tour et à […]