Simplifiez vos formulaires, 10 ans après

Le mois dernier, j’ai célébré les 10 ans de la création de mon blog FredCavazza.net. Vous ne vous en souvenez certainement pas, mais le succès de ce blog est en grande partie dû à un tutoriel que j’avais publié à l’époque sur la conception de formulaire (Des formulaires plus simples). Ce formulaire avait été discuté sur plusieurs forums de développeurs / concepteurs et m’avait permis de recruter mes premiers lecteurs (vous connaissez la suite). Depuis, 10 ans se sont écoulés, et je suis toujours devant mon clavier, et vous devant votre écran, même malgré la fermeture de Google Reader ! Tout ça pour dire que je trouve intéressante l’idée de faire une rétrospective sur les techniques de conception et de codage des formulaires.

Même si le W3C a pédalé dans la choucroute pendant de nombreuses années, il s’est passé pas mal de choses au cours de ces dix dernières années : les tendances graphiques ont changé, les pratiques d’utilisabilité se sont affinées, les langages de programmation ont évolué et les terminaux se sont grandement diversifiés. L’avènement des smartphones et l’introduction de nouveaux types de champs dans HTML5 sont ainsi de gros facteurs disruptifs.

Même si les règles de base d’ergonomie sont toujours les mêmes (lisibilité, guidage, tolérance aux erreurs… cf. An Extensive Guide To Web Form Usability, Techniques for Constructing Usable Registration Forms, The Ultimate UX Design of Form Validation et Optimiser l’ergonomie des formulaires web), les conventions de présentation ont tout de même évolué. Les changements les plus notables, mais qui font encore débat, concernent les intitulés et la mise en page : Avons-nous encore besoin des intitulés de champs dans les formulairesEt on reparle de l’emplacement des intitulés de champs de formulaire et Champs, libellés, alignements : la conception des formulaires. Il semble que le consensus s’oriente vers des formulaires à la fois plus compacts et lisibles grâce à l’inclusion des intitulés dans les champs eux-mêmes, et à une configuration verticale. Le formulaire de passage de commande de l’Apple Store en est l’exemple le plus représentatif.

Le formulaire de l'Apple Store
Le formulaire de l’Apple Store

Au cours de ces dix dernières années, j’ai également pu constater un (re)gain d’intérêt pour les formulaires d’identification et de création de compte, talon d’Achille de la croissance des services en ligne : Bonnes pratiques pour les formulaires d’identification. Les deux meilleurs exemples que je connaisse dans ce domaine sont Dropbox et Jolicloud.

Le formulaire de création de compte de Jolicloud
Le formulaire de création de compte de Jolicloud

Comme précisé plus haut, la prolifération de smartphones a changé la donne, même s’il existe de techniques pour en limiter l’impact : A propos des formulaires mobiles et narratifs. Je profite de ce précédent article pour vous inciter à allez voir l’incroyable formulaire narratif de Huffduffer, un modèle du genre, en complète rupture avec les conventions actuelles.

Le formulaire narratif de Huffduffer
Le formulaire narratif de Huffduffer

Mais ce qui a indéniablement le plus modifié notre façon de concevoir et de coder un formulaire en ligne est l’introduction de nouveaux types de champs avec HTML5 (tel, URL, email, date, time, range, color…). Si l’interprétation graphique de ces types de champ est très variable d’un navigateur ou d’un terminal à l’autre, ils permettent néanmoins de standardiser le comportement et d’habituer les utilisateurs. Le champ date me semble être une bonne illustration de ce que la non-standardisation peut donner à grande échelle : amusez-vous à parcourir les sites des voyagistes pour vous convaincre des dangers de la non-standardisation.

Le champ de saisi de date avec le navigateur Chrome
Le champ de saisi de date avec le navigateur Chrome

De même, les attributs placeholder ou required poussent plus loin le souci de standardisation (qui va s’en plaindre ?) : Formulaires HTML5 : placeholder, required, pattern et validation.

Outre HTML5, la troisième version des feuilles de style apporte également beaucoup de souplesse dans la façon de représenter les formulaires ou les boutons : Creating Stylish Responsive Form With CSS3 And HTML5, Bring Your Forms Up to Date With CSS3 and HTML5 Validation et 40 CSS3 Button Tutorials For Designers. Je ne saurais que trop vous recommander de visiter les démos de WebDesignTuts+ et Codrops.

Superbe mécanisme de validation sur un formulaire
Superbe mécanisme de validation sur un formulaire

Toutes ces évolutions techniques ouvrent d’innombrables possibilités, mais rajoutent également de la complexité. Il convient donc de passer un peu de temps à peaufiner votre code pour vous assurer que rien n’ira de travers : The Problem Of CSS Form Elements et Make disaster-proof HTML5 forms. Ce dernier article est particulièrement intéressant, car il explique comment stocker localement les données saisies, pour éviter d’obliger les internautes à tout saisir de nouveau s’ils ne valident pas le formulaire.

Au final, si la qualité moyenne des formulaires en ligne n’a pas beaucoup évolué, les pratiques de conception et technologies ont beaucoup évolué, et il reste encore beaucoup de travail pour évangéliser ces progrès et pour les implémenter à grande échelle. Je pense que ma quête du formulaire parfait n’est pas encore achevée…

4 commentaires pour “Simplifiez vos formulaires, 10 ans après”

  1. Posté par Simon Tripnaux a dit : le

    La base même de l’interaction sur tous nos sites, les formulaires méritent en effet un traitement particulier. Les adapter aux usages, mais aussi faire adhérer les intégrateurs aux meilleurs standards de conception. Mon expérience personnelle démontre qu’il y a encore un bon gros 30% de formulaires mal conçus sur le web …

  2. Posté par Frédéric Cavazza a dit : le

    30% ? Heu… oserais-je dire que tu es optimiste ? Oui j’ai osé ! Plus sérieusement, je pense que nous sommes plus à 80% de formulaires mal conçus (selon mes critères) et à 95% de formulaires qui ne sont pas compatibles avec les terminaux mobiles.

  3. Posté par Agiled a dit : le

    Incroyable formulaire Huffduffer ! ça rappelle qu’en tant que web designers qu’il faut oser et qu’on est pas toujours obligé de recopier ce que font les best in class players. Maintenant, au delà de l’impact évident en terme d’image (non négligeable), sur un plan purement performance, penses-tu que ce formulaire transforme mieux /aussi bien qu’un formulaire plus classique ?
    merci pour cet article, comme d’hab.

  4. Posté par Cyroul a dit : le

    Je me souviens tellement bien de ce tuto formulaire. C’était le seul à l’époque qui arrivait à combiner avec élégance ergonomie et code. J’avoue l’avoir utilisé et réutilisé de nombreuses fois.
    C’est ce tuto qui m’a fait connaître ta plume et ton blog auquel je souhaite un excellent anniversaire !!