www.site.uottawa.ca/~elsaddik 1 Unit A-Introduction (c) elsaddik SEG 3520 Conception et analyse des interfaces usagers Prof. Dr.-Ing. Abdulmotaleb El.

Présentation au sujet: "www.site.uottawa.ca/~elsaddik 1 Unit A-Introduction (c) elsaddik SEG 3520 Conception et analyse des interfaces usagers Prof. Dr.-Ing. Abdulmotaleb El."— Transcription de la présentation:

1

2 www.site.uottawa.ca/~elsaddik 1 Unit A-Introduction (c) elsaddik SEG 3520 Conception et analyse des interfaces usagers Prof. Dr.-Ing. Abdulmotaleb El Saddik University of Ottawa (SITE 5-037) (613) 562-5800 x 6277 elsaddik @ site.uottawa.ca abed @ mcrlab.uottawa.ca http://www.site.uottawa.ca/~elsaddik/

3 www.site.uottawa.ca/~elsaddik 2 Unit A-Introduction (c) elsaddik Unité A : Introduction à HCI 1.Pourquoi étudier le design dinterfaces usagers ? 2.Histoire 3.Buts de HCI 4.Cinq idée clés dans HCI 5.Illusions optiques 6.Comprendre les utilisateurs 7.Productivité de lutilisateur 8.Disciplines contribuant à HCI 9.Ingénierie du HCI : une branche du génie logiciel 10.Défauts de fonctionnements des UI 11.Études de cas : défaillances dans une interface usager 12.Points clés à reviser

4 www.site.uottawa.ca/~elsaddik 3 Unit A-Introduction (c) elsaddik Définition L'étude des personnes et de lordinateur et leur influence les uns sur les autres Un ensemble de processus, dialogues et actions par lesquelles une personne utilise et interagit avec lordinateur Une discipline concernant la conception, l'évaluation et l'exécution de systèmes interactifs pour l'usage humain avec l'étude des phénomènes majeurs qui les entourent

5 www.site.uottawa.ca/~elsaddik 4 Unit A-Introduction (c) elsaddik 1. Pourquoi étudier interface usagers? 75% ou plus des efforts de développement concernent les UI 40% à 70% est typique Spécialistes en conception dinterface sont nécessaires Tout le monde doit connaître les fondations sur lesquelles se basent le logiciel d'interface usagers Logiciel d'interface usagers devient plus compliqué La complexité des UI croît plus rapidement que d'autres aspects des systèmes Les interfaces usagers graphiques (GUI) ont fait le plus grand saut en terme de complexité Les applications tendent à grossir pour utiliser les ressources informatiques disponibles Il y a des avantages financiers directs à améliorer ses interfaces usagers

6 www.site.uottawa.ca/~elsaddik 5 Unit A-Introduction (c) elsaddik Avantages financiers et coûts pour améliorer des interfaces usagers Augmente la productivité de lutilisateur Économie directe dargent Augmente les revenues des ventes Le système est plus attrayant et la satisfaction du client est plus grande Diminue le prix de support et denseignement (training) Le système est plus intuitif Diminue le prix de maintenance Le système fait ce que lutilisateur demande De nombreuses améliorations du système concernent lUI: mieux vaut investir un peu au début que beaucoup après la distribution du produit. Mais Léquipe de développement doit connaître les bases de lanalyse et la conception dUI Les utilisateurs doivent participer au développement Des outils de conception d'UI sont nécessaires Les bénéfices sont presque toujours supérieurs aux coûts

7 www.site.uottawa.ca/~elsaddik 6 Unit A-Introduction (c) elsaddik 2. Histoire Dans les premiers jours de lordinateur: Les ordinateurs coûtaient plus que les programmeurs Les ordinateurs avaient peu de fonctionnalité UI nétait pas important Début des années 1970 Man Machine Interface (MMI) est né Le terme est graduellement changé en User Interface (UI) Idées pour utiliser Graphical User Interface (GUI) pour la première fois ont été développées Dynabook at Xerox Fin 1970 et années 1980 Produits sont appelés user friendly Termes non scientifiques : il sagit seulement de marketing (marketing buzzword) Développement du premier vrai GUI Xerox Star --> Smalltalk et Macintosh

8 www.site.uottawa.ca/~elsaddik 7 Unit A-Introduction (c) elsaddik 2. Histoire (suite) Pendant les années 1980 Le terme «interaction Humain-Ordinateur» (HCI pour «Human- Computer Interaction») est né MS-Windows, X-Windows a suivi Mac Recherches intenses dans le domaine de HCI 1990 et début 2000 Réalité virtuelle, sons et reconnaissance de la voix, entrées/sorties, etc. Bien! MAIS de mauvaises UI continuent à être développer!!!

9 www.site.uottawa.ca/~elsaddik 8 Unit A-Introduction (c) elsaddik 3. Buts de HCI Améliorer la productivité et diminuer les coûts à travers : Sûreté : Est-ce que le système a prévu le danger? Fonctionnalité: Combien des choses le système peut-il faire? Efficacité: Combien de ressources a-t-on besoin pour terminer la tâche? Convivialité : Est-il facile dapprendre à utiliser le système? Mais Haute fonctionnalité (plusieurs manières de faire la même chose) peut réduire la convivialité En causant de la confusion

10 www.site.uottawa.ca/~elsaddik 9 Unit A-Introduction (c) elsaddik 4. Cinq idées clés dans HCI Visibilit é UI doit toujours aider lutilisateur à comprendre... létat courant du système quelles opérations peuvent être réalisées par exemple: En positionnant le curseur au-dessus d'un point sur l'écran, se quil se produira en cliquant avec la souris devrait être clair Plusieurs directives de design de l'unité E aideront à améliorer la visibilité Rétroaction ( Feedback ) Quand quelque chose change, ça devrait être évident quand vous supprimez un dossier, le système ne devrait pas simplement dire «OK» But (Goal) Un état que l'utilisateur veut atteindre parler avec quelqu'un au téléphone enregistrer un dossier

11 www.site.uottawa.ca/~elsaddik 10 Unit A-Introduction (c) elsaddik 4. Five Key Ideas in HCI (Contd) Affordance Ensemble des opérations et des procédures qui peuvent être faites à un objet Perceived affordance est ce que les utilisateurs pensent qui peut être fait à un objet Faut-il tirer ou pousser la porte pour louvrir? Que signifie cette icône? Pour améliorer la visibilité / rétroaction (feedback), il faut : Choisir les objets avec la bonne perception (a good Perceived affordance) Concevoir l'UI pour obtenir une meilleure perception tâche ( Task) Une action que lutilisateur veut réaliser pour appeler quelqu'un pour enregistrer un dossier les buts engendrent des tâches, les tâches engendrent des buts. Unité C discute de «lanalyse des tâches» et donne des bon modèles conceptuels qui aideront à atteindre ceci

12 www.site.uottawa.ca/~elsaddik 11 Unit A-Introduction (c) elsaddik 5. Illusions Optiques

13 www.site.uottawa.ca/~elsaddik 12 Unit A-Introduction (c) elsaddik 5. Illusions Optiques (suite) The quick brown fox jumps over the the lazy dog.

14 www.site.uottawa.ca/~elsaddik 13 Unit A-Introduction (c) elsaddik 5. Illusions Optiques (suite) Maintenant lisez la phrase suivante en comptant à voix haute les "F" à mesure que vous les rencontrez (1... 2... etc..). Comptez-les UNE FOIS SEULEMENT Ne revenez pas en arrière! ! !. OK - ALLEZ ! FINISHED FILES ARE THE RESULT OF YEARS OF SCIENTIFIC STUDY COMBINED WITH THE EXPERIENCE OF YEARS.

15 www.site.uottawa.ca/~elsaddik 14 Unit A-Introduction (c) elsaddik 6. Comprendre Lutilisateur Théorie des «doubles processeurs» : Chaque système interactif est un système distribué sexécutant sur deux processeurs: La conception dinterfaces usagers précise / contraint: Comportement des usagers Comportement du système Nous devons comprendre la nature des «processeurs» humains différent modes devraient être considérés en concevant l'UI

16 www.site.uottawa.ca/~elsaddik 15 Unit A-Introduction (c) elsaddik 6. Comprendre lutilisateur (suite) Utilisateur peut être catégorisé par: Par classe Détermin é par exemple par: administrateur, étudiant, professeur, client Par type de personnalité timide / extraverti offensif / défensif designer! Par capacité Handicap physique --> des I/O innovatives peuvent être nécessaires Daltonien (Colourblind) --> ne pas seulement utiliser les couleurs pour transmettre de l'information Problèmes cognitifs --> gauche vs droit ! Illettrisme --> utiliser des icônes Ignorance du domaine

17 www.site.uottawa.ca/~elsaddik 16 Unit A-Introduction (c) elsaddik 7. Productivité de lutilisateur & Convivialité Productivité de lutilisateur = Fonctionnalité (quest-ce que lordinateur peut faire) * Convivialité (quest-ce quon peut faire avec lordinateur) Si un des deux est zéro, le système est inutile Facteurs influençant la productivité de l'utilisateur: le nombre et les caractéristiques des tâches Caractéristiques des utilisateurs (capacités, expérience etc...) Environnement de travail (distractions etc...) Formation et documentation Fonctionnalité et convivialité des logiciels et matériels disponibles

18 www.site.uottawa.ca/~elsaddik 17 Unit A-Introduction (c) elsaddik A Model of Usability Factors

19 www.site.uottawa.ca/~elsaddik 18 Unit A-Introduction (c) elsaddik Critical Usability Factors High staff turnoverLearnability critical Discretionary useFit to task critical Prolonged or frequent useEfficiency critical Creative useEase of extension and customization critical High functionalityHigher usability needed Infrequent discretionary use of highly functional system with staff turnover A problem!

20 www.site.uottawa.ca/~elsaddik 19 Unit A-Introduction (c) elsaddik 8. Disciplines contribuant à HCI Psychologie cognitive Possibilités et limitations des sens et des processus humains Ergonomie Efficacité des logiciels et hardware et sûreté/sécurité de lenvironnement pour lusager Linguistique Syntaxe et sémantique des commandes Entrées/sorties de sons et voix Intelligence artificielle Entrées/sorties de sons et voix Estimation intelligente de ce que l'utilisateur veut Représentations des connaissance des utilisateurs Sociologie et psychologie sociale Assister des personnes pour travailler en groupes avec le logiciel Assurer que de logiciel fonctionne de la même façon dans différentes cultures Ingénierie et design industriel Approche basée sur les mesures Esthétique Story-board etc.

21 www.site.uottawa.ca/~elsaddik 20 Unit A-Introduction (c) elsaddik Système cognitif humain Perception et représentation Certains affichages peuvent être difficiles à comprendre Bleu avant-plan (foreground) Illusions doptiques Contrastent dans les couleurs Trop de couleurs Il y a 2 façons dutiliser les graphiques: Pour la modélisation images directes des concepts Pour la codification représentant des idées fondamentales, par exemple montrer des données quantitatives

22 www.site.uottawa.ca/~elsaddik 21 Unit A-Introduction (c) elsaddik Système cognitif humain (suite) Distractions Personnes peuvent être distraits facilement Indiquer clairement les points importants Personnes peuvent être perdus si le système est très complexe Structurer linformation pour quelle soit facile à lire rapidement Pas trop dinformations Pas trop peu dinformations Groupez linformations logiquement Personnes multitâches Indiquer létat du système clairement pour que les usagers sy retrouvent facilement Certains processus mentaux sont automatiques, ou le deviennent (contrairement aux processus commandés) il est très difficile doublier ces processus

23 www.site.uottawa.ca/~elsaddik 22 Unit A-Introduction (c) elsaddik Système cognitif humain(suite) Limite de la mémoire La mémoire à court terme peut contenir 7±2 unités dinformation Eviter les situations où lutilisateur doit se rappeler plus Grouper linformation logiquement pour en faire des unités Plus cest significatif, plus cest facile à retenir (les éléments familiés, les images et l'uniformité aide à mieux comprendre) Utiliser des noms et des icônes efficaces Associer icônes et mots Les icônes peuvent être des analogies, des exemples ou des abstractions mais ne doivent pas être arbitraires Attention aux différences culturelles (par exemple le symbole indiquant des toilettes nest pas le même partout!) Les gens reconnaissent plus facilement quils ne se rappellent Utiliser des menus, des icônes

24 www.site.uottawa.ca/~elsaddik 23 Unit A-Introduction (c) elsaddik Quelques points dorganisation E-MAILS: doit commencer avec : SEG 3520: xxxxxxxxxxxxxxxx Est-ce que vous avez un/e associé(e) pour les projets?

25 www.site.uottawa.ca/~elsaddik 24 Unit A-Introduction (c) elsaddik Quelque points dorganisation Les TAs sont: Anwar Hossein anwar@mcrlab.uottawa.ca Yong Zhong zhong@mcrlab.uottawa.ca IMPORTANT pour Devoir #1 Vous névaluez pas les humains (usagers) Vous évaluez SEULEMENT le logiciel pour trouver les défauts de fonctionnement Noubliez pas de signer « Informed Consent Form »

26 www.site.uottawa.ca/~elsaddik 25 Unit A-Introduction (c) elsaddik 9. Ingénierie du HCI : une branche du génie logiciel (Unités C et D) Un modèle conceptuel du processus de développement des interfaces usagers : Modèle «Star» Évaluation est le processus central UI est révisée chaque fois quun problème est soulevé

27 www.site.uottawa.ca/~elsaddik 26 Unit A-Introduction (c) elsaddik Un modèle conceptuel dUI à cinq niveaux À chaque niveau: Design doit être fini Problèmes peuvent survenir Les niveaux sont: Niveau des tâches Que veut faire lusager Niveau conceptuel Modèle du système tel quimaginé par lutilisateur Niveau du style dinteraction éléments du design qui sont répétés dans tout le système : commandes, menu de navigation, manipulations directes, hypermédia Niveau délément dinteraction Fenêtres spécifiques, dialogues, commandes, menus Niveau délément physique Bitmaps, caractères, structures des données, procédure de rappel

28 www.site.uottawa.ca/~elsaddik 27 Unit A-Introduction (c) elsaddik Évolution du simple SW- à ing. conviviale Développement normal du logiciel (impliquant UI) se concentrer sur les éléments dinteraction et les éléments physiques le modèle « Waterfall » domine (séquentiel), modèle «Spirall» évaluation par la revue et les tests des spécifications fonctionnelles Développement des interfaces usagers se concentrer sur les utilisateurs et les tâches le modèle « Star » domine (itératif) évaluation par la participation continu des usagers conduit par l'heuristique et les directives intègre la psychologie etc. influence la fonctionnalité Convivialité (Usability) engineering Se base sur des objectifs précis et rigoureux pousse fonctionnalité

29 www.site.uottawa.ca/~elsaddik 28 Unit A-Introduction (c) elsaddik Système darchitecture du modèle conceptuel de UI Pourquoi des couches? Simplifie le développement et la maintenance du logiciel Les deux couches: sont développées en parallèle influence l'une l'autre sont inclus dans les spécifications du système complet sont évaluées en même temps Évolution des couches: La couche fonctionnelle change peu pendant le développement du système Les deux couches peuvent avoir besoin dêtre modifiées si on mod les fonctions principales du système

30 www.site.uottawa.ca/~elsaddik 29 Unit A-Introduction (c) elsaddik Caractéristiques des produits et applications Chaque genre dapplications demande une réponse/adaptation différente du concepteur dUI : application pour usage interne vs produit destiné à la vente service générique vs outil spécialisé niveaux de connaissances requis (sans apprentissage particulier vs produit spécialisée pour un domaine) Quelques défis de design: Adapter un produit de service générique de sorte quil devienne un outil tâche-spécifique pour l'usage interne et vice versa Convertir une application exigeant des utilisateurs spécialisés en une application facile à apprendre et utiliser

31 www.site.uottawa.ca/~elsaddik 30 Unit A-Introduction (c) elsaddik 10. Défauts de fonctionnements des UI Idée clé : « Il ny a pas de bonnes interface usagers... il ny que des interfaces qui s'adaptent au besoin actuel» Une interface utilisateur véritablement mauvaise ne s'adaptera jamais mais parmi les bonnes, peu conviendront à une tâche ou une autre Pour maximiser ladaptation, nous devons réduire au minimum l'occurrence des « défauts de fonctionnements » dans le contexte de l'utilisation prévue du système.

32 www.site.uottawa.ca/~elsaddik 31 Unit A-Introduction (c) elsaddik Définitions: défauts de fonctionnements (Défaillances) Un désaccord entre ce que l'utilisateur veut, a besoin ou prévoit et ce que le système fournit. Une panne de convivialité Un obstacle pour accomplir une tâche désirée Il faut savoir que: les défauts de fonctionnements occasionnels sont normals les défauts de fonctionnements systématiques ou fréquents ont besoin d'être corrigés

33 www.site.uottawa.ca/~elsaddik 32 Unit A-Introduction (c) elsaddik Idées relatives aux défauts de fonctionnements Erreur : Erreur identifiable de la part de designer Défaut : Une déviation de ce que l'utilisateur a besoin Une défaillance est une panne de convivialité: Un défaut dans le fonctionnement régulier du système Les utilisateurs peuvent ne pas se rendre compte de plusieurs défauts de fonctionnement les défauts de fonctionnement peuvent seulement être isolés par des analyses soigneuses ils peuvent être subtiles Discussion détaillée sur les défaillances dans l unité B

34 www.site.uottawa.ca/~elsaddik 33 Unit A-Introduction (c) elsaddik 11. Études de cas : défaillances dans une UI Désastres aériens Le pilote de la ligne aérienne de la Chine perd le contrôle : On s'attendait à ce que l'humain agisse en tant que moniteur, mais les humains sont de mauvais moniteurs (obtenez alésé) Les humains ont besoin de contrôler les choses et dobtenir une réponse US Vincennes a abattu un avion iranien: 290 morts informations critiques concernant lavion affichées sur différents écrans en recueillant les faits pertinants de différents endroits, on saperçoit que plusieurs informations se contredisent

35 www.site.uottawa.ca/~elsaddik 34 Unit A-Introduction (c) elsaddik 12. Points clés à reviser Buts de HCI: améliorer Sûreté Fonctionnalité Efficacité Convivialité Visibilité et rétroaction Affordance et perceived affordance But = état ; tâche = action Humain/ordinateur comme un système de 2 processeurs Types, classes et capacité des utilisateurs Productivité de lutilisateur = Fonctionnalité * convivialité Facteurs de la convivialité Exemple: simplicité d'apprentissage, fit, acceptabilité Disciplines contribuant Exemple: linguistique, Intelligence artificielle

36 www.site.uottawa.ca/~elsaddik 35 Unit A-Introduction (c) elsaddik 12. Points clés à reviser (suite) Système cognitif humain – limité par: perception attention mémoire Analyse des tâches vs. Analyse des fonctions Modèle «Star» avec évaluation au centre Niveaux UI tâches Modèle conceptuel style dinteraction élément dinteraction élément physique Convivialité engineering UI Couches avec API Défauts de fonctionnements (Défaillances) comme une déviation de ce que lusager a besoin