première impression, esthétisme et ux

Première impression, esthétisme et UX

Guillaume Gronier

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).

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 !

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

Vous êtes…

1.  Une femme

2.  Un homme

3.  Je ne sais pas

Quel est votre domaine d’activité ?

1.  Entreprise privée

2.  Institution publique

3.  Université/institut de recherche

4.  Autre

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).

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

Quelle est votre humeur à ce moment précis ?

1.  Très bonne humeur

2.  Bonne humeur

3.  Mauvaise humeur

4.  Très mauvaise humeur

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

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.),

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.),

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).

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

L’expérience utilisateur Vivre une émotion

L’expérience utilisateur Vivre une émotion

L’expérience utilisateur Vivre une émotion

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

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

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)

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

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

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

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.

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

La formation de la première impression

La première impression en psychologie sociale

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)

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

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

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

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)

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

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

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».

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.

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

A vos évaluations !

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

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

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

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

L’effet de Halo

CV très compétent CV moins compétent

Groupe 1

Groupe 2

Groupe 3

Groupe 4

Résultats

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

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

Pour résumer

Traits (Informations)

Impression générale

Inférence de traits particuliers

Biais de confirmation

La formation de la première impression

Première impression et expérience utilisateur

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)

La formation d’impression en 50 ms...

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

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)

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

Pour résumer

Eléments graphiques

Impression générale

Inférence des caractéristiques

Biais de confirmation

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.

Pour résumer

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

Pour résumer

What is beautiful is usable*

(Tractinsky et al., 2000)

*Ce qui est beau est utilisable

Favoriser la première impression

Quelques exemples

Favoriser la première impression Quelques conseils

Favoriser la première impression

Favoriser la première impression

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

Tester la première impression

Le test des 5 secondes

Le test des 5 secondes

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

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.

Le test des 5 secondes

Application !

Terminé !

Terminé !

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

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

Terminé !

Le test des 5 secondes

Application !

Terminé !

Terminé !

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

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

Terminé !

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

Présentation et analyse des résultats

Présentation et analyse des résultats

Quelle est votre humeur à ce moment précis ?

1.  Très bonne humeur

2.  Bonne humeur

3.  Mauvaise humeur

4.  Très mauvaise humeur

Merci de votre attention !

@guillaumgronier www.guillaumegronier.com