Conceptualisez vos formulaires

Ceux qui lisent ce blog régulièrement savent que les formulaires en ligne sont ma bête noire. J’ai déjà publié un certain nombre de billets sur le sujet ainsi qu’un tutoriel. Je vous propose aujourd’hui d’étudier les formulaires mais sous un autre angle, celui de la conceptualisation avec le modèle à trois couches : Designing usable forms: the three-layer model of the form.

Selon l’auteur, on peut décomposer un formulaire en trois couches élémentaires :

  • la couche de perception, qui concerne la page en elle-même ainsi que les éléments annexes (logo, instructions…) ;
  • la couche de conversation, qui correspond aux questions (aux intitulés des champs) ;
  • en fin la couche de relation, c’est à dire les éléments de réponse (champs, boutons radios, menus déroulant…).

En fait, c’est surtout dans sa conclusion que l’article est intéressant, ainsi que dans les recommandations d’amélioration qui concernent chacune de ces couches.

Et pour ceux qui souhaitent lire des articles un peu moins conceptuels, voici deux autres articles à lire qui concernent les intitulés de boutons : Labeling Buttons et Clearly label those buttons. Dans ce dernier l’auteur y donne une liste très intéressante de suggestions d’intitulés de boutons pour remplacer le très banal ‘Valider’.

Un commentaire sur “Conceptualisez vos formulaires

  1. Fred, je viens de lire ton tuto sur les formulaires et je le trouve excellent. Mais pour avoir déjà eu à faire face à ce genre de problèmes, et ayant trouvé la conception des tests côté serveur très longs à écrire, surtout sur de gros formulaires, j’ai découvert la librairie PEAR HTML_QuickForm (http://pear.php.net/package/HTML_QuickForm) qui permet entre autres : – d’aligner automatiquement les champs – d’automatiser les contrôles, que ce soit côté client ou serveur – d’afficher automatiquement un récapitulatif grâce à la fonction freeze – de normaliser le traîtement du formulaire – de personnaliser l’apparence Bref ça fait gagner beaucoup de temps, c’est très facile à utiliser (passée l’installation) et ça permet de faire des choses sympa. D’ailleurs si tu ne connais pas du tout PEAR, c’est blindé de petites librairies très utiles comme ça, avec par exemple l’ajout récent (que je n’ai pas encore testé) d’une librairie ajax (http://pear.php.net/package/HTML_AJAX).

  2. Designer un formulaire web Le blog de Fred Cavazza nous signale ce matin un excellent article sur le design de formulaire. L’approche conceptuelle avec laquelle le design d’interface est abordée est très interessante et permet de multiplier les approches autour…

  3. Je l’ai découverte en me faisant la main sur le formulaire de signature du livre d’or du site Anime-Noir et je l’ai utilisée sur des formulaires beaucoup plus complexes par la suite mais sur un Intranet que je n’ai pas sous la main (juste histoire de dire que ça ne se limite pas à des trucs simples).
    A voir aussi cette excellente introduction qui a un peu vécu mais qui permet de voir l’apport en termes de simplicité de programmation, même si ça n’illustre pas la personnalisation du style pour une meilleure utilisabilité.
    J’ai cherché une démo un peu plus exhaustive du type de choses que l’on peut faire, mais je n’ai rien trouvé. Peut-être que ça vaudrait le coup de prendre le temps de faire ce genre de page de démo… Ca intéresse du monde ?

  4. PS : A propos d’Anime Noir, j’anticipe. C’est loin d’être un exemple d’utilisabilité ou d’accessibilité, encore moins de design, mais c’est un copain qui a tout fait en HTML et il m’a appelé à la rescousse pour mettre un peu de dynamisme dans tout ça, notamment grâce à ce livre d’or. Et puis en ce temps là j’étais jeune et bête :oP. Alors indulgence ;-)

  5. Merci pour toutes ces ressources Sébastien. C’est sûr que ce framework facilite grandement la tache. Mais au fait, est-ce accessible ? Maiiiiiis non je déconne ! /Fred

Laisser un commentaire