THÉORIES GÉNÉRALES DE

L’ERGONOMIE
Enseignante : Rim Mahouachi
DÉFINITION : ERGONOMIE
L'ergonomie informatique
est la capacité du produit informatique à être
facilement utilisé par une personne pour réaliser la
tâche pour laquelle il a été conçu.
englobe :
la performance de réalisation de la tâche
la satisfaction que procure l'utilisation du logiciel
la facilité avec laquelle on apprend à s'en servir
Ergonomie = Utilité + Utilisabilité
L'utilité : la capacité de l'objet à aider à la réalisation
d'une activité humaine.
L'utilisabilité : représente la facilité d'emploi de l'objet 2
DÉFINITION : ERGONOMIE
Utilisabilité : norme ISO 9241
degré selon lequel un produit peut être utilisé, par des
utilisateurs identifiés, pour atteindre des buts définis dans
un contexte d’utilisation spécifié avec efficacité, efficience et
satisfaction
Critères de l’utilisabilité
efficacité : atteinte du résultat prévu
efficience : consommation d’un minimum de ressources
satisfaction de l’utilisateur : confort et évaluation subjective
facilité d’apprentissage, d’appropriation : prise en main du
logiciel
facilité d’utilisation
fiabilité : pas ou peu d’erreurs d’utilisation 3
DES THÉORIES SCIENTIFIQUES POUR L’ERGONOMIE
Comment évaluer l’ergonomie d’une application ?

4
DES THÉORIES SCIENTIFIQUES POUR L’ERGONOMIE
Comment évaluer l’ergonomie d’une application ?

5
DES THÉORIES SCIENTIFIQUES POUR L’ERGONOMIE
Comment évaluer l’ergonomie d’une application ?
Avis : C’est nul, c’est moche, ça pique les yeux
Pas très constructif ..

Théories scientifiques
Mémoire
Perception, lecture à l’écran
Accès, localisation
Décision
Couleur, texte

6
TEST DE MÉMOIRE 1
Matériel requis
une feuille et un stylo

Consigne
15 mots vont être affichés à l’écran, chaque mot va rester 2
secondes avant de laisser sa place à un nouveau

Règles
Vous devez retenir le maximum de ces mots
Mais ne prenez aucune note lorsque la vidéo passe !!
Une fois la vidéo terminée, vous avez une minute pour
restituer sur votre feuille les mots que vous avez mémorisé 7
TEST DE MÉMOIRE 1
Calculez votre score ! Qu’en pensez vous ?

8
TEST DE MÉMOIRE 2
Matériel requis
Aucun

Consigne
Vous devez au début regarder une image pendant 10
secondes
Ensuite, retenir un numéro qui sera affiché pendant 10
secondes
Et répondre aux 2 questions qui seront posées

9
Ex1 : Regardez cette photo pendant 15 secondes

10
 Ex2: Retenez bien ce numéro

12753469186027
11
Q1 : Quels sont les 3 détails manquants ?

12
pag
e
13
 Q2 : quels chiffres manquent ?

127534?9
9?86027
14
 Q2 : réponse !

12753469
9186027
15
Que faut-il
il retenir de ce test ?

16
TEST DE MÉMOIRE 3
Matériel requis
Aucun

Consigne
Vous devez retenir un numéro qui sera affiché pendant
10 secondes
Ensuite, répondre à 1 seule question

17
 Retenez bien ce numéro ..

12 75 34 69 18 60 27

18
 Quel chiffre manque ?

12 75 ?4
4 69 18 60 27

19
Que faut-il
il retenir de ce test ?

20
MÉMOIRE ET APPRENTISSAGE

21
MÉMOIRE À COURT TERME
Caractéristiques
mémorisation 7 items (± 2 selon individu, fatigue...)
Regroupement des unités d’information par motifs
motifs visuels
lettres, chiffres, mots
formes, taille
couleur, localisation
motifs acoustiques
Son de début, rime, ..
recherche séquentielle
oubli : 15 à 30 secondes
remise à zéro si sensation que la tâche est terminée 22
MÉMOIRE À LONG TERME
Caractéristiques
capacité infinie
durée de stockage illimitée
accès associatif

Conséquences
favoriser la répétition
S’appuyer sur les éléments constants et les points
communs
logiciel à utilisation fréquente ≠ logiciel à utilisation
par intermittence
23
NOMBRE MAGIQUE DE MILLER

Empan mnésique:
désigne le nombre d'éléments (en
général des chiffres) que l'on
peut restituer immédiatement
après les avoir entendus.

correspond approximativement au nombre maximal d’éléments qu’est capable de

traiter l’esprit humain. (George Armitage Miller)
24
NOMBRE MAGIQUE DE MILLER

25
NOMBRE MAGIQUE DE MILLER
Etablir des liens entre les éléments de même nature:

les regrouper en sous-groupe

groupe de manière à ne
dégager que 2 à 4 grands groupes

couleurs, formats, emplacement

26
LOI DE HICK
Principe :
le temps nécessaire pour prendre une décision
augmente en fonction du nombre d’alternatives
possibles.
C’est-à-dire
dire que plus le choix est varié et grand, plus la prise
de décision est longue.

Solution :
Limiter le nombre d’actions possibles sur les pages critiques
pour maximiser le taux de conversion
Etre concis et ne pas proposer trop de choix d’un coup
27
LOI DE HICK
Exemple1 : site e-commerce,
Plusieurs produits proposés

28
 LOI DE HICK
Exemple1 : site e-commerce,
aider l’utilisateur à cibler sa demande => diminuer le nombre de résultats
affichés (navigation par filtres)

options à cocher afin

de préciser sa requête
notamment (couleurs,
tailles, marques etc.)

29
LOI DE HICK
Exemple1 : site e-commerce,
aider l’utilisateur à cibler sa demande => diminuer le nombre de résultats
affichés (navigation par filtres)

tri d’affichage (par prix, par popularité etc.)

30
LOI DE HICK
Exemple 2

31

IHM initiale de Expedia.ca

LOI DE HICK
Exemple 2

32
IHM optimisée en fonction de la loi de Hick
PRINCIPE DES 2 SECONDES
Principe
ne pas attendre plus de 2 secondes la réponse du système

Risques
l’utilisateur peut relancer l’action
bugs ou messages

Solutions
actions rapides
Indication d’action effectuée / en cours

33
34
PRINCIPE DES 3 CLICS
Principe
L’information souhaitée doit être accessible en 3 clics (web)
Risques
l’utilisateur peut abandonner la tache / l’application
Solutions
Rendre les actions importantes accessibles directement ou
au moins rapidement
Limiter la complexité de chaque clic.

35
SYNDROME DE L’OISILLON
Ce syndrome décrit la tendance naturelle des utilisateurs
à adhérer au premier type d'interface expérimenté, et à
juger les autres en fonction de leur degré de similarité avec
le premier.
Conséquence : les utilisateurs préfèrent en général les
systèmes auxquels ils sont habitués et rejettent ceux qui ne
leur sont pas familiers (nouvelles applications, nouvelles
versions, ..).
Solution :
évolution dans la cohérence
Accompagnement au changement
36
SYNDROME DE L’OISILLON

37
LE CONCEPT D’AFFORDAN
NCE

C’est la capacité d’un objet à suggérer son utilisation.

Risques
Manque d’affordance : hésitation

Solutions
Aide à distinguer ce qui est non / cliquable
Inciter l’utilisateur à interagir
Forme, libellé, couler ..

38
LE CONCEPT D’AFFORDAN
NCE

39
LE CONCEPT D’AFFORDAN
NCE
Manque d’affordance Améliorations

40
LE CONCEPT D’AFFORDAN
NCE

Manque d’affordance

interface de déverrouillage IOS 6 et IOS 7

41
LA THÉORIE DE LA GESTALT

42

Qu’est ce que c’est ?

LA THÉORIE DE LA GESTALT

43

Combien de pattes a l’éléphant ?

LA THÉORIE DE LA GESTALT

44

Combien de pattes a l’éléphant ?

LA THÉORIE DE LA GESTALT

Ce sont des principes selon lesquels notre

perception des formes peut être altérée
grâce à une variation ou à un arrangement
sur l’image

Elle postule que la complexité visuelle de

notre environnement oblige le cerveau à
l’ordonner et le simplifier afin de lui donner
une structure signifiante.
signifiante
45
LA THÉORIE DE LA GESTALT
L’œil humain perçoit les objets dans leur intégralité
avant de les appréhender comme éléments individuels

46
LA THÉORIE DE LA GESTALT
L’œil humain perçoit les objets dans leur intégralité
avant de les appréhender comme éléments individuels

Les gens perçoivent toujours l’intégralité de votre site en

premier. C’est seulement dans un second temps qu’ils
vont percevoir la bannière d’en-tête,
d’en le menu, le pied de
page et ainsi de suite.

4 principes de base
6 lois

47
LA THÉORIE DE LA GESTALT – PRINCIPES
Émergence
L’identification d’un objet se fait par comparaison avec
des formes qui nous sont familières.

48
LA THÉORIE DE LA GESTALT – PRINCIPES
Multistabilité
Si l’objet a plus d’une interprétation, on en identifiera un à la fois mais
jamais les deux simultanément

49
LA THÉORIE DE LA GESTALT – PRINCIPES
Multistabilité

50
LA THÉORIE DE LA GESTALT – PRINCIPES
Réification
L’esprit comble le vide des éléments manquants pour reconstituer un
tout

51
LA THÉORIE DE LA GESTALT – PRINCIPES
Invariance
C’est la capacité qu’on a à reconnaitre un objet malgré une déformation
ou une modification dans la perspective, l’angle ou l’échelle d’un objet

52
PARÉIDOLIE

53

Cela illustre assez justement la vision Gestaltiste de notre perception

GESTALT – LOI DE LA BONNE FORME (OU
PRÉGNANCE)

Loi principale dont les autres découlent

Un ensemble de parties informe (comme des

groupements aléatoires de points) tend à être perçu
d'abord comme une (bonne) forme

54
GESTALT – LOI DE LA PROXIMITÉ
Principe : Les gens regroupent d’abord les objets les plus
proches dans l’espace.
Si des éléments sont trop proches les uns des autres, ils seront
perçus comme un seul et même objet.

Risques : associer des concepts / actions opposés 55

GESTALT – LOI DE LA PROXIMITÉ
Solution :
rapprocher les éléments similaires : certains éléments doivent
être regroupés (menu, pied de page, etc.) pour montrer qu’ils font
partie du même ensemble

56
GESTALT – LOI DE LA PROXIMITÉ
Solution :
rapprocher les éléments similaires : certains éléments doivent
être regroupés (menu, pied de page, etc.) pour montrer qu’ils font
partie du même ensemble

éloigner les éléments différents : s’assurer que les éléments

n’appartenant PAS au même groupe ne soient pas perçus comme un
objet unique.

57
GESTALT – LOI DE LA PROXIMITÉ
Mauvais exemple :

Quel item le bouton du milieu sélectionne-t-il

sélectionne ?

58
GESTALT – LOI DE SIMILITUDE (OU
SIMILARITÉ)

Principe:
Lorsque la distance entre les différents
objets ne nous permet pas de les distinguer,
on a alors tendance à regrouper les plus
similaires entre eux (forme ou couleur
similaire ou d’autres caractéristiques).
caractéristiques) La loi de similitude par la taille fait que l’on
perçoit deux types d’objets

59

La loi de similitude par la forme fait que l’on La loi de similitude par la couleur fait que
perçoit deux types d’objets l’on perçoit deux types d’objets
GESTALT – LOI DE SIMILITUDE
Risques
confondre les objets ressemblants
Solution
associer des points communs aux éléments similaires

Exemple 1 :

60
 GESTALT – LOI DE SIMILITUDE
Exemple 2 :

Au survol de la souris, le
bouton pour choisir et
acheter un produit prend la
même couleur que l’iPod
correspondant.

Ainsi même si le bouton est

éloigné du produit désiré,
l’utilisateur voit sans
hésitation qu’il a choisi le
bon iPod.

61
GESTALT - LOI DE CONTINUITÉ
Principe
Des points rapprochés tendent à représenter des
formes lorsqu'ils sont perçus, nous les percevons
d'abord dans une continuité, comme des prolongements
les uns par rapport aux autres.
Cela permet d’encourager le regard à suivre un tracé.

62
GESTALT - LOI DE CONTINUITÉ

63
GESTALT - LOI DE DESTIN COMMUN
Des parties en mouvement ayant la même
trajectoire sont perçus comme faisant partie de la
même forme

Les éléments d’un menu ayant la même trajectoire 64

lors du déroulement de ce dernier appartiennent à
un même ensemble
GESTALT - LOI DE DESTIN COMMUN

http://www.ilovechablis.net/

65
Les éléments interactifs partent dans tous les sens ce qui ne facilite pas
la lecture et nous perd complètement. (site: http://www.ilovechablis.net/)
GESTALT – LOI DE CLÔTURE

Principe
Notre cerveau cherche à interpréter les éléments perçus
comme un tout cohérent et complètera les formes vues
partiellement.

66
GESTALT – LOI DE CLÔTURE

67
 GESTALT – LOI DE CLÔTURE
Exemple : les logos avec des espaces négatifs
Espace négatif ?

68

https://justcreative.com/web/negative-space.pdf
 GESTALT – LOI DE CLÔTURE
Exemple : les logos avec des espaces négatifs
Un logo avec espace négatif (ou concept de fond forme) est
un design qui utilise l’arrière-plan
l’arrière d’une image pour créer
une autre image.

Nominé « Meilleur logo » et aussi

gagnant de nombreux prix de
design, ce logo diffuse clairement
les attributs dynamiques (flèche
blanche entre le E et le x) de la
compagnie de livraison.

69

Source: https://portfolio.lotincorp.biz/espace-negatif
negatif-en-design-de-logo-conseils-et-inspiration
GESTALT – LOI DE CLÔTURE
Exemples de logos avec des espaces négatifs

70

Source: https://theultralinx.com/2013/09/clever-negative-space-logos/
https://theultralinx.com/2013/09/clever
GESTALT – LOI DE CLÔTURE
Nous comprenons plus facilement l’organisation du
tableau, car la zone attribuée à chaque élément est
clairement délimitée et définie

71
EXERCICE Que pensez-vous
vous de cette IHM ?

72
 LES COULEURS

La luminosité indique si la
couleur est claire ou foncée.

La teinte indique la nature de

la couleur : rouge, orange,
jaune, ..

La saturation (intensité) indique si 73

une couleur est vive ou « terne ».
LES COULEURS – LA VISION DES COULEURS
Chez les vertébrés, la lumière est perçue au niveau de
la rétine, une couche de cellules nerveuses qui tapisse
le fond de l’œil.

On distingue deux types de cellules photoréceptrices

Les cônes
permettent de distinguer les couleurs
Les bâtonnets
impliqués dans la vision nocturne.

74
LES COULEURS – LA VISION DES COULEURS
Chez l’humain, la perception des couleurs repose
sur 3 types de cônes, chacun étant sensible à une
couleur différente
Bleu (ondes courtes)
Vert (ondes moyennes)
Rouge (ondes longues)

Vision trichromatique
en grec: trois couleurs

75
LES COULEURS – LA VISION DES COULEURS

Les autres mammifères ont (à de rares exceptions

près) une vision dichromatique, basée sur
seulement deux photorécepteurs:
Bleu (ondes courtes)
Vert (ondes moyennes)

76
 LES COULEURS – LA VISION DES COULEURS
Le taureau, dans l’arène, ne
réagit pas au rouge (il le voit
pas) de la muleta mais à son
mouvement

Le chat est dichromate : il ne perçoit

que les teintes entre le bleu et le
jaune. Il est aveugle au rouge

Les souris ne voient le

monde qu’en noir et blanc 77
LES COULEURS – LA VISION DES COULEURS
Daltonisme

Les daltoniens sont dichromates : ils ne possèdent que deux

types de cônes, généralement bleu et vert.

De manière exceptionnelle, deux ou les trois types de cônes

peuvent manquer, la personne voyant alors en noir et blanc.
On parle de « monochromatisme »

1 personne sur 12 possède une sorte de déficience de

couleur. Environ 8% des hommes et 1% des femmes dans le
monde sont daltoniens.
78
LES COULEURS – LA VISION DES COULEURS
Daltonisme : quelques types
Deutéranopie

Vision normale
absence dans la rétine des cônes de
79
réception au vert
LES COULEURS – LA VISION DES COULEURS
Daltonisme : quelques types
Protanopie

Vision normale Absence dans la rétine des cônes de

80
réception au rouge
LES COULEURS – LA VISION DES COULEURS
Daltonisme : quelques types
Tritanopie

Vision normale Absence dans la rétine des cônes de

réception au bleu 81
LES COULEURS – LA VISION DES COULEURS
Daltonisme : exemples de perceptions des couleurs

82
LES COULEURS – LA VISION DES COULEURS
Daltonisme : exemples de perceptions des couleurs

83
THÉORIE DE LA COULEUR
Cercle chromatique

Une représentation
ordonnée des teintes,
qui suit l’ordre de
l’arc-en-ciel.

84
THÉORIE DE LA COULEUR
Comment combiner harmonieusement les couleurs ?

Différents schémas existent pour guider votre choix de palettes.

La plupart sont basés sur la position des couleurs sur le cercle chromatique

85
Exemple 1 : Couleurs complémentaires

ces schémas utilisent deux couleurs

positionnées exactement l’une en face de
l’autre sur le cercle

86

https://99designs.fr/profiles/futuristicbug
Exemple 2 : Couleurs triadiques

Une triade requiert trois couleurs qui sont à égales

distances les unes des autres sur le cercle, formant
ensemble un triangle équilatéral.

87

https://99designs.fr/profiles/1908450
 Exemple 3 : Couleurs analogues

- utiliser trois couleurs voisines sur le cercle chromatique.

- En raison de leur proximité, ces teintes vont créer une
combinaison naturellement agréable au regard

https://99designs.fr/profiles/studioflach
88
Exemple 4 : Couleurs tétradiques

- former deux paires de couleurs

complémentaires, ce qui crée une figure
rectangulaire sur le cercle.

89
Exemple 5 : Complémentaires adjacentes
- Commencer par choisir une couleur et y ajouter les deux teintes qui
entourent sa complémentaire.
- Ceci forme un triangle isocèle

90
SIGNIFICATION DES COULEURS
Eléments impactant la signification des couleurs
Différences culturelles
en chine, rouge = joie, mariage / deuil (en Afrique de Sud)
vert = Argent (Amérique)
noir = deuil aux pays occidentaux
blanc = deuil en Asie
Epoque
Avant 1900 :
bleu : couleur féminine
Rouge pale (rose) : couleur masculine
Après 1900 : le contraire
Tons et nuances
91
Combinaisons de couleurs
 SIGNIFICATION DES COULEURS
Rouge Danger, importance, passion
Un grand impact en branding
Camions des pompiers, panneaux « stop » ..

Le rouge donne une

impression de vitesse
et de puissance

92
SIGNIFICATION DES COULEURS
Rouge Danger, importance, passion
Connu aussi pour stimuler l’appétit (restaurants,
chaines de fast food, ..)
Idéal pour les marques audacieuses, les boissons caféinées,
les voitures de course, les marques de sport, les restaurants
..
Dans le design, le rouge peut être une puissante
couleur d’accentuation
parfait pour souligner les éléments les plus importants
d’une page

93
SIGNIFICATION DES COULEURS
Jaune Soleil, bonheur, attention
Dans le design, le jaune est très efficace pour attirer
l’attention, ce qui explique que cette couleur soit
souvent choisie pour les signaux d’avertissement.
Combiné avec le noir, il peut servir à capter l’attention.

94
 SIGNIFICATION DES COULEURS
Vert Nature, croissance, réussite
Utilisé par les marques soucieuses de l’environnement

2009

Un rebranding qui a permis à

la marque de véhiculer un
message positif en faveur de
la nature et de
l’environnement

95
SIGNIFICATION DES COULEURS
Vert Nature, croissance, réussite

Les couleurs vertes saturées captent l’attention. C’est

pourquoi elles conviennent parfaitement pour
les boutons d’appel à l’action

96
SIGNIFICATION DES COULEURS
La couleur du bouton d’appel à l’action qui retient vraiment l’attention des
utilisateurs est celle qui contraste par rapport à la palette chromatique du reste
de la page.

97
SIGNIFICATION DES COULEURS
Le bouton d’appel à l’action « Get Evernote,
Evernote It’s Free » est caché, car il
est de la même couleur que l’arrière-plan.
plan. Perdu dans le design, les
utilisateurs ne le voient pas.

98
SIGNIFICATION DES COULEURS
Orange créativité, jeunesse,
enthousiasme
En tant que couleur
secondaire, l’orange associe la
chaleur du rouge et la joie du
jaune.
C’est une couleur qui attire
l’attention sans être aussi
imposante que le rouge. Ainsi,
les cônes que l’on voit sur la
route sont orange, par
exemple.
99
SIGNIFICATION DES COULEURS
Noir Puissance, élégance, raffinement
en branding et en marketing, il est généralement associé au pouvoir et à
l’élégance.

100
SIGNIFICATION DES COULEURS
Noir Puissance, élégance, raffinement
Mais aussi couleur neutre utilisée pour rédiger du texte
Associé à de l’or ou de l’argent, voire à un violet royal, il
ajoute de l’exclusivité et du prestige à un branding
Les designs contenant du noir et du rouge ou de l’orange sont
plutôt très percutants, voire agressifs.

101
SIGNIFICATION DES COULEURS

Bleu Confort, relaxation, confiance

Le bleu clair peut évoquer la
fraîcheur, la liberté et le calme.
un sentiment de confiance
souvent utilisé par les banques

Les bleus foncés sont excellents pour

les designs dans lesquels la force et la
fiabilité sont des valeurs importantes

102
SIGNIFICATION DES COULEURS

La page de connexion de Facebook ou la page d’accueil de Paypal sont 103

basées sur des nuances de bleu. Le bleu inspire la confiance
SIGNIFICATION DES COULEURS
Gris : Professionnalisme, formalisme et conformisme
Associé au bleu, il renforce les aspects de sérieux et
fiabilité
Populaire en design web : alternative au blanc ou au noir
pour le texte pour adoucir le contraste avec le fond et
améliorer la lisibilité

104
SIGNIFICATION DES COULEURS
Blanc : Pureté, innocence et minimalisme
Apple : brand moderne et minimaliste
Marques du secteur de la santé et bien être
Couleur de fond par défaut des sites web

105
SIGNIFICATION DES COULEURS

Design multicolore : joyeux, informels et créatifs

Marques ciblant les enfants mais aussi les marques pour 106
adultes pour évoquer l’imagination (ex : logo de Google)
LISIBILITÉ DES COULEURS
Principe
contraste caractères/fond élevé
caractères sombres sur fond clair
de préférence caractères noirs sur fond blanc
nombre de couleurs limité

Ce qu’il faut faire

éviter certaines combinaisons de couleurs
limiter le nombre de couleurs (4 correct, 7 grand
maximum, hors icônes)
107
LISIBILITÉ DES COULEURS

108
LISIBILITÉ DES COULEURS

109

https://material.io/design/color/the
https://material.io/design/color/the-color-system.html
LISIBILITÉ DES COULEURS

110

https://material.io/design/color/the
https://material.io/design/color/the-color-system.html
CHOIX DES COULEURS
Recommandations générales
Limiter le nombre de couleurs
Une trop grande diversité de couleurs produit un résultat inesthétique,
quelles que soient les couleurs employées.

111
CHOIX DES COULEURS
Recommandations générales

Être conservateur dans l’utilisation des couleurs :

éviter les associations qui « flashent » trop sauf pour des messages
critiques

Cohérence dans l’utilisation des couleurs sur l’ensemble de

l’interface
Utiliser des combinaisons de couleurs efficaces

112
CHOIX DES COULEURS
Outils et sites utiles
Adobe Color

113

https://color.adobe.com/fr/create/color
https://color.adobe.com/fr/create/color-wheel
CHOIX DES COULEURS
Outils et sites utiles
Color tool pour material design

114

https://material.io/resources/color/#!/?view.left=0&view.right=0
CHOIX DES COULEURS
Outils et sites utiles
Coolors

115

https://coolors.co/
CHOIX DES COULEURS
Outils et sites utiles
Canva

116
https://www.canva.com/learn/100-color-combinations/
CHOIX DES COULEURS
Recommandations générales
Utiliser la couleur comme une technique de codage pour l’affichage des
données, des messages d’alerte.

Utiliser le codage des couleurs pour densifier l’information

117
CHOIX DES COULEURS
Recommandations perspectives
Design et accessibilité
Le rouge et le vert sont les couleurs les plus sujettes aux problèmes de perception
des couleurs.
Éviter d’utiliser cette combinaison de couleurs comme seul moyen de distinguer
deux états ou valeurs !

118
CHOIX DES COULEURS
Recommandations perspectives
Design et accessibilité
Consignes du consortium W3C:: la couleur ne doit pas être utilisée comme seul
moyen visuel de communiquer des informations, d’indiquer une action, de
demander une réponse ou de distinguer un élément visuel.

119
CHOIX DES COULEURS
Recommandations perspectives
Design et accessibilité
Conception : Utiliser des couleurs de luminances différentes pour permettre leur
séparation par les personnes daltoniennes
Vérification : Vérifier que l’interface reste lisible en couleurs achromatiques (tons
de gris)

120
CHOIX DES COULEURS
Recommandations perspectives
Design et accessibilité
Outils de test d’interfaces:
Application bureau (ColorOracle
ColorOracle)
Application mobile (ColorBlindness
ColorBlindness SimulateCorrect)
Applications web (Colorblind Web Page Filter, WebAIM Color
Contrast Checker)

121

Exemple : Le doodle de Google testé avec Colorblind Web Page Filter

CHOIX DES COULEURS
Recommandations perspectives
Procéder à des tests A/B

122

https://moz.com/ugc/case-study-how-using
using-color-psychology-improved-our-website
LECTURE À L’ÉCRAN
L'eye-tracking (ou oculométrie)
oculométrie
un procédé qui consiste à enregistrer le parcours du regard
sur une interface, pour ensuite dresser une carte des zones les
plus vues.
Cette technique permet notamment d'évaluer la facilité de
navigation d'un site.

123
LOI DE FITTS
Principe : le temps requis pour se déplacer vers une zone
cible (exemple : cliquer sur un bouton) est une fonction de
la distance de la cible sur la taille de la cible.
Autrement dit, plus un objet est gros et proche, plus il
est facile à atteindre.

124
LOI DE FITTS

Risques
perte de temps
clics à côté de la cible
Le risque d’erreur (de cliquer à coté) augmente
proportionnellement avec la distance que la souris doit
parcourir pour atteindre le point cliquable

125
LOI DE FITTS
Solutions
Respecter l’organisation de l’écran
adapter les tailles et localisations

126

Deezer facilite la sélection du bouton « Lecture » par rapport aux autres

LOI DE FITTS
Solutions

Le menu radial

Application de la loi de Fitts par Apple

127

Les menus contextuels

LOI DE FITTS

L’objet A qui double de taille

gagne nettement en visibilité,
alors que l’élément B gagne
moins en visibilité alors qu’il
double également de taille.

128
LOI DE FITTS
Les internautes n’aiment pas les longues pages, ils ne
« scrollent » pas, toutes les informations importantes
doivent se trouver au-dessus
dessus de la ligne de flottaison (le
fold)
Application de la loi de Fitts

129
LOI DE FITTS

130
TYPOGRAPHIE

131
TYPOGRAPHIE
Principes de typographie
Polices sans empattement (sans serif) plus lisibles sur écran
Arial, Calibri, Helvetica,, .. pour éléments textuels isolés (menus)
Polices avec empattement créent une ligne virtuelle horizontale
qui facilite la lecture des textes long
Polices à chasse fixe (monospace): pour les chiffres (surtout s’ils
doivent être alignés)

132
TYPOGRAPHIE

133
TYPOGRAPHIE
Principes de typographie
styles ralentissent la lecture, moins lisibles
gras
italique
souligné
MAJUSCULES
Eviter les lignes écrites en lettres majuscules, moins lisibles

134
FORMAT D’AFFICHAGE
Directives de Smith & Mosier
Justifier à gauche les listes de données alphabétiques
Justifier à droite les entiers
Aligner les valeurs décimales avec la virgule
Éviter les zéros non significatifs (sauf conventions
contraires)
Découper les nombres par groupes de 3 à 4 chiffres

135
DARK PATTERNS
Un dark pattern (en français : interface truquée) est une interface utilisateur qui
a été soigneusement conçue pour tromper ou manipuler un utilisateur

136

https://userinyerface.com/
DARK PATTERNS
Friend Spam (spam
« d’un ami ») : un produit
ou une application
demande à l’utilisateur
l’accès à ses contacts e-mail
ou sur les réseaux sociaux
sous prétexte de rechercher
des amis.

Lorsque l’utilisateur
confirme, un message est
envoyé à partir de son
adresse à tous ses contacts
afin de donner plus de
visibilité à l’entreprise ou
de gagner de nouveaux
utilisateurs. 137
DARK PATTERNS

https://confirmshaming.tumblr.com/
138
Confirmshaming (culpabilisation à la confirmation) : ce type de dark
pattern déclenche volontairement un sentiment négatif chez l’utilisateur si
celui-ci n’accepte pas le service.
DARK PATTERNS

Sneak into Basket (« se faufiler dans le panier ») : une option opt-out non 139
désactivée ou une case non cochée et les boutiques de e-commerce
e se permettent
d’ajouter dans le panier de l’utilisateur des produits qu’il ne désire pas.
DARK PATTERNS

Disguised Ads (publicité déguisée) : les annonces publicitaires sont intégrées 140
dans le design afin de ne pas être identifiées comme telles par l’utilisateur.
L’objectif, c’est que l’utilisateur clique dessus.