L’art du formulaire web efficace

L’excellent site www.smashingmagazine.com propose 2 études qui permettent de dégager les règles de construction d’un formulaire web efficace et fonctionnel. Voici résumé, l’essentiel de ce qu’il faut retenir…
Positionnement du lien :

• Le lien vers le formulaire est placé dans le header dans 59% des cas (plutôt dans le coin supérieur droit pour 76% de ces cas)
• Sinon il est indiqué de manière proéminente sur la page d’accueil (21 % des sites)

Design / Aspect

• Les titres des champs sont accentués en gras et de couleur (62 %)
• Les étiquettes sont alignées à droite de manière à être rapprochées du champ correspondant (41 %)
• es champs arrangés verticalement sont préférés aux champs arrangés horizontalement (86 % des sites).
• Les champs sont d’habitude groupés et séparés par un simple espace blanc (69 %)
• Les informations d’aide apparaissent principalement au-dessous du champ (57 %) ou sur le côté droit du champ (26 %)
• Le bouton « Soumettre » est majoritairement aligné à gauche (56 %) ou bien centré (26 %),
• Le bouton « Annulez » n’est pas utilisé (92 % des cas),

Contenu

• Les formulaires d’inscription ne font qu’une seule page (93 % des cas )
• Les formulaire ont une disposition simplifiée pour éviter des distractions pour les utilisateurs (61 %)
• Des informations complémentaires attirent l’attention des visiteurs sur les avantages de l’enregistrement (41 %)
• Les sites ont tendance à utiliser peu de champs obligatoires, ainsi que peu de champs optionnels.

Aide aux visiteurs

• 85 % des sites n’utilisent pas de légende
• 78 % des sites n’utilisent pas d’astérisques pour accentuer les champs obligatoires
• 84 % des formulaires n’ont pas d’effet Over, Active ou Focus sur les champs
• 57 % des formes de web fournissent une aide « statique » (des détails, placés à côté du champ expliquent, ce qui est attendu de la contribution de l’utilisateur) et seulement 10% ont des « tooltips » qui apparaissent sur demande
• La gestion d’erreur apparaît soit par un message au sommet du formulaire (30%) soit par une accentuation du champ correspondant (29%), soit les 2 à la fois (25 %)
• La confirmation e-mail n’est peu utilisée (18%), contrairement la confirmation de mot de passe (72 %)
• Le message de remerciement motive les utilisateurs à poursuivre la visite du site (45 % des cas).

Vous pouvez retrouver l’intégralité des articles (en anglais), ici et là.

Voilà, vous avez toutes les informations en main pour réaliser le formulaire web idéal, ou plutôt celui qui fonctionnera le mieux auprès de vos visiteurs.

Articles similaires:

---

• 7 + 10 + 5 = 22 principes essentiels de conception web,
• Référencer un blog, c’est différent d’un site ?,
• A la recherche des polices perdues,
• Vectorisation de monstres… un tuto sympa,
• Des sites ressources pour webdesigner à foison,