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
Introduction à l’ergonomie et au design UX
baptiste@roullin.net
Diapositives : mode d’emploi
Plan du cours
Moi en quelques mots
Et vous ?
Règles du jeu
Plan du cours
Objectifs du cours
Partie ¼
Concepts, méthodo et panorama des méthodes
1 – Concepts
Beaucoup de termes différents
Ergonomie
Utilisabilité
Design de services
Design UX
Design CX
Design thinking
Design UI
Conception centrée utilisateur
Product design
Design d’interaction
etc.
Quizz
UX : votre définition
Expérience utilisateur, un concept-polysémique
L’UX comme approche
UI : partie émergée
L’UI est au service de l’expérience utilisateur
L’UI est au service de l’expérience utilisateur
| UI = communication visuelle |
En résumé
Trois critères généraux pour améliorer l’expérience
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
Quizz : est-ce qu’il manque un critère selon vous
Les alvéoles de Peter Morville
Il existe d’autres frameworks
Les cartes UX de Lallemand
Il existe d’autres frameworks
PAUSE
Quizz 15 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.
"Ergonomique" n’est jamais une qualité dans l’absolu
"Consulter la météo" peut cacher des besoins très différents.
2 – Un peu de culture des interfaces
Un siècle de culture graphique et technologique pour savoir utiliser cette interface
Première révolution : utiliser en autonomie une interface interactive
Exemple du système PLATO à l’université de Dartmouth
Enorme progrès : des temps de réaction de moins de 10 seconde !
Seconde révolution : l’informatique personnelle
Un ordinateur à soi
Seconde révolution : les interfaces graphiques
Seconde révolution : les interfaces graphiques
Un type d’interface résumé par un acronyme : WIMP
Seconde révolution : les interfaces graphiques
Métaphore du bureau
Troisième révolution : le Web
Troisième révolution : le Web
importances des conventions et des habitudes
importances des conventions et des habitudes
Exemple 1 : le code graphique pour un lien est devenu de plus en plus ouvert.
importances des conventions et des habitudes
Exemple 2 : par le passé il fallait signaler fortement qu’une zone était interactive.
importances des conventions et des habitudes
importances des conventions et des habitudes
Exemple 3 : l’ordre des boutons d’action est différent entre Mac d’un coté, Windows et le web de l’autre.
PAUSE
3 – Conception centrée sur l’utilisateur
En résumé
Grandes étapes de conception
Diverger, converger, itérer
Panorama des méthodes : diagnostic
Panorama des méthodes : conception
Panorama des méthodes
Méthode pour la recherche
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 existantes
Données publiques
Cartographie de ces méthodes selon deux axes
Méthode pour la modélisation
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
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.
Méthode pour le prototypage
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é
Wireflow
Méthodes pour l’évaluation
Scénario
Test des cinq secondes
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
Partie ²⁄₄
Comprendre les utilisateurs
Plan du cours
Résumé des épisodes précédents
Expérience utilisateur, un concept-polysémique
Trois critères généraux pour améliorer l’expérience
Troisième révolution : le Web
Grandes étapes de conception
Diverger, converger, itérer
Panorama des méthodes : diagnostic
Panorama des méthodes : conception
Panorama des méthodes
Au programme aujourd’hui
1. Pourquoi il faut se confronter au réel
Parce qu’on peut imaginer le mauvais besoin
Parce que les gens n’en font qu’à leur tête
Lignes de désir
Parce que les gens n’en font qu’à leur tête
Parce qu’il faut sortir des clichés, même positifs
Les gens sont variés
En résumé
Un peu d’histoire des études utilisateur
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)
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
Comment rendre les gens accros ?
Nudge, captologie, ludification, darks patterns…
Un exemple des grandes promesses d’un modèle
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
Un concept utile : l’usage
Une convention collective autour d’une pratique concrète
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
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 ?
La méthode artisanale : les personas
Ce qu’une persona n’est pas
Que faire ensuite de toutes ces données ?
Que faire ensuite de toutes ces données ?
La méthode industrielle : plateforme de données à l’échelle de l’entreprise
Méthode d’entretien
Étapes
Rédaction du protocole
Remarques
Exemple
EXO
Partie ¾
Des clés pour une interface de qualité
Plan du cours
Au programme aujourd’hui
Résumé des épisodes précédents
1. Pourquoi il faut se confronter au réel
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
Cartographie de ces méthodes selon deux axes
Checklist du concepteur
Checklist du concepteur : niveau avancé
Vos projets
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 / wireflow
Comment auditer un site
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
Avoir une estimation globale de la qualité d’un site
Avoir un état des lieux détaillé pour alimenter un backlog
À 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é ❌
VS
3. Charge de travail
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é
Cas pratiques : formulaires
Plusieurs types de formulaires
Il n’est pas obligatoire d’aligner les champs
les placeholders sont rarements justifiés
Saisie d’une date de naissance
Expliquez pourquoi vous demander une info
Valeurs par défaut pour guider l’utilisateur
Case à cocher vs bouton radio vs interrupteur
Slider
Vraimen utile ?
Cas pratique : les tableaux
Avant tout, partir du besoin
Actions au survol
En-tête fixe
Tri
Filtre
Personnalisation
Edition directe
Dashboard
Données hétérogènes
Lignes complexes
Pas un tableau
EXO
Partie ⁴⁄₄
Plan du cours
Au programme aujourd’hui
Revue de vos livrables
Le but : représentation globale d’une séquence d’évènements
Questions à se poser
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.
Bien des formats sont possibles : storyboard
Bien des formats sont possibles : roue
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
Le web a été pensée comme une bibliothèque de documents
Solution pour ranger
Classification Dewey : un plan de classement prédéfini.
Comment organiser 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
Classements par thème : plusieurs thématiques peuvent cohabiter
Une arborescence c’est quoi ?
Un site a-t-il forcément une arborescence ?
Chez Twitch : 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
Consigne
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
