Multipliez la qualité de votre site Web par 10 en moins de 20 minutes
Avant-propos : Cet article a été rédigé par Frédéric de Villamil en tant que Guest Blogging.
Frederic est rédacteur sur son blog professionnel sur lequel il publie périodiquement des articles de fond sur l’ergonomie web, la qualité, les bonnes pratiques de développement, la gestion de projets ou l’accessibilité.
Réaliser un bon site ou une bonne application Web ou mobile n’est pas très compliqué, atteindre l’excellence l’est beaucoup plus. La différence entre les deux réside dans une infinité de petits détails qu’il faut repérer d’une page à l’autre, d’un écran à l’autre, ou parfois simplement d’un bloc à l’autre, pour donner à l’ensemble un soucis de cohérence et de solidité.
J’ai dressé pour vous cette check list de 10 éléments qui vous permettront d’améliorer en quelques minutes la cohérence de votre application.
1. La cohérence des liens
Assurez-vous que vos liens suivent le même schémas sur l’ensemble de votre site. Si vous décidez de les souligner, soulignez les partout. Si vous choisissez de les mettre d’une couleur différente, faites-le partout, et n’utilisez de police d’une couleur différente à celle du texte que pour les liens.
Jakob Nielsen va encore plus loin, en recommandant de ne pas styler les liens. Les liens par défaut du navigateur sont en effet universellement reconnaissable et diminuent au maximum les risques de confusion.
Ce site, par exemple, fait exactement ce qu’il ne faut pas faire en mélangeant liens soulignés et non soulignés, qui plus est dans un même espace. Mais les cordonniers sont toujours les plus mal chaussés.
2. Les call to action
Les anglo saxons ont cet avantage sur nous qu’ils écrivent leurs infinitifs, leurs secondes personnes du pluriel et leurs impératifs de la même manière. Là où nous devons choisir entre créer un compte
ou créez un compte
, ils n’ont que create an account
. J’aime beaucoup la richesse de la langue française, mais elle pose parfois des soucis quand il s’agit de valider tous les call to action d’une application.
Choisissez donc une fois pour toute si vous voulez vous adressez à vos utilisateurs à l’aide d’infinitif, ou à la deuxième personne du pluriel, et tenez-vous y. Il n’y a rien de plus agaçant que de voir les deux tons se mélanger dans un même menu.
Google a choisi des call to action volontairement très neutres, à l’exception de leur fameux bouton j’ai de la chance
.
3. La formulation des messages système
Choisissez un format pour les messages d’erreur de vos formulaires, et assurez-vous qu’il soit le même partout. Il existe principalement deux manières de les tourner :
- Le focus sur l’utilisateur :
vous devez choisir un email
,vous devez valider les conditions générales d’utilisation
… - Le focus sur le fonctionnel :
l’email est obligatoire
,valider les conditions générales d’utilisation est obligatoire
…
Notez que la première option accompagne très bien l’utilisation de verbes à la seconde personne du pluriel, toujours pour rester dans une cohérence de ton.
4. L’affichage des messages système
Adoptez une politique de positionnement cohérente pour les messages systèmes. Assurez-vous que les messages généraux soient toujours placés au même endroit. Il n’y a rien de pire qu’une application qui affiche les messages de confirmation en haut de l’écran, les messages d’erreur globaux à côté de l’élément qui a généré l’erreur – en plus d’un message local – et les avertissements en bas des formulaires.
Assurez-vous que les messages locaux sont toujours positionnés de la même manière par rapport à l’élément dont ils parlent. Cela peut être soit à droite, soit en dessous. N’hésitez pas également à mettre l’élément lui-même en valeur, mais assurez-vous dans ce cas que c’est partout de la même manière, par exemple en posant des bords de couleur rouge, ou une icône significative.
5. Les couleurs et l’iconographie des éléments système
Faites attention à l’iconographie que vous employez. Si vous choisissez une icône verte pour la validation de vos écrans de confirmation, et une icône rouge pour accompagner à la fois les boutons d’annulation et les liens de suppression, tenez-vous y, même sur l’écrans de confirmation d’une suppression. Vous vous retrouveriez autrement avec un écran proposant la même iconographie pour la validation et l’annulation (c’est du vécu).
Même si elles ne sont pas suffisantes en termes d’accessibilité, les couleurs ont leur importance : rouge pour les messages d’erreur et les signes de danger, orange pour les avertissements, et verts pour les messages de confirmation. Ces schémas de couleurs sont aujourd’hui quasiment universels.
Faites également attention au positionnement de vos OK / Cancel. Si vous êtes PC, vous afficherez OK à gauche et Cancel à droite. Si vous êtes Mac, c’est le contraire. Mais dans tous les cas, assurez-vous d’utilisez le même schémas partout.
6. Les labels des formulaires
S’il est tout à fait admis d’aligner les labels des formulaires à gauche de ces derniers ou au dessous en fonction du contexte, certains éléments doivent garder une certaine cohérence.
Choisissez ton à associer à vos labels en fonction du message que vous souhaitez transmettre et de la place dont vous disposez : nom
ou votre nom
n’ont pas du tout le même impact. Vous pourrez parfois changer de typologie entre deux formulaires, par exemple entre un wizard et sa contrepartie standard pour le côté plus personnel à donner à l’accompagnement, mais je n’en suis pas super fan.
Vérifiez que les labels utilisent bien la balise label
, et que celle-ci pointe bien vers le champ associé, et non dans le vide ou, pire encore, vers un autre champ. Profitez-en également pour vérifier qu’ils commencent tous par une majuscule… ou pas.
Enfin, prenez une décision quant à l’utilisation ou non des “:” à la fin des labels de formulaires. Je suis personnellement contre, pour des problèmes liés à l’internationalisation. Soit vous placez les “:” dans la clé de langue à passer à la traduction, et vous ne pouvez plus l’utiliser ailleurs. Soit vous vous retrouvez comme un imbécile à gérer des problèmes d’espaces insécables à placer avant les “:” en français. Soit vous vous en passez. Le choix est vite fait.
7. Les titres de page et le chemin de fer
Il est facile de se tromper dans les titres de pages et les libellés du chemin de fer, notamment parce que l’on a tendance à copier / coller du code.
Vérifiez que les verbes d’action des titres de page correspondent bien à l’action à effectuer. Il est facile de laisser un “créer” dans un formulaire d’édition, surtout quand on utilise le même code dans les deux cas. Libellez les boutons de validation en conséquence.
Vérifiez que le titre de la page en cours soit bien le même à l’affichage et dans le chemin de fer. Vérifiez, quand c’est possible, qu’ils correspondent bien au call to action qui y a mené.
8. L’ordre des tabulations dans les formulaires
Nombreux sont les utilisateurs qui se déplacent dans un formulaire à l’aide de la touche tab
. Assurez-vous donc que son utilisation soit cohérente. Si vous devez parfois aligner plusieurs champs sur une même ligne, rappelez-vous qu’en français, on lit de gauche à droite, puis de haut en bas. Si votre formulaire vous amène à utiliser plusieurs colonnes, parcourez les colonnes séquentiellement, de haut en bas, puis passez à la colonne suivante.
Assurez-vous également que vos utilisateurs puissent parcourir tout le formulaire à l’aide de la tabulation. Rien de plus énervant que ces bouts de Javascript qui désactivent la touche tab et obligent l’utilisateur à prendre la souris.
9. Les éléments à choix multiples des formulaires
Les éléments à choix multiples dans les formulaires sont souvent une source d’incohérence car ils peuvent changer d’une page à l’autre. Pour vous y retrouver, je vous propose une guideline simple :
Les éléments pouvant se formuler sous la forme d’une question fermée (oui / non) doivent être matérialisés avec une checkbox. La question doit toujours être formulée de telle sorte que la checkbox soit désactivée par défaut.
Ce qu’il ne faut pas faire :
Quand plusieurs réponses sont possibles, tout dépend du contexte.
Si vous avez entre trois et cinq réponses possibles, utilisez des radios bouton en alignant les réponses proposées les unes en dessous des autres et en alignant les boutons les uns en dessous des autres.
Si vous avez plus de cinq réponses, utilisez une liste déroulante, sauf si la criticité des éléments de réponse ne permet pas de ne pas les afficher à l’écran.
10. Les éléments actifs
Last but not least, comme disent nos cousins d’Amérique, les éléments actifs, et plus particulièrement les liens et les boutons. Il est très important que ces derniers soient décelables comme tels par les utilisateurs. Cela passe par plusieurs bonnes pratiques.
Les éléments actifs doivent réagir au survol de la souris. À minima, il faut que le pointeur de la souris se transforme en fonction de l’action à faire : petite main pour les liens, croix directionnelle pour le drag and drop, etc…
Les éléments peuvent également changer d’apparence au survol de la souris pour indiquer leur activité effective. Si vous décider d’ajouter un rollover sur vos boutons, assurez-vous que tous vos boutons actifs réagissent bien de la même manière sur l’ensemble de votre oeuvre. De même, si vous changer le soulignement des liens, assurez-vous qu’ils réagissent tous de la même manière.
Conclusion
Les meilleures choses ont une fin, il va donc me falloir vous quitter. La liste que je me suis composée avec les années est évidemment beaucoup plus détaillée, mais celle-ci en récapitule les principaux points. Question outillage, j’utilise une grille de validation dans un Google Docs, que je peux ainsi partager avec d’autres personnes. Cela permet non seulement de suivre l’avancement du travail, mais également de le partager.
Maintenant que vous avez terminé de lire cet article, j’imagine que vous savez ce que vous allez faire des 20 prochaines minutes ?
- 1. La cohérence des liens
- 2. Les call to action
- 3. La formulation des messages système
- 4. L’affichage des messages système
- 5. Les couleurs et l’iconographie des éléments système
- 6. Les labels des formulaires
- 7. Les titres de page et le chemin de fer
- 8. L’ordre des tabulations dans les formulaires
- 9. Les éléments à choix multiples des formulaires
- 10. Les éléments actifs
- Conclusion