Astuces pour Créer des Formulaires HTML Efficaces
par Adriana Iordan
traduit de l'Anglais par Christophe Da Silva

Les formulaires HTML sont un moyen pour un internaute d'entrer en contact avec un site web. Ils sont essentiels dans presque chaque interaction qu'on peut avoir avec un site internet, comme les requêtes via des outils de recherche internes, fournir une information (tags, commentaires, données personnelles, logins...) ou rechercher des produits sur des catalogues en ligne.

Dans la plupart des cas, l'utilisabilité des formulaires améliorera celle du site web tout entier. L'objectif principal d'un formulaire efficace est de s'assurer que les internautes-cibles sont capables d'interagir correctement avec le site web tout en ayant une expérience d'utilisation positive et agréable.

 

1- Aider les utilisateurs à comprendre que votre formulaire économisera leur temps et assurera que les champs soient convenablement renseignés

D'autre part, vos instructions doivent être aussi précises que possible. Prenez toujours en compte les utilisateurs potentiels et donc que votre formulaire s'adresse à la fois aux nouveaux venus sur Internet et les utilisateurs expérimentés.

2- Tous les formulaires devraient contenir les informations essentielles suivantes :

• Un titre : à quoi est destiné le formulaire
• Une information de contact pour fournir une aide au remplissage du formulaire
• Un bouton d'envoi à la fin (logique), et optionnellement un bouton "effacer"

3- Eviter les formulaires avec un grand nombre de champs à renseigner

4- Ne demandez jamais deux fois la même information

Surtout lorsque votre formulaire fait plus d'une page, et c'est une erreur courante.

5- Avoir recours à un audit sur l'utilisation des informations après la mise en route du formulaire peut s'avérer utile

En effet, beaucoup d'informations demandées ne sont jamais utilisées. Dans ce cas, il est nécessaire de réduire les informations sollicitées à votre strict nécessaire.

6- Morcellez vos formulaires

Si vos formulaires sont trop longs, ils sèmeront la confusion.

• Si votre formulaire est trop long, essayez de le diviser en plusieurs pages, chacune sur un thème unique. Par exemple, la première page pour des détails de produits, une autre pour les données personnelles, et enfin une pour le moyen de paiement et les conditions de livraison.

• Chaque page doit être validée à chaque étape, ainsi il est plus simple de notifier les éventuelles erreurs. Posez vos questions dans un ordre logique. De cette manière, les informations pourront être incrémentées automatiquement depuis les pages précédentes.

• Si votre formulaire nécessite la navigation sur plusieurs pages, pensez à faciliter les retours sur les pages précédentes. Cela peut être utile si l'internaute se rend compte qu'il a commis une erreur, ou qu'il désire changer un paramètre déjà renseigné. Si tel était le cas, il ne doit pas avoir à recommencer la saisie du formulaire.

• Le stockage des données collectées est très important. Lorsque l'internaute revient en arrière pour corriger un champ, il doit retrouver le formulaire déjà rempli. Par exemple, il n'y a aucune raison que l'on doive une fois de plus accepter les conditions d'utilisation à cause d'un champ mal renseigné.

7- Les formulaires bien présentés sont plus faciles à remplir

Cela nécessite :

• l'examen de la présentation du formulaire comprenant le texte, l'emplacement et l'accessibilité, gardez une cohérence dans le formatage et les signes de ponctuation (évitez les phrases toutes en majuscules ou les titres de champ)

• les champs doivent être alignés, à la fois horizontalement et verticalement avec les étiquettes

• essayez de structurer votre formulaire sur une seule colonne, c'est plus facile à lire. Dans le cas de deux colonnes, les utilisateurs oublient souvent de renseigner les champs de la colonne de droite. Deux colonnes sont recommandées seulement dans le cas d'un grand nombre de données auxquelles on doit constamment se référer.

• soignez la politesse et lancez une vérification orthographique et grammaticale sur votre formulaire.

8- Prenez en compte 3 niveaux de validation

• strict : un utilisateur ne peut pas envoyer le formulaire tant qu'il n'a pas renseigné les informations demandées
• soft : un utilisateur peut envoyer le formulaire, mais reçoit une notification de donnée manquante ou incorrecte
• aucun : tous les champs sont acceptés sans conditions

Faites votre choix en corrélation avec l'importance de recevoir des données valides. Habituellement, les niveaux "strict" et "aucun" sont combinés dans le même formulaire.

9- Assurez-vous que les champs obligatoires soient clairement précisés

Pour cela, vous devriez à votre convenance :

• employer un astérisque et le terme "requis" entre parenthèses après le champ (optionnellement expliquer pourquoi ce champ est obligatoire)
• colorer le champ d'une autre couleur. N'utilisez pas le rouge, il est réservé aux notifications d'erreurs
• diviser votre formulaire avec une partie obligatoire et une partie optionnelle
• employer le formatage gras ou italique pour signaler les champs obligatoires

Quoi que vous choisissiez, fournissez toujours une légende (facile à comprendre) pour l'explication d'un symbole et surtout ne proposez pas trop de champs obligatoires sans explication, vous perdrez la confiance des utilisateurs ("pourquoi veulent-ils aussi mon numéro de téléphone personnel ?").

10- Renvoyez des messages d'erreurs pertinents

A chaque erreur rencontrée, fournissez des explications faciles à comprendre. Les messages d'erreur doivent faire comprendre aux utilisateurs quelle est la nature de leur erreur et vous devrez fournir un bouton pour revenir à l'endroit de l'erreur rencontrée. C'est un aspect facile à mettre en place avec le CSS et maintenant avec AJAX.

11- Faites attention avec les champs à renseigner et les menus déroulants

• Tous les champs doient comporter un label (un titre). Cela n'affectera pas les utilisateurs expérimentés, mais aidera considérablement les novices. Les utilisateurs ont l'habitude de voir des labels au-dessus des champs à remplir, ou à leur gauche.
• Essayez de remplacer vos menus déroulants par des champs textuels. Les menus déroulants sont difficiles à employer lorsqu'ils ont un grand nombre d'options.
• Fournissez un espace où les utilisateurs peuvent ajouter un commentaire écrit, d'au moins 50 caractères de long par 10 lignes de haut.
• Fournissez également des réponses par défaut dans la mesure du possible, et laissant le choix aux clients

12- Avez-vous fait testé votre formulaire avant de le mettre en ligne ?

Demandez à des utilisateurs-cibles de remlir votre formulaire. Analysez leur feedback, et adaptez votre formulaire à leurs besoins. L'astuce la plus importante de toutes celles citées précédemment, et celle du bon sens : les utilisateurs comprennent-ils ce que vous leur demandez de faire ? Vous pouvez juger de l'accessibilité de votre formulaire HTML sur la quantité de formulaires qui contiennent des erreurs.

 

Personne n'aime remplir de formulaire, mais ils sont souvent le seul moyen d'atteeindre un objectif. Beaucoup d'utilisateurs savent que les formulaires sont incontournables, mais ils seront toujours réticents à les remplir.

Imaginez deux artisans vendant tous deux la même horloge munie d'une sonnerie et ayant les mêmes fonctions. L'un d'eux ajoute la possibilité de choisir la mélodie de l'alarme. Son horloge aura davantage de succès. Avec un prix moins élevé, il obtiendra un meilleur profit. Et bien Internet permet des possibilités illimitées. Dans la plupart des cas, un utilisateur abandonnera la saisie de votre formulaire et essaiera celui d'un autre site web. Quelle différence entre votre société et celles de vos concurrents ? Il se pourrait que ce soit la facilité d'utilisation de vos formulaires HTML.