SimpleWeb.fr

Avec la vague du tout social, chaque site (ou presque) propose une couche sociale, donc des comptes pour les utilisateur. Il en résulte l’omniprésence des formulaires d’identification que l’on retrouve un peu partout. Oui mais voilà, l’espace se fait rare et il ne reste plus beaucoup de place pour ce type de formulaire. Qu’à cela ne tienne, il existe différentes astuces pour palier à cette contrainte.

Le site Design Reviver nous propose ainsi une très belle collection de formulaires d’identification : 100 Outstanding Login Forms. De cette collection je retiens trois tendances :

• Les sites qui affichent le formulaire directement sur la page d’accueil ;
• Les sites qui affichent un lien ouvrant un panneau flottant avec le formulaire ;
• Les sites qui affichent un lien menant vers une page spécialement prévu à cet effet.

Afficher les deux champs d’identifiant et de mot de passe sur la page d’accueil est la solution idéale, mais ça prend de la place là où vous en avez désespérément besoin. Utiliser un lien ouvrant un panneau est une très bonne solution de replie, mais cela pénalise les utilisateurs qui ont désactivé le javascript sur leur navigateur. Utiliser une page spécifique est encore mieux car cela ne pénalise personne et peut être combiné avec le formulaire de création de compte et les éléments de réassurance / incitation qui vont avec.

Des formulaires présentés, je retiens celui de Wordpress (simple et efficace) :

Le formulaire d'identification de Wordpress

Dans le même style mais avec un peu plus de… style il y a celui de Tumblr (minimaliste mais cordial) :

Le formulaire d'identification de Tumblr

Signalons aussi celui de Facebook (très faible encombrement) :

Le formulaire d'identification de Facebook

Notez au passage qu’avec des intitulés en français c’est tout de suite plus laborieux comme chez Ning :

Le formulaire d'identification de Ning

Enfin mon préféré est celui de RedBrick Health avec un mélange de compacité et de sophistication :

Le formulaire d'identification de RedBrick

Je serais bien incapable de vous sortir une règle d’or sur l’emplacement des intitulés de champs car il existe plusieures possibilités :

• Au-dessus des champs ;
• À gauche des champs aligné à gauche ;
• À gauche des champs aligné à droite ;
• Dans le champ.

Ces quatre solutions fonctionnent bien, c’est juste une question de place disponible.

Par contre je peux vous recommander les bonnes pratiques suivantes :

• Localiser le formulaire ou le lien vers le formulaire en haut à droite de la page (là où se trouvera le nom de l’utilisateur une fois identifié) ;
• Afficher un lien vers l’oubli de mot de passe ET d’identifiant ;
• Prévoir un lien vers la création de compte ;
• Proposer de retenir le mot de passe pour une durée fixe (2 semaines semble une convention) ;
• Utiliser un cadenas pour symboliser la connexion sécurisée.

Voilà, si vous en avez d’autres, n’hésitez pas.

Voilà plus de 10 ans que je conçois des sites web et plus de 10 ans que les formulaires sont une source de discussions sans fin pour savoir comment les optimiser (j’avais même publier un tutoriel en 2004). Alors que je pensais avoir trouvé LE formulaire parfait (j’hésite encore entre Remember The Milk et Ballpark), voici que l’Apple Store nous propose un formulaire d’achat qui risque bien de faire date : The Apple Store’s Checkout Form Redesign.

L’idée de génie est de proposer un formulaire où les intitulés sont directement dans les champs :

Le nouveau formulaire de l'Apple Store

Cette solution permet de gagner beaucoup de place et d’afficher toutes les étapes du processus d’achat en une seule page (grâce à un principe d’accordéon). Le principe n’est pas nouveau mais c’est la première fois que je le vois mis en application sur un formulaire entier et sur une boutique en ligne à très forte fréquentation.

Il y a d’autres exemples de ce type de mise en page, notamment chez FoodSpotting :

Le formulaire de création de compte de FoodSpotting

Une solution particulièrement efficace mais qui n’est pas forcément meilleure que d’afficher les intitulés à gauche (ou au dessus) des champs, comme ici un très bel exemple chez LaunchMind :

Le formulaire de création de compte chez LaunchMind

Bref, ça m’embête de vous dire ça, mais il n’y a toujours pas de solution “ultime”, tout reste une question de contexte, d’ambiance, de place disponible et d’intégration dans votre charte graphique. Plus d’exemples ici : Interface Design Inspiration | 30 Impressive Ways to Design Sign-Up Page/Form.

Les formulaires ont toujours été  au coeur de nombreux débats dans le petit monde de l’ergonomie web. J’ai d’ailleurs déjà eu l’occasion de m’exprimer à ce sujet sur ce blog. L’auteur de référence sur ce thème est pour moi Luke Wroblewski avec son livre Web Form Design: Filling in the Blanks.

Malgré quelques différents, les avis convergent tous grosso-modo vers un ensemble de bonnes pratiques bien résumées ici : Web Form Design Patterns: Sign-Up Forms. Une récente étude vient relancer le débat avec des conclusions tout à fait intéressantes et surtout des données statistiques issues d’un test d’oculométrie pour cautionner le tout : Web form design guidelines: an eyetracking study.

Les enseignements de cette étude sont les suivants :

• La mise en page doit être verticale (pas de formulaires avec des champs sur deux colonnes) ;
• Les intitulés des champs sont lus plus facilement s’ils sont placés au dessus ;
• Certains champs peuvent être groupés sur une même ligne  (exemple : date de naissance en 3 menus déroulants) ;
• La chapitrage des formulaires est mieux distingué si les intitulés de groupe ont un traitement graphique distinct (avec la balise fieldset) ;
• Mieux vaut indiquer les champs optionnels plutôt que les champs obligatoire (cela réduit le “bruit” des caractères parasites) ;
• Un seul champ suffit pour les numéros de téléphone ou les champs numériques complexes (mieux vaut passer par du reformatage : Vive les assistants de saisie pour les champs de formulaire) ;
• L’aide contextuelle doit être la plus proche possible (généralement à droite du champ) ;
• Le nombre d’étapes doit être clairement affiché.

Des enseignements très instructifs qui pourtant ne vont pas forcément dans mon sens (j’ai toujours été un fervent defenseur des intitulés de champs alignés à droite).

Jusqu’à très récemment mon formulaire favori était celui de Remember The Milk (cf. Le formulaire parfait) :

Le formulaire d'inscription de Remember The Milk

Mais j’ai récemment découvert celui de Ballpark qui est plus sophistiqué :

Le formulaire d'inscription de Ballpark

Bien évidement c’est une affaire de goût puisque ces formulaires sont tous les deux très bons mais j’apprécie énormément le jeux des couleurs ainsi que les têtières des groupes. Et vous ?

Je ne le répèterais jamais assez : Les formulaires sont les bêtes noires des internautes. Surtout quand il s’agit de saisir des données avec un format bien particulier comme un numéro de téléphone ou une date.

Mais rassurez-vous car la situation est en train de changer grâce aux assistants de saisie qui sont décris ici : Input Masks Design. Le principe est révolutionnaire : simuler le formatage des données lors de la saisie.

Illustration avec une première technique de Masked Input Plugin (cliquez sur l’onglet “Demo“) :

Exemple de formatage de données en cours de saisie

Deuxième illustration avecle Dynamic Field Masking :

Deuxième exemple de formatage de données en cours de saisie

Je trouve ce principe révolutionnaire car il permet une bien meilleure appréhension du format à respecter sans pour autant perturber la saisie.

Dans le même genre il y a aussi la correction orthographique sur les formulaires de recherche de Transport-IdF mais qui est bien plus perturbante car très dirigiste (ne fonctionne que sur certains navigateurs).

En tout cas cette nouvelle variante de la saisie assistée mérite largement que l’on s’y intéresse, surtout si elle se dégrade correctement pour les navigateurs non compatibles (à vérifier).

Les formulaires de création de compte sont un grand classique du web. Exercice aujourd’hui bien maîtrisé (cf. Le formulaire parfait ?), il ne pose plus trop de problème. Et pourtant, les équipes de Cloudo nous propose une version encore améliorée avec notamment un système d’aide contextuel très performant :

Le formulaire d'identification de Cloudo

Les points forts de ce formulaire :

• Une vérification de surface des champs (matérialisée par la petite coche) ;
• Un indicateur de “force” pour le mot de passe (plus ou moins dure à trouver) ;
• Un petit rappel pour la correspondance entre les deux champs Password (la double flèche).

Rien de très révolutionnaire mais des petites attentions qui font plaisir aux utilisateurs et améliorent l’intuitivité et préviennent les erreurs.

L’architecture Web, l’ergonomie Web et la rédaction Web sont à considérer pour la création d’un formulaire en ligne. Afin de proposer une bonne expérience utilisateur, le formulaire doit proposer un contenu clair et précis et efficace. L’internaute doit également pouvoir y vivre une expérience utilisateur sans y perdre de temps.

Les principes de conception d’un formulaire en ligne

Afin de concevoir un formulaire en ligne à la fois claire, efficace et navigable, il faut marier adéquatement architecture Web et rédaction Web.

Voici quelques principes importants :

• Déterminer le public cible du formulaire en ligne;
• Déterminer la fonction du formulaire en ligne;
• Énumérer les informations présentées à l’utilisateur;
• Catégoriser les informations et effectuer un tri;
• Rédiger de façon claire et compréhensible;
• Dessiner une architecture Web pour le formulaire en ligne.

L’ergonomie Web d’un formulaire en ligne

L’ergonomie Web est essentielle pour une conception efficace et navigable d’un formulaire en ligne. L’ergonomie Web permet notamment à l’utilisateur de remplir facilement les champs de saisies.

Voici quelques règles à retenir :

• Créer un visuel efficace pour le formulaire en ligne;
• Faciliter la saisie de données en adaptant la longueur de la ligne;
• Si le formulaire est long, le présenter en plusieurs étapes (pages);
• Soigner la présentation des libellés;
• Permettre de revenir en arrière pour modifier ses informations;
• Résumer les informations saisies lors de la dernière étape;
• Afficher un message de confirmation à la toute fin du formulaire en ligne;
• Envoyer une confirmation finale à l’utilisateur par courriel.

Des tests utilisateurs sont conseillés, et ce, qu’il s’agisse de l’architecture Web, de l’ergonomie Web ou de la rédaction Web. Les tests utilisateurs permettront d’améliorer notamment la gestion des erreurs. En bref, des tests utilisateurs permettront de se rapprocher d’une expérience utilisateur réussie.

Pour conclure

Le formulaire en ligne demande une conception minutieuse. Étant souvent présenté dans un contexte transactionnel, il doit susciter la confiance de l’utilisateur. Sa conception doit être effectuée dans le respect des normes imposées par l’architecture Web, l’ergonomie Web et la rédaction Web. Un savant mélange des 3 augmentera ses chances de succès.

Afin d’en apprendre plus sur la conception d’un formulaire en ligne, nous vous invitons à consulter les billets de Frédéric Cavazza, Luke Wroblewski (fichier .PDF) et Jean-Claude Grosjean.

Billet initialement publié sur Mikimya

C’est étrange de constater comme les habitudes ont la vie dure… Prenez par exemple les boutons ‘Reset‘ sur les formulaires : Je ne sais pas qui a eu cette idée folle, mais elle est incroyablement tenace.

J’ai déjà eu de nombreuses discussion à ce sujet, mais je profite du dernier édito de Jaokb Nielsen (Top-10 Application-Design Mistakes) pour vous le redire : Ne mettez pas de bouton ‘Reset‘ dans vos formulaires.

Qui a envie de supprimer toutes les données saisies d’un coup ? Qui va s’offusquer de ne pas se voir proposer cette fonction ? Quelle est l’intérêt pour vous ?

Donc une dernière fois : Ne mettez pas de bouton ‘Reset‘ dans vos formulaires.

Et ça sera mon dernier mot ! A vrai dire, je n’ai plus la force d’argumenter sur ce point, je me demande si je ne devrais pas fermer les commentaires pour ce billet…

/!\ Billet initialement publié sur FredCavazza.net.

Je vous propose de découvrir un concept qui me tient à cœur : la simplexité (contraction de simplicité et complexité). Pour faire simple, la simplexité est un art qui consiste non pas à simplifier un produit complexe, mais plutôt à rendre à priori simple un produit qui ne peut pas être simplifié sous peine de ne pas remplir sa fonction.

La première fois que j’ai entendu parler de ce terme c’était chez Renault où un réel effort est déployé pour améliorer le confort d’utilisation et la lisibilité des tableaux de bord (SVP pas de troll dans les commentaires). Mais cette notion s’applique à de multiples domaines comme le design (exemple ici : Quand les constructeurs de l’EGP misent sur le design), l’art (notamment avec des artistes comme Constantin Brâncuşi) ou encore le managment (Manager soyez dans l’art de la simplexité).

C’est d’ailleurs de ce dernier article que je tire une première définition : “Art qui consiste àrendre simple les choses compliquées et à vulgariser le monde dans le but de le mettre à la portée de tous“.

Appliquée à la conception d’interfaces web, qu’est-ce que ça pourrait bien donner ? Voilà ce que je vous propose : “Une interface à la simplicité apparente pour un service à la complexité induite“.

Illustration avec Gmail et son interface de rédaction d’un email : les options sont nombreuses (car c’est comme ça que les systèmes de messagerie fonctionnent) mais les équipes de Google ont trouvé l’astuce en masquant un maximum de choses.

Regardez bien cette copie d’écran, à gauche la version initiale (à l’ouverture de la page) et à droite la version complète (avec toutes les options déployées) :

L’impression de simplicité à l’ouverture de la page est réelle, par contre en cliquant sur différents liens on s’aperçoit que toutes les options sont bien là. Et voilà : simplicité apparent pour un service à la complexité induite.

/!\ Billet initialement publié sur FredCavazza.net.

Visiblement eBay serait en train de tester une nouvelle version de son formulaire d’inscription (sur un principe de tests A/B). S’ils pensaient faire ça de manière discrète c’est raté puisque Garrett Dimon nous propose une analyse détaillée de cette refonte : Better Web Forms: Redesigning eBay’s Registration.

C’est au niveau de la mise en page que le plus gros du travail a été réalisé :

Vous noterez sur ces deux images que les intitulés des champs ont été alignés à droite et que des lignes de séparation horizontales servent à faire des regroupements logiques. Il y a également eu un travail de fait sur le texte d’introduction ainsi que les intitulés de section.

Bien évidement cette nouvelle version est meilleure que la précédente dans la mesure où elle améliore la lisibilité et le guidage mais elle apporte également du confort grâce notamment à l’usage d’Ajax pour faire de la validation en sein de la page.

/!\ Article initialement publié sur FredCavazza.net.

Voilà près d’un an et demi que j’ai publié mon tutoriel sur comment concevoir des formulaires plus simples. Depuis, même si certaines règles de lisibilité et de structurations sont toujours d’actualité, il faut bien avouer qu’il s’est passé beaucoup de choses.

Hier, en testant un nouveau service en ligne de gestion de tâches (le service s’appelle Remember The Milk), je suis tombé sur ce que je peux considérer comme le formulaire parfait : Signup.

Les points forts :

• la mise en page est minimaliste (pas d’éléments perturbateurs) ;
• tous les champs sont obligatoires (pas besoin de préciser ceux qui doivent être rempli avec une petite astérisque) ;
• les intitulés sont alignés à droite et les champs bien espacés ;
• la gestion des erreurs est remarquable car elle s’effectue au fur et à mesure de la frappe à l’aide d’AJAX (un message contextuel vous indique si le champ est validé ou s’il faut le corriger) ;
• le bouton d’action est sans d’ambiguïté.

Bon allez, je ne résiste pas à l’envi de dénicher quelques points faibles :

• même si la balise label est utilisée, pas de trace d’un fieldset, de tabindex ou de raccourcis clavier ;
• est-ce que l’utilisation d’AJAX est complétée par une détection des erreurs côté serveur en cas de désactivation de javascript ?
• où sont les messages de réassurance et la politique de confidentialité ?

Passé ces quelques points, je ne peux qu’admirer le résultat et la redoutable efficacité de ce formulaire. Un exemple à suivre.

/!\ Article initialement publié sur FredCavazza.net.