Interfaces/Interactions Homme-Machine

Présentation au sujet: "Interfaces/Interactions Homme-Machine"— Transcription de la présentation:

1 Interfaces/Interactions Homme-Machine
IHM Interfaces/Interactions Homme-Machine François BONNEVILLE aricia - Laboratoire d'Informatique de l’Université de Franche-Comté

2 Un peu d’histoire ... 1945 : Memex Vannevar 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 et de projeter des films de créer automatiquement des références entre les 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 par stylo optique Intefaces Hommes-Machines - François Bonneville

4 Un peu d’histoire ... souris interfaces graphiques traitement de texte
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 ... 1965 : Ted Nelson (Xanadu) invente les termes hypertext et hypermédia Au MIT Des laboratoires Architecture Machine Group, A.I. Lab, Media Lab Des chercheurs Marvin 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 un 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 certaine sur 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 ( processeur à 6MHz) Windows ( ) Windows Windows 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 public avec 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 Réalité augmentée
simulation d’un environnement dans lequel le sujet a l'impression d'évoluer (avatar) immersion dans un monde 3D Réalité augmentée superposition de l'image d'un modèle virtuel sur une image 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 collaboratif Collecticiel
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âche ré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 sont 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ème en se mettant à la place de l’utilisateur Moyens : spécifier une série de tâches et 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 solutions faire 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ère les 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ète les entrées de l'utilisateur il supplée aux manques du prototype et contrôle le comportement du système l'utilisateur a la sensation d'utiliser un vrai système Intefaces Hommes-Machines - François Bonneville

41 Techniques de recueil d’information
Entretiens critiques But : identifier des exemples spécifiques de problèmes rencontré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èmes du 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 But : identifier les gros problèmes du 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

45 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

46 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 automatiquement l’analyse doit être prévue avant Intefaces Hommes-Machines - François Bonneville

47 Les éléments d’une IHM Quelques principes 2 secondes 3 clics
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

48 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 à distinguer daltonisme : 8-10% des hommes, 0,5% des femmes Intefaces Hommes-Machines - François Bonneville

49 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 pour signifier 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

50 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

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

52 Les éléments d’une IHM Utiliser le langage de l’utilisateur
Éviter les abréviations Produire des messages concis et homogènes Utiliser La forme affirmative La voix active Éviter les impasses Respecter l’ordre des actions Mettre en évidence les éléments importants Intefaces Hommes-Machines - François Bonneville

53 Types d’interaction : 1. le langage naturel
Dialoguer en langage naturel (réel ou via le clavier) en théorie, le moyen le plus attractif de communiquer en pratique, très peu utilisé (surtout pour commandes de complexité restreinte) Raisons techniques difficultés de l’analyse du langage naturel problème des ambiguïtés, des références, des sous- dialogues difficultés de reconnaissance vocale Raisons fonctionnelles difficulté d’utilisation du clavier erreurs lenteur d’utilisation Intefaces Hommes-Machines - François Bonneville

54 Types d’interaction : 2. Langage de commande
Principe écrire une ligne de commandes (avec syntaxe et vocabulaire) accès direct aux fonctionnalités du système pour les experts mais pas utilisable par des novices Exemples : Dos, Unix : delete *.* copy A:*.doc c: Avantages concision (plus grande qu’en langage naturel) Structuration possibilité d’extensions (définition de macros, scripts) Inconvénients : apprentissage et pratique régulière Vocabulaire à utiliser mots courts, faciles à taper (proximité des touches sur le clavier) spécifiques plutôt que généraux de préférence prononçables Intefaces Hommes-Machines - François Bonneville

55 Types d’interaction : 3. les menus
Sélectionner un item dans un menu Déclencher une commande par un clic Mettre en évidence une option choisie Possibilité de hiérarchie Graphisme des commandes normal activable grisé  non activable mais pas effacé par catégories, séparées par un trait (couper / copier / coller) Possibilité de personnaliser les menus (experts) Intefaces Hommes-Machines - François Bonneville

56 Types d’interaction : 4. les formulaires
Répondre à des questions pour entrer des informations nombreuses mécanisme simple mais fonctionnalités limitées questions fermées (oui/non, choix multiples, listes) questions ouvertes champs à remplir Vérifier la cohérence des données saisies Intefaces Hommes-Machines - François Bonneville

57 Types d’interaction : 5. Manipulation d’objets graphiques
Actions physiques sur les objets pointer et cliquer opérations rapides et réversibles avec effet visible immédiatement Principe objet/action Désignation des objets qu’on veut manipuler, puis actions les unes à la suite des autres exemple : sélection de texte, puis centrer, italique Avantages plus fort engagement de l’utilisateur impression d’agir sur l’environnement plus faible distance entre la conception du monde et la façon dont il est représenté à l’interface Inconvénients difficulté de représenter des opérations abstraites encombrement de l’écran (tous les objets) ambiguïté du sens des icônes jugée moins rapide par les experts Intefaces Hommes-Machines - François Bonneville

58 Guides de style références dont il faut tenir compte pour concevoir des interfaces définissent l’aspect des interfaces mais ne contiennent pas de recommandations ergonomiques spécifiques au système d’exploitation, à sa version Apple’s Human Interface Guidelines Microsoft Windows XP Visual Guidelines Java Look and Feel design Guidelines Intefaces Hommes-Machines - François Bonneville

59 Pour aller plus loin AFIHM : Association Francophone d'Interaction Homme-Machine Bibliographie machine Intefaces Hommes-Machines - François Bonneville