Nicolas Roussel

Introductionà l’Interaction Homme-Machine

In Situ project-teamLRI (Univ. Paris-Sud – CNRS) & INRIAhttp://insitu.lri.fr/situin

Maître de Conférences en Informatique à l’Université Paris-Sud

Membre de l’équipe-projet In Situ de l’INRIA

Pour me joindre : roussel@lri.fr

Quelques pages web

! http://insitu.lri.fr/

! http://insitu.lri.fr/~roussel/

! http://insitu.lri.fr/~roussel/enseignement/IHM/

! http://insitu.lri.fr/~roussel/digital-library/

Qui suis-je ?

Qui êtes-vous ? Que savez-vous de l’IHM ?

Avez-vous déjà réalisé un système interactif ?

Sur quelle plate-forme, quel langage, quelles librairies vous-êtes vous basés ?

Comment avez-vous conçu la partie interactive de ce système ?

Combien de temps avez-vous consacré à la conception ? Combien de temps pour l'implémentation ?

Qui a utilisé ce système ? Pendant combien de temps ?

L’avez-vous évalué ? Si oui, comment ?

Quelle différence faites-vous entre interface et interaction ?

Qu’est ce qu’un système interactif ?

Xerox Star, 1981IBM 7030, 1961 IBM PC, 1981 Apple iMac, 2007

Toyota Corolla Verso, 2007Borne SNCF, 2004Nokia N70, 2005 Freebox HD, 2006

Histoire partielle et partialede l’Interaction Homme-Machine

Jusqu’aux années 60 : mécaniques, cartes perforées et diodes

Mark-I, 1944

IBM SSEC, 1948

IBM 7030 (Stretch), 1961

1945 : Vannevar Bush

Memex : un instrument de mémoire externe

! un système électromécanique utilisé pour conserver ses livres, notes, archives, etc.

! un système de mots clés, de références croisées et des mécanismes d'indexation permettant d'accéder rapidement à l'information

! la possibilité d'annoter les documents stockés et de sauvegarder un "chemin" (une chaîne de liens)

Directeur de l’OSRD (Office of Scientific Research and Development) pendant la deuxième guerre mondiale

Auteur d’un rapport intitulé “Science, the endless frontier”et de “As we may think”, publié par Atlantic monthly

1960 : Joseph Licklider

Auteur d’un article intitulé “Man-computer symbiosis”

“The hope is that, in not too many years, human brains and computing machines will be coupled together very tightly and the resulting partnership will think as no human brain has ever thought”

Chercheur en psycho-acoustique et informatique au MIT

Directeur de l’IPTO (Information Processing Techniques Office) de l’ARPA (Advanced Research Projects Agency)

1963 : Ivan Sutherland

Doctorant au MIT Lincoln Laboratory

Plus tard : directeur de l’IPTO, fondateur de l’Informatique Graphique

! oscilloscope, stylo optique et boutons

! désignation directe des objets à l'écran

! feed-back sous forme de lignes élastiques

! séparation entre l'écran et les coordonnées de dessin

! zoom avant et arrière (facteur 2000 !)

! structure hiérarchique, opérations récursives

! système de gestion de contraintes

! icônes pour représenter des objets complexes

SketchPad, un outil de dessin en avance sur son temps

1963 : Ted Nelson

Etudiant en philosophie et sociologieInventeur des termes hypertexte (1963, 1965 ?) et hypermedia (1968)

Son projet Xanadu reprend et étend les idées de V. Bush avec pour objectif un système de publication de documents à l'échelle mondiale

Quelques concepts intéressants

! Transclusion : inclusion sans copie d'un fragment de document dans un autre document

! ZigZag : structure pour données multidimensionnelles

Beaucoup d'idées mal comprises mais une influence non négligeable...

A cette époque, l’informatique est une chose sérieuse...

12 janvier 1967 : inauguration de l'IBM 360/30 du CFRO (Centre Français de Recherche

Opérationnelle) de Lille

1968 : Douglas Engelbart

Auteur, en 1962, de “Augmenting human intellect: a conceptual framework” puis créateur du système NLS (oNLine System) au SRI (Stanford Research Institute)

“By augmenting man's intellect we mean increasing the capability of a man to approach a complex problem situation, gain comprehension to suit his particular needs, and to derive solutions to problems”

! partage de fichier et annotations

! messagerie électronique

! partage d'écran, télépointeurs

! audio et video-conférences

! mobilier spécifique

! traitement de texte structuré

! hypermedia

! la souris, le clavier à une main

! écrans haute résolution

! l'idée de fenêtrage

Années 1970 : le temps des interfaces textuelles

Interfaces à ligne de commande

! dialogue purement textuel, proche du dialogue oral

! syntaxe précise, mais structure du dialogue figée et potentiellement complexe

VisiCalc (VisiCorp, 1979)WordStar (MicroPro, 1979)

Menus et écrans de saisie

! notion de statut courant de l'interaction

! le menu regroupe les commandes disponibles à un instant donné, l'écran de saisie regroupe les paramètres requis pour une commande donnée

Le MIT et ses différents laboratoires

Plusieurs laboratoires en rapport avec l’IHM

! Lincoln Laboratory (1951)

! Artificial Intelligence Laboratory (1953) et Laboratory for Computer Science (1963), aujourd’hui CSAIL (2003)

! Architecture Machine Group puis Media Lab (1985)

Exemples de projets

! le langage Logo (1967)

! les débuts de la multimodalité : association du pointage et de la reconnaissance de la parole (Put

that there, 1979)

! langage naturel, synthèse de la parole et reconnaissance de l'écriture

Quelques visionnaires : Ivan Sutherland, mais aussiMarvin Minsky, Seymour Papert et Nicholas Negroponte

Exemple : SHRDLU

Créé entre 1968 et 1970 par Terry Winograd,doctorant au MIT Artificial Intelligence Laboratory

Person: PICK UP A BIG RED BLOCK.

Computer: OK. (does it)

Person: GRASP THE PYRAMID.

Computer: I DON'T UNDERSTAND WHICH PYRAMID YOU MEAN.

Person: FIND A BLOCK WHICH IS TALLER THAN THE ONE YOU ARE HOLDING AND PUT IT INTO THE BOX.

Computer: BY "IT", I ASSUME YOU MEAN THE BLOCK WHICH IS TALLER THAN THE ONE I AM HOLDING.

Computer: OK. (does it)

Person: WHAT DOES THE BOX CONTAIN?

Computer: THE BLUE PYRAMID AND THE BLUE BLOCK.

Person: WHAT IS THE PYRAMID SUPPORTED BY?

Computer: THE BOX.

Person: HOW MANY BLOCKS ARE NOT IN THE BOX?

Computer: FOUR OF THEM.

Person: IS AT LEAST ONE OF THEM NARROWER THAN THE ONE WHICH I TOLD YOU TO PICK UP?

Computer: YES, THE RED CUBE.

Person: IS IT SUPPORTED?

Computer: YES, BY THE TABLE.

...

Un programme capable de dialoguer en langage naturel pour

! comprendre les mécanismes du langage humain

! offrir un moyen simple pour dialoguer avec l’ordinateur

1970 : Xerox PARC

PARC = Palo Alto Research Center, un centre de recherche Xerox créé en 1970

Le PARC regroupe des talents divers qui s'intéressent à la photocopie mais aussi aux systèmes bureautiques

Quelques inventions avant 1975

! l'Alto, une station de travail avec écran bitmap et souris

! le couper/copier/coller

! l'idée de système de fenêtrage

! l'imprimante laser

! Ethernet et le réseau local

GUS, the Genial Understander System

Un système dans la suite de SHRDLU

Développé au PARC par Daniel Bobrow, Terry Winograd et quelques autres

GUS: Where would you like to go?

User: I want to go to San Diego on July 17th

GUS: Where will you be traveling to San Diego from?

User: San Jose

GUS: When do you want to return?

User: I prefer United Airlines

GUS: OK, I have United Airlines from San Jose to San Diego departing July 17. When do you want to return?

Alan Kay : Dynabook et Smalltalk

Doctorat (1969) à l’U. d’Utah, où travaillait Ivan SutherlandL'un des fondateurs du Xerox PARC

L’inventeur de l'ordinateur portable ?Pionnier de l'interaction graphique et de la programmation objet

“The best way to predict the future is to invent it”

“Simple things should be simple, complex things

should be possible”Dynabook

Smalltalk

1981 : Xerox Star

Projet lancé en 1975, commercialisé en 1981

30 années-homme pour un système destiné aux “business professionals”

Quelques caractéristiques importantes

! conception matérielle guidée par les besoins logiciels (analyse de tâches, scénarios, 600-700 heures de vidéo)

! un système fonctionnant "naturellement" en réseau

! une interface graphique basée sur la métaphore du bureau

! l'utilisation d'icônes et de fenêtres et l'idée de WYSIWYG

! un système centré sur les documents (l'utilisateur ne connaît pas les applications)

! ensemble restreint de commandes génériques accessibles par des touches spécifiques

Xerox Star : éléments matériels

CPU microcodé d’une puissance inférieure à un MIPS

! opérations rapides pour accéder à l’écran (BitBlt)

! 385Ko de mémoire

Une connexion Ethernet

Périphériques de stockage

! un disque dur de 10 à 40 Mo

! un lecteur de diskettes 8 pouces

Périphériques d'interaction

! un écran noir et blanc de 17 pouces

! une souris à deux boutons

! un clavier spécial muni de deux pavés de touches de fonction

Xerox Star : interaction

Xerox Star

Un échec commercial…

! un système trop nouveau, trop puissant, trop différent...

! une cible marketing mal évaluée (ex: pas de tableur)

! un prix trop élevé ($16,500)

! une architecture fermée (impossible de développer des applications hors Xerox)

! un manque de volonté politique pour sortir du marché de la photocopie

… mais une influence certaine sur les systèmes actuels

1979 - 1983 : Buroviseur et le projet Kayak, INRIA Rocquencourt

1983 : Apple Lisa

Similaire au Star (inspiré ?), mais un peu moins cher : $10,000

Un nouvel échec commercial...

Une barre de menu, des boîtes de dialogue modales et des applications “visibles” héritées de l'Apple ][

1984 : Apple Macintosh

Un succès commercial

! des idées plus "mures", un marché prêt à les accepter

! un prix agressif ($2,500) pour toucher le grand public

! une boîte à outils pour faciliter les développements externes

! des guides de style détaillés pour inciter à la consistance entre applications

Trois applications clés

! Finder

! MacPaint

! MacWrite

A propos du lecteur de disquette du Mac…

Pourquoi le Mac avait-t-il un lecteur de disquette 3"1/2 ?

Jef Raskin voulait un lecteur de disquette sans bouton Eject, pour que la disquette ne puisse être éjectée que par programme

Le lecteur Sony 3"1/2 était le seul lecteur du marché avec cette fonctionnalité

1988 : NeXTcube, NeXTSTEP, Interface Builder

1984 - 2007 : de Mac OS à OS X Leopard

Issu du projet Athena du MIT : 4000 machines UNIX à connecter, fournies par les nombreux sponsors (DEC, IBM, Motorola, etc.)

1984 : le système X Window

Modèle client/serveur

! séparation quoi/comment qui facilite la portabilité

! utilisation transparente du réseau qui permet l'affichage déporté

Séparation entre mécanismes et politique

d'utilisation

1985 - 2007 : Microsoft, de Windows à Vista

1994 - 2007 : Linux met X Window à la portée de tous

1967 - 1990 : d’Arpanet au World Wide Web

1967 : Arpanet est un réseau créé pour relier des machines

1973 : Vinton Cerf développe TCP/IP

1982 : Jon Postel crée le protocole SMTP (Simple Mail Transfer Protocol)

1990 : Tim Berners-Lee et ses collègues du CERN crée HTTP, HTML et les URIs

Le Web est simple et beau, il connaît une croissance fulgurante, mais les possibilités d'interaction sont extrêmement réduites et les protocoles se figent rapidement

Aujourd’hui, on est encore loin des idées de Bush, Nelson ou Engelbart...

La communication entre individus domine les autres usages du réseau

Un peu de recul...

Quelques définitions

Un système interactif est un système dont le fonctionnement dépend d'informations fournies par un environnement externe qu'il ne contrôle pas [Wegner, 1997]

Les systèmes interactifs sont également appelés ouverts, par opposition aux systèmes fermés - ou autonomes - dont le fonctionnement peut être entièrement décrit par des algorithmes

L'interface est l'ensemble des dispositifs matériels et logiciels qui permettent à une personne de commander, contrôler, superviser un système interactif

L'Interaction Homme-Machine est la discipline consacrée à la conception, la mise en œuvre et à l'évaluation de systèmes informatiques interactifs destinés à des utilisateurs humains ainsi qu'à l'étude des principaux phénomènes qui les entourent

L’utilisabilité est le 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é [ISO 9241]

Résumé chronologique

Mobilité, ubiquité

Le Web

Multimedia

Interfaces graphiques

Interfaces textuelles

2000199019801970196019501940

Bush

Licklider

Sutherland

Nelson

Engelbart

Xerox

PARC

Xerox Star

Apple Macintosh

Styles et paradigmes d’interaction

Evolution des styles d’interaction graphique

! interfaces à lignes de commande : donnent accès à une commande (une fonction) du système

! menus et écrans de saisie : donnent accès à une application (un sous-ensemble des fonctions du système)

! multi-fenêtrage, interfaces iconiques et manipulation directe!: donnent accès à l'ensemble des fonctions du système, et au-delà, à celles du réseau

Il existe d’autres styles

! interaction vocale

! réalité virtuelle, réalité mixte

Au-delà des styles, on peut distinguer trois paradigmes

! ordinateur-outil : interfaces première personne pour augmenter l’utilisateur

! ordinateur-partenaire : interfaces deuxième personne pour déléguer des tâches

! ordinateur-media : interfaces troisième personne, pour la communication humaine

Evolution de l’interactivité

Le degré d'interactivité d'un système peut se mesurer au nombre et à la nature de ses échanges avec les utilisateurs

Deux éléments importants ont contribué à l'augmentation de l'interactivité des systèmes

! la possibilité d'exécution de plusieurs tâches en parallèle

! l'avènement des interfaces graphiques

Le nombre des échanges a beaucoup augmenté, mais leur nature n'a pas vraiment évolué

Beaucoup d’innovations, pas beaucoup d’inventions : l’IHM n’a pas suivi la loi de Moore...

Pourquoi s’intéresser à l’IHM ?

1965 2008

Loi de Moore, loi de Buxton, loi de Dieu (ou de la nature)

Le secret honteux de l’industrie informatique

Despite the enormous outward success of personal computers, the daily experience of using computers far too often is still fraught with difficulty, pain, and barriers for most people, which means that the revolution, measured by its original goals, has not as yet succeeded.

There is a conspiracy of silence on this issue. It's not splashed all over the front pages of the industry trade press, but we all know it's true. Users are largely silent about this. There is no uproar, no outrage. But scratch the surface and you'll find that people are embarrassed to say they find these things hard to use. They think the fault is their own. So users learn a bare minimum to get by. They under-use the products we work so hard to make and so don't help themselves or us as much as we would like. They're afraid to try anything else. In sum, everyone I know (including me) feels the urge to throw that infuriating machine through the window at least once a week. (And now, thanks to recent advances in miniaturization, this is now possible.)

The lack of usability of software and poor design of programs is the secret shame of the industry.

Mitch Kapor

1982 : Lotus et Lotus 1-2-31990 : Software design manifesto

2001 : Open Source Applications Foundation

Pourquoi, comment sommes-nous arrivés là ?

Dans le domaine des produits de haute technologie, le succès initial est souvent lié à un avantage ou à une différence technique

! le développement des nouveaux produits est généralement basé sur les avancés technologiques

! le marketing est lui-aussi axé sur les caractéristiques techniques

! la cohérence entre produits n’a pas vraiment d’importance au départ

Une fois que le marché mûrit, la donne change

! la technologie devient de moins en moins importante

! l’expérience utilisateur joue un rôle crucial : les nouveaux consommateurs veulent de la fiabilité et de la simplicité pour un coût modique

Problème : les ingénieurs et les marqueteurs ne connaissent pas grand chose aux utilisateurs...

Le seuil de frustration/indignation (d’après Paul Saffo)

L'utilisabilité ne garanti pas le succès commercial (e.g. DOS vs. Mac OS)

En fait, les utilisateurs s’adaptent trop facilement... et ils en sont fiers !

Mais il y a une limite : le seuil de frustration, ou d’indignation

! le monde du travail impose un seuil élevé (e.g. RSI, fatigue oculaire)

! le marché des early adopters a un seuil encore plus élevé !

! le marché “grand public” a un seuil beaucoup plus bas

! le seuil diffère suivant les cultures ou l’âge (e.g. bankomat ou guichetier, self-service ou pompiste ?)

! il s’élève à mesure que la technologie concernée entre dans les moeurs (e.g. voiture, téléphone)

The consumer universe (Paul Saffo, 1996)

willin

gness

to p

ay

threshold of indignation teenage hacker

Cyber

space

US Air Force general

B2 Bomber

average consumer

Tele

phone

Hollywood starlet

Rolls

Royce

The high-tech spread (Paul Saffo, 1996)

willin

gness

to p

ay

threshold of indignation

Tele

phone

TV

VCR

HiFi

consumerelectronicindustry

Main

frameWork

station

PC

computerindustry

?

Exemples de sources de frustrations quasi-quotidiennes...

Microsoft Surface, 2007

Demain ?

Toyota Corolla Verso, 2007Borne SNCF, 2004

Nokia N70, 2005 Freebox HD, 2006Apple MacBook Pro, 2006

Pourquoi s’intéresser à l’IHM ? (d'après P. Denning & P. Dargan)

Parce que ne pas s’y intéresser coûte très cher...

1979 : enquête de l’US Government Accounting Office

! 2% des dépenses en logiciel pour des softs livrés et utilisés

! 25% pour des softs jamais livrés

! 50% pour des softs livrés mais jamais utilisés

Un cas extrême, mais représentatif de la crise du logiciel (196x) et sans doute encore valable aujourd’hui

Solution proposée à l’époque : le Génie Logiciel

Problème : les méthodes de Génie Logiciel peuvent créer l’illusion que la clé de la conception réside dans l’application d’un processus rigoureux permettant de transformer des besoins en un système

S’intéresser à l’utilisateur final coûte cher, mais les changements tardifs ou après coup peuvent coûtent encore plus, par réduction des alternatives

Pourquoi s'intéresser à l'IHM ? (d'après Mitch Kapor)

Pour aller vers la notion de design d’interaction

! les architectes conçoivent les bâtiments dans lesquels nous vivons et travaillons, pas les ingénieurs

! les critères importants dépassent les domaine de l’ingénierie (ex : salle à manger proche de la cuisine, chambres côté jardin)

! nous faisons appel à des architectes mais aussi à des designers graphiques, des designers industriels, etc.

Où sont les designers d’interaction ?

Cette fonction est méconnue et son importance sous-estimée

! pas de place dans l’organigramme

! le design d’interaction est considéré comme une sous-partie de l’informatique, mais les informaticiens s’intéressent plus à la construction interne qu’à la partie externe

Pourquoi s'intéresser à l'IHM ? (d'après Mitch Kapor)

Le design d’interaction est plus complexe que le design d’interfaces

! l’interface peut être conçue après coup, pas l’interaction

! le designer d’interaction s’intéresse au produit dans son ensemble (exemple : VisiCalc et la métaphore du tableur)

Il faut des formations clairement identifiées

! distinctes des enseignements de génie logiciel ou de programmation, axés sur la création de systèmes informatiques utilisables

! fournissant notamment les moyens nécessaires pour évaluer à moindre coût des solutions partielles

! exemple de cours souhaitable : History of the Word Processor

IHM : quels objectifs ? quels moyens ?

puissance

simplicité

Objectif général : déplacer la courbe puissance / simplicité

simplifier et enrichir

simplifier

Exemple : simplifier

Attention : simplifier n’est pas toujours simple...

Exemple : simplifier et enrichir

Pourquoi est-ce difficile ?

Un système interactif est différent d’un système algorithmique : il doit pouvoir réagir à tout moment, même lorsqu’il est déjà en train de faire quelque chose

Premier problème : les informaticiens sont souvent formés à l’algorithmique, au calcul, mais pas à la réactivité...

Deuxième problème : les langages de programmation les plus utilisés ont été conçus pour le calcul, pas pour la réactivité (e.g. les entrées sorties ne sont possibles qu’à l’initiative du programme)

Pourquoi est-ce difficile ? En raison du contexte...

Pourquoi est-ce difficile ?

Comprendre le comportement, les besoins et les désirs des utilisateurs, concevoir le système ou le produit qu’ils attendent est difficile

2 5 6

Vers une informatique située

Une approche de conception des systèmes interactifs qui prend en compte le contexte et les situations d'usage

Contexte humain

! ses capacités perceptives, motrices et cognitives

Contexte physique

! la forme du système informatique

! son intégration dans l'environnement physique de l'utilisateur

Contexte social et organisationnel

! les relations entre les différents utilisateurs du système

! les pratiques de travail, accommodations, ou détournements qui permettent par exemple de faire face aux situations imprévues ou d'améliorer la routine

Exemple d’environnement complexe : le cockpit d’un Airbus

Accident du Mont St Odile, 1992

87 morts

Airbus A380, 2007

Autre exemple : les centres de contrôle aérien

1970

2002

Solution : une approche pluridisciplinaire

Designpsychologie

sociologie

anthropologie

design industriel

arts graphiques

Sciences de la nature

systèmes

interactifs

Ingénierie

architectureinformatique

électronique

mécanique

physiologie

Solution : une conception itérative centrée sur l’utilisateur

générer

des idées

observer, interroger

prototyper

Conception

iterativeévaluer

Exemples de méthodes utilisées

Critical incident interview

Human Factors

Fly-on-the-wall

Ethnography

Questionaire

Sociology

Lab study

Psychology

Cultural probe

Design/arts

Task analysis

Human Factors

Event coding

Cognitive psycho.

Scenario analysis

Activity theory

Survey analysis

Sociology

Protocol analysis

Cognitive psycho.

Notecard brainstorming

Psychology

Oral brainstorming

Psychology

Illustrate interaction

Design/arts

Video brainstorming

Participatory design

Design room

Design/arts

Video prototyping

Participatory design

Paper prototypingParticipatory design

Software simulation

Computer Science

Wizard-of-Oz

Human factors

Scaled prototype

Computer Science

Usability studyHuman Factors

Focus group

Marketing

Lab study

Psychology

Design walkthrough

Psychology

Does it work?

Design/arts

Finding out about use

Analyzinguser data

Generating ideas

Designing systems

Evaluating systems

Pour conclure

Quelques références

Articles

! M. Beaudouin-Lafon. “40 ans d'interaction homme-machine : points de repère et perspectives”. Interstices : http://interstices.info/histoire-ihm/

! P. Wegner. “Why interaction is more powerful than algorithms”. Communications of the ACM, 40(5):80-91, May 1997.

! J. Johnson al. “The Xerox Star: A Retrospective”. IEEE Computer, September 1989.

Ouvrages

! B. Shneiderman and C. Plaisant, editors. Designing the User Interface: Strategies for Effective

Human-Computer Interaction, 4th edition, Addison-Wesley, March 2004.

! T. Winograd, J. Bennett, L. D. Young and B. Hartfield, editors. Bringing Design to Software, Addison-Wesley, April 1996.

! J. Raskin. The Humane Interface: New Directions for Designing Interactive Systems, Addison-Wesley, March 2000.

! D. Norman. Things That Make Us Smart : Defending Human Attributes in the Age of the Machine, Perseus Press, May 1994.

! J-F. Nogier. Ergonomie du logiciel et design web, 2nde édition, Dunod, Septembre 2003.

Pourquoi s’intéresser à l’Interaction Homme-Machine ?

Tout le monde “fait de l’IHM”

! nous sommes tous utilisateurs de systèmes interactifs

! nous avons tous des idées sur leur amélioration

Paradoxes et difficultés de l’IHM

! “a good design is better than you think” (Rex Heftman)

! l’adaptabilité de l’être humain est sa force… et sa faiblesse

! l’IHM est un domaine pluridisciplinaire complexe où l’intuition et le bon sens ne suffisent pas

Sur quoi travaillent les chercheurs ?

! comprendre l’interaction en tant que phénomène

! imaginer et évaluer de nouvelles techniques d’interaction

! créer des outils pour améliorer le développement

! définir des méthodes pour améliorer la conception

Une grande partie des résultats de ces travaux est aisément accessible...

Nicolas Roussel

De l’interaction WIMP aux nouvelles formes d’interaction

In Situ project-teamLRI (Univ. Paris-Sud – CNRS) & INRIAhttp://insitu.lri.fr/situin

Interaction WIMP ?

Windows (fenêtres)

Icônes

Menus, boîtes de dialogue, etc.

Pointage, sélection, tracé

Avantages

! apprentissage rapide

! environnements standards

! des techniques simples à utiliser et à programmer

Inconvénients de l’interaction WIMP

Elle est trop simple à programmer…

! une nouvelle version tous les 6 mois

! de plus en plus de menus, de palettes, de barres d'outils, et de boîtes de dialogue

! pas de réel travail de conception de l’interaction

Elle favorisent la manipulation indirecte

Elle reposent essentiellement sur l’utilisation d’un clavier, d’une souris et d’un écran

Elle n’est plus nécessairement adaptée aux systèmes actuels

WIMP : le Latin de l’interaction homme-machine ?

(…) the designers of new GUI applications had to break loose from the tacit assumptions that

had been effective for their design of screen fields, layout, and interaction sequences. The

designers of interfaces yet to come will have the same difficulty in breaking away from the

WIMP language in which they are now so fluent. The WIMP GUI is not the ultimate user-

interface design, any more than Latin was the ultimate language. It has been hardy and useful,

but it is tied to the hardware and systems tradeoffs that prevailed in the 1980s.

Bringing design to software, Winograd et al., 1996

Architecture générale des systèmes WIMP

Système d’exploitation

Périphériques d’entrée/sortie

Application

Outils de construction d’interfaces

Système de fenêtrage

Librairie graphique

Système d’exploitation

Périphériques d’entrée/sortie

Application

Outils de construction d’interfaces

Système de fenêtrage

Librairie graphique

Périphériques d’entrée : quelques exemples

claviers, boîtes à boutons

potentiomètres (rotatifs, linéaires)

souris, tablettes, joystick, trackball

écrans tactiles, crayons optiques

reconnaissance de la parole

voice as sound

capteurs de position et de direction

vision par ordinateur

surfaces interactives

dispositifs hybrides entrée/sortie

Gestion des périphériques d’entrée

attentebloquante

requète échantillonnage

réponseimmédiate

événement

file d'attente

Périphériques d’affichage

iPhone 3,5” : 320x480 153 600 pixels

iMac 24” : 1920x12002 304 000 pixels

HiPerSpace : 11x5 écrans 30”220 millions de pixels

Ecran volumétrique 10” : 192x768x76811 3246 208 pixels

Autres modalités/périphériques de sortie

PHANTOM Omni, 6DOF, 3.3N (SensAble)

Vital (CEA LIST)Diffuseur d’odeur (Exhalia)

Digression autour d’un périphérique à la mode

Pour les détails techniques, voir http://wiibrew.org/index.php?title=Wiimote

12 boutons1 accéléromètre 3 axes1 caméra sensible à l’infrarouge

4 LEDs1 vibreur1 haut-parleur

1 liaison BlueTooth1 connecteur pour extension

Système d’exploitation

Périphériques d’entrée/sortie

Application

Outils de construction d’interfaces

Système de fenêtrage

Librairie graphique

Système de fenêtrage

But : permettre aux applications d’utiliser les différents périphériques d’entrée/sortie

! structurer l’espage d’affichage

! partager les périphériques d’entrée

Une fenêtre est une zone autonome pour l’affichage et/ou l’entrée de données

Exemples de fonctions du système de fenêtrage

! affectation des périphériques d’entrée (focus)

! gestion des différentes fenêtres des applications

! ouverture et fermeture d’applications, gestion de session

! communication entre applications

Du périphérique physique au périphérique logique

Mode de localisation

! absolu (e.g. tablette, écran tactile, crayon optique) ou relatif (souris, joystick, trackball)

! direct (écran tactile, stylo optique) ou indirect (souris, joystick, trackball, tablette ?)

Courbe de réponse : déplacement du curseur en fonction du déplacement du périphérique

X Window MacOStablette (absolu)

Pointage sémantique (Blanch et al., 2004)

Idée : la courbe de réponse du périphérique peut être adaptée en fonction de l’importance des objets à proximité du pointeur

Autre possibilité : avec le pointage vectoriel, Guiard et al., (2004) proposent de sauter les espaces vides

Périphériques et applications

Terminaux virtuels

! une fenêtre appartient à une application

! l'application reçoit (si elle le souhaite) les événements qui se produisent dans ses fenêtres

Suivant le périphérique, différentes gestions du focus

! explicite : les événements sont envoyés à une fenêtre particulière spécifiée antérieurement

! implicite : les événements sont envoyés à la fenêtre correspondant à la position (x,y) qu'ils contiennent

! esclave : le focus suit celui d'un autre périphérique

ICON (Dragicevic, 2001)

ICON permet de simuler des périphériques dont on ne dispose pas ou de reconfigurer dynamiquement les applications pour en utiliser de nouveaux

Modèle graphique

Eléments constituants

! un ensemble de primitives graphiques

! un ensembles d'attributs sur ces primitives

! une sémantique graphique

Principaux modèles utilisés

! pixellaire

! vectoriel 2D

! vectoriel 3D

Le dessin peut être direct (modèle du peintre) ou structuré (graphe d’objets, graphe de scène)

Exemples de librairies/modèles : Xlib, Java2D, PDF, SVG, OpenGL

Modèle pixellaire : attributs d’un pixel

Initialement : table de couleur

Aujourd’hui : adressage par plans (au moins 4)

123bleu

rougejaune

orange

R G B A A = alpha

Modèle pixellaire et vectoriel 2D : exemples de primitives

Lignes droites, courbes (splines, bezier)

Formes libres (freehand drawing)

Polygones (triangles, rectangles, etc.)

Arcs, cercles, ellipses

Texte (fonte+taille+style)

Images bitmap

Hello

Systèmes de coordonnées

Coordonnées liées au périphérique

! unité = pixel

! coordonnées écran ou fenêtre ? quelle orientation ?

Coordonnées physiques

! unité = cm, pouces, etc.

! système indépendant du périphérique mais lié à la technique de présentation utilisée

Coordonnées du modèle

! unité = m, km, etc.

! indépendant de l'application

Autres fonctions offertes par les librairies graphiques de base

Clipping (dessin limité à une partie de l'écran) par masque bitmap ou région

! rectiligne (horizontales et verticales uniquement)

! polygonale

! définie par des lignes et courbes (ex : PostScript)

Anti-aliasing, gestion de la transparence

Conversions entre espaces de couleur (RGB, HSV, CMY, etc.)

Structures de données pour l’affichage (graphe de scène)

Modèles de fenêtrage

Avec ou sans recouvrement

Eventuellement hiérarchique

En cas de recouvrement, réaffichage des parties cachées par le système de fenêtrage (nécessite de mémoriser le contenu des fenêtres) ou par les applications

! nécessite de transmettre les demandes de réaffichage aux applications

! peut bénéficier des mécanismes de clipping de la librairie graphique

Manipulation des fenêtres

Opérations "classiques"

! placer, déplacer

! dimensionner

! iconifier, maximiser, restaurer la taille initiale

! fermer

Décorations

! cadre et/ou barre de titre

! menu, icônes, raccourcis clavier

Quelques opérations plus originales

! réduire à la barre de titre

! toujours au-dessus ou au-dessous

Gestion des fenêtres

“A window manager is a software package that helps the user

monitor and control different contexts by separating them

physically onto different parts of one or more display screens”

“Before window managers, people had to remember their

various activities and how to switch back and forth”

B. Myers. A taxonomy of window manager user interfaces.IEEE Computer Graphics and Applications 8(5), 1988

Exemple d’architecture : X Window

Xserver

X11

application

X11

application

X11

application

any WM

X

drawing

commands

input

events

Before window managers, people had to remember their various activities

Les activités se multiplient

! traitement de texte, tableur

! jeux

! courrier électronique

! Web

! messagerie instantanée

! édition d’images, de sons et de vidéos

! media players

! etc.

Les technologies d’affichage ont évolué

... mais les applications aussi

! elles utilisent de plus en plus de fenêtres (mon PowerPoint a une quinzaine de palettes, mon Photoshop en a une vingtaine)

! elles semblent conçues pour utiliser tout l’écran

Jusque 2001, les librairies graphiques avaient très peu évolué

9”, 512x342 pixels 30”, 2560x1600 pixels

Microsoft Windows, de GDI à GDI+

Alpha blending and anti-aliasingGradient and texture fillsFloating point coordinatesHigh quality filtering and scalingGamma correctionetc.

Le système de fenêtrage vu comme un compositeur d’images

Constat d’Apple en 2001 : le GPU évolue plus vite que le CPU

! CPU : les performances doublent tous les 18 mois (loi de Moore)

! GPU : les performances doublent tous les 6 mois

Quartz Extreme

! “window system as a digital image compositor”

! de nombreux effets (“because we can”)

Mac OS, de QuickDraw à Quartz

Le modèle de composition d’images se généralise...

Quelle évolution en 25 ans ?

Apple MacOS 1.1, 1984 Microsoft Windows 2.03, 1987 X Window + TWM, 1989Xerox Star, 1981

Microsoft Vista Mandriva Linux 2008Apple OS X 10.5

Pendant ce temps là, dans les labos de recherche

rooms (CHI 1987)

the task gallery (CHI 2000)

ametista (CLIHC 2003)

wincuts (CHI 2004)

scalable fabric (AVI 2004)

elastic windows (CHI 1997)

dynamic space management (UIST 2000)

tabbed, rotated, peeled-back, snapped and zipped windows (UIST 2001)

fold-and-drop (UIST 2004)

shrinking window operations (AVI 2004)

mudibo (CHI 2005)

bumptop (CHI 2006)

Ametista (Roussel, 2003)

Une petite boîte à outils pour explorer de nouvelles techniques de gestion de fenêtres

! tire parti des capacités graphiques modernes (OpenGL)

! permet le prototypage basse fidélité et haute fidélité en redirigeant les entrées et sorties d’applications X Window

Xserver

X11

application

X11

application

X11

application

any WM

X

drawing

commands

input

events

Xvnc

X11

application

X11

application

X11

application

Ametista

X protocol

RFB

Ametista

drawing

commands

input

events

host

window

system

Metisse (Chapuis & Roussel, 2005)

Xmetisse

X11

application

X11

application

X11

applicationFVWM

Fvwm

Compositor

Metisse protocol

Metisse

drawing

commands

input

events

X protocol

host

window

system

Metisse (Chapuis & Roussel, 2005)

Ametista transformé en un “vrai” système de fenêtrage

! Xmetisse, un serveur complet dérivé de Xserver

! FVWM, un gestionnaire de fenêtres standard

! FvwmCompositor, un module FVWM au-dessus du système de fenêtrage natif

Un système utilisé quotidiennement depuis le printemps 2004

Disponible gratuitement sous GPL (http://insitu.lri.fr/metisse) et distribué par Mandriva

Xmetisse

X11

application

X11

application

X11

applicationFVWM

Fvwm

Compositor

Metisse protocol

Metisse

drawing

commands

input

events

X protocol

host

window

system

Metisse, au-delà du bureau

Pok3D (Mekensleep) Spin|3D (INRIA - France Télécom R&D)

Xmetisse

X11

application

X11

application

X11

applicationFVWM

Fvwm

Compositor

Metisse protocol

Metisse

drawing

commands

input

events

X protocol

not

a 3D

desktop!

Metisse : exemples

GLSL shaders

Zoomable desktop

Basic and elastic transformations

TabletopFocus+context desktop

Façades interactives (Stürzlinger et al., 2006)

Fonctions de base

! duplication de région

! création de trou

Fonctions avancées utilisant l’API d’accessibilité

! substitution de widget

! composition d’interaction (e.g. toolglass, orthozoom)

De la composition de fenêtres à la composition d’interactions

! personnalisation just-in-time

! personnalisation locale ou temporaire

! personnalisation “profonde” et inter-applications

1

2

Rock and roll ! (Chapuis & Roussel, 2007)

Motivation de départ : changement de l’ordre d’empilement (stacking order) lors d’un copier-coller entre une fenêtre secondaire et la fenêtre d’intérêt principal

Interaction dépendante du contexte : l’interaction avec la fenêtre d’intérêt principal peut être différent de celle avec les fenêtres secondaires

restackroll

unroll

Xmetisse

X11

application

X11

application

X11

applicationFVWM

Fvwm

Compositor

Metisse protocol

Metisse

drawing

commands

input

events

X protocol

host

window

system

Metisse : retour sur l’architecture

Metisse demain : multi-utilisateurs, multi-surfaces ?

MetisseServer

X11application

X11application

X11application

MetisseCompositor

MetisseCompositor

MetisseCompositor

MetisseServer

X11application

X11application

X11application

MetisseCompositor

MetisseCompositor

MetisseCompositor

MetisseServer

X11application

X11application

X11application

MetisseCompositor

MetisseCompositor

MetisseCompositor

MetisseServer

Système d’exploitation

Périphériques d’entrée/sortie

Application

Outils de construction d’interfaces

Système de fenêtrage

Librairie graphique

Du périphérique de localisation à la manipulation directe

Combiné à un périphérique d’affichage, un périphérique de localisation permet à l’utilisateur de pointer, i.e. de désigner une zone de l’écran qui l’intéresse plus particulièrement

L’utilisation d’un effecteur (e.g. un bouton) permet de marquer explicitement son intérêt : on parle alors de sélection

En jouant sur le type d’effecteur utilisé, le déplacement du pointeur pendant son temps d’activation et les répétitions, il devient rapidement possible de spécifier des segments de droite, des zones rectangulaires, des trajectoires, etc.

Exemples

! click avec le bouton gauche de la souris

! click avec le bouton droit, ou avec le bouton gauche et la touche Shift du clavier

! press-drag-release

! double-click

! demi-click, click et demi, etc.

Du périphérique de localisation à la manipulation directe (suite)

La combinaison [écran graphique+clavier+souris] a permis l’émergence d’un style d’interaction : la manipulation directe

Principes fondamentaux (Shneiderman, 1983)

! représentation permanente des objets d'intérêt ;

! utilisation d'actions physiques (e.g. pointage et sélection à la souris) plutôt que de commandes à la syntaxe complexe ;

! opérations rapides, incrémentales et réversibles, dont les effets doivent être immédiatement visibles sur les objets ;

! apprentissage selon une approche progressive afin de permettre l'utilisation de l'interface même avec un minimum de connaissances.

Deux phrases qui résument assez bien la philosophie

! "Point and click instead of remember and type"

! "People are good at recognition, but tend to be poor at recall"

Lignes de commande vs. manipulation directe

Les interfaces à ligne de commande reposent sur une syntaxe verbe-sujet(-compléments), ce qui a quelques inconvénients

! introduit un mode (et donc un risque d’erreur en cas d’interruption)

! rend nécessaire une action de type Cancel (pour sortir du mode)

! impose deux changements du locus d’attention (en supposant que celui-ci était sur l’objet)

La manipulation directe repose sur une approche sujet-verbe(-compléments) et des actions physiques

! pas de changement du locus d’attention, pas de mode

! des interactions génériques (e.g. jeter une icône à la corbeille), la commande effective dépendant de l’objet sélectionné

! les actions physiques rapides, incrémentales et réversibles facilitent un apprentissage rapide et/ou progressif par exploration ou démonstration

Demander/ordonner vs. faire soi-même...

Importance du couplage perception/action

La continuité du couplage perception/action est un élément essentiel de la manipulation directe : les effets des opérations doivent être immédiatement visibles sur les objets

La mise en oeuvre de ce principe passe par des mécanismes de retour d’information (feedback

mechanisms)

Au-delà du pointage et de la sélection : les widgets

Un widget est un objet graphique interactif à trois facettes

! présentation : aspect graphique, plus ou moins paramétrable (e.g. Look and Feel Java)

! comportement : réactions aux actions de l'utilisateur, généralement, peu ou pas paramétrable

! interface d'application : lien avec l’application, notification des changements d'état

Objectifs visés : étendre le vocabulaire, faciliter l’apprentissage et la réutilisation de code

Exemple : les widgets de base du Macintosh (1984)

! bouton (button)

! menu déroulant (pull-down menu)

! case à cocher (checkbox), bouton radio (radio button)

! potentiomètre (slider), champ texte (text field)

! boîte de dialogue pour les fichiers (file open/save dialog)

Tâches élémentaires de l’interaction

A suivre : quelques exemples

! saisie (textes, quantités, positions, tracés)

! sélection (par pointage, dans une liste, par saisie, par menu, exclusive, binaire)

! déclenchement (boutons, cliquer-tirer, entrée gestuelle)

! défilement (barres de défilement, défilement direct, défilement automatique)

! spécification d'arguments et de propriétés (boîtes d’alerte et d’information, boîtes de dialogue, boîtes de propriétés)

! transformations (poignées de manipulation)

Cette liste n'est pas exhaustive...

Tâches de saisie

Saisie de textes : boîtes de saisie

! ligne simple ou multilignes

! formattage standard ou spécial (e.g. pour mot de passe)

Saisie de quantités

! potentiomètres (sliders, range sliders)

! steppers

Saisie de positions : pointage à la souris !

Saisie de tracés : par échantillonnage de la souris

La saisie peut être adaptée au type de valeur recherché (e.g. date, dimensions d’un tableau)

Tâches de sélection

Choix d'un ou plusieurs éléments dans un ensemble

! cardinal fixe ou variable

! cardinal petit ou grand

Cardinal fixe

! boutons radio, cases à cocher

! menus

Cardinal variable

! pointage : avec feedback, éventuellement guidé/aidé, simple ou multiple (groupe ou intervalle) avec possibilité d’ajout ou de retrait

! listes, saisie ou combinaison des deux

Sélection/navigation dans de grandes listes

L’alpha-slider (Ahlberg & Shneiderman, 1994) permet de sélectionner rapidement un élément dans une grande liste (e.g. de 13 à 24 secondes pour trouver un film dans une liste de 10.000 titres)

Autre exemple : OrthoZoom (Appert & Fekete, 2006) permet de naviguer facilement dans les 150000 lignes de texte des 37 pièces de Shakespeare

Le dernier métro

ABC DEF GHIJKL MN OPQ RST UVWXYZ

Sélection dans des menus

Trois grands types de menus

! fixes (palettes)

! surgissants (pop-up), généralement sous la souris

! déroulants (roll-down)

Les items sont généralement triés et groupés à l’aide de séparateurs

Des raccourcis clavier et mnémoniques (e.g. lettres soulignées) sont souvent disponibles

Les mécanismes de feedback sont là encore importants : items grisés, surlignés

Les menus pop-up et déroulants sont souvents hiérarchiques, parfois détachables

Sélection dans des menus

La plupart des menus sont organisés de manière linéaire

Il existe toutefois quelques exceptions...

Pie menus (Hopkins, 1991)

! la sélection radiale est plus rapide que la sélection linéaire

! inconvénient : difficilement utilisable au-delà de 8 items par menu,difficile à positionner dans certains cas...

Marking menus (Kurtenbach, 1993)

! idée : reproduire le geste de sélection sans que le menune s’affiche

! transition aisée du mode novice au mode expert

L’implémentation des menus circulaires pose de nombreux problèmes... mais il existe des solutions

Tâches de déclenchement

Boutons (et menus)

Cliquer-tirer (drag-and-drop) : l'action dépend de la source et de la destination

Entrée gestuelle : spécification simultanée de la commande et de l'objet

Exemples de gestes

Hello

Création Sélection Déplacement, copie

Destruction Editeur musical Tableur

Tâches de défilement

Barres de défilement

! sens du défilement ?

! découplage spatial

Défilement direct

! déplacement “à la main”

! défilement automatique

Zoom

! zoomer pour voir le détail, dézoomer pour voir le contexte

! différentes techniques de pan&zoom : SDAZ, OrthoZoom,control menus

Spécification d’arguments et de propriétés

Boîtes de dialogue : champs + bouton(s) de type Ok, Apply, Cancel, etc.

! boîtes modales ou non modales

! découplage temporel et spatial entre la spécification de la commande, de ses paramètres et de son exécution

! parties optionnelles, boîtes à onglets

Boîtes de propriétés : effet immédiat des modifications sur les objets de la sélection

SizeHello

Size 18Hello

Size 24Hello

Tâches de transformation

Poignées de manipulation et modificateurs permettant de changer la sémantique des actions effectuées (e.g. déplacer, changer la géométrie, dupliquer)

Modes d’interaction

Un mode est un état de l'interface dans lequel les actions de l'utilisateur sont interprétées de façon homogène et différentes des autres modes

Différents types de modes

! modes spatiaux : la même action en différents endroits produit des effets différents

! modes temporels : la même action à des moments différents produit des effets différents

! micro-modes : modes liés à une action physique

Une interface est une collection de modes

Modes d’interaction

Inconvénient des modes

! ils restreignent les fonctions disponibles à un moment donné

! ils obligent l'utilisateur a se souvenir des changements d'état de l'application pour connaître les effets de ses actions

! problèmes classiques : initiative et technique de changement de mode

Exemples

! touche Esc pour basculer entre les modes insert et command de l’éditeur vi

! palette d’outils

! utilisation d’une pédale ou touche spéciale (Escape Meta Alt Control Shift)

A force d’indirections...

Du bon usage des métaphores

La manipulation directe pose des questions délicates

! quels sont les objets d'intérêt ?

! comment les représenter ?

Principe de base pour l’utilisation d’une métaphore : utilisation de concepts connus de l’utilisateur pour introduire le modèle conceptuel du système

! modèle qui facilite l'apprentissage : l’utilisateur peut anticiper le comportement du système

! dangers : purement esthétique, trop restrictive (e.g. trop fidèle)

Métaphores du monde réel

! spatiales (e.g. bureau, pièce)

! sociales ou techniques (e.g. théatre, télévision)

Changer/augmenter la métaphore

Au-delà des widgets : les boîtes à outils de construction d’interfaces

Que trouve-t-on dans une boîte à outils ?

! des widgets réutilisables (ex : boutons, menus)

! des services programmables (ex : préférences, copier/coller)

! un modèle d’architecture permettant de structurer l’application

! un générateur et un ou plusieurs langages de scripts

Pourquoi utiliser une boîte à outils ? Pour optimiser l’un des points suivants

! temps de construction

! efficacité

! compacité

! robustesse

! correction

! confort d'utilisation

! versatilité

Boîtes à outils de construction d’interfaces

Il existe de nombreuses boîtes à outils

! Xt, Motif, GTK (C) sous Linux

! MFC (C++) et ses dérivés sous Window

! Carbon (C), Cocoa (Objective-C) sous OS X

! Tk (Tcl, Python, Perl et autres), Qt (C++) et Swing (Java) sur toutes les plate-formes

Exemples de services : placement des widgets, liens widgets - application, squelettes d’application, générateur de code

La plupart de ces boîtes à outils présentent deux limitations majeures

! la programmation est fastidieuse

! l’interaction se limite le plus souvent aux widgets pré-existants

Exemple d’interaction simple qui reste difficile à programmer : le drag-and-drop

Exemple de service : placement des widgets

L’interface est généralement décrite par un arbre de widgets

! les noeuds sont des conteneurs (e.g. fenêtre, cadre)

! les feuilles sont des widgets simples (e.g. bouton, label, barre de défilement)

Gestionnaire de placement : placement géométrique des noeuds de l’arbre de widgets

! imbrication géométrique d'un widget fils dans son parent

! contrôle par le parent du placement de ses fils

! placement dynamique

Contraintes

! taille "naturelle" de chaque fils

! taille et position imposées par le parent

! autres contraintes spécifiées par le programmeur (e.g. grille, formulaire, ressorts)

Exemple de service : liens widgets - application

Application non-interactive : “start, do something, stop”

Ancienne façon de voir les applications interactives : de temps en temps, le système pose des questions à l’utilisateur

Version moderne : l’utilisateur contrôle l’application, via l’interface

! l’application attend régulièrement un signe de l’utilisateur (notion de boucle principale dans laquelle sont traités les événements)

! le modèle de programmation événementielle peut être utilisé à l’intérieur même de l’application

! de nombreux états à conserver… c’est compliqué !

Les éléments d’interface peuvent être reliés de différentes manières au reste de l’application

Liens widgets - application

Il existe différentes manières de relier les éléments interactifs (e.g. les widgets) au reste de l’application

Exemples

! fonctions de rappel (callbacks)

! valeurs actives

! envoi de message

Liens widgets - application : fonctions de rappel

Les fonctions de rappel sont enregistrées dans le widget à sa création

Elles sont ensuite appelées lorsqu’une des opérations du widget est activée

Inconvénients

! un spaghetti de callbacks

! la nécessité de passer par des variables globales pour partager des données entre fonctions de rappel

okCallback (...) { ... }

okCallback (...) ;

Liens widgets - application : valeurs actives

Une valeur active établit un lien bi-directionnel entre une variable d'état d’un ou plusieurs widget(s) et une variable du noyau fonctionnel

Avantage : vues multiples

Inconvénient : approche généralement limitée aux types simples (e.g. entiers)

12 i

26 i

15 ii:=15

Liens widgets - application : envoi de messages

Un objet est associé au widget au moment de sa création

Des méthodes de cet objet seront appelées par le widget

Avantage : permet une bonne encapsulation des données

btnHandler

btnHandler.handleClick(...) ;

Machines à états

Une machine à états est un automate à états finis permettant de décrire formellement l’interaction avec un système

! chaque état de l’automate correspond à un état de l’interaction

! les transitions de l’automate sont déclenchées par des événements

! des conditions et actions peuvent être associées aux transitions

Intérêts

! possibilité de preuve et de validation formelle

! possibilité de lien direct avec l’implémentation

Exemple de machine à états : le rubber-band

Release--------------------------------Done(p1, getPosition())

Press-------------------------p1 = getPosition()

Move------------------------------------------RubberBand(p1, getPosition())

Exemple de machine à états : sélection et déplacement d’un objet

Press-------------------------p1 = getPosition()

Move & dist(p1,getPosition())>eps-----------------------------------------------

startDrag(getPosition())

Move---------------------------drag(getPosition())

Release----------------------------------

endDrag(getPosition())

Release----------------------------select(getPosition())

Exemple de service : squelettes d’application

Exemple historique : MacApp (Apple, 1986)

Principe : application à trous

! code d’une application incomplète, à compléter

! donne la structure globale de l’application et contient ce que l’on ne peut pas (ou veut pas) mettre dans la boîte à outils

! reflète surtout l’inadéquation des outils et langages utilisés

Exemple de service : générateur de code

But : aider (automatiser ?) la mise en oeuvre d’interfaces

! placer les widgets, modifier leurs attributs (couleur, etc.)

! les connecter à l’application

! tester leur comportement

De nombreux noms pour une même famille de systèmes

! user interface management systems (UIMS)

! user interface builder

! user interface development environment

Exemples : Visual * sous Windows, Interface Builder sous OS X

Exemple de service : générateur de code

Inconvénients : What You See Is All You Get

! solutions partielles

! il reste tout de même du code à écrire…

! le code généré est souvent difficile à modifier

Système d’exploitation

Périphériques d’entrée/sortie

Application

Outils de construction d’interfaces

Système de fenêtrage

Librairie graphique

Architecture des systèmes interactifs

Principe de base : la séparation entre l’interface et le noyau fonctionnel

Différents modèles ont été proposés suivant ce principe

! le modèle de Seeheim

! MVC (Model - View - Controller)

! Arch

! PAC (Présentation - Abstraction - Contrôle)

Remarque : ces modèles ne se limitent pas à l’interaction graphique

noyau

fonctionnel

interface

utilisateur

Service(s) minimum

Séparer le noyau fonctionnel de l’interface est un bon principe... mais le noyau fonctionnel doit fournir un minimum de services pour pouvoir implémenter correctement l’interface

Exemples de services utiles (Fekete, 1996)

! la notification

! la prévention des erreurs

! l’annulation

Service(s) minimum : notification

Notification : possibilité pour un module externe d’être prévenu lorsque l’état du noyau sémantique change

Exemple d’utilisation : visualisation d’un système de fichiers

Mise en œuvre

! modularité : le noyau fonctionnel n’est pas censé connaître le mode de présentation

! on veut éviter le polling (attente active)

! variables actives (Tcl), callbacks, etc.

! notification synchrone ou asynchrone ?

Service(s) minimum : prévention des erreurs

Prévention des erreurs : possibilité de savoir si un appel de fonction est licite dans un certain contexte

Exemples d’utilisation

! retour d’information pour la manipulation directe

! menus grisés

Mise en œuvre

! pas avec des exceptions (c’est trop tard…)

! fonction de test (accepte, refuse, nsp)

Service(s) minimum : annulation

Annulation : possibilité de revenir à des états antérieurs du noyau sémantique

Exemple d’utilisation : voir Word, Photoshop, etc.

Mise en œuvre

! objectif : éviter la simulation au niveau de l’interface

! historique, mécanisme de rollback

Modèle de Seeheim

Issu d’un atelier de 1983... à Seeheim

Propose une séparation de l’interface en trois couches

! présentation (niveau lexical) : gestion des entrées, affichage

! contrôleur de dialogue (niveau syntaxique) : maintient un état qui permet de réunir les séquences d’interactions élémentaires en commandes et d’introduire des modes

! adapteur de domaine : adapte les commandes au noyau fonctionnel et transforme les objets abstraits en objets représentables

Un cadre abstrait et assez peu détaillé

contrôleurde dialogue

présentation

adapteurde domaine

noyaufonctionnel

Arch

Une version un peu plus moderne du modèle de Seeheim

! prend en compte l’existence de boîtes à outils de construction d’interfaces

! introduit des adapteurs du côté de la présentation et du noyau fonctionnel

! les composants peuvent être de taille variable... ou absents

interactiontoolkit

component

presentationcomponent

noyaufonctionnel

dialoguecomponent

domainadaptor

component

domainspecific

component

MVC : Model - View - Controller

Origine

! modèle issu de Smalltalk-80

! adopté par de nombreuses boîtes à outils(Java AWT et Swing, Microsoft MFC, …)

Principe

! le modèle correspond à une vue abstraite d’un objet de l’application (e.g. un client)

! la vue présente à l’utilisateur des informations issues du modèle (e.g. le nom et l’adresse d’un client)

! le contrôleur se charge de l'interaction avec l'utilisateur

C V

M

noyaufonctionnel

Mise en oeuvre de MVC

Un modèle asymétrique

! une paire Contrôleur/Vue est associée à un seul Modèle

! un modèle peut se voir associé plusieurs paires Contrôleur/Vue

Listes de dépendants et notification

! les paires Contrôleur/Vue d’un modèle sont enregistrées dans une liste de «!dépendants!»

! lorsque le modèle change, tous les dépendants sont notifiés

Avantages

! vues multiples synchronisées

! vues et contrôleurs modulaires et ré-utilisables

Inconvénient : complexité de communication entre les composants (e.g. entre C et V)

Modèles à agents

Un système interactif peut être vu comme une collection d'agents, chaque agent ayant

! un état

! une expertise

! et étant capable d'émettre et de réagir à des événements

Un interacteur est un agent en contact direct avec l'utilisateur

Remarque : tous ces agents sont réactifs, pas cognitifs (IA)

PAC : Présentation - Abstraction - Contrôle

Un agent PAC incarne une compétence à un niveau d’abstraction donné composé de trois facettes

! présentation (le V+C de MVC) : définit le comportement perceptible de l’agent (entrée/sortie)

! abstraction (le M de MVC) : représente l’expertise de l’agent

! contrôle (pas d’équivalent dans MVC) : fait le lien entre A et P (pas de communication directe) et gère les relations avec les autres agents de la hiérarchie

L'interface est une structure hiérarchique d’agents PAC, de l’application à l’utilisateur

CAP

dispositifs d'interaction

CAP

CAP

CAP

CAP

CAP

CAP

application

Comparaion PAC - MVC

Distinction entrées/sorties dans MVC mais pas dans PAC

! MVC offre une meilleure souplesse/réutilisation possible de composants d’interaction sur des vues différentes, mais nécessite une communication accrue entre les objets Vue et Contrôleur

Distinction entre "modèle" et "communication entre la vue et le modèle"

! cette distinction n’est pas faite dans MVC : risque d’amalgame au niveau du modèle

! dans PAC, distinction entre Abstraction et Contrôle

Nicolas Roussel

Conception

centrée sur l’utilisateur

In Situ project-teamLRI (Univ. Paris-Sud – CNRS) & INRIAhttp://insitu.lri.fr/situin

Pourquoi s’intéresser à l’utilisateur ?

Eléments de psychologie de la perception

Jouons un peu

A un jeu proposé par Zhang & Norman en 199x

Le premier qui a 3 chiffres dont la somme fait 15 a gagné

A a déjà 4, 5 et 8 et B a déjà 2 et 3. Que doit prendre B ?

A 1 2 3 4 5 6 7 8 9

B 1 2 3 4 5 6 7 8 9

Jouons un peu

Trouver une solution, n’est ce pas dans certains cas trouver une bonne représentation ?

4 3 8

9 5 1

2 7 6

A B A

A

B

Où B doit-il jouer ?

Utilisation du canal visuel

Présenter de l’information

! qualitative

! quantitative

! émotionnelle, esthétique

Notifier des changements

! spontanés (alarmes, événements asynchrones)

! provoqués (feedbacks, modifications de l’information)

Simuler des comportements

! animation

! manipulation

Jouons encore un peu : combien de “F” ?

FINISHED FILES ARE THE RESULT OF

YEARS OF SCIENTIFIC STUDY

COMBINED WITH THE EXPERIENCE

OF YEARS.

FINISHED FILES ARE THE RESULT

OF YEARS OF SCIENTIFIC STUDY

COMBINED WITH THE EXPERIENCE

OF YEARS.

Trouvez le mot “fonctionnement”...Un système interactif est un système dont le fonctionnement dépend

d'informations fournies par un environnement externe qu'il ne contrôle pas

[Weg97]. Les systèmes interactifs sont également appelés ouverts, par

opposition aux systèmes fermés - ou autonomes - dont le fonctionnement peut

être entièrement décrit par des algorithmes.

L'Interaction Homme-Machine s'intéresse aux systèmes informatiques interactifs

contrôlés par des utilisateurs humains. Du point de vue de la machine, l'humain

a beaucoup de défauts : il est indécis, désordonné, inattentif, émotionnel,

illogique [Nor94]. Mais il présente une grande qualité : sa capacité d'adaptation.

Cette capacité d'adaptation a longtemps contribuée à une vision du progrès

centrée sur le développement des capacités technologiques de la machine et se

désintéressant totalement de sa relation avec l'humain. A quoi bon se

préoccuper de lui, puisqu'il s'adapte si bien à tout ce qu'on lui propose ? Le

slogan de l'Exposition Universelle de 1933 illustre parfaitement cette vision : "la

Science trouve, l'Industrie applique et l'Homme s'adapte".

Encore un, mais c’est le dernier

Bon, cette fois, c’est vraiment le dernier

Trouvez le mot “machine”...Le degré d’interactivité d’un système peut se mesurer au nombre et à la

nature de ses échanges avec les utilisateurs. On peut ainsi dire que les

premiers systèmes informatiques basés sur l’utilisation de cartes perforées

et l’allumage de diodes étaient peu interactifs. L’augmentation de la

puissance des ordinateurs a depuis permis l’avènement des interfaces

graphiques et l’exécution parallèle de plusieurs tâches, deux éléments qui

contribuent de façon importante à l’interactivité des systèmes actuels.

Confrontés à cette interactivité croissante des systèmes informatiques que

nous utilisons, nous observons aujourd’hui les limites de la vision du

progrès centrée sur la machine. La progression constante de la

technologie se heurte chaque jour un peu plus au seuil de complexité au-

delà duquel notre capacité d’adaptation ne suffit plus. De nombreuses

fonctionnalités offertes par les systèmes actuels restent ainsi hors de notre

portée. La machine nous paraît alors rigide, inutilement complexe,

inadaptée à nos besoins et nous laisse un sentiment de frustration

[Bux97].

Eléments du langage visuel

Imagerie : signes, icônes, symboles

Typographie : polices, attributs

Mise en page : formats, proportions, grilles, structure (hiérarchique, linéaire, etc.)

Mise en scène : enchaînements, animation

Variables visuelles

Position

Forme

Intensité, contraste

Orientation

Relief, perspective

Taille

Couleur (teinte)

Transparence, opacité

Texture

Mouvement

Théorie de Bertin (abrégée)

Variables planaires : x, y

Variables rétiniennes : taille, couleur, forme, orientation, texture, luminosité

Propriétés des variables

! associatives (associer un élément à un groupe)

! sélectives (différencier un élément d'un groupe)

! ordonnées (comparer deux éléments)

! quantitatives (comparer deux éléments)

Données multi-dimensionnelles

! optimum = 2 planaires + 1 rétinienne

! ensuite, utilisation des propriétés

Exemples de propriétés des variables visuelles

Couleur pour différencier/associer

Intensité pour donner un ordre de grandeur (pas une valeur précise)

Mouvement pour attirer l'attention ou marquer l'appartenance à un groupe

Traitement pré-attentif

Pré-attentif : moins de 200 à 250 msec

Mouvement de l'œil : 200 msec au moins pour initier

Exemple : y-a-t-il un rond rouge dans cette figure ?

De très nombreux travaux en psychologie expérimentale sur le sujet

Pour des exemples, voir http://www.csc.ncsu.edu/faculty/healey/PP/

Cécité aux changements

http://www.cs.ubc.ca/~rensink/flicker/

http://nivea.psycho.univ-paris5.fr/ASSChtml/ASSC.html

Grille de Hermann

Gestalt perception

proximité

similarité

continuité

cloturesymétrie

Gestalt perception : figure et fond

Le media informatique

Inconvénients historiques (de moins en moins vrai…)

! faible résolution

! mauvais contrôle des couleurs

! confort de lecture limité

Avantages : dynamicité et interactivité

Quelle est la meilleure représentation ?

Ca dépend de ce que l’on cherche

Valeur précise Comparaison avec un

maximum précédent

Evolution dans

le temps

Conception centrée sur l’utilisateur

L’homme et la machine

Du point de vue de la machine

! l'homme est imprécis, désorganisé, inattentif, émotif, illogique

! la machine est précise, ordonnée, imperturbable, sans émotion, logique

Du point de vue de l'homme

! l'homme est créatif, flexible, attentif au changement, imaginatif, capable de s'adapter au contexte

! la machine est stupide, rigide, insensible au changement, sans imagination, contrainte au respect

de procédures figées

L’homme est indécis, désordonné, inattentif, émotionnel, illogique... mais il sait s’adapter !

Pourquoi s'intéresser à lui, puisqu'il s'adapte si bien ?

Une vision du progrès centrée sur le développement des capacités technologiques de la

machine et se désintéressant totalement de sa relation avec l'humain

Science finds,Industry applies,Man conformsSlogan de l’Exposition Universelle de 1933

Limites de cette vision du progrès

Au-delà d'un certain seuil de complexité, notre capacité d'adaptation ne suffit plus

La technologie se heurte chaque jour un peu plus à ce seuil

De nombreuses fonctions offertes par les systèmes actuels restent hors de notre portée

La machine paraît alors rigide, inutilement complexe, inadaptée à nos besoins et laisse un

sentiment de frustration...

Rappel : loi de Moore,

loi de Buxton, loi de Dieu (ou de la nature)

1965 2008

De l'interface à l'interaction contextualisée

De beaux boutons, des menus et des animations ne suffisent pas à rendre un système utilisable

Exemples de mesures possibles de l’utilisabilité

! temps nécessaire pour apprendre

! rapidité d’utilisation (benchmarks)

! taux d’erreurs

! facilité à se souvenir

! satisfaction subjective

Au delà de l'interface

! séquence d’actions nécessaires pour accomplir une tâche

! adéquation entre le système et le contexte dans lequel il est utilisé

Pourquoi est-ce si difficile ?

Coté utilisateur

! le nombre des choses à contrôler a considérablement augmenté

! les moyens d'affichages sont de plus en plus artificiels

! les moyens de feedback sont de plus en plus complexes et subtils, de moins en moins "naturels"

! les erreurs coûtent de plus en plus cher

Coté "fabricant"

! l'ajout de fonctionnalité ne coûte pas cher

! l'ajout de moyens de contrôle ou de feedback coûte cher

! la "pression du marché" limite le nombre d'itérations

Malheureusement, le coût et l'apparence comptent souvent plus que l'utilisabilité

Démarche centrée sur l'utilisateur

Nous vivons dans un environnement psychologique, social et culturel complexe

La connaissance de cet environnement par les concepteurs d'un système est

donc fondamentale pour pouvoir fournir aux utilisateurs la représentation de ce

système et les moyens d'action appropriés

La démarche de conception, de mise en œuvre et d'évaluation des systèmes

interactifs doit donc être centrée sur l'utilisateur et sur le contexte d'interaction

But

! informatiser (informate) au lieu d'automatiser (automate)

! créer des systèmes qui nous rendent meilleurs (things that make us smart)

People propose, Science studies

Technology conformsDon Norman

Modèles humains

Le processeur humain (Card, Moran & Newell)

L'individu est considéré comme un système de traitement de l'information composé de trois

sous-systèmes interdépendants

! sensoriel

! moteur

! cognitif

Chaque sous-système a une mémoire locale et un processeur caractérisés par

! " : capacité de la mémoire

! # : persistance dans la mémoire

! $ : cycle de base du processeur

Système sensoriel

Système sensoriel visuel

! " = 17 lettres

! # = 200 msec

! $ = 100 msec

! deux stimuli espacés de moins de 100 msec sont perçus simultanément (effet d'animation)

Système sensoriel auditif

! # = 1500 msec

! l'intensité du stimulus agit sur la durée du cycle

Système moteur

Un mouvement est une suite de micro-mouvements ($ = 70 ms)

Loi de Fitts (1954)

! T = a + b*ID

! ID = log2 (1 + D/S)

a est le temps de réaction

b indique l’allongement de la durée en fonction de l’indice de difficulté

Exemples (a=0.1 sec, b=1)

! D = 10 cm, S = 1 cm, T = 0,34 sec

! D = 10 cm, S = 0,1 cm, T = 0,67 sec

! D = 30 cm, S = 0,5 cm, T = 0,59 sec

Temps de pointage typique : entre 0,5 et 1 seconde

D

S

Système cognitif

Cycle reconnaissance/action

Mémoire à court terme

! " = 7 +/- 2 mnèmes

! # = 10-100 sec

! $ = 70 msec

Mémoire à long terme

! " = !

! # = !

! $ = 70 msec

Stockage et recherche dans la mémoire à long terme sont réalisés de manière associative

Il n'y a pas oubli, mais inaccessibilité par manque d'activation des associations

Mais à quoi ça sert ?

Temps de réaffichage : effet d'animation si réaffichage < 1/10 sec

Périphérique de pointage : vitesse maximale de la main : 1 à 1,5 m/sec

Le chiffre magique 7+/-2

! nombre de commandes dans un menu pour qu'elles soient mémorisables

! dans une longue liste, on ne retient que le début et la fin

Mais encore ?

Le Canon Cat (1987),

décrit par J. Raskin

Exploitation of the single locus of attention

! lorsqu’on l’éteignait, le Cat sauvegardait une image bitmap de l’écran au début du disque

! lorsqu’on le rallumait, le Cat chargeait l’image et l’affichait avant de charger le reste des données

! il faut 10 secondes à l’utilisateur pour changer de contexte et se préparer à la nouvelle tâche (Card,

Moran & Newell)

! il en fallait 7 au Cat pour lire le reste du disque…

Le modèle GOMS (Card, Moran & Newell)

Goal, Operator, Method, Selection

! But : état recherché (organisation hiérarchique)

! Opérateur : action élémentaire provoquant un changement d'état

! Méthode : procédé pour atteindre un but

! Sélection : règle pour choisir une méthode en cas de conflit

Cadre pour les méthodes de conception d'interfaces et l’évaluation prédictive des

performances

Remarque : le modèle n'intègre pas le traitement des erreurs

Keystroke (Card, Moran & Newell)

Version simplifiée de GOMS : décomposition en tâches élémentaires pour prédire le temps

d'exécution

Opérateurs

! K = frappe (keystroking)

! P = désignation (pointing)

! H = rapatriement de la main (homing)

! D = dessin (drawing)

! M = activité mentale (mental activity)

! R = temps de réponse du système (response time)

Keystroke

Evaluation expérimentale des temps d'exécution des différents opérateurs

! K : 0,28 sec

! B(outon) : 0,1 sec

! H : 0,4 sec

! P : loi de Fitts modifiée (entre 0,8 et 1,5 sec, typ. 1,1 sec)

! D : 0,9*n + 0,16*l (n segments de longueur moyenne l)

! M : 1,2 sec

! R : max(0,n-t)

n est le temps de traitement du système

t est le temps exploité par l'utilisateur

Principale difficulté : placer les opérateurs M...

Keystroke

Règles pour le placement de l'opérateur M

! insérer M devant tous les K

! insérer M devant un P qui correspond à une commande (et pas à un argument)

! supprimer M si l'opérateur qui suit peut être anticipé (ainsi, PMK devient le plus souvent PK)

! si MKMK…MK constitue un mot, le transformer en MKK…K

! etc.

Le plus important : être cohérent !

Keystroke : exemple

Déplacement du curseur d'un traitement de texte

Méthode 1

! prendre la souris

! la déplacer au point désiré

! appuyer sur le bouton

M1 : H(souris)P(pointer)K(clic)H(retour)

insertion des opérateurs M…

M1 : HMPMKH

élimination des opérateurs M superflus (anticipation)

M1 : HMPKH (T1 = 3,45 sec)

Keystroke : exemple

Déplacement du curseur d'un traitement de texte

Méthode 2

! tant que le curseur n'est pas sur la ligne cible, taper Ctrl-n

! tant que le curseur n'est pas sur le mot cible, taper Esc-f

M2 : K(Ctrl) l*K(n) m*[K(Esc)K(f)]

insertion des opérateurs M…

M2 : MK l*K M m*[KK] (T2 = 3,5 sec pour l = m = 1)

Keystroke : exemple

Déplacement du curseur d'un traitement de texte

! M1 : HMPKH

! M2 : MK l*K M m*[KK]

Comparaison des méthodes

! pour l = m = 1, T1<T2

! si l'on omet le deuxième opérateur M dans M2, alors T1<T2 pour l=0 et m>5 ou pour l>10 et m

petit

Keystroke : problèmes

Pas de prise en compte du contexte

Pas de prise en compte des erreurs

Pas de prise en compte de l’apprentissage

Ceci dit, Keystroke nous oblige à penser à toutes les actions à effectuer, même les plus

minimes, et donc à nous mettre à la place de l’utilisateur

Théorie de l’action

Théorie de l’action (Norman)

GOMS et Keystroke modélisent un comportement observé

La théorie de l'action modélise les processus psychologiques qui conduisent à ce

comportement

Réalisation d’une tâche

! établissement du but

! formation d’une intention

! spécification d'une suite d'actions

! exécution des actions

! perception de l'état du système

! interprétation de l'état du système

! évaluation de l'état par rapport au but fixé

Théorie de l’action : distances

but

intention

spéc. actions

exécution

système

perception

interprétation

évaluation

distance

articulatoire

d'entrée

distance

articulatoire

de sortie

distance

sémantique

de sortie

distance

d'exécution

distance

d'évaluation

distance

sémantique

d'entrée

Théorie de l’action

Comment peut-on

! déterminer la fonction d'un appareil

! dire quelles actions sont possibles

! déterminer le lien entre l'intention et l'action

! réaliser l'action

! voir dans quel état est le système

! déterminer le lien entre ce que l'on voit et l'état désiré

! dire si le système est dans l'état désiré

Modèles perceptuel et conceptuel

Modèle perceptuel : modèle mental construit par l'utilisateur

Modèle conceptuel : description et fonctionnement du système

La distance entre les deux modèles détermine l'utilisabilité du système

réponses

feedback

commandes

opérations

Exemple : le bain

Problème : remplir une baignoire avec deux robinets eau chaude/froide

Variables psychologiques

! d = débit de l'eau

! t = température du bain

Variables physiques

! dc, tc = débit et température de l'eau chaude

! df, tf = débit et température de l'eau froide

Relations entre les variables

! d = df + dc

! t = (dc*tc + df*tf) / (df+dc)

Exemple : le bain

Problèmes typiques rencontrés par l'utilisateur

! quel robinet est celui d'eau froide ?

! comment faire varier le débit (dans quel sens tourner) ?

! comment refroidir en conservant le débit ?

! comment manipuler les deux robinets en sens inverse ?

! comment diminuer le débit en gardant la température constante ?

! comment évaluer le débit ?

! comment évaluer la température ?

De quoi est fait ce dessin ?

Comment est fait ce dessin ?

Autre exemple

C'est un ensemble de points que l'on peut effacer

C'est un rectangle et un cercle que l'on peut déplacer

Modèle perceptuel

L'utilisateur construit un modèle mental du système en se basant entre autres sur

! les affordances (relations naturelles) du système qu'il perçoit

! les liens de causalité qu'il perçoit

! les contraintes imposées par le système (ex : physiques)

! des correspondances perçues (ex : contraintes/objets)

! des stéréotypes culturels

! l'expérience de systèmes similaires (transfer effect)

! des instructions reçues

Ce modèle n'est pas nécessairement juste...

Exemple : la commande DISK du Cat

Une seule commande, sans paramètre, permet de formater la disquette, sauvegarder le

système ou le restaurer (la mémoire du Cat avait la capacité d’une disquette…)

Objectif : limiter les messages, éviter les erreurs

Memory

unchanged

Memory

changed

Empty

memory

Same disk

New disk

Blank disk

no action save no action

load warn load

save (dup) save no action

Design languages (Rheinfrank & Evenson)

Design languages

! ces langages peuvent émerger naturellement en réponse à des facteurs extérieurs (ex : style

architectural)

! peuvent être créés pour faciliter l’assimilation d’un élément nouveau (ex : couleurs des éléments

d’un photocopieur de la famille Xerox)

Cinq étapes

! characterization : describing the existing assumptions

! reregistration : creation of new assumptions

! development and demonstration : make the new assumptions explicit

! evaluation

! evolution

Connaissez votre utilisateur

Vous ne représentez pas nécessairement l'utilisateur moyen du système que vous développez

N'attendez pas des autres qu'ils pensent ou se comportent comme vous le faites, ou comme

vous aimeriez qu'ils le fassent

Les pensées et le comportement varient autant que les caractéristiques physiques

Allez à la rencontre de vos utilisateurs !

Exemple : programme Follow-Me-Home d'Intuit

Différences entre individus

Il est rarement possible de concevoir un système qui convienne à tout le monde

Exemples : longueur des lits, hauteur des portes, espace entre les sièges de train ou d'avion

Il faut le plus souvent trouver un compromis…

Erreur classique : concevoir le système pour la moyenne (on risque d'exclure la moitié de la

population)

Objectif à viser : 80% de la population

Affordances et approche écologique

Le concept

Affordance : “a property of the world that affords action to appropriately equipped individuals”

Relation tri-partite : l’environnement, l’individu et ses actions

Importance du couplage perception/action

Exemples

! une chaise permet de s’asseoir

! un thermostat peut être tourné

! un bouton peut être pressé

! une porte peut être poussée... ou tiréePush or pull? Which side? Can only push,

side to push clearly visible

Psychologie de la perception

Modèles traditionnels de la perception

! tout commence par les sensations

! ces sensations sont traitées en fonction des souvenirs et des modèles mentaux de la réalité

! le tout résulte en une représentation symbolique du monde

L'approche écologique (d'après Gibson)

We are told that vision depends on the eye, which is connected to the brain. I shall suggest that

natural vision depends on the eyes in the head on a body supported by the ground, the brain being

only the central organ of a complete visual system

L’environment

L’animal et l’environnement se définissent mutuellement

Notre rapport à l'environnement est pratique : nous voyons pour nous déplacer, pour chasser,

trouver un abri, etc.

Exemple : voyons-nous de la lumière en tant que telle ?

! non : nous voyons un feu, le soleil, une lampe

! notre vision est structurée en fonction de nos interactions avec l'environnement

Affordances et perception

Percevoir une affordance n'est pas classer un objet

! les affordances sont perçues directement

! elles sont indépendantes des catégories d'objets existantes a-priori

Les affordances sont des propriétés de l'environnement

! elles existent indépendamment de la perception

! une affordance non perçue reste une affordance... Pas

d’affordance Affordance

Information

perçue

Information

non perçue

fausse

affordance

affordance

perçue

rejet

correct

affordance

cachée

Exemple : tours de Hanoï (Zhang & Norman, 1994)

R1: Only one X can be transferred at a time

R2: A X can only be transferred to a Y on which it will be the largest

R3: Only the largest X on a Y can be transferred to another Y

(X,Y) ! { (ring, peg), (orange, bowl), (cup, plate) }

Prototypage rapide et incrémental

Cultures of prototyping (Schrage)

Prototypes and specifications : wish list vs. embodiment

! les petites boîtes centrées sur un produit unique ont généralement une culture du prototype

! les grosses boîtes avec de très nombreux clients sont plutôt portées sur les spécifications

(produites par le marketing…)

Selon D. Kelley (IDEO), l’innovation est facilitée par une approche prototype-driven

specifications (opposée à specification-driven prototypes)

Le choix de l’outil utilisé pour prototyper est primordial

Exemple : clay models (EU) vs. CAD models (Japon) il y a quelques années

Le prototype permet de répondre à des questions et de créer un vocabulaire propre au produit

(e.g. suckback pour un tube de dentifrice)

Cultures of prototyping (Schrage)

Prototyping cycle, prototyping culture

! mean time to prototype, time between prototypes

! periodic prototyping, explicit schedules (e.g. toutes les deux semaines)

! prototype as an end product?

! who owns the prototype? who manages it? who gets to see it when?

Conclusion

Ce qu’il faut retenir

La conception, la mise en œuvre et l'évaluation des systèmes interactifs doit se faire selon des

critères centrés sur l'utilisateur et les situations d'usages.

Quelques modèles prédictifs permettent de comparer de manière quantitative des techniques

d'interaction différentes.

La théorie de l'action, qui s'intéresse aux processus psychologiques, est à la base de la plupart

des règles ou conseils que l'on peut trouver concernant la conception de systèmes interactifs.

Références

D. Norman. The design of everyday things. MIT Press, 1988.

D. Norman. Things that make us smart : defending human attributes in the age of the machine.

Perseus Press, May 1994.

D. Norman. The invisible computer : why good products can fail, the personal computer is so

complex, and information appliances are the solution. MIT Press, October 1998.

Nicolas Roussel

7 critères ergonomiques

In Situ project-teamLRI (Univ. Paris-Sud – CNRS) & INRIAhttp://insitu.lri.fr/situin

Avant de commencer...

Source de ces critères et recommandations

De l’ergonomie du logiciel au design des sites web

Jean-François Nogier, Dunod, 2002

Avantages

! ces quelques conseils permettent de corriger de nombreux problèmes d'utilisabilité

! ils sont faciles à retenir, et assez simples à appliquer

! ils peuvent éventuellement servir de base à une évaluation simple et rapide d'un système existant

Inconvénients

! ce n'est pas une check-list

! il y a quelques redondances

! certains critères sont à manier avec précaution

1 - Compatibilité

1 - Compatibilité

Capacité du système à s’intégrer dans l’activité des utilisateurs

Recommandations

! parler le langage de l’utilisateur

! présenter les informations de façon cohérente par rapport aux autres supports de travail

! l’accès aux commandes doit être compatible avec la tâche de l’utilisateur

2 - Guidage

2 - Guidage

Objectif : faciliter l’utilisation du système et son apprentissage

Recommandations : incitation

! griser les commandes non disponibles

! fournir la liste des saisies attendues

! donner le format de saisie des données

Recommandations : groupement/distinction

! regrouper les informations de même type par le format ou la position

! distinguer par une présentation différente les informations distinctes

2 - Guidage (suite)

Recommandations : retour utilisateur

! à toute action de l’utilisateur doit répondre un changement de présentation de l’interface

! indiquer les modes de fonctionnement du système

! signaler les traitements longs par un message d’attente

! toujours faire apparaître les saisies de l’utilisateur

! rendre visibles les traitements réalisés par le système

Recommandations : lisibilité

! utiliser une police droite

! employer des lettres sombres sur fond clair

2 - Guidage (suite)

Mécanismes de retour pour

! réduire la charge cognitive

! prévenir des situations d'erreur

! rassurer (ex : progression d'une opération)

Quelques données sur la perception du temps de réponse :

! t<0.1 sec : perçu comme instantané

! t<1 sec : le délai est perçu, mais ne perturbe pas l'utilisateur

! t>10 secondes : l'utilisateur va vouloir faire autre chose en attendant

Pour les longs délais : changement de curseur, barre de progression ou animation aléatoire

3 - Homogénéité

3 - Homogénéité

Concerne la cohérence globale de l’interface

Principe : un système qui a l’air familier est perçu comme simple à utiliser

Recommandations

! les fenêtres doivent suivre le même schéma d’agencement

! la sémantique des boutons de la souris doit être constante

! le même vocabulaire doit être utilisé pour désigner les commandes du logiciel

! la syntaxe des commandes doit être cohérente sur l’ensemble de l’interface

Intérêt : faciliter l'apprentissage et l'utilisation

Risque : freiner ou bloquer l'évolution (inertie des standards)

3 - Homogénéité (suite)

Deux niveaux (au moins) de cohérence

! interne (application)

! externe (avec les autres applications, avec la métaphore du système)

La cohérence ne concerne pas que l'apparence visuelle (e.g. syntaxe et effets des commandes)

Guides de style

! publiés par les concepteurs de systèmes ou d'interfaces graphiques

! décrivent le "look and feel" d'une plateforme

! sont souvent vicieux : faciliter la vie de ceux qui les suivent et compliquent la vie de ceux qui ne les

suivent pas…

Exemples : OSF Motif, IBM CUA, Apple Human Interface Guidelines, MS Windows

Bons sur le principes, mais peuvent être durs à suivre...

3 - Homogénéité (suite)

Motif style guide v1.1 : MessageDialogs should be used to convey a message to the user. They

must not interrupt the user’s interaction with the application. They should include a message,

and one of the following button arrangements.

OK

OK Help

OK Cancel

OK Cancel Help

Yes No

Yes No Help

Yes No Cancel

Yes No Cancel Help

Cancel

Cancel Help

Retry Cancel

Retry Cancel Help

4 - Flexibilité

4 - Flexibilité

Capacité de l’interface à s’adapter à différents contextes d’utilisation

Recommandations

! permettre l’activation des commandes au clavier ou à la souris

! autoriser le déclenchement d’une commande fréquente depuis plusieurs fenêtres de l’application

! permettre à l’utilisateur de paramétrer le logiciel selon ses préférences

! fournir un moyen rapide d’accéder aux commandes des menus

4 - Flexibilité (suite)

Les utilisateurs expérimentés doivent pouvoir se servir rapidement des opérations les plus

courantes

Solutions

! icônes

! abréviations (Ctrl-s)

! mnémoniques (Alt-f-e)

! touches spéciales

! complétion automatique, frappe anticipée (type ahead)

! mécanismes de navigation, historiques

! redo

4 - Flexibilité (suite)

Adaptabilité : personnalisation explicite par l’utilisateur

! lexique

! préférences de présentation

! modalités du dialogue

Attention à l'interface de configuration des préférences...

Adaptativité : personnalisation dynamique sans action explicite de l’utilisateur

L'adaptativité est très controversée...

! non prédictibilité

! rupture du principe de cohérence

5 - Contrôle utilisateur

5 - Contrôle utilisateur

Concerne le degré de contrôle de l’utilisateur sur les traitements réalisés par le système

Recommandations

! valider explicitement les commandes importantes ou difficilement réversibles

! offrir la possibilité d’interompre les traitements longs

! autoriser les retours en arrière

6 - Traitement des erreurs

6 - Traitement des erreurs

Regroupe les différents moyens visant à protéger l’utilisateur des erreurs et à corriger celles-ci

Recommandations générales

! éviter/empécher les erreurs (!)

! détecter les erreurs au plus tôt

! permettre une correction aisée des erreurs

! faciliter l’exploration et l’apprentissage du système

Recommandations : protection contre les erreurs

! griser les commandes non disponibles

! fournir la liste des valeurs possibles

! minimiser les saisies clavier

! prévenir des risques de perte de données

6 - Traitement des erreurs (suite)

Recommandations : correction des erreurs

! placer le message d’erreur là ou l’utilisateur est censé regarder

! mettre en évidence le champ erroné

! afficher des messages d’erreur explicites, brefs, non réprobateurs et auto-suffisants

L'utilisateur n'aime pas se sentir "piégé". Essayer de toujours lui laisser une porte de sortie

clairement identifiée :

! bouton Annuler (cancel)

! bouton Reset/Default pour annuler des changements

! commande Défaire (undo)

! commande Interrompre (et/ou Pause)

! commande Quitter

6 - Traitement des erreurs (suite)

Les utilisateurs vont faire des erreurs, c'est certain

Exemples

! jeter le mauvais sac après avoir trié des papiers

! prendre la voiture un samedi pour aller faire les courses et se retrouver sur la route du bureau

! aller dans une pièce et ne plus se souvenir de ce qu'on est venu chercher

Solutions (entre autres)

! empêcher les manipulations erronées avant qu'elles ne se produisent

! permettre la détection et la correction d'erreur par le feedback et une commande défaire

6 - Traitement des erreurs (suite)

On peut tirer partie de la formation des habitudes

! la répétition et l’entraînement développent des habitudes

! The ideal humane interface would reduce the interface component of a user’s work to benign

habituation. Many of the problems that make products difficult and unpleasant to use are caused

by human-machine design that fails to take into account the helpful and injurious properties of habit

formation. (J. Raskin)

Réduire le nombre de choix peut favoriser le développement d’habitudes

6 - Traitement des erreurs (suite)

Les messages d'erreur sont importants

Le message doit être rédigé dans des termes compréhensibles par l'utilisateur, si possible reliés

à la tâche qu'il essayait d'accomplir

Eviter les messages qui laisseraient penser que l'utilisateur est stupide...

6 - Traitement des erreurs (suite)

La plupart des utilisateurs ne lisant pas la documentation, mieux vaut prévoir un système d’aide

Remarque : ce système n'est pas la pour aider à faire passer une interface mal conçue…

Situation la plus courante : la recherche d’aide en mode "panique"

! besoin ponctuel, spécifique et urgent

! nécessite une documentation "en ligne" avec des mécanismes d'indexation

L'aide peut prendre différentes formes

! tutoriels, démonstrations

! manuel de référence, mémento (cartes de référence, tip of the day, tooltips)

! aide contextuelle : qu'est ce que c'est ? où suis-je ? où est … ? et maintenant ? que s'est-il

passé ? pourquoi est ce que ça ne … ?

! assistants

7 - Concision

7 - Concision

Ensemble des moyens visant à réduire la charge perceptive et mnésique de l’utilisateur

Recommandations

! n’afficher que les informations pertinentes

! réduire le nombre d’actions élémentaires pour atteindre un objectif donné

! minimiser les saisies/lectures

! éviter les textes trop verbeux

! ne pas demander de saisir des informations qui peuvent être déduites

! éviter à l’utilisateur d’avoir à se souvenir d’informations

! ne pas l’obliger à faire des calculs qui peuvent être automatisés

7 - Concision (suite)

Présenter uniquement les informations nécessaires

! less is more : limiter le nombre de widgets et de fenêtres qui introduisent des manipulations

suplémentaires

! cacher ou supprimer les informations non essentielles (cf. progressive disclosure du Star)

! utiliser si possible l'ordre naturel des choses

Préfere les techniques de manipulation directe aux techniques nécessitant la saisie de

commande ou d'arguments (point and click instead of remember and type)

7 - Concision (suite)

7 - Concision (suite)

Préférer un petit nombre de commandes génériques

Expliciter les contraintes existantes

Difficulté : reconnaître est plus facile que se souvenir, mais bien souvent, en terme de

représentation graphique, less is more...

Ouvrages de référence 

B. Shneiderman and C. Plaisant, editors. Designing the User Interface: Strategies for Effective Human‐Computer Interaction, 4th edition, Addison‐Wesley, March 2004. 672 pages.  

J. Carroll, editor. Human‐Computer Interaction in the New Millenium, Addison‐Wesley, August 2001. 703 pages.  

T. Winograd, J. Bennett, L. D. Young and B. Hartfield, editors. Bringing Design to Software, Addison‐Wesley, April 1996. 352 pages.  

J. Raskin. The Humane Interface: New Directions for Designing Interactive Systems, Addison‐Wesley, March 2000. 256 pages.  

D. Norman. Things That Make Us Smart : Defending Human Attributes in the Age of the Machine, Perseus Press, May 1994.  

 J‐F. Nogier. Ergonomie du logiciel et design web, 2nde édition, Dunod, Septembre 2003. 282 pages.  

Introduction à l'Interaction Homme‐Machine : l'examen 

Quels seront les documents autorisés pendant l'examen ? 

Vous aurez droit à une feuille A4 recto/verso manuscrite (écrite à la main). Vous pouvez mettre ce que vous voulez dessus, vous pouvez même ne rien mettre. 

A quoi va ressembler l'examen ? 

Vous devez vous attendre à quatre types d'exercices : 

  1.  des questions sur des points précis vu en cours ; 

   2.  des exercices qui consistent à appliquer certains éléments vus en cours ou en TD ; 

   3. des exercices dans lesquels on vous demande votre avis sur une interface ou une technique d'interaction particulière ; 

   4.  des exercices qui consistent à imaginer une technique d'interaction ou un système interactif pour un problème particulier.  

Pour les exercices de la deuxième catégorie, il peut vous être demandé d'écrire des petits programmes. L'exactitude de la syntaxe ne sera pas le critère de jugement. 

Pour les exercices de la quatrième catégorie, il vous sera demandé de décrire de manière précise les dispositifs matériels, interfaces et techniques d'interaction mis en œuvre, ainsi que le modèle conceptuel qui les accompagne (opérations possibles, feedback et réponse du système). 

De manière générale, toutes vos réponses devront être soigneusement justifiées. 

Plus précisément... 

Exemples de questions de cours : 

    Quels sont les trois principes de base de la manipulation directe ? 

    Pourquoi est‐il souvent conseillé de mettre moins de 10 items dans un menu ?  

Exemple d'exercice de mise en pratique : 

Décrivez informellement une technique d'interaction pour créer un polygone fermé à la souris et donnez la machine à états correspondante. 

Exemple d'exercice d'évaluation informelle : 

Firefox propose trois choix de représentation des boutons de son interface : Icons and text, Icons et Text. 

1. Citez pour chaque représentation un avantage et un inconvénient concernant son utilisabilité. 

 

2. En fonction des avantages et inconvénients mentionnés, quelle représentation vous parait la plus intéressante ? 

Exemple d'exercice de conception : 

Il vous est demandé de concevoir une application de gestion de calendrier pour un système de type palm‐top. Le système envisagé est doté d'un écran de petite taille, de quatre boutons et d'une molette que l'on peut faire tourner et également presser comme un cinquième bouton (Figure x). L'écran n'est pas tactile et ne permet donc pas la désignation directe. 

1. Définir les interactions permettant la navigation dans le calendrier. Celui‐ci doit proposer quatre vues : jour, semaine, mois, année. On cherchera à minimiser le nombre d'actions nécessaires pour se rendre d'un jour à un autre. 

2. Définir l'interaction permettant de créer une nouvelle entrée. L'intitulé de l'entrée peut faire partie d'une liste prédéfinie (rendez‐vous, réunion, cours, vacances, etc.) ou être saisi. L'entrée a une certaine durée et peut se répéter tous les jours, toutes les semaines, tous les mois, ou toutes les années. 

3. Définir les interactions permettant de modifier une entrée (sa date, son heure, son intitulé, sa durée, sa périodicité) et de la détruire.