Pourquoi évaluer les écrans en nuances de gris ?

Tout d’abord merci à tous pour les questions posées par comment, twitter ou email. Je prendrai le temps de traiter, par un article adapté, les demandes qui peuvent intéressé la communauté des professionnels de l’expérience utilisateur.

Dushan (http://www.ressources-marketing-internet.com/), que je remercie, souhaite avoir des précisions sur la pertinence de l’analyse d’un écran en nuances de gris.

Lorsqu’un utilisateur parcoure un site web son système visuel est très important puisque sans lui le cerveau ne recevrait aucune information de l’écran présenté dans le navigateur.

Les informations visuelles pénètrent dans l’oeil et sont réceptionnées par des capteurs sur la rétine de l’oeil. Il y a deux grands types de capteurs : les cônes et les batonnets.

Dans la rétine il y a environ 125 millions de batonnets pour 5 millions de cônes. Si les cônes sont de 3 types (rouges, verts et bleus), les batonnets sont d’un seul type et ne permettent de voir qu’en nuances de gris.

Voici donc une première raison pour laquelle l’analyse d’un écran en nuances de gris est importante : moins de 1% des récepteurs sont capable de traiter les couleurs.

Les batonnets sont également responsables de capter la luminosité des différentes zones d’une pages web présentées sur l’écran : les contrastes. En fait lorsque l’on parle de “contraste”, on fait référence à des variations d’intensité lumineuse. Les bâtonnets sont majoritairement dans la zone de vision périphérique.

99% des capteurs de l’oeil (bâtonnets) traitent les informations d’une page web en nuances de gris.

1% des capteurs (cônes) qui traitent les couleurs sont rassemblés en majorité dans une zone appelée Fovéa, seuls quelques cônes sont situés en vision périphérique.

Sur un écran 1024, en simplifiant, un oeil voit net (vision fovéale) sur 7% de la largeur de la page. Cette zone nette contient presque exclusivement des capteurs traitant les couleurs.

Les autres 93% de la page sont vue avec beaucoup de bâtonnets et peu de cônes. Donc les couleurs perdent leurs vivacités et la vision devient de plus en plus floue au fur et à mesure que l’on s’écarte de l’endroit où l’oeil regarde.

Si on résume :

La majorité de l’écran est vue de manière floue, en perdant progressivement des informations sur les couleurs au profit des nuances de gris. Voilà la raison pour laquelle analyser les écrans en nuances de gris est important.

Un exemple sur le design de notre nouveau site qui sortira dans quelques semaines :)

Button

Le bouton “View Case Study” est important, sera-t’il vu?

Screen - Grayscale

Commençons par l’analyse des bâtonnets (nuances de gris) : en fixant chacune des croix placées dans l’écran, le bouton est facilement visible par son contraste en nuances de gris.

Peripheral Vision - Grayscale

En simulant la vision périphérique sur une des croix, le bouton reste très visible même flou.

Screen - Colors

Continuons maintenant avec l’analyse des cônes (couleurs) : en fixant chacune des croix, l’information colorimétrique vient renforcer le contraste en nuances de gris du bouton.

Peripheral Vision - Colors

En vision périphérique, le bouton est très bien visible.

Conclusion :

– Bâtonnets : OK
– Cônes : OK

Si je veux donner une priorité visuelle à un bouton plus qu’à un autre, J’utilise les mêmes principes pour diminuer l’importance visuelle des éléments “Interested” et “Stay tuned !” en diminuant la saillance en nuances de gris et en ne mettant aucune couleur.

A vous de jouer !

Submit a Comment