Docstoc

ihm IHM Interfaces Interactions Homme Machine François BONNEVILLE

Document Sample
ihm IHM Interfaces Interactions Homme Machine François BONNEVILLE Powered By Docstoc
					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 ...
• 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         2
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   3
Un peu d’histoire ...
• 1964 : Douglas Engelbart développe
      souris
      interfaces graphiques
      traitement de texte
      messagerie
       électronique
      groupware

Intefaces Hommes-Machines - François Bonneville   4
Un peu d’histoire ...
• 1968 : 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               5
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                       6
Un peu d’histoire ...
• Les premiers micro-ordinateurs
       1972 : le Micral est inventé en France




       1975: ALTAIR 8800
        un micro-ordinateur pour moins de $400




Intefaces Hommes-Machines - François Bonneville   7
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       8
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   9
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   10
Un peu d’histoire ...
• 1985: X Window System (MIT)
       pour « stations de travail » Vax, HP, puis Sun
       multi-plateformes
       indépendant du matérie et du logiciel
       en réseau : architecture client / serveur




Intefaces Hommes-Machines - François Bonneville          11
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 public
        avec Mosaic (ancêtre de Netspace puis Mozilla)
       article refusé à la prestigieuse conférence
        « ACM Hypertext » !

Intefaces Hommes-Machines - François Bonneville              12
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   13
Et demain ?
• Réalité virtuelle
      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   14
Et demain ?
• Tableau interactif
       Videoprojection
       Écran tactile
       Historique et sauvegarde




Intefaces Hommes-Machines - François Bonneville   15
Et demain ?
• Groupware
   Travail collaboratif
   Collecticiel
       Table augmentée
       « Clearboard »
       Télévirtualité




Intefaces Hommes-Machines - François Bonneville   16
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   17
Et demain ?
• Nouveaux dispositifs d’interaction
      Multitouch




      Retour tactile

      Dispositifs pour non-voyant



Intefaces Hommes-Machines - François Bonneville   18
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                        19
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                     20
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                       21
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                                           22
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                             23
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            24
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                                                25
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              26
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            27
Variabilité et Diversité
• L’homme standard n’existe pas !
• Diversité des êtres humains
       Age, sexe, conditions de vie, formation, caractéristique
        physique, santé, déficiences…
       Expertise
• Déficiences et handicaps
       Déficiences : partie du corps de fonctionnement 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 situations adaptées

Intefaces Hommes-Machines - François Bonneville                    28
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
         Comprendre les 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                            29
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        30
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    31
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                            32
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               33
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                                 34
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                                     35
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                36
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                                  37
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                   38
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                        39
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                                40
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                                        41
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              42
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                 43
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                                   44
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                      45
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                     46
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        47
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      48
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   49
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                    50
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                               51
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                    52
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          53
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                                         54
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




Intefaces Hommes-Machines - François Bonneville         55

				
DOCUMENT INFO