26 juin 2006 # # # # #

Mon formulaire, il est moche et c’est fait exprès !

A l’occasion de ce joli week end pluvieux, j’ai fait quelques travaux de maçonnage sur ce blog. La modification est mineure mais mérite bien un billet. J’ai redesigné l’élément le plus important d’un site web, à savoir le formulaire.

Voici l’ancienne version (safari) :
et voici la nouvelle, au bas de cette page.

Mais il presque moins joli maintenant !!

me direz-vous du ton lourd de reproche qui est désormais le vôtre.

Oui et non. Au fil de mes lectures, j’ai opté une approche très Nilsenienne des formulaires. Pour ceux qui n’auraient pas suivi l’évolution et les débats sur le web ces 10 dernières années, Jakob Nilsen est un spécialiste de l’IHM, reconverti en gourou de l’accessibilité web. Son approche est assez radicale, en témoigne le design fleuri de son site.

Mais tu es fou ? Tu veux dire que tu aimes faire des trucs moches ??

Oui, c’est un peu l’esprit, en tout cas pour les formulaires.

Sur le web, le formulaire est l’élément d’interactivité par excellence (avec l’hyperlien). C’est pourquoi il ne faut y toucher qu’avec d’infinies précautions. Pourquoi moi, simple designer, certes bourré de talent, mais simple designer quand même, pourquoi serais-je plus qualifié pour designer un formulaire que les concepteurs de navigateurs eux-même ? Si ces messieurs ont appliqué un petit effet de relief sur les champs texte, c’est peut-être parce que c’est un signe visuel fort pour indiquer à l’utilisateur qu’il y a possibilité d’interactivité ? C’est aussi peut-être parce que les concepteurs de navigateurs se disent que les utilisateurs sont habitués aux OS graphiques types windows, linux ou mac OSX, et que copier les codes visuels de ces derniers dans leur application n’est peut-être pas une si mauvaise idée ? Bref, ces gens là ont déjà pensé à beaucoup de choses avant moi. Et comme je suis fainéant, je pars avec le postulat de base qu’ils ont bien fait leur travail.

Je soupçonne d’ailleurs fortement l’équipe de développeurs de Safari d’avoir sciemment bridé l’imagination débordante des webdesigners. Safari est en effet le seul navigateur à ma connaissance qui ne permette pas d’influer sur la présentation des éléments de formulaires. C’est également le seul navigateur à passer avec succès le test acid2. Pourquoi un navigateur qui a un telle implantation des CSS (y compris certains éléments des CSS 3 comme la propriété text-shadow) ne permet-il d’exercer aucun contrôle sur les éléments de formulaires ? Un oubli de la part de l’équipe de dev ? Je penche plutôt pour une volonté délibérée de l’éditeur dont la réflexion tiendrait à peu près en ces quelques mots :

On n’autorise aucun contrôle sur les éléments de formulaires car on y a déjà pensé avant ces abrutis de webdesigners. Et on y a pensé mieux qu’eux.

J’ai décidé de m’incliner et de laisser en l’état le design des boutons et des champs. Je n’applique désormais plus aucun style aux input et autres button (allez si un tout petit peu quand même parce que je suis un incorrigible abruti de webdesigner).

En vrac, les liens qui m’ont servi de support pour ce billet, réunis, magie du web, sur mon delicious.

Réagissez

Si ce billet vous a plu ou si vous voulez apporter des précisions, ou si vous n’êtes pas d’accord avec ce que je raconte, c’est ici qu’il faut vous manifester. Je me réserve toutefois le droit de supprimer toute contribution insultante ou qui n’aurait rien à voir avec la choucroute.

  1. Mais il presque moins joli maintenant !!

    Voila, c’est dit ! 😉

    Tu remarqueras que j’ai fait l’effort d’omettre aussi le verbe afin de ne pas faire mentir ton don d’extra-lucide ! 😉

    Joli boulot en tous cas ! (le formulaire et la voyance) 🙂

  2. bin c’est malin ça… Maintenant je vais être obligé de laisser ma fôte de frappe (quoique là, c’est carrément une faute de syntaxe). Ca m’apprendra à jouer les extra-lucides !!

  3. Design de formulaire : faites moche, c’est mieux !…

    Un point de vue intéressant au sujet du design des formulaires que je soumet à votre sagacité.
    Que ceci ne vous empêche pas d’en faire qu’à votre tête et de styler vos formulaire pour le plaisir des yeux.
    Mais au moins vous serez prévenu :…

  4. […] J’ai déjà dit tout le mal que je pensais de ce genre de techniques. Le navigateur dispose d’une UI qui a déjà été pensée par des professionnels, pas la peine de revenir dessus pour la modifier, autant se concentrer sur le design de la page. […]

  5. […] point de vue intéressant au sujet du design des formulaires que je soumets à votre sagacité. Que ceci ne vous empêche pas […]

  6. […] de formulaires sans tableau qui a gardé toute sa fraicheur 😉 Souvenons-nous toutefois de ne pas troubler l’utilisateur avec des formulaires trop funkydéliques. L’utilisateur ne fait pas que remplir des champs de […]

Mentions

  • Quelques notes sur XHTML et CSS, au fil de l’eau…
  • » Design de formulaire : faites moche, c’est mieux ! « css4design : des css pour votre design html
  • Touche pas à mon navigateur !
  • Webdesign : plus c’est gros, mieux ça passe (1)
  • css4design

Laisser un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.