lundi, août 4 2008, 15:52
Comment faire un bon formulaire de connexion
Par Bastien - Web & UI Design - Lien permanent
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.
- Identifiant, E-mail, Login
- Mot de passe
- Case à cocher pour rester connecté
- Bouton de validation
- Lien Mot de passe oublié
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!
Contact
14 commentaires
J'ajouterais que mettre automatiquement le focus sur le premier champ est un plus indéniable, comme le fait de pouvoir utiliser la touche ENTER pour valider. Ca a l'air évident mais c'est pas toujours le cas. De plus, utiliser le plus possible de validation avant envoi (en JS), plutôt que de se taper un retour de page où on a perdu la moitié des données entrées. Un petit peu d'AJAX pour vérifier, pendant la frappe, si l'identifiant est déjà utilisé, c'est pas grand chose mais ça apporte beaucoup en confort.
pas forcément besoin d'ajax pour ne pas devoir retaper les données entrées dans le formulaire.
Il suffit que ce soit bien ficelé pour avoir les données entrées juste avant la vérification qui soient déjà pré-remplie.
Quand à la touche "Enter" pour valider un formulaire, c'est surtout les site Flash qui ne respectent pas cet acquis IHM.
Faut vraiment faire du code cochon pour court-circuité ce mécanisme en HTML simple.
Ca c'est le genre d'article que je kiffe. <3
La sémantique doit être réfléchie lors de la phase d'intégration XHTML/CSS, qui, selon moi, est vraiment un point important dans la phase de développement d'un site.
De toute façon, il ne faut pas négliger les "détails", c'est ce qui fait la différence ^_^
Vincent: Oui, ou au moins avoir un retour avec les données entrées si il n'y a pas d'AJAX
Loïc: Exact, j'ai constaté aussi le problème avec la touche Entrée sur les applications AIR faites en Flex notamment. Très frustrant!
Pickupjojo: Merci
Guirec: On est d'accord (bon, ça fait pas tout non plus hein ^_^)
Dans Sarane les champs de formulaires sont enchaînés, mais les boutons de validation sont uniquement cliquable. Cela permet de se prémunir du spam, et aussi de se prémunir d'appuyer sur la touche entrée involontairement. Cela m'est déjà arrivé sur un blog d'envoyer un commentaire trop rapidement.
Aussi, il ne faut pas oublier que nous sommes pour la plupart des geeks et que nous sommes des habitués du web. Nombreux utilisateurs préfèrent utiliser la souris.
Hellocoton, perso en terme de webdesign c'est un des meilleurs sites que je connaisse.
De plus l'exemple de ce formulaire, son utilisabilité est carrément naturel ( très simple et très intuitif ).
C'est pas tous les jours qu'on voit ça sur le web.
Loïc : j'ai pas dit qu'il fallait de l'Ajax pour ne pas devoir retaper les infos. Juste une petite vérification de syntaxe en JS avant envoi vers la page cible, c'est plus agréable et plus simple selon moi que de repopuler le formulaire.
Les formulaires en Flash, ça peut apporter quelque chose au niveau de l'expérience utilisateur. On reste sur la même page, on peut animer certaines erreurs, on peut facilement skinner tous les types de contrôle, ... Et faut être fainéant pour ne pas activer la validation avec la touche Enter. Maintenant, c'est vrai qu'on peut faire les choses autrement et se passer de Flash.
L'Ajax, je l'utilise par exemple pour générer dynamiquement une seconde liste déroulante en fonction du choix effectué dans une première liste. Ca évite de devoir découper le formulaire en plusieurs étapes.
Un petit article en rapport plutôt intéressant :
http://css-tricks.com/label-placeme...
Franchement le webmaster qui oublie la possibilité de valider un formulaire avec la touche entrée n'est qu'un bidouilleur.
Pour le reste tout est dit ...
Je le trouve pas fabuleux *du tout* cet exemple de chez Hellocoton. Le "cliquez-ici" par exemple, en 2008, sérieusement ? Le "se souvenir de moi" n'est pas aligné avec la checkbox non plus (note : je suis allé visiter le site et il semble qu'ils aient corrigé ceci).
C'est supérieur à ce que l'on trouve couramment sur le net, mais c'est encore imparfait. Et je ne parle pas de "onclick" sur les liens, mais uniquement de la mise en page
Je le trouve pas fabuleux *du tout* cet exemple de chez Hellocoton. Le "cliquez-ici" par exemple, en 2008, sérieusement ? Le "se souvenir de moi" n'est pas aligné avec la checkbox non plus (note : je suis allé visiter le site et il semble qu'ils aient corrigé ceci).
C'est supérieur à ce que l'on trouve couramment sur le net, mais c'est encore imparfait. Et je ne parle pas de "onclick" sur les liens, mais uniquement de la mise en page