Ergonomie et Facteurs Humains

Eloi Duclercq /
Carole Chagniat
Juin 2017 LudoTIC
[Link]
 1 2 3 4 5 6

INTRODUCTION PERCEPTION COGNITION ACTION ERREURS CONCLUSION

[Link] I II III IV V VI
 2

PERCEPTION

Perception visuelle et traitement du signal

[Link] II
 Les sens pour percevoir l’environnement

Vue
Ouïe

Proprioception Toucher

Et après …? Odorat ?

II. PERCEPTION
[Link]
 La perception visuelle

Perception ≠ traitement du signal

Illusion de Müller-Lyer (1889)

Interprétation

Triangle de Kanitzsa (1955)

 Notre cerveau peut se tromper !

The Simpsons™ copyright by Fox

II. PERCEPTION
[Link] 5
 L’oeil

 La pupille contrôle la quantité de

lumière qui rentre dans l’oeil, en
variant son diamètre (7-8 mm 
2-3 mm).
 Les rayons de lumière traversent
le cristallin et convergent sur la
rétine. [Link]

 La rétine est le tissu du système nerveux qui tapisse le fond de l’œil.

 Les cellules nerveuses de la rétine transforment la lumière en signaux

électriques qui sont transmis au cerveau.
 Ces signaux électriques sont transmis au cerveau par le nerf optique.

II. PERCEPTION
[Link] 6
 La rétine

 La rétine, dans sa totalité, est

un disque d’environ 42 mm
de diamètre.
 La rétine centrale (la macula)
occupe un champ circulaire
d’environ 6 mm autour de la
fovéa.
 Au-delà, la rétine est dite
périphérique.

[Link]

II. PERCEPTION
[Link] 7
 Récepteurs visuels

 Cônes
▪ Sensibles aux couleurs
▪ Plus concentrés en région fovéale
▪ 6 millions par œil

 Bâtonnets
▪ Sensibles à l’intensité de la lumière
▪ Ne discriminent pas les couleurs
▪ Plus nombreux en périphérie
▪ 120 millions par œil

[Link]

II. PERCEPTION
[Link] 8
 Cônes et Couleur

II. PERCEPTION
[Link] 9
 Perception des couleurs

[Link]

 L'oeil humain est capable de voir des rayonnements dont la longueur

d'onde est comprise entre 380 et 780 nanomètres  Spectre visible
 En dessous de 380 nm  Ultraviolets

 Au dessus 780 nm  Infrarouges

II. PERCEPTION
[Link] 10
 Les 3 éléments de la couleur

 La teinte est la couleur spectrale correspondant à une longueur d’onde

unique (bleu, vert, jaune, rouge, brun…).

 La luminosité c’est schématiquement son pourcentage de blanc.

Ex : le rouge varie du rose pâle au bordeaux, le bleu du bleu ciel au bleu marine

 La saturation s’apparente à son pourcentage de gris.

L’étonnant pouvoir des couleurs, Jean-Gabriel Causse, Edition du Palio

II. PERCEPTION
[Link] 11
 Perception des couleurs

Lumière blanche Lumière rouge

Objet rouge

II. PERCEPTION
[Link] 12
 Luminance

 La luminance est la grandeur

▪ mesurable (objective) correspondant à la sensation visuelle de

luminosité d'une surface
▪ photométrique qui caractérise l'éclat d'une source étendue, c'est-à-dire
d'une source qui n'est pas perçue comme un point mais bien comme
une surface (écran de télévision, sujet d'une photographie, etc).
 Elle s'exprime en candela par mètre carré (cd.m-2).

 La luminance désigne le signal qui détermine les valeurs de contraste d'une

image, du noir le plus profond jusqu'au blanc le plus pur.

II. PERCEPTION
[Link] 13
 Recommandations concernant la luminance

14

II. PERCEPTION
[Link] 14
 Chrominance

 La couleur :

▪ correspond à l'autre partie du signal, appelée chrominance.

▪ représente les caractéristiques colorimétriques d'une image de
télévision en couleurs.

 La chrominance est un ensemble de 3 nombres, chacun représentant la

quantité de couleur primaire qu'il faut pour faire apparaître la bonne
couleur à l'écran. Ces nombres sont compris généralement entre 0 et
255.

▪ Par exemple, un signal (0;0;0) donnera du noir, et un signal

(255;255;255) du blanc. Quand les trois indications sont égales, on
aura du gris, plus ou moins foncé suivant leur valeur.

II. PERCEPTION
[Link] 15
 Luminance et Chrominance

 La luminance et la chrominance sont directement liées par l'équation :

Y = 0,3R + 0,11B + 0,59V

où R, V et B correspondent aux niveaux des 3 couleurs primaires.

 Cette formule est très importante pour le fonctionnement d'une

télévision couleur : elle permet d'alléger le signal.

II. PERCEPTION
[Link] 16
 Champ visuel

Les champs visuels des

deux yeux ne se
recouvrent que
partiellement sur un
champ d’environ 120°.

[Link]

II. PERCEPTION
[Link] 17
 Parcours du stimulus visuel

II. PERCEPTION
[Link] 18
 Parcours du stimulus visuel

Corps genouillé latéral Droit

II. PERCEPTION
[Link] 19
 Troubles du champ visuel

1. Cécité unilatérale droite

2. Cécité unilatérale droite et
hémianopsie altitudinale
supérieure gauche
3. Hémianopsie bitemporale
4. Hémianopsie latérale homonyme
5. Quadranopsie latérale homonyme
supérieure gauche
6. Quadranopsie latérale homonyme
inférieure gauche
7. Hémianopsie latérale homonyme
avec préservation de la zone
centrale
8. Déficits des hémichamps centraux
gauches

[Link]
cas_anomalies_vision/tech_explo_vision/interpretationAnomalie

II. PERCEPTION
[Link] 20
 Troubles ophtalmologiques de la vision

Principalement des troubles de l’acuité visuelle

Hypermétropie
▪ Globe oculaire trop court
▪ Les rayons convergent au-delà de la rétine
▪ Correction par lentille convexe

Myopie
▪ Globe oculaire trop long
▪ Les rayons convergent en avant de la rétine
▪ Correction avec verres concaves

Presbytie
▪ Durcissement du cristallin lié à l’âge
▪ Correction avec lentille bifocale

II. PERCEPTION
[Link] 21
 Troubles neurovisuels

 Atteintes des régions cérébrales postérieures (Lobe occipital, occipito-

pariétale ou occipito temporale)

 Lésions sous corticales (en particulier thalamique)

 Va entraîner des troubles soit sur :

▪ le champ visuel (cécité corticale, hémianospsie latérale…)

▪ la reconnaissance de l’information visuelle (agnosie)
▪ l’attention
▪ la mémoire visuelle
▪ organisation de l’espace (Syndrome de Balint, négligence spatiale latérale)

[Link]
cas_anomalies_vision/tech_explo_vision/interpretationAnomalie

II. PERCEPTION
[Link] 22
 Perception anormale des couleurs

Daltonisme = manque d’un des 3

récepteurs
 Bleu = Tritanopie (rare)
 Vert = Deutéranopie
 Rouge = Protanopie

Achromatopsie = vision en noir et blanc

Environ 8 % des hommes et 1 % des

femmes sont daltoniens !

II. PERCEPTION
[Link] 23
 Les différents types de daltonisme

- Le Vert

- Le Rouge - Le Bleu

II. PERCEPTION
[Link] 24
 Utilisation des couleurs

Avantages :
• aider à grouper les infos
• montrer les relations entre éléments
• attirer l’attention

Inconvénients :
• perturber l’exploration visuelle
• créer confusion
• perte d’info pour certains usagers

 Couleurs pertinentes à situation, usager, contexte…

 Faire Prototypes en noir et blanc
 Maximum 9 couleurs (associées à une signification)

II. PERCEPTION
[Link] 25
 Cas pratique 1 : les alarmes

Pourquoi les signaux d’alarmes

dans un cockpit sont rouges?

 Le rouge est la seule couleur

qui une fois détecté est
reconnue.

 Cônes rouge plus récent au

sein de l’évolution de l’œil.

II. PERCEPTION
[Link] 26
 Cas pratique 2 : boutons OK/KO

Que pensez-vous de ces boutons ?

 Problème physique : les personnes daltoniennes auront du mal à lire les

boutons.
 Problème technique : la couleur des boutons dépend de la configuration
de Windows. Si Windows utilise un fond vert ou rouge les 2 textes
disparaissent !
 Problème d’associations dues à la culture : vert = ok (comme pour les
feux). Est-on sûre que dans ce cas “yes” soit la réponse “ok” ?
 Problème d’arrogance culturelle : on impose des standards occidentaux !

II. PERCEPTION
[Link] 27
 Importance du contexte sur la perception

II. PERCEPTION
[Link] 28
 Une robe devenue célèbre…

Quelle est la couleur de cette robe ?

II. PERCEPTION
[Link] 29
 Fin du suspens…

 Facteurs pouvant influencer la perception :

Couleur, Brillance, Contraste, Distance, Saturation

[Link]

II. PERCEPTION
[Link] 30
 Illusions d’optique d’origine rétinienne

 2 origines différentes
▪ Rétinienne
▪ Processus corticaux

[Link]

 Ce que nos sens nous montrent ne correspond pas directement

au « réel ».

II. PERCEPTION
[Link] 31
 Recommandations concernant les couleurs (1)

 8.5.21 Chromostereopsis. High saturated colours of spectrally extreme wave lengths (like red
and blue), which produce unintended depth effects or excessive accommodation, should not be
used adjacently as texts or backgrounds in reading tasks (see ISO 9241-8, 6.7).

 9.2.14 Blue and red on dark backgrounds

a) Spectrally extreme blue should not be used on a dark background.
NOTE Spectrally extreme blue on a dark background does not usually maintain the required
luminance contrast specified in clause 5.16, ISO 9241-3. In addition, if other colors are
present (e.g., red), blue can sometimes exceed the depth-of-field of the eye.
b) Spectrally extreme red on a dark background should be avoided and should not be used on a
spectrally extreme blue background.

Like spectrally extreme blue, using spectrally extreme red makes it difficult to maintain adequate
luminance. Using spectrally extreme red on a spectrally extreme blue background may create
chromostereopsis.

II. PERCEPTION
[Link] 32
 Recommandations concernant les couleurs (2)

 [Link].9 Small areas. Users shall not have to discriminate among colors in small areas. [Source:
DOD HCISG V2.0, 1992]

 [Link].10 Coding small areas. When small areas of the display must be coded, they shall be coded
achromatically. [Source: DOD HCISG V2.0, 1992]

 [Link].1 Peripheral vision. The use of color-coding should be reserved for portions of visual displays
that will normally be in the user’s direct line of sight, and white should be used to code peripheral
signals. [Source: National Air Traffic Services, 1999; DOEHFAC 1, 1992]
Discussion. Peripheral vision is very poor at discriminating colors; therefore, only large colored
objects will be distinguished in the peripheral visual field. [Source: National Air Traffic Services,
1999]

 [Link].2 Colors in the periphery. When colors are used for items in peripheral vision (for example,
at the periphery of large screen displays), blue, yellow, black, or white should be used instead of red
and green (which should not be used for items located in peripheral vision). [Source: DOD HCISG
V2.0, 1992]

II. PERCEPTION
[Link] 33
 Recommandations concernant les couleurs (3)

 [Link].1 One meaning per color. Each color should represent only one category of displayed data.
[Source: DOD HCISG V2.0, 1992]

 [Link].9 Varying lightness. Color combinations that are similar in lightness shall be avoided (for
example, navy blue on black, yellow on white). [Source: CTA, 1996]
Discussion. Consider the effects of varying levels of saturation (color intensity) and the effects of
varying levels of lightness (amount of white mixed with color) on the ability to discriminate colors
and on color interactions. [Source: CTA, 1996]

 [Link].10 Number of levels on colored displays. Due to the relationship between brightness and color, a
maximum of two luminance levels should be used for coding on colored displays. [Source: National Air
Traffic Services, 1999]

 [Link].1 Foreground and background contrast. The foreground color should contrast highly with the
background color. [Source: DOD HCISG V2.0, 1992]
Definition. Contrast is the difference in luminance of two areas. Contrast is often represented in
terms of a contrast ratio, expressed as the ratio of foreground to background luminance (for
example, 7:1). [Source: DOD HCISG V2.0, 1992]

II. PERCEPTION
[Link] 34
 Recommandations concernant les couleurs (4)

 [Link].2 Text-background contrast. The contrast between text and its background shall be
sufficiently high to ensure readability of the text. [Source: DOD HCISG V2.0, 1992]

 [Link].3 Color foreground/background difference. In general, the color foreground shall differ from
its background by a minimum of 100 􀀧 E (CIE Yu’ v’) distances. [Source: DOD HCISG V2.0, 1992]

 [Link].4 Contrast. An adequate contrast of at least 7:1 should be maintained between foreground and
background colors to enhance color perception and perceived image resolution. [Source: CTA, 1996]
Discussion. To maximize color contrast, consider using complementary colors (yellow on dark
blue) if appropriate for the user’s task environment. [Source: CTA, 1996]

 [Link].5 Contrast in dim lighting. The contrast should be increased if the screen will be viewed under
dim lighting conditions. [Source: CTA, 1996]

 [Link].6 Achromatic background. A medium achromatic background (for example, dark or medium
gray) should be used to maximize the visibility of foreground colors. [Source: CTA, 1996]

II. PERCEPTION
[Link] 35
 Mouvements oculaires

 Les mouvements de nos yeux sont les plus rapides de notre corps
(1000°/sec).
 La durée « normale » d’une fixation est de 150-200 msec.

 En 1 sec. notre cerveau traite en moyenne 5 informations différentes.

Gagner une demi-seconde permet

d’avoir « 2 mots d’avance » !

II. PERCEPTION
[Link] 36
 Champ visuel

 Région fovéale (2° d’angle visuel ou 4 caractères)

 Région parafovéale (10°)
 Périphérie (le reste)

VOICI UNE PHRASE POUR MESURER L’ACUITE VISUELLE

Mot en Zone parafovéale

position fovéale

II. PERCEPTION
[Link] 37
 La recherche d’information sur écran

 Comportement assimilable à la « résolution de problèmes » car on a :

▪ un objectif
▪ des moyens à exploiter

▪ des stratégies à adopter et à faire évoluer

 L’analyse des mouvements des yeux rend compte des différentes

stratégies adoptées.

II. PERCEPTION
[Link] 38
 The « F pattern »

Article de Nielsen en 2006

[Link]

II. PERCEPTION
[Link] 39
 Variété des patterns

 Le comportement visuel est stratégique… cela ne peut pas produire

systématiquement le même pattern !

II. PERCEPTION
[Link] 40
 Exploration visuelle

Dans les faits, l’exploration est :

 Non linéaire

 Guidée par les buts

 Peu attirée par le texte

 Attirée par :
▪ Couleurs
▪ Images
▪ Visages
▪ Titres
▪ Liens…

II. PERCEPTION
[Link] 41
 Yarbus

II. PERCEPTION
[Link] 42
 Organisation visuelle

Lois de la Gestalt

proximité similarité fermeture continuation symétrie

 Le tout a des propriétés globales autres que

celles issues de la somme de ses parties.

II. PERCEPTION
[Link] 43
 Application des principes d’organisation visuelle

Original Basé sur Gestalt

II. PERCEPTION
[Link] 44
 Application des principes d’organisation visuelle

Sans séparateurs Avec séparateurs

II. PERCEPTION
[Link] 45
 La perception structure la compréhension

BOUTONS OU TITRES ??

II. PERCEPTION
[Link] 46
 Sémiologie graphique

 Signification des dessins

 Choix des légendes, des symboles,

des icônes

 Formalisation par Jacques Bertin

(Cartographe)

[Link]

II. PERCEPTION
[Link] 47
 Le choix des caractères

 La lecture sur écran n’est pas plus lente, elle elle est différente.

 La taille nécessaire pour une

bonne lisibilité dépend du
support utilisé :

Distance Taille caract.

 50 cm 0,25 cm (Mobile)
50-90 cm 0,5 cm (PC)
90-180 cm 0,9 cm
180-360 cm 1,8 cm
360-600 cm 3 cm

 Une police sans empattement

(sans serif) sera à privilégier.

II. PERCEPTION
[Link] 48
 Recommandations sur la taille des caractères

[Link].10 Character width. The ratio of character height to

width shall be
a. 1:0.7 to 1:0.9 for equally-spaced characters and
lines of 80 or fewer characters,
b. at least 1:0.5 if it is necessary to have more than
80 characters per line, or
c. as much as 1:1 for characters such as M and W for
proportionally spaced characters. [Source: DOD
HCISG V2.0,1992]
[Link].11 Character luminance. In a monochromatic
display, the variation of a peak luminance of character
elements (dots or strokes) should not exceed a ratio of 1.5:1
within a character. [Source: National Air Traffic Services,
1999]
[Link].12 Character contrast. For optimum legibility,
character contrast should be between 6:1 and 10:1. [Source:
National Air Traffic Services, 1999]
Discussion. Legibility may diminish with contrasts
below 3:1, whereas contrasts above 15:1 may cause
visual discomfort. [Source: National Air Traffic
Services, 1999]
[Link].13 Adjustable contrast. Contrast should be adjustable
to compensate for ambient lighting conditions. [Source:
National Air Traffic Services, 1999]

II. PERCEPTION
[Link] 49
 Merci de votre attention !

Eloi Duclercq /
Carole Chagniat
Juin 2017 LudoTIC
[Link]