Surlignage

Ergonomie

Conception des formulaires

Le nombre de formulaires en ligne ne cesse d’augmenter. On peut grâce à eux effectuer un grand nombre de démarches administratives, remplir ses déclarations de revenus, participer à des enquêtes d’opinion, faire des achats, etc. Mais ils ne sont pas tous bien conçus, ils ont parfois un aspect rébarbatif et ne sont pas toujours agréables à utiliser.

Pour le designer web, concevoir la présentation d’un formulaire est une tâche délicate. Je ne parle pas des formulaires simples, comme ceux utilisés pour envoyer un message ou poster un commentaire : ceux-là ne posent guère de difficulté. Le problème est bien plus ardu lorsqu’il faut mettre au point un formulaire complexe, parfois découpé en plusieurs pages, dont certaines parties évoluent en cours de saisie ou dont l’organisation est arborescente voire récursive.

Organisation logique des champs

Comme dans le cas d’un formulaire papier, le premier réflexe doit être d’organiser logiquement les champs. Par exemple, si le formulaire concerne une personne, on peut aller du plus spécifique (nom, prénom, date de naissance) au plus générique (niveau d’étude, langues pratiquées, loisirs). Mais on peut également classer les champs par ordre d’importance ou par fréquence de remplissage : il n’y a pas de règle absolue dictant cet ordre car tout dépend du contenu et des objectifs du formulaire.

On peut regrouper les champs portant sur des informations de même nature. Ces groupes seront eux-mêmes classés selon l’ordre le plus approprié. Si le formulaire doit être découpé en plusieurs pages, cette étape permet de définir le contenu de chaque page.

Organisation visuelle du formulaire

Les longs formulaires nécessitent de fournir des indices visuels soulignant leur organisation. Par exemple, les groupes de champs seront matérialisés par des éléments fieldset, ainsi que le veut la sémantique HTML, dont l’aspect sera défini dans une feuille de style.

Le regroupement visuel des champs est plus important encore lorsque le formulaire a une structure arborescente, ou si son contenu évolue au cours de la saisie. Supposons que l’utilisateur puisse saisir un numéro de téléphone puis cliquer sur un bouton pour saisir un ou plusieurs autres numéros. Si l’on ne montre pas que ces champs et le bouton font partie d’un même groupe, on aboutit rapidement à un formulaire confus.

Le style par défaut appliqué par les navigateurs à l’élément fieldset est souvent inadapté : il entoure d’un cadre des champs eux-mêmes encadrés, ce qui est assez lourd. Je préfère supprimer le cadre du fieldset et lui appliquer une couleur de fond discrète.

Grille de mise en page

Il est préférable que les champs soient alignés pour que la présentation du formulaire soit claire. Mais tous les champs n’ont pas la même taille et l’on doit parfois placer plusieurs champs sur une même ligne. J’ai souvent recours à une grille pour la mise en page des formulaires. Je divise la largeur totale du formulaire en trois ou quatre colonnes. Je peux ensuite aligner les champs et régler leur largeur en m’appuyant sur les verticales de la grille.

Calage des champs et des libellés sur une grille.

La position des libellés joue également un rôle important dans la lisibilité du formulaire. La relation entre le libellé et le ou les champs correspondants doit être évidente. La solution la plus logique est de placer les libellés à gauche des champs (à droite pour les cases à cocher et boutons radio). Si les libellés ont des tailles semblables, on pourra tous les aligner à gauche, mais si leurs longueurs sont très variables, il est alors préférable de les aligner à droite.

Conclusion provisoire

Concevoir un formulaire en ligne demande beaucoup de réflexion. Il faut savoir se mettre à la place de l’utilisateur et s’interroger sur la pertinence des choix que l’on fait. L’idéal est de faire tester le formulaire par des personnes extérieures, noter leurs réactions et écouter leurs commentaires, mais ce n’est pas toujours possible.

Il reste encore beaucoup à dire sur les formulaires en ligne (concernant notamment la gestion des erreurs, la distinction entre champs obligatoires et facultatifs, l’accessibilité, etc.) J’écrirai probablement un ou plusieurs autres articles à ce sujet.

Mis en ligne le 27/02/2007 | Poster un commentaire