Aller directement au contenu

Conception d’interface : choisir des couleurs ergonomiques et esthétiques

15/02/2010
3

En conception d’interface, le choix des couleurs n’est pas toujours chose facile car chacun peut avoir son avis : Le client a ses préférences, l’ergonome a ses recommandations, le graphiste a son style, le marketing ses souhaits, la communication sa charte, le commercial…

Pour prévenir tout conflit et parce qu’Usaddict est pour la paix des équipes de conception, voici quelques outils bien utiles pour guider les choix de couleurs ergonomiques (voir la définition de l’ergonomie). Car ce qui compte finalement, c’est que l’utilisabilité et le confort de l’utilisateur orientent les recommandations ergonomiques et bien sûr que le client soit pleinement satisfait.

Les couleurs d’une interface participent aux sentiments de confort et d’adhésion de l’utilisateur. Elles vont valoriser l’identité visuelle du “produit” en créant un univers dans lequel l’utilisateur va évoluer. Ce travail de recherche graphique s’appuie idéalement sur une collaboration étroite entre l’ergonome et le designer pour au moins deux raisons :
– le choix des couleurs sera vraiment guidé par les attentes des utilisateurs et les valeurs du produit final;
– la palette de couleurs sera autant à visée esthétique que fonctionnelle …et Canapé rouge ne tapera plus sur son graphiste !

Voici donc quelques outils et un peu de très bonne lecture avec Smashing Magazine et Usabilis.

Des outils indispensables :

Color Contrast Analyser Color Contrast Analyser (en), permet de comparer deux couleurs en un double coup de pipette (i.e. la couleur du corps de texte et le fond), et de calculer le rapport de contraste. Vous pourrez alors vous assurer que votre interface respecte les normes de la WCAG (Normes d’accessibilité du W3C pour les sites internet et les logiciels) en termes de contraste, de lisibilité et de confort de lecture des textes selon leur taille. Télécharger la version française ici. Léger et sans installation, on peut même l’emmener dans sa clé usb.
Wearecolorblind.com Wearecolorblind.com
Un catalogue en ligne de patterns tous compatibles avec les altérations visuelles liées au daltonisme
Adobe Kuler Adobe Kuler

Un superbe outil interactif d’Adobe (en flex forcément) pour définir un ton, une ambiance, ou même un esprit, grâce à un large choix de palette à partir de mots clés

Colorpix Colorpix
Un petit logiciel pourvu d’une pipette et permettant de récupérer très vite les coordonnées d’une couleur sous différents formats (RGB, HEX, CMYK, etc)
ColourLovers.com ColourLovers.com
Un site français dédié aux palettes de couleurs et leurs usages dans différents domaines de la communication graphiques et multimédia.

Pour aller plus loin :

Smashing Magazine nous offre de formidables articles de fond abordant :
– La signification des couleurs :
Color Theory for Designers, Part 1: The Meaning of Color
– La terminologie associée aux couleurs :
Color Theory For Designers, Part 2: Understanding Concepts And Terminology
– La création de palettes de couleurs :
Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Consulter la présentation de la charte graphique par Usabilis, un document de spécifications d’interface par excellence : La charte graphique

Bonnes inspirations!

 

Voir aussi :

3 Commentaires

Laisser un commentaire à Cilou Annuler la réponse