La bible du design de formulaire

C'est un condensé des "best practices" pour designer des formulaires. À mettre entre toutes les mains.

Ça permet de ne pas se poser éternellement les mêmes questions et d'accélérer le processus de discussion entre tous les intervenants (designer, ergonome, scénariste, conseiller, client) en pré-prod pour les wireframes et les maquettes. C'est basé en partie sur des tests d'eye-tracking. (via Fred Cavazza; Image LukeW)

On se surprend ensuite de se rendre compte que ce sont des évidences. C'est le but! Standardiser une fois pour toutes et se concentrer sur les autres éléments du site. Comme le dit l'auteur, le but d'un formulaire, le seul, c'est qu'il doit être complété.

Téléchargez le document de synthèse sur les meilleures pratiques pour les formulaires en ligne de Luke Wroblewski :

== Best Practices for Web Form Design (ficher PDF, 3.9 MB). ==

Par exemple, on y apprend:

Comment positionner le libellé d'un champ:

- Le plus intuitif, si les champs sont habituels (nom, prénom, adresse, etc) reste l'alignement au-dessus du champ.
- Si l'espacement vertical devient trop critique, optez pour la gauche du champ, avec alignement à droite
-Si le type de champ n'est pas familier (formulaire technique) optez pour la gauche du champ avec l'alignement à gauche

Comment déterminer les types de boutons:

-Le bouton d'action principal (soumission) doit être clairement distinct des autres actions secondaires.
-Par exemple, une forme de bouton pour l'action principal et des liens pour les actions secondaires.
-Retirer le bouton 'soumettre' après utilisation pour éviter des envois multiples.

Comment gérer graphiquement les erreurs:

-Communiquer les erreurs de soumissions avec un message en haut de page et à côté du champ fautif; contrastez avec le contexte (couleur, grosseur)
-Redoubler le message d'erreur à côté des champs fautifs.

Évidemment, c'est mieux mis en page et bourré d'exemples, téléchargez-le vite! Best Practices for Web Form Design (ficher PDF, 3.9 MB).