1 / 58

IHM

IHM. Interfaces/Interactions Homme-Machine François BONNEVILLE aricia - francois@aricia.fr Laboratoire d'Informatique de l’Université de Franche-Comté. Un peu d’histoire .

valterra
Télécharger la présentation

IHM

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. IHM Interfaces/Interactions Homme-Machine François BONNEVILLE aricia - francois@aricia.fr Laboratoire d'Informatiquede l’Université de Franche-Comté

  2. Un peu d’histoire ... • 1945 : MemexVannevar Bush décrit un appareil électronique assemblage d'éléments électromécaniques, de caméras et de microfilms, relié à une bibliothèque, intégré dans un grand bureau capable • d'afficher des livres etde projeter des films • de créer automatiquement des références entreles différents médias Intefaces Hommes-Machines - François Bonneville

  3. Un peu d’histoire ... • 1963 : Ivan Sutherland (MIT) invente Sketchpad, l'ancêtre des logiciels de CAO • manipulation directe • programmation OO • Ecran oscilloscope • Manipulation parstylo optique Intefaces Hommes-Machines - François Bonneville

  4. Un peu d’histoire ... • 1964 : Douglas Engelbart développe • souris • interfaces graphiques • traitement de texte • messagerieélectronique • groupware Intefaces Hommes-Machines - François Bonneville

  5. Un peu d’histoire ... • 1968 : Ted Nelson (Xanadu) invente les termes hypertext et hypermédia • Au MIT • Des laboratoiresArchitecture Machine Group, A.I. Lab, Media Lab • Des chercheursMarvin Minsky, Seymour Papert, Nicholas Negroponte… • Des inventions • langage Logo • langage naturel • synthèse / reconnaissance de la parole Intefaces Hommes-Machines - François Bonneville

  6. Un peu d’histoire ... • 1970 Xerox PARC (Palo Alto)centre de recherche « historique » • photocopie • prototype de la station de travail • concepts de l’ordinateur « personnel » • bureautique (WYSIWIG) • fenêtres, ascenseurs, menus ... • réseau Ethernet • programmation orientée objet (Smalltalk) • Alan Kay« Le meilleur moyen de prédire le futur est de l'inventer » Intefaces Hommes-Machines - François Bonneville

  7. Un peu d’histoire ... • Les premiers micro-ordinateurs • 1972 : le Micral est inventé en France • 1975: ALTAIR 8800un micro-ordinateur pour moins de $400 Intefaces Hommes-Machines - François Bonneville

  8. Un peu d’histoire ... • 1981: Xerox Star • 1er modèle commercial de station de travail • environnement graphique évolué, • Desktop, WYSIWYG • Architecture fermée • orienté professionnels • trop cher ($15 000) • échec commercial • une influence certainesur les systèmes actuels Intefaces Hommes-Machines - François Bonneville

  9. Un peu d’histoire ... • 1983: Apple Lisa • plus ou moins inspiré du Xerox Star • plutôt un ordinateur personnel • trop cher, échec commercial Intefaces Hommes-Machines - François Bonneville

  10. Un peu d’histoire ... • 1984: Apple MacIntosh • « rien de nouveau » • bien fait • prix raisonnable ($ 2500) • technologie “mûre” • WYSIWYG • « desktop publishing » • impression laser Intefaces Hommes-Machines - François Bonneville

  11. Un peu d’histoire ... • 1985: X Window System (MIT) • pour « stations de travail » Vax, HP, puis Sun • multi-plateformes • indépendant du matériel et du logiciel • en réseau : architecture client / serveur Intefaces Hommes-Machines - François Bonneville

  12. Un peu d’histoire ... • Microsoft Windows : IBM PC AT (1984 - processeur à 6MHz) • Windows • 1.01 1987 (1983-1987) • Windows 2.03 1988 • Windows 3.1 1992 • Windows NT, 95, 98, 2000 • XP, Vista, 7 • 1990: World Wide Web (CERN - Tim Berners-Lee) • modèle d’hypertexte en réseau • devient hypermédia et grand publicavec Mosaic (ancêtre de Netspace puis Mozilla) • article refusé à la prestigieuse conférence« ACM Hypertext » ! Intefaces Hommes-Machines - François Bonneville

  13. Un peu d’histoire ... • 1992 : Les assistants numériques (PDA) • Palm • Newton (Apple) • 2000 : Smartphones • Blackberry • Iphone • Windows Mobile • Androïd Intefaces Hommes-Machines - François Bonneville

  14. Et demain ? • Réalité virtuelle • simulation d’un environnementdans lequel le sujet al'impression d'évoluer (avatar) • immersion dans un monde 3D • Réalité augmentée • superposition de l'image d'un modèle virtuel sur uneimage de la réalité en temps réel • le virtuel est intégré dans le réel Intefaces Hommes-Machines - François Bonneville

  15. Et demain ? • Tableau interactif • Videoprojection • Écran tactile • Historique et sauvegarde Intefaces Hommes-Machines - François Bonneville

  16. Et demain ? • Groupware Travail collaboratifCollecticiel • Table augmentée • « Clearboard » • Télévirtualité Intefaces Hommes-Machines - François Bonneville

  17. Et demain ? • Visualisation de l’information(accès aux masses de données) • Vues hyperboliques • Représentation temporelle • Focus + contexte Intefaces Hommes-Machines - François Bonneville

  18. Et demain ? • Nouveaux dispositifs d’interaction • Multitouch • Retour tactile • Dispositifs pour non-voyant Intefaces Hommes-Machines - François Bonneville

  19. IHM - Définitions • Interface homme – machine • Ensemble des dispositifs matériels et logiciels permettant à un utilisateur d’interagir avec un système interactif • Interaction homme – machine • Ensemble des aspects de la conception, de l’implémentation et de l’évaluation des systèmes informatiques interactifs • Approche technocentrée • centrée les capacités de la machine • l’utilisateur doit s’adapter à la machine • Approche anthropocentrée • centrée sur l’homme et ses besoins • la machine doit s’adapter à l’utilisateur Intefaces Hommes-Machines - François Bonneville

  20. Les enjeux des IHM • Population croissante d'utilisateurs de systèmes informatiques • Puissance grandissante des ordinateurs • Nouveaux dispositifs d'interaction • Explosion du multimédia : son, image, vidéo etc. • Développement des réseaux informatiques CONVERGENCE NUMERIQUE Intefaces Hommes-Machines - François Bonneville

  21. IHM, domaine pluridisciplinaire • Informatique • programmation • IA • synthèse et reconnaissance de la parole, langue naturelle • image • système... • Ergonomie cognitive, ergonomie des logiciels • Communication, graphisme, audiovisuel • Sciences de l’éducation, didactique • Psychologie cognitive • Anthropologie, sociologie, philosophie, linguistique Intefaces Hommes-Machines - François Bonneville

  22. Adapter l’IHM Aux caractéristiques de l’utilisateur • différences physiques (âge, handicap) • connaissances et expériences • dans le domaine de la tâche (novice, expert, professionnel) • en informatique (usage occasionnel, quotidien) • caractéristiques psychologiques visuel/auditif, logique/intuitif, analytique/synthétique… • caractéristiques socio-culturelles • sens d'écriture • format des dates • signification des icônes, des couleurs Intefaces Hommes-Machines - François Bonneville

  23. Adapter l’IHM • Au contexte • grand public (proposer une prise en main immédiate) • loisirs (rendre le produit attrayant) • industrie (augmenter la productivité) • systèmes critiques (assurer un risque zéro) • Aux caractéristiques de la tâcherépétitive, régulière, occasionnelle, sensible aux modifications de l'environnement, contrainte par le temps... • Aux contraintes techniques • plate-forme • taille mémoire • écran, capteurs, effecteurs • réutilisation de code ancien Intefaces Hommes-Machines - François Bonneville

  24. Les enjeux de l’IHM • L’IHM est souvent un élément clé du logiciel • La conception de l'interaction représente plus de 50% du coût de développement • L’IHM peut représenter 80% du code d’une application • elle peut être modifiée/reconstruite de multiples fois • importance de l’indépendance interface / coeur du système • Nécessite une approche précoce, méthodique, itérative, expérimentale • Ce n'est pas simplement • une opération esthétique de l'écran • une affaire de goût, de bon sens, d’intuition • Méthode ? • pas toujours de solution prête à l'emploi • des points de repères théoriques, expérimentaux, des savoir-faire Intefaces Hommes-Machines - François Bonneville

  25. Les risques d'une mauvaise interface • Rejet pur et simple par les utilisateurs • Coût d'apprentissage (formation) • Perte de productivité • Perte de crédibilité • Utilisation incomplète (manque à gagner) • Coût de maintenance • Catastrophe pour une application critique (véhicule, centrale nucléaire…) Intefaces Hommes-Machines - François Bonneville

  26. IHM : Les objectifs • Concevoir et développer des systèmes • Fiables et robustes • Utilisables : degré selon lequel un produit peut-être utilisé par des utilisateurs identifiés, pour atteindre des buts définis • Efficaces : précision ou degré d’achèvement des objectifs atteints par l’utilisateur • Efficients : capacité à produire une tâche donnée avec le minimum d’effort, mesuré par le taux et nature des erreurs, temps, nombre d’opérations requises • Faciles à apprendre, intuitifs • Causalité — facilité de déterminer le comportement du système à partir d’interactions antérieures. (visibilité opérationnelle) • Observabilité — facilité offerte à l’utilisateur de vérifier les effets de ses actions. • Standards et « consistants » : suivre les guides de styles du système • Respecter les principes ergonomiques de base Intefaces Hommes-Machines - François Bonneville

  27. Ergonomie • Définition : Science du travail et des activités humaines • Ergon (travail) et nomos (règles) • Vise la compréhension des interactions humains/système • Optimisation du bien-être des personnes et de la performance globale des systèmes • Efficaces, fiables, sûrs, favorables à la santé de leurs utilisateurs et au développement de leurs compétences Intefaces Hommes-Machines - François Bonneville

  28. Objectif de l’ergonomie • Objectifs centrés sur les personnes : • Santé • Sécurité • Confort, Facilité d’usage, satisfaction, plaisir • Intérêt de l’activité, du travail • Santé cognitive : favorise le développement de compétences • Objectifs centrés sur la performance • Efficacité, Productivité • Fiabilité • Qualité Intefaces Hommes-Machines - François Bonneville

  29. Variabilité et Diversité • L’homme standard n’existe pas ! • Diversité des êtres humains • Age, sexe, conditions de vie, caractéristiques physiques, formation, santé, déficiences… • Expertise • Déficiences et handicaps • Déficiences : partie du corps ne fonctionnant pas ou mal • Incapacités entraînées par des déficiences • Handicaps provoqués par la non-adaptation de l’environnement • Situation handicapantes même sans déficiences • Déficiences sans handicaps si les situations adaptées Intefaces Hommes-Machines - François Bonneville

  30. Variabilité et Diversité • Variabilité intra-individuelle • A court terme : rythme circadien, vigilance, mémoire • A moyen terme : expérience • A long terme : vieillissement physique et cognitif • Variabilité de l'environnement • Prévisible : jour/nuit, saison… • Aléatoire : urgences, aléas • L’ergonomie doit • Incorporer des stratégies de régulation face à la variabilité • Limiter la variabilité • Proposer des outils, des organisations, des formations adaptés • Proposer des systèmes adaptés, adaptables et adaptatifs Intefaces Hommes-Machines - François Bonneville

  31. Utilisabilité d’un système • Utilisabilité : norme ISO 9241 degré selon lequel un produit peut être utilisé, par des utilisateurs identifiés, pour atteindre des buts définis avec efficacité, efficience et satisfaction, dans un contexte d’utilisation spécifié • Critères de l’utilisabilité • efficacité : atteinte du résultat prévu • efficience : consommation d’un minimum de ressources • facilité d’apprentissage • facilité d’appropriation : prise en main du logiciel • facilité d’utilisation • fiabilité : pas ou peu d’erreurs d’utilisation • satisfaction de l’utilisateur : confort et évaluation subjective Intefaces Hommes-Machines - François Bonneville

  32. IHM : Méthodes de conception Génie logiciel : modèle en cascade • Cycle de vie en cascade (avec itérations) • étape suivante uniquement quand une étape est satisfaisante • conception orientée vers l’implantation • évaluation en dernier • Modèle créé pour les grands projets • importance des documents • cahier des charges • spécifications • signés par les clients Intefaces Hommes-Machines - François Bonneville

  33. IHM : Méthodes de conception Génie logiciel : modèle en V • L’évaluation se fait seulement après le codage • Le modèle ne précise pas la portée des retours arrière • Les documents ont un rôle important Intefaces Hommes-Machines - François Bonneville

  34. IHM : Méthodes de conception Génie logiciel : modèle en spirale • Prototypes successifs • Pour chaque cycle • définition des objectifs, alternatives retenues et contraintes • analyse et résolution des problèmes • développement, validation et vérification de la phase • planification de la phase suivante Intefaces Hommes-Machines - François Bonneville

  35. IHM : Méthodes de conception Bilan des méthodes de génie logiciel • Les fonctionnalités du système sont mises en avant au détriment des utilisateurs • Principe d’indépendance entre le noyau fonctionnel et l’interface utilisateur (interface et interaction ne sont définies qu’après) • Mais dans les logiciels interactifs cette séparation n’est pas si nette • Il est indispensable de prévoir l’usage en même temps que les fonctionnalités Intefaces Hommes-Machines - François Bonneville

  36. IHM : Méthodes de conception Conception participative centrée utilisateur • Prise en compte des utilisateurs dès la phase d’analyse : étude de l’utilisateur et de sa tâche • Nécessite de spécifier les caractéristiques de l’utilisateur, de la tâche à réaliser et de l’interaction • Relations concepteur – utilisateur • utilisateur observé dans la résolution de sa tâche • interrogé sur ses attentes • questionné sur le logiciel conçu • Avantages : prise en compte de l’utilisateur avant la phase d’évaluation • Difficultés • choisir des utilisateurs représentatifs et disponibles • ne pas oublier le contexte réel d’utilisation • expliciter les comportements, les connaissances mises en jeu... • Techniques de recueil d’information auprès des utilisateurs : observation directe, entretiens, questionnaires Intefaces Hommes-Machines - François Bonneville

  37. Techniques de recueil d’information Scénarios de conception • But : créer une description réaliste de l'utilisation du nouveau système • Moyen • utiliser les scénarimages (storyboards) du monde du cinéma • points clés, commentaires, enchaînements • pour une vue d'ensemble de l'interaction • Procédure • identifier des activités existantes • Typiques • Inhabituelles • créer des scénarios de travail en généralisant les histoires • mélanger les événements de différentes provenances • incorporer des situations inhabituelles dans des activités typiques • inclure des situations qui aboutissent et d'autres pas Intefaces Hommes-Machines - François Bonneville

  38. Techniques de recueil d’information Inspections cognitives • But : évaluer le systèmeen se mettant à la place de l’utilisateur • Moyens : spécifier une série de tâcheset de séquences d'actions pour les réaliser • Procédure • imaginer ce que ferait l'utilisateur (comprend-il les messages, le comportement du système ?) • interprétation et prise en compte des résultats Intefaces Hommes-Machines - François Bonneville

  39. Techniques de recueil d’information Remue-méninges (brainstorming) • But : générer un grand nombre d'idées créatives • Procédure : • réunir un petit groupe avec différents rôles et expertises • limiter le temps (1h) • décrire un problème de conception spécifique • phase 1 : générer une grande quantités de solutionsfaire participer tout le monde, enregistrer toutes les idées sans les évaluer • phase 2 : classer les idées en fonction de leur qualité chacun annonce les idées qu'il préfèreles idées sont classées par nombre de votes • commencer la conception à partir des idées les mieux classées • ne pas oublier les idées insolites Intefaces Hommes-Machines - François Bonneville

  40. Techniques de recueil d’information Magicien d’Oz • But • simuler les fonctionnalités absentes du système • système réel inexistant ou partiellement développé • technique difficile à mettre en place :adapté à des systèmes lourds • Moyen : un compère effectue les actions à la place du système • Procédure • le "magicien" interprèteles entrées de l'utilisateur • il supplée aux manques du prototypeet contrôle le comportement du système • l'utilisateur a la sensation d'utiliserun vrai système Intefaces Hommes-Machines - François Bonneville

  41. Techniques de recueil d’information Entretiens critiques • But : identifier des exemplesspécifiques de problèmesrencontrés par les utilisateurs • Procédure • interviewer l'utilisateur dans son environnement de travail • lui demander de se souvenir d'un problème particulier vécu dans un passé récent • lui demander de décrire chaque incident en détail • lui demander ce qui est habituel et ce qui ne l'est pas dans l'incident Intefaces Hommes-Machines - François Bonneville

  42. Techniques de recueil d’information Entretiens • Attention à ne pas induire les réponses aux questions • Recensement des besoins • Constitution d’un glossaire des termes des utilisateurs • Création de répertoires de raisonnement • Détermination des processus cognitifs qui régissent les activités • Définition des enchaînements logiques des actions de l’utilisateur • Enrichissement des données recueillies • Entretiens structurés directifs ou semi-directifs • mêmes questions et mêmes formats pour tout le monde • + facile à mener, + facile de comparer • Entretiens ouverts • permettent de saisir des réactions spontanées • permettent de saisir la façon de faire des utilisateurs Intefaces Hommes-Machines - François Bonneville

  43. Techniques de recueil d’information Observations • But : identifier les gros problèmesdu logiciel (prototype / système final) • Procédure • en laboratoire ou sur le terrain • choisir au moins 2 utilisateurs qui agiront indépendamment • définir une mission spécifique (résoudre un problème, suivre un scénario) • décider de ce que l'on veut mesurer • demander aux utilisateurs d'effectuer la tâche (méthode intrusive) • observation directe simple • avec explication à haute voix • à deux pour observer leurs interactions (interrogations, explications) • enregistrer les interactions, puis les analyser • papier, audio, vidéo, trace informatique Intefaces Hommes-Machines - François Bonneville

  44. Techniques de recueil d’information Observations • Enregistrements vidéo (ou audio) il faut voir • le visage, la posture de l’utilisateur • l’écran • Oculométrie (eye tracking) • Utilité : corriger certains biais des protocoles verbaux • Inconvénients : très long et coûteux à dépouiller Intefaces Hommes-Machines - François Bonneville

  45. Techniques de recueil d’information Observations • Traces informatiques • mémorisation de (toutes) les actions de l’utilisateur • permet de rejouer la session • objectif : dépouillement automatiquementl’analyse doit être prévue avant Intefaces Hommes-Machines - François Bonneville

  46. Les éléments d’une IHM Quelques principes • 2 secondes • ne pas attendre plus de 2 secondes les réponses du système • 3 clics • accéder à l’information souhaitée en 3 clics • Loi de Fitts • le temps pour atteindre une cible dépend de la distance et de sa taille • Syndrome de l’oisillon • les utilisateurs ont tendance à rejeter les systèmes non familiers • problème pour l’évolution des logiciels, les innovations • Conception intuitive • interface utilisable dès la première fois, sans formation Intefaces Hommes-Machines - François Bonneville

  47. Les éléments d’une IHM Lisibilité des couleurs • Privilégier un bon contraste caractères/fond • caractères sombres sur fond clair • de préférence caractères noirs sur fond blanc • Éviter certaines combinaisons de couleurs • Limiter le nombre de couleurs (7 maximum) • Attention à la portabilité des couleurs • selon les écrans (penser au nombre de couleurs des écrans) • selon les personnes : choisir des couleurs faciles à distinguerdaltonisme : 8-10% des hommes, 0,5% des femmes Intefaces Hommes-Machines - François Bonneville

  48. Les éléments d’une IHM Signification des couleurs • Respecter les habitudes culturelles • en occident : rouge = stop / vert = go • en chine : rouge = joie, mariage • Utiliser les couleurs poursignifier quelque chose • même type d’information  même couleur • types d’information différents  couleurs contrastées • types d’information similaires  couleurs peu contrastées Intefaces Hommes-Machines - François Bonneville

  49. Les éléments d’une IHM Lecture à l’écran Commandes • 1ère visualisation de l’écran : parcours en Z • Ensuite : parcours sélectif • Meilleure visibilité et accessibilité au centre de l’écran Intefaces Hommes-Machines - François Bonneville

  50. Les éléments d’une IHM Affichage de texte Typographie • sur écran polices sans sérifplus lisibles à l’écran(Arial, Helvetica, Geneva…) • gras, italique, souligné ralentissent la lecture • MAJUSCULES moins lisibles que minuscules Intefaces Hommes-Machines - François Bonneville

More Related