Présentation de Guillaume Gronier lors du premier Afterwork FLUPA Bruxelles.

1. Première impression, esthétisme et UX
Guillaume Gronier

2. Introduction
• Docteur en psychologie
ergonomique.
• Chercheur senior en
ergonomie cognitive et IHM au
Luxembourg Institute of Science
and Technology (LIST).
• Co-Créateur et Vice-Président
de l’association FLUPA
«France-Luxembourg User
experience Professionals’
Association».
• Co-auteur de «Méthodes de
Design UX» (Eyrolles, 2015).

3. Une soirée dont VOUS
êtes les héros !
• Système de « Power Voting » :
• Appuyez sur votre choix de
réponse (1, 2, 3, 4…).
• Si vous vous trompez et si vous
changez d’avis, appuyez sur une
nouvelle touche.
• Regardons ensemble les résultats
des votes !

4. Déverrouillage du système :
appuyez sur n’importe
quelle touche entre 1 et 4 !
1. Réponse 1
2. Réponse 2
3. Réponse 3
4. Réponse 4

5. Vous êtes…
1. Une femme
2. Un homme
3. Je ne sais pas

6. Quel est votre
domaine d’activité ?
1. Entreprise privée
2. Institution publique
3. Université/institut de
recherche
4. Autre

7. Quelle est votre
pratique de l’UX ?
1. J’applique les méthodes UX
à longueur de journée. C’est
mon métier.
2. J’applique par moment les
méthodes UX, quand un
projet s’y prête.
3. Je suis peu familiarisé(e)
avec les méthodes UX, mais
je suis curieux(se).

8. Avant ce soir, connaissiez-
vous l’association FLUPA ?
1. Oui très bien
2. J’en avais juste entendu
parler
3. Non pas du tout
4. Je me suis trompé
d’afterwork

9. Quelle est votre humeur à
ce moment précis ?
1. Très bonne humeur
2. Bonne humeur
3. Mauvaise humeur
4. Très mauvaise humeur

10. Quel rôle joue la première impression dans
l’expérience utilisateur ?

11. L’expérience
utilisateur
• L’expérience utilisateur (User
Experience - UX) est la
conséquence :
• de l’état interne de
l’utilisateur (prédispositions,
attentes, besoins, motivations,
humeur, etc.),

12. L’expérience
utilisateur
• L’expérience utilisateur (User
Experience - UX) est la
conséquence :
• de l’état interne de
l’utilisateur (prédispositions,
attentes, besoins, motivations,
humeur, etc.),
• des caractéristiques du
système (par ex. complexité,
objectif, utilisabilité,
fonctionnalité, etc.),

13. L’expérience
utilisateur
• L’expérience utilisateur (User
Experience - UX) est la
conséquence :
• de l’état interne de
l’utilisateur (prédispositions,
attentes, besoins, motivations,
humeur, etc.),
• des caractéristiques du
système (par ex. complexité,
objectif, utilisabilité,
fonctionnalité, etc.),
• du contexte (ou
environnement) dans lequel
ont lieu les interactions
(Hassenzahl et Tractinsky,
2006).

14. L’expérience utilisateur
Adapté de Mahlke (2008).
Composantes de l’expérience utilisateur
Etat interne de l’utilisateur
Caractéristiques du système
Paramètres du contexte
Interaction
Homme-Machine
Conséquences de l’expérience utilisateur
Jugements
Comportements
Perception des qualités
instrumentales
Utilité
Utilisabilité
Efficience
Contrôle
Aide
Facilité d’apprentissage
Réactions émotionnelles
Sentiments subjectifs
Expressions motrices
Réactions physiologiques
Jugements cognitifs
Tendances
comportementales
Perception des qualités
hédoniques
Aspects esthétiques
Aspects symboliques
Aspects motivationnels

15. L’expérience utilisateur
Vivre une émotion

16. L’expérience utilisateur
Vivre une émotion

17. L’expérience utilisateur
Vivre une émotion

18. L’expérience utilisateur
« Les gens paient pour avoir
peur » D. Norman

19. L’expérience utilisateur
Vivre une émotion, même avec
la technologie

20. Trois niveaux de Design selon D. Norman
Réflexif :
l’image de soi, la satisfaction
personnelle, les souvenirs
Comportemental :
le plaisir d’utilisation et la
simplicité
Viscéral :
l’apparence (ce qui est joli,
excitant, stimulant)

21. Le design viscéral
Créer l’émotion à partir de
l’apparence

22. Le design viscéral
Créer l’émotion à partir de
l’apparence

23. Avant usage
!
UX anticipée
!
Imaginer une
expérience
Pendant usage
!
UX momentanée
!
Vivre une expérience
Après usage
!
UX épisodique
!
Penser à une
expérience
A travers le temps
!
UX cumulative
!
Se souvenir de multiples
périodes d’usage
La dynamique temporelle de l’expérience utilisateur
L’expérience se vit différemment à différents moments…
Attentes
(réputation,
existant,
expérience
passée…)
Impressions et
sensations
immédiates
Les souvenirs de
l’expérience vécue
diffèrent de
l’expérience réelle
Représentation
globale de
l’expérience, sur la
base de multiples
expériences
Design viscéral

24. Selon vous, combien de temps faut-il
à l’utilisateur pour se forger une
première impression ?
1. Environ 100 ms.
2. Environ 1 sec.
3. Environ 10 sec.
4. Environ 1 min.

25. Faire bonne
impression…
• Un foisonnement d’applis
mobiles avec des fonctionnalités
similaires, et de sites web
proposant des contenus
identiques (produits,
informations...).
• Selon une étude de Pinch Media
(2014), seules 20% des
applications pour smartphone
téléchargées sont encore
utilisées le jour suivant. 30 jours
après le téléchargement, ce
pourcentage tombe à 5%.
• On compte aujourd’hui :
• 1,43 million d’appli sur Google
Play
• 1,21 million d’appli sur l’App
Store

26. La formation de la première impression
La première impression en psychologie sociale

27. Faire bonne
impression !
• Un mécanisme socio-
cognitif complexe
• Un processus subjectif
• Repose sur des éléments
centraux (i.e. le sourire, la
coiffure, la tenue
vestimentaire) et
périphériques (i.e. porter
des lunettes, la manucure,
la couleur de la cravate)

28. Faire bonne
impression !
Les concepts clés :
• les théories implicites de la
personnalité
• la formation d’impression
• l’effet de Halo
• Le biais de confirmation

29. Théories implicites de
la personnalité
• Nous nous forgeons une
impression globale
d’une personne à partir
de quelques
caractéristiques
• La construction d’une
impression globale
s’appuie également sur
ce que nous attendons
de la personne

30. La formation d’impression
• Une expérience d’un psychologue : Asch (1946)
• 4 groupes doivent donner leur opinion d’une personne décrite à partir
de 7 adjectifs. 1 seul adjectif est modifié entre les 4 groupes
Intelligent
habile
travailleur
chaleureux
déterminé
pratique
prudent
Intelligent
habile
travailleur
froid
déterminé
pratique
prudent
Intelligent
habile
travailleur
poli
déterminé
pratique
prudent
Intelligent
habile
travailleur
insensible
déterminé
pratique
prudent
Groupe 1
Groupe 2
Groupe 3
Groupe 4

31. La formation d’impression
• Groupe 1 (chaleureux) : «Une personne qui croit dans la justesse de
certaines choses, qui veut que les autres considèrent son point de vue,
qui serait sincère dans une discussion et voudrait voir son point de vue
l'emporter»
• Groupe 2 (froid) : «Une personne pleine d'ambition et de talent qui ne
permettrait à rien ni personne de l'empêcher d'atteindre ses objectifs.
C'est sa manière qui importe ; il est déterminé à ne pas céder quoi qu'il
arrive»
• Groupe 3 (poli) = Groupe 4 (insensible) : pas de grandes différences
entre les descriptions (traits périphériques)

32. L’effet de Halo
L’effet de Halo consiste à
généraliser la première
impression que l’on a de
quelqu’un, à d’autres
caractéristiques que ceux
perçues

33. L’effet de Halo
• Si la première impression
est favorable, la
généralisation est
positive
• Si la première impression
est défavorable, la
généralisation est
négative

34. L’effet de Halo en
psychologie sociale
• L’expérience de Cliford (1975) :
• des enseignants doivent
décrire des enfants d’après
une photo sur plusieurs
dimensions (intelligence,
évaluation des chances de
succès à l’école, etc.)
• Résultats : un enfant jugé
«beau» est perçu par les
enseignants comme plus
intelligent et ayant plus de
chance de succès à
l’école, qu’un enfant jugé
«laid».

35. Devenez recruteur !
• Mettez-vous dans le rôle d’un
recruteur
• Vous devez évaluer un CV
(anonyme) sur la base d’une offre
d’emploi
• Notez le CV sur 8, sachant que la
personne ne sera pas convoquée
à l’entretien si la note est
inférieure ou égale à 4.

36. Devenez recruteur !
Grande société de transport aérien recrute une assistante de direction trilingue.
Missions :
Assister le PDG de l’entreprise dans ses relations avec ses homologues internationaux.
•
assurer les travaux de secrétariat : rédaction et frappe des courriers en Français, Anglais
et Allemand
•
participation aux différentes réunions ; rédaction et frappe de comptes-rendus
•
gérer l’emploi du temps du PDG et organiser ses déplacements
•
accueillir les clients et collaborateurs Français et étrangers
Profil recherché :
•
personne parfaitement bilingue : le poste implique une parfaite maîtrise des trois langues,
tant à l’écrit qu’à l’oral
•
titulaire au minimum du Bac, mais de préférence d’un diplôme de niveau Bac+2
•
personne autonome, dynamique, ouverte, sérieuse, rigoureuse et sociable

37. A vos évaluations !

38. Groupe 1 : quelle note
donnez-vous au candidat ?
1. Pas du tout compétente
2. 2
3. 3
4. 4 (note éliminatoire)
5. 5
6. 6
7. 7
8. Tout à fait compétente

39. Groupe 2 : quelle note
donnez-vous au candidat ?
1. Pas du tout compétente
2. 2
3. 3
4. 4 (note éliminatoire)
5. 5
6. 6
7. 7
8. Tout à fait compétente

40. Groupe 3 : quelle note
donnez-vous au candidat ?
1. Pas du tout compétente
2. 2
3. 3
4. 4 (note éliminatoire)
5. 5
6. 6
7. 7
8. Tout à fait compétente

41. Groupe 4 : quelle note
donnez-vous au candidat ?
1. Pas du tout compétente
2. 2
3. 3
4. 4 (note éliminatoire)
5. 5
6. 6
7. 7
8. Tout à fait compétente

42. L’effet de Halo
CV très compétent CV moins compétent
Groupe 1
Groupe 2
Groupe 3
Groupe 4

43. Résultats
L’attrait physique influence-t-il
notre perception de la
compétence ?

44. Le biais de
confirmation
• Le biais de confirmation
d’hypothèse est la tendance à
chercher ou à interpréter toute
preuve comme étant en faveur
d'une croyance préexistante
• A l’inverse, elle cherche à ignorer
ou réinterpréter tout élément qui
n'est pas favorable à ces
croyances

45. Pour résumer
Traits
(Informations)
Impression
générale
Inférence de traits
particuliers
Biais de
confirmation

46. La formation de la première impression
Première impression et expérience utilisateur

47. La formation
d’impression
• La formation d’impression
se forge en 50 ms
(Lindgaard et Fernandes,
2006)
• La première impression se
construit à partir des
éléments graphiques et
visuels (esthétisme)

48. La formation
d’impression en 50 ms...

49. L’effet de Halo
• La formation d’impression
conditionne :
• la crédibilité perçue du
site
• la facilitée
d’utilisation perçue
• la loyauté de
l’utilisateur envers le
site
• l’acceptation

50. Le biais de
confirmation
• Plus l’utilisateur s’attend à
ce qu’un site web soit
facilement utilisable, plus
il évaluera positivement
l’utilisabilité de ce site
(Raita & Oulasvirta, 2011)

51. Première impression
et acceptation
• Effet «screen-and-glean» :
• l’utilisateur explore
tout d’abord la page
très rapidement afin de
s’en faire une première
impression
• il décide ensuite d’y
rester ou non pour
rechercher plus
précisément les
informations qui
seraient susceptibles
de l’intéresser

52. Pour résumer
Eléments
graphiques
Impression
générale
Inférence des
caractéristiques
Biais de
confirmation

53. Pour résumer
• Ce sont les éléments
graphiques, donc
l’esthétisme, qui sont à
privilégier au début de
l’interaction.
• La première impression
affecte directement l’UX
momentanée.

54. Pour résumer
Le site web doit présenter
clairement ses objectifs
La première impression
conditionne l’acceptation ou
non du site

55. Pour résumer
What is beautiful is usable*
(Tractinsky et al., 2000)
*Ce qui est beau est utilisable

56. Favoriser la première impression
Quelques exemples

57. Favoriser la première
impression
Quelques conseils

58. Favoriser la première impression

59. Favoriser la première
impression

60. Favoriser la première
impression
Bonnardel et al., 2011
• Le site orange est le site le plus apprécié
• Le site gris est le moins apprécié
• Les internautes restent plus longtemps à explorer le site orange ou
bleu que le site gris
• Les internautes retiennent plus d’informations du site orange ou bleu
que le site gris

61. Tester la première impression
Le test des 5 secondes

62. Le test des 5
secondes
Le test permet de mesurer la
première impression d’un
système, en 5 secondes !

63. Le test des 5 secondes
• Procotole :
1. Afficher auprès de plusieurs utilisateurs l’écran d’un système (maquette HD, capture
d’écran...) pendant exactement 5 secondes. Privilégier les écrans d’accueil, les
pages de chargement… c’est-à-dire le premier écran vu par l’utilisateur !
2. Demander aux utilisateurs de répondre aux questions suivantes :
• De manière générale, quelle est votre impression vis-à-vis de ce système ?
Très mauvaise O O O O O Très bonne
• De manière générale, comment jugez-vous l’esthétisme de ce système ?
Très laid O O O O O Très beau
• Selon vous, quels sont les objectifs visés par ce système ?
• Quels éléments de l’interface avez-vous retenus (texte, logo, couleur, image,
menus…) ? Si possible, merci de les reproduire sur la feuille blanche qui vous a été
fournie.

64. Le test des 5
secondes
Application !

65. Terminé !

66. Terminé !

67. De manière générale, quelle
est votre impression vis-à-
vis de ce système ?
1. Très mauvaise
2. Mauvaise
3. Ni mauvaise ni bonne
4. Bonne
5. Très bonne

68. De manière générale, comment
jugez-vous l’esthétisme de ce
système ?
1. Très laid
2. Laid
3. Ni laid ni beau
4. Beau
5. Très beau

69. Terminé !

70. Le test des 5
secondes
Application !

71. Terminé !

72. Terminé !

73. De manière générale, quelle
est votre impression vis-à-
vis de ce système ?
1. Très mauvaise
2. Mauvaise
3. Ni mauvaise ni bonne
4. Bonne
5. Très bonne

74. De manière générale, comment
jugez-vous l’esthétisme de ce
système ?
1. Très laid
2. Laid
3. Ni laid ni beau
4. Beau
5. Très beau

75. Terminé !

76. Le test des 5 secondes
• Les avantages de la méthode :
• en ne s’intéressant qu’aux aspects visuels de l’interface, il est possible
de tester une maquette statique (image)
• le test sur prototype permet ainsi de valider les pages d’un site dès les
premières phases de leur conception
• Les inconvénients de la méthode :
• lorsque la page est trop chargée d’informations (comme une page
d’accueil qui peut servir une multitude d’objectifs), sa consultation peut
nécessiter de prendre plus de 5 secondes. Les résultats recueillis
auprès de l’utilisateur peuvent donc être incomplets

77. Présentation et analyse des résultats

78. Présentation et analyse des résultats

79. Quelle est votre humeur à
ce moment précis ?
1. Très bonne humeur
2. Bonne humeur
3. Mauvaise humeur
4. Très mauvaise humeur

80. Merci de votre attention !
@guillaumgronier
www.guillaumegronier.com