La couleur compte parmi les variables les plus importantes à manipuler sur une interface. Des sites aux réseaux sociaux en passant par les applis, notre rapport au temps varie selon notre perception de l’esthétique colorée choisie par les designers de telles interfaces. Les humeurs et les émotions ressenties grâce à la charte graphique entraînent des comportements variés selon notre ressenti ou selon les « Like » postés par nos pairs, qui peuvent être contrôlés pour aboutir à plus d’engagement. Des clés de compréhension et des outils existent pour gérer tous ces contrastes de couleurs dont certains sont présentés ici.
Chez l’homme, 90 % des informations sont transmises par la vue. Dans le monde de l’immobilier, l’acte d’achat est déterminé (et déterminant), dans les 90 premières secondes. Le coup de cœur est immédiat… ou n’est pas. Or la couleur s’impose comme un élément essentiel de l’interface d’un site web. Son attrait visuel étant évalué en 50 ms (1/20 seconde), les concepteurs de sites web ont environ 50 ms pour faire une bonne première impression (Lindgaard, Fernandes, Dudek et Brown, 2006). Mais son importance se prolonge-t-elle dans la durée ? À quoi sont dus ces jugements esthétiques ? En quoi le visuel touche-t-il l’émotionnel ?
La couleur, simple effet d’exposition ou habitude de certaines couleurs ? – En élargissant aux applications et aux réseaux sociaux, aux programmes, infographies et autres contenus lus à l’écran, étant donné le temps passé dans la journée sur ces interfaces, il est aisé de comprendre l’importance de procurer une bonne première impression aux visiteurs, lecteurs et autres consommateurs. Mais est-ce que ces jugements esthétiques constituent un simple effet d’exposition, où l’on accorde une évaluation positive à des personnes que l’on voit régulièrement, des mélodies que l’on connaît, des marques commerciales, des couleurs auxquelles on s’habitue, ou est-ce que ces jugements esthétiques reflètent plutôt notre inconscient et ce qui nous plaît vraiment ?
L’affect à l’origine de nos comportements – Il existe beaucoup d’autres raisons que l’esthétique qui affectent la satisfaction des utilisateurs, jouant sur nos humeurs et sur nos émotions (Pelet, 2010), et qui entraînent des réponses variées en termes de mémorisation et d’intention, que ce soit d’acheter, de revenir sur un site, ou de le recommander sur des réseaux sociaux par exemple (Pelet et Papadopoulou, 2012). Les utilisateurs d’interfaces décident très rapidement s’ils aiment une page web ou tout autre contenu qu’ils visitent. Cette raison permet d’expliquer pourquoi autant de sites utilisent le bleu, couleur préférée de 8 habitants de la Terre sur 10. C’est aussi la couleur la plus utilisée pour les identités visuelles d’entreprise. Le bleu étant la couleur la plus complexe au niveau de sa signification et au XIIème siècle, la vierge devient le principal agent de promotion du bleu comme le rappelle Michel Pastoureau, historien spécialiste de la symbolique des couleurs. La vitesse à laquelle les utilisateurs forment des jugements de valeur sur les pages web empêche beaucoup de réflexion cognitive, qui se résume à la capacité – ou disposition – à résister à la première réponse qui vient à l’esprit lors de la résolution de problèmes.
Plus d’émotions donc plus de mémorisation – Ce clivage entre raison et émotion, sur lequel reposaient toutes les sciences jusqu’aux années 90 est remis en question avec les docteurs Damasio et Ledoux, qui montrent dès 1994 que notre cerveau n’utilise en fait que les émotions pour se faire une première impression (Lotstra, 2002). Damasio explique que les émotions nous permettent de hiérarchiser les informations. Ledoux montre que lorsqu’il s’agit de réagir très rapidement, une voie ventrale dans le cerveau au niveau amygdalien permet de donner l’ordre au corps d’agir, avant même que la personne ait eu le temps rationnel d’analyser l’information.
Récemment, une étude a examiné l’effet de « Like » sur les réponses neuronales et comportementales des jeunes ayant présenté leurs photographies. Des lycéens et collégiens ont regardé leurs photos et d’autres photos sur Instagram pendant qu’ils subissaient une imagerie par résonance magnétique fonctionnelle (IRMf, de l’anglais functional Magnetic Resonance Imaging – fMRI).
Les participants ont plus souvent aimé les photos qui semblaient avoir reçu beaucoup de Like sur leurs photos (Sherman, Greenfield, Hernandez et Dapretto, 2018). Ceci nous amène à l’effet procuré par la vue du nombre de « Like », quelle que soit la représentation (un nombre, un pouce, une étoile ou un cœur…), qu’ils apparaissent sur une photo ou sur le fond d’une page. Le contraste occasionné par la couleur d’un réseau social (Instagram rouge ou Facebook bleu pour reprendre les plus en vogue) sur une page web ou un autre support qui les accepte, joue en faveur de ce qui compte pour les marketeurs : faire percevoir pour mémoriser et entraîner des intentions chez le consommateur. Intention chez le consommateur d’acheter, de recommander ou de revenir…
Un design d’interfaces colorées qui ne cesse d’évoluer – L’évolution du design web aboutit aujourd’hui à une image en plein écran sur la page d’accueil contenant un minimum de texte. Celle-ci augmente l’engagement et rend le site plus visuel et interactif. Au-delà de la première impression offerte par l’interface, des éléments doivent être pris en considération pour une bonne composition. Le bon choix des images, des vidéos, des typographies, de la mise en page ou des couleurs devient dès lors prépondérant. Ce choix représente principalement le message qu’un marketeur, responsable de compte « digital », ou une marque veut faire passer auprès des utilisateurs. Ces composantes constituent la charte graphique – ou atmosphère – de ces sites, programmes, applications et autres réseaux sociaux. L’atmosphère du site permet d’appréhender les réactions émotionnelles, cognitives, psychologiques, physiologiques et comportementales des utilisateurs par la modification d’une de ces composantes. L’évolution graphique des sites web reste constante depuis les premières pages aux bannières clignotantes des années 90 à nos jours. Les utilisateurs ont tour à tour vu des éléments « glossy » (brillants) apparaître, des designs faits de texture, des ornements ou des illustrations vectorielles. Sont arrivées par la suite des interfaces minimalistes, ou basées sur les fontes puis sur l’ingéniosité de la barre de navigation.
L’apparition du « Responsive Web Design » (RWD) avec le développement des mobiles, a obligé les designers à penser au même contenu multi écrans dans une logique de vision client à 360°. Puisque la mise en page de la page web devient « liquide » et « flexible » grâce à une grille qui s’adapte automatiquement à la fenêtre de n’importe quel écran, la structure exacte de la mise en page ne constitue plus un élément qui peut être utilisé pour maintenir l’identité du site web. L’utilisation d’images et d’éléments de conception pouvant être modifiée à l’aide des requêtes de médias CSS et du langage de script tout en conservant l’essence des caractéristiques visuelles du site est essentielle à la réussite d’une conception web responsive. C’est pourquoi le skeumorphism, présentant de véritables objets sur un écran plat, a peu à peu laissé la place au flat design. La couleur demeure ainsi l’élément différenciant de l’interface, quel que soit le support (Pelet et Taieb, 2017). Pour rappel, les feuilles de style en cascade (CSS pour Cascading Style Sheets) forment un langage informatique qui décrit la présentation des documents HTML et XML. Les standards définissant les CSS sont publiés par le W3C. Enfin, le langage de script permet de manipuler les fonctionnalités d’un système informatique configuré pour fournir à l’interpréteur de ce langage un environnement et une interface qui déterminent les possibilités de celui-ci.
Le contraste coloré pour plus de convivialité et une meilleure expérience utilisateur – Les couleurs monochromatiques sont de plus en plus utilisées au sein des interfaces. Cela signifie que les concepteurs, au lieu d’utiliser de nombreuses couleurs différentes, utilisent des couleurs de la même « famille » afin de garder l’accent sur le contenu et ne pas être trop agressifs pour le visiteur. On s’attache ainsi davantage à l’utilisabilité (Sreedhar, 2018) et au contraste coloré entre les deux principales couleurs que ce soit dans le cadre du e-commerce (Pelet, 2014) que du m-commerce ou mobile commerce (Pelet et Taieb, 2018). Le point commun de ces travaux étant de respecter au maximum les contraintes du consortium W3C permettant la mise en place de règles favorables à l’UI (pour Interface Utilisateur), comme le respect d’un contraste de 7,28 entre les deux couleurs évoquées comme le montre cette capture d’écran ce qui est utile pour les 8 % d’hommes daltoniens dans le monde – pas de problème de daltonisme chez les femmes, ou pour les personnes dont la vue faiblit, soit toutes les personnes de plus de 45 ans, de plus en plus nombreuses…, qui accèdent de manière croissante aux interfaces pour lire, consommer ou pour toute autre chose.
Pour cela, des outils simples d’utilisation sont mis à la disposition des utilisateurs, des webdesigners, des marketeurs…, permettant d’obtenir un contraste positif (texte foncé sur fond clair), préféré pour la lisibilité par exemple (Greco, Stucchi, Zavagno et Marino, 2008).
De la culture aux facteurs d’influence exogènes en passant par le positionnement géolocalisé : tout ce qui peut varier les couleurs des écrans – Sur un site web ou sur une application, quelle que soit le support, ordinateur, tablette ou mobile multifonction (pour ne plus dire smartphone), l’interface représente la charte graphique, composée de deux couleurs, la couleur d’avant plan (foreground) ou « couleur tonique » ou « dynamique » d’après les webmasters, et la couleur d’arrière-plan (background), qui est la « couleur dominante ». La couleur représente ainsi la variable prépondérante dont on se souvient lorsqu’on utilise un écran et qui va aider à transformer un visiteur en consommateur, devenant un levier d’acquisition primordial. Son rôle consiste à véhiculer du contenu tout en apportant clarté et ergonomie pour l’aspect pratique. La rapidité d’affichage renforce l’accessibilité de la page. L’esthétique évoquée en début d’article est elle aussi principalement véhiculée par la couleur et l’utilisation qui en est faite.
Les prochaines avancées de la couleur pour le design d’interfaces montreront une adaptation de la charte graphique du site web et de l’apps aux émotions de l’utilisateur tenant le mobile multifonction, par la température de sa main, sa sudation et son rythme cardiaque, tout en s’adaptant à ses envies. Elles prendront aussi en considération le contexte c’est-à-dire l’environnement où se trouve l’utilisateur, et adapteront l’interface à la luminosité ambiante grâce à la cellule photo de l’appareil, à la température aussi. On ne tient pas ce mobile de la même façon quand il fait très froid, que lorsque la chaleur devient intenable.
Enfin, la position géographique pourra aussi indiquer aux marques à qui elles ont à faire, sur un plan culturel, et afficher les couleurs correspondant aux préférences de couleurs, selon la culture… elles sont infinies. Les couleurs chaudes sont par exemple préférées sur un site web dans les pays chauds, et les couleurs froides dans les pays froids, de même que les Chinois se marient en rouge, symbole de joie et de bonheur, tandis que les Japonais trouvent cette couleur apaisante. Beaucoup de pistes pour améliorer la conception des sites web et des applications, en partie grâce à la couleur.
