Diplômé de : Nancy
En : Sciences cognitives appliquées à l’ergonomie des interfaces
Il y a : longtemps
Carrière : salarié dans des boites de prestation de service
J’aime : Notion.so
J’aime pas : la signalétique de TCL
Introduction au design en expérience utilisateur
Epitech Digital
Bachelor en web marketing
baptiste@roullin.net
Diapositives : mode d’emploi
Plan de cours
Partie ⅕
Aujourd’hui quelques bases
Moi en quelques mots
Et vous ?
Règles du jeu
Pourquoi on est là
1. Définitions
Beaucoup de termes différents
Ergonomie
IHM
Architecture de l’information
Facteur humain
Utilisabilité
Design de services
Design thinking
Graphisme
Conception centrée utilisateur
Product design
UX, UI, XD, CX…
Etc.
Quizz
UX : votre définition
Pas une réponse mais quatre
a. Une méthode : la conception centrée sur l’utilisateur
Méthode ≠ recette de cuisine qui marche à tous coups
Méthode = cadre
Une méthode avec deux principes
A. Adapter le système à l’humain, pas l’inverse.
B. Impliquer les personnes concernées pour connaitre leurs besoins réels
"Consulter la météo" peut cacher des besoins très différents.
b. Une méthode, trois critères
Utile = répond à mes besoins
Utilisabilité = répond à mes besoins facilement et précisément
L’utilisabilité n’est pas une option
L’imbitable tue
Acceptabilité
VS
Une méthode, trois critères généraux
Différence avec d’autres concepts en marketing
c. Une méthode, des spécialités
Architecture de l’information
UI
Design d’interactions
design graphique
Contenu
Rédaction
Production de vidéos
Iconographie
Support client
Tout est design
UX : pourquoi ce terme est nécessaire
On passe des sciences de l’ingénieur à une approche beaucoup plus globale.
⇨⇨⇨⇨⇨⇨⇨⇨⇨⇨⇨⇨
Nielsen & Norman : rappelez-vous de ces noms
Les deux dimensions de l’expérience
Tout voir sous l’angle du service
Design de service est plus large que design UX, mais une interface est toujours un point de contact parmi d’autres d’un service plus large.
Architecture de l’information
Définition
Comment l’information est répartie entre les pages et structurée dans une page
quels sont les moyens pour permettre à l’utilisateur d’accéder à l’information
L’UI c’est important, pour le meilleur et pour le pire
UI = communication visuelle
L’UI est au service de l’expérience utilisateur
L’UI est une spécialité en soi, je ne parlerai pas beaucoup d’UI ou de graphisme.
Design d’interaction
Chaque médium a sa spécificité.
Avec le numérique, on conçoit des interfaces pour des écrans interactifs
Design d’interaction
Résumons
2. Plan du cours
3. Objectifs du cours
Plus largement
Plus largement
PAUSE
Exercice 30 min
Réponses possibles : utile et utilisable
Réponses possibles : utile mais peu utilisable
Le "centre de contrôle" de Mac OS
Utile car permet de centraliser des raccourcis à des paramètres. Ça n’existait pas avant 2020.
Peu utilisable car la mise en page est complexe. Cela entraine des trajets de souris inutiles car les boutons ne sont pas toujours au même endroit d’un paramètre à l’autre.
Réponses possibles : utilisable mais pas utile
L’application Yo, dotée d’une fonction unique et simplissime : envoyer le message "yo" à un contact.
Réponses possibles : utilisable, utile, mais mal accepté socialement
La reconnaissance faciale pour déverrouiller son téléphone : l’interaction est devenue un réflexe pour certains mais suscite la méfiance chez d’autres.
Un peu d’histoire
L’UX c’est vieux comme le monde
Dans l’antiquité grecque, on trouve un grand souci du détail pour adapter l’environnement à l’être humain. Source
Gradins d’amphithéatre adaptés à la position des jambes et à la position du postérieur.
Traité d’Hippocrate détaillant la bonne posture pour un chirurgien et la bonne disposition de ses outils et source d’éclairage.
Révolution industrielle : un intérêt pour l’humain très calculé
Sur une chaine de montage, le travail est spécialisé et réduit à des gestes simples. L’ouvrier est étudié dans son comportement, mais pour améliorer sa productivité, pas son bien-être.
Chaplin, Les Temps modernes
Étudier le moindre mouvement de l’ouvrier pour sa productivité
Cette étude passe par des techniques pour décomposer visuellement le mouvement.
Fresque à la Part-Dieu, inspirée de la technique de la chronophotographie, inventée par Etienne-Jules Marey
Étudier le moindre mouvement de l’ouvrier pour sa productivité
En attachant des lampes au membres d’un travailleur et en le photographiant avec une exposition longue, on peut voir les gestes inutiles et les optimisations potentielles.
Light painting – Lillian Moller Gilbreth & son mari Frank Bunker Gilbreth
Après guerre : démocratisation des technologies de communication
Certaines interfaces ne sont pas évidentes et ont du être testées auprès d’utilisateurs. Ainsi la disposition des numéros sur les premiers téléphones à pavé numérique.
Année 70/80 : Naissance de l’informatique personnelle
Premier prototype de souris (Engelbart)
Essais d’alternative chez Xerox PARC (Alan Kay, Larry Tesler…)
Combo console de raccourcis + clavier + souris à 3 boutons (Engelbart)
Partie ⅖
Plan du cours
Au programme aujourd’hui
Résumé des épisodes précédents
Vous vous rappelez de quoi ?
UX, plusieurs définitions
Une méthode, trois critères
Utilisabilité = répond à mes besoins facilement et précisément
Exemple : utile mais peu utilisable
Le "centre de contrôle" de Mac OS
Utile car permet de centraliser des raccourcis à des paramètres. Ça n’existait pas avant 2020.
Peu utilisable car la mise en page est complexe. Cela entraine des trajets de souris inutiles car les boutons ne sont pas toujours au même endroit d’un paramètre à l’autre.
Une méthode, des spécialités
Architecture de l’information
UI
Design d’interactions
design graphique
Contenu
Rédaction
Production de vidéos
Iconographie
Support client
…
UX : pourquoi ce terme est nécessaire
On passe des sciences de l’ingénieur à une approche beaucoup plus globale.
⇨⇨⇨⇨⇨⇨⇨⇨⇨⇨⇨⇨
Les deux dimensions de l’expérience
1. Pourquoi il faut se confronter au réel
Hein, pourquoi
2. Psychologie : quelques repères
Voir
Illusions d’optique : l’esprit humain contruit les scènes qu’il voit
Le cerveau construit l’image la plus cohérente et pertinente dont il est capable à partir des infos qu’il a. Le cerveau ne regarde jamais des éléments isolés mais toujours en contexte. Quand le contexte est ambigu il se fait piéger.
Les lois de regroupement de la gestalt
Comment l’esprit décide si des éléments appartiennent à un même groupe
Gestalt = pattern = motif
Loi de proximité
Loi de similarité
Loi de l’oppposition entre figure et fond
Loi de continuation
Loi de clôture (closure)
Motif de mouvement des yeux
Des études d'eye tracking montrent qu’un internaute a tendance à lire une page Internet toujours de la même façon
Une page d’article est lue selon un motif en F
Motif de mouvement des yeux (2)
Une page plutôt de type landing page sera lue selon un motif en Z
Cécité aux bannières
Nos yeux glissent sur tout ce qui ressemble à une pub
Lecture en diagonale
Hors d’un contexte de lecture suivie, on scanne une page en cherchant les mots importants
On lit en s’aidant de la silhouette des mots
Je cherche entrée de menu courte, ressemblant à "paramètres" et la trouve difficilement
Mémoriser
Il est plus facile de reconnaitre que de se rappeler
Il est plus facile de reconnaitre que de se rappeler (2)
Une interface graphique permet de reconnaitre le nom des commandes
Une interface en mode texte exige de se rappeler du nom des commandes
Il est plus facile de reconnaitre que de se rappeler (3)
🤔 Icônes sans libellé
✅ Récap de mes choix aux étapes précédentes
Chunking : décomposer une information en plusieurs
Notre mémoire de travail se rappelle plus facilement en "tranches"
✅ 12 56 89
🤔 125689
Raisonner et décider
La loi de Hick (1952)
Le temps pour trouver un item dans une liste croit progressivement avec la longueur de la liste.
La loi de Hick (1952)
Ou pourquoi ajouter juste une entrée dans un menu n’est pas anodin
Biais de raisonnement
On utilise des raccourcis de raisonnement pour être efficaces. Ca ne veut pas dire qu’on est bêtes ou irrationels.
Biais de raisonnement : aversion à la perte
Notre degré de mécontentement est plus fort en perdant 10€ que notre degré de contentement en gagnant 10€.
Biais de raisonnement : aversion à la perte
Stress marketing
Effet Ikéa
Agir
Mémoire motrice
Un type d’apprentissage et d’habileté spécifique
Prise en main
Loi de Fitt
Modélisation mathématique de la durée pour atteindre une cible, proportionnellement à la distance et à la taille de la cible
3. Sociologie
Sociologie
Exemple : la manière dont on s’informe
Exemple : deux sites de luxe, deux graphismes opposés
Le design d’un site peut être un dialogue avec les visiteurs autour des codes admis
4. Un concept utile : l’usage
L’usage
Il rassemble psychologique, sociologique, économique et technique.
Exemple : apparition soudaine des plateformes de livraison de repas
PAUSE
5. Apprendre des utilisateurs, OK mais comment ?
Panorama de quelques techniques de recueil de données
Observation
Observation participante ou non-participante (shadowing)
Entretien en mode guérilla
Guerilla = recrutement sur le tas
Entretien
Plus on s’éloigne de l’environnement naturel de la personne, plus on s’approche de conditions de "laboratoire".
Variantes : dirigé, non-dirigé, semi-dirigé
Focus group
Sonde culturelle
Donner un kit à une personne pour lui permettre de noter ses impressions toute seule, en quelque semaines. Contenu possible :
Un appareil photo jetable
Un journal de bord
Des sacs pour collecter des objets
Un poster vierge à compléter
Sondage
Données existantes
Analytics
Données publiques
Cartographie de ces méthodes selon deux axes
Cartographie de ces méthodes selon deux axes
Que faire ensuite de toutes ces données ?
Des personas, mais un peu de patience
6. Exo : entretien
Étapes
Rédaction du protocole
Guide d’entretien : une partie du protocole
Exo : mise en situation
Objectifs de l’exercice
Exo : Consignes
Conseils
Écueuils
Relances
Restitution à chaud
7. EXO : persona
Perso quoi ?
Ce qu’une persona n’est pas
Exo : Consignes
Exo à la maison pour le prochain cours
Organisation de la soutenance
Partie ⅗
Plan du cours
Au programme aujourd’hui
Résumé des épisodes précédents
Vous vous rappelez de quoi ?
Parce que les gens n’en font qu’à leur tête
Parce qu’il faut sortir des clichés, même positifs
Entretien en mode guérilla
Guerilla = recrutement sur le tas
Entretien
L’usage
Il rassemble psychologique, sociologique, économique et technique.
Exemple : apparition soudaine des plateformes de livraison de repas
Cartographie de ces méthodes selon deux axes
2. Présentation de vos personas
Une persona n’est pas (tout à fait) une cible commerciale
Utilisation des personas
Servir de référence immédiate dans les discussions
Utilisation des personas : matrice fonctionnelle
Utilisation des personas : user story en méthode Agile
3. Modéliser l’expérience
Le but : représentation globale d’une séquence de vie
Plusieurs méthodes selon l’objectif
Carte d’expérience
Le quotidien d’une personne, à la première personne, pas forcément tourné vers un service particulier.
Carte d’experience
Service blueprint
Blueprint = plan technique d’un bâtiment, d’un véhicule…
Service blueprint
Service blueprint = modélisation des points de contact (touchpoints) entre un usager et un service.
service blueprint
Customer journey
Parcours d’un client : acquisition, navigation sur le site, conversion.
Modéliser l’expérience peut se faire à plusieurs phases d’un projet
Bien des formats sont possibles : storyboard
Bien des formats sont possibles : roue
EXO : raconter la semaine d’un étudiant avant un examen
4. Générer des idées
Fig. 1 : Processus d’idéation sauvage
Design thinking
Diverger pour mieux converger
Techniques
Exemple
Exemple : LEGO® Serious Play™
Exo : crazy 8 remixé
Objectif : En 15 minutes, dessiner 3 pages d’accueil différentes d’appli d’aide à la révision
Amorces
5. Organiser l’information
Architecture de l’information
Définition
Comment l’information est répartie entre les pages et structurée dans une page
quels sont les moyens pour permettre à l’utilisateur d’accéder à l’information
L’architecture de l’information est héritière d’une riche histoire dans l’organisation des connaissances
Problème fondamental : comment ranger et retrouver des documents
Solution pour ranger
Classification Dewey : un plan de classement prédéfini.
Comment ranger un site ?
Plusieurs approches peuvent cohabiter
Engie.fr : par thème et par cible
Plusieurs approches peuvent cohabiter
Liberation.fr : par thème et par date
Classement par thème : arborescence
Plusieurs arborescences sont possibles
Un site a-t-il toujours une arborescence ?
Twitch a-t-il une arborescence ?
Oui, mais elle n’est pas reflétée directement dans la navigation principale.
Tri de carte
Tri de carte
Inventorier le contenu
Rassembler les items dans des catégories, nommer les catégories
Potentiellement, confronter les différents tris de carte faits par chacun.
Variantes
Tri de cartes : EXO
Conseils
Partie ⅘
Plan du cours
Au programme aujourd’hui
1. Résumé des épisodes précédents
Vous vous rappelez de quoi ?
Tri de carte
Méthode collaborative pour
Organiser le contenu
Nommer le contenu
Tri de carte
2. Naviguer dans l’information
Design d’interaction
Chaque médium a sa spécificité.
Avec le numérique, on conçoit des interfaces pour des écrans interactifs
Trois niveaux d’interactions
A. Paradigme d’interaction
B. Patterns d’interactions
Mapping naturel : correspondance entre une interface et le système
Mapping : l’exemple des plaques de cuisson
Mode
Mode : Action qui va rendre possible un ensemble d’autres actions.
Mode
Révélation progressive ("progressive disclosure")
Ou plus simplement : ne pas afficher tout d’un coup
Plusieurs arborescences sont possibles
Twitch a-t-il une arborescence ?
Oui, mais elle n’est pas reflétée directement dans la navigation principale.
Exemple
Hiérarchie
Hub
Dashboard
Poupées russes
Liste / détails
Recherche
Un site peut être tout entier construit autour de la recherche
Onglets
Onglets++
Grille
3. Zoning, prototypes, maquettes… pourquoi, comment
Pourquoi prototyper ou maquetter ?
Pourquoi prototyper ou maquetter ?
Plus fondamentalement, c’est un moyen de réfléchir
Prototyper, une pratique ancienne
Étude pour La Cène, Léonard de Vinci
Prototyper, une pratique ancienne
Prototyper, une pratique dans tous les domaines
Prototyper, une pratique dans tous les domaines
Le bon degré de fidélité au bon moment
⇨⇨⇨⇨⇨⇨⇨⇨⇨⇨⇨⇨
Même avant la maquette graphique, plusieurs degrés sont possibles
Il y a plusieurs types de fidélité
Contenu
Animations
Cinématique
4. Évaluer une interface
Méthode principale d’audit : heuristiques ou analyse experte
Les heuristiques de bastien et scapin
Explication des critères
Les heuristiques de Nielsen
Autre méthode : checklist précise
À quoi ça sert : état des lieux détaillé pour alimenter un backlog
À quoi ça sert : axes de travail
À quoi ça sert : prendre du recul sur son travail
Les heuristiques de bastien et scapin : exemples
1. Guidage
Guidage ✅
Guidage ✅
Guidage ❌
Guidage ✅
Guidage ✅
2. Lisibilité
Lisibilité ❌
3. Charge de travail
Charge de travail ✅
Charge de travail ✅
Charge de travail ✅
Charge de travail ✅
4. Contrôle et liberté
Contrôle et liberté ✅
Contrôle et liberté ✅
Contrôle et liberté ✅
5. Adaptabilité
Adaptabilité ✅
Adaptabilité ✅
6. Gestion des erreurs
Prévention puis correction puis possibilité de revenir en arrière
Gestion des erreurs ✅
Gestion des erreurs ✅
Gestion des erreurs ✅
7. Cohérence
Cohérence ❌
Cohérence ❌
8. Signification des codes et dénominations
Signification des codes et dénominations ❌
Signification des codes et dénominations ❌
Signification des codes et dénominations ✅
À vous : quizz collectif
Qu’est-ce qui ne va pas ?
Guidage, signification
Qu’est-ce qui ne va pas ?
Cohérence, signification
Qu’est-ce qui ne va pas ?
Gestion des erreurs, signification
Qu’est-ce qui ne va pas ?
Guidage
Qu’est-ce qui ne va pas ?
Guidage, gestion des erreurs, cohérence
Qu’est-ce qui ne va pas ?
Prévention des erreurs
Qu’est-ce qui ne va pas ?
Prévention des erreurs, guidage
Qu’est-ce qui ne va pas ?
Qu’est-ce qui ne va pas ?
Regroupement
Qu’est-ce qui ne va pas ?
Adaptabilité
Qu’est-ce qui ne va pas ?
Lisibilité
Exo individuel : audit du site du Ministère des armées
Partie ⁵⁄₅
Au programme aujourd’hui
Résumé des épisodes précédents
Vous vous rappelez de quoi ?
Naviguer dans l’information
Design d’interaction
Chaque médium a sa spécificité.
Avec le numérique, on conçoit des interfaces pour des écrans interactifs
B. Patterns d’interactions
Mapping naturel : correspondance entre une interface et le système
Mapping : l’exemple des plaques de cuisson
Mode
Mode : Action qui va rendre possible un ensemble d’autres actions.
Mode
Révélation progressive ("progressive disclosure")
Ou plus simplement : ne pas afficher tout d’un coup
Plusieurs arborescences sont possibles
Exemple
Correction de l’audit
Déroulement
À vous la parole
Bastien & Scapin : les critères d’origine
Différences avec ma liste :
Lisibilité est remonté d’un niveau
Compatibilité est considéré comme de l’adaptabilité
"Contrôle explicite" remplacé par "liberté et contrôle"
Tester ses choix : comment, pourquoi
Pourquoi tester ?
Pourquoi tester ?
Vérifier la validité de vos choix
Un levier de négociation
Tester, c’est suivre une démarche scientifique
D’aileurs, on a toujours testé (1)
Certaines interfaces ne sont pas évidentes et ont du être testées auprès d’utilisateurs. Ainsi la disposition des numéros sur les premiers téléphones à pavé numérique.
D’aileurs, on a toujours testé (2)
Premier prototype de souris (Engelbart)
Essais d’alternative chez Xerox PARC (Alan Kay, Larry Tesler…)
Combo console de raccourcis + clavier + souris à 3 boutons (Engelbart)
Quand est-ce qu’on teste ?
Quand est-ce qu’on teste ?
Avec quel format on teste ?
Qu’est-ce qu’on teste ?
Selon quel déroulement ?
Scénario
Test des cinq secondes
Test ouvert
Test d’alternative
Modéré : en présentiel ou à distance
En présentiel
À distance, par exemple avec l’outil Lookback
Modéré : en labo
Non modéré
L’intérêt des tests non-modérés ? Des stats !
Non modéré : test A/B
Test A/B proprement dit (bi-varié)
Test A/B multi-varié
Test A/B : exemple de résultat
Démo de Google Optimize
Préparer le test
Combien de participants
Au début du test
Après le test
Exo : étude de cas de tests utilisateurs
Rédaction de protocole
Consignes
Objectifs : exemples
Cibles : exemples
Interprétation des résultats
Conversion
