Choisir les couleurs de sa charte, une question d’ergonomie

Laisser un commentaire / Par / 11/03/2023

Dans ce premier article de la série, nous aborderons la fonction des couleurs dans une charte adaptée au numérique ✅

Contexte : Couleur et fonction

Quand il s’agit de faire un choix de couleurs d’un support web (paquetage SCORM, un LMS ou encore un blog), nous avons tendance à penser qu’il s’agit uniquement d’une question d’esthétisme. 

Or, avant d’entrer dans le débat des goûts et des couleurs, il y a plusieurs questions à se poser dans une démarche d’e-learning responsable.

La première est comment sélectionné des couleurs adaptés à une charte web. Par rapport à un support papier, un support web est interactif. Afin de faciliter la lecture fonctionnelle de votre interface, les couleurs en web ont donc une fonction pratique, elles sont vectrices d’informations.

Pourquoi est-il important de considérer la fonction des couleurs ?

Lorsque nous créons une interface web, la lisibilité de celle-ci est essentiel pour mettre en avant le contenu et alléger la charge cognitive des apprenants. Pour y parvenir, un des éléments sont les couleurs.

En respectant les normes du web ou de la zone culturelle de votre public, vous faciliterez la lecture des informations grâce au principe d’affordance.

« L’affordance, ou potentialité, est la caractéristique d’un objet ou d’un environnement qui suggère à son utilisateur son mode d’usage ou autre pratique. » (Wikipédia)

Un exemple très simple est le quiz. Quand l’apprenant répond juste l’écran de feedback lui renvoie une couleur verte, qui est associé à la réussite dans nos cultures occidentales.

Les couleurs sont vectrices d’informations et d’impression. 

Avoir une charte graphique cohérente est donc tout aussi important pour l’ergonomie de votre formation.

Comment choisir sa charte de manière cohérente et fonctionnelle ?

On distingue plusieurs natures de couleurs.

  • Couleur principale

La couleur principale est la couleur dominante, elle donne la tonalité générale de votre support. 

Vous avez sûrement déjà lu un article parlant de la signification des couleurs, ou d’une étude sur l’influence des couleurs sur notre perception ou nos comportements. La couleur principale est donc celle qui aura le plus d’influence sur vos apprenants.

  • Couleurs de fond et couleurs de police

Les couleurs de fond et la couleur de police globales vont de pair et doivent être fortement contrastées pour répondre avant tout à des critères de lisibilité. Pour un fond clair, prenez une couleur de texte foncée et vice versa.

Si nécessaire, vous pouvez avoir deux couleurs de fond (dans les mêmes tons) afin de délimiter les sections ou de mettre en exergue les informations importantes dans des encadrés.

Le troisième article de la série porte sur le choix de la couleur de fond de votre support numérique.

Sur un site, les couleurs de fond et de police du pied de page sont souvent :

  • En miroir des globales : sur un site au fond blanc, le pied de page sera donc généralement d’une couleur foncée
  • Ou bien de la même couleur, mais séparé par un élément graphique (bordure…)

Cela permet à l’utilisateur de repérer en un coup d’œil où commence le pied de page et la nature des informations qu’il va y trouver.

  • Couleurs d’action

La ou les couleur(s) d’action indique aux utilisateurs qu’elles sont les éléments interactifs (lien, bouton, étiquette à glisser-déposer…), en fonction de la complexité de vos interactions, elle peut se diviser en : 

  • Couleur primaire
  • Couleur secondaire
  • Couleur des liens si imposée

La couleur primaire, ou Call-to-action, est utilisée pour les éléments interactifs importants. Par exemple : le bouton “valider” pour valider la réponse de l’apprenant à une question. Pour bien ressortir visuellement, il s’agit souvent d’une couleur vive et complémentaire de la couleur principale.

La couleur secondaire sert pour les éléments sur lesquels on ne veut pas que l’apprenant clique de façon systématique, par exemple les boutons “Annuler”, “Supprimer” ou “Revenir en arrière”. Elle doit être plus terne que la couleur primaire et avoir suffisamment de contraste pour la différencier. Certaines applications utilisent du gris ou un camaïeu de la couleur primaire.

En général les liens reprennent soit la couleur primaire, soit un bleu médium imposé par l’application.

  • Couleurs informatives

Les couleurs « succès », “échec”, “danger/avertissement” et “info” sont des couleurs très codées servant à donner une indication sur la nature d’une information : 

  • “Succès” est généralement un vert médium ou clair.  Elle exprime une interaction réussie, par exemple si l’apprenant à bien répondu à une question.
  • « Échec” est généralement un rouge médium. Elle exprime une interaction échouée ou non aboutie, par exemple si l’apprenant à répondu incorrectement à une question.
  • “Danger” est généralement un orange ou un jaune. Elle prévient d’un risque ou d’une conséquence, par exemple “Il ne vous reste plus qu’une tentative” ou “Êtes-vous sûr de votre réponse, vous ne pourrez pas la refaire”
  • “Info” est généralement un bleu médium ou clair. Elle s’applique pour les informations complémentaires, par exemple : le bouton/icône “aide” sous forme de point d’interrogation ou “information” sous forme d’un “i”.

  • Palette de gris

Enfin, chaque support numérique est composé d’une palette de gris qui peut être utilisé pour différents usages :

  • A minima, un gris clair pour les interactions « inactives ». Par exemple, dans un paquetage, quand la navigation bloque le chapitre 2 jusqu’à ce que l’apprenant ait terminé le chapitre 1, le chapitre 2 est alors grisé.
  • Il peut y avoir un gris foncé pour certains fonds comme le pied de page ou la mise en exergue d’un paragraphe.
  • Parfois, un gris clair pour différencier plus facilement les différentes lignes d’un tableau (une ligne en blanc, une ligne en gris).
  • Et d’autres en fonction des usages.

Un exemple concret : notre blog

Pour notre blog, nous avons commencé par chercher les couleurs les plus importantes : la couleur principale, primaire et secondaire. 

Pour faire cette première recherche graphique, nous avons opté pour l’outil en ligne gratuit https://paletton.com

Pourquoi Paletton ? Car il est simple d’utilisation et vous permet de concevoir une palette de couleurs rapidement. En effet, il vous propose un assortiment de couleurs qui peuvent se combiner entre elles. Pour vous aider à comprendre son fonctionnement, cliquer ici 

Nous avons ensuite travaillé sur les couleurs de fond et de police, la couleur principale, la primaire et la secondaire.

Comme ces 5 couleurs sont les plus présentes sur le blog, il fallait qu’elles représente notre message. Nous avons sélectionné du vert qui indique tout de suite une connotation « écologique ». Nous voulions une interface sobre et focalisée sur le contenu, nous avons donc opté pour :

  • Une police noire sur fond blanc pour les contenus des articles,
  • Comme couleur principale, une couleur sombre utilisée en en-tête et pied de page pour bien tranché avec les articles et rester « sobre »,
  • La couleur primaire pour les éléments d’interaction comme le menu, les liens et le logo sur un fond vert plus vif et clair pour ressortir immédiatement et nviter à cliquer,
  • De la même manière, ainsi que pour une impression plus énergique, la couleur secondaire est orange.

Conclusion

Avant de vous poser la question de l’esthétisme, il est important de se poser sur l’aspect fonctionnel des couleurs de votre charte. Cela rendra votre interface plus ergonomique.

Utilisez les codes des apprenants (code culturel, code du web), pour faciliter la lecture fonctionnelle de votre interface, puis ajustez-les à votre image.

Les catégories de couleurs que vous aurez à sélectionner pour votre conception graphique sont :

  • La couleur principale
  • Les couleurs de fond et de police
  • Les couleurs d’actions
  • Les couleurs informatives
  • Une palette de gris

N’oubliez pas de toujours garder à l’esprit l’impression générale ou l’image de marque que vous souhaitez véhiculer.

Enfin, si vous voulez vous engagez dans une démarche responsable, nous vous conseillons de prendre en compte des critères d’accessibilité numérique et d’éco-conception. Les prochains articles de la série porteront sur ces critères.

Nos relectrices.eurs

  • Béatrice Encinas-Almodovar
  • Cécile Gros pour la version anglaise

Références et ressources complémentaires

    Laisser un commentaire

    Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

    Retour en haut