Designers et marketeurs passent énormément de temps pour rendre les expériences utilisateurs plus agréables sur les sites internet. Pourtant, ce temps de travail peut être gâché par la simple non-optimisation des formulaires et champs de saisie d’informations. Certes, ce n’est pas le sujet design ou web-marketing le plus sexy mais il s’agit clairement d’une compétence (une science ? De nombreuses études ont porté sur ce sujet) qu’il faut maîtriser pour optimiser son taux de conversion. Sans être parole d’évangile, les best practices décrites ci-dessous doivent faire office de guide dans une démarche d’optimisation continue : idéalement, il serait nécessaire de les d’A/B tester tant les contextes et les enjeux de différents sites internet peuvent varier.

Guide – comment optimiser vos formulaires et champs de saisie ?

1. Adopter une disposition logique des champs

On commence par le b.a.-ba. L’ordre dans lequel l’utilisateur doit saisir des informations dans des champs est primordial. Par exemple, si un utilisateur doit renseigner une adresse de livraison, on demandera d’abord les informations liées à l’identification de la personne qui doit recevoir l’objet acheté, puis les informations liées à l’adresse en tant que telle. Pour ces informations, on débutera par l’adresse puis le code postal et, enfin, la ville. Modifier cet ordre irait contre la logique commune à tous les utilisateurs (en l’occurrence, cet exemple est propre à une clientèle française). Cette logique est d’autant plus forte qu’elle concerne aussi les formulaires papier dans la vie courante. Autre exemple, quand on demande une date de naissance, l’ordre des champs sera le suivant : jour – mois – année. Le b.a.-ba je vous disais.

L’exemple d’Uniqlo

Même s’il n’est pas parfait pour d’autres raisons, le formulaire de création de compte d’Uniqlo propose une organisation des champs relativement logique.

L'exemple du formulaire Uniqlo

2. Ne demandez que le strict nécessaire

Essayer de disposer des champs de formulaire supplémentaires pour tenter de récupérer des informations supplémentaires est un jeu qui peut clairement ne pas en valoir la chandelle. Mieux vaut se contenter du strict minimum pour ne pas perdre l’utilisateur qui lâcherait prise devant un nombre de champs trop élevé. Si, malgré tout, vous souhaitez demander des informations non obligatoires, utiliser l’astérisque (*) pour distinguer les champs obligatoires des autres.

L’exemple d’Evernote

Evernote propose un écran d’inscription au service qui ressemble à un écran de connexion et ne demande que deux informations à l’utilisateur pour la création d’un compte, son e-mail et un mot de passe. Rien de plus.

Formulaire de création de compte Evernote

2 champs, pas plus.

L’exemple d’Amazon

Amazon sait faire concis et c’est une bonne nouvelle pour son taux de transformation. Lors de l’inscription, ne sont demandés que les nom,  prénom, adresse email et mot de passe. Le numéro de téléphone est bien présent mais en facultatif (à noter que la page d’explication derrière le lien « plus d’informations » est relativement mal conçue).

Amazon réduit au minimum le nombre de champs nécessaires dans un formulaire

3. Ecrivez et décrivez clairement vos attentes

Il n’y a rien de plus fatiguant pour un internaute que de ne pas comprendre ce qu’on lui demande. Si vous avez besoin de son numéro de téléphone, utilisez un intitulé clair et donnez aussi les informations liées au type de saisie attendu, format français (00 11 22 33 44) ou international (+33 0 11 22 33 44). Idéalement, il faudrait que la saisie de ces deux formats soit acceptée. Autre exemple intéressant, celui de la définition d’un mot de passe : on sait que les règles de définition des mots de passe se sont considérablement durcies ces derniers temps.. et celles-ci sont souvent à dimension variable en fonction des sites internet. Les caractères numériques sont-ils autorisés ? obligatoires ? L’utilisateur peut-il utiliser des majuscules dans son mot de passe ? A vous de lui indiquer les règles du jeu de manière à ce qu’il ne les découvre pas au fur et à mesure de ses tentatives de saisies.

L’exemple de Dropbox

Dropbox explique clairement ce qu’il attend de l’internaute en intégrant le label directement dans les champs. De même, pour la définition du mot de passe, une jauge de complexité est présente avec un message donnant quelques conseils au survol.

Le formulaire d'inscription du service Dropbox

L’exemple Gmail

Lors de la création d’un compte Gmail, Google donne les informations nécessaires au moment où l’on rentre dans un champ. Par exemple, pour la saisie du mot de passe, on connaît les règles avant même de commencer la saisie de celui-ci. De même, nous en parlerons ci-dessous, il intègre une notion de live check avec le champs adresse email.

L'exemple d'optimisation des champs par Google avec Gmail

4. Préférez un alignement vertical des champs

Dans une étude d’eye tracking datant de 2006, certes ce n’est pas l’étude la plus récente mais elle reste à l’ordre du jour, Penzo a testé différentes dispositions quant aux labels des champs de formulaires : la performance la plus rapide était atteinte avec un aligement des labels et des champs de manière verticale, cette disposition permettant de repérer en une seule fixation à la fois le label et le champ à remplir. Un autre avantage lié à cette disposition est que la longueur du label n’influe pas sur le positionnement du champ à remplir.

eye tracking sur formulaire

5. Faîtes correspondre la longueur du champ avec la longueur de la saisie attendue

La longueur du champ donne une indication claire sur le contenu de la saisie attendue et lui facilite le travail. Il s’agit ici de bon sens mais faire preuve de cohérence entre la longueur du champ et la saisie attendue est un must-do. Evidemment, cela fonctionne dans les deux sens :
– ne pas designer un champ trop court pour une saisie longue
– ne pas saisir un champ trop long pour une saisie courte.
Au delà de l’optimisation pure et dure du taux de transfo, cette cohérence de longueur permet de limiter les erreurs de saisie (étude de Cooper et al datant de 2001).

6. Optimiser le travail de validation et de correction de la saisie de l’internaute

Pourquoi attendre que l’internaute clique sur le bouton l’emmenant sur l’étape suivante pour lui indiquer que sa saisie est correcte ou incorrecte ? On est techniquement en mesure de vérifier la saisie liée à un champ donné avec du live-check, que ce soit sur le type de caractère attendu (par exemple, pas de lettres dans la saisie d’un numéro de téléphone) ou sur la longueur de la saisie (par exemple, 5 numéros pour un code postal). Si l’utilisateur doit saisir un email, on sait forcément que celui-ci contiendra un caractère « @ », au moins un point et une extension de domaine valide. Toutes ces règles peuvent être techniquement intégrées dans le système de validation de vos champs.

Si techniquement, vous ne pouvez mettre en place ce process de live check, il est, à minima, nécessaire de donner l’information à l’utilisateur de l’endroit où se trouve les champs à corriger ou saisir.

Le (mauvais) exemple d’Etsy

Etsy a beau être un site mondialement connu et reconnu, certains de ses formulaires gagnerait à être optimisé. Si vous faîtes une erreur dans l’une de vos saisies, vous ne le saurez qu’après avoir tenté de passer à l’étape suivante. De plus, concernant le mot de passe, vous pourrez aussi découvrir qu’il est nécessaire que celui-ci fasse au moins 6 caractères.

le formulaire etsy pourrait clairement être amélioré

Le bon exemple de Dropbox

Avec l’utilisation d’un code couleur rouge sur les zones concernées et d’un wording approprié, Dropbox ne saurait être plus clair pour l’utilisateur qui n’aurait pas compris la façon dont il devait compléter les champs.

erreur-champs-dropbox-digital

7. Faîtes preuve d’imagination

Avec son formulaire d’inscription, Canal Plus fait dans l’original et mise sur l’humour : le formulaire met à l’honneur Catherine et Liliane, deux secrétaires qui ont leurs habitudes sur la chaîne cryptée.

formulaire-canal-plus-conversion-digitale

 

Les deux compères commentent avec légèreté votre progression dans la complétion du formulaire vous amenant à vous abonner. Une barre de progression, située tout en bas de l’écran indique à l’internaute son niveau de progression.

formulaire-canal-plus-conversion formulaire-canal-plus-conversion-2 formulaire-canal-plus-conversion-3

Pour aller plus loin

Un guideline de 20 étapes pour la création et le design de vos formulaires – http://www.intechopen.com/books/user-interfaces/simple-but-crucial-user-interfaces-in-the-world-wide-web-introducing-20-guidelines-for-usable-web-fo
Un peu d’inspiration avec des champs plein d’innovation – http://blog.saijogeorge.com/creative-form-input-field-design-examples/
The best form ever – http://www.gravitatedesign.com/blog/best-form-ever/
De la gestion des erreurs – http://www.smashingmagazine.com/2012/06/27/form-field-validation-errors-only-approach/

Laisser un commentaire

Votre adresse e-mail ne sera pas publié.