couleurs, usabilité, handicap visuel

Usabilité : une autre vision sur vos designs

Le 16 novembre 2010 par Anthony dans Conception web.


L’usabilité se définit comme « le degré selon lequel un produit peut être utilisé, par des utilisateurs identifiés, pour atteindre des buts définis avec efficacité, efficience et satisfaction, dans un contexte d’utilisation spécifié ».

En matière de conception web, l’usabilité est bien souvent associée à :

  • - la simplicité de l’interface pour que l’apprentissage de son l’utilisation ne soit pas long
  • - la rapidité du temps de chargement
  • - la compatibilité entre les navigateurs, les technologies (javascript, flash, aucune)

Cependant, on oublie bien souvent un paramètre important : le choix des couleurs. S’il est facile d’assumer qu’une partie ou une autre ressort suffisamment, il faut prévoir que la vision des couleurs n’est pas la même pour tout le monde. Tout ce travail passé à peaufiner son design pour amener l’utilisateur à cliquer où l’on veut peut s’avérer inutile si on n’y a pas pensé.

  1. Sensibilisation à la problématique des couleurs
  2. Comment faire face à ces problèmes
  3. Outils pour tester ses designs

Sensibilisation à la problématique des couleurs

Il faut savoir qu’a peu près une personne sur douze risque de ne pas pouvoir utiliser convenablement votre site internet à cause d’un type de daltonisme (ou dyschromatopsie). Si la personne ne verra pas le site de la façon dont vous l’avez fait, il se peut qu’elle se confronte à une totale incompréhension et ne puisse lire certains textes, utiliser la navigation que vous avez conçue ou même ne pas voir certains éléments. Il faut savoir que la plupart des daltoniens ne peuvent distinguer les nuances entre le rouge et le vert, et que plus d’onze millions n’y voient aucune différence.

Il existe deux types de dyschromatopsie courant, la Protanopie, l’impossibilité de percevoir le rouge et la Deutéranopie, l’impossibilité de percevoir le vert. Une troisième forme beaucoup plus rare est la Tritanopie, l’impossibilité de voir le bleu.

Ici la différence de couleur entre le logo de Google pour les personnes ayant une visions normale et les personnes atteinte de Deutéranopie.

Personnes ayant une vision normale :

Vision d'une personne non atteinte de deutéranopie

Personnes atteintes de Deutéranopie :

Vision d'une personne atteinte de deutéranopie


Comment faire face à ces problèmes

Voici quelques conseils pour rendre vos designs faciles d’utilisation pour les personnes atteintes de ces déficiences de perception des couleurs.

  • - Utilisez des indicateurs supplémentaires à la couleur pour signifier les éléments (soulignement, gras).
  • - Séparez les parties autrement que par des couleurs.
  • - Remplissez les balises « alt » de vos images (en plus vous respecterez les standards).
  • - Évitez l’utilisation importante de rouge et vert dans vos graphismes.
  • - Gardez un niveau de contraste élevé entre votre fond et votre texte.
  • - Passez vos designs en noir et blanc pour voir s’ils sont toujours compréhensibles sans couleurs.
  • - Utilisez des outils pour tester vos designs selon la vision d’un daltonien.

Outils pour tester vos designs

Voici une liste des quelques ressources intéressantes qui vous permettront de tester vos créations selon les différents degrés d’anomalies visuelles.

Tas de lunettes stéréoscopiques

  • Cercle chromatique accessible : vous permet de voir directement la façon dont chaque couleur est perçue par un daltonien, en la sélectionnant sur le cercle chromatique.
  • Visicheck : ce site (en anglais) regroupe plusieurs outils de test sur les couleurs. Il peut transformer une image uploadée ou directement un site en ligne.
  • Color Oracle est un logiciel à installer (Windows, Mac OS, Linux) qui transforme la vision de votre écran selon le degré de dyschromatopsie choisi (deutéranopie, protanopie, tritanopie)
  • Visibone vend plusieurs livres et cartes représentant les cercles chromatiques y compris ceux des daltoniens. Vous pouvez aussi y trouver des récapitulatifs de fonctions js, css, html et php.
  • Un daltonien : il y en a surement un dans votre entourage, n’hésitez pas à lui demander de l’aide !

A votre tour

Les couleurs dans l’usabilité sont très importantes, j’espère que cet article vous aura donné envie de prendre en compte ce handicap dans votre conception. N’hésitez pas à réagir et à partager vos outils et astuces sur l’utilisation des couleurs dans vos designs.

Crédit photos : 1suisse


Flux RSS de design, referencement, actus internet - Bewype

Recevez les articles tout chauds sortis du four !
Inscrivez-vous à notre flux RSS

Partager - Faîtes découvrir le blog Bewype - conception site internet et logique entrepreneuriale


Jeter un oeil sur les autres articles : design graphique, actu web et marketing seo

Jeter un oeil sur les autres articles : , , ,

Analysez l’accessibilité de votre site web

améliorer accessibilité site internet

12 conseils d’usabilité pour les pages d’accueil de sites web

ergonomie-homepage

Vos commentaires sur Usabilité : une autre vision sur vos designs

(0) couleurs, usabilité, handicap visuel - Réagissez !

Pas encore de commentaire.

Ajouter votre commentaire sur Usabilité et couleurs dans vos design