10 crimes sur l’ergonomie des sites web que vous ne devriez plus commettre

12 janvier 2010
Tags : , , , ,
49 commentaires

L’article sur les 10 crimes sur les balises HTML que vous ne devriez plus commettre est actuellement l’article qui a été le plus lu sur Kiwano et aussi celui qui a entrainé le plus de commentaires de votre part. Alors, nous n’avons pas pu résister à l’idée de vous proposer une traduction du nouvel article de Chris Spooner intitulé « 10 Usability Crimes You Really Shouldn’t Commit » sur son blog Line 25 Web Design Blog.

Voici donc une sélection des dix crimes les plus courants concernant l’ergonomie et l’accessibilité des sites webs avec la solution pour les éviter.

Crime n°1 : avoir des labels non associés aux champs de saisies dans vos formulaires

Utiliser la balise label et l'attribut for sur les formulaires

Il est indispensable d’utiliser la balise label pour vos labels de formulaires et de renseigner l’attribut « for » pour pointer sur l’ID du champ de saisie. Ainsi quand l’utilisateur cliquera sur le label du formulaire, il aura automatiquement le focus sur le champ de type input qui lui est associé. Ceci est encore plus important pour les champs de type bouton radio ou de type case à cocher car cela augmente sensiblement la zone cliquable minuscule de ces éléments (pensez aux gros doigts de vos utilisateurs quand ils utilisent votre formulaire sur leur smartphone).

Crime n°2 : avoir un logo qui ne contient pas de lien vers la page d’accueil de votre site

Mettre un lien vers la page d'accueil sur le logo du site

Avoir un lien sur le logo de votre site pointant vers la page d’accueil de celui-ci est devenu une pratique courante, si courante que les utilisateurs ont maintenant pris l’habitude de cliquer sur ce logo. C’est même devenu une convention du même ordre qu’avoir le logo en haut à gauche de votre site.
Par contre, selon nous, ce lien ne vous dispense pas du lien Accueil dans votre menu. Vous n’êtes pas à l’abri d’avoir un utilisateur qui cherchera le lien Accueil dans votre menu.

Crime n°3 : ne pas avoir de couleur différente sur les liens qui ont été visités

Mettre une couleur alternative pour les liens visités

Il est important de donner à vos utilisateurs un indicateur visuel leur permettant de savoir quel lien ils ont déjà cliqué sur votre site. La méthode la plus simple est de leur donner une couleur différente afin de pouvoir les repérer immédiatement. Nous vous conseillons donc de mettre en oeuvre cette bonne pratique sur tous les liens textuels de votre site web.

Crime n°4 : ne pas avoir d’état actif pour les champs de vos formulaires

Etat actif dans les formulaires

Vous pouvez utiliser le sélecteur « :focus » sur beaucoup d’éléments de vos pages mais cela prend tout son sens avec les champs de type input ou textarea. Il faut donc ajouter un peu de code CSS pour vos éléments inputs ou textarea pour mettre en surbrillance la bordure l’élément actif ou changer sa couleur de fond de sorte de pouvoir l’identifier d’un simple coup d’oeil.

Crime n°5 : avoir des images sans attribut alt

Exemple d'attribut alt sur les images

Nous avons déjà insisté sur ce point dans plusieurs articles Kiwano : il est indispensable (et obligatoire) de renseigner correctement l’attribut alt pour l’ensemble des images de votre site. Encore une fois, si une image ne contient pas de sens (i.e. si elle est de type icône ou background) vous devez mettre un alt vide (alt= »") sinon, profitez-en pour mettre des mots clés qui aideront le référencement de votre image.

Crime n°6 : utiliser une image de background sans spécifier de couleur de background

Spécifier une couleur de fond pour vos images

Il est courant d’avoir du texte affiché sur des images de fond. Il ne faut pas oublier que l’utilisateur peut désactiver l’affichage des images. Dans ce cas il faut vérifier que le texte reste visible et que la différence de couleur entre le texte et la couleur de fond est suffisante. Il est donc fortemement conseillé de forcer une couleur de fond proche de celle de l’image qui sera affichée si les images sont désactivées.

Crime n°7 : utiliser de gros blocs de texte ennuyeux

Alterner titres et paragraphes

Si vous avez beaucoup de texte à afficher, il faut faire attention à ne pas ennuyer votre lecteur avec de longs textes. Il est conseillé de donner du rythme en cassant ces blocs de texte avec des titres et des images pour faciliter le parcours de votre page.

Crime n°8 : souligner un texte qui n’est pas un lien

Utiliser le souligné que pour les liens

Tout le monde sait que le texte d’une page qui est souligné est normalement un lien. Il ne faut donc pas souligner du texte qui n’est pas un lien. Si vous voulez mettre en exergue une partie de votre texte, privilégiez plutôt les éléments strong et em.

Crime n°9 : avoir un lien « cliquez ici »

Créer des liens explicites

Avoir un lien de type « cliquez ici » est non seulement un crime pour le référencement de votre site mais en plus il oblige votre utilisateur à lire tout le paragraphe pour pouvoir comprendre ce que fait ce lien. Cette erreur est même double : cela peut paraître évident, mais plus un lien est long et plus il est facile à cliquer pour vos visiteurs.
Alors privilégiez donc les liens explicites décrivant correctement la page cible.

Crime n°10 : utiliser du texte justifié

Ne pas utiliser du texte justifié

Le texte justifié peut poser des problèmes à la lecture pour certaines personnes. De plus cela peut s’avérer vraiment hideux sur des paragraphes courts ou quand la longueur de la ligne est trop importante. Pour améliorer l’accessibilité de votre site, évitez donc les textes justifiés.

Vous avez d’autres crimes en tête que vous croisez tous les jours ? N’hésitez pas à les partager avec nous en laissant un commentaire.

Commentaires (49)

  1. Pour le crime n°4 « état actif pour les champs de formulaire » : je ne choisirai pas simplement de changer la couleur de la bordure (peu ne pas être perçu par les personnes mal voyante ou même simplement daltonienne). C’est aussi pour cela que l’effet :hover ou le :focus sur les liens ajoutent une couleur de fond et/ou enlève le soulignement

    re le crime n°9 « cliquez-ici » : une autre raison pour ne pas utiliser ce type de lien est que, d’un point de vue accessibilité, les synthétiseurs vocaux peuvent extraire les liens d’un document et les placer en tête de celui-ci. Un utilisateur aura donc tous les liens cliquez-ici sans le reste du para et ne saura pas à quoi se rapporte le lien.

  2. Il y a un autre crime aussi, non mentionné ici :

    Crime n°11 : parler de l’Olympique de Marseille dans ses tutoriaux Web.

  3. Bonjour

    Article intéressant, mais qui met en évidence le fait que parfois, design et accessibilité ne font pas bon ménage (pas toujours : on fait ce qu’on peut !)

    PS : et le champs de formulaire actif alors ???

    • Hélas.. Nous ne sommes pas parfaits Cédric… mais le but est de s’améliorer.
      C’est vrai que le champ de commentaire, même si c’est le seul de la page, mériterait un style sur son état actif. On va tâcher d’y remédier.
      Tu peux nous prendre en défaut sur d’autres points mentionnés dans d’autres articles mais ne le répète plus STP !

    • Je me dois de réagir : l’accessibilité fait partie du design. Les designers que je connais pensent à l’accessibilité des sites qu’ils conçoivent.

      Le but du design est de créer quelque chose d’agréable à employer. Cela veut dire que le design englobe l’apparence (qui peut ne pas faire bon ménage avec accessibilité), l’accessibilité, la facilité d’utilisation etc.

      Donc le design ne fait pas « mauvais ménage » avec l’accessibilité, il doit prendre en compte l’accessibilité. Quelqu’un qui pense un site/une application et qui ne pense qu’à l’apparence et pas à l’accessibilité / compréhension n’est pas un designer, c’est un graphiste.

  4. Bons conseils qui semblent plein de bon sens. Sauf peut-être pour le texte justifié, sauf si bien sûr la colonne utilisée est vraiment étroite.

  5. Pour ce qui est du logo cliquable, lorsque celui-ci est en image de fond dans la CSS ce n’est pas toujours simple. Vous trouverez une solution ici : http://dreamgratuit.canalblog.com/archives/2008/01/11/7521098.html

  6. @Alexandre: très bon ;)

    Merci pour cet article, que je vais recommander.

  7. J’ajouterais pour le crime 9 que le type de lien que vous préconisez est meilleur pour le référencement naturel, à moins qu’un site ne veuille se positionner sur « Voir la fiche produit » ou « cliquez ici » :)

  8. Alors moi j’ajouterais : ne pas informer les visiteurs sur l’endroit où ils se trouvent.
    Lorsqu’on arrive par un moteur de recherche, ou par un fil RSS (comme c’est mon cas), je pense qu’un élément au moins (le menu, un fil d’ariane) devrait informer le visiteur de sa place dans l’arborescence du site.

    Le truc étonnant dans votre menu, c’est que si je le lis comme d’habitude, je suis sur la page d’accueil. Or je ne suis pas sur la page d’accueil, à priori, mais bien sur un article de… de quelle partie déjà, « actualités », non ? m’est avis que c’est plutôt cet onglet ui devrait être en inverse…

    • @Revenons à nos moutons : Vous avez hélas entièrement raison :’(
      Hélas encore, nous ne sommes pas parfaits et avons des contraintes. Nous essayons d’améliorer la qualité de nos sites mais il reste toujours des points à perfectionner… Votre remarque, c’est promis, sera prise en compte avec toutes les autres ;-)

  9. L’ergonomie est un domaine qui m’intéresse de plus en plus en complément de mes connaissances en référencement. Une sorte d’étape supplémentaire après avoir amené du trafic: penser ergonomie pour conserver ces internautes. Cependant, malgré mon ouverture d’esprit vis à vis de l’ergonomie, c’est bien le crime n°10 que je n’arrive pas à accepter. Certes c’est un conseil que j’ai déjà lu, une sorte de base de l’ergonomie que j’ai pourtant du mal à appliquer moi-même: sur mon blog tout mes articles (sauf les plus anciens), sont en justifié pour la simple raison que je trouve ça justement (et contrairement à l’argument de l’ergonomie) plus facile à lire… les goûts et les couleurs ça ne se discute pas ;-) Par contre on parle d’ergonomie donc dire qu’éviter un texte justifié améliore l’accessibilité n’est-ce pas une erreur?

    • Oui, je suis d’accord. On est plus habitué à lire en justifié (livre, journaux, etc…). Alors comment peut-on prétendre que c’est plus dure à lire ?

      Ce n’est qu’une question d’esthétique au final. Le justifié fait que parfois il apparait des « chemins » dans le texte qui sont pas très beau. Parfois, les mots se retrouvent fort espacé.
      C’est au rédacteur de revoir son texte pour éviter cette effet à mon sens.
      Evidemment, si on a pas le temps d’améliorer l’écriture pour que le texte soit en plus beau à regarder, mettre un alignement à gauche se justifie. Et c’est un peu de la paresse :)

      Et c’est aussi une question de largeur de colonne.

      Bref, ici, c’est vraiment une question de design à mon sens. Et d’habitude !
      Tout dépend du contenu.

  10. Utile cette petite piqure de rappel !
    Mais parfois le fait de ne pas mettre un lien sur le logo principal d’un site Internet est un plus pour le nombre de pages vues et également pour le taux de clic sur les différentes publicités. Surtout si la home du site n’est pas forcement pertinente ;)
    Gael

  11. Crime n°9: J’ai longtemps agi selon ce principe, et pourtant, je pense que l’utilisation du « cliquez ici » dépend énormément de la cible. Bien que ce soit une recommandation W3C que de ne pas utiliser le « cliquez ici », il semblerait que sans cette phrase clé, l’utilisateur lambda ait parfois des problèmes de compréhension.

    • Bonjour et merci pour ta contribution Bastien,
      Bon, comme tu le sais déjà puisque tu as lu notre article, nous ne sommes pas de ton avis.
      Je profite cependant de ton commentaire pour parler de l’individu lambda. Comme tu le dis, l’ergonomie d’un site dépend des utilisateurs à qui il est destiné. La notion d’invidu moyen (le fameux Pierre Lambda :-) ) est donc à notre avis périlleuse. A trop vouloir faire de compromis on fini parfois par ne plus contenter personne. Il faut être vigilent afin de ne pas perdre de vue votre véritable public.

    • :)
      Tu peux toujours écrire Cliquez ici pour … et tu remplaces les 3 petits points par une phrase pertinente.

  12. Le dernier conseil sur les textes justifiés, je l’ai récemment appris grâce au livre d’Isabelle Canivet « Bien rédiger sur le web ». C’est très instructif.

  13. J’ajouterais:
    _ Modifier la taille du texte principal (en mettant une taille en pixels, ou en « small », par exemple). Par définition, la taille du texte principal, c’est « medium ». Cela permet à l’utilisateur de pouvoir configurer son navigateur avec la taille de fonte qui lui convient le mieux. Sur certains sites web, on se retrouve avec des caractères trop petits, ou inversement trop gros.
    _ Coder en dur des dimensions de telle façon que le texte peut être plus large que la fenêtre du navigateur. Cela demande de scroller horizontalement à chaque ligne de texte et complique grandement la lecture. D’une manière générale, éviter l’apparition d’une barre de défilement horizontale.

    • « J’ajouterais:
      _ Modifier la taille du texte principal (en mettant une taille en pixels, ou en « small », par exemple). Par définition, la taille du texte principal, c’est « medium ». Cela permet à l’utilisateur de pouvoir configurer son navigateur avec la taille de fonte qui lui convient le mieux. Sur certains sites web, on se retrouve avec des caractères trop petits, ou inversement trop gros. »

      Heuu, faut pas exagérer, tous les navigateurs (à l’exception de’IE6) possèdent une fonction de zoom efficace quelle que soit l’unité utilisée pour définir la taille des caractères.

      Quant à l’utilisateur pouvant configurer son navigateur avec la taille de fonte qui lui convient le mieux, perso, je ne l’ai jamais rencontré.

  14. J’étais un criminel mais grâce à la thérapie Kiwano, je suis rentré dans le rang avec des principes plus proches du bon gout que du crime organisé en masse…
    Merci Kiwano!

  15. tres tres tres bon article, J’adore particulierement les exemples! Excellent a la fois educatif et fun.

  16. Intéressant, merci pour ces conseils. J’avais mis le logo cliquable car cela tombait sous le sens. Je suis également partagé pour la justification car, étant moi-même en train de construire un blog, j’ai cherché à justifier mes textes qui apparaissaient vraiment mal sans justification.

  17. Bonjour,

    j’adore ces articles toujours très simples, efficaces et faciles à comprendre.

    Une petite réserve sur les conseil de celui-ci : il ne me semble pas justifié de refuser le texte justifié ;-)

    De toute façon un écran n’est pas fait pour lire beaucoup de texte…

  18. ouh la, à la suite de cet article, il va falloir que je reprenne mes sites et que je fasse le grand ménage de printemps ! :)

  19. En lisant les premières lignes je me suis dis que c’était mal barré, mais à par le conseil numéro 1 (que je connaissais pas) tout le reste est respecté depuis longtemps.

    J’ajoute pour la justif c’est très dur de mettre une justif à gauche à des personne qui ont bossé longtemps dans le print, j’ai eut plusieurs fois le cas avec des clients imprimeurs.

  20. Article très intéressant. Merci ! Par contre, je ne suis pas tellement d’accord pour le texte justifié. Bannir cette mise en forme est quelque peu excessif ! (bien qu’effectivement, dans certain cas, elle soit à proscrire).

    PS : Dommage que vous commettiez le crime n°4, par exemple sur le formulaire permettant de commenter l’article ! :)

  21. Très pertinent, le coup des label je ne comprend pas que certains webmaster continu de ne pas corriger cette erreur c ‘est pourtant simple….

  22. Le crime numéro 10, « utiliser du texte justifié », n’en est un qu’avec des justifications (largeur de colonne) étroites qui peuvent produire des espaces intermots très importants et variables d’une ligne à l’autre au sein d’un même paragraphe. Le problème se pose également en print.

    Par contre, avec une justification suffisamment large, les espace intermots sont beaucoup plus étroits et homogènes.

    A l’opposé, l’alignement à gauche peut produire aux fins de ligne des « découpes » très inesthétiques qui attirent le regard et perturbent la lecture (dans le print, on parle de « composition en drapeau »).

    Il est possible, dans une certaine mesure (pas avec une justif trop courte, quand même), de résoudre ces problèmes d’espaces intermots trop importants/hétérogènes en remplaçant un mot court par un mot plus long, ou l’inverse, en supprimant ou en rajoutant un mot (un adverbe, par exemple, et/ou en réduisant l’espace intermot du ou des paragraphes posant problème (word-spacing: -1px, word-spacing: -2px, etc.). Ces techniques sont utilisées dans le print, mais la plupart des auteurs de textes web ne semblent pas prêts à faire un tel travail sur leurs textes.

    • Je ne suis pas d’accord non plus pour les textes alignés à gauche: un texte justifié est (pour ma part) beaucoup plus facile à lire.

      Je déteste tellement un long texte aligné à gauche que si le contenu m’intéresse, j’ouvre l’inspecteur de Chromium et je change la CSS.

      D’ailleurs, ce n’est pas un hasard si les livres, les magasines ou les liseuses numériques utilisent du texte justifié.

      Le crime, c’est de mette du texte dans une colonne étroite.

  23. L’absence de lien de retour à l’accueil est certes un crime, mais pas tel qu’énoncé ici. Les tests utilisateurs montrent le contraire : avec le lien caché sous le logo du site, ils sont nombreux à ne pas savoir revenir à l’accueil… mieux vaut mettre un lien explicite.

    Le test montré à ce sujet dans cette conférence ergo à Paris Web 2010 est tout à fait édifiant : http://www.paris-web.fr/2010/programme/internautes-sous-surveillance-retours-de-la-realite-pour-un-web-meilleur.php

  24. Bonjour à tous,

    En espérant ne pas être hors-sujet, on pourrait évoquer la loi de Fitts, qui se résume assez simplement par « Une cible est d’autant plus facile à atteindre que celle-ci est grande et que vous êtes proche d’elle ». En ergonomie web, elle peut s’appliquer aux « call to action » dans un premier temps : plus le bouton est grand, moins l’utilisateur doit faire d’effort pour le cliquer. Mais cela peut également s’appliquer aux liens dans les menus, en augmentant leur surface cliquable à la largeur de l’élément contenant. Par exemple, sur Kiwano, dans le menu de gauche (Accueil, Tous les articles SEO, Prestations de référencement, Google Fight 2, Contact) les liens pourraient être cliquable sur toute la largeur de la colonne (comprise entre les pointillés au dessus et en dessous). Cela minimise « l’effort » pour atteindre ceux-ci :-)

    Bien cordialement !

    • Merci Willy, faire du SEO c’est aussi prévoir les actions des utilisateurs, tu es donc dans le vif du sujet. Il nous reste plus qu’à corriger :)

  25. En ce qui concerne la regle 10, pour ma part, je trouve qu’un texte est plus lisible quand il est justifié et je trouve ceci plus propre. Je ne sais pas si mon habitude de vouloir que mes textes soient droit.

  26. C’est quand même étrange de montrer des exemples sous forme d’images, donc contraire aux règles les plus élémentaires d’accessibilité, sur un article prétendant donner des leçons sur l’ergonomie… ;)

  27. Le crime n°1 pénalise surtout les aveugles qui peuvent être en difficulté devant une pléthore de champs non-associés à des noms en braille.

  28. Concernant la règle 10, cela mériterait d’être plus longuement argumenté… En quoi est-ce qu’un texte justifié est « difficile à lire »? À qui donc cela peut-il poser des difficultés?

    Sinon : « quand la longueur de la ligne est trop importante » : c’est plutôt de composer des textes avec une longueur excessive qui est un crime, plutôt que leur composition.

    En dehors de ça différents points de l’article m’ont intéressé, mais ce point 10… Je reste très fortement sceptique…

  29. Je suis tout à fait d’accord avec ce qui est mentionné dans cet article. En ce qui concerne la justification, il y a un site qui s’en sort plutôt bien malgré un texte justifié : http://typographisme.net

    Et sinon, juste pour taquiner, il n’y a pas de « focus » sur les champs du formulaire de saisie de commentaires :D

  30. Le coup de la justification du texte me laisse quelque peu perplexe. me concernant, et ce notamment sur des textes de bonne longueur, la justification est plus propre en terme de présentation qu’une indentation liée à la longueur des mots.

    A partir de là: un texte court justifié peut être hideux et légitimer ce qui est dit ici… Je pense que la mise en page doit donc être au service de la présentation et de la lisibilité du contenu.

    C’est d’ailleurs quelque chose de flagrant: plus le texte est long, plus je trouve qu’en l’absence du justifié moins je suis attiré pour le lire. Mais là, je peux également être probablement obsédé par les problèmes de typo… ayant un peu bossé dans l’édition.

    • Un autre crime d’ergonomie serait d’avoir une largeur pour la colonnes de texte trop grande.
      Si la ligne est trop longue la lecture devient très difficile.
      Il est préférable d’avoir une largeur comprise entre 10 et 15 mots et donc sans justification :)

  31. Bon, je reviens au point 10 puisque certains n’ont pas lu mon commentaire précédent ou n’ont pas compris.

    Ce n’est pas une question d’esthétique, c’une question de facilité la vie des personnes souffrant d’un handicap appelé dyslexie.

    Il faut savoir que bon nombre de personnes souffrent de ce handicap sans forcément le savoir. Je connais un développeur informatique qui a du changer de métier vers 30 ans pour cette raison. Donc, aidons les!

    Beaucoup d’autres points mentionnés sont liés à des soucis d’accessibilité. Je renverrai donc les lecteurs à cet excellent site http://www.la-grange.net/accessibilite, qui est une traduction française de http://diveintoaccessibility.info/. Je n’ai pas vérifié la traduction. L’intérêt de ce site est de présenter les difficultés que certains d’entre nous peuvent avoir lorsqu’un site n’est pas accessible.

    Et sachant que google est « mal-voyant », l’accessibilité résoud de nombreux problèmes de référencement! 1/3/5/8/9/10 au minimum sont liés à l’accessibilité « handicapés » (on l’est plus ou moins à différents stades de la vie). Les seniors peuvent l’etre, et c’est souvent eux qui ont le temps à passer en ligne.

    Merci encore pour cet article, et ces 10 points sont un bon rappel pour un internet meilleur.

    Claude.

  32. Merci pour ces précieux conseils! :D Les numéros 4 et 6 m’étaient connus mais je n’avais jamais cherché une explication: c’est chose faite!

    Mais le « Vous pouvez utilisez » pique les yeux ^^.

Laisser un commentaire

* champs obligatoires