Conception Informatique de Systèmes Interactifs

1. Conception Informatique de Systèmes Interactifs Philippe Palanque palanque@irit.fr - http://www.irit.fr/ICS/palanque Interactive Critical Systems Université Paul Sabatier (Toulouse 3)

2. Introduction à l’IHM Be Jarod

3. Définition des SI

4. Analyse du besoin Déploiement Validation Spécification Intégration Tests Unitaires Codage Conception Préliminaire Conception détaillée Cycle de développement en V McDermid 84

5. Cycle de développementitératif Evaluate alternatives Identify and solve risks Define objectives alternatives and constraints Risk analysis Risk analysis Risk analysis Operational prototype AR P1 P2 Prototype 3 Planify analysis and life cycle Define mission Planify development detailled design Specification Design Planify integration and tests coding unitary testing Boehm 86 integ ration Develop and verify next product insta llation Plan next phases

6. Why Software Projects Fail(source Boehm 2006)– Average overrun: 89.9% on cost, 121% on schedule, with 61% of content

7. Besoins et cafards

8. Les approches itératives Évolution "En spirale" vers le produit final Spécification Implantation Test-Evaluation Utilisation

9. Approches "super-itératives" Réaliser des itérations à chaque étape du processus: Spécification Implantation Test-Evaluation Utilisation

10. Prototypage Jetable

11. Prototypage Incrémental

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

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

14. Brainstorm different representations Choose a representation Rough out interface style Low fidelity paper prototypes Task centered walkthrough and redesign Fine tune interface, screen design Heuristic evaluation and redesignUsability testing and redesign Medium fidelity prototypes High fidelity prototypes Working systems Limited field testingAlpha/Beta tests Early design Late design

15. Usability design process

16. Preliminary needs User's evaluation Prototype &verification Requirements no yes Requirements Maintenance adéquat ? Final System Specification Validation Implementation and test Architecture design Requirements Formal specifications Hi-fidelity prototype Detailed design Unitary tests Software Architecture Coding Processus itératif et séquentiel

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

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

20. Du Design à la construction

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

22. Modèle de Seeheim 83

23. Abstract rendering Modèle Architectural Abstract Events Transducers rendering events Concrete rendering

24. Fonctionnement des systèmes par événements

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

26. Fonctionnement classique

27. 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. • Tous les event handlers ont la même structure : • EH1; • Précondition • Action; • Modification de l'état du dialogue; • Rétroaction graphique • Fin EH1;

28. Event-based Functioning Register Event Handlers EH Registration Event Queue At startup Call Window Manager Get next event Finished Application Even Handler 1 Dispatch event At runtime Ack received Even Handler 2 States Wait for next event Even Handler n Window Manager

29. Comportement basé sur les états

30. Deuxième Couche Principe Télétubbies Principe Gillette

31. Exécution typique d’un programme program: main() { code; code; code; code; code; code; code; code; code; code; code; code; } • Non-interactive • Exécution linéaire • Processus d’automatisation (automatique) • Ne prends pas en compte les capacités de l’humain versus ordinateur

32. Programme Interactif à choix multiples program: main() { decl data storage; initialization code; loop { show options; read(choice); switch(choice) { choice1: code; choice2: code; … } } } • L’utilisateurchoisit les options • Exécution non-linéaire (“branching”) • Ordreimprédictible • Systèmearrêtésur instruction de lecture • Possibilité de continuer

33. Interface Dirigée par l’utilisateur GUI program: main() { decl data storage; initialization code; create GUI; register callbacks; main event loop; } Callback1() //button1 press { code; } Callback2() //button2 press { code; } … • L’utilisateurdé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 gestiond’événements

34. GUI Events App1 App2 mouseclick OK OK Cancel Cancel App2 code: OKbtn_click() { do stuff; } CancelBtn_click() { do different stuff; } App2Form_click() { do other stuff; } App1 event loop WindowSystem event loop App2 event loop whichapp? inputdevice whichcontrol?

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

36. Evénéments dans Windows

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

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

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

40. Une démarche de conception • 1) liste des événements • 2) liste des actions • 3) automate de comportement • 4) Matrice etats/événements • 5) Event-handlers

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

42. Exemple: les 4 boutons • Spécification du comportement d’une application avec 4 boutons cycliques Application

43. Exemple: les 4 boutons Application

44. Exemple: les 4 boutons cycliques • Spécification du comportement d’une application avec 4 boutons cycliques toujours actifs

45. Boucle d'affichage • 2 boutons (start, stop) • 1 compteur • L'utilisateur doit pouvoir interrompre à tout instant Application Votre Appli Ou encore

46. Exercice compteur+1 Cstart C+1 C+1 C+1 • 3 boutons • On ne peut cliquer sur +1 que 3 fois • Clic sur Stop affiche "Pouf" Cstop C+1 Application

47. Avance - Recule • Possibilité d'incrémenter • De décrémenter • D'arrêter l'exécution

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

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

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