La couleur en ergonomie et design UX


Lexique

Dans cette jungle de termes et concepts il est parfois difficile d'arriver à s'orienter. Qu'est-ce que c'est le design UX? En quoi il diffère de l'ergonomie? Si vous souhaitez vous éclaircir les idées, passez la souris sur les images ci-dessous. Une briève explications vous sera donnée.

example-image

Ergonomie

L’ergonomie informatique, également appelée « utilisabilité » (Usability), est la capacité d'un produit informatique à être utilisé facilement pour la réalisation de la tâche pour laquelle il a été conçu.

Ergonomie

example-image

UX design

Dans l'UX design (User Experience Design) ou design de l’expérience utilisateur la priorité est donnée à l’expérience de l'utilisateur. Il faut donc anticiper leurs attentes (en se basant sur leurs ressentis) afin de rendre l’interface ergonomique, intuitive, et facile d’utilisation.

UX design

example-image

UI design

L'UI design (User Interface) ou design de l'interface utilisateur fait partie de l’UX design. Son objectif est de donner à l’utilisateur la meilleure expérience possible. Le UI concerne particulièrement les éléments perceptibles, comme les éléments graphiques, les boutons, la navigation, ou la typographie…

UI design

example-image

Utilité

Les fonctionnalités proposées par le système informatique doivent être utiles et servir un besoin. L'interface doit servir à faire quelque chose de pertinent pour les utilisateurs cibles.

Utilité

example-image

Utilisabilité

L'utilisabilité d'un système comprend son efficacité d'utilisation, sa facilité d'utilisation et d'apprentissage, la satisfaction de ses utilisateurs et son utilisation sans erreurs.

Utilisabilité

example-image

Accessibilité

Tous les utilisateurs doivent pouvoir accéder aux informations présentées dans le site web. Pour ce faire il faut concevoir l'interface de manière que le plus grand nombre d'utilisateurs puisse accéder à ces informations, y compris les malvoyants, et les utilisateurs atteints de défauts de perception des couleurs.

Accessibilité

example-image

Responsive web design

Le responsive web design est la façon de concevoir un site web pour que son contenu s'adapte automatiquement à la largeur et/ou à la hauteur de l'écran grâce auquel il est visionné.

Responsive web design

example-image

Critères de Bastien & Scapin

Ces 18 critères ergonomiques (répartis en 8 dimensions) permettent l'évaluation de l'utilité et de l'utilisabilité d'un système informatique. Pour en savoir plus voir en bas dans la section "Bibliographie".

Critères de Bastien & Scapin

example-image

Conception centrée utilisateur

La conception centrée utilisateur (User-Centered Design) considère les besoins des utilisateurs tout au long du processus de développement. Trois phases principales (analyse, conception, évaluation), sont mises en oeuvre itérativement.

Conception centrée utilisateur


Le daltonisme

Le daltonisme (ou dyschromatopsie) est une anomalie de la vision affectant la perception des couleurs. Il prend le nom du physicien et chimiste britannique John Dalton, qui suffrait lui même de cette anomalie. Il existe plusieurs formes de dyschromatopsie : la confusion du vert et du rouge (deutéranopie), la limitation dans la vision du rouge (protanomalie) ou l'absence totale de la vision des couleurs (achromatopsie).

Découvrez comment une personne souffrant de certaines formes de daltonisme voit le monde.

The normal-blind view

The color-blind view

The color-blind view

The color-blind view


La couleur dans le design web

La couleur est très important en design centré utilisateur. Le designers qui doivent développer une plateforme qui prends en compte le daltonisme ont besoin donc se mettre dans la peau de ces personnes.

Mais combien de daltoniennes y a-t-il dans le monde ?

Approximativement un homme sur 12 souffre de daltonisme. Cela signifie que tous les 100 utilisateurs qui visitent votre site web, il y en a 8 qui peuvent voir le contenu de manière très différente par rapport à vos attentes.

Alors, comment s’assurer que tous les utilisateurs puissent profiter de votre plateforme sans obstacles ? Regardez la vidéo pour découvrir mes 4 conseils. Vous pouvez passer directement au sujet que vous intéresse en cliquant sur le bouton correspondante. Mais attention ! Des quiz ont été introduit dans la vidéo pour évaluer votre compréhension de certains sujets.



Mes conseils expliqués

#1 UTILISER MOTIFS ET TEXTURES

Les différences entre les couleurs sont extrêmement importantes pour la visualisation des données. Choisir des couleurs qui ont un faible contraste peut rendre votre graphique difficile à interpréter pour les utilisateurs daltoniens. Essayez d'utiliser différentes textures et motifs, par opposition à plusieurs couleurs, pour permettre aux utilisateurs de différencier facilement les différents segments de votre graphique. Veuillez noter dans les images ci-dessous comment les segments sont identifiables quand on utilise des textures e des motifs.

graph-patterns graphs-deuteranopia graphs-Protanomaly graphs-Achromatopsy

#2 UTILISER ICÔNES ET SYMBOLES

Les messages de réussite et d'erreur sont souvent de couleur verte et rouge respectivement. Ne vous fiez pas uniquement à la couleur pour communiquer des erreurs ou transmettre des informations. Certains types de daltonisme peuvent rendre difficile, voire impossible, percevoir des messages d’erreur rouges. Utilisez plutôt icônes et de symboles pour informer l'utilisateur qu'une erreur a été commise.

#3 SOULIGNER LES LIENS HYPERTEXTUELS

On utilise souvent la couleur ou l’épaisseur de la police pour désigner des liens. Il peut-être possible pour une personne souffrant de daltonisme de distinguer un lien du texte normal, mais ce n'est pas idéal. Une personne atteinte d’achromatopsie ne serait pas en mesure de faire la différence entre le texte et les lien et il devrait survoler le texte pour voir si le curseur se transforme en pointeur. C’est donc une bonne idée d’ajouter un soulignement aux liens. Cela facilite la distinction immédiate entre le texte normal et le lien.

#4 ASSOCIATIONS DE COULEURS À ÉVITER

Comme le daltonisme affecte les personnes de différentes manières, il est difficile de déterminer quelles couleurs sont «safe» à utiliser dans la conception Web. Néanmoins, voici une liste d’associations de couleurs à éviter car elles sont un cauchemar potentiel pour les utilisateurs daltoniens:

colours-avoid

De plus, au lieu de compter sur le noir et le blanc comme seules couleurs contrastantes; essayez d’utiliser une gamme de couleurs et de teintes clairement contrastées dans votre conception.


Évaluation

Afin de s’assurer que tous les utilisateurs, y compris les personnes souffrant de daltonisme, puissent profiter de votre plateforme sans obstacles visuels, il existe certaines astuces dont vous pouvez profiter.

Glissez et deposez les images à gauche dans la boite correspondante : les bonnes pratiques en design UX dans la boite "YES" et les mauvaises pratiques en design UX dans la boite "NO". Si vous avez des doutes, vous pouvez regarer la vidéo de la page Bonnes pratiques.




good-practices
bad-practices
links feedback colour-combinations data-visualisation


Bibliographie et ressources :


Back to Top