Analyse et ergonomie des IHM logicielles

Présentation au sujet: "Analyse et ergonomie des IHM logicielles"— Transcription de la présentation:

1 Analyse et ergonomie des IHM logicielles
Jean-Louis

2 Introduction : qu'est-ce que l'ergonomie ? Les missions
Test utilisateur Prototypage Audit ergonomique Concepts divers

3 Définition de l’ergonomie
Discipline scientifique Etude des IHM Améliorations de 3 axes : Confort Efficience Sécurité Définition de wikipedia : L’ergonomie est « l'étude scientifique de la relation entre l'homme et ses moyens, méthodes et milieux de travail » et l'application de ces connaissances à la conception de systèmes « qui puissent être utilisés avec le maximum de confort, de sécurité et d'efficacité par le plus grand nombre. » Définition de l’association SELF (2000) : L’ergonomie (ou Human Factors) est la discipline scientifique qui vise la compréhension fondamentale des interactions entre les humains et les autres composantes d’un système, et la profession qui applique principes théoriques, données et méthodes en vue d’optimiser le bien-être des personnes et la performance globale des systèmes – Les praticiens de l’ergonomie, les ergonomes contribuent à la planification, la conception et l’évaluation des tâches, des emplois, des produits, des organisations, des environnements et des systèmes en vue de les rendre compatibles avec les besoins, les capacités et les limites des personnes. Définition de Alain WISNER (1972) : "L'ergonomie est l'ensemble des connaissances scientifiques relatives à l'homme, et nécessaire pour concevoir des outils, des machines, et des dispositifs qui puissent être utilisés avec le maximum de confort, de sécurité et d'efficacité. La pratique de l'ergonomie est un art (comme on parle de l'art médical et de l'art de l'ingénieur), utilisant des techniques et reposant sur des connaissances scientifiques."

4 Les 3 cerveaux (MacLean - 1990)
Rationnel Logique, reflexion, etc. Animalique Joie, confiance, peur, surprise Reptilien Food/sex/danger MacLean Note : d’autres modèles ont vu le jour depuis, remettant en question le modèle de MacLean (disputes de spécialistes), mais ne changent pas les propos qui vont suivre. Voir : Notamment le modèle de Joseph LEDOUX : The Emotional Brain (1998)

5

6

7 Interface Homme-Machine
IHM Interface Homme-Machine Intéraction Perception Action Langage Flux Emotion Humeur Sentiment Nul en math Imaginatif Espoir Volonté Fort en calcul Rapide pour envoyer ou retrouver de l’info Ne se prend pas pour qqun Voir : Il y a la machine… … Mais il y a l’Homme aussi… … et les deux doivent interagir…

8 Axes améliorations Sécurité Efficicence Bien être Radiothérapie Epinal
Three Miles Island Efficicence Efficacité : faire une chose en un temps donné… Avec le moins d’effort Bien être Etat mental, humeur, émotion. Appel à des notions de psychologie cognitive.

9 UX UX : User eXperience Ensemble de tous les aspects de l’intéraction utilisateur avec une entreprise, ses services et ses produits. UX est plus large que l’ergonomie Source :

10 UX Design Elaboration d’un parcours de l’utilisateur, enchainant ses intéractions avec des : gens objets environnements Prise en compte : Objectifs, Satisfation Perception

11 Le UX Design n’est pas seul
Un client non satisfait s’en va… Juridique : De toute façon, c’est la loi qui le dit. Marketing : on peut manipuler le client, tant qu’il continue à payer, c’est pas grave… Business Model : Faut bien gagner de l’argent… La hierarchie : Faut faire d’abord plaisir à celui qui me paie…

12 Prioriser Chaque secteur (Marketing, Juridique, Ergonomie, etc.) à son propre pipeline à besoin : Priorisation entre les pipelines Compromis entre les besoins

13 Savoir se fixer des objectifs
Quels objectifs ? Augmentation du bien être, de l’efficience, sécurité. Comment les mesurer ? Note ergonomique (SUS) Nombre de deal signés (achat, nombre annonce, nombre de dossiers traités, etc.) Nombre appel SAV Nombre de scénario d’erreur évité. Etc. Quand les mesurer ? Avant et Après interventions Cela s’appelle fixer des KPI KPI : Key Performance Indicator

14 Qu’est ce qu’on va faire en pratique ?
Test utilisateur (TU) Le prototypage (PR) Audit ergonomique (AE) Modéliser l’utilisateur (MU) Pas abordé dans ce cours. Voir le lien suivant : A retenir…

15 Missions ergonomiques dans un cycle en V
MU TU TU PR AE Voir le lien suivant :

16 Problèmes du cycle en V Penser un système en aveugle
Manque de rétroaction Le business peut changer pendant le développement du logiciel (6 mois minimum) Manque de réactivité au changement Un bug à la spécification s’identifie tardivement Trop de contractualisation des échanges Bug ou Evol ? Voir

17 Règle des 1/10/100 Corriger un bug à la phase de conception coûte 10 fois moins cher qu’à la phase de correction et 100 fois moins cher quà la phase de production. Jakob Nielsen

18 Cycles incrémentaux et itératifs
Approche « SCRUM »

19 Missions ergonomiques dans un cycle itératif
MU TU PR AE Faire les 4 missions à chaque cycle incrémental

20 ISO Explique en détail les processus de développement “humain centered”. Equivalent aux 4 missions Source :

21 Principe de la rétroaction
Mesurer le résultat en cours de route pour ajuster la commande Un tireur atteint plus difficilement sa cible si il a les yeux bandés Alors quid du projet informatique sans impliquer l’utilisateur final ? Le coeur de la démarche ergonomique, c’est de VOIR FAIRE son utilisateur final

22 Exercice Questions : Que ressent la femme ? Que ressent l’homme ?
Est-ce bien un clavier ergonomique ? Y a-t-il démarche ergonomique ? Parallèle avec un instrument de musique ?

23 Psychologie cognitive
Apprentissage La psychologie cognitive (1950) : Discipline scientifique Champ d’étude : le cerveau But : proposer des modèles cognitifs Pourquoi : Comprendre l’animal (dont l’homme) dans sa façon d’acquérir l’information, la comprendre et de réagir en conséquence. Tenter de prédire les comportements Attention Perception Emotions Résolution de problème Langage Mémoire

24 Modèle de la mémoire Mémoire à Court terme Mémoire à Long terme
Mémoire de travail Clé de l’attention et de la concentration Nombre de Miller : 7 (empan, nombre de mnèmes) Trace mnésique < 18s Mémoire sensorielle Mémoire iconique (vision) Mémoire échoique (audition) Mémoire à Long terme Mémoire épisodique Les souvenirs (de ce matin, de l’enfance, etc.) Mémoire procédurale Savoir nager, conduire, tenir un stylo, jouer d’un instrument, etc. Mémoire sémantique Définition des mots, des concepts, etc. Mémoire spatiale Où suis-je, mémoire des lieux, etc. On parle de la trace mnésique pour distinguer les deux types principaux de mémoires. On garde certaines informations parfois toute une vie, parfois quelques millisecondes pour d’autres.

25 Mémoires Episodique Procédurale Sémantique Spatiale Mémoire de travail
Mémoire iconique Mémoire auditive TMM 500 ms TMM 10 s 7 mnèmes ± 2 (Miller) ; TMM 18 secondes

26 Exercice 2 + 3 = ? = ? 3 * 7 = ? 15 * 17 = ? 3563 * 1456 = ? Sqrt(9) = ? Sqrt(13) = ? Faire chacune de ces opérations et comprendre quels sont les mécanismes impliquant les différentes catégories de mémoire en jeu.

27 Conclusion Saturation de la MCT
Réaction humaine face à cette saturation : Humour Déviation Délégation Colère Abandon L’important n’est pas l’exercice lui même mais ce qu’on en tire en observant celui qui le fait.

28 Emotions Roue des émotions de Robert Plutchik (1927-2006)
Robert Plutchik ( ), Philosophe et Psychologue américain. La théorie psycho-évolutionniste de Plutchik sur les émotions de base repose sur dix postulats : Le concept d'émotion s'applique à tous les niveaux d'évolution et à tous les animaux, y compris l'être humain. Les émotions ont évolué et amené diverses formes d'expression chez diverses espèces. Les émotions ont eu un rôle adaptatif en aidant les organismes à régler des questions clés de survie posées par l'environnement. Bien que les formes d'expression d'émotions varient selon les espèces, il y a certains éléments communs ou modèles prototypiques. Il y a un petit nombre d'émotions de base, fondamentales ou prototypiques. Les autres émotions sont toutes des états mixtes ou dérivés, c'est-à-dire des mélanges, composés ou combinaisons d'émotions de base2. Les émotions de base sont des concepts hypothétiques ou des états idéalisés dont les propriétés et les caractéristiques s'induisent de diverses manifestations. Les émotions de base peuvent se systématiser en paires d'émotions opposées. Les émotions varient toutes par leur degré de similitude. Chaque émotion se manifeste à divers degrés d'intensité ou d'éveil. Roue des émotions de Robert Plutchik ( )

29 Evaluation simplifiée de l’émotion
4 questions : Joie ou tristesse ? Confiance ou dégout ? Colère ou peur ? Surprise ou anticipation ?

30 Machine = Majordome Elle doit savoir « rester à sa place »
Ne pas encombrer Etre rapide, discrète, pertinente Attention à son humour… Ne pas interrompre Ne pas « se la jouer » Principe de Grice (1975)

31 Rétroaction et Ecran de travail
Ecran de travail = Ecran ou l’on VOIT l’objet que l’on construit. Principe = Maximiser l’écran de travail Qui n’aurait pas envie de « maximiser » cette fenêtre ?

32 Exercice : Que pensez-vous de cette IHM ?
Trop de choix tue le choix. Nombre de Miller : 7 ± 2 (mémoire de travail) Loi de Hick (temps de prise de décision par rapport au nombre d’élement de choix) Inversion de contrôle (la machine ne doit pas prendre le contrôle sur l’homme) Espace de travail non maximisé.

33 Système mental Synonyme : point de vue Concepteur ≠ Utilisateur Fonctionalité ≠ Besoin La culture du designer en fait un ignorant en terme d’ignorance Le problème est qu’il accepte difficilement cet état de fait. L'ennemi est bête : il croit que c'est nous l'ennemi alors que c'est lui ! (Desproges)

34 Mauvais concepteur…

35 Exercice : que pensez vous de cet objet ?

36 Innovation ergonomique : Exemple par comparaison avec « avant ».
Historique de l’interface des navigateurs. NCSA Mosaïc, Netscape, Internet Explorer, Firefox, Chrome

37 Historique des navigateurs
Espace de travail réduit à cause de menus, barres d’outils, etc. Pas de barre de recherche. Boutons importants au milieux des boutons moins importants.

38 Problème des projets IT
Constat : 30% des projets réussissent Cause la + mentionnée : Utilisateur Final pas assez impliqué Exemple : SIRHEN LOUVOIS Source :

39 Heuristique projet Mettre 10% du budget projet dans des activités liées à l’ergonomie, c’est augmenter les chances de réussir un projet. Source : Jakob Nielson (Janvier 2008)

40 L’apport de l’ergonomie sur un projet
83% Taux de réussite des projets logiciels 10% du budget 30% Source : Jakob Nielson (Janvier 2008) 0% du budget

41 ROI des projets avec démarche ergonomique
Interne : moins de SAV, moins de formation, moins de redéveloppement Externe : succès d’un produit, dépassement des concurrents

42 Exemple ROI externe : l'iPhone
Ce n’est pas une révolution technologique C’est une révolution ergonomique Liens : Le transparent date de Juillet 2007 !

43 Exercice : Pourquoi a-t-on besoin d'ergonomes et de UX designer ?
Qu’est ce qu’ils vont faire exactement sur le projet ? Encore une charge supplémentaire sur le projet ? Ca va nous rapporter quoi ?

44 Résultat du manque d’ergonomie
Insatisfaction de l’internaute. Désemparement…

45 Les grandes figures de l’ergonomie
Jakob Nielsen (Maximes) Donald A. Norman Steve Krug Jakob Nielsen : les Maximes de Nielsen Donald A. Norman : Auteur du livre “The Design of Everyday Things” Bastien – Scapin : (INRIA - France) Les critères de lisibilité Bastien – Scapin (Critères ergonomiques) Suzan Weinschenk

46 Décomposition de la tâche
Donald A. Norman

47 Principe : l’homme a toujours un objectif

48 Exemple : Le distributeur automatique de billet
Processus du DAB : Entrer la carte bleue Saisir le code Saisir le montant voulu Retirer les billets Retirer la carte Connaissance en psychologie : A chaque instant, l’homme effectue ses actions par rapport à un but. Donc, il y a un bug dans le processus précédent. Lequel ?

49 Cycle de l’action (Norman)
La perception se fait au moyen des sens (Aristote : 5 sens) Ne pas oublier la proprioception et l’équilibre Page 40

50 Design Emotionnel Modèle suggéré par Don Norman (2003) Reflexif Sens
Moteur Comportemental visceral Le saviez vous ? Les choses attrayantes fonctionnent mieux. Expérience des deux chercheurs japonais Masaaki Kurosu et Kaori Kashimura (1995) : 2 produits (ATM) fonctionnellement identiques sauf que l’un est plus “beau” que l’autre. Les gens vont plus vite pour faire leur tâches sur le produit “beau”. Expérience confirmée par l’israëlien Noam Tractinsky (2000), initialement scéptique. Herbert Read ( ) se trompait donc quand il affirmait (1953) que “Alléguer le moindre lien entre beauté et fonctionnalité” requiert une théorie de l’esthétique confinant au mysticisme.” FAUX. Expérience de Ashby, Isen et Turken, 1999 (UC Santa Barbara) Etre heureux facilite le processus de la pensée et la pensée créatrice. Les gens résolvent plus facilement les problèmes difficiles lorsqu’on leur donne des cadeaux, quand on leur passe un film comique avant.

51 Ergonomie de surface / Ergonomie profonde
Ergonomie de surface : la face visible de l’iceberg. Les écrans et leur contenu Ergonomie profonde : les processus La User eXperience

52 Introduction : qu'est-ce que l'ergonomie ? Les missions
Test utilisateur Prototypage Audit ergonomique Concepts divers

53 Vitre sans tain Expérience de test utilisateur à euros.

54 Discount Usability Testing
euros 500 euros

55 A LIRE ! Expérience de test utilisateur à 500 euros. 1 fois par mois.
Tester avec UN utilisateur au début du projet, c’est mieux que tester avec 50 utilisateurs juste avant la mise en production. Se rappeler la règle des 1/10/100.

56 Tester une fois par mois
Une matinée par mois réunissant l’équipe DEV + METIER Pas d’appli ou de maquette ? Test sur des sites concurrents, ou paradigme similaire Maquette ? Tester sur la maquette (test de perception) Tu comprends quoi, tu cliques où ? Prototype ? Tester sur le prototype MÊME si le développeur n’estime que ce n’est pas prêt. Si le Guerrilla Testing vous tente, lisez ce blog :

57 Choix utilisateur Externe à l’équipe du projet
Ni un développeur du projet Ni un expert métier du projet Ni personne d’autre du projet Sauf un utilisateur final ! Pas la peine de recruter systématiquement avec un vrai utilisateur final Dans l’absolu c’est mieux, mais ne pas se perdre dans le recrutement. Tester avec une personne au même niveau intellectuel est suffisant pour détecter des bugs ergonomiques. Votre entreprise n’a pas la culture du test utilisateur ? Faite un test utilisateur avec un décisionnaire (PDG, N+x) en tant que utilisateur final, cela lui fera prendre conscience de l’intérêt crucial de la démarche pour l’approuver dans le plan projet.

58 Timing 9h à 11h : faire passer 2 utilisateurs 11h à 12h : débriefing
User 1 User 2 Débriefing

59 Salles Une salle de réunion classique Equipe dev + métier
Un bureau tranquille Facilitateur + Utilisateur Final Dans un espace où l’on est pas dérangé Une salle de conférence, ou un bureau à l’écart Le facilitateur, l’utilisateur, les observateurs (dev/metier) Les observateurs sont dans une autre salle et observe juste un partage d’écran et entendent ce qui se dit entre le facilitateur et l’utilisateur. Matériel : Partage d’écran: GoToMeeting, Cisco WebEx Screen recorder : Camtasia, ezvid, etc.

60 Déroulement d’un test Bienvenue (5 min)
Présentations/questions (2 min) Le tour de la page d’accueil (3 min) Les tâches (35 min) Le coeur du test Questionnaire SUS (5 min) La personne doit y répondre rapidement, sans trop de réflexion. Questions diverses et conclusion (5 min) Laisser l’utilisateur s’exprimer librement

61 Message de bienvenue Mettre à l’aise avec du sourire et des croissants
Faire signer une demande de cession de droit à l’image (doc juridique) L’utilisateur a le droit de se tromper, donc ne pas se stresser L’utilisateur doit être le plus bavard possible L’utilisateur n’a pas le droit d’être aidé, donc le facilitateur ne peut répondre aux questions Il y répondra après le test en même temps que l’utilisateur laissera ses impressions

62 Test de perception : Le SUS (1)
Je pense que j’utiliserai ce système fréquemment. J’ai trouvé ce système inutilement complexe. Je pense que ce système est facile à utiliser. Je pense que j’aurai besoin de l’aide d’une personne technique pour être capable d’utiliser ce système. J’ai trouvé que l’ensemble des fonctions de ce système étaient bien combinées. J’ai pensé qu’il y avait trop d’incohérences dans ce système. J’imagine que la plupart des gens vont apprendre très rapidement à utiliser ce système. J’ai trouvé ce système très lourd à utiliser. Je me suis senti en confiance en utilisant ce système. J’ai eu besoin d’apprendre beaucoup de choses avant de pouvoir utiliser ce système. Cité dans plus de 4760 articles de recherche (Google). C’est le questionnaire le plus connu. Année de création : 1986 Auteur : John Brooke Source : Lien intéressant :

63 Le SUS (2) Chaque question est accompagnée d’une échelle à 5 points d’accord/désaccord Résultat: score Calcul du score: Pour les questions 1, 3, 5, 7, 9, ôter 1 au résultat de l’utilisateur Pour les questions 2, 4, 6, 8, 10, faire 5 moins le résultat de l’utilisateur Additionner le tout et le multiplier par 2.5 Source :

64 Débriefing (11h - midi) Demander aux participants observateurs de lister 3 points les plus important selon eux à corriger IMPORTANT : ces points doivent résulter d’un mauvais vécu utilisateur et non d’une opinion personnelle, sinon le débriefeur se doit de les refuser. Pipeline métier vs pipeline ergonomique Eviter que la réunion se transforme en workshop conception contradictoire. Faire un tour complet des participants Personne ne doit être oublié et chacun se sentira impliqué. Faire un tour suivant tant que l’équipe projet ressent qu’elle n’a pas trouvé assez de bug ergonomiques à corriger pour le mois suivant

65

66 Introduction : qu'est-ce que l'ergonomie ? Les missions
Test utilisateur Prototypage Audit ergonomique Modélisation de l’utilisateur Concepts divers

67 Les 2 modèles compréhensibles par l’utilisateur
Liste Pas trop d’étapes Arbre Contre-Exemple: windows 8.0 sans bouton démarrer

68 Le pouvoir de l’habitude
A prendre en compte en #1 quand on désigne des interfaces. N’innovez pas… sauf si test des 5s fonctionne. Modèle Cue, Routine, Reward (signal, routine, récompense) Cigarette, Facebook, Lire les news, Faire un jeu, prendre le café, etc. Livre intéressant :

69 Appli vs Portail 1 appli = 1 objectif utilisateur = 1 processus nominal Sinon c’est un portail 1 objectif = 1 verbe + 1 ressource Penser au CRUD (REST API) Processus nominal Processus correcteur Processus secondaire

70 Recenser les applis Portail Applis

71 Examples de Portails

72 Construire un ensemble applicatif : Méthode Top-down
Reccueillir les objectifs Lister les outils existants Les intégrer dans un portail Les compléter avec des nouveaux outils implémentant les objectifs non encore satisfait, ou des outils faisant le lien avec les outils existant. Approche urbaniste Arborescence -> Tri de carte ?

73 Le processus nominal Processus secondaire Processus Nominal
Processus correcteur

74 Les processus Que voulez-vous faire ? Photo Video Panorama
Processus nominal : Autoroute : ne pas y mettre de « feu rouge » Représente l’objectif le plus important de l’utilisateur au moment où celui-ci s’y engage. Processus correcteur : Gérer une situation qui sort de la normalité, une erreur Bande d’arrêt d’urgence Processus secondaire : Processus de configuration Processus d’initialisation Processus de gestion de compte Et tout les autres Processus « en plus », utilisé occasionnellement Que voulez-vous faire ? Photo Video Panorama

75 Comment intégrer des processus secondaire
Faire des voies de sorties discrêtes, que seuls ceux qui les cherchent les voient !

76 Cycle Process Nominal Storyboard wireframe papier Mise au propre
Storyboard avec graphisme Prototype

77 Process Nominal Définir un titre pour l’application
Processus nominal : « Il ne doit en rester qu’un » Implémenter le processus nominal en 5 étapes maximum Les étapes doivent être claires pour les utilisateurs Chaque étape peut être décomposée en maximum 5 sous-étapes, et récursivement

78 Exemples de titre de processus nominal
1 verbe + 1 objet [+1 complément] Réserver un ticket de cinéma Aller à la maison en voiture Se rendre au travail à pied Payer une amende radar Prendre une photo Acheter des bitcoins Faire un sudoku Rédiger une fiche de paie Note : il est intéressant de savoir qui est l’utilisateur final pour chaque processus nominal donné ici. Penser à SCRUM : En tant que… Afin de… Je veux…

79 Ex : réserver un ticket de ciné
Choisir sa zone géographique Choisir son film Choisir sa séance Payer Recevoir son ticket 2D / 3D et VO / VF Jour Horaires Nom du cinéma

80 Wireframe Sketcher avec papier crayon
Faire une rétroaction utilisateur Déduire le zoning et les templates Recopier à l’ordinateur avec un logiciel adapté en noir et blanc (fil de fer) Intégrer seulement alors les couleurs et les éléments de charte graphique

81 Storyboard en wireframe

82 Tester avec un utilisateur
On appelle cela Test de Perception Test silencieux ! On n’explique RIEN ! Deux questions autorisées : Qu’est ce que tu vois ? T’as envie de cliquer où ? Ne monter qu’un seul écran à la fois !

83 Tu comprends quoi ? Tu cliques où ?

84 Mise au propre Wireframe

85 Intégration de charte graphique

86

87

88 Zoning Template 2 Template 1
Emplacements des zones de contenus du site

89 Le « Story board »

90 Storyboard

91 La maquette graphique Les maquettes graphiques mettent en musique les maquettes fonctionnelles. Elles apportent toute la finition et le sens du détail : couleurs, choix typographiques, arrondis, etc. Rien ne matérialise mieux le projet web que la maquette graphique, qui rend compte de toute la sensation de l’interface, son ambiance visuelle, sa tonalité, son attrait, son contraste et sa lisibilité. Le caractère concret de la maquette graphique ne doit pas nous faire oublier que les écrans ont des tailles et des rendus variables. Cette étape constitue le dernier maillon de la conception avant de basculer en version « alpha ». Les maquettes graphiques sont réalisées : soit à l’aide d’un logiciel d’édition graphique (comme Photoshop™) ; soit directement en HTML/CSS (feuilles de style), avec l’avantage, dans ce cas, de s’adapter aux conditions variables d’affichage. (source:

92 Outils de maquettage rapide
Axure (Payant) MockPlus (Gratuit) Balsamiq (Payant) Pour les experts graphistes : Adobe XD Sketch (Apple) Mon préféré ! Source :

93 Prototype C’est un site web fonctionnel avec les fonctionnalités minimum et une charte graphique très sobre. Site en HTML/JS/CSS/Database fait par un développeur Le prototypage logiciel consiste à concevoir des versions intermédiaires et donc incomplètes d'un logiciel ou d'un site web, conçues pour tester l'utilisation avant la phase proprement dite de programmation informatique. Dans le cadre d'une intervention ergonomique, la phase de prototypage permet de tester l'utilisation et l'utilisabilité d'un produit auprès d'utilisateurs (test utilisateur). Il se distingue de la maquette fil de fer (ou wireframe) en simulant le fonctionnement avec des données fictives ou réelles. Plusieurs types et niveaux de finition sont possibles, selon la démarche de conception d'un logiciel ou d'un site Web. (source :

94 Ne pas oublier le point d’entrée du processus
Customer Journey SEO : les gens sont d’abord sur un réseau social ou un moteur de recherche (FB et Google) Réferencement publicitaire payant : Liens sponsorisés, pub Réferencement naturel : contenu pertinent, etc. Pourquoi le client passerait-il successivement les étapes de votre processus ?

95 Exercice : Prototyper une appli sous AXURE
Exemple : réserver un ticket de cinéma en ligne

96 Introduction : qu'est-ce que l'ergonomie ? Les missions
Test utilisateur Prototypage Audit ergonomique Concept divers

97 Critères ergonomiques de Bastien – Scapin (1993)
Guidage Incitation Groupement Distinction par la localisation Distinction par le format Feedback immédiat Lisibilité Charge de travail Brièveté Concision Action minimale Densité informationnelle Contrôle Explicite Action explicite Contrôle utilisateur Adaptabilité Flexibilité Adaptation à l’expérience de l’utilisateur Gestion des erreurs Protection contre les erreurs Qualité des messages d’erreurs Corrections des erreurs Homogénéité / Cohérence Signifiance des codes et Dénominations Compatibilité Version original de l’article sur le web (Archive CNRS-INRIA publié sur le site officiel HAL) : Une version numérisée :

98 1. Guidage Définition : Ensemble des moyens mis en œuvre pour conseiller, orienter, informer, et conduire l’utilisateur lors de ses interactions avec l’ordinateur. Exemple : Signes distinctifs : Logo (redirigeant sur page d’accueil), Fil d’ariane, Menu bar de côté, Nom de page, les utilitaires, la navigation primaire, etc. Restricteurs : champs avec contraintes (complétion automatique, caractères filtrés, validation temps réel, etc.)

99 Nomenclature (Steve Krug)
En 2015, les internautes ont été habitués avec beaucoup de conventions même s’ils n’en connaissent pas la terminologie. Bien souvent, il s’agit de pouvoir guider l’internaute sur le site, comme s’il entrait dans un centre commercial. Il faut tirer profit au maximum de ces conventions. Site ID Tagline Utilitaires Navigation primaire Recherche site

100 Contre-exemples http://www.ergoweb.ca/criteres.html
Principe de base : n’innovez pas ! Faites comme tout le monde… ou alors, veillez bien à ce que l’utilisateur ne réflechisse pas trop. En 2016 : Eviter les champs d’input simple, sans aide à la saisie.

101 Bons exemples Petit signe indiquant que le champ est correctement rempli : bien ! Message d’erreur proche de la zone concernée : bien ! Ce n’est pas de l’ergonomie mais du marketing. Bouton qui ramène à l’erreur ou envoie le formulaire au serveur si correct.

102 Enfin un bon widget pour les dates de naissance !
Exercice: trouver d’autres améliorations.

103 Eléments de guidage Incitations Groupement par localisation
saisir des informations, savoir où on en est, etc. Groupement par localisation Organisation des items (groupage par distance sémantique, ordre alphabétique, etc.) Groupement par format (apparence des widgets, gras, italique, lien, boutons, etc.) Exemple de recommandations: Guider les entrées de données en indiquant le format adéquat et les valeurs acceptables; par exemple, fournir, au niveau du label, des indices supplémentaires sur le format d’entrée des données (ex.: date (jj/mm/aa) : _ _ / _ _ / _ _ ). Afficher les unités de mesure des données à saisir. Indiquer toutes les informations d’état (ex.: modes, valeurs, etc.). Pour chaque champ de données, fournir un label. Fournir des indices sur la longueur autorisée des entrées dans un champ. Donner un titre à chaque fenêtre. Fournir des aides accessibles en ligne.

104 Guidage sur actions longues (asynchrone)
Exemple : chargement d’un fichier volumineux en AJAX… T > 0.5 secondes : mettre un spinner pour donner l’impression que la machine est entrain de « calculer » T > 2 secondes : donner l’information sur le temps restant et la progression (barre de progression) + bouton annuler. Problème : il manque une fonction d’annulation (bouton Cancel)

105 Donner du « Feedback » Le Feedback Immédiat concerne les réponses de l’ordinateur consécutives aux actions des utilisateurs. L’ordinateur doit répondre, dans les plus brefs délais, avec un délai de réponse approprié et homogène selon les types de transactions. Renseigner sur l’action accomplie et sur son résultat. Lien :

106 Lisibilité Et moi à cause de l’espacement entre les mots
luminance des caractères contraste caractères fond dimension des lettres espacement entre les mots espacement entre les lignes espacement entre les paragraphes longueur des lignes Je ne suis pas très lisible à cause de mon contraste Et moi à cause de la faible taille des caractères Et moi à cause de l’espacement entre les mots Contrast Checker : Remarque : segmenter le texte car l’internaute scanne, il ne lit pas.

107 Ce texte peut être amélioré…
2. Charge de travail A réduire ! Le critère Charge de Travail concerne l’ensemble des éléments de l’interface qui ont un rôle dans la réduction de la charge perceptive ou mnésique des utilisateurs et dans l’augmentation de l’efficacité du dialogue. Deux sous-critères participent au critère Charge de Travail : Brièveté (qui inclut les critères Concision et Actions Minimales), et Densité Informationnelle. Oui ! Ce texte peut être amélioré… Recommandations : Utiliser les pictos ! Résumez ! Résumez ! Résumez ! Auto complétion Raccourci clavier

108 Exemple : OpenId, connexion automatique
Est-ce que les gens l’aiment bien, le « connect with FB, Google » ?

109 Densité informationnelle : à réduire !
Réduire la charge de travail du point de vue perceptif et mnésique, pour des ensembles d'éléments et non pour des items. Par exemple, limiter la densité informationnelle de l'écran, en affichant seulement les informations nécessaires. Les longs textes sont des choses que l’utilisateur pourrait bien se passer tout en faisant son travail plus rapidement. C’est vraiment embêtant pour chacun d’entre nous de devoir lire des textes long et ennuyeux, qui nous apprennent pas grand-chose, si ce n’est que le rédacteur aime bien s’écouter écrire… Un petit dessin vaut mieux que de long discours. N’oubliez pas : l’internaute ne lit pas, il scanne. Et ici, même pas un mot en gras pour attirer l’œil…

110 Exception dans le web La documentation, les blogs, les articles sont les seuls endroits autorisés pour la prose verbale. Pour le reste, utiliser par exemple un lien « lire plus… » (read more)

111 Segmenter la prose verbale
L’internaute rebute à lire les gros pavés. Si vous voulez être lus il faut segmenter le texte et mettre en gras les phrases pouvant attirer la curiosité. L’internaute scanne, mais il ne lit pas.

112 Notion de point focal Fausse idée : les utilisateurs lisent en Z, F, ou E, etc.

113 L’utilisateur ne lit pas : il scanne !

114 3. Contrôle Explicite Il concerne à la fois la prise en compte par le système des actions explicites des utilisateurs et le contrôle qu’ont les utilisateurs sur le traitement de leurs actions. Raccourci clavier : combinaison de plusieurs touches Présence d’un bouton annuler sur action longue Undo/Redo Bouton valider sur formulaire Popup de confirmation sur action critique Web : Eviter les carrousels sans contrôle

115 Contrôle utilisateur Action pouvant être interrompue L'utilisateur doit pouvoir contrôler le déroulement des traitements informatiques en cours. Par exemple, autoriser l'utilisateur à interrompre tout traitement en cours.

116 4.Adaptabilité L’adaptabilité d’un système concerne sa capacité à réagir selon le contexte, et selon les besoins et préférences des utilisateurs. Flexibilité Prise en Compte de l’Expérience de l’Utilisateur. CTRL+X ou C / CTRL+V versus

117 5. Gestion des erreurs Moyens permettant d'une part d'éviter ou de réduire les erreurs, d'autre part de les corriger lorsqu'elles surviennent. Protection Contre les Erreurs Mettre en place des moyens pour détecter et prévenir les erreurs. Par exemple, toutes les actions possibles sur une interface doivent être envisagées et plus particulièrement les appuis accidentels des touches du clavier afin que les entrées non-attendues soient détectées. Qualité des Messages d'Erreurs S'assurer que l'information donnée aux utilisateurs sur la nature des erreurs commises (syntaxe, format, etc.) et sur les actions à entreprendre pour les corriger, soit pertinente, facile à lire et exacte. Par exemple, utiliser un vocabulaire neutre, non-personnalisé, non réprobateur dans les messages d'erreurs; éviter l'humour. Correction des Erreurs Mettre à la disposition des utilisateurs des moyens pour corriger leurs erreurs. Par exemple, fournir la possibilité de modifier les commandes lors de leur saisie.

118 Exemples

119 Formulaire Cet écran présente une erreur produite durant la saisie d'un abonnement à un service de messagerie instantanée. Le message donne des informations permettant à l'utilisateur de connaître l'erreur tout en lui indiquant comment la corriger. Seul ennui, cette erreur n'aurait jamais dû avoir lieu, car elle est causée par le non-respect d'un autre critère, l'incitation.

120 Erreur inconnue

121 Autre exemple

122 6. Homogénéité / Cohérence
Le critère Homogénéité/Cohérence se réfère à la façon avec laquelle les choix de conception de l’interface (codes, dénominations, formats, procédures, etc.) sont conservés pour des contextes identiques, et sont différents pour des contextes différents. Exemple de recommandations Localisation similaire des titres des fenêtres. Formats d’écrans similaires. Procédures similaires d’accès aux options de menus. Lors du guidage, toujours utiliser les mêmes ponctuations et les mêmes constructions de phrases. Afficher à la même position les “prompts” pour la saisie des données ou des commandes. Le format des champs d’entrée de données doit toujours être le même Respecter l’alignement des boutons / textes Mettre les actions là où l’utilisateur pense qu’elles devraient être.

123 Exemple : IBM En 1998, IBM a revu le design d'une partie de ses sites selon des principes ergonomiques simples tels que l'homogénéité de présentation et l'accès rapide aux pages les plus fréquemment utilisées. En mars 1999, dans le mois qui a suivi le redémarrage, le trafic a augmenté de 120% sur le site de commerce électronique ShopIBM et les ventes ont grimpé de 400% !

124 7. Signifiance des Codes et Dénominations
Les utilisateurs ne sont pas forcément spécialistes de tous le jargon technologique d’un logiciel. L’IHM doit permettre sa bonne utilisation malgré les carences en vocabulaire de l’utilisateur. Exemple de recommandation : Les titres doivent véhiculer ce qu’ils représentent, et être distincts. Rendre les règles d’abréviation explicites. Utiliser des codes et dénominations significatifs et familiers plutôt que des codes et dénominations arbitraires (ex.: M pour masculin et F pour féminin plutôt que 1 et 2).

125 Exemple Débat du logiciel mode « tout à l’écran » Exemple pratique :
Tentant pour un connaisseur A condition de respecter les lois de la Gestalt Désastreux pour un débutant Implémentation de Wizard Exemple pratique : Prendre un logiciel comme Photoshop, ou Axure et tester le niveau de compréhension d’un utilisateur… Prendre conscience que c’est la même chose pour VOTRE logiciel

126 8. Compatibilité Le critère Compatibilité se réfère à l’accord pouvant exister entre les caractéristiques des utilisateurs (mémoire, perceptions, habitudes, compétences, âge, attentes, etc.) et des tâches, d’une part, et l’organisation des sorties, des entrées et du dialogue d’une application donnée, d’autre part. Représentation mentale de l’utilisateur = Représentation sur les entrées/sorties et les processus de la machine

127 Compatibilité L’utilisateur raisonne par OBJECTIFS
Exemple : Faire une maquette d’un logiciel avec Axure Les entrées et sorties sont par rapport à ses objectifs Si le logiciel ne MONTRE pas ce à quoi l’utilisateur s’attend, il y a contrariété et déception (qui a intérêt à être comblée par un énorme avantage indiscutable) Concevoir les ECRANS en fonction des objectifs et non pas des possibilités du logiciel Concevoir le mode débutant et ENSUITE le mode expert. Mais j’y comprend rien à ce truc…

128 Exercices Regarder 5s maximum les écrans qui suivent.
Si vous comprenez, alors ça veut dire que l’écran est bien. Sinon, quels sont les problèmes ?

129 Exercice

130

131

132 Introduction : qu'est-ce que l'ergonomie ? Les missions
Test utilisateur Prototypage Audit ergonomique Concept divers

133 Gestaltisme Ernst Mach (1838-1916) Paul Guillaume (1878-1962)
Christian von Ehrenfels ( )

134 Information intrinsèque
Intrinsèque vs Perçu Information perçue Information intrinsèque X X Attention au phénomène d’illusion

135 Perçu / Intrinsèque

136 Apprentissage humain. Lois de Gestalt
« Un petit dessin vaut mieux que de long discours. » Gestaltisme : Psychologie de la forme. Psychologie Biologie Philosophie Principe : L’être humain (mamifère) perçoit instantanément les formes, plutôt que les déduire après juxtaposition de raisonnement sur des objets simples. Article complet français sur Wikipedia : Plus complet en anglais :

137 Gestalt vs Forme Question : Que voyez vous ?

138 Gestalt vs Forme Pourtant ce n’est pas une forme. C’est une gestalt.
La gestalt est beaucoup plus complexe qu’une forme. La forme est intrinsèque. La gestalt est issue de processus cognitifs complexes. Le tout est différent de la somme des parties.

139 Gestaltisme vs Structuralisme
Approche top-down vs down-top Avoir à l’esprit que l’utilisateur est davantage compétent pour reconnaitre instantanément des formes que saisir rapidement le fonctionnement de cellules connectées, ou comprendre un texte.

140 Typoglycémie Sleon une édtue de l'Uvinertisé de Cmabrigde, l'odrre des ltteers dnas un mto n'a pas d'ipmrotncae, la suele coshe ipmrotnate est que la pmeirère et la drenèire soeint à la bnnoe pclae.  Le rsete peut êrte dnas un dsérorde ttoal et vuos puoevz tujoruos lrie snas porlbème. C'est prace que le creaveu hmauin ne lit pas chuaqe ltetre elle-mmêe, mias le mot cmome un tuot.

141 LEET

142 L'artiste Ann Veronica Janssens s'est saisie de cette idée pour créer une oeuvre "L'odrre n'a pas d'ipmrotncae"dans le cadre d'un projet d'art public du FCAC de Genève en 2012. 

143 Loi de la clôture La loi de clôture indique que les individus perçoivent les objets tels que des formes, des lettres, des photos, etc, comme tout quand ils ne sont pas complets. En effet, lorsque des parties d'un tableau d'ensemble sont absents, notre perception comble le vide visuel. Par exemple, la figure qui représente la loi de clôture représente ce que nous percevons comme un cercle sur le côté gauche de l'image et un rectangle sur le côté droit de l'image. Cependant, les écarts sont présents dans les formes. Si la loi de clôture n'existait pas, l'image serait considérée comme un assortiment de plusieurs lignes de longueurs différentes, de rotations, et de courbures ; mais avec la loi de clôture, nous combinons la perception des lignes en formes entières.

144 Loi de la clôture

145 Insight insight Émotion de surprise + joie sommeil
« … Ainsi, les gestaltistes considèrent que la bonne réponse n'apparaît pas progressivement par essais-erreurs comme le suggèrent les behavioristes, mais d'un seul coup, suite à une période d'inactivité ou de sommeil. Cette brusque découverte de la solution qui correspond à ce "Bon sang, mais c'est bien sûr!" est appelé insight. » Émotion de surprise + joie sommeil

146 La loi de la bonne forme La loi de la bonne forme spécifie que l’esprit humain tend à interpréter les stimuli comme des formes les plus simples, ordonnées et régulières possible. Sur le plan psychologique, cette loi est le reflet que l’esprit tend à simplifier la réalité et à éliminer les choses non familières. On ne retient que ce que l’on comprend. On élimine le compliqué.

147 Effet de multi-stabilité
Lorsque l’esprit détecte une forme qui lui semble être cohérente, compréhensible, logique, il la considère comme stable, et comme “vraie”. Parfois il est possible que l’esprit trouve plusieurs solutions au problème de perception. Ici on peut interpréter l’image comme étant un lapin ou un canard. L’image du point de vue de la forme présente plusieurs stabilités.

148 My wife and my mother in law
Encore un exemple d’image avec deux stabilités. William Ely Hill (1915)

149 Exemple de bi-stabilité
Ceci est un vase. En fait, c’est aussi deux profiles de personnes. Cela s’appelle le « vase de Rubin ». C’est une illusion optique.

150 Loi de la proximité La loi de la proximité stipule que les individus ont tendance à regrouper les objets proches les uns des autres pour interpréter des formes plus globales.

151 Loi de la similitude Ici on peut voir des rangées de points noir et blanc, formant un carré. En réalité il n’y a que des disques de différentes couleurs placés à égale distance les uns des autres. L’individu perçoit des lignes horizontales noires et blanches, car il a tendance à regrouper naturellement les éléments de formes ou de couleurs identiques.

152 Loi de la similitude La loi de la similitude dit que l’individu est capable de regrouper des formes locales identiques pour identifier des formes globales. Ici on peut percevoir une ligne horizontale de chaussures blanches. À noter que la paire de chaussures rouges « saute aux yeux ».

153 Loi de la similitude et clôture
Motif de Kanizsa

154 Résumé du « gestaltisme »
Salvador Dali

155 Exercice Trouver des applications du Gestaltisme en ergonomie
Prendre n’importe quel site web et constater l’application inconsciente des lois de la Gestalt Concernant un menu, quelles sont les lois de la Gestalt utilisées ? Exemple de réponse :

156 Les dialogues homme-machine. Principes de Grice (1975)
Quantité : être aussi informatif que nécessaire mais pas plus. Qualité : Ne rien contenir qui pourrait être faux. Ne rien contenir qui manque de source ou de preuve. Pertinence : Ne traiter que du sujet, ne traiter pas d’autre chose que l’interlocuteur ne perçoit pas directement comme étant en rapport. Clarté : être compréhensible Eviter les expressions obscures Eviter les ambiguïtés Etre bref Etre organisé Paul Grice ( ) Philosophe américain.

157 Affordance James J. Gibson ( ) Donald Norman (1935-)

158 Utilisation intuitive
Concept d'affordance L'affordance est la capacité d’un système ou d'un produit à suggérer sa propre utilisation. Utilisation intuitive Auteur : James J. Gibson Exemple : un logiciel ………………………….. Et ses 800 pages de manuel d’utilisation !

159 Type d’affordance Perceptible Cachée Fausse Bouton d’arrêt d’urgence
Ouvrir une bouteille avec une visse et une pince. Fausse « walk button »

160 Comment augmenter l’affordance ?
Se mettre à la place de l’utilisateur : L’utilisateur, en voyant un objet, va chercher spontanément à savoir : à quoi il sert ? Comment s’en servir ? Il faut qu’il trouve rapidement et intuitivement des réponses Démarche de l’utilisateur Chercher les possibilités d’actions Culture, expérience Essai, expérimentation

161 IHM et affordance L’affordance dépend de paramètres : extrinsèques :
La culture de l’utilisateur (ses acquis, son passé) Intrinsèques : Les wizards, Les suggestions lors de l’occurrence d’erreur, la « clarté » de l’interface, etc.

162 Pictogrammes Sur mobile, il n'existe pas par défaut d'équivalent des info-bulles sur ordinateur.

163 Aspect sémantiques, de contenu, qualité du dialogue homme-machine
(Principes de Grice, de Nielsen)

164 Les dialogues homme-machine. Principes de Grice (1975)
Quantité : être aussi informatif que nécessaire mais pas plus. Qualité : Ne rien contenir qui pourrait être faux. Ne rien contenir qui manque de source ou de preuve. Pertinence : Ne traiter que du sujet, ne traiter pas d’autre chose que l’interlocuteur ne perçoit pas directement comme étant en rapport. Clarté : être compréhensible Eviter les expressions obscures Eviter les ambiguïtés Etre bref Etre organisé Paul Grice ( ) Philosophe américain.

165 Maximes de Nielsen

166 Le contenu, les aspects sémantiques. Maximes de Nielsen (1)
Maximes d'utilisabilité (Nielsen – 1993) Lors de la conception d'une interface, les maximes qui suivent, tirées de [Nielsen 93], vous éviteront de nombreux écueils. L'enfer est pavé de bonnes intentions. En tant que concepteur, il nous est difficile d'avoir le même point de vue que l'utilisateur. C'est en voulant bien faire, qu'on en fait trop et que les plus grosses erreurs sont commises. L'utilisateur a toujours raison. L'utilisateur connaît le domaine et le contexte dans lequel il se servira de l'application. Ses souhaits sont généralement justifiés car ils répondent à des besoins concrets. L'utilisateur n'a pas toujours raison. Pourtant dans certains cas, ce que l'utilisateur pense être bon pour lui n'est pas ce qui lui permettra d'être plus performant. Un test d'utilisabilité permet généralement de lui montrer qu'il fait fausse route. L’utilisateur n’a pas toujours raison. Exemple de citations : « Si je n’avais écouté que mes clients, j’aurais inventé un cheval plus rapide » Henry Ford”…

167 Le contenu, les aspects sémantiques. Maximes de Nielsen (2)
L'utilisateur n'est pas le développeur. Dans un projet, chacun se partage le travail selon ses compétences ; c'est aux équipes de développement de prendre les décisions relatives au logiciel. Le développeur n'est pas l'utilisateur. L'équipe de développement ne connaît pas suffisamment le domaine applicatif et la tâche pour se mettre à la place de l'utilisateur. Lorsque le concepteur pense à la place de l'utilisateur, il a de fortes chances de se tromper. Le PDG n'est pas l'utilisateur. Bien qu'il soit le client, le PDG n'utilise généralement pas le logiciel. Son point de vue n'a pas le même poids que celui de l'utilisateur final.

168 Le contenu, les aspects sémantiques. Maximes de Nielsen (3)
Le mieux est l'ennemi du bien. En voulant bien faire, on a tendance à en faire trop, à offrir beaucoup plus de fonctionnalités que l'utilisateur n'en a réellement besoin. Cette profusion rend le logiciel complexe et difficile à utiliser. Il est préférable de faire simple et pertinent. Le détail est essentiel. Un détail n'est jamais à négliger en terme d'utilisabilité car ce sont souvent de petits détails, se répétant à chaque utilisation, qui empoisonnent la vie de l'utilisateur. L'aide n'en est pas une. L'utilisateur se sert de l'aide en ligne parce qu'il ne comprend pas le fonctionnement du logiciel. Pour véritablement aider l'utilisateur, il faut qu'il puisse se servir du logiciel sans utiliser l'aide.

169 Design minimaliste vs Skeuomorphisme
Principe : l’invitation suffit à l’affordance Bonne idée mais elle a ses limites… Voir les liens suivants : - -

170 Design Minimaliste « Form follows function » « Less is more »
La suggestion suffisante perçu Non perçu Nombre de signifiances

171 Loi de Hick-Hyman Axiome du choix
Dans l’exemple ci-dessus, le concepteur utilise « openid » pour permettre à l’internaute de se connecter sans toucher au clavier, sans remplir de formulaire. Très bien. MAIS… il propose TROP de choix pour le faire. Seul les boutons google, facebook, yahoo aurait suffit. Pour le reste une combobox aurait pu convenir.

172 Loi de Fitts Augmenter la taille d’un bouton si celui-ci est distant de là ou se trouve la souris Veiller à ce que les boutons soient assez large pour être cliqués.

173 Bibliographie française
Jean-François Nogier, (2008), Ergonomie du logiciel et design web : Le manuel des interfaces utilisateur, 4e édition, Dunod. Amélie Boucher, (2011) Ergonomie web Amélie Boucher (2015), Experience Utilisateur Mobile

174 Bibliographie anglaise

175 Influenceurs Christian BASTIEN Jean-François NOGIER Amélie BOUCHER
Dominique SCAPIN Jakob NIELSEN Steve KRUG Donald NORMAN