Conception Des Systemes Interactifs

Conception des Systmes Interactifs
David Navarre
navarre@irit.fr - http://ics.irit.fr/navarre
Interactive Critical Systems IRIT Universit Toulouse I Capitole

1
Objectifs du cours

Introduction Introduction Introduction Introduction
au domaine aux concepts aux techniques la modlisation
Contenu du cours

Elments de User Centered Design Elments d ergonomie Elments de psychologie cognitive Elments de gnie des systmes interactifs Elments de technologie des systmes interactifs
Bibliographie

Les Interfaces Homme-Ordinateur Jolle Coutaz, Dunod, 1990 puis Designing the User Interface B. Shneiderman 1997 The psychology of everyday things Donald Norman, BasicBooks, 1988 User Interface Management Systems Dan Olsen, 1998 The Psychology of HCI, Card Moran & Newell 83 Lawrence Erlbaum eds.
4
Une petite histoire

Les archologues extra-terrestres
La Carte de lIHM
a ne marche jamais !!!

Utilisateur
Output device
Input device
Unit Centrale Un utilisateur en pleine activit
Tches
7
User-centered systems design in practice
Gestion des erreurs et rcupration
Exemples derreurs Windows
Plus
Internationalisation
10
Distance articulatoire
11
Facteurs Humains
Sleon une dtue de l'Uvinertis de Cmabrigde, l'odrre des ltteers dans un mtos n'a pas d'ipmrotncae, la suele coshe ipmrotnate est que la pmeirre et la drenire soit la bnnoe pclae. Le rsete peut rte dans un dsrorde ttoal et vuos puoevz tujoruos lrie snas porlblme. C'est prace que le creaveu hmauin ne lit pas chuaqe ltetre elle-mme, mias le mot cmome un tuot.
12
Quelques dfinitions

Systmes Interactifs Interface Homme-Machine Communication Homme-Machine Modle dinteraction Style dinteraction Mtaphore dinteraction Dialogue, noyau fonctionnel
13
Systmes interactifs
interface
noyau fonctionnel
application interactive
Interface => Communication - Canal, Langage, Sens Homme => Tche - Prise en compte de facteurs humains Ordinateur => Processus - Aspects logiciels
14
Modle d'interaction
Modle d'interaction : Look (qu'est-ce que l'on montre) Style d'interaction : Feel (comment on manipule) Mtaphore d'interaction Exemples :

Reprsentation des objets sous forme iconique Construction d'une commande (action-paramtre ou paramtre action) Mode de saisie de la commande :
Drag and drop Slection Menu Langage de commande

15
Sparation Interface/Application
Application non modulaire
Interface & E/S
Application
80 % du code d'une application peut tre considr comme faisant partie de la gestion du dialogue (Brad Myers 90)
16
Proportion interface/noyau
Editeurs (de textes, de dessins, ...) Code de calcul
17
Sparation interface/noyau
Au niveau de l'ordinateur, architecture logicielle sparer :

Ce qui tabli la communication, Ce qui gre le dialogue Ce qui fait les oprations effectives.
Utilisateur Interface E/S, Systme
Application modulaire
Noyau Fonctionnel
18
Sparation Interface/Application
Reprsentation externe
Dialogue Noyau Fonctionnel
Architecture Seeheim Un exemple d'architecture favorisant la sparation interface / application
19
Objectifs d'une interface utilisateur

Amliorer la communication
Communication "naturelle"

Cohrence intra et inter applications Mtaphores Choix des styles d'interaction Structures de tches et sous-tches
Communication efficace

tude de la frquence des commandes

Mta-communication
20
Caractristiques d'une bonne IHM

Adapte aux besoins Facile apprendre Intuitive : prdictible Rassurante : apprentissage par essais - erreurs Agrable - esthtique - dynamique - ludique Performante : tches rapides excuter ractions immdiates
21
Comptences Requises
Une Approche multi-disciplinaire

Informatique Domaine de l'Application Connaissance de l'utilisateur Penser lui Connatre ses caractristiques cognitives Connatre son environnement Se mettre sa place Communiquer avec lui
22
Ncessite d'tre centr sur l'utilisateur

Domaines abords
Tous et mme plus

Application de bureau Systmes temps rel critiques (avion, ATC, ) Systmes standard (souris, clavier, crans) Systmes exotiques (tout !!)
Systmes E/S

23
Dangers d'une "mauvaise" IHM

Rejet pur et simple par les utilisateurs Cot d'apprentissage (formation) Perte de productivit des utilisateurs Utilisation incomplte: manque gagner Cots de maintenance Perte de crdibilit
24
Exemples de mauvaise conception

Libells non clairs ou ambigus (syntax error) Fonctionnalits inutiles Ecrans trop denses, mal structurs Ecrans trop nombreux "Chemins" trop longs Contexte inconnu ou oubli Essai en vol (Aro)
25
Conclusion
Domaine en pleine mutation

on sait faire beaucoup il reste beaucoup inventer besoin de standards les standards sont parfois dangereux
Enjeux commerciaux trs grands

26
INTRODUCTION LA CONCEPTION CENTRE UTILISATEUR
Analyse de l'existant
objectifs : exigences centres sur l'utilisateur et l'organisation
contraintes sur l'environnement

objectifs du systme / tches / performances opportunits d'amlioration caractristiques de la population cible analyse cot / bnfice aspects organisationnels disponibilits des ressources humaines groupes d'utilisateurs et leurs organisations / tches outils actuellement utiliss donnes manipuler , traitements, contraintes (temps, lgales, ) scnarios d'informatisation modle du nouveau systme homme machine
28
informations lies aux tches

rsultats

Interaction HommeMachine
Recueil d'informations
100 % : ce que l'metteur veut dire 90 % : ce que l'metteur transmet 80 % : ce que le rcepteur reoit 70 % : ce que le rcepteur dcode 60 % : ce que le rcepteur comprend 50 % : ce que le rcepteur retient
vous allez avoir une mauvaise note (<10)
Exemples classiques :

le bouche oreille le jeu de mime
29
Documentation utilisateur

sommaire avec des questions pour les situations chapitres par thmes, fonctions, questions index cls multiples permettant un reprage rapide glossaire avec vocabulaire clair (celui de l'utilisateur) mise en page are avec dessins et commentaires mots-cls relie pour une lecture facile (spirale, classeur, fiches, ...) mots et phrases courtes 1 mot = 1 sens tournure active et affirmative
30
Livraison pour un projet
Manuel de conception Manuel utilisateur Logiciel Plan de formation

Qui fait la formation ? Combien de temps ? Quels supports ? C'est pas le chat qui va le faire !
31
Analyse de l'utilisateur

son rle ses tches sa connaissance du domaine sa connaissance de l'informatique
on obtient :

son type (occasionnel ou non) ses habitudes de travail ses besoins en formation
32
FACTEURS HUMAINS
FINISHED FILES ARE THE RESULT OF YEARS OF SCIENTIFIC STUDY COMBINED WITH THE EXPERIENCE OF YEARS.
Combien de F ?
34
Combien de F ?
35
Combien de F ?
36
Facteurs Humains
Sleon une dtue de l'Uvinertis de Cmabrigde, l'odrre des ltteers dans un mtos n'a pas d'ipmrotncae, la suele coshe ipmrotnate est que la pmeirre et la drenire soit la bnnoe pclae. Le rsete peut rte dans un dsrorde ttoal et vuos puoevz tujoruos lrie snas porlblme. C'est prace que le creaveu hmauin ne lit pas chuaqe ltetre elle-mme, mias le mot cmome un tuot.
37
38
39
Cerveau droit - cerveau gauche

S'asseoir Faire des cercles avec le pied dans le sens des aiguilles d'une montre Lever le bras droit et dessiner un 6 Rat !!!
40
41
Couleurs facile
BLEU NOIR ROUGE VIOLET VIOLET
Interaction HommeMachine 42
VERT JAUNE JAUNE
MARRON
NOIR ROSE
NOIR
Couleurs moins facile

BLEU NOIR ROUGE VIOLET VIOLET
VERT JAUNE JAUNE
MARRON
NOIR ROSE
NOIR
44
45
46
Exemple : pseudo-transparence
47
MODLES DE LUTILISATEUR
48
Le processeur humain
Card, Moran et Newell
Le processeur humain comprend trois sous-systmes
le systme sensoriel :
ensemble des sous-systmes spcialiss chacun dans le traitement d'une classe de stimuli (phnomne physique dtectable) responsable des mouvements compos de la mmoire court terme, de la mmoire long terme et du processeur cognitif
49
le systme moteur :
le systme cognitif :
Systme sensoriel de l'utilisateur

reprsentation non interprte des entres persistance des informations = 200 ms pour la mmoire visuelle et 1500 ms pour la mmoire auditive capacit de stockage type d'information (physique, symbolique, ...) temps de cycle 100 ms (dpend de l'intensit)
Mmoire a court terme

C'est la lettre P
Filtre cognitif
P Mmoire visuelle T = 100 ms

graphisme non reconnu

50
Le systme moteur

Un mouvement n'est pas continu mais est une suite de micromouvements discrets Le mouvement correspond aux manipulation physiques des dispositifs d'entre
temps d'un micro-mouvement : 70 ms (cycle de base du processeur du systme moteur) temps de slection d'un lment graphique : T = I.log (1+2D/L) avec D : distance a parcourir, L : largeur de la cible, I = 0,1 sec. (loi de Fitts) D L
X0
X1
X2
Cible
51
Le systme cognitif
la mmoire court terme

informations sensorielles sont reprsentes sous forme symbolique les infos en provenance de la mmoire long terme sont appeles "chunks" (unit cognitive symbolique). Ex. S.N.C.F. 7 +- 2 chunks (au-del dgradation)
structure organise sous la forme de rseaux smantiques cycle de base : 70 ms fonctionne selon un cycle reconnaissance-action (il dtermine en fonction des "chunks" de la mmoire court terme les actions de la mmoire long terme, puis il les excute)
52
la mmoire long terme

le processeur cognitif

Le modle du processeurs humain
Intrts

cadre fdrateur pour les diffrentes connaissances en psychologie il utilise la terminologie de l'informaticien est orient psychologie exprimentale (et applicable) de trop bas niveau dans le cas gnral (ne fournit pas les information intressantes pour la conception d'interfaces homme-machine ne traite pas les problmes de l'erreur et du paralllisme ne prsente pas de mthode de conception (il ne dit pas comment intgrer ces contraintes dans une application)
Inconvnients
53
La thorie de l'action
D. Normann 1986
L'individu labore des modles conceptuels qui correspondent son comportement
le modle conceptuel
Manipulation du modle

les aspects d'une tche distance (d'excution et d'valuation)
54
Le modle conceptuel
modle de conception (modle conceptuel de l'outil)

doit aider l'utilisateur dans sa tche doit contenir : tude des besoins, des possibilits et des limitations de l'utilisateur type
modle de l'utilisateur (reprsentation mentale que l'utilisateur labore propos de l'outil)

image d'un outil = interface d'utilisation il faut que l'interface permette l'utilisateur de construire un image correspondant au modle de conception
s'applique tous les outils (et en particulier l'ordinateur)
55
Thorie de l'action
BUT
INTENTION
distance smantique
EVALUATION
distance d'valuation
distance smantique
distance d'excution
SPECIFICATION D'ACTIONS
INTERPRETATION
distance articulatoire
distance articulatoire
EXECUTION
PERCEPTION
LE MONDE
56
Distance d'excution et d'valuation

dissimilitude entre la reprsentation de l'image et celle de l'utilisateur distance d'excution est l'effort de l'utilisateur pour la mise en correspondance entre la reprsentation mentale de la tche et la reprsentation physique externe impose par l'image distance d'valuation effort cognitif inverse (de l'utilisateur) but du concepteur : rduire la distance au moyen de l'image
distance d'valuation
systme physique
buts
distance d'excution
57
Evaluation de la thorie de l'action
Avantages
prcise la notion d'tat

tat peru : traduction de l'tat effectif sous forme de variables psychologiques tat effectif : fonction sur les variables physiques
prend en compte les erreurs explique les difficults des utilisateurs identifie les phases o l'utilisateur effectue des interprtations donne peu d'informations sur le travail de l'informaticien pour faire des applications intgrant la thorise de l'action le niveau de dtail (tat, variables) n'est pas forcment adquat en fonction des phases du cycle de vie
58
Inconvnients
Mise en pratique de la Thorie de l action

Analyse d un comportement de la vie quotidienne
Exemple : Thermostat de chauffage central
Vous rentrez chez vous et il fait froid. Que faitesvous avec le thermostat du chauffage central ?

A : Je le monte fond B : Je le monte 20 C
60
80% des personnes interroges montent le chauffage fond*
Questions :
Comment interprter ce comportement d aprs la thorie de l action ? Quelle amlioration apporter au thermostat pour viter ce comportement ?
simplement inventes pour les besoins de la cause. Interaction HommeMachine
*Note : 80% des statistiques sont purement et

61
Interprtation de ce comportement
Trois modles de lutilisateur possibles :
Le thermostat rgule directement la temprature de l eau dans les tuyaux (ou la temprature de la rsistance lectrique) Le thermostat rgule la proportion de temps ou le chauffage fonctionne (O% du temps en bas, 100% du temps fond) Le thermostat agit comme un interrupteur, ouvrant le chauffage si la temprature est infrieure celle programme
62
Modle erron Comportement erron
D aprs les modles (1) ou (2), lutilisateur dduit que le fait de monter le thermostat au maximum rduira le temps ncessaire pour que la temprature remonte 20C Le modle (3) est conforme au fonctionnement du chauffage central
63
Problme : gouffre de l valuation

Pourquoi certaines personnes construisentelles un modle mental erron ? Manque de feedback
L action sur le thermostat n a pas d effet immdiatement perceptible Difficile de savoir si le but est atteint (perception de la temprature )
64
Amliorations
Permettre l utilisateur de construire un meilleur modle du systme Amliorer le feedback
Indication visuelle du fonctionnement du chauffage (feedback immdiat) Indication de la temprature relle par rapport la temprature programme
Permet de dterminer facilement si le but est atteint

65
Modle cognitif du systme
L'utilisateur n'est qu'une petite partie
66
Modle gnrique de comportement Humain
67
Holnagel's cognitive model
68
Activits au niveau "tracking"
69
Activit au niveau de la rgulation
70
Activit au niveau "monitoring"
71
Activit au niveau "targeting"
72
Modle tendu
73
Utiliser l analyse de tche pour concevoir une interface
ANALYSE DE TCHE
Rcration : Le jeu de 15

Le jeu se joue 2 Vous disposez des chiffres 1, 2, 3, 4, 5, 6, 7, 8, 9 On joue chacun son tour, chaque joueur prend un chiffre la fois, un chiffre ne peut tre pris quune fois Le premier qui possde 3 chiffres dont la somme est 15 a gagn Jouez ce jeu sans aucun outil (papier, crayon ou autre ! )
75
Exercice sur le jeu de 15
Analyser la tche d un joueur
Proposer une dcomposition en sous-tches
Proposer une interface (papier + crayon ou informatique) pour ce jeu
L interface doit (bien entendu) assister au maximum la tche du joueur
76
Analyse de la tche
Hirarchie des tches et sous-tches
Jouer au jeu de 15 Assurer l'alternance des coups Choisir un chiffre Evaluer si j'ai gagn (Calcul de la somme)
Chiffres que j'ai dj pris
Chiffres restants
77
Votre solution
78
Une autre solution
8 1 6
3 5 7
4 9 2
79
Pourquoi les approches Model-Based ?
Mettre en avant les informations abstraites Mettre en avant les informations importantes Aider grer la complexit lment important de la plupart des mthodes de conception Possibilit de raisonner sur des modles
Modles Importants en HCI
Modles de tche Architectures cognitive Modles de l'utilisateur Modles du domaine Modles du contexte Modles de prsentation Modles de dialogue
81
UML et HCI
Approche base de modle Neuf notations Pas de prise en compte de l'interface utilisateur (un peu partir des Use cases) Comment amliorer cela ?
Raffiner les Use Cases en modles de tches ? Interaction Homme

Machine 82
Dfinitions
Tches Buts Tches lmentaires Analyse de tches (task analysis) Modlisation des tches (Task Model) Activit (analyse, modlisation, )
Example de l'analyse de la tche
Touriste

Rserver un billet de train Chercher un monument dans une ville Jeu des 15
Client d'un distributeur de billets
84
Recueil d'information

Procdure prvue Procdure effective Procdure minimale
85
Logique de fonctionnement / dutilisation
Exemple dun systme informatique
On dispose d une base de donnes conue suivant le schma suivant :

Client 1,1 Visite Reprsentant 1,n
Proposer une arborescence de menu permettant de manipuler les informations de cette base
86
Logique de fonctionnement
Vision de linformaticien
Larborescence de menus reflte les fonctions internes de la base de donnes
Client Ajouter Supprimer Modifier Consulter Reprsentant
Ajouter Supprimer Modifier Consulter

Exemple de tche
Je passe mon temps saisir des nouveaux clients dans la base de donnes, et je dois leur affecter le reprsentant le mieux adapt (en fonction de diffrents critres) Parfois je reois un bon de commande envoy par un reprsentant nouvellement recrut, je dois alors saisir la fois le nouveau client et le nouveau reprsentant Il arrive que des reprsentants quittent la socit, en gnral ils partent avec leurs clients, il faut faire du mnage dans la base de donnes
Proposez une arborescence de menus adapte cette tche.
88
Logique dutilisation
Organiser le systme daprs lanalyse de la tche

Gestion commerciale Ajouter Consulter reprsentant Ajouter reprsentant Consulter Modifier Consulter reprsentant Ajouter reprsentant Supprimer reprsentant
Supprimer Client
89
Ingnierie des modles de tche
Notation modifiable et concise Approche systmatique capable d'indiquer comment rutiliser les informations des modles de tche Outils automatiques pour utiliser efficacement ces informations
90
Les diffrents modles de tche

Systme existant Systme futur Activit de l'utilisateur
91
Utilisation des modles de tche

Amliorer la comprhension de l'application (et en particulier de son utilisation) Enregistrer les rsultats de discussions multidisciplinaires Aider la conception Aider l'valuation de l'utilisabilit Aider l'valuation de l'efficacit Aider l'utilisateur durant son travail (aide contextuelle) Documentation (contenu + structure) Interaction Homme
Machine 92
ConcurTaskTrees

Met l'accent sur les activits de l'utilisateur Structure hirarchique Syntaxe Graphique Ensemble de plusieurs oprateur temporels (qualitatifs uniquement) Allocation des tches aux oprateurs Objets et attributs pour les tches
93
Modles de tches versus Scnarios

Les scnarios contiennent des descriptions prcises d'utilisation dans un contexte prcis et en fonction d'un systme donn Les modles de tche dcrivent les activits possibles thoriques et leurs relations Les scnarios ont une couverture moindre et sont plus prcis Les scnarios peuvent aider la modlisation des tches Les modles de tches peuvent aider l'identification Interaction Hommede scnarios intressants Machine 94
Passer des scnarios aux tches
95
Oprateurs temporels
Enabling/Activation T1 >> T2 or T1 [ ]>> T2 Disabling/Dsactivation T1 [> T2 Interruption/Interruption T1 |> T2 Choice/Choix T1 [ ] T2 Concurrency/Concurrence T1 ||| T2 or T1 |[]| T2 Iteration/Itration T1* or T1{n} Optionality/Facultative [T]
96
Oprateurs temporels

T1|||T2 : les actions de T1 et T2 peuvent tre effectues dans n'importe quel ordre T1|[]|T2 : T1 et T2 doivent se synchroniser sur certaines actions pour changer des informations T1>>T2 : quand T1 est termine T2 devient active T1 []>>T2 : quand T1 se termine elle fournit des informations T2 et l'active T1[>T2 : quand une action de T2 se produit, la tche T1 est dsactive
Caractristique des tches
[T1] : T1 est facultative pour atteindre le but (la tche de niveau suprieur) T1* : T1 peut tre rpte autant de fois que possible pour atteindre le but T1n : T1 doit tre rpte n fois pour atteindre le but T : rcursion la tche T est effectue lors de l'excution de la tche
98
Priorit des oprateurs
Ambigut dans la signification
Ambigut leve
Priorit: [], |||, [>, >>

99
Types de tches
Interaction tasks
Selection Edit
Control
Application task
Computing Comparison Locate Printing
...
100
Hirarchie et relations temporelles
101
Relations tches / sous-tches
102
Tches facultatives
103
Tches coopratives
t1
t2
User2 User1
t3
User3
t1(User1) t3 (User3) Cooperative part

104
Tches Cooperatives
105
GBLS: tches

But Obtenir de l'argent Pr-requis:

Avoir une carte Connatre le montant que l'on veut retirer Connatre le code secret Prendre l'argent Prendre la carte
106
Rsultats
GBLS: Modle de tches
107
108
109
110
GBLS : Erreurs utilisateur
111
GBLS : Scnarios
112
GBLS : Cration du modle de tche partir d'interviews
113
Limites des approches courantes en conception d'IHM
UML est dirig uniquement vers la modlisation des composants du systmes Peu d'outils sont disponibles Pas d'outils permettant d'excuter les modles pour comprendre leur fonctionnement
114
Conception base de modles de tches

1. Analyse des oprateurs entre tches 2. Analyse des objets manipuls par les tches
Identifier les structures de dialogue

Choix des lments de prsentation

115
Conclusions et autres sources
Http://giove.cnuce.cnr.it/ctte.html GUITARE Project http://giove.cnuce.cnr.it/guitare.html MEFISTO Project http://giove.cnuce.cnr.it/mefisto.html Book on Model-Based Design and Evaluation of Interactive Applications, Springer Verlag fabio.paterno@cnuce.cnr.it
116
Notions dergonomie
INTRODUCTION LERGONOMIE
Notions d'ergonomie
L'ergonomie vise l'adaptation du travail l'homme en permettant la conception d'outils, de machines, de dispositifs qui puissent tre utiliss avec le maximum de confort, d'efficacit et de scurit (utilisateur) Formalisation des interactions Homme-Machine Outils de l'ergonomie pour

valuer et comparer des interfaces
Limites de l'ergonomie et des approches thoriques Applications possibles
118
L'utilisateur
Fonctionnement interne (psychologie cognitive)
types d'utilisateurs (novice, expriment, expert) logique de fonctionnement / d'utilisation planification des tches (hirarchique)
vision (couleurs) morphologie (manipulation) culture (lecture de gauche droite et de haut en bas)
Caractristiques externes (ergonomie)

119
Mthodes d'valuation (0)

Objectifs d'une valuation ergonomique tablir un diagnostic d'usage de systmes existants assurer la qualit de conception d'une IHM (lors de la conception) comparer les avantages et les inconvnients des logiciels dans le but de dtecter et corriger des erreurs de conception d'IHM contrler priori la qualit ergonomique d'un produit commercialis valuation comparative de diffrents logiciels dans l'objectif d'un choix en terme d'utilisabilit
120
Mthodes d'valuation (I)

Deux aspects dans l'valuation : Utilit

capacit fonctionnelle performances systme qualit d'assistance facilit d'apprentissage facilit d'utilisation qualit de documentation
121
Utilisabilit

Mthodes d'valuation (II)
Qualit ergonomique proprits intrinsques

cohrence interne de la conception reprsentation externe (disposition spatiale et choix) reprsentation interne (langage de commande, ) adquation la tche adquation l'utilisateur
proprits externes

122
Mthodes d'valuation (III)
Variables utilises par l'valuation 1 mesure de performances

taux d'erreur nombre de tches ralises sous contrainte temporelle dure d'excution d'une tche dure d'apprentissage demandes d'aide dure de lecture de la documentation fonctions inutilises
123
Mthodes d'valuation (IV)

Variables utilises par l'valuation 2
variables subjectives : opinions et attitudes
confort d'usage facilit d'apprentissage esthtique dcision d'achat suggestions et prfrence
124
Mthodes d'valuation (V)

Schma de principe d'une valuation
Objet valu Comparaison Modle de rfrence
Dimensions de l'valuation
Techniques de recueil
Variables cible
Approches empiriques
Diagnostic d'usage
Interface
dveloppement d'un nouveau dispositif
Tests de conception
version i Qualit d'un produit fini
Amnagements Performances d'utilisation
Amnagements
Evaluations itratives
Banc d'essai
Rsultats
Rsultats
126
Approches analytiques
Evaluation comparative Banc d'essai
Contrle de qualit IHM 1 IHM
IHM 2 Modle de l'interface IHM 3
Interaction HommeMesure d'utilit Machine
e t "d'utilisabilit"
127
Limites de l'ergonomie
Une activit "d'experts" Non oriente Informatique: Oriente Tches

Une Application est un domaine trop vaste pour une tude ergonomique complte
Ncessit de modles de l'utilisateur

On ne sait pas vraiment faire
Approche non constructive:

Ne donne pas solutions, permet de vrifier des proprits
128
Evaluation des Interfaces
A quoi bon valuer ?
Avant la conception
Avant dinvestir dans un projet coteux, on a besoin de prouver sa viabilit

Dvelopper et tester rapidement des alternatives de conception Adquation du systme propos la tche de lutilisateur Identification des problmes Suggestions damlioration en provenance de lutilisateur Vrifier que le couple Utilisateur / Systme atteint les niveaux de performances spcifis lors de la spcification initiale du systme
Conception prliminaire
Conception itrative (prototypage)

Tests dacceptation
130
Deux approches dvaluation
Lapproche Naturaliste
Evaluer le systme dans des conditions aussi proches que possible de la ralit

Tche de lutilisateur Environnement de travail (bruit, stress, interruptions, etc.)
Lapproche Exprimentale

Etudier une ou plusieurs variables indpendantes

Identifier les effets sur dautres variables dpendantes Gnralisation des situations relles
Compromis Naturaliste / Exprimental

Prcision et contrle direct sur les conditions exprimentales
131
Fiabilit des rsultats

Obtiendrait-on le mme rsultat si le test tait rpt ?
Problme des diffrences individuelles

Le meilleur utilisateur est 10x plus rapide que le moins bon Les 25% meilleurs sont ~2x plus rapides que les 25% moins bons Tester un nombre raisonnable dutilisateurs Fournir des intervalles de confiance statistiques
Solutions partielles

Le temps moyen pour accomplir la tche X est de 4,5 0,2 minutes avec 95% de confiance signifie Il y a 95% de chance que la moyenne soit entre 4,3 et 4,7 minutes et 5% de chances quelle soit en dehors de cet intervalle
132
Validit des rsultats

Le rsultat a-t-il une validit quelconque lextrieur du labo ?

Les sujets du test sont atypiques Les tches ne correspondent pas aux tches relles Lenvironnement physique est diffrent Influences sociales diffrentes
Motivation vis vis de lexprimentateur et vis vis du boss
133
Evaluation Qualitative
Produisent une description des problmes
En gnral sous forme non-numrique
Rsultats ventuellement subjectifs Mthodes dvaluation qualitative

Introspection Observation directe Interviews et questionnaires Evaluation continue
134
Observation directe
Lvaluateur observe et enregistre les utilisateurs qui interagissent avec le systme En laboratoire
Lutilisateur doit accomplir un ensemble de tches prdtermines Usability labs, spcialement instruments pour lobservation Lutilisateur poursuit son travail habituel
En situation relle
Une trs bonne mthode pour identifier les problmes majeurs dinteraction
135
Trois approches dobservation
Observation simple
La tche est dcrite au sujet, lvaluateur nintervient en aucune manire

Les sujets dcrit en continu ce quil fait ou pense

Think Aloud (penser haute voix)
Ce quil croient tre en train de se passer Pourquoi ils excutent telle ou telle action Ce quils essaient de faire
Mthode trs utilise dans lindustrie Problmes

Inconfortable pour le sujet Peut altrer lexcution de la tche (ex: dcrire le dtail de la frappe clavier pendant quon frappe)
136
Trois approches ... (suite)
Interaction constructive / Co-Apprentissage
Deux personnes travaillent ensemble la tche La conversation est enregistre comme pour le think-aloud Sujets :
un coach comptent (mais pas le concepteur ni lvaluateur lui-mme) et un sujet naf Le sujet naf utilise linterface
Le sujet naf pose des questions et le coach lui rpond Avantages

Souvent proche dune situation relle Evite les blocages complets du sujet
137
Techniques denregistrement
Papier / Crayon

Bon march mais lent ... Prvoir des codages et des tables dvnements possibles
Intressant pour le think aloud Difficile de mettre en correspondance avec les actions Une camra pour le sujet, une pour lcran Un permet le test rtrospectif : lutilisateur commente ses actions Le code du prototype est instrument pour enregistrer les actions de lutilisateur Produit un gros volume de donne, ncessite des moyens de traitement automatiques Peut-tre post-synchronis avec laudio / vido
Audio

Vido

Log automatique

138
Interviews et Questionnaires
Questionnaires
Ne ncessitent pas la prsence de lexprimentateur Peuvent fournir des rsultats quantifiables Peuvent atteindre une large audience (Email) Prparation coteuse, mais exploitation des rsultats bon march et automatisable
139
Evaluation par Questionnaires
Etablir lobjectif du questionnaire

Quelle information recherche-t-on ? Comment les rsultats seront-ils analyss ? Que fera-t-on des rsultats danalyse ? Quel age avez-vous ?
typique : chantillon alatoire de 50 1000 utilisateurs du produit
Ne pas poser de questions inutiles !
Dterminer le type daudience recherch
Dterminer comment distribuer le questionnaire et collecter les rsultats
140
Styles de questions
Questions gnrales
objectif : tablir le background du sujet et le placer lintrieur dune population typique
En moyenne, combien de temps passez vous sur ce systme par semaine ? Moins dune heure De 1 4 heures De 4 10 heures Plus de 10 heures
Questions ouvertes
objectif : obtenir des opinions non sollicites

Utile pour obtenir des informations subjectives Difficile analyser et classifier

141
Pouvez-vous suggrer des amliorations cette interface ?
Styles de question (suite)
Questions fermes
Restreindre les choix quelques alternatives Facile analyser, mais fastidieux pour le sujet Vous utilisez un ordinateurrponses difficiles analyser Attention aux au travail : q Souvent q Parfois q Jamais
Vous utilisez un ordinateur au travail : q Plus de 4 heures par jour q Entre 2 et 4 heures par jour q Entre 1 et 2 heures par jour q Moins d1 heure par jour
142
Styles de questions (suite)
Questions scalaires
Lutilisateur doit juger sur une chelle numrique Lchelle correspond laccord/dsaccord de lutilisateur sur une lcran sont Les caractresproposition :
Faciles lire...........................................Difficiles lire 1 2 3 4 5
Questions choix multiples
Quels types de logiciels utilisez-vous (plusieurs choix autoriss) : q Traitement de textes q Tableur q Base de donnes q Compilateurs
Styles de questions (suite)
Questions de classement hirarchique
Utiles pour dterminer les prfrences
Classer les modes de dclenchement dune commande par ordre de prfrence (1: le plus utile, 2: moins utile..., 0 si non utilis) ____Ligne de Commande ____Choix dans un menu ____Equivalent clavier ____Manipulation directe
144
Evaluation Quantitative
Collecte de donnes dutilisation

Frquence dappel du menu daide Frquence dutilisation de diffrents modules du systme Nombre et localisation des erreurs Temps ncessaire laccomplissement dune tche
Mthode exprimentale
145
La mthode exprimentale
La mthode scientifique classique
Formuler une hypothse claire et testable
Il ny a pas de diffrence sur le nombre de caries dentaires entre les enfants utilisant le dentifrice X et le dentifrice Y Il ny a pas de diffrence entre le gestionnaire de programme de Windows 3.11 et le Menu Dmarrer de Windows95 en ce qui concerne le temps moyen de dmarrage dun programme
146
Mthode exprimentale (suite)
Choisir des variables indpendantes que lon va faire varier
Exprience du dentifrice :

Utilisation de la marque X ou Y Age < 10 ou >= 10 Gestionnaire de programme ou menu Dmarrer Nombre de programmes accessibles Structuration en groupes / Sous-menus Type dutilisateur (novice, expriment)
147
Exprience du dmarrage dun programme

Choix des variables dpendantes que lon va mesurer
Exprience du dentifrice

Frquence de brossage Nombre de caries Temps dexcution Nombre derreurs Nombre dchecs
148
Exprience du dmarrage de programme

Choix des sujets et partage en groupes
Comment contrler la variabilit des sujets ?

Identifier les classes de sujet et en faire une variable indpendante Utiliser un nombre suffisant de sujets
Contrle des biais dexprimentation Je crois que vous aimerez bien ces menus, je les ai faits moi-mme...
149
Mthode Exprimentale (suite)
Application de mthodes statistiques aux rsultats obtenus

Analyse de donnes Corrlations entre les variables dpendantes Quelles dcisions de conception en tirer ?
Interprtation des rsultats
150
Rgles de conception
ERGONOMIE
Rgles de Conception
Aspect pratique de la conception:
Ce que doit offrir une bonne interface

Concision Cohrence Retours d'information Flexibilit Dtecter et prvenir les erreurs Autoriser le retour arrire Rduire la charge de mmorisation Protger les fonctions dangereuses
Concepts "gnriques" valables quelle que soit l'application.

152
Concision (I)
La concision repose sur l'harmonieuse combinaison du bref et de l'expressif (viter les sorties - rduire les actions) Raccourcis Claviers pour les commandes
plusieurs faons possibles d'obtenir le mme rsultat.
Macro commandes (Mta interface)
Enregistrer une suite d'actions de l'utilisateur pour pouvoir la refaire automatiquement
Valeurs par dfaut - Actions par dfaut

"Deviner" l'intention de l'utilisateur en lui proposant une valeur possible (paramtres) ou l'action la plus courante interfaces adaptatives + importance du retour d'information.
153
Concision (II)
Pour obtenir une bonne concision:
Assurer la meilleure correspondance possible entre la nature des objets, leur apparence et leur manipulation Exemple : Dfinition de schmas relationnels (4me dimension)
Clients Socit Nom Prnom Tlph.

Socits
Lien Adresse relationnel Ville ralis par un "drag"CA
Nom
Un clicsur l'entete fait apparaitre les crans associs aux socits
Un clicdans le contenu permet de modifier la liste des attributs 154
Cohrence (I)
Choix d'une mtaphore d'interaction : le maniement de l'interface doit obir des rgles prcises, qui peuvent se dduire d'une analogie avec un autre environnement. Intra Applications : Dans une mme application, la mme action dans deux contextes diffrents doit avoir le mme effet sur les objets manipuls. Inter Applications : Des "GuideLines" sont dits par les constructeurs: ils dfinissent la manire de raliser les oprations de base, sur toutes les applications utilisant leur plateforme.
155
Cohrence (II)
Cohrence Intra-Application :

Aspect gnral de l'interface : mme apparence au objets de mme nature dialogue et zones de saisies : mme position pour tous les objets de rle identique
Zone du titre
Titre
Zone des donnes
Zone des actions immdiates
OK
Annuler
156
Cohrence (III)
Par rapport l'utilisateur et non par rapport aux fonctions de l'application
Planification hirarchique
Logique d'utilisation versus logique de fonctionnement
157
Retours d'information(I)
Un retour d'information est
une raction du systme une action de l'utilisateur une expression de sortie dont l'interprtation permet

d'valuer la situation de la comparer au but recherch de poursuivre ou de modifier le plan
But :

rassurer rduire la charge cognitive informer pour la dtection d'erreurs
158
Retours d'information (II)
But : permettre l'utilisateur de se situer dans le contexte de la tche en cours:

Rassurer Rduire la Charge Cognitive
Niveau lexical : forme du curseur, "trace" Niveau syntaxique : page courante de l'diteur de texte, outils et couleurs slectionnes dans un diteur de dessin Niveau smantique : Etat courant du calcul (Thermomtre)
0%
100 %
159
Retours d'informations (III)

Mise en valeur des actions par dfaut, du focus du clavier, de l'tat courant de l'interaction
Le type de bordure indique un dialogue modal
Barre clignotante
Oui
La bordure en gras indique que l'action est associe la touche "retour"
Non
Annuler
160
Flexibilit (I)
La flexibilit d'une interface dsigne sa facult d'ajustement aux variations de l'environnement et notamment de l'utilisateur Elle peut tre automatique (interface adaptative)
(l'interface contient donc une reprsentation dynamique de l'utilisateur) (l'interface contient donc une reprsentation dynamique de l'utilisateur)
Elle peut tre manuelle (interface adaptable)
161
Flexibilit (II)
Au niveau des entres:
Plusieurs choix possibles pour une mme action Ex: Menu souris et Commandes claviers Adaptabilit de l'interface
Plusieurs reprsentations de la mme information: ex: Rpertoire sous forme de liste, d'arbre, ou de grille d'icnes
Au niveau des sorties :

conflits possibles avec les rgles de cohrence

Flexibilit (III)
Exemple : reprsentation d'une liste de fichiers Icnes : identification immdiate
Liste : information exhaustive
163
Insertion dans l'environnement
Une interface est destine fonctionner dans un environnement donn:

Cohrence cohrence du systme global
Les constructeurs dfinissent des guidelines ou rgles de conduites spcifiant les comportement que doivent partager les applications utilisant ce matriel
+ de cohrence applications + faciles dvelopper : moins de choix faire, utilisation de bibliothques
Macintosh, OSF/Motif, OpenLook, IBM, PM style guide
164
Services de l'interface
Copier/Coller
Transfert d'objets d'un buffer vers le document (coller) du document vers le Buffer (copier)
Annuler/Refaire
Pour l'implantation de la manipulation lmentaire: toute action lmentaire doit pouvoir tre instantanment annule/ une fois annule, elle peut tre refaite. Granularit de l'action lmentaire laisse au choix de l'application
Import/Export de donnes
Conversion et lecture de fichiers de format standard
Services Communs (I)
Enregistrement /Chargement des documents (Interface avec le Systme d'exploitation)
Prfrences Paramtrisation Impression

166
Services Communs (II)

Aide fonctionnelle
structuration de la documentation : service Hypertexte (Microsoft word) adaptation au contexte : activation de l'aide, puis dsignation d'un objet : obtention d'une description du role de cet objet
"help balloons" sur Macintosh systme 7 (quivalents avec Motif et Windows)

Services Communs (III)

Aide contextuelle
Aide pour la question Quoi ?
(Qu'est-ce que je peux faire) (Pourquoi ne puis-je pas faire cela) (Comment faire pour faire ceci)
Aide pour la question Pourquoi pas ?
Aide pour la question Comment ?
168
Les critres ergonomiques
Les critres ergonomiques
1 - Guidage

4 - Adaptabilit

Incitation Groupement/distinction entre items Feed-back immdiat Lisibilit Brivet/concision/actions min Densit informationnelle
Flexibilit Prise en compte de lexprience utilisateur

Protection contre les erreurs Qualit des messages derreur Correction des erreurs
5 - Gestion des erreurs

2 - Charge de travail

3 - Contrle explicite
Actions explicites Contrle utilisateur
6 - Homognit/Cohrence 7 - Signifiance des codes et dnominations 8 - Compatibilit

170
Incitation (exemple +)
Options menus grises
171
Incitation (exemple - )
Pas de format de saisie
172
Groupement/distinction par la localisation

Option mal positionne
Non
Oui
173
Feedback immdiat
Non Saisie non visible

Oui
174
Lisibilit
Couleur agressive Non
Oui
175
Concision (exemple -)
La saisie des donnes est trop complexe Interaction HommeMachine
Non
176
Concision (exemple +)
Oui
177
Densit informationnelle
Non
Trop de texte trop serr

178
Actions minimales
Pas de valeur par dfaut Interaction HommeMachine
Non
Oui
179
Actions explicites
Non Pas de validation explicite
Oui
180
Contrle utilisateur
Oui
181
Flexibilit
Oui
Possibilit de paramtrer
Prise en compte exprience
Non Pas de raccourci clavier sur les boutons commande

Oui
183
Protection contre les erreurs
Oui
184
Correction des erreurs
Commande Annuler
Oui
185
Qualit des messages d erreurs
Oui
Non
Message peu dtaill

186
Signifiance des codes et dnominations
Oui
187
Homognit
Non L ordre des boutons commande est invers

Compatibilit
Non L ordre des boutons n est pas standard

189
Oui
Les rgles ergonomiques
Guides de recommandations (Vanderdonckt 94) Guide de style (CUA 91) Exemples :
Toute commande ou choix d'tat non accessible doit tre gris. Lorsqu'un bouton commande est pr-slectionn, cette pr-slection doit tre mise en vidence graphiquement.
190
qui vrifient la construction qui se dcomposent en :
qui vrifient le placement des objets graphiques indpendants
Exemple : Une barre de titre doit tre positionne en haut d'une bote ou fentre. Exemple : Les options menus d'un menu droulant doivent tre classes fonctionnellement, squentiellement, numriquement ou alphabtiquement .
ou des objets graphiques agrgs
191
qui vrifient la forme des objets.
Exemple : les titres de boite ou fentres doivent tre centrs. Exemple : une liste doit possder un libell
Exemple : Une slection par dfaut doit tre pertinente pour l'utilisateur.
qui vrifient la composition des objets.
qui vrifient le contenu smantique dun objet.
192
qui vrifient le comportement des objets et du systme.
Exemple : l'activation d'une option menu qui correspond un choix dtat du systme doit tre coch. Exemple : Toutes les options d'une barre de menu doivent ouvrir sur un menu droulant.
qui vrifient la cinmatique de linterface
193
L organisation des rgles ergonomiques
Les rgles sont instancies aux objets graphiques Les objets concerns par un mme ensemble de rgles ont t regroups en classe
La typologie : lien entre les connaissances ergonomiques et les connaissances sur l interface
194
La typologie
Commande Action sur systme Choix dtat Action
Action sur objet
Visualisation
Slection dobjet
Entre d'informations
Entre document Slection de donnes Entre donnes Saisie de donnes
Lien dhritage (est-un)

195
Utilisation de la typologie
R1 "gris" Action sur systme Commande Choix dtat R3 "coch"
R2 "mise-vidence prslection"
Bouton commande
Bouton radio
Case cocher Slection de donnes Saisie de donnes Bote de Liste Champ de saisie
Action Entre d'informations

R4 "mise en vidence action utilisateur"
Entre donnes
R5 "exist-libell"
R6 "exist-matrialisation"
196
Heuristiques de conception
Introduction
Principes de conception
Principes gnraux (Guidelines) qui guident le travail de conception Permettent dviter des erreurs frquentes de conception Permettent dvaluer une interface sur des principes gnraux, sans avoir recours lutilisateur Permettent de standardiser les interfaces, dimposer des standards
198
Un dialogue simple et naturel
Utiliser une logique dutilisation et pas de fonctionnement

Concevoir en fonction de la tche Rduction du gouffre de lexcution

Less is more Groupage logique des informations Peu de fentres et de navigation
Prsenter seulement les informations pertinentes

199
Parler le langage utilisateur
Terminologie inspire du langage de la tche, et pas du systme

Ce produit nest pas rfrenc dans le stock plutt que Foreign key not found in table T_STOCK
Prsenter linteraction du point de vue de lutilisateur

Vous venez dacheter 100 actions de la socit XYZ plutt que Nous venons de vous vendre 100 actions de la socit XYZ
Sassurer quelles sont significatives pour lutilisateur
Mnmoniques, abrviations, icnes
200
Minimiser la charge cognitive
Pallier la faible capacit de la mmoire court terme Privilgier la reconnaissance par rapport la mmoire

Menus, icnes, choix explicites Attention : Less is more ! Date de naissance : ___/___/___ (JJ/MM/AA, ex : 21/04/70) cut, copy, paste, dragn drop Utilisables pour un mot, un paragraphe, un document...
Dcrire les formats dentre
Utiliser un petit nombre de commandes gnriques

201
Cohrence
Cohrence des effets
La mme commande aura toujours les mmes effets dans des situations comparables Prdictibilit de linterface Dispositions spatiale des contrles et texte des tiquettes Apparence visuelle des contrles (ex: scrollbars)
Cohrence du langage et des graphiques

Cohrence des entres
Mme syntaxe dans lensemble du systme
202
Donner du feeback

Minimiser le gouffre de lvaluation Etre le plus spcifique possible
Enregistrement du fichier Toto dans le rpertoire bidon en cours... plutt que Enregistrement en cours...
Temps de rponse
0,1 seconde max : peru comme instantan 1 seconde max : Le dialogue nest pas interrompu, mais le dlai est peru 10 secondes : limite pour conserver lattention de lutilisateur sur le dialogue >10 secondes : Lutilisateur souhaite faire qq. chose dautre Interaction HommeMachine 203
Fournir de sorties explicites
Stratgies

Bouton Annuler pour les dialogues modaux Undo universel (retour ltat prcdent) Interrompre pour les oprations longues Quitter le programme nimporte quand Dfauts pour rinitialiser des proprits
204
Fournir des raccourcis

Adaptabilit aux utilisateurs experts Stratgies :

Acclrateurs clavier et souris Compltion automatique des commandes Touches de fonctions Rutilisation
History du systme Unix : 75% des commandes ont dj t tapes auparavant
Barre doutils personnalisable

205
Concevoir pour les erreurs
Deux types derreurs
Mistakes :
Une dcisions consciente qui conduit une action errone Comportement inconscient qui conduit une mauvaise squence dactions Frquent chez les utilisateurs expriments
Slips :
206
Types de Slips
Erreur de capture
Lactivit la plus frquente est dclenche, au lieu de celle dsire

ex : confirmer la suppression dun fichier, alors quon ne voulait pas le supprimer Prvention : au lieu de confirmer, permettre le Undo
Erreur de description
Quand deux actions possibles ont beaucoup en commun

ex : glisser un fichier dans la poubelle au lieu de la disquette Prvention : diffrencier les icnes, disposition spatiale tudie
ex: tlphoner quelquun pour lui donner un numro de chambre, et composer le numro de chambre ex: le tlphone sonne, on crie Entrez!
Erreur Data driven
Activation associative
207
Types de Slips (suite)
Perte dactivation
Oublier le but final lorsquon excute une squence dactions

ex: Quest-ce que je fais ici ? Prvention : rendre le but explicite (si le systme le connat), rendre le cheminement explicite
Erreurs de mode
Action effectue dans un contexte inadquat
ex: VI, rfrencer un fichier qui est dans un autre rpertoire, ... Prvention : minimiser les modes, rendre les modes visibles
208
Guidelines spcifiques
Dvelopps pour des styles dinterface et des applications particulires
Ex: Smith & Mosier Guidelines for designing user interface software, the MITRE corporation
Questions / Rponse Formulaires Menus Touches de fonctions Langage de commande Langage de requte Langage naturel Interfaces graphiques
209
Smith & Mosier
Entre de donnes
199 rgles couvrant lentre de donne et la rponse aux entres
ex: Data entered only once
Ensure that a user needs enter any particular data only once, and that the computer can access those data if needed thereafter for the same task or for another task Comment : ... Requiring re-entry of data would impose duplicative effort on users and increase the possibility of entry errors
210
Smith & Mosier (suite)
Data Display : 298 rgles
Ex : Necessary data displayed Ex: squences de contrle flexibles Ex : Consistent Display format Ex: Interrupt Ex: protection from computer failure
211
Sequence control : 184 rgles
Guidage de lutilisateur : 110 rgles
Data transmission : 83 rgles
Data protection : 70 rgles
Problmes
Trop de guidelines

Impossible de les connatre toutes Impossible dvaluer manuellement si une application correspond aux guidelines Possibilit dincohrences, de contradictions Il peut parfois tre utile de violer les rgles Rgles trop lies la technologie actuelle
212
Guides de style
Publis par les constructeurs dinterfaces graphiques

Apple Macintosh Motif Open Look CUA dIBM
Description du look & feel de linterface Toolkits particuliers
Imposent par dfaut un look & feel Certains toolkits sont multi look & feel (TK, Interviews)
213
Processus de dveloppement
GNIE DES SYSTMES INTERACTIFS

214
Dfinition des SI
Output
input output
Interactive System
System Input
Time
Output
User
Input
215
Cycle Cascade Court
Winston W. Royce. Managing the Development of Large Software Systems. IEEE Wescon, pp 1-9, 1970
216
Cycle de dveloppement en cascade
Winston W. Royce. Managing the Development of Large Software Systems. IEEE Wescon, pp 1-9, 1970
217
Cycle de dveloppement en V
Analyse du besoin
Dploiement
Spcification
Validation
Conception Prliminaire
Intgration
Conception dtaille
Tests Unitaires
John McDermid et Knut Ripken. Life cycle support in the ADA environment. University Press, 1984.
Codage
218
Cycle de dveloppement Evaluate alternatives itratif Identify and solve risks

Define objectives alternatives and constraints Risk analysis
Risk analysis Risk analysis AR P1
Planify analysis and life cycle Define mission
P2
Prototype 3
Operational prototype
Plan next phases
Planify integration and tests
Planify development
Specification
Design
detailled design
coding
unitary testing
insta llation integ ration Develop and verify next product
Barry W. Boehm. A Spiral Model of Software Development and Enhancement. IEEE Computer, 21(5), pp. 61-72, 1988.
219
Agile Processes Xtreme Programming
K. Schwaber and M. Beedle, Agile Software Development with SCRUM. Upper Saddle River, NJ: Prentice-Hall, 2002.
220
Extreme Programming
Kent Beck. Publisher: First Edition September 29, 1999. ISBN: 0201616416, 224 pages.
221
Why Software Projects Fail

(source Boehm 2006 invited Talk IEEE ICSE 2006) Average overrun: 89.9% on cost, 121% on schedule, with 61% of content
222
Besoins et cafards
223
Cycle de vie en toile
224
Mthodologie de Conception
Interfaces Homme Machines : Domaine pluri-disciplinaire "Science" non exacte : La conception d'une interface Relve plus du savoir-faire que d'une mthodologie prcise
=> Mthodologie approprie de conception, diffrente de celles des applications classiques

225
Conception dans la pratique

Circuits de l'information beaucoup plus complexes
Utilisateurs Client Cahier des charges Commercial Support Technique & Documentation Doc & mode d'emploi Rapports Testeurs Prototypes Consultants Conseils Analyste - chef de projet Spcifications Programmeurs
Rapports de bugs, demande d'assistance
Produit (Application)
226
Points faibles de l'organisation

Trop d'intervenants Les acteurs principaux (analyste<-> utilisateurs) sont les personnes les plus loignes du schma => essayer de rduire les circuits de l'information Les personnes les plus qualifies ont peu droit la parole et aux choix dcisifs
227
Les approches itratives

volution "En spirale" vers le produit final
Spcification
Implantation
Utilisation
Test-Evaluation
228
Prototypage - Maquetage
Prototype : diffre du produit final par le processus de conception Maquette : diffre du produit par l'chelle (taille, nombre de fonctionnalits, ) En IHM le sens de ces mots a t altr Prototype : produit qui fonctionne (des parties de chacune des couches du modle de Seeheim ont t dveloppes) Maquette : l'ensemble de la partie prsentation a t ralise mais les fonctionnalits ne sont pas mises en uvre (on voit la statique de l'interface mais pas la dynamique) 229
Approches "super-itratives"
Raliser des itrations chaque tape du processus:
Spcification
Implantation
Utilisation
Test-Evaluation
230
Prototypage Jetable
HUMAN-COMPUTER INTERACTION SECOND EDITION Dix, Finlay, Abowd and Beale
231
Prototypage Incrmental
HUMANCOMPUTER INTERACTION SECOND EDITION Dix, Finlay, Abowd and Beale
232
Prototypage basse fidlit

Partir de schmas bruts et trs simples qui exposent uniquement les problmes importants puis raffinements progressifs Dessins et maquettes "manuelles" suggrant le mode de fonctionnement sans rentrer dans les dtails de l'interface, distrayants. + efficace et + abstrait qu'un prototype Interaction constante avec les futurs utilisateurs Faire intervenir ce moment l seulement les consultants externes: graphistes, ergonomes, spcialistes du domaine Envisager des Cours de dessin, d'expression graphique.
233
Prototypage haute fidlit

-> rduire le nombre de boucles pour aller au plus vite vers l'application finale Utilisation des outils interactifs de dveloppement. Inconvnients : - lenteur des boucles d'itration - difficults dgager clairement chaque tape les problmes essentiels: -> la ralisation du prototype fait intervenir presque en mme temps les 4 phases - Les outils de prototypages imposent leur limites, parfois assez importantes
234
235
Early design
Brainstorm different representations Choose one or two representations Rough out interface style
Low fidelity paper prototypes
Task centered walkthrough and redesign Behaviour (dialogue & interaction) modelling Fine tune interface, screen design
Medium fidelity prototypes
Heuristic evaluation and redesign

Usability testing and redesign (Re) development Limited field testing Alpha/Beta tests
High fidelity prototypes
Working systems
Late design
Agile et Itratif
236
Usability design process

Requirements analysis
Elicit business objectives Contextual inquiries System goals, design criteria and usability goals Usability Design Guide
Functional description use-cases
Bengt Gransson, Enea Redina AB, version 1.7en
Usability Design in system development

User profiles
Early and continual focus on users Evaluate with users Iterative design Integrated design Driven by a usability champion a.k.a. the Usability Designer
Active user involvement

Growing software with iterative design
Analysis Refine models Usability Design Guide
Usage Scenarios Conceptual Design Mock-ups

No!
Analysis Refine models Usability Design Guide
Interaction Design
Detailed Design
Prototypes
Evaluation
No!
Evaluation
Yes
No! Yes
Evaluation Goals met? Goals met?
Goals met?
Yes
Deployment
Usability Design Guide Introduce and operate
237
Prototypage-Ralisation
Limiter au maximum le nombre des intervenants: Lorsque les spcifications sont assez claires, toute intervention extrieure ne peut que faire perdre du temps: - de personnes => moins d'incohrences dans le produit - 1 personne motive travaille mieux que 10 ensemble: tous les grands progiciels sont crit par une quipe d'au plus 4 personnes Ne pas hsiter revenir en arrire, voire zro ds le dbut: prototypes "jetables" : malgr les problmes de dlais, il est souvent plus rapide de repartir de rien en tirant profit de l'exprience acquise, que de traner des problmes de conception originaux lors de plusieurs itrations. Au bout d'une certaine tape, il est impossible de revenir en arrire => se prmunir au maximum des checs d des erreurs faites au dbut.
238
Preliminary needs
Processus itratif et squentiel
Prototype
& verification
no yes
User's evaluation
Requirements
Requirements Maintenance
adquat ?
Final System Specification Requirements Formal specifications Hi-fidelity prototype Software Architecture
Architecture design Detailed design
Validation Implementation and test Unitary tests
Coding
239
240
Conception Centre Utilisateur (norme ISO 13407)
Comment impliquer l'utilisateur dans le processus de conception ?
Insertion de l'utilisateur dans l'quipe de dveloppement Implication priodique Incohrences Incompltudes

241
Problmes

Coopration avec l'utilisateur

Techniques de "Collaborative Design": Au dpart, utilises en Scandinavie pour faire accepter l'informatisation aux syndicats des grandes entreprises. Se sont avres trs profitables. -> Les seuls vrais connaisseurs du systme, de ses limites et de ses capacits sont : - les programmeurs (+ encore que les concepteurs) - les utilisateurs Technique: Les futurs utilisateurs et les concepteurs partagent un plan de travail. Les concepteurs exposent leur projet, les utilisateurs annotent le projet, avec de petites notes, chacune relatant un point prcis qui semble poser problme.
242
User-centered systems design in practice
243
Exercice : Interface de Voiture

Faire l'interface d'utilisation d'une voiture en simulant son utilisation par un ordinateur. Il faudra reprsenter graphiquement les deux principales tches: - le pilotage (gestion des interactions temps rel) afficher les compteurs actions offertes au pilote donner du retour d'information - la navigation : on peut avoir besoin d'informations du genre (gestion de la planification long et moyen terme) proposer une route en fonction de la dure de voyage proposer une route en fonction de son taux de chargement proposer une route en fonction du dpart et de la destination communication entre vhicules - on suppose que la manipulation du volant, pdales et le levier de vitesse restent telles que offertes dans les vhicules actuels
Faites cet exercice par binme. Chacun des lments du binme est expert soit dans la tche de pilotage soit dans la tche de navigation.
244
Exercice : Aroport

Vous tes dans un avion en train datterrir Vous avez une correspondance trs courte Vous avez faim Dterminez un systme de distribution de nourriture permettant dobtenir la nourriture le + rapidement possible
245
Mise en uvre
Cration d'un modle conceptuel: - dfinir les objets utiliss - les oprations effectuer - les concepts et les enchanements logiques Reprsentation du Contrle Choix et Spcification du Modle d'Interaction -> utiliser les dessins et schmas sur papier pour - la reprsentation des donnes - la formulation des actions -> penser aux rgles de cohrence et concision.
246
DU DESIGN LA CONSTRUCTION
Modle de Seeheim 83
Utilisateur
Composant Presentation
Contrleur du Dialogue
Interface du noyau fonctionnel
Noyau fonctionnel
248
Abstract rendering
Modle Architectural
Abstract Events
Transducers
Concrete rendering
rendering
events 249
Conception des IHM

Il faut concevoir les trois parties du modle de Seeheim: La prsentation : ce que l'utilisateur voit de l'application
Le dialogue :
qu'est-ce que l'utilisateur a la possibilit de faire comment l'utilisateur agit sur la prsentation l'influence de son action sur ce qu'il pourra faire ensuite Le noyau fonctionnel : les fonctions ralises par l'application les donnes manipules par l'application 250
Fonctionnement des systmes par vnements
Structure d'une appli. classique

A tout instant l'application est en attente d'une entre de l'utilisateur.
Dbut choix = '1'; Tantque choix <> '9' faire affiche-menu; lire(choix); case choix of 1 : ajouter; 2 : modifier; 3 : supprimer; 9 : Quitter; Fin Case FintTantque Fin
Dans les autres cas elle fait des calculs et l'utilisateur doit attendre
Procdure Ajouter; dbut rep = 'o'; Tantque rep <> 'n'; dessin-cran; lire(nom); lire(prenom); ... crire('voulez-vous continuer ?'); lire(rep) FinTantque Fin
252
Fonctionnement classique
Lire une entree
Lire une entre Ef f ectuer un traitement
Effectuer un traitement.
sortie ?
Sortie ?
Fin
253
Structure appli. par evt.

La boucle d'vnement (main event loop) : reoit chaque vnement produit par l'utilisateur Les gestionnaires d'vnements : sont des procdures associes chaque couple (widget, action sur un widget) et appeles par la main event loop ds que une action a t ralise.
Tous les event handlers ont la mme structure : EH1; Prcondition; Action; Modification de l'tat du dialogue; Rtroaction graphique; Fin EH1;
254
Event-based Functioning
At startup
Register Event Handlers EH Registration Event Queue Get next event Call Window Manager Application Finished Even Handler 1
At runtime
Dispatch event
Even Handler 2
Ack received
Wait for next event
States
Even Handler n
255
Comportement bas sur les tats
256
Deuxime Couche
Principe Tltubbies Principe Gillette
Excution typique dun programme

Non-interactive Excution linaire Processus dautomatisation (automatique) Ne prends pas en compte les capacits de lhumain versus ordinateur
program:
main() { code; code; code; code; code; code; code; code; code; code; code; code; }
Programme Interactif choix program: multiples
Lutilisateur choisit les options Excution non-linaire (branching) Ordre imprdictible Systme arrt sur instruction de lecture Possibilit de continuer
main() { decl data storage; initialization code; loop {
show options; read(choice); switch(choice) { choice1: code; choice2: code; }
Interface Dirige par lutilisateur
GUI program:
main() { decl data storage; initialization code; create GUI; register callbacks; } main event loop;
Lutilisateur dclenche des commandes Excution non linaire Ordre non prdictible La plupart du temps le systme ne fait rien Les procdure de gestion dvnements
Callback1() //button1 press { code; } Callback2() //button2 press { code; }
mouse click
App1 GUI Events App2

OK OK Cancel Cancel
App2 code: App1

OKbtn_click() { do stuff; } CancelBtn_click() { do different stuff; } App2Form_click() { do other stuff; }
Window System
input device event loop which app?
event loop
App2
event loop which control?
Fonctionnement

GUI App
Class{ decl data storage; constructor(){ initialization code; create GUI controls; register callbacks; } main(){ Run(new ) } callback1(){ do stuff; } callback2(){ do stuff; }
delegates = callbacks Java: Listeners
Evnments dans Windows
263
Etats et vnements
1- le monde rel volue de faon continue 2- les variables reprsentent des variations par pallier 3- les vnements peuvent avoir une origine priodique (regarder sa montre toutes les 30s) 4- les vnements arrivent et ont un impact sur ltat 264
Modlisation
GNIE DES SYSTMES INTERACTIFS

265
Une dmarche de conception

Une dmarche de conception Une notation les automates Un processus proche de E/A Un cheminement vers le code de l'application
266
Une dmarche de conception

1) 2) 3) 4) 5)
liste des vnements liste des actions automate de comportement Matrice etats/vnements Event-handlers
267
Avantages

Description complte et non ambigu Analyse de proprits

Comportementales D'utilisabilit
Gnration de code Il est plus facile de prouver que de tester
268
Les Automates Etendus
Un automate tendu est un automate tats pouvant possder :

des vnements dclenchant des actions des conditions de dclenchement des actions des registres (variables numriques) effectuer des actions sur les registres (affectation)
Les vnements, les conditions et les actions sont reprsents sur les arcs sous la forme suivante : Ev3 / Cond3
A3
E1 Ev1 / Cond1 A1
E2
E3 Ev2 / Cond2 269 A2
Les Automates Etendus (2)

Exemple : un systme simple E = {E1, E2, E3, E4}, s0 = E1 Ev = {Ev1, Ev2}, A = {A1, A2, A3, A4}, g : E x Ev -> E, g(E1,Ev1) = g(E3,Ev2) = E2, g(E2,Ev1) = g(E4,Ev2) = E3, g(E3,Ev1) = E4, g(E2,Ev2) = E1.
f : E x Ev -> A, f(E1,Ev1) = A1, f(E2,Ev1) = f(E3,Ev1) = A2, f(E4,Ev2) = f(E3,Ev2) = A3, f(E2,Ev2) = A4
Ev2 A4 E1 Ev1 A1 E2
Ev2 A3 Ev1 A2 E3
Ev2 A3 Ev1 A2 E4
270
Exemple par vnement

V = {v}, v0 = 1 and v : integer
Handler Ev1 is begin Case v of 1 : A1; v:=2; ev1 actif ev2 actif 2 : A2; v:=3; ev1 actif ev2 actif 3 : A2; v:=4; ev1 inactif ev2 actif 4 : 'Interdit Endcase EndHandler;
Handler Ev2 is begin Case v of 1 : 'Interdit 2 : A4; v:=1; ev1 actif ev2 inactif 3 : A3; v:=2; ev1 actif ev2 actif 4 : A3; v:=3; ev1 actif ev2 actif Endcase EndHandler;
271
Tableau reccapitulatif
Protocole de communication (appli. - utilisateur) Nature de l'appli. Application = client Utilisateur = serveur Application = serveur Utilisateur = client
Transformationnelle
Inter(r)active
Contrle
Impratif
Dclaratif
Etat du dialogue (de l'interaction)
Historique
Valeur des variables d'tat
272
Des Rseaux de Petri ???

EV1 A1 2 P1 P2 2 A4 T4 EV2 A3 T3 P3 T1 A2 T2
273
Exemple: les 4 boutons
Spcification du comportement dune application avec 4 boutons cycliques
Application
274
Automate Exercice 1
4 vnements CB1, CB2, CB3, CB4
CB1
E1 E2
CB4
E4
CB2 CB3
E3
275
Exemple: les 4 boutons cycliques
Spcification du comportement dune application avec 4 boutons cycliques toujours actifs
276
Automate Exercice 1 (2/3)

4 vnements CB1, CB2, CB3, CB4 4 actions (chgt apparence boutons)

CB2
CB3 CB4
E1
CB1 A1
CB1
E2
CB3 CB4
CB1
CB2
CB4 A4
E4
CB2 A2
CB3 A3
E3
CB1
CB2 277
CB3
CB4
Exemple: les 4 boutons cycliques (3/3)
Spcification du comportement dune application avec 4 boutons cycliques toujours actifs et en ajoutant un raccourci (dans ltat o B3 est en gras, on peut cliquer sur B2 ce qui conduit dans ltat initial)
278
Automate Exercice 1 (3/3)

4 vnements CB1, CB2, CB3, CB4 4 actions (chgt apparence boutons)

CB2
CB3 CB4
E1
CB1 A1
CB1
E2
CB3 CB4
CB1
CB2
CB4 A4
E4
CB2 CB2 A4 A2
CB3 A3
E3
CB1
CB4 279
CB3
Exemple: les 4 boutons
Spcification du comportement dune application avec 4 boutons alternatifs
Application
Ou pas
280
Automate Exercice 2
4 vnements CB1, CB2, CB3, CB4

CB1
E2
CB4
CB3
CB3
E5
CB2
E4
CB1
E1
CB2
E3
CB1
CB4
E6
CB2
CB3
CB4
281
Et le Space, et le tab
CB4
tab CB1 CB2 E2 CB1 Space Space Space E1 tab E7 Space CB3 CB3 E5
Space
E4 Space E6 CB4
Space Space Space CB2 E3 CB1 Space CB4 CB2 tab E8 tab CB3
282
283
Boucle d'affichage
2 boutons (start, stop) 1 compteur L'utilisateur doit pouvoir interrompre tout instant
Votre Appli
Application
Ou encore
284
Automate Compteur
A1: For I=1 to 30000 label1.Text=I Next I A0 A2: Label1.Text="Pouf" A0:

Label1.Text= 0
CStart A1
Init Compte
CStop A2 285
Automate Compteur Affich
A1: For I=1 to 30000 label.Text=I Label.refresh Next I

CStart A1
Init Compte
A2: Label.Text="Pouf"
CStop A2 286
Cstart
Exercice compteur+1
3 boutons On ne peut cliquer sur +1 que 3 fois Clic sur Stop affiche "Pouf"
C+1 C+1 C+1
Cstop
C+1
Application
287
Exercice compteur+1
CStart A1
Init E1
C+1 A3
E2
C+1 A3
E3
C+1 A3
E4
CStop A2

C+1 'ne rien faire
A1: label1.caption=0 A2: label1.caption= "pouf" A3: label1.caption=val(label1.caption)+1
288
Compteur+1 repliage
CStart A1
Init E1
C+1 A3
E1
C+1 A3
E1
C+1 A3
E1
CStop A2
C+1 A2
Etats repliables
289
Compteur+1 repliage
CStart A1
Init E1
CStop A2 C+1 'rien
C+1 A3
Indterminisme de l'automate
290
Compteur+1 dterminisme
n=0 A1
Init
CStart A1 n=0
E1
Rajout d'une variable d'tat lies l'tat E1 C+1/n<3 Systmatiquement A3 mise n++ jour chaque changement d'tat Ajout de conditions pour lever l'indterminisme 291
CStop A2 n=0
C+1/n=>3 'rien faire n=0
Matrice tats/vnements
CStart CStop C+1
Form_load() A1 n=0 etat="Init"
Init
A1 n=0 etat="E1"
'Interdit
'Interdit
'Interdit
E1
A2 n=0 etat="Init"
Si n<3 alors A3 n=n+1 tat="E1" Sinon 'rien faire n=0 etat="Init" FinSi
292
Exercice Timer (sujet)

On enlve le bouton +1 On rajoute un timer

Proprits "interval" et "Enabled" Evnement "Timer"
293
Exercice Timer (automate)
Evnements : Cstart, Cstop, Timer

CStart A1 n=0
Init E1
Timer/n<3 A3 n++
CStop A2 n=0
Timer/n>=3 A2 n=0
294
Matrice tats/vnements
CStart CStop Timer
Form_load() A1 n=0 etat="Init"
Init
A1 n=0 etat="E1"
'Interdit
'Interdit
'Interdit
E1
A2 n=0 etat="Init"
Si n<3 alors A3 n=n+1 tat="E1" Sinon 'rien faire n=0 etat="Init" FinSi
295
Exercice Timer (code)
On enlve le bouton +1 On rajoute un timer On donne le "name" du bouton comme "name" au timer On dplace le code de l'event handler de +1 vers le timer On dfinit la priode du timer Augmenter la limite 30
296
Avance - Recule

Possibilit d'incrmenter De dcrmenter D'arrter l'excution
297
Compteur Avance-Recule
CStart A1 n=0
CStop A2 n=0
Init
Timer/n<5 A3 n++
Avance A1: Label1.caption=0 A2: Label1.caption="Pouf"
Timer/n>=5 A2 n=0
Timer/n<=0 A2 n=0
ClicArr n=n
ClicAv n=n
A3: label1.caption=n
CStop A2 n=0
Recule
Timer/n>0 A3 n--
298
Exemple: le feu de circulation
Spcification du comportement dune application de gestion de feu de circulation Utilisation des composants Shape (excution)

Exemple Excution
Utilisation des composants Shape (cration)

Shape1.fillstyle=0 opaque Shape1.fillstyle=1 transparent
Shape1.fillcolor choisir la couleur dans la palette Shape1.shape choisir circle dans la palette
299
Utilisation des modes pour grer la complexit

Marche Panne
Arrt
Arrt Marche
Arrt
Marche
Panne
300

Marche
R Arrt T1 O T2 V T3
Panne Arrt
Arrt
Marche
Panne
301

Marche
R A T1 T3 O T2 V
Panne Arrt
Arrt
Marche
Panne
302

Marche
R A T1 T3 O T2 V OA
Panne Arrt
T5
Arrt
Marche
T4
OE
303
Spcification du comportement dune application de gestion de feu de circulation

CM A1 CM A1
Form_Load A4
R
CA A4 CA A4 T1 A3
CA A4
A1 : A2 :
CA A4
CM CP A2 A1 CP T3 OA A2 A1 T5 CP A E A2 4 T2 A2 CA A4
T4 A2
A3 :
A4 :
allumer Rouge teindre Orange teindre Vert teindre Rouge allumer Orange teindre Vert teindre Rouge teindre Orange allumer Vert teindre Rouge teindre Orange teindre Vert
304
Exemple: le feu de circulation: Fiabilit-utilisabilit-modifiabilit
Comment vrifier la fiabilit de lapplication (jeux de test) Ex. la 4ime fois que je clique sur Marche tout sarrte Exemple Marche Pas Comment valider lutilisabilit (nombre dtats internes-nombres dtats externes) Comment tester la modifiabilit
305
Exemple: le feu de circulation Britanique
Fonctionnement diffrent

Rouge et orange allums Avant le vert allum Aprs le rouge allum seul
Exemple Excution
306
Pas de modification sur les modes Modification du mode Marche Rajout dune action (allumer Rouge et Orange)
Mode Marche
R
Marche
Arrt
Panne
Arrt
RO
Arrt
Marche
Marche
Panne V
307
Exemple: le feu de circulation Autrichien
Fonctionnement diffrent

Rouge et orange allums Avant le vert allum Aprs le rouge allum seul Avant lorange le vert clignote 4 fois
Exemple Excution
308
Un nouveau sous-mode (vert clignotant) Modification du mode Marche Mode Marche Changements de mode temporiss R
CPanne
CMarche
Arrt
CArrt
RO
Panne Marche
CArrt
CMarche
VertCli V
309
Un nouveau sous-mode (vert clignotant) Modification du mode Marche Mode Marche Changements de mode temporiss R
CPanne CArrt T1 RO Panne Marche CMarche O
CMarche Arrt CArrt
T3
T2

T7
VE T8 T7
Indterminisme T7 Autre possibilit dplier les 4
V T6
VA
310
Automate non repli

Mode Marche
R T1 RO T3 T15 VE VA VE VA VE
Les timers sont tous diffrents donc paramtrables Si les dures sont gales (comme les actions sont gales) on peut faire avec 1 ou 2 timers (si dures allum et teint diffrentes)
T14 T13 T12 T11
T10 VA
O T2
T6
VE
T7
VA
T8
VE
T9
311

A1 :
Form_Load A4
CM A1 T1 CA A3 A5 CA T2 CA A5 A4 A5
CA A5
CA A5
CM A1
R
CA A5
A2 :
A3 : A4 :
RO
T4 A1
CM A1
CP A2
CP CP A2 A2 CP A2 T5 A 5
OA OE
T6 A2 A5 :
allumer Rouge teindre Orange teindre Vert teindre Rouge allumer Orange teindre Vert allumer Rouge allumer Orange teindre Vert teindre Rouge teindre Orange allumer Vert teindre Rouge teindre Orange teindre Vert
CA A5
CA A5
V T7 A5;n=0 VE T3/n<4 A4; n++ VA
T3/n>=4 A2;n=0 T8 A5;n
CP A2 CP A2
Partout n=0 312
Rubber Banding

Dessin de ligne interactif Bouton enfonc commence le dessin Dplacement dessine

Line (x1,y1)-(x2,y2), RGB (0,0,0) Line (x1,y1)-(x2,y2), RGB (255,0,0) Redessiner une ligne efface la ligne
'noir 'rouge
Relcher le bouton termine le trait

313
Rubber Banding
Form_Load 'rien MouseMove 'rien
Init
MouseDown A1
E1
MouseMove A3
MouseUp A2
314
Rubber Banding (autre)

Form_Load 'rien MouseDown A1
Init
MouseMove A3
E1 E2
MouseUp rien
MouseMove A4
MouseMove 'rien
MouseUp A2 A3 et A4 doivent tre diffrentes A3: tracer un trait A4: effacer un trait ET tracer un trait 315
Matrice Etats/Evnements
MouseMove etat="Init" rien faire MouseUp 'Impossible MouseDown Form_load() Init etat="E1" A1 etat="Init" rien faire
E1
etat="E1" A3
etat="Init" Impossible
A2
316
Application de dessin (sujet)

Faire une application qui permet de dessiner des lignes, cercles, rectangles, Fonctions

Circle (centrex,centrey), rayon Line (x1,y1)-(x2,y2), RGB (0,0,0), B (trace un rectangle englobant la ligne)
Dissocier le code de prsentation des event handlers Grer les modes de l'application
317
Application de dessin (calcul du rayon)
Circle (centrex,centrey), rayon calcul du rayon: Sqr((x1-x2)+(y1-y2))

Longueur = abs(x-x1)=b x1,y1 x,y
Longueur = abs(y-y2)=a x2,y2
x3,y3 rayon=c 318
Application de dessin (modes)

ClicLigne ClicCercle
Attention au mode Trace (on ne veut pas que lutilisateur puisse cliquer sur les boutons)
ClicRectangle
Modes
MMove
ClicLigne Ligne Cercle
ClicCercle Rectangle
MDown
Idle
MUp
Trace
MMove
ClicRectangle
319
Application de dessin (comportement)

ClicRectangle rien MouseMove 'rien MouseMove ClicCircle 'rien rien IM2
ClicRectangle rien IM3
MouseMove 'rien
IM1 MouseDown A1
ClicCircle ClicLine rien rien MouseDown MouseUp MouseUp A1 A3 A2 TM2 MouseMove circle
MouseDown MouseUp A1 A4 TM3 MouseMove rectangle
TM1 MouseMove line
ClicLine rien
320
La matrice tats/vnements
Circle IM1
Etat="IM2" rien
Line
'interdit
Rect
Etat="IM3" rien
MD
Etat="TM1" A1
MU
'Impossible
MM
'rien Etat="IM1"
TM1
IM2
'interdit
'interdit
'interdit
'Impossible
Etat="IM1" A2
'Impossible
Etat="TM1" Line
'rien Etat="IM1"
'interdit
Etat="IM1" rien
Etat="IM3" rien
Etat="TM2" A1
TM2
IM3 TM3
'interdit
'interdit
'interdit
'Impossible
Etat="IM2" A3
'Impossible
Etat="TM2" circle
'rien Etat="IM1" Etat="TM3" rectangle
Etat="IM2" rien 'interdit
Etat="IM1" rien 'interdit
'interdit
Etat="TM3" A1 'Impossible
'interdit
Etat="IM3" A4
321
Application de dessin
Autre mise en uvre: design pattern state as object VB ne permet pas l'utilisation de pointeurs de fonctions
On va le simuler par l'utilisation d'une variable Exploiter cette variable dans la partie prsentation (avec un case)
Le comportement reste le mme

322
Modles
Un modle pour dcrire le comportement de la palette d'outils Un modle pour dcrire le comportement du dessin
323
Comportements
MouseDown A1 MouseMove 'rien Dessin
Init E1
MouseMove A3
MouseUp A2
ClicRectangle ClicCercle ClicLigne
ClicCercle Rect
Cercle ClicRectangl e ClicLigne
Ligne
Palette d'outils
324
Polyline

Rubber banding Plusieurs points Clic droit enlve un point Clic gauche rajoute un point Espace termine le dessin (en rouge)
325
Polyline (solution)
Attention aux vnements (diffrents des event handlers) Attention "clics" et pas autre chose Nombre d'tats illimits => repliage de l'automate
326
Polyline (solution)
4 vnements

Clic bouton droit Clic bouton gauche Espace Mouse_move
327
Polyline Automate repli

MouseMove A3 n=n
MouseMove 'rien n=0 n=0 ClickBtnG A1 n=1 UnPoint Espace A2 n=0 ClickBtnG A1 n++ ClickBtnG A1 n++ MouseMove A3 n=n Plusieurs
Init
ClickBtnD 'rien n=0 Espace 'rien n=0
ClickBtnD / n<=2 A1 n=1 ClickBtnD / n>2 ClickBtnD A1 rien n-n=n Espace A2 n=0
328
Application de dessin (modification)
Faire une application qui permet de dessiner des lignes, cercles, rectangles, et maintenant on rajoute la polyligne et on a la possibilit de modifier les couleurs On peut changer l'interface

Avoir des menus Rajouter des toolbars

329
Application Formulaire (Manipulation indirecte)

On se propose de concevoir l'interface d'une application gnrique permettant de manipuler les enregistrements stocks dans une table relationnelle. Malgr la grande simplicit des fonctions assurer (ajout, suppression et modification des enregistrements dans la table), on constate que cet exemple offre une composante "structure du dialogue" relativement forte.
Spcifications informelles
L'utilisateur a la possibilit d'effectuer les actions suivantes : Ajouter un enregistrement la table, Supprimer un enregistrement, Slctionner un enregistrement parmi ceux de la table, Modifier les attributs de l'enregistrement slectionn, Quitter l'application. Certaines contraintes sont fixes sur le droulement de l'application : Il est interdit de slectionner ou de supprimer un enregistrement de la table si l'utilisateur est en train d'en modifier un autre, Il est possible de quitter l'application tout moment, sauf quand l'utilisateur a effectu des modifications non valides sur l'enregistrement en cours. 330
Interface Noyau Fonctionnel

On suppose que le noyau fonctionnel offre les primitives suivantes: Function Combien: integer; renvoie le nombre denregistrements actuellement contenus dans la table. Function Valeurs: Enregistrement; renvoie un enregistrement renseign avec les valeurs affiches dans la fentre. Function Correct(T: Enregistrement) : Boolean; renvoie vrai si lenregistrement respecte les contraintes dintgrit dfinies pour la table. Procedure Ajouter(T: Enregistrement); Insre lenregistrement dans la table. Met jour le contenu de la zone de dfilement pour reflter cet ajout. Procedure Supprimer; Supprime lenregistrement slectionn. Met jour le contenu de la zone de dfilement pour reflter cet ajout. Procedure Remplacer(T: Enregistrement); Remplace lenregistrement slectionn par T; Function Slectionn : Enregistrement; renvoie lenregistrement actuellement slectionn dans la zone de dfilement;
Spcification de la partie presentation

Procedure Afficher(T: Enregistrement); Provoque laffichage de lenregistrement dans la zone ddition. Procedure Recuperer(T: Enregistrement); Met dans T les valeurs de lenregistrement dans la zone ddition.
331
Evnements traiter

ClickAdd : bouton Ajouter ClickSuppr : bouton Supprimer ClickRet: bouton Rtablir ClickRemp: bouton Remplacer ClickList : choix dun lment dans la liste ClickEdit: Modification dun lment quelconque dans la zone ddition ClickQuit : Case de fermeture de la fentre
332
Automate de dialogue

Registre n : integer := 0; // Nombre denregistrements dans la table

ClickAdd / Correct ClickList Dessine ClickAdd / Correct n=n+1 ClickEdit Affich ClickSuppr / n=1 n=0 ClickSuppr/n>0 n=n-1 ClickRet / Correct ClickRemp / Correct Modifi ClickEdit n=1 Vide
ClickEdit
ClickQuit ClickQuit Quit
333
Composants volus
334
Pie Menu
Valeur
suivant
Si lutilisateur clique sur le bouton droit de la souris, un menu circulaire apparat. Lutilisateur doit alors se dplacer sur litem quil souhaite. Une fois sur litem voulu, il peut alors cliquer avec le bouton gauche et laction associe litem est alors active
suivant
prcdent
supprimer
modifier
335
Automate Pie Menu (1/2)
3 vnements CD (clic droit), CG (clic gauche), MM (mouse move) 4 actions AffMenu, EffMenu, Commande, Highlight 2 prconditions inMenu, outMenu
336
Automate Pie Menu (2/2)

CG / outMenu Nothing EffMenu
Idle
CD AffMenu
Menu
MM Highlight
CG / inMenu Commande EffMenu
337
Marking Menu
Si lutilisateur presse le bouton droit de la souris, et attend plus de 300 ms avec le bouton droit enfonc, un menu circulaire apparat (cf. Figure a). Lutilisateur doit alors se dplacer sur litem quil souhaite sans relcher le bouton. Une fois sur litem voulu, il peut alors relcher le bouton et laction associe litem est alors active Si lutilisateur connat la position sur le menu circulaire de litem quil souhaite saisir, il nest pas oblig dattendre les 300 millisecondes ncessaire laffichage du menu (cf. Figure B). Il na qu raliser un geste dans la direction de litem slectionner : i.e. il ralise successivement la pression du bouton droit, le dplacement dans la direction de litem et relche le bouton droit, le tout sans avoir attendre les 300 ms
338
Marking Menu (2)
suivant
prcdent
supprimer
modifier
Figure a
Figure b
339
Automate Marking Menu (1/2)
4 vnements MM (mouse move), MD (mouse down), MU (mouse up), Timer 8 actions AffMenu, EffMenu, Commande, Highlight, A1, A2, A3 et A4 (du rubber banding) 2 prconditions inMenu, outMenu
340
Automate MarkingMenu (2/2)

MU / inMenu Commande EffMenu MU / outMenu Nothing EffMenu MD A1
Visible
Timer AffMenu
MM Highlight A3;A4
Idle
Marking
MM A3
MU / outMenu Nothing A2 MU / inMenu Commande A2
Invisible
MM Highlight A4
341
Fusion Marking & Pie Menu
Si lutilisateur clique sur le bouton droit de la souris, le menu a un comportement de pie menu. Si lutilisateur presse le bouton droit de la souris, le menu a un comportement de marking menu.
342
6 vnements CD (clic droit), CG (clic gauche), MM (mouse move), MD (mouse down), MU (mouse up), Timer 8 actions AffMenu, EffMenu, Commande, Highlight, A1, A2, A3 et A4 (du rubber banding) 2 prconditions inMenu, outMenu
343

MU / inMenu Commande EffMenu MU / outMenu Nothing EffMenu MM Highlight A3;A4
CG / outMenu Nothing EffMenu MM Highlight
Visible
Timer AffMenu MM A3
Menu
CD AffMenu CG / inMenu Commande EffMenu
Idle
MD A1
Marking
Invisible
MM Highlight A4
344

Attention Droit et Gauche
CG / outMenu Nothing EffMenu MM Highlight MU / inMenu Commande EffMenu MU / outMenu Nothing EffMenu MM Highlight A3;A4
Visible
Timer AffMenu MM A3
Menu
MU AffMenu CG / inMenu Commande EffMenu
Idle
MD A1
Marking
Invisible
MM Highlight A4
345
Gestion des fentres
346
Gestion de la navigation entre fentres
Form1 load: charge une fentre L'activation et la dsactivation d'une fentre se fait par affichage (form1.show ou plutt My.Application.f1.Show() )ou masquage (form1.hide) ou premier plan (form1.setfocus) Le processus de conception reste le mme

vnements Automate Event handlers 347
Exemple 3 fentres
348
Principes VB (1/2)
Les fentres vont mettre des vnements
Elles ne peuvent pas connatre la personne en charge du dialogue entre fentre Dclaration de l'vnement dans la form (Public Event nextwindow ()) Utilisation de l'instruction RaiseEvent
seul moyen de faire du "catch" Gre l'activation et la dsactivation des fentres 349
1 ApplicationEvents

Principes VB (2/2)
Public Sub f1_nextWindow() Utilisation de applicationEvents Handles f1.nextWindow Select Case grain La variable dtat denchainement des Case "F1" fentres grain = "F2" Public grain As String f1.Hide() Cre les fentre f2.Show() Public WithEvents f1 As New Form1 f3.Hide() Case "F2" Surcharge des eventHandlers 'interdit Case "F3" 'interdit End Select End Sub
350
Schma rcapitulatif
Nextwindow()
Fentre 1
Fentre 4 Initialisation
Nextwindow()
Fentre 2
Nextwindow()
Form1_Nextwindow() Fentre 3 Form2_Nextwindow()
Form3_Nextwindow() ApplicationEvents Dclare les fentres Charge les fentres Gre le dialogue
351
Automate fentres
3 vnements F1_Nextwindow, F2_Nextwindow, F3_Nextwindow

F1_NW
E1 E2
F2_NW F3_NW
E3
352
Matrice Etats/Evnements
F1_NW E1 E2 E3 grain="E2" rien faire 'Interdit 'Interdit F2_NW 'Interdit F3_NW Modclass_Init() 'Interdit grain="E1" rien faire
grain="E3" rien faire

'Interdit
'Interdit grain="E1" rien faire
353
Code dune des fentres
Public Event nextwindow() Private Sub Command1_Click() Label1.Caption = "titi" RaiseEvent nextwindow End Sub
Public Sub Form_Load() Set modClass.feuille1 = Me End Sub
354
Fentre dinitialisation

Peut se faire sur le splashScreen Fentre 4

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click My.Application.grain = "F1" My.Application.f1.Show() My.Application.f2.Hide() My.Application.f3.Hide() Me.Hide()
355
Code ApplicationEvents

Private Sub feuille1_nextwindow() Select Case grain Case "F1" grain = "F2" f1.Hide f2.Show f3.Hide Case "F2" 'interdit Case "F3" 'interdit End Select End Sub
Private Sub feuille2_nextwindow() Select Case grain Case "F1" 'interdit Case "F2" grain = "F3" f1.Hide f2.Hide f3.Show Case "F3" 'interdit End Select End Sub
Private Sub feuille3_nextwindow() Select Case grain Case "F1" 'interdit Case "F2" 'interdit Case "F3" grain = "F1" f1.Show f2.Hide f3.Hide End Select End Sub
356
Exercice fentre modification

Rajouter une fentre F0 entre F1 et F2 valuer limpact du changement

Au niveau des fentre F1, F2 et F3 Au niveau de larchitecture (communications et objets) Au niveau du module de Classe
357

Conception Des Systemes Interactifs

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Conception Des Systemes Interactifs

Diunggah oleh

Hak Cipta:

Format Tersedia

Conception des Systmes Interactifs

Interactive Critical Systems IRIT Universit Toulouse I Capitole

Introduction Introduction Introduction Introduction

au domaine aux concepts aux techniques la modlisation

Une petite histoire

a ne marche jamais !!!

Unit Centrale Un utilisateur en pleine activit

User-centered systems design in practice

Gestion des erreurs et rcupration

Exemples derreurs Windows

Drag and drop Slection Menu Langage de commande

Editeurs (de textes, de dessins, ...) Code de calcul

Au niveau de l'ordinateur, architecture logicielle sparer :

Architecture Seeheim Un exemple d'architecture favorisant la sparation interface / application

Objectifs d'une interface utilisateur

tude de la frquence des commandes

Caractristiques d'une bonne IHM

Une Approche multi-disciplinaire

Ncessite d'tre centr sur l'utilisateur

Tous et mme plus

Dangers d'une "mauvaise" IHM

Exemples de mauvaise conception

Domaine en pleine mutation

Enjeux commerciaux trs grands

INTRODUCTION LA CONCEPTION CENTRE UTILISATEUR

contraintes sur l'environnement

informations lies aux tches

le bouche oreille le jeu de mime

Livraison pour un projet

Manuel de conception Manuel utilisateur Logiciel Plan de formation

son rle ses tches sa connaissance du domaine sa connaissance de l'informatique

Cerveau droit - cerveau gauche

VERT JAUNE JAUNE

Couleurs moins facile

VERT JAUNE JAUNE

Le processeur humain comprend trois sous-systmes

Systme sensoriel de l'utilisateur

Mmoire a court terme

P Mmoire visuelle T = 100 ms

graphisme non reconnu

la mmoire court terme

la mmoire long terme

Le modle du processeurs humain

L'individu labore des modles conceptuels qui correspondent son comportement

les aspects d'une tche distance (d'excution et d'valuation)

modle de conception (modle conceptuel de l'outil)

modle de l'utilisateur (reprsentation mentale que l'utilisateur labore propos de l'outil)

s'applique tous les outils (et en particulier l'ordinateur)

Distance d'excution et d'valuation

Evaluation de la thorie de l'action

prcise la notion d'tat

Mise en pratique de la Thorie de l action

Exemple : Thermostat de chauffage central

A : Je le monte fond B : Je le monte 20 C

80% des personnes interroges montent le chauffage fond*

simplement inventes pour les besoins de la cause. Interaction HommeMachine

*Note : 80% des statistiques sont purement et

Trois modles de lutilisateur possibles :

Modle erron Comportement erron

Problme : gouffre de l valuation

Permettre l utilisateur de construire un meilleur modle du systme Amliorer le feedback

Permet de dterminer facilement si le but est atteint

Modle cognitif du systme

L'utilisateur n'est qu'une petite partie