Articles

Audit des formulaires Web 2.0

Publié par Marc-Antoine le 27/01/2007 à 13H57 sous sous Accessibilité, ergonomie

Web 2.0 par-ci, Web 2.0 par là … Il paraît que le Web 2.0 est l’avénement du “look and feel” donc de l’usabilité enfin tournée pour tout internaute !

J’ai donc décidé de m’y pencher… Pour ce faire, j’ai décidé d’analyser le point crucial et commun à de nombreux sites : le formulaire de contact ou d’enregistrement. Et pour choisir les sites à décortiquer quoi de mieux que de les piocher dans le fameux Web 2.0 Awards de SEOmoz.
La plupart des formulaires étaient très décevants. Voici les constatations, parfois effarantes, qui en sont tirées :

  • Certains offraient une validation lors de la soumission/envoi (submit) du formulaire, mais délivraient un message inexistant ou peu clair lorsqu’une erreur se produisait.
  • Certains ressemblait plus à un formulaire administratif provenant du FBI qu’à autre chose (i.e Yahoo!)
  • D’autres affichaient le mot de passe sans cryptage ! Cet élement est pourtant à la base de la conception d’un formulaire.
  • La plupart de ces formulaires n’utilisent pas de validation en JavaScript ou Ajax. Pour des sites Web 2.0, c’est un scandale :)

Mes humbles recommandations :

  • Ce qui peut être validé via le JavaScript devrait être fait. Ce point concerne surtout l’étape d’envoi/confirmation du formulaire ou lors de changements/réactualisations des informations.
  • Ce qui peut être validé en Ajax peut être une plus-value en ergonomie. Je pense notamment à la disponibilité d’un “username” ou d’une adresse e-mail lors de l’inscription.
  • Lors de l’envoi des informations, toutes les erreurs devraient être renvoyées en une fois, avec tout les champs invalides concernés (plutôt que de rapporter une erreur à la fois … Quoi de plus frustrant que de s’y reprendre à plusieurs fois avant de remplir correctement un formulaire).
  • Concernant ces mêmes erreurs, une emphase graphique devrait aider l’utilisateur à retrouver rapidement ces dernières.
  • Les intitulés des champs à remplir devraient être placés au plus proche du champ de saisie.
  • Les termes devraient toujours être “Inscription” et “Connexion”, selon les standards d’utilisation et les habitudes des internautes. Des termes comme “Mon espace” ou “Mon profil” peuvent porter à confusion.

Pour illustrer mes propos, je vous offre une liste de formulaire d’enregistrement qui me semblent bien faits et bien pensés :

  • Simples et efficaces :
  • Validation des champs lors des modifications et suggestions d’amélioration/erreurs :
  • Design et informations pertinentes pour guider l’utilisateur
  • Agencement des intitulés face aux champs de saisie

    • Je suis toujours à la recherche du formulaire d’enregistrement ou de contact parfait :) Si vous le connaissez, faites-moi signe !

    Avez-vous apprécié cet article?

    6 commentaires

    fro le 30/01/2007 à 09H08

    Bonjour,

    Une petite remarque concernant ce point : “La plupart de ces formulaires n’utilisent pas de validation en JavaScript ou Ajax. Pour des sites Web 2.0, c’est un scandale”

    L’intérêt majeur dans l’utilisation d’un framework basé sur “Ajax” est de basculer une grande partie du code côté serveur pour libérer le côté client d’une part et alléger le poids des pages d’autre part.

    Il est particulièrement intéressant d’exécuter les contrôles de surface d’un formulaire côté serveur. Le javascript reste simple et lisible et ne sert que de pont entre la représentation (la page html) et le modèle de données (la page de script serveur).

    Les bonnes habitudes des concepteurs d’application ont été perdues lors de l’avénement d’Internet car les prérequis techniques sont moindres pour réaliser une page web dynamique. En clair : mémé pond du code html et connaît les css.

    Le néologisme “web 2.0″ n’a aucun sens en soit. Ce qui est vrai par contre, c’est qu’une façon plus “intelligente” de concevoir le sites sur le plan technique apparaît depuis 2 ans grâce à des Prototype, Scriptaculous et autre Rico…

    … ils n’existent que pour nous rappeler ce qui n’aurait jamais dû quitter notre esprit : l’Utilisateur est au centre !

    Fro

    Sarah le 30/01/2007 à 13H17

    Salut Fro !

    Je suis plutôt d’accord avec toi :) … Je pense que le fait décrire la non-utilisation du Javascript ou de l’Ajax était un clin d’oeil. Les sites Web 2.0 utilisent souvent à outrance ces languages souvent au détriment de l’utilisateur !

    Marc-Antoine le 30/01/2007 à 13H23

    Je pense que l’ajout de la validation Javascript et AJAX sert surtout à accélérer le processus global d’enregistrement en ne rechargeant pas la totalité de la page à chaque erreur rencontrée et en rendant le processus le plus fluide que possible. Comme Fro dit, l’utilisateur est au centre, et il s’agit ici plutôt d’un soutien aux utilisateurs (non-techniques) que d’une validation sécurité!

    fro le 31/01/2007 à 06H03

    Nous sommes tous bien d’accord. ;-)
    Il ne me reste plus qu’à souhaiter que ton article - si modeste fût-il - fasse un peu bouger les choses dans le bon sens.

    Comme toute insulte à la facilité et au laisser-aller, c’est une bonne action. Bravo.

    Raphaël le 12/02/2007 à 06H51

    très bon article (il va falloir que je me lance aussi d’ailleurs ;-)),

    je rajouterais comme exemples :
    Electrabel
    Remember the Milk     ;-)

    Raphaël le 12/02/2007 à 07H00

    Juste un petit ajout pour les recommandations :

    Beaucoup de fomulaires lorsqu’il y a une erreur, suppriment des données préremplies (souvent le mot de passe) ce qui est frustrant car ca génère une deuxième erreur.

    Je m’explique : je rempli un formulaire et clique sur OK. Malheureusement il y a une erreur pour mon adresse email que j’ai mal tapée, le système me réaffiche le formulaire en me le signalant. Et bien sur bcp de formulaires, il va falloir que je retape mon password en plus du mail. Mais pour le password, rien n’est dit … ce qui va souvent générer une seconde erreur (car j’aurai oublié de mettre le password)

    Pas très user friendly tout ca !

    Ajouter un commentaire