Pimp my form

L’ex­pé­rience utili­sa­teur four­nie par un formu­laire est déter­mi­nante. Tant pour la data que vous souhai­tez recueillir que pour votre taux de conver­sion et/ou de trans­for­ma­tion. Un formu­laire qui est simple et rassu­rant pour l’uti­li­sa­teur vous permet­tra d’at­teindre plus faci­le­ment vos objec­tifs, quels qu’ils soient.

Commen­cez par limi­ter la charge cogni­tive

Moins l’uti­li­sa­teur a à réflé­chir à ce qu’il doit faire pour atteindre son objec­tif, plus il est probable qu’il y parvienne. Il convient donc de limi­ter le nombre d’étapes, la longueur perçue des étapes ainsi que leur diffi­culté, et n’hé­si­tez pas à lui expliquer quel sera son béné­fice à rensei­gner votre formu­laire (rece­voir un cadeau, un bon de réduc­tion, ou simple­ment assu­rer le fonc­tion­ne­ment du service que vous propo­sez…)

Présen­tez votre formu­laire sur une seule colonne

Cela permet de limi­ter les mouve­ments oculaires.

Dans ce même but, les labels se présentent au dessus de l’in­put et pas à côté.

Utili­sez la taille comme affor­dance

Adap­tez la taille des champs au contenu attendu. Par exemple, en France, un code postal est composé de 5 carac­tères, on utilise donc un champ moins large.

On vous voit venir avec vos “c’est moins joli à l’oeil”, certes, mais ces bonnes pratiques vous assurent un meilleur taux de remplis­sage.

Suppri­mez les champs non-essen­tiels

Si la data que vous souhai­tez récol­ter est indis­pen­sable, il est impor­tant de distin­guer ce qui vous sera vrai­ment utile afin de ne pas deman­der trop d’in­for­ma­tions à votre utili­sa­teur.

Les utili­sa­teurs sont souvent réti­cents à donner des infor­ma­tions qui ne leur semblent pas perti­nentes dans le contexte où ils les donnent, et c’est une cause d’aban­don. Si vous voulez préser­ver votre taux de conver­sion / de trans­for­ma­tion, limi­tez-vous aux infor­ma­tions essen­tielles.

Indiquez les champs facul­ta­tifs plutôt qu’o­bli­ga­toires

Il n’est pas rare de rencon­trer des formu­laires avec des champs obli­ga­toires et facul­ta­tifs.

Si vous avez la contrainte d’ajou­ter des champs non-essen­tiels, l’uti­li­sa­teur trou­vera moins contrai­gnant de voir un champ facul­ta­tif que 3 obli­ga­toires. (Pour les déve­lop­peurs, ce sera un effort supplé­men­taire, car pour le moment rien n’est prévu dans les frame­works pour vous simpli­fier la tâche. Par exemple, Symfony permet de marquer les champs comme obli­ga­toires mais pas les champs comme facul­ta­tifs ou option­nels. Nul doute que cela évoluera aussi dans le bon sens de ce côté-là).

Quoiqu’il arrive, les étoiles en fin de label sont à pros­crire, on constate qu’elles ne sont pas comprises par une majo­rité d’uti­li­sa­teurs. On préfè­rera noti­fier “Facul­ta­tif” ou “Option­nel” à côté du label du champ non obli­ga­toire.

Evitez les Capt­cha

Il existe aujourd’­hui des services tiers comme Akis­met qui permettent de détec­ter si oui ou non l’uti­li­sa­teur est un robot. Des bundles sont dispo­nibles pour Word­press, Symfony, Magento ; ou encore des honey­pot (un champ non visible en front, mais lisible par les robots, si celui-ci est rempli c’est qu’il s’agit d’un robot et pas d’un utili­sa­teur). Ce ne sont pas des solu­tions parfaites, et les diffu­seurs de spams trou­ve­ront toujours un moyen de parer à ces solu­tions anti-spams, c’est un peu le jeu du chat et la souris.

Vous pouvez aussi utili­ser l’ou­til Google ReCapt­cha dans sa version invi­sible, qui analyse le remplis­sage du formu­laire et décide ou non d’af­fi­cher le capt­cha simple “Je ne suis pas un robot” s’il a un doute, notez néan­moins que les chiffres ont tendance à montrer que c’est un frein à la conver­sion.

Anti­ci­pez les diffé­rentes possi­bi­li­tés de rensei­gner un champ

Par exemple, un numéro de télé­phone peut se rensei­gner de plusieurs manières :

• 0611223344
• +33611223344
• 0033611223344
• 06 11 22 33 44

Prévoir ces diffé­rentes possi­bi­li­tés limite la frus­tra­tion pour l’uti­li­sa­teur.

C’est l’uti­li­sa­teur qui décide

Evitez de contraindre votre utili­sa­teur sur les éléments à inté­grer à un mot de passe (carac­tères spéciaux, majus­cules, chiffres). Essayez plutôt de le sensi­bi­li­ser sur la robus­tesse du mot de passe qu’il choi­sit et de lui suggé­rer d’ajou­ter des éléments qui augmen­te­ront la sécu­rité.

Formu­laire d’ins­crip­tion à Drop­box

Utili­sez les outils d’auto-complé­tion et la recherche prédic­tive

Cela simpli­fie la tâche de l’uti­li­sa­teur, soit par un gain de temps, soit par une sugges­tion d’idée.

Auto-complé­tion sur un formu­laire Air France

Faites atten­tion au contraste et à la taille de votre typo

Géné­ra­le­ment on recom­mande 16px pour un site ou une appli­ca­tion, mais notez que cela dépend de la typo utili­sée. Une typo bien lisible est aussi l’as­su­rance de permettre l’ac­ces­si­bi­lité aux personnes mal voyantes. Il existe de nombreux outils en ligne pour tester le niveau de contraste, par exemple color­safe.

Limi­tez les drop­downs quand c’est possible

Utili­sez plutôt des step­pers ou des segmen­ted controls lorsque vous en avez la possi­bi­lité (notam­ment quand vous n’avez pas trop d’in­for­ma­tions à inté­grer dans votre champ d’op­tions), il est préfé­rable d’évi­ter les drop­downs, qui néces­sitent un clic supplé­men­taire pour visua­li­ser les options. Cela permet d’évi­ter une action inutile.

Drop­downs et segmen­ted controls sur des formu­laires de recherche de vols

Pensez aux novices mais ne négli­gez pas les experts

Typique­ment, l’uti­li­sa­tion du clavier est un mode d’in­te­rac­tion “expert”. Pensez donc à garder la touche Tab pour passer d’un champ à un autre. De la même façon, les novices comme les experts n’aiment pas l’auto-advance. Les uns utilisent le clic de la souris, les autres la touche Tab du clavier. L’uti­li­sa­teur a besoin de se sentir libre de navi­guer comme il veut.

Guidez votre utili­sa­teur et gérez ses erreurs, le cas échéant

Signa­lez les champs actifs

En augmen­tant l’épais­seur du contour de votre input et/ou sa couleur (pseudo-classe CSS :focus). Sur mobile, le champ actif se situe juste au-dessus du clavier.

L’uti­li­sa­teur sait où il se trouve.

Exemples de focus dans des champs de formu­laires (connexion à Invi­sion en mobile)

Utili­sez les wizards pour sépa­rer les diffé­rentes étapes

Par exemple, dans un tunnel de paie­ment où il y a la plupart du temps plusieurs étapes, indiquez-les clai­re­ment à vos utili­sa­teurs. Ils sauront dès le départ quelle est la charge de travail qui leur reste mais aussi où ils sont. Divi­ser un long formu­laire en étapes est un bon moyen de le rendre plus digeste pour votre utili­sa­teur.

Exemple de wizard dans un tunnel de paie­ment

Ne placez pas vos labels dans les champs

En effet, une fois remplis, ils dispa­raissent. Si l’uti­li­sa­teur souhaite véri­fier son formu­laire, il ne saura pas quelle est la ques­tion posée, puisqu’elle aura disparu. Si ce type de design vous plait vrai­ment, vous pouvez utili­ser les floa­ting labels. Ainsi l’uti­li­sa­teur ne sera pas perdu.

Floa­ting labels dans un formu­laire de Niel­sen and Norman

Bonne nouvelle pour les utili­sa­teurs de boots­trap, vous n’au­rez pas à vous creu­ser la tête avec votre feuille CSS, tout est prévu (et c’est récent)

Floa­ting labels dans Boots­trap

Vali­dez les champs rensei­gnés correc­te­ment

Faites appa­raître coche verte à droite immé­dia­te­ment après la saisie. Atten­tion à ne pas affi­cher un message d’er­reur pendant que votre utili­sa­teur n’a pas terminé de rensei­gner sa réponse !

Rédi­gez des messages d’er­reur clairs et péda­go­giques pour aider à la correc­tion

Plus le message est précis, mieux l’uti­li­sa­teur est guidé ; s’il manque une @ dans un champ email, il faut mention­ner spéci­fique­ment à l’uti­li­sa­teur qu’il manque une @ et pas simple­ment “email inva­lide”.

Exemple de champ validé et message d’er­reur sur un champ mal rensei­gné

Choi­sis­sez des labels expli­cites pour vos call-to-actions

Evitez les “Envoyer” au profit de “Créer mon compte”, “Réser­ver mon billet” ou encore “Payer XX €”. Pour vous aider, complé­tez “je veux” avec l’ac­tion que vous avez à faire.

Pensez à modi­fier l’état de vos call-to-action pour infor­mer l’uti­li­sa­teur

Par exemple, dans un formu­laire de paie­ment, vous pouvez montrer par une anima­tion que le paie­ment est en cours, puis validé.

Les micro-inter­ac­tions sont un vrai plus dans l’in­for­ma­tion de l’uti­li­sa­teur, elles lui permettent de ne pas douter de la prise en compte de son action.

Exemple de micro-inter­ac­tion sur un bouton de paie­ment

Pimpez aussi vos champs de numéro de carte

Il existe une anima­tion inté­res­sante en Javas­cript. Lorsque l’uti­li­sa­teur saisit les premiers chiffres de son numéro de carte, le champ sélec­tionne auto­ma­tique­ment le type de carte concerné (https://cardjs.co.uk/)

Anima­tion JS de détec­tion de carte Visa

Anima­tion JS de détec­tion d’une carte Ameri­can express

Chan­gez des resti­tu­tions clas­siques

Quand la situa­tion s’y prête, n’hé­si­tez pas à trou­ver une autre option qu’une suite de champs de saisie. L’in­te­rac­tion créée par les deux solu­tions qui suivent est parti­cu­liè­re­ment inté­res­sante et enga­geante.

Type­forms

https://www.type­form.com/

Ici, le ques­tion­naire est resti­tué sous la forme d’une inter­view, avec soit des champs de saisie pour répondre, soit des éléments à sélec­tion­ner.

Cette resti­tu­tion est inter­ac­tive et avec une UI travaillée, on arrive à un résul­tat parti­cu­liè­re­ment agréable à utili­ser.

Exemple de resti­tu­tion d’un formu­laire Type­form

Natu­ral language forms

Ils ne suivent pas le style tradi­tion­nel. Ici, les champs de saisie sont inclus dans une phrase écrite en langage natu­rel. L’uti­li­sa­teur est solli­cité pour four­nir les mêmes infor­ma­tions, mais sous une forme narra­tive. Le but est de rendre la saisie aussi facile que possible et aussi un peu amusante.

Exemple de resti­tu­tion d’un formu­laire en Natu­ral language form

Inté­grez des éléments de réas­su­rance

En effet, de plus en plus d’in­ter­nautes sont frileux quant à l’uti­li­sa­tion de leurs données person­nelles. N’hé­si­tez pas à préci­ser la gratuité, l’ab­sence d’en­ga­ge­ment, les preuves sociales. En revanche, les symboles de sécu­rité sont à réser­ver par conven­tion aux formu­laires de paie­ment, l’uti­li­sa­teur pour­rait penser qu’il a quelque chose à payer en voyant un picto­gramme de cade­nas, par exemple.

Ne négli­gez pas l’UI

Plus un formu­laire est beau, plus l’uti­li­sa­teur est rassuré. L’exo­tisme est souvent contre-produc­tif quand il s’agit de trans­for­mer, gardez des champs qui ressemblent à des champs, des messages d’er­reur qui ressemblent à des messages d’er­reur et des boutons qui ressemblent à des boutons.