"My eyes look better in rooms with summer colors."

Si l'impact des couleurs sur le web, sur la recherche d’informations et leur mémorisation et sur la transformation est important (cela fera l'objet d'un post ultérieur) elles sont souvent difficiles à choisir et à assembler.

Aujourd'hui, un court article afin de vous faire partager une découverte :

http://colorschemedesigner.com/

Il s'agit d'un outil génial d'aide au choix de palettes de couleurs.

Colorschemedesigner.com propose en effet des assemblages de couleurs à partir d'une couleur de base.

Couleurs primaires, tertiaires, complémentaires, il existe des règles d'assemblage à respecter. C'est là que colorschemedesigner intervient et vous facilite la tâche... tout en provoquant un wow effect certain.

Comment cela fonctionne -t-il ?

L'interface et les fonctions :

La première étape consiste à choisir la couleur de départ, à partir de votre charte graphique, de vos goûts etc. sur une roue chromatique.

Ensuite il faut choisir le type de modèle à générer : monochromatique, complémentaire, tertiaire, quadruple, analogique et analogique accentué.

Un menu d'aide contextuel (show tooltips) vous aidera à choisir le modèle correspondant le mieux à votre besoin, par exemple : "Le modèle monochromatique est basé sur une seule couleur et utilise uniquement des variations de cette couleur par modification de sa saturation et de sa luminosité ; le résultat est confortable pour la vue, même avec des couleurs criardes ; cependant ce modèle ne permet pas une identification aisée des objets à mettre plus en avant."

Une fois votre couleur sélectionnée, ainsi que votre thème, vous pouvez visualiser une page type utilisant cette palette. Par exemple, pour un modèle complémentaire à partir d'un violet, en déclinaison claire et foncée, cela donne :

Une fois le résultat obtenu, il ne vous reste plus qu'à exporter votre travail. Pour ce faire vous pouvez obtenir, à l'écran, la liste de couleurs ou exporter votre palette directement en HTML + CSS, XML, texte, ACO (palette Photoshop), ou GPL (palette GIMP).

Ayant pensé à tout, le concepteur de cet outil génial a intégré un simulateur d'anomalie de vision des couleurs (dyschromatopsie) très complet gérant deutéranopie (daltonisme), deutéranomalie, tritanopie etc.

Notre même palette, vu par un daltonien donnerait donc :

Dernière chose avant de vous laisser découvrir par vous même colorschemedesigner :

La page n'est pas construite en flash mais en jquery ce qui permet un site très léger (266 ko dont 153 ko de scripts) et accessible à partir d'un Iphone.

Coup de chapeau à Peter Stanicek qui a conçu cet outil et l'optimise depuis 2002.

Ce n’est pas parce que ce n’est pas cliqué que ce n’est pas vu !

Tout d’abord rendons à César ce qui appartient à César : la formule n’est pas de moi mais de Patrick Oualid, un de mes anciens N+1. Il l’avait opposée à l’époque à une de mes analyses de CTR (Click-through rate / Taux de Clic). Son idée était la suivante : un taux de clic faible sur un élément ne veut pas dire qu’il est inutile au sein de la page ; même une page de transformation.

Il avait raison, le CTR, comme tout ratio, est une valeur relative ; un taux de clics n’est jamais bon ou mauvais, il est meilleur ou moins bon. De plus, il n'est pas suffisant pour analyser une page : une page n’est pas composée que d’éléments cliquables.

Nous avons maintenant à notre disposition des outils nous permettant d’analyser assez finement les comportements de clics et les représenter sous une forme facile à appréhender. Les heat maps, qu’elles soient générées par crazyegg ou par l’analyser d’AT internet sont de bons «outils à CoDir» en plus de représenter les zones de clics (je reviendrais sur ce point dans un post ultérieur) et l’eye tracking permet de mesurer l’attractivité des éléments constitutifs d’une page, ainsi que les schémas de déplacements visuels grâce à des sessions de tests qualitatifs.

A ce sujet, je voudrais vous présenter aujourd’hui feng-gui.com. C’est un outil jusque là expérimental, mais commercialisé depuis peu, qui permet de simuler et représenter le comportement normal d’un être humain exposé à un visuel, que ce soit une image, une page web, un email...

Concrètement, un ensemble d’algorithmes traite une image uploadée (créa, screenshot de page web…) et renvoie une heat map telle qu’elle aurait été générée par une étude d’eyetracking traditionnel ou une étude de zone de clics.

Fonctionnement :

Fen-gui va analyser les couleurs, les orientations, les densités et contrastes, les positions, les poids, les courbes, etc. de votre création et simuler la réaction normale d’un être humain pendant les 5 premières secondes d’expositions au visuel.

Avantages :

Bien évidement la rapidité et le prix qui en font un intéressant outil de «pré-test» : avant de se lancer dans de couteuses campagnes d’analyses en eye tracking (échantillonnage, recrutement, sessions, analyses...) ou de se lancer dans de l’A/B testing en prod, vous pouvez effectuer un premier filtre à peu de frais. Il suffit d’uploader une image et de valider, puis d'attendre quelques secondes le résultat que vous pouvez ensuite exporter.

Depuis peu la solution est passée payante mais reste encore très abordable (+/- 1$ par test).

L’autre intérêt est de pouvoir travailler seul : à partir de la réception de la maquette à valider, pas besoin de développeur pour de l’A/B testing, pas besoin de réunir de comité de pilotage ; vous soumettez la créa à l’outil et vous récupérez immédiatement un résultat exploitable.

Limites :

Jusqu’à présent les limites de la solution étaient surtout techniques : en dehors des critères d’analyse cités plus haut, l’outil de faisait pas la distinction entre deux textes :

LOREM IPSUM ou IPHONE OFFERT représentaient pour lui sensiblement la même chose.

Il ne faisait pas non plus la différence entre un visage en dessin ou en photo…

Maintenant que la solution est devenue payante, elle intègre la reconnaissance faciale et bientôt la reconnaissance de texte; c’est une belle avancée mais qu’en est-il des langues autres que l’anglais ? Pour les visages, arrivera-t-elle à faire le distinguo entre homme et femme, ou encore entre une femme lambda et Natalie Portman (ou encore entre George Clooney et moi) ?

Il reste donc bien entendu des optimisations possibles, mais cette solution permet à des coûts très minimes d’effectuer des pré-tests de visuels et d’ajouter un peu de démarche scientifique au «gros bon sens ».

Un petit exemple de résultat :