Transcript Génie des Systèmes Interactifs

Conception Informatique de
Systèmes Interactifs
Philippe Palanque
[email protected] - http://www.irit.fr/ICS/palanque
Interactive Critical Systems
Université Paul Sabatier (Toulouse 3)
3
Introduction à l’IHM
Be Jarod
4
Définition des SI
Output
System
input
output
User
Input
Interactive
System
Time
5
Cycle de développement en V
Analyse
du besoin
Déploiement
Validation
Spécification
Conception
Préliminaire
McDermid 84
Conception
détaillée
Intégration
Tests Unitaires
Codage
6
Cycle de développement
Evaluate alternatives
itératif
Identify and solve risks
Define objectives
alternatives and constraints
Risk analysis
Risk analysis
Risk analysis
AR P1
P2
Prototype 3
Operational
prototype
Planify analysis Define
and life cycle
mission
Planify
Planify development
integration
and tests
Specification
Design
coding
Boehm 86
Plan next phases
detailled
design
insta
llation
integ
ration
unitary
testing
Develop and
verify next
product
7
Why Software Projects Fail
Boehm 2006) – Average overrun: 89.9% on cost, 121% on schedule, with 61% of content
(source
8
Besoins et cafards
9
Les approches itératives
Évolution "En spirale" vers le produit final
Spécification
Utilisation
Implantation
Test-Evaluation
10
Approches "super-itératives"
Réaliser des itérations à chaque étape du
processus:
Spécification
Utilisation
Implantation
Test-Evaluation
11
Prototypage Jetable
12
Prototypage Incrémental
13
Prototypage basse fidélité
Partir de schémas bruts et très simples qui exposent
uniquement les problèmes importants puis raffinements progressifs
Dessins et maquettes "manuelles" suggérant le mode de
fonctionnement
sans rentrer dans les détails 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, spécialistes du domaine…
Envisager des Cours de dessin, d'expression graphique.
14
Prototypage haute fidélité
-> réduire le nombre de boucles pour aller au plus vite
vers l'application finale
Utilisation des outils interactifs de développement.
Inconvénients :
- lenteur des boucles d'itération
- difficultés à dégager clairement à chaque étape les
problèmes essentiels:
-> la réalisation du prototype fait intervenir presque en
même temps les 4 phases
- Les outils de prototypages imposent leur limites,
parfois assez importantes
15
Early design
Brainstorm different representations
Low fidelity paper prototypes
Choose a representation
Rough out interface style
Task centered walkthrough and redesign
Medium fidelity prototypes
Fine tune interface, screen design
Heuristic evaluation and redesign
Usability testing and redesign
Limited field testing
Alpha/Beta tests
High fidelity prototypes
Working systems
Late design
16
Usability design process
© Bengt Göransson, Enea Redina AB, version 1.7en
Requirements analysis
Elicit
business
objectives
Usability Design in system development
Contextual
inquiries
User
profiles
• Early and continual focus on users
• Evaluate with users
• Iterative design
System goals,
design criteria
and usability
goals
Usability
Design
Guide
• Integrated design
Functional
description
use-cases
Driven by a usability champion a.k.a.
the Usability Designer
Active user involvement
Growing software with iterative design
Analysis
Refine
models
Usage
Scenarios
Usability
Design
Guide
Conceptual
Design
Analysis
Refine
models
Interaction
Design
Usability
Design
Guide
Prototypes
Detailed
Design
Evaluation
Mock-ups
No!
Evaluation
No!
No!
Evaluation
Yes
Goals
met?
Yes
Goals
met?
Goals
met?
Yes
Deployment
Usability
Design
Guide
Introduce
and operate
Processus itératif et
séquentiel
17
Preliminary
needs
User's evaluation
Prototype
& verification
no
yes
adéquat ?
Requirements
Requirements
Maintenance
Final System
Specification
Requirements
Formal specifications
Hi-fidelity prototype
Software
Architecture
Validation
Implementation
and test
Architecture
design
Detailed
design
Unitary
tests
Coding
18
19
Exercice : Interface de Voiture
Faire l'interface d'utilisation d'une voiture en simulant son utilisation
par un ordinateur. Il faudra représenter graphiquement les deux
principales tâches:
- le pilotage (gestion des interactions temps réel)
• 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 durée de voyage
• proposer une route en fonction de son taux de chargement
• proposer une route en fonction du départ et de la destination
• communication entre véhicules
- on suppose que la manipulation du volant, pédales et le levier de
vitesse restent telles que offertes dans les véhicules actuels
Faites cet exercice par binôme. Chacun des éléments du binôme est expert
soit dans la tâche de pilotage soit dans la tâche de navigation.
20
Exercice : Aéroport




Vous êtes dans un avion en train d’atterrir
Vous avez une correspondance très courte
Vous avez faim
Déterminez un système de distribution de
nourriture permettant d’obtenir la
nourriture le + rapidement possible
Du Design à la construction
22
Conception des IHM
Il faut concevoir les trois parties du modèle de Seeheim:
La présentation : 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 présentation
• l'influence de son action sur ce qu'il pourra faire ensuite
Le noyau fonctionnel :
• les fonctions réalisées par l'application
• les données manipulées par l'application
23
Modèle de Seeheim 83
Utilisateur
Composant
P resentation
Contrôleur
du
Dialogue
Interface
du noyau
fonctionnel
Noyau
fonctionnel
24
Abstract
rendering
Modèle Architectural
Abstract
Events
Transducers
Concrete
rendering
rendering
events
Fonctionnement des systèmes
par événements
26
Structure d'une appli.
classique
A tout instant l'application est en attente d'une entrée de l'utilisateur.
Dans les autres cas elle fait des calculs et l'utilisateur doit attendre
Début
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
Procédure Ajouter;
début
rep = 'o';
Tantque rep <> 'n';
dessin-écran;
lire(nom);
lire(prenom);
...
écrire('voulez-vous
continuer ?');
lire(rep)
FinTantque
Fin
27
Fonctionnement classique
Lire une entree
Effectue r un traitement.
Lire une e nt ré e
Effe c tuer un t raite ment
sort ie ?
Sortie ?
Fin
28
Structure appli. par evt.


La boucle d'événement (main event loop) : reçoit chaque événement
produit par l'utilisateur
Les gestionnaires d'événements : sont des procédures associées à
chaque couple (widget, action sur un widget) et appelées par la main
event loop dès que une action a été réalisée.







EH1;
Tous les event handlers ont la même structure :
Précondition
Action;
Modification de l'état du dialogue;
Rétroaction graphique
Fin EH1;
29
At runtime
At startup
Event-based Functioning
States
Register Event Handlers
EH Registration
Call Window Manager
Event
Queue
Finished
Application
Get next event
Even Handler 1
Dispatch event
Even Handler 2
Ack received
Even Handler n
Wait for next event
Window Manager
30
Comportement basé sur les états
Deuxième Couche
Principe Télétubbies
Principe Gillette
Exécution typique d’un
programme




Non-interactive
Exécution linéaire
Processus
d’automatisation
(automatique)
Ne prends pas en
compte les capacités
de l’humain versus
ordinateur
program:
main()
{
code;
code;
code;
code;
code;
code;
code;
code;
code;
code;
code;
code;
}
Programme Interactif à choix
program:
multiples





L’utilisateur choisit
les options
Exécution nonlinéaire (“branching”)
Ordre imprédictible
Système arrêté 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 Dirigée par
GUI program:
l’utilisateur





L’utilisateur déclenche
des commandes
Exécution non linéaire
Ordre non prédictible
La plupart du temps le
système ne fait rien
Les procédure de
gestion d’événements
main()
{
decl data storage;
initialization code;
create GUI;
register callbacks;
}
main event loop;
Callback1()
{
code;
}
Callback2()
{
code;
}
…
//button1 press
//button2 press
App1
GUI Events
mouse
click
OK
App2
OK
Cancel
Cancel
App2 code:
App1
event
loop
Window
System
input
device
event
loop
which
app?
App2
event
loop
which
control?
OKbtn_click()
{
do stuff;
}
CancelBtn_click()
{
do different stuff;
}
App2Form_click()
{
do other stuff;
}
Fonctionnement


“delegates” = callbacks
Java: Listeners
GUI App
Class{
decl data storage;
constructor(){
initialization code;
create GUI controls;
register callbacks;
}
main(){
Run(new )
}
callback1(){
do stuff;
}
callback2(){
do stuff;
}
…
37
Evénéments dans
Windows
38
Etats et événements




1- le monde réel évolue de façon continue
2- les variables représentent des variations par pallier
3- les événements peuvent avoir une origine périodique
(regarder sa montre toutes les 30s)
4- les événements arrivent et ont un impact sur l’état
39
Développement



Fonctionnement par événement (main loop
+ event handlers)
Programmation par événement (écriture des
event-handlers)
3 éléments principaux :
• Composants Swing pour l’interface
utilisateur
• Adapters (listeners)
•Application
40
Une démarche de conception




Une démarche de conception
Une notation les automates
Un processus proche de E/A
Un cheminement vers le code de
l'application
41
Une démarche de conception





1)
2)
3)
4)
5)
liste des événements
liste des actions
automate de comportement
Matrice etats/événements
Event-handlers
42
Avantages


Description complète et non ambiguë
Analyse de propriétés




Comportementales
D'utilisabilité
Génération de code
Il est plus facile de prouver que de tester
43
Exemple: les 4 boutons

Spécification du comportement d’une application
avec 4 boutons cycliques
Application
44
Exemple: les 4 boutons
Application
45
Exemple: les 4 boutons cycliques

Spécification du comportement d’une application
avec 4 boutons cycliques toujours actifs
46
Boucle d'affichage



2 boutons (start, stop)
1 compteur
L'utilisateur doit pouvoir
interrompre à tout
instant
Application
Votre Appli
Ou encore
47
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
48
Avance - Recule



Possibilité d'incrémenter
De décrémenter
D'arrêter l'exécution
49
Exemple: le feu de circulation


Spécification du comportement
d’une application de gestion de feu
de circulation
Utilisation des composants Shape
(exécution)



ovalShape1.fillstyle=-1 ‘opaque
ovalShape1.fillstyle=-2 ‘transparent
Utilisation des composants Shape
(création)

ovalShape1.fillcolor ‘choisir la couleur
dans la palette
Exemple Exécution
50

Exemple: le feu de circulation
Britanique
Fonctionnement différent



Rouge et orange allumés
Avant le vert allumé
Après le rouge allumé seul
Exemple Exécution
51

Exemple: le feu de circulation
Autrichien
Fonctionnement différent




Rouge et orange allumés
Avant le vert allumé
Après le rouge allumé seul
Avant l’orange le vert
clignote 4 fois
Exemple Exécution
52
Exercice complet



Faire un enchaînement des différents feux
de circulation
On démarre par le feu simple, puis le feu
Britannique et enfin le feu Autrichien
Évaluer les impacts des changements, la
modularisation de la conception et la
testabilité de l’application
53
Rubber Banding



Dessin de ligne interactif
Bouton enfoncé commence le dessin
Déplacement 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
Relâcher le bouton termine le trait
'noir
'rouge
54
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 présentation des event
handlers
Gérer les modes de l'application
55
Pie Menu

Si l’utilisateur clique sur le
bouton droit de la souris,
un menu circulaire
apparaît. L’utilisateur doit
alors se déplacer sur l’item
qu’il souhaite. Une fois sur
l’item voulu, il peut alors
cliquer avec le bouton
gauche et l’action associée
à l’item est alors activée
Valeur
suivant
suivant
supprimer
précédent
modifier
56
Marking Menu


Si l’utilisateur presse le bouton droit de la souris, et attend plus de 300
ms avec le bouton droit enfoncé, un menu circulaire apparaît (cf.
Figure a). L’utilisateur doit alors se déplacer sur l’item qu’il souhaite
sans relâcher le bouton. Une fois sur l’item voulu, il peut alors relâcher
le bouton et l’action associée à l’item est alors activée
Si l’utilisateur connaît la position sur le menu circulaire de l’item qu’il
souhaite saisir, il n’est pas obligé d’attendre les 300 millisecondes
nécessaire à l’affichage du menu (cf. Figure B). Il n’a qu’à réaliser un
geste dans la direction de l’item à sélectionner : i.e. il réalise
successivement la pression du bouton droit, le déplacement dans la
direction de l’item et relâche le bouton droit, le tout sans avoir à
attendre les 300 ms
57
Marking Menu (2)
suivant
supprimer
précédent
modifier
Figure a
Figure b
58
Exemple 3 fenêtres
59
Application Formulaire
(Manipulation indirecte)
On se propose de concevoir l'interface d'une application générique permettant de manipuler les enregistrements
stockés 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.
Spécifications informelles
L'utilisateur a la possibilité d'effectuer les actions suivantes :
 Ajouter un enregistrement à la table,
 Supprimer un enregistrement,
 Séléctionner un enregistrement parmi ceux de la table,
 Modifier les attributs de l'enregistrement sélectionné,
 Quitter l'application.
Certaines contraintes sont fixées sur le déroulement de l'application :
 Il est interdit de sélectionner 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 validées sur l'enregistrement en cours.
60
Interface Noyau Fonctionnel
On suppose que le noyau fonctionnel offre les primitives suivantes:
 Function Combien: integer;
renvoie le nombre d’enregistrements actuellement contenus dans la table.
 Function Valeurs: Enregistrement;
renvoie un enregistrement renseigné avec les valeurs affichées dans la fenêtre.
 Function Correct(T: Enregistrement) : Boolean;
renvoie vrai si l’enregistrement respecte les contraintes d’intégrité définies pour la table.
 Procedure Ajouter(T: Enregistrement);
Insère l’enregistrement dans la table. Met à jour le contenu de la zone de défilement pour reflèter cet ajout.
 Procedure Supprimer;
Supprime l’enregistrement sélectionné. Met à jour le contenu de la zone de défilement pour refléter cet
ajout.
 Procedure Remplacer(T: Enregistrement);
Remplace l’enregistrement sélectionné par T;
 Function Sélectionné : Enregistrement;
renvoie l’enregistrement actuellement sélectionné dans la zone de défilement;
Spécification de la partie presentation
 Procedure Afficher(T: Enregistrement);
Provoque l’affichage de l’enregistrement dans la zone d’édition.
 Procedure Recuperer(T: Enregistrement);
Met dans T les valeurs de l’enregistrement dans la zone d’édition.