Communication Design Outils web

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 d
ocument 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).

Martin Lessard
Conférencier, consultant en stratégie web et réseaux sociaux, chargé de cours. Nommé un des 8 incontournables du Montréal 2.0 (La Presse, 2010). Je tiens ce carnet depuis 2004.
http://zeroseconde.com

2 thoughts on “La bible du design de formulaire

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *