Esthétique
et couleur
Sur le site Ergonomic Garden, Thérèse Migan
défend l'idée que "Ce qui est beau est utilisable". On lit souvent par
ailleurs que l'esthétique et le dernier des soucis des visiteurs. Qui
faut-il croire ?
Cette page s'inspire d'un article de RankSpirit : Esthétique et couleur dans le design Web
Sélection de liens concernant l'esthétique et la couleur
Usabilis :
Ergonomie et beauté
Amélie Boucher pose le problème consistant à concilier
l'esthétique et l'usabilité.
Faites critiquer
votre site sur Alsacréations
Bien que les critiques d'Alsacréations portent a
priori sur la qualité du code, vous pourrez également
bénéficier d'appréciations sur l'ergonomie, l'accessibilité et
l'esthétique de votre site. Si vous voulez éviter de vous faire taper
sur les doigts, vérifiez tout de même la validité de votre code avant
de le soumettre !
Voici quelques autres forums sur lesquels vous pourrez
proposer votre design en test :
Kob-One
WebrankInfo
ForumWebmaster
ForumHardware
Jolies
pages...
CoolHomePages
Ces sites proposent des sélections des plus beaux sites. Jolies Pages les classe par
couleurs. De quoi trouver l'inspiration !
L'esthétique
La plupart des internautes recherchent de l'information pratique, pas des belles images. Votre soucis d'esthétique ne doit jamais nuire, en aucune façon, à l'ergonomie et à la lisibilité de votre contenu. Attention surtout à ne pas faire exploser le temps de chargement de vos pages par l'emploi excessif d'images ou d'animations (voir optimiser les images de votre site)
Gérez vos priorités dans l'ordre suivant :
- contenu
- clarté-ergonomie (aspect pratique)
- rapidité d'affichage / accessibilité
- esthétique
Si ce classement vous semble discutable, vous pourrez vous forger votre propre opinion par vous-même.
Cela étant dit (et si la chose est possible) : associez l'agréable à l'utile ! Un design original, qui parvient à être esthétique tout en restant fonctionnel, peut avoir un impact positif très important sur la perception de votre site par vos visiteurs et sur la trace qu'il laissera dans leurs mémoires. Nous avons pu constater une hausse de fréquentation de l'ordre de 20% après la refonte de l'esthétique d'un site. Formidable, non ? Sans doute, mais l'amélioration de la structure du site, de sa mise en page et de ses menus pourra faire 100 fois mieux. Gérez donc vos priorités dans le bon ordre.
On prétend que les goûts et les couleurs ne se discutent pas... c'est faux ! Surtout lorsqu'on s'adresse au plus grand nombre. Votre site doit séduire le maximum de visiteurs. Soignez donc vos accords de couleur.
Pour le reste, si vous n'êtes pas graphiste vous-même, faites appel aux talents qui se proposent gratuitement sur les forums (Ironway-Design, par exemple)
Dans le doute, inspirez-vous de la page d'accueil de Google et FAITES SIMPLE ! La beauté réside souvent dans la simplicité.
La couleur
La couleur n'a pas qu'une influence sur l'esthétique d'un site. Elle fait partie intégrante du design dans la mesure où elle influence la lisibilité (ergonomie et accessibilité) des pages. Elle modifie la perception de vos pages par vos visiteurs.
Les champions de la grande distribution connaissent parfaitement l'importance du "packaging" (emballage) pour la vente de leurs produits. Ce principe peut s'étendre aux Web si vous considérez votre site comme un produit. Arkantos Consulting propose une réflexion intéressante sur les "effets de la couleur des sites internet sur la mémorisation et l'intention d'achat".
ColorSelector, YoyoDesign et Iamcal : permettent de sélectionner des couleurs et de mesurer en temps réel leur lisibilité pour différents troubles de la vision (cataracte, protanopie, deuteranopie, tritanopie).
ColorDoctor et VisCheck simulent les troubles de perception de la couleur pour tout document affiché à l'écran.
Le "journal du net" propose un résumé des problèmes liés au daltonisme et des solutions pour y remédier. Il propose également plusieurs outils permettant d'effectuer des tests : Wellstyled et Snook : proposent des accords de couleurs qui préservent une bonne visibilité.
Voici également une liste de ressources liées au thème de la couleur :
- La persistance rétinienne : quelques démonstrations des effets de ce phénomène
- Le vocabulaire de la couleur : sur le site des peintures Laurentide
- Contraste et lisibilité : un bref article de Sébastien Billard qui comporte plusieurs références intéressantes
- Le chromlog : un blog consacré à la couleur !
- Colormatters : Symbolique des couleurs, émotions, effets sur le corps, sur la vision, études de cas, enquêtes... (en anglais).
Noir et blanc, mauve ou marron : Art, culture, cinéma, théatre
Bleu : Informatique, techniques du Web, high-tech, médecine, aéronautique, piscine
Jaune
: Tourisme, humour et divertissement
Rouge : Publicité, médias, politique
Vert : Natures, loisirs
Orange : Sport et divertissement
Ces choix n'ont bien entendu rien d'"officiel" et ne font que rendre compte des grandes tendances actuelles.
L'approche du CCDMD
Le Centre collégial de développement de matériel didactique (CCDMD), géré par le collège de Maisonneuve au Québec a édité en 2007 un guide du design ("Notions de design de l’interface utilisateur") comportant une section sur les couleurs de l'interface idéale.
Voici ce que nous dit cette section :
L’oeil perçoit les couleurs d’une façon particulière. Compte tenu de sa conception (cônes et bâtonnets différemment répartis), la structure physique de la rétine permet d’établir deux règles simples.- Il est préférable d’éviter le bleu saturé pour les petits textes et les petits objets.
- La couleur bleue est particulièrement intéressante pour les encadrements.
Recommandations
- Utiliser des couleurs très contrastées lorsque vous souhaitez exprimer une différence. Pour augmenter le contraste, il est possible d’utiliser des couleurs complémentaires. Par exemple, le rouge et le cyan sont des couleurs qui «vibrent» lorsqu’elles figurent côte à côte, ce qui crée un effet très désagréable.
- Le choix de couleurs peu contrastées renvoie à une certaine similarité des éléments.
- Éviter le bleu pour le texte et les petits objets.
En règle générale, l’usage des couleurs a pour fonction :
- de mettre en évidence l’information importante;
- d’indiquer un état propre à un objet dans un contexte donné;
- de regrouper visuellement des informations de même nature qui ne sont pas contiguës.
- limiter le nombre de couleurs significatives à environ sept couleurs et teintes différentes;
- respecter la signification des couleurs selon les clientèles visées.
- Éviter les fonds de couleur verts et marron puisqu’il sera difficile de trouver une couleur qui permettra de lire facilement un texte.
- Éviter l’agressivité des grandes surfaces de couleurs vives. Utiliser plutôt des couleurs peu saturées ayant une dominante vers le gris neutre et clair. Le gris est une couleur achromatique et contient toutes les couleurs. Les fonds gris sont les plus performants en termes d’ergonomie d’interface. Toutefois, ils sont souvent jugés ternes et neutres.
- Par opposition, utiliser des couleurs vives pour les petits objets afin qu’ils se distinguent plus facilement d’une grande surface neutre.
- Pour démontrer une différence, utilisez des couleurs contrastées. À l’inverse, pour démontrer des ressemblances, utilisez des couleurs peu contrastées et de même tonalité.
- L’utilisateur doit être en mesure de distinguer et de nommer facilement les couleurs qui sont à l’écran. S’il s’agit de teintes d’une même couleur et que l’utilisateur rencontre des difficultés pour les discerner et les nommer distinctement, il perdra beaucoup de temps à comprendre leur signification. Cela aura pour effet d’accroître la confusion dans la compréhension du logiciel ou du site.
Ce site vous a plu ? Visitez aussi :
et
-
