10 crimes sur l’ergonomie des sites web que vous ne devriez plus commettre
Si l'article ci-dessous vous plait, faites nous de la pub, votez pour nous !
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
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
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
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
Vous pouvez utilisez 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
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
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
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
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”
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é
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.
Kiwano regroupe des articles et conseils issus de notre quotidien d'experts à Marseille sur le référencement naturel et l’accessibilité du web. Kiwano vous aide à améliorer la visibilité de votre site ou encore vous conseille sur votre stratégie de communication Internet et de référencement à Marseille et ailleurs.
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.
Il y a un autre crime aussi, non mentionné ici :
Crime n°11 : parler de l’Olympique de Marseille dans ses tutoriaux Web.
C’est un point de vue Alexandre… cependant ta remarque nous semble en dehors du sujet de l’ergonomie et de l’accessibilité des sites internet.
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 !
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.
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
@Alexandre: très bon
Merci pour cet article, que je vais recommander.
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”
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…
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?
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
@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
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,
) 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.
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
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.
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’é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!