Les informations d'un écran sont transmises à l'utilisateur via son oeil. Une bonne connaissance de la psychologie cognitive peut vous aider à créer et améliorer des interfaces plus efficaces.

Par exemple, la découverte d'une page est basée sur :

• La vision fovéale et parafovéale
• Le rythme
• La gestalt
• L'image mentale

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 web auront besoin de 50 secondes pour comprendre cette interface simple, en commençant par une vision parafovéale grise et floue !

Au travers des yeux...

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’oeil est fait de deux parties :
• Un dispositif optique frontal (Iris, Cornée et Cristalin)
• Des photorecepteurs en fond (la Rétine)

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

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’appele la Fovéa.

La vision est donc un mix d’information fovéales et parafovéales envoyées à notre cerveau. Seulement 3% est en couleur et net.

Image mentale, saccade 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. 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 plus de 50 secondes. 
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 !

Optimiser la découverte

Votre cerveau est intelligent, il utilise la vision parafovéale pour comprendre la structure de l'interface, favoriser certaines parties et en rejetter 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 parafové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 5 secondes.

Problèmes de designers avec 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 cherche 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 ...