Exotech.biz

Web, Technology & life by Bastien Labelle

Aller au contenu | Aller au menu | Aller à la recherche

Keyword - Formulaires

Fil des billets Fil des commentaires

Comment faire un bon formulaire de connexion

L'utilisabilité d'un formulaire HTML fait partie de ces petits riens qui sans le vouloir changent la vie. Nombreux sont les utilisateurs expérimentés qui comme moi n'utilisent pas la souris pour remplir un formulaire, mais plutôt la touche tabulation du clavier. Ainsi, la souris ne doit servir que dans un cas "exceptionnel". Cela peut avoir l'air d'un simple détail, et pourtant cela joue énormément dans l'expérience utilisateur.

Il m'est souvent arrivé de tomber sur un blog et de vouloir déposer un commentaire, d'appuyer sur la touche tabulation après avoir rempli mon nom, mon e-mail et mon site web, et de tomber de suite après sur le formulaire de recherche plutôt que sur la textbox du commentaire.

Il en va de même pour les formulaires de connexion. Toujours concernant l'enchainement des éléments, il y a à mon avis un ordre à respecter, il suffit simplement d'analyser le scénario classique, qui définit l'ordre des éléments. Ainsi, dans un formulaire de connexion, on retrouvera dans l'ordre ces éléments.

  1. Identifiant, E-mail, Login
  2. Mot de passe
  3. Case à cocher pour rester connecté
  4. Bouton de validation
  5. Lien Mot de passe oublié
Formulaire Connexion Hello Coton

Et peu importe le positionnement de ces éléments, il est à mon avis essentiel qu'ils soient accessible dans cet ordre là. HelloCoton, l'exemple illustré ci-dessus, est un des meilleurs (le meilleur?) que j'ai pu trouver car il montre très bien que l'on peut désynchroniser l'enchainement et le positionnement, en ayant un positionnement d'éléments beaucoup plus logique (lien mot de passe oublié à côté du champ mot de passe), et tout en gardant un scénario d'enchainement des éléments logique et efficace. Il y en a d'autres qui sont aussi très bons, celui de Feedburner notamment.

C'est là qu'on se rend compte que le web, c'est vraiment un métier!

Fancy Form et la problématique des formulaires sexy

En faisant quelques recherches sur les formulaires et leur présentation, je suis tombé par hasard sur Fancy Form. Il s'agit d'un petit script javascript qui permet de web2.0-ifier nos formulaires, en fait les radio buttons et les checkboxes (plus d'éléments sont prévus pour les prochaines versions), en les remplaçant par des icônes terriblement plus sexy, jolis et so web 2.0. La page de démonstration nous montre très clairement la différence avec un formulaire classique.

Fancy Form

Si vous me connaissez un temps soit peu (Fred Roy, si tu passes par ici, tu es le bienvenu pour me corriger si jamais ça ne s'écrit pas comme ça), vous connaissez certainement mon goût pour les belles UI, et vous vous dites donc très certainement que je présente ce script car je trouve ça joli.

C'est vrai que le rendu des formulaires est vraiment très joli, et de très bon goût (les icônes Silk de Famfamfam.com y sont pour quelque chose). Cependant, je ne suis pas persuadé qu'il faille implanter de telles modifications dans les formulaires: ici, il on aborde plutôt la problématique de la gestion du changement. Je m'explique: la première fois que j'ai visité le site, j'ai trouvé le design agréable, mais je n'ai pas compris de suite (avant de lire) de quoi il s'agissait. Je n'ai reconnu ni checkboxes, ni radio buttons. A trop vouloir personnaliser certaines choses on perd l'utilisateur, c'est le cas avec ce script. J'aurais plus tendance à penser que les icônes des checkboxes sont des icônes de validation de formulaire en AJAX, et les radio buttons me font plus penser à des listes classiques.

Le choix des icônes, c'est donc très important, il faut toujours garder à l'oeil la sémantique de ceux qu'on choisit.

Note: Je ne suis peut-être aussi qu'un vieux crouton © conservateur...

Des boutons uniformes sur tous les navigateurs

Trendy Web 2.0 Buttons CSS and HTML compliants

Pour ceux qui comme moi aiment bien avoir les mêmes boutons sur la quasi totalité des ordinateurs, j'ai trouvé cette méthode excellente, très trendy et Web 2.0, 100% valide XHTML et CSS, que je recommande à tous les développeurs web... A voir chez ParticleTree, de toute urgence