LES MÉTHODES DU DESIGN UX

Enseignante : Rim Mahouachi

Classe : SI2
Livre de référence :
Méthodes de design UX - 30 méthodes fondamentales pour
concevoir des expériences optimales 2
Carine Lallemand, Guillaume Gronier
 LE CONCEPT D’EXPÉRIENCE
UTILISATEUR (RAPPEL)
3
RAPPEL : L’EXPÉRIENCE UTILISATEUR

Objectif (but)

Le système tel
que l’utilisent
les personnes 4
RAPPEL : L’EXPÉRIENCE UTILISATEUR

5
LE DESIGN UX
L’un des principes fondamentaux du design UX
consiste à intégrer les utilisateurs le plus tôt
possible dans le cycle de développement du
produit, afin de concevoir pour l’utilisateur et
avec l’utilisateur.

Ainsi, le processus et les méthodes de design UX

trouvent leur origine dans le processus de
Conception centrée sur l’utilisateur (CCU).

6
LE MARSHMALLOW CHALLENGE

Objectif : construire la structure la plus haute

possible et il faut qu’elle soit autoportante !

18 minutes
 LE MARSHMALLOW CHALLENGE

Testez la contrainte, prototypez: la

raison pour laquelle les enfants font
mieux que adultes est que les enfants
passent plus de temps à « jouer au
prototypage » : Il testent un structure
qui s’écroule, en recommencent une
autre…

Les adultes passent beaucoup de

temps à planifier, puis à exécuter le
plan, avec trop peu de temps pour
réparer la structure une fois qu’ils ont
mis le marshmallow au sommet. Ils
ne testent pas la contrainte.
8

Tom Wujec: Bâtissez une tour, bâtissez une équipe

https://www.youtube.com/watch?v=H0_yKBitO8M
 LE MARSHMALLOW
CHALLENGE

Le Marshmallow est une métaphore pour les

hypothèses cachées d’un projet: l’hypothèse dans le
marshmallow challenge est que les marshmallows sont
légers et pelucheux et facilement soutenus par les
spaghettis.

Lorsque vous testez votre structure, vous vous

apercevez, souvent trop tard, que les marshmallows ne
sont finalement pas si légers.

La principale leçon à retenir du challenge est que nous

devons identifier les hypothèses dans notre projet – les 9
besoins réels des clients, le coût du produit, la durée du
service – les tester tôt et les tester souvent.
 CONCEPTION CENTRÉE
UTILISATEUR (UCD)
10
 DÉFINITION
La démarche de conception centrée utilisateur (UCD) consiste à
mettre en place un processus itératif s'appuyant sur l'analyse de
l'expérience utilisateur, c’est-à-dire le comportement et les retours
des utilisateurs lorsqu’ils se servent réellement de l’application.

11

Le processus itératif de conception centrée sur l’utilisateur (d’après la norme ISO 9241-210 de 2010)
C’EST UN PROCESSUS ITÉRATIF

Le processus est hautement itératif : des allers-retours

entre les différentes phases sont nécessaires au fur et à
mesure de la conception.
Le cycle itératif se termine lorsque le système atteint le
niveau de qualité attendu par les concepteurs.
Il donne naissance au produit final, qui peut alors être
implémenté et déployé.

12
L’UTILISATEUR MOYEN N’EXISTE PAS
Les utilisateurs sont des individus comme vous et moi.
Implicitement, nous nous imaginons un « utilisateur moyen » à notre
image, une sorte d’être humain standard à la fois comme vous et comme
moi.
Pour concevoir correctement un site / une application, il suffirait donc de
connaître ce que cet utilisateur aime ou n’aime pas.

13
L’UTILISATEUR MOYEN N’EXISTE PAS

Mais, c’est un mythe ! Il n’existe pas d’utilisateur

moyen.
Nous sommes tous différents et chacune de nos expériences en
tant qu’utilisateur est unique.
Dans l’absolu, il n’y a pas de bonne application.
La facilité d’utilisation d’une application dépend à la fois de
l’utilisateur et du contexte dans lequel il s’en sert.
Il n’existe pas de design « prêt à porter », chaque solution
doit être conçue « sur-mesure ».

14
 CONCEVOIR SUR-MESURE
1. Déterminer le contexte d’utilisation
Cibler l’application en déterminant le couple « utilisateur-
utilisation »
Quel est l’utilisateur visé ? Que cherche-t-il à faire sur l’application
?

2. Structurer l’application selon le point de vue des utilisateurs

visés, et non selon celui de l’équipe de conception comme c’est
trop souvent le cas.
Méthode de tri par carte

3. Tester l’application avec les utilisateurs afin de pouvoir

appuyer les choix de conception sur des faits objectifs issus
de l’observation.
Le test utilisateur fournit des éléments concrets et objectifs qui
15
serviront à appuyer les choix de conception.
 LE DESIGN UX
16
DESIGN UX
EXEMPLE 1

2
1

17

Ancienne version du site (2016)

DESIGN UX
EXEMPLE 1

1 Image d’arrière plan

18
DESIGN UX
EXEMPLE 1

2 Barre de recherche

19
DESIGN UX
EXEMPLE 1

3 Témoignages (social proof)

20
DESIGN UX
EXEMPLE 1

21
Version (2019) du site
https://www.blablacar.fr/
DESIGN UX
EXEMPLE 1

22
Dernière version du site (2020)
https://www.blablacar.fr/
DESIGN UX
EXEMPLE 2

Se voir sur le plan, c’est de

l’ergonomie.

Voir chaque driver, c’est de

l’UX.

L’ergonomie vous en aurait donné

le nombre, c’est suffisant.

L’UX vous rassure. Il vous

conforte dans l’idée que le service
est bien présent, il est proche, il
vous prend en charge, il s’occupe
de tout. Les voitures bougent : les
chauffeurs sont là, prêt à passer 23
vous prendre.
 DESIGN UX
EXEMPLE 2

Réserver facilement un driver,

c’est de l’ergonomie.

Savoir à l’avance combien on

va payer, c’est de l’UX.

24
Source : https://medium.com/@maximebou/2-min-pour-
comprendre-la-diff%C3%A9rence-entre-ergonomie-et-ux-
design-a6bb534f0c1a
DESIGN UX
AUTRES EXEMPLES

25
DESIGN UX
AUTRES EXEMPLES

Youtube

SquareOne, une console de

jeu qui a remporté le premier
prix UX Design au concours UX
Design Awards

26
PROCESSUS DE CONCEPTION

Cycle de conception itératif des systèmes interactifs

27
 PHASE DE PLANIFICATION
28
PHASE DE PLANIFICATION
Cette étape consiste à :
définir le projet (demande, contexte, objectifs,
indicateurs de réussite)
identifier les utilisateurs visés (les différents
profils a priori)
sélectionner les activités de recherche utilisateur et
les méthodes UX à mobiliser

29
DÉFINITION DU PROJET
Consulter et impliquer les parties prenantes
Parties prenantes
les personnes ou les organisations qui interviennent dans la
conception ou qui seront affectées par l’orientation
stratégique du projet.
le responsable opérationnel de l’entreprise, le chef de projet,
les responsables marketing, de la communication, des
ventes, du service client, ou encore des équipes de
développement.
Recueillir leurs points de vue
Interviews pour recueillir des informations préliminaires
sur les objectifs du produit, le profil des utilisateurs cibles
et leurs besoins
Organiser une réunion de lancement (stakeholder meeting)
autour de la vision du projet (objectifs, défis, critères de
succès) et non pas des solutions potentielles en termes de 30
fonctionnalités.
DÉFINITION DU PROJET
Prendre connaissance de l’existant en menant
une recherche secondaire
Explorer des informations publiées sur les
utilisateurs, les concurrents, et les tendances
sociales, économiques, technologiques, ..
Recherche documentaire : livres, articles scientifiques,
rapports d’institutions ou d’organismes publics, articles de
blogs, ..
Ressources internes : enquêtes, études de marché,
questionnaires de satisfaction, retours des utilisateurs au
service client, Web Analytics ..
Analyse concurrentielle (benchmark)
identifier les forces et faiblesses des concurrents
analyse détaillée centrée sur l’expérience utilisateur
étudiant les points forts et les points faibles de chaque 31
produit
DÉFINITION DU PROJET
Planifier les activités de recherche utilisateur et
les méthodes de design UX qui seront mobilisées
dans le processus

32
RECRUTEMENT DES UTILISATEURS
Identifier les utilisateurs cibles
Utilisateurs cibles = ceux qui vont utiliser le système
Identifier les groupes d’utilisateurs cibles
Produits grand public : groupes hétérogènes

Etapes d’identification des utilisateurs cibles (Kujala)

Créer une liste d’utilisateurs préliminaires par
brainstorming
Décrire les caractéristiques (les plus pertinentes pour le
système) des utilisateurs
Démographiques (âge, sexe, niveau d’étude, ..)
Liées à la tache (objectifs, type de tache, fréquence d’usage, ..)
Décrire et prioriser les principaux groupes d’utilisateurs
33
Créer si besoin des personas
RECRUTEMENT DES UTILISATEURS
Sélectionner des utilisateurs représentatifs

Sélectionner parmi chaque groupe identifié, un

échantillon

Types d’échantillons
Aléatoire
Systématique
Stratifié: Diviser la population en un nombre distinct de
catégories appelées strates
De convenance: sélectionne des utilisateurs auxquels on a
facilement accès et qui n’engendrent pas de coûts élevés
Boule de neige: Sélectionner un utilisateur représentatif, 34
qui contribuera au recrutement d’utilisateurs similaires
RECRUTEMENT DES UTILISATEURS
Recruter des utilisateurs
Combien ?
Juste ce qu’il faut
Compter au minimum 10% d’utilisateurs en plus
Un minimum de 30 participants pour un questionnaire
Entre 40 et 50 participants pour des études d’eyetracking
Ça dépend de la méthode utilisée
Comment ?
Gérer le recrutement soi-même
Via des agences spécialisées
Les tests à distance et le crowdsourcing
faire appel à des participants en ligne
Exemples: FouleFactory, Testapic, .. 35
RECRUTEMENT DES UTILISATEURS
Recruter des utilisateurs
Filtrer des candidats
Utiliser des questionnaires filtres

36
RECRUTEMENT DES UTILISATEURS
Recruter des utilisateurs
Filtrage des candidats
Utiliser des questionnaires filtres

37
RECRUTEMENT DES UTILISATEURS
Recruter des utilisateurs
Motiver et récompenser les utilisateurs
Organiser les sessions
Pré-tester le déroulement des session
Essai à blanc
Pré-tests avec utilisateurs cibles
Maximiser le taux de participation
Planifier les sessions
Mener les sessions
Faire face à l’absentéisme

38
 PHASE D’EXPLORATION
39
PHASE D’EXPLORATION
Comprendre les besoins utilisateurs, mais aussi leurs
opinions, leurs motivations, leurs comportements
ainsi que leurs expériences antérieures.

40
MÉTHODES D’EXPLORATION
Plusieurs méthodes sont utilisées pour préciser
les attentes des utilisateurs, parmi lesquelles:
Enquête/Interviews utilisateur
questionner individuellement un panel représentatif de la
population visée par l'application,
Focus group
s'appuyer sur la dynamique d'un groupe d'utilisateurs pour
identifier l'image collective du produit,
Observation
observer l’utilisateur dans son environnement naturel, afin
de recueillir des informations sur ses pratiques, ses
habitudes, ses besoins, ses envies..

41
ENQUÊTE / ENTRETIEN
Objectif :
Identifier des pistes de conception pour les prochaines itérations ou
des problèmes rencontrés par les utilisateurs

Protocole :
Panel représentatif d’utilisateurs (en mode individuel)
Interviewer l’utilisateur face à face
Privilégier l’enregistrement (sonore/vidéo) à la prise de notes
(traces et concentration sur l’échange)
Durée recommandée de 1 heure
Neutralité de l’enquêteur

42
ENQUÊTE / ENTRETIEN
Procédure :
Poser des questions semi-directives lors de l’analyse (degré de
liberté)
Poser des questions plutôt directives lors de l’évaluation (e.g.,
cibler un élément)
Reformuler les réponses

Analyse qualitative des résultats

Vision subjective (ne pas en tirer des

conclusions chiffrées)

43
FOCUS GROUP
Objectif :

recueil des impressions, des avis ou des besoins des

utilisateurs

44
FOCUS GROUP
4 types de focus group :

l’exploration
cherche à recueillir les attitudes des utilisateurs sur un sujet
donné, afin d’aider les concepteurs à comprendre comment un
produit est compris, jugé ou apprécié

45
FOCUS GROUP
4 types de focus group :

la priorisation des fonctionnalités

permet d’identifier les fonctionnalités d’un système jugées les
plus attractives pour les utilisateurs cibles. Les données
recueillies guident ainsi la conception du système et aident si
nécessaire à choisir les fonctionnalités qui doivent être retenues
ou rejetées

46
FOCUS GROUP
4 types de focus group :

l’analyse de la compétitivité
permet de savoir quels sont les éléments d’un système ou les
informations sur un site qui sont perçus comme les plus
intéressants et les plus innovants pour les utilisateurs

47
FOCUS GROUP
4 types de focus group :

la compréhension des tendances

sert généralement à donner du sens aux informations récoltées
lors d’un questionnaire ou d’observations. Il permet de déterminer
les causes des comportements des utilisateurs.

48
FOCUS GROUP
Protocole :
2 personnes : un modérateur et un observateur (pour la prise
de notes)
Définir différents thèmes à aborder (5 ou 6 recommandés)
Limiter le groupe à 4-7 participants (timidité, temps de
parole)
Un enregistreur audio si possible

49

Une bonne disposition des participants facilite la dynamique de groupe

FOCUS GROUP
Exemple de déroulement d’un focus group

50
FOCUS GROUP
Analyse des résultats
identifier les idées émises et débattues par les
membres du groupe, et regrouper celles qui sont
proches en un thème auquel on donnera un intitulé

51
FOCUS GROUP
Analyse des résultats
utiliser la méthode des diagrammes d’affinités :
En réponse à un problème donné, chaque participant inscrit
ses idées sur des cartes.
Les participants regroupent ensuite les cartes par
catégories, en fonction de la similarité des idées

52
FOCUS GROUP

Moins coûteux en temps et en ressources qu’un ensemble

d’entretiens individuels pour le même nombre de personnes
interrogées
Émergence d’idées nouvelles (dynamique de groupe): chaque
membre peut réagir aux réponses des autres membres et ainsi donner
des idées ou informations auxquelles il n’aurait pas pensé seul

Peut produire des données imprécises ou inexactes

La faible taille du focus group ne permet pas d’obtenir des
données exploitables statistiquement, ou généralisables à une
population plus large.
Organisation pas toujours facile: il faut recruter plusieurs
participants qui devront être disponibles au même moment sur une
plage horaire assez étendue
53
FOCUS GROUP

Activité :

Un opérateur téléphonique
veut lancer un forfait
multi-packs à 100 dt/mois.

54
OBSERVATION

Quoi ?
Recueillir des données sur les utilisateurs
grâce à des observations sur le terrain.

Qui ?
L’utilisateur ou le groupe d’utilisateurs observé. Un ou plusieurs
observateurs collectent et analysent les données.

Où ?
Dans l’environnement naturel de l’utilisateur : au travail, à
domicile, à l’extérieur au cours de ses interactions sociales ou de
la réalisation d’actions spécifiques. 55
OBSERVATION
Principales techniques
Les systèmes de tracking
qui captent les comportements des utilisateurs par le biais de
mini-caméras placés dans les produits dont on souhaite observer
les usages.
Fly on the wall
se fondre dans le contexte de l’utilisateur comme « une mouche sur
un mur ». L’observateur va se tenir en retrait de la situation afin
d’éviter de l’influencer.
Shadowing (ou filature)
suivre au plus près l’utilisateur dans ses activités (littéralement
comme son « ombre »), sans intervenir directement sur la situation
observée. Toutefois, l’observateur peut poser des questions au
participant afin de mieux comprendre les raisons de certains
comportements.
56
Auto-observation
..
OBSERVATION

Identifier l’objet d’observation

Exemples :
Quels sont les usages du smartphone dans les transports en
commun ?
Comment un groupe de touristes visite-t-il un musée ?
Quelles sont les habitudes de repas chez les familles avec enfants ?
Sélectionner la technique la plus adaptée
57
Sélectionner les participants
OBSERVATION
Définir le lieu et la durée d’observation
Techniques d’observation Durée conseillée d’observation
Systèmes de tracking Quelques heures à quelques jours
Fly on the wall 1 heure
Shadowing 1 à 8 heures

Créer une grille d’observation

des informations génériques : lieu, date, heure, durée de
l’observation ;
ce qui a été observé : quelle a été la situation spécifique, sur quels
éléments s’est centrée l’observation ;
tous les patterns observés : actions de l’utilisateur, réactions, 58
verbalisations, comportements, etc.
OBSERVATION

Analyser et interpréter les résultats

Rapport d’activité

Extrait d’un rapport d’activité issu de l’observation pendant 1 heure d’un

développeur 59
OBSERVATION
Analyser et interpréter les résultats
Graphe temporel d’activité
Chaque activité est représentée dans le graphe par un point ou
par un trait plus ou moins long correspondant à sa durée

60
Graphe d’activité des moyens de communication d’un utilisateur à partir
d’une observation shadowing
OBSERVATION

Exploiter les résultats

L’observation des utilisateurs, combinée aux autres
méthodes d’exploration mobilisées dans un projet, va servir
à alimenter la suite du processus de conception.

Les données d’observation vont être synthétisées et

formalisées pour servir de base à :
la conception de personas s’appuie notamment sur les résultats
de techniques d’observation ;
la construction de scénarios d’usage (Storyboarding) : des
projections des actions futures probables des utilisateurs. Loin
d’être le fruit de l’imagination des concepteurs, ils reposent sur
des éléments recueillis au cours de l’étape d’observation ; 61
..
AUTO-OBSERVATION
EXEMPLE : PATRICIA MOORE (1985)

A 26 ans, elle se lance dans une

expérience d’auto-observation pour
comprendre « ce que cela fait d'être
vieux ».

Pendant 3 ans, elle sillonne les Etats-

Unis déguisée en une dame de 85 ans.
Sa transformation simule aussi les
changements sensoriels et physiques
liés au vieillissement.

Par cette expérience, Patricia a conçu

de nombreux produits innovants à
destination des seniors et est devenue
une figure clé du design universel.
62

https://www.youtube.com/watch?v=AzjEfozVWj0
AUTO-OBSERVATION
EXEMPLE : PATRICIA MOORE (1985)

OXO Smart-Grip
potato peelers

Universal Design

63
 PHASE D’IDÉATION
64
REMUE-MÉNINGES (BRAINSTORMING)
Objectif : générer un grand nombre
d’idées créatives

Protocole :
Réunir un petit groupe avec différents rôles et expertises
Limiter le temps (1 heure)
Aborder / traiter un problème de conception spécifique
(réfléchir aux fonctions utiles pour l’utilisateur, définir un
scénario utilisant l’outil ..)

Procédure :
Générer une grande quantité de solutions
65
enregistrer toutes les idées sans les évaluer (e.g., sur post-it)
REMUE-MÉNINGES (BRAINSTORMING)
Procédure :
Trier les idées
regrouper les idées similaires, supprimer celles qui sont
redondantes et en filtrer certaines
Evaluer et sélectionner les idées
Examiner les idées selon certains critères, définis par l’équipe
(coût, faisabilité, temps ..)
Vote des idées préférées : sélectionner les propositions les plus
populaires (celles qui plaisent le plus au groupe)

Vote des idées préférées à

l’aide de gommettes lors
d’une séance de 66
brainstorming
REMUE-MÉNINGES (BRAINSTORMING)
Procédure :
Evaluer et sélectionner les idées
Les idées peuvent être évaluées grâce à des matrices de
priorisation combinant deux critères de sélection.
Les principaux critères utilisés sont la faisabilité et le coût.

matrice 2×2 : classer les idées 67

évaluer la faisabilité de l’idée (de 1 difficile
de manière binaire dans les
à 4 facile) et son impact (de 1 faible à 4
cadrans
élevé)
REMUE-MÉNINGES (BRAINSTORMING)

Activité 1:

Quels sont les utilisateurs

potentiels de notre site
d’annonces ?

68
REMUE-MÉNINGES (BRAINSTORMING)

Activité 2:

De quoi ont besoin les utilisateurs

pour se sentir en sécurité lors de
leur interaction avec notre système ?

69
REMUE-MÉNINGES (BRAINSTORMING)

Activité 3:

Comment pourrait-on inciter les

utilisateurs à contribuer à
l’encyclopédie libre Wikipédia ?

70
CARTES D’IDÉATION

Les cartes d’idéation sont des ensembles de cartes

présentant des concepts, théories ou stratégies de
design particulières.

Elles ont pour but de stimuler la génération d’idées

nouvelles et innovantes durant des sessions
d’idéation. 71
 CARTES D’IDÉATION
BESOINS PSYCHOLOGIQUES ET UX

En permettant à l’enfant d’emporter la lumière

Public cible ? - les enfants avec lui, cette veilleuse satisfait les besoins de
Contexte d’utilisation ? - la nuit sécurité et d’autonomie.
Besoins UX à satisfaire ? - sécurité On passe alors d’un objet du quotidien banal à un
et autonomie objet plus expérientiel.
Cela constitue un bon exemple de l’impact des
besoins psychologiques sur l’expérience
utilisateur.

72

Boon Glo Nightlight

 CARTES D’IDÉATION
EXEMPLE : CARTES UX (LALLEMAND, 2015)
Le set comprend 7 cartes décrivant les besoins psychologiques fondamentaux

73

https://carinelallemand.files.wordpress.com/2015/12/ux-cards_lallemand_fr_v1.pdf
CARTES D’IDÉATION
EXEMPLE : CARTES UX (LALLEMAND, 2015)

74
 CARTES D’IDÉATION
EXEMPLE : CARTES UX (LALLEMAND, 2015)
Etape 1 - Brainstorming

-Sélectionnez de 1-3 cartes pertinentes pour votre projet.

-Posez-vous cette question : Comment concevoir notre produit / système de
manière à créer une expérience de (nom de la UX card, par ex : compétence
ou sécurité) ?

Etape 2 - Combinaison des cartes avec des éléments UX

- Pour générer plus d’idées, combinez chaque UX card avec les 12 catégories
d’éléments UX suivantes :

75

Ex: Comment les fonctionnalités du système pourraient-elles soutenir le besoin

de “sécurité” ?
PERSONAS
Un persona n’est pas un utilisateur réel, mais une
abstraction de plusieurs (i.e., traits caractéristiques les
plus fréquents)
Meilleure compréhension des utilisateurs et de leurs objectifs
Vision partagée des utilisateurs

76
PERSONAS: COMMENT LES CRÉER ?

Etape 1 : Extraire des données brutes

Recueil de données
utilisateurs
(entretiens et
observations)

77
PERSONAS: COMMENT LES CRÉER ?

Etape 2 : Identifier des variables

78
 PERSONAS: COMMENT LES CRÉER ?
Etape 2 : Identifier des variables

Types de variables :
Activités – Ce que l’utilisateur fait, à quelle fréquence et dans quel volume.
Attitudes – Ce que l’utilisateur pense du domaine du produit.
Aptitudes – Quelle formation l’utilisateur a et sa capacité d’apprentissage.
Motivation – Pourquoi l’utilisateur est-il engagé dans le domaine du produit. 79
Compétences – Les capacités de l’utilisateur par rapport au domaine et aux technologies.
(Cooper, 2004)
 PERSONAS: COMMENT LES CRÉER ?
Etape 2 : Identifier des variables

Exemple de variables comportementales de type « Activités » :

- La personne achète des premières éditions [jamais – systématiquement].
- La personne fait dédicacer ses BDs [fréquence dans l’année].
- La personne lit des BDs [nombre de BDs par année]. 80
- La personne emprunte des BDs [fréquence dans l’année].
PERSONAS: COMMENT LES CRÉER ?

Etape 3 : Représenter chaque variable sur un axe

81
PERSONAS: COMMENT LES CRÉER ?

Etape 3 : Représenter chaque variable sur un axe

Exemple:

82
PERSONAS: COMMENT LES CRÉER ?

Etape 4 : Placer les participants sur les variables

83
PERSONAS: COMMENT LES CRÉER ?

Etape 4 : Placer les participants sur les variables

Exemple:

84
PERSONAS: COMMENT LES CRÉER ?

Etape 5 : Identifier les patterns comportementaux

85
PERSONAS: COMMENT LES CRÉER ?

Etape 5 : Identifier les patterns comportementaux

Exemple:

86
PERSONAS: COMMENT LES CRÉER ?

Etape 6 : Définir et prioriser les personas

87
PERSONAS: COMMENT LES CRÉER ?

Etape 7 : Création des fiches personas (Créer pour chaque groupe un

persona sous la forme d’une fiche)
Une fiche peut prendre des formes
différentes mais elle doit à minima
contenir :
- un prénom;
- une photo ;
- un métier ;
- un âge ;
- et un récit (à la troisième personne)
permettant de comprendre les buts
poursuivis et les comportements
observés.

88
PERSONAS: COMMENT LES CRÉER ?

89
PERSONAS: COMMENT LES CRÉER ?

90
PERSONAS : EXEMPLE
Objectif:
développer une app de "foodtech" avec des produits de
type sandwich, pizza, kebab… à destination des jeunes

Caractériser le profil de l'utilisateur visé, ses

besoins, et ses contraintes

91
PERSONAS : EXEMPLE
Lisa,
a des journées bien remplies, mais ne gagne pas sa vie.
a un petit budget et mange souvent avec d'autres personnes.
ne peut pas se déplacer sur de trop longues distances de façon
autonome et libre.
⇒
aura besoin de commander à manger les jours où le temps pour faire
des courses lui manque.
voudrait pouvoir partager l'addition puisqu'elle mange avec ses
colocataires.
doit se faire livrer car il est difficile pour elle de se déplacer.

imaginer une application de "food tech" avec des fonctionnalités

telles qu'elles permettent de commander et payer des plats 92
à plusieurs avec livraison à domicile
PERSONAS

Avantages :
Empathie cognitive
capacité de se mettre à la place d'autrui, de se représenter ce qu’il
pense
Particulièrement adaptée au web (passage à l’échelle)

Inconvénients :
Distance par rapport aux utilisateurs réels
Besoin de modifier les personas en cas de nouveaux
résultats ou de contexte différent
Mauvaise définition des personas ⇒ échec 93
 PHASE DE GÉNÉRATION /
CONCEPTION
94
ICONOGRAPHIE
Quoi ?
Concevoir une icône facile à comprendre.
Qui ?
Des utilisateurs donnent leur représentation des actions à
icôniser.
Un graphiste ou designer crée les icônes qui seront
interprétées par d’autres utilisateurs.
Quand ?
La conception d’icônes intervient dès les premières
maquettes basse fidélité, puis lors de la conception de la
charte graphique.
Comment ?
Recueillir les représentations mentales de l’action à icôniser.
Dessiner des icônes à partir de ces représentations. 95
Tester la compréhension des icônes.
ICONOGRAPHIE
Icônes : image se rapportant à des objets réels, mais
stylisée de façon à ce qu’une information claire et rapide
s’en dégage
représentations métaphoriques
des objets : corbeille, disques, documents, dossiers, ..
des actions : enregistrer, lancer la reconnaissance vocale, ..
Objectif :
faire comprendre une idée en un espace réduit, en accélérant
la vitesse de perception et en augmentant la compréhension
et la mémorisation par rapport à une information
uniquement textuelle
 Laquelle vous préférez ?

1 2

97

Un exemple du panneau de préférences de Pokemon Go sans et avec icônes. Celle avec icônes est préférée
par 68% des utilisateurs interrogés (Crédits : John Schmitt)
ICONOGRAPHIE
Interprétation :
La signification donnée à une icone dépend de la
compréhension des éléments qui la structure

Le signifiant : l’élément au Les indices : viennent guider

cœur même de l’icône (une l’interprétation du signifiant (une
corbeille, un fichier, un flèche, un élément de contexte, ..) 98
dossier, ..)
ICONOGRAPHIE

Etat

Action

Etat + Action
99
ICONOGRAPHIE
Contexte :
Les icônes sont aussi interprétées en fonction de leur
contexte d’utilisation
Le contexte inclut les autres icones présentes dans
l’interface, les objets, les textes, et tout ce qui contribue aux
environnements graphiques et physiques du système.

Un homme
Un adulte

100
Un Homme Un père
ICONOGRAPHIE

Quelle signification peut avoir cette icône ?

101
ICONOGRAPHIE - EXERCICE
Conception d’icones pour un système de
communication pour les grands handicapés moteurs
aphasiques

102
ICONOGRAPHIE - EXERCICE

Edith - Environnement DIgital de Téléactions pour

Handicapés - est un système d’interface de communication
électronique permettant à des individus atteints de très
lourds handicaps de continuer à communiquer avec leur
environnement, alors que leurs ressources motrices et
verbales sont totalement déficientes.

Sur le plan technique, Edith est composé, d’une part, d’un

logiciel multimédia, adaptable et modulaire implanté sur
un PC portable et d’autre part d’un boîtier de contrôle
d’environnement.
103
ICONOGRAPHIE - EXERCICE
Le capteur de commande doit simplement délivrer un ordre logique 0
ou 1. L’interface propose séquentiellement un défilement de choix
d’actions et le sujet valide une alternative en cours de sélection. La
sélection motrice d’une fonctionnalité est donc en grande partie
exécutée par la machine, le sujet validant le choix courant.

104
ICONOGRAPHIE – MISE EN PRATIQUE
Définition de la taille de l’icone
Définition des commandes à illustrer
Définition du contexte d’usage
la culture et le cadre organisationnel dans lesquels va
être utilisée l’icône

105
Illustration du contexte culturel avec le symbole routier « Passage
d’animaux sauvages »
ICONOGRAPHIE – MISE EN PRATIQUE
Recueil et synthèse des représentations mentales
présenter chaque commande à illustrer aux
utilisateurs, puis à leur demander de dessiner la
façon dont ils se la représentent
regrouper les dessins qui se ressemblent pour chaque
commande
Les plus gros groupes seront les représentations les
plus communes chez les utilisateurs

106

Exemple de représentations recueillies pour la phrase « Vous m’énervez »

ICONOGRAPHIE – MISE EN PRATIQUE
Dessin des icônes
Test de la compréhension des icônes
Analyse et interprétation des résultats
l’icône n’est pas comprise : l’interprétation donnée
ne correspond pas du tout au sens de l’icône ;
l’icône est parfaitement comprise : la
signification donnée par l’utilisateur correspond au
sens de l’icône;
l’icône est comprise avec ambiguïté : la
signification donnée ne correspond pas exactement
au sens de l’icône, mais certains éléments sont
compris.
107
STORYBOARDING / STORYTELLING
Le storyboarding est une méthode narrative qui illustre les
interactions entre un utilisateur et un système interactif sous
forme d’une séquence d’illustrations.

Créés à partir des données de la phase d’exploration, les

storyboards mettent en scène de courts scénarios d’usage de
manière illustrée.

Ils sont aussi parfois considérés comme des prototypes basse

fidélité et présentent alors un enchaînement d’écrans

Le storytelling est la manière de raconter les étapes du

storyboard et les relier entre elles. 108
STORYBOARDING / STORYTELLING
L’équipe de conception crée les storyboards qui
seront utilisés comme support de communication
avec le commanditaire ou support d’évaluation avec
des utilisateurs.

Objectif :
créer une description réaliste de l’utilisation du
système
faire vivre une expérience positive et agréable
(voire mémorable) dans son parcours d’utilisation
du produit ou du service. 109
STORYBOARDING / STORYTELLING
Un storyboard part d'une situation de départ (= un
besoin, un désir, un problème)…
…met en scène une action qui permet d'accomplir
une tâche…
…pour arriver à une situation de résolution, de
satisfaction

110
STORYBOARDING / STORYTELLING
Un storyboard met en scène des petits bonshommes simples
dans un environnement, avec un besoin et une situation en
particulier.
Mais il n'est PAS DU TOUT question de wireframes, et surtout
pas d'intégrer des éléments d'UI.

111
STORYBOARDING / STORYTELLING

Exemple :
Dans le cadre d’un projet sur les systèmes domotiques
intelligents (smart home), Davidoff, Lee, Dey et Zimmerman
(2007) ont créé 21 concepts d’usage potentiel de la domotique
pour faciliter le quotidien d’une famille avec enfants.
Chaque concept a donné lieu à la création d’un storyboard.

112
113
STORYBOARDING / STORYTELLING
Outils de création de storyboards

https://www.storyboardthat.com
114

http://plasq.com/apps/comiclife/macwin/
TRI PAR CARTES
Objectif :
construire l’architecture de l’information et organiser le
contenu de l’application

Protocole :
Panel représentatif d’utilisateurs (en individuel ou en
groupe)
Effectuer plusieurs tris (de 3 à 10 selon la convergence
des résultats)
Préparer des cartes avec une information ou une
fonctionnalité (décrite par 1 ou 2 mots-clés)
115
TRI PAR CARTES
Procédure :
Validation des mots-clés sur les cartes (réécriture au
besoin)
Regroupement des cartes ”qui se ressemblent”
Choix d’un nom pour chaque groupe construit

Analyse des résultats :

Statistique (groupes les plus fréquemment formés)
Qualitative, basée sur les observations lors des séances

Convergence rapide vers une organisation pertinente

du contenu 116
EXEMPLE : PRINCIPE DU TRI DE CARTES APPLIQUÉ
AUX FONCTIONNALITÉS D’UN NAVIGATEUR WEB

1. Enumérer des contenus sur des cartes.

117
EXEMPLE : PRINCIPE DU TRI DE CARTES APPLIQUÉ
AUX FONCTIONNALITÉS D’UN NAVIGATEUR WEB

2. Grouper : Demander aux utilisateurs de les

classer dans des groupes.

118
EXEMPLE : PRINCIPE DU TRI DE CARTES APPLIQUÉ
AUX FONCTIONNALITÉS D’UN NAVIGATEUR WEB

3. Nommer : Demander leur de nommer les groupes

constitués.

119
TYPES DE TRI PAR CARTES
On distingue principalement 2 types de tri par
cartes:

ouvert : les utilisateurs classent les cartes dans des

groupes qu’ils définissent eux-mêmes

fermé : les utilisateurs classent les cartes dans des

groupes déjà définis

120
TRI PAR CARTES - ACTIVITÉ
On se propose de réaliser un éditeur de texte qui
autorise les fonctions suivantes:
Enregistrer, enregistrer sous, nouveau document,
supprimer sélection, envoyer comme mail, quitter,
annuler, répéter, insérer tableau, préférences,
style de caractères, formats de paragraphe,
casse normale, casse italique, casse gras, casse souligné,
ouvrir fichier, fermer ficher, ouvrir comme copie,
augmenter taille de casse, réduire taille de casse,
changer fonte, insérer note de bas de page, couper, copier,
coller, insérer saut de page, repaginer, insérer image,
imprimer, aperçu avant impression, mise en page,
affichage page, rechercher mot, remplacer mot,
page suivante, page précédente, vérification orthographe, 121
créer table des matières, compter nombre de mots, aide
MAQUETTAGE / PROTOTYPAGE
Consiste à simuler l’interface d’un produit, de façon
complète ou partielle, afin d’obtenir des informations
sur l’interaction des utilisateurs avec le futur produit

Vise à construire l'interface de manière itérative

Effectué suffisamment tôt, il permet de détecter les

problèmes d’utilisabilité et de vérifier les besoins des
utilisateurs avant le codage complet.

Favorise l’optimisation du processus et des coûts de

développement 122
MAQUETTAGE / PROTOTYPAGE
Croquis (sketch) : aperçu global de l’interface (idée générale)

123
MAQUETTAGE / PROTOTYPAGE
Zoning
sert à identifier les principales zones. Ce schéma en noir et blanc
permet de lister les contenus, pour ne pas en oublier et à
commencer à hiérarchiser l’information dans la page, par la
proportion des blocs ou des nuances de gris.
Outils : papier et crayons, LibreOffice, Wireframe.cc, Cacoo, etc.

124
MAQUETTAGE / PROTOTYPAGE
Wireframe (fil de fer) :
complète le zoning en rentrant dans le détail de chaque bloc, avec du
vrai-faux contenu.
est généralement de basse fidélité : il ne s’agit que de traits généralement
en noir et blanc ou teintes de gris, qui démontrent la structure du site.

Outils : Balsamiq Mockups, Axure, Visio, iPlotz, ProtoShare, ..

125
MAQUETTAGE / PROTOTYPAGE
Mock-Up : la maquette visuelle (statique) de la charte
graphique
permet d’obtenir un rendu extrêmement fidèle visuellement à ce
que sera le produit final,

Outils : Sketch, Photoshop,..

126
Wireframe transformé en maquette graphique
127
 Wireframe transformé en maquette graphique

Mockup

Wireframe

128
MAQUETTAGE / PROTOTYPAGE
Prototype : version incomplète d’une interface (avec
interactions)
Outils : UXPin, outils de développement HTML/CSS

129
EXEMPLE : PAGE WEB

130
Croquis Maquette Prototype
 EXEMPLE : INTERFACE BUREAU

Maquette Interface finale

131
Prototype
Gestionnaire de paquets Ubuntu
EXEMPLE : APP MOBILE

132
Idée Détails Visualisation
 PHASE D’ ÉVALUATION
133
INSPECTION COGNITIVE (COGNITIVE WALKTHROUGH)
Objectif :
évaluer le système en se mettant à la place de l’utilisateur

Protocole :
Spécifier des scénarios (tâches et contexte)

Procédure :
Évaluation en imaginant ce que ferait l’utilisateur pour
résoudre la tâche
comprend-il les messages, le comportement du système ?
Interprétation et prise en compte des résultats
134
INSPECTION COGNITIVE (COGNITIVE WALKTHROUGH)
Exemple

Séquence d’actions optimale pour régler une alarme avec l’appli Wake

135

Actions
INSPECTION COGNITIVE (COGNITIVE WALKTHROUGH)

Fiche de synthèse
pour l’évaluation
de l’action 3 par
inspection
cognitive

136
TEST A/B (SPLIT TESTING)
Objectif :

Méthode d’évaluation qui consiste à comparer deux

versions d’un même système afin de déterminer laquelle
obtient les meilleurs résultats.

Les résultats sont souvent mesurés en termes de taux de

conversion (nombre d’utilisateurs réalisant une action
particulière)

137
TEST A/B (SPLIT TESTING)
Protocole :
Deux versions d’une même interface, chacune avec une
variante du composant à tester (e.g., la couleur d’un bouton)
Définir un objectif (e.g., un clic sur le bouton testé, une vente)
Choisir une métrique pour quantifier l’intérêt pour chaque
version (e.g., le nombre de clics sur le bouton divisé par le
nombre de vues)

138
TEST A/B (SPLIT TESTING)
Extension pour tester plus de deux versions ou plus de
deux composants : le test multivarié

139
TEST A/B
Procédure :
Quand un utilisateur arrive sur l’interface, proposer au
hasard l’une des deux versions
Calculer le nombre d’objectifs atteints pour chaque version

140
TEST MULTIVARIÉ – EXEMPLE (1)
Pour la campagne présidentielle de B. Obama en 2008, plusieurs
versions de la page d’accueil :
Six médias différents (images et vidéos)
Quatre labels sur le bouton ”call-to-action”

141
TEST MULTIVARIÉ – EXEMPLE (2)
Métrique utilisée : nombre d’inscriptions / nombre de
vues

142
TEST MULTIVARIÉ – EXEMPLE (3)
Meilleur résultat : le label ”learn more” et une image

143
AUDIT ERGONOMIQUE
Objectif : évaluation des
interfaces par des experts en
ergonomie

Protocole :
Dans l’idéal, évaluation par plusieurs
experts indépendants et confrontation
de leurs résultats
En pratique, évaluation par un expert
en ergonomie et relecture par un
expert du domaine

144
AUDIT ERGONOMIQUE
Extrait d’une grille d’audit

Rapidité de l’audit
Pistes pour prioriser les étapes suivantes

Coût de l’audit 145

Aucun retour des utilisateurs

LES TESTS UTILISATEURS

146
LES TESTS UTILISATEURS
Le test utilisateur (test d’utilisabilité)
Permet d'observer directement la façon dont l'utilisateur se
sert d'une application et ainsi identifier concrètement les
véritables difficultés qu'il rencontre.

147
LES TESTS UTILISATEURS
Les différents types de tests utilisateurs

Les tests en situation contrôlée

Menés en laboratoire d’utilisabilité (usability lab) ou dans tout

autre contexte contrôlé

Dans les laboratoires d’utilisabilité, le participant est placé dans

une salle de test séparée d’une salle d’observation par une glace
sans tain.

Un équipement audiovisuel enregistre ses interactions avec le

système sous plusieurs angles.

Dans la salle d’observation, un expert au moins observe le 148

déroulement du test sans perturber l’activité de l’utilisateur.
LES TESTS UTILISATEURS
Les différents types de tests utilisateurs

Les tests en contexte naturel

Les participants sont sollicités chez eux, sur leur lieu de travail,
dans la rue… ou tout autre endroit dans lequel s’effectue
d’ordinaire leurs interactions avec le système.

Le principe du test ne change pas : l’utilisateur est invité à

réaliser plusieurs tâches avec un système. Ses interactions sont
observées puis analysées..

149
LES TESTS UTILISATEURS
Les différents types de tests utilisateurs

Les tests à distance

Il s’agit de situations de tests où l’observateur et l’utilisateur sont
géographiquement distants.

Ils présentent l’avantage de pouvoir mobiliser rapidement un grand

nombre d’utilisateurs cibles, sans se soucier de leur localisation.

Il existe deux types de tests à distance :

les tests à distance synchrones sont conduits en temps réel par
l’évaluateur, qui gère et observe la passation à l’aide d’un système
spécifique ou par vidéoconférence ;
les tests à distance asynchrones sont conduits par des systèmes
automatiques, qui gèrent les passations individuelles sans
intervention directe de l’évaluateur. Ils offrent la possibilité de 150
faire passer simultanément un grand nombre de participants.
LES TESTS UTILISATEURS
Les différents types de tests utilisateurs

Les tests utilisateurs en mode guérilla

Bien souvent, il s’agit de solliciter spontanément des utilisateurs

cibles, dans un lieu public, pour l’évaluation d’un système.

151
LES TESTS UTILISATEURS
Procédure

Disposer d’un prototype (au moins partiellement)

opérationnel
Cibler ses utilisateurs
on estime que 5 utilisateurs permettent de révéler 80% des problèmes
d’utilisabilité
Définir des scénarios d’utilisation (environ 5 scénarios)
Rédiger un guide de consigne pour accueillir l’utilisateur
Définir une grille d’observation
Identifier un lieu de test avec le matériel nécessaire

152
LES TESTS UTILISATEURS –SCÉNARIOS

153
LES TESTS UTILISATEURS –CONSIGNE

Introduction

Afin d’améliorer la qualité du logiciel XXX, nous nous intéressons à

la manière dont les utilisateurs interagissent avec son interface.
Dans ce cadre, vous avez été identifié(e) et sollicité(e) en tant que
futur utilisateur du logiciel afin que nous puissions observer votre
activité à l’aide de plusieurs enregistrements audiovisuels. Ces
observations nous serviront à dégager les éventuels problèmes liés
à l’ergonomie du logiciel XXX.

154
LES TESTS UTILISATEURS –CONSIGNE

Close de confidentialité

Le test-utilisateur auquel vous participez servira uniquement à

recueillir des informations essentielles à l’amélioration de l’ergonomie
du logiciel XXX. En aucun cas le test-utilisateur pourra servir
d’autres fins. Tous les enregistrements qui seront effectués durant
votre passation seront exclusivement exploités par Guillaume
Gronier (psychologue – CRP Henri Tudor) soumis au code de
déontologie des psychologues pour le respect moral et psychique de
votre personne. L’exploitation de ces enregistrements par d’autres
personnes ne pourra pas avoir lieu sans votre accord préalable. La
diffusion des résultats extraits du test-utilisateur garantira votre
total anonymat.
Pour toutes questions, n’hésitez pas à vous adresser à Guillaume
Gronier. 155
Nous vous remercions vivement pour votre collaboration !
LES TESTS UTILISATEURS –CONSIGNE

Consigne

Vous êtes face à une application web nommée XXX. Cette

application est un support à une méthode d’anticipation des
compétences. Nous allons vous présenter six situations dans
lesquelles vous allez être amené(e) à réaliser certaines tâches
avec l’application. Dans la mesure du possible, nous vous
demandons en même temps que vous réalisez les tâches, de
penser à voix haute, c’est-à-dire de verbaliser ce que vous
pensez.
N’hésitez pas à exprimer vos difficultés et vos impressions
qu’elles soient positives ou négatives.
N’hésitez pas à poser vos questions aux expérimentateurs.
Si vous êtes prêt(e), commençons !
156
LES TESTS UTILISATEURS – GRILLE D’OBSERVATION

157
QUESTIONNAIRES D’UTILISABILITÉ/SATISFACTION
Objectif : résumer économiquement l’avis de nombreux
utilisateurs
Protocole :
Panel représentatif d’utilisateurs (destinataires du questionnaire)
Choisir des moyens de diffusion et de récupération (e.g., application en
ligne, email, version papier)
Choisir comment analyser les résultats (automatiquement/manuellement)
Utiliser un type de questions adapté :
Questions ouvertes, dirigées, QCM
Échelle, classements
Respecter certaines règles (sociologie) pour rédiger correctement les
questions (e.g., forme affirmative, concision, sens équivalent quelque soit
l’utilisateur)
158
QUESTIONNAIRE – EXEMPLE DE QUESTIONNAIRE DE
MESURE DE L’UTILISABILITÉ : SYSTEM USABILITY SCALE (SUS)

5 – [3] = 2)

159
QUESTIONNAIRE – EXEMPLE DE QUESTIONNAIRE DE
SATISFACTION:
DEEP (DESIGN-ORIENTED EVALUATION OF
PERCEIVED USABILITY)

160
EN RÉSUMÉ : CONCEPTION CENTRÉE
UTILISATEUR

161