Élargissez votre palette en adaptant votre charte graphique aux exigences du numérique
18 juillet 2023
Aujourd’hui, il est indispensable d’adapter les couleurs de sa charte graphique pour des interfaces digitales, afin de s’adapter aux contraintes des supports et d’améliorer l'expérience utilisateur. Cependant cela peut susciter des réticences et il peut être difficile de faire comprendre l’importance et les bénéfices de cette évolution. Nous tentons de le faire dans cet article.
Certaines entreprises peuvent hésiter à adapter leur charte et ce pour diverses raisons. Elles peuvent avoir des préoccupations quant à l'uniformité de leurs supports à travers les différents canaux (print, réseaux sociaux, web), craindre de ne plus être identifiable, ou encore, avoir des contraintes techniques ou de budget.
Malgré ces possibles obstacles, il faut comprendre que cette adaptation sera bénéfique pour l’expérience utilisateur sur les interfaces de l’entreprise et donc pour l’image que la marque renverra. Il est possible d'adapter les couleurs tout en respectant l'identité visuelle. En tant que designer UI, notre travail est de trouver des solutions qui répondent aux besoins des utilisateurs et utilisatrices et aux contraintes des supports, en préservant l’identité visuelle.
Il existe de nombreuses raisons qui nous poussent à suggérer, à nos clients et clientes, d’adapter légèrement leur charte.
L’accessibilité
Les chartes pensées, au départ, pour le print ne prennent pas toujours en compte les critères d’accessibilité et de lisibilité des couleurs. Parfois certaines couleurs sont trop claires, pas assez contrastées et ne seront pas lisibles par certaines personnes ou dans certaines situations comme par exemple être en plein soleil, avoir un téléphone avec peu de luminosité... L’adaptation des couleurs doit donc prendre en compte la lisibilité du contenu pour offrir une expérience plus inclusive.
Nous nous référons aux critères WCAG (Web Content Accessibility Guidelines) pour adapter les couleurs. Ces critères comprennent des recommandations pour la luminosité et le contraste, ainsi que pour la lisibilité du texte. Les couleurs doivent être choisies de manière à fournir un contraste suffisant pour les personnes ayant une déficience visuelle, tout en étant esthétiquement agréables et en harmonie avec l'identité visuelle.
Il existe plusieurs plugins sur nos outils de conception Figma et Sketch (Stark, A11y, Cluse, Contrast…) qui permettent de vérifier ces rapports de contrastes directement sur les interfaces.
Les couleurs d’interface
Les supports numériques ont aussi des contraintes spécifiques qui demandent d'adapter les chartes en ajoutant des couleurs et en ajustant certaines.
Pour le design d’interface, un panel de couleur adapté est à prévoir en amont pour garantir une expérience utilisateur optimale et faciliter la compréhension des actions possibles :
-
des couleurs fonctionnelles qui permettront de mettre en valeur des éléments tels que des boutons, des liens.
-
des couleurs spécifiques pour indiquer les retours visuels lors des interactions, telles que les états de survol (hover), d'activation (pressed) et de désactivation (disabled) des boutons.
-
des couleurs sémantiques pour les messages d'erreur, de succès, d'information et d'avertissement.
Lorsqu’on designe des applications pour Flutter ou Android, nous suivons les guidelines Material Design (de Google). L'une des particularités de ces guidelines est l’utilisation d'une palette de couleurs étendue, comprenant des couleurs à utiliser de manière stratégique pour indiquer les actions à faire, mettre en évidence les éléments interactifs (comme expliqué ci-dessus) et pour ajouter de la profondeur et de la texture à l'interface. Là encore, il faut prévoir des couleurs supplémentaires.
Le mode sombre
Lors de l’élaboration d’un design d’application, il faut également prévoir des correspondances de couleurs pour le mode sombre, une fonctionnalité de plus en plus utilisée. Quand on est en mode sombre, ce n'est jamais agréable d'ouvrir une application qui n'a pas prévu ce mode ! Ça pique les yeux, surtout la nuit.
On va donc repenser l'utilisation des couleurs, en privilégiant des teintes plus douces, moins éblouissantes pour les yeux. Tout en assurant une cohérence graphique entre les modes clair et sombre et en préservant l'identité visuelle de la marque. En prévoyant cela, les entreprises montrent qu'elles sont à l'écoute des besoins de leurs utilisateurs et utilisatrices.
Adapter les couleurs d'une charte graphique pour un format digital est une démarche essentielle pour assurer une meilleure accessibilité et renforcer son image de marque. Bien qu'elle puisse susciter des réticences, cette adaptation est un moyen de répondre aux exigences du numérique et d'offrir une expérience utilisateur optimale.
