Auteur :
Avec l’arrivée de l’Ajax ou plutôt la généralisation de son utilisation dans les sites Internet d’aujourd’hui, il devient facile de charger ou de vérifier du contenu à la volée et donc sans rafraîchissement de page. On peut mettre à jour du contenu à la volée, envoyer les données d’un formulaire directement sans changer de page, etc.
Il y a pourtant un composant des interfaces web qui n’évolue pas beaucoup avec les années je trouve : le formulaire d’authentification. Point d’entrée principal à un compte sur un site, ce formulaire est très souvent en haut à droite, très souvent composé d’un champ login/pseudo/email, d’un champ password et d’un bouton OK/Se connecter… Amis webdevelopper ne serait-ce t-il pas temps de penser aussi à faire évoluer ce composant ? à innover aussi un peu de ce côté là ?
Faut-il par exemple toujours rafraîchir la page pour indiquer que le mot de passe est mauvais ? ne peut-on pas l’indiquer immédiatement à l’utilisateur, gagner ainsi quelques clics et rendre la navigation toujours plus simple et intuitive ?
Je pense par exemple au formulaire d’authentification présente sur Mac OS X Leopard. Certes ce n’est pas du web mais pourquoi ne pas s’en inspirer :
Au lieu de mettre un message d’erreur, Apple se contente de faire “secouer” la fenêtre ! simple, intuitif et immédiat…
Certains me répondront que les interfaces riches (Flex ou Silverlight) permettent de se libérer des contraintes du web classique (xHTML) et c’est bien vrai… Mais pourquoi ne pas chercher non plus un peu à innover sur ce composant là en xHTML ?
1. Commentaire posté par Julien le 13 janvier 2009 à 16 h 17 min
ça ne serait pas très dur a faire en javascript.
avec un login en ajax …
2. Commentaire posté par xethorn le 13 janvier 2009 à 16 h 21 min
Faire un formulaire de la sorte sous entends :
- Positionnement absolu (sigh) pour éviter un recalcul de tous les éléments de la page (qui peut prendre un temps monstrueusement long).
- Utiliser Ajax (suffit d’avoir une connexion lente, le côté asynchrone sera totalement non pratique).
Bref, beaucoup de contraintes pour juste “wizzer”. L’idée est bien la mise en pratique beaucoup moins accessible que pensé.
3. Commentaire posté par Geoffrey le 13 janvier 2009 à 22 h 07 min
Très très bon sujet que tu soulèves là. En tant que designer, je serais ravi d’avoir de tels défis sur lesquels travailler. Trembler/vibrer lors d’un mauvais password est une chose amusante sur Mac, mais pourquoi pas un petit clignotement de l’écran, un déplacement de la fenêtre, un effacement progressif des caractères tapés ?
:-)
4. Commentaire posté par GeekFG le 14 janvier 2009 à 10 h 22 min
@Julien il est vrai que le problème ne vient pas dans la complexité
@exthorn Il est de plus en plus rare que l’utilisateur dispose d’une connexion bas débit, et une simple requête ajax de quelques ko ne devrait pas poser de ralentissement. Se serait d’ailleurs plus rapide que de recharger totalement la page.
5. Commentaire posté par xethorn le 14 janvier 2009 à 10 h 39 min
@GeekFG : je ne parle pas forcement de l’utilisateur mais du serveur. Au taf, on a une connexion de folie et quand on veut afficher des stats Xiti, faut voir comment la requête s’éternise …
@Geoffrey : aujourd’hui tout est possible :) (sauf ce qui ne fonctionne passous IE6 :()
6. Commentaire posté par Gilles le 14 janvier 2009 à 10 h 55 min
C’est bien joli de vouloir faire trembler lors du mauvais renseignement d’un champ, mais quid de l’accessibilité d1 formulaire de ce type ??
7. Commentaire posté par xethorn le 14 janvier 2009 à 11 h 00 min
@Gilles : il n’est nul part mention d’un tremblement de terre mais juste d’une notification visuelle et éventuellement sonore. Bref, là l’article s’apparente à une recherche d’amélioration des formulaires web de connexion.
8. Commentaire posté par GeekFG le 14 janvier 2009 à 11 h 00 min
@Gilles comme vous devez le savoir, Javascript ne doit être perçu que comme une couche supplémentaire d’interaction avec l’utilisateur, donc si Javascript n’est pas activé, la page se recharge.
9. Commentaire posté par Jean-Sébastien le 14 janvier 2009 à 18 h 08 min
Bonjour,
ce type de comportement existe….nous l’avons utilisé sur la base de la librairie window.js (extension basée sur prototype.js)
Exemple ici:
http://prototype-window.xilinus.com/samples.html
=> “7. Open a login window (click here)”
10. Commentaire posté par xethorn le 15 janvier 2009 à 16 h 06 min
@Jean-Sébastien : le fonctionnement même ressemble à celui d’apple mais sur le coup, j’admets que niveau accessibilité, c’est loin d’être ça. Par exemple : une fois le mot de passe rempli, on se retrouve à valider via la souris (et non le clavier) le formulaire.
Bref, la mise en pratique du concept et bien mais il reste des points à améliorer (comme la gestion du clavier).
11. Commentaire posté par guillaume le 30 janvier 2009 à 19 h 16 min
allez donc jetez un oeuil sur http://www.reversoform.com, ca fera plaisir a ceux qui ont des formualires typés e-commerce.