Interfaces

Homme-Machine

1
 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

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

3
 Un peu d’histoire ...
• 1964 : Douglas Engelbart développe

¨souris
¨interfaces graphiques
¨traitement de texte
¨messagerie électronique
¨groupware

4
 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
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 »

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

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

8
 Un peu d’histoire ...
• 1983: Apple Lisa
• plus ou moins inspiré du Xerox Star
• plutôt un ordinateur personnel
• trop cher, échec commercial

9
 Un peu d’histoire ...
• 1984: Apple MacIntosh
• « rien de nouveau »
• bien fait
• prix raisonnable ($ 2500)
• technologie “mûre”
• WYSIWYG
• « desktop publishing »
• impression laser

10
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

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 » !
12
 Un peu d’histoire ...

• 1992 : Les assistants numériques (PDA)

¨Palm
¨Newton (Apple)
• 2000 : Smartphones
¨Blackberry
¨Iphone
¨Windows Mobile
¨Androïd

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

14
 Et demain ?
• Tableau interactif
¨Videoprojection
¨Écran tactile
¨Historique et sauvegarde

15
 Et demain ?
• Groupware
Travail collaboratif
Collecticiel
¨Table augmentée
¨« Clearboard »
¨Télévirtualité

16
 Et demain ?
• Visualisation de l’information
(accès aux masses de données)
¨Vues hyperboliques

¨Représentation temporelle

¨Focus + contexte

17
 Et demain ?
• Nouveaux dispositifs d’interaction
¨Multitouch

¨Retour tactile

¨Dispositifs pour non-voyant

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

19
 IHM - Définitions

• 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

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

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
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
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

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 / cœur 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

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, avion,
centrale nucléaire…)

26
 Les objectifs de l’IHM
• 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
27
de base
 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

28
 Objectifs de l’ergonomie (homme)

• 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

29
 Objectifs de l’ergonomie (performance)

• Objectifs centrés sur la performance

¨Efficacité,
¨Productivité
¨Fiabilité
¨Qualité

30
 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
31
 Variabilité et Diversité (suite)

• 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

32
 Variabilité et Diversité (suite)

• 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

33
 Variabilité et Diversité (fin)

• 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

34
 Utilisabilité (1/2)

• 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é

35
 Utilisabilité (2/2)

• 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

36
 Méthodes de conception : cascade

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

37
 Méthodes de conception : cascade (fin)

Génie logiciel : modèle en cascade

• Modèle créé pour les grands projets
¨importance des documents
Ø cahier des charges
Ø spécifications
¨signés par les clients

38
 Méthodes de conception (V)
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

39
 Méthodes de conception: spirale
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

40
 Résumé méthodes de conception du GL

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
41
 Conception participative
centrée utilisateur (1/2)

• 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

42
 Conception participative
centrée utilisateur (2/2)

• 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

43
Techniques de recueil
d’information
 Scénarios de conception (1)

• 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

45
 Scénarios de conception (2)

• 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

46
 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

47
 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
48
 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

49
Travail pratique

• Objectif : outil pédagogique pour l’apprentissage des figures

géométriques
• Fonctionnalités :
• Affichage des figures
• Affichage des noms
• Dessiner des figures
• Modifier des figures
• Supprimer des figures
• Calculer les propriétés des figures
Fonctionnalité 1 : affichage figures
 Figure : Iterface
Surface()
Périmètre
Rectangle : Classe
Couleur()
Afficher()
Cacher()
Supprimer()
Longueur : réel
Largeur : réel

Cercle : Classe Triangle : Classe

Carre : Classe
Base : réel
Rayon :réel
Hauteur : réel
 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

53
Entretiens (1/2)

• 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

54
Entretiens (2/2)

• 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

55
 Observations (1/4)

• 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

56
 Observations (2/4)

• But : identifier les gros problèmes

du logiciel (prototype / système final)
• Procédure
¨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

57
 Observations (3/4)

• 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

58
 Observations (4/4)
• 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

59
Les éléments d’une IHM
 Principes ou BP

• 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

61
 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

62
 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

63
 La 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

64
 Affichage du 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

65
 Résumé

• 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

66
Types d’interaction
 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

68
 Langage de commande (1/2)

• 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)

69
 Langage de commande (2/2)

• 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

70
 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)

71
 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

72
 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

73
 Manipulation d’objets graphiques

• 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
74
 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

75
 Pour aller plus loin
• AFIHM : Association Francophone d'Interaction Homme-Machine
http://www.afihm.org/
• Bibliographie
http://interaction2.free.fr/Documentation/livres.html
http://fr.wikipedia.org/wiki/Interactions_homme-machine

76