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
20 octobre 2020
UX design

Comment le design UX permet de transformer le parcours client pour répondre aux nouvelles attentes des consommateurs dans le secteur du m-commerce alimentaire ?

Concevoir des parcours clients percutants pour répondre aux nouvelles attentes des consommateurs Un grand groupe européen dans le domaine du retail alimentaire a fait appel au Studio UX Design d’IKOMOBI afin d’être accompagné dans la conception d’une nouvelle application mobile m-commerce. À l’heure du tout digital, les enseignes redoublent d’efforts pour répondre aux nouvelles attentes […]
image
image
Carl-Stephan Parent
24 septembre 2020
UX design

Transformation digitale, amélioration continue et application mobile

Le précédent numéro d’Ikonnect, la newsletter mensuelle d’Ikomobi, vous a donné l’opportunité de découvrir une nouvelle application mobile conçue et réalisée par les pôles Design UX et Android. Le succès rencontré par cette app, dont la vocation principale est de faciliter la gestion des rayons de magasins, a encouragé la direction de Cora à poursuivre […]
image
image
Carl-Stephan Parent
27 août 2020
IKOMOBI

Une app pour donner un vrai coup de pouce aux collaborateurs et mieux gérer les rayons du magasin. Vous êtes un retailer et vous en rêvez ? Cora et Ikomobi l’ont fait !

Pour faire face aux services popularisés par les géants du e-commerce (on pense à Amazon notamment avec Amazon Fresh ou Prime Now) ou les nouvelles enseignes spécialisées, le magasin traditionnel n’a pas d’autres choix que de se réinventer pour proposer une expérience fortement teintée de digital en phase avec les attentes des consommateurs d’aujourd’hui. Un […]
image
image
Équipe Android
16 juillet 2020
Développement application mobile

Faut-il migrer vers Jetpack / Android X ?

Pour assurer la rétrocompatibilité des applications mobiles avec le système Android, Google s’appuyait sur une bibliothèque de composants intitulée Android Support. La firme de Mountain View invite désormais à migrer les applications mobiles Android vers Jetpack et ses bibliothèques Android X.  Pourquoi faut-il procéder à cette migration dans les meilleurs délais ? À compter de […]
image
image
Équipe iOS
16 juillet 2020
Développement application mobile

TechnIKO #3 : Comment tester les push iOS simplement ?

Tester les notifications push sur iOS peut être un exercice très fastidieux : Configurer l’application pour qu’elle accepte les push Créer les certificats de push en conséquence Les uploader sur la plateforme utilisée pour gérer l’envoi des push (par exemple Accengage) Trouver le token de son device et créer un segment avec Configurer la push […]
image
image
Carl-Stephan Parent
16 juillet 2020
UX design

Le pôle Design UX d’Ikomobi imagine les nouveaux parcours de souscription online pour une enseigne spécialiste du crédit à la consommation

Proposer des parcours clients efficaces pour se distinguer au sein d’un marché très concurrentiel  Le crédit à la consommation est un marché fortement concurrentiel en France et à l’international. Il est constitué des banques de détail traditionnelles, de leurs filiales spécialisées (BNP Paribas Personal Finance, BPCE financement, Franfinance…) et des banques en ligne qui se […]
image
image
IKOMOBI
25 juin 2020
Développement application mobile

Click and collect : Ikomobi conçoit et réalise en un temps record, une application mobile pour l’enseigne de restauration Fée maison

Comme vous le savez, le click and collect (ou retrait sur point de vente) c’est ce nouveau parcours malin qui permet de passer commande depuis un site e-commerce, un e-shop dédié ou bien depuis une application mobile, puis de récupérer ses achats à un créneau horaire donné. L’intérêt suscité par ce nouveau service a été […]
image
image
Jason Dejaégère
25 juin 2020
Développement site web

L’intégration, une phase clé à ne pas négliger pour la bonne réalisation d’un site web RWD

Le processus de réalisation d’un site Internet RWD (Responsive Web Design) obéit à un enchaînement précis de procédures bien connu des professionnels du web. En synthèse, tout commence par la conception des écrans et se termine par la mise en ligne du projet. La procédure d’intégration est une étape moins connue. Elle assure pourtant la […]
image
image
Équipe iOS
23 juin 2020
Développement application mobile

Les 7 points clefs à retenir de la WWDC 2020

Compte tenu des contraintes imposées par la Covid-19, Apple a présenté sa très attendue conférence annuelle dans un format totalement inédit et 100% numérique. L’enseigne de Cupertino a notamment profité de cette nouvelle édition de la Worldwide Developers Conference pour présenter une série de nouveautés pour iOS 14 dont nous vous proposons ci-après une synthèse. […]
image
image
IKOMOBI
4 juin 2020
Développement application mobile . UX design

Ce que nous a enseigné la mise en pratique du neumorphisme en terme d’UX design et de développement lors de la réalisation d’une application mobile Android

La popularité croissante du neumorphisme nous a amené, chez IKOMOBI, à expérimenter son implémentation au sein d’une application Android et le proposer à nos clients. Voici le retour d’expérience de nos pôles d’experts UX Design et Android. Skeuomorphisme : dès l’origine, les UX designers cherchent à rendre l’expérience utilisateur plus intuitive Le Skeuomorphisme est une […]
image
image
Bérengère Noël
28 mai 2020
Développement application mobile . UX design

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 […]