-

What you see...pas tout à fait

Entre l'écran et le cerveau de l'utilisateur il y a l'oeil, extraordinaire outil d'optique mais avec quelques limitations qu'il peut être utile de connaître. 

Découverte initialed'une page Web

 -

Il est naturel pour un humain (et à fortiori un designer) de penser que l’utilisateur va voir cette première image nette et colorée de la page d’accueil.

 -

Mais les nouveau utilisateur d’un site auront besoin d'un peu de temps pour comprendre une interface (même très simple), en commençant par une vision para-fovéale grise et floue !

Les yeuxDeux sortes d'informations...

 -

La vision crée une cartographie mentale de toutes les choses auxquelles nous prêtons attention.

Et, les yeux envoient deux sortes d’informations à notre cerveau :

  • Une image rapide, grand angle, de ce que nous regardons, même dans un environnement faiblement lumineux, mais flou et gris.
  • Une image lente, réduite, nette et colorée du point fixé.

Parce que fondamentalement l’œil est fait de deux parties :

  • Un dispositif optique frontal (Iris, Cornée et Cristallin)
  • Des photorécepteurs en fond (la Rétine)

Le dispositif optique frontal laisse entrer la lumière dans l’œil avec une mise au point nette seulement sur le centre de la rétine, tous les autres photorécepteurs reçoivent un signal flou.

DécodageDe la lumière

La rétine décode la lumière en informations électrochimiques pour le cerveau avec deux types de photorécepteurs :

  • Bâtonnets : très sensibles, mais ne décodant que les niveaux de gris.
  • Cônes : pas du tout sensibles (ils ont besoin de beaucoup de lumière), regroupés par trois, chacun décodant Rouge, Vert ou Bleu (oui, nous sommes des décodeurs RVB !)

Plus de 95% de notre rétine est composé de bâtonnets et une très petite partie est faite de cônes.

Par chance, les cônes sont regroupés juste en face du dispositif optique (là où le signal est net et focalisé) et près du nerf optique (car l’information de couleurs est plus compliquée à transmettre).

Ce groupe de cônes s’appelle la Fovéa.

La vision est donc un mix d’information fovéales et para fovéales envoyées à notre cerveau. Seulement de 3 à 6 % est initialement en couleurs et net.

Image mentaleSaccade et Mémoire

Mais notre cerveau ne fonctionne pas avec les images floues. Nous avons besoin d'une image précise, d'une conscience “normale” de notre environnement. Pour cela, nos yeux “pointent” divers endroits de l’écran afin d'obtenir leurs vraies couleurs et leurs contours exacts. Nous appelons cette succession de “pointages” fovéaux la saccade.

Selon la distances qui les sépare, nous pouvons “découvrir” jusqu'à 15 points par seconde, avec une moyenne de 6 ou 7. Donc, en théorie, pour découvrir notre interface dans son ensemble, nous avons besoin de (100/3) x 6 secondes = 5,5 secondes.

Dans la réalité, le saccade n'est pas régulière, nous consacrons beaucoup de temps à décider du pointage suivant, nous essayons de comprendre, de lire ce que nous découvrons sur chaque “point“ et la découverte exhaustive d'une interface simple prend souvent jusqu'à une minute.

Mais notre cerveau ne peut pas attendre et veut une image mentale utilisable immédiatement. Par conséquent, il cherche dans notre mémoire ce qu'il n’a pas encore vu et le remplace à mesure du déroulement de la saccade.

L’eXperience de l’Utilisateur commence toujours avec plus d'informations provenant de sa mémoire que de l'interface elle-même !

OptimiserLa découverte visuelle

 -

Votre cerveau est souvent intelligent, il tente d'utiliser les informations de la vision para fovéale pour comprendre la structure de l'interface, favoriser certaines parties et en rejeter d'autres.

Par exemple, nous avons :

  • A : Menu, liens ou information
  • B : Logo, manifeste ou pub
  • C : Navigation secondaire
  • D : Page/groupe de titre
  • E : Contenu de la page
  • F : Une liste de choses (titres). Sont-ils des liens ?

Nous imaginons également que nous pourrions accéder à un contenu plus complet (lire la suite ...) car nous avons quelque chose qui ressemble à un bouton en bas à droite sous l’élément de contenu.

Mais nous avons un autre bouton en bas à gauche de l'élément liste. C'est un peu déroutant :

  • Les boutons servent-ils à la même chose ?
  • Les boutons sont-ils toujours en bas ?
  • À gauche ou à droite ?

Grâce à la vision para fovéale, nous construisons une stratégie de découverte hiérarchique pour aller à l’essentiel, en un minimum de temps.

Et nous collectons généralement assez d’informations pour prendre une décision en moins de 10 secondes.

Problème de DesignerAvec la perception

En tant que designer, concevant une interface, vous avez a une vision fovéale/parafovéale, une saccade et une stratégie hiérarchique chaque fois que vous la regarder.

Mais il y a une différence fondamentale avec l’utilisateur réel.

Votre image mentale cherche des éléments dans votre mémoire et ce qu’il y a dans votre mémoire vient de ce projet.

L'image mentale de l'utilisateur cherchera des éléments dans sa mémoire et ce qu'il y a dans sa mémoire provient d'expériences antérieures sur le Web et non de votre interface !

Et vous ne pourrez jamais prédire quelle sera sa stratégie hiérarchique et l'image mentale finale avec laquelle il prendra sa décision.

Cependant, vous pouvez :

  • Toujours utiliser un outil de floutage pour vérifier la structure visuelle de l’interface chaque fois que vous la modifiez et vous assurer qu’il n’y a pas de confusions (comme par exemple l'extension UX-Blur pour Google Chrome).
  • Rencontrez des utilisateurs réels qui n'ont jamais vu votre interface et faire des tests...

Contact

UX BlurPour Chrome