Presentation is loading. Please wait.

Presentation is loading. Please wait.

Interactive Systems Engineering Philippe Palanque - Logiciels Interactifs et.

Similar presentations


Presentation on theme: "Interactive Systems Engineering Philippe Palanque - Logiciels Interactifs et."— Presentation transcript:

1 Interactive Systems Engineering Philippe Palanque - Logiciels Interactifs et Interaction Homme- Systèmes Université Paul Sabatier (Toulouse 3) Rio de Janeiro – september 2007

2 2 Structure of the lecture Introduction and definitions Development process of Interactive Systems A simple Formal Description Techniques for IS Engineering IS Design Methods for IS Research agenda

3 3 Introduction to HCI

4 4 Interactive Systems Definition

5 5 Waterfall Development Process

6 6 Iguaçu Waterfall Dev. Process

7 7 V Development Process Specification Preliminary design Detailed design Validation IntegrationUnitary TestsCoding Requirements Deployment McDermid 84

8 8 Spiral Development Process Evaluate alternatives Identify and solve risks Define objectives alternatives and constraints Plan next phases Develop and verify next product Risk analysis ARP1P2 Prototype 3 Operational prototype Planify analysis and life cycle Planify development Planify integration and tests Specification Design coding unitary testing integ ration insta llation detailled design Define mission Boehm 86

9 9 Star Development Process

10 10 Design Method for IS User interfaces is a pluri-disciplinary domain "Science" non exact ~ soft science User interface design is more hands on practice higly related to designers expertise Than a well structured widely agreed upon design method (with respect to other software entities)

11 11 Design Process in Practice Client Admistrative Manager Users Analyst – Project manager Programmers Testers Technical Support & Documentation Advisors Requirements specifications Information flows are more complex Specifications Product (Application) Advices Prototypes Doc & user manual Bug reports, Assistance requests Reports

12 12 Weak points of this process Too many people involved Main actors to far away (programmers users) => Try to reduce information circulation (téléphone arabe) More qualified people have no decision power and too little influence on development

13 13 Iterative Approaches SpecificationDevelopment Testing Use-evaluation Spiral iteration towards final product

14 14 "super-iteratives“ approaches Produce iterations at each phase Example: buy a bycicle with X hundread reals SpecificationDevelopment Testing Use-evaluation

15 15 Throw-Away Prototyping

16 16 Incremental Prototyping

17 17 Low Fidelity Prototyping Definition of requirements is the main issue Very simple drawings only showing main problems Then successive refinements showing more in details The appearance The functioning No disturbing details about the interface More abstract than a prototype Continuous interaction with future users Only involve other stakeholders later on (Graphic designers, domain experts, ergonomics, …) Take lectures on drawing, painting, graphical design …

18 18 High-fidelity Prototyping Convergence towards a final system is the main issue Reduce the number of iterations Use of RAD tools (Visual Basic, …) Inconvenient Slow iterations (you have to program the prototype) Hard to find rapidly essential problems because of low level information provided on the prototype Hard to design something not embedded in the RAD Advantages Easy to remember (for the designer) the behavior Easy to remember (for the designer) the requests for modifications Cannot test unfeasible things (Wizard of Oz techniques) Makes it easier the convergence

19 19 Requirements Specification Architecture design Detailed design Unitary tests Implementation and test Maintenance Validation Coding Preliminary needs Prototype User's evaluation no adéquat ? yes Requirements Final System Requirements Formal specifications Hi-fidelity prototype Software Architecture & verification User Centered Design Process

20 20 Program A Theoretical Development Process Proble m Abstract Concrete Requirements Specification Design Implementation Testing

21 21 A Real Development Process Proble m Program Abstract Concrete Requirements

22 22 User Centered Design (ISO Standard) How to involve the Users throughout the design process? Embed users in the development team Periodic involvement Problems Inconsistency In-completeness (taxe acounting system)

23 23 User-centered systems design in practice

24 24 Exercise : A Car Interface Design the User Interface of a car simulating its behavior by a computer You’ll have to take into account two types of users: - Pilot (management of real time interactions) display information (indicators, speed, …) available actions to the pilot provide feedback about actions - Navigator – we might need information such as (planning of journey at medium and long term) Propose a route according to the duration of the journey Propose a route according to the traffic Propose a route according to the departure and arrival points Inter communication vehicles … -We follow the hypothesis that driving wheel manipulation, pedals, gears remains unchanged with respect to current vehicles Do this exercise by group of 2 people. Each one will endorse one role (either pilot or navigator)

25 25 Exercise : Airport You are in an aircraft currently landing You have a very short connection You are hungry Design a system for food selection and distribution making it possible for you to get food as quickly as possible

26 From Design to Construction

27 27 Design of Interfaces You have to design the three layers of Seeheim architecture Presentation part – What the user sees of the interactive system Dialogue What the user can do How the user acts on the presentation The influence of an action on what he will be able to do later Functional Core: Functions implemented in the interactive system Data manipulated by the system

28 28 Modèle de Seeheim 83 Presentation Component Dialog Controler Functional Core Functional Core Interface User

29 29 Software Architecture events rendering Transducers Abstract Events Abstract rendering Concrete rendering

30 Event-Based Functioning of Systems

31 31 Structure of a Classical Application Begin choice = '1'; While choice <> '9' do display-menu; readln(choice); case choice of 1 : add; 2 : modify; 3 : delete; 9 : Quit; End Case End While End Procedure Add; begin rep = 'o'; While rep <> 'n‘ do drawn-screen; read(name); read(firstname);... writeln(‘do you wan to continue ?'); read(rep) End While End The application is always waiting for a user input In all the other cases the application is performing calculations and the user is waiting

32 32 Classical Functionning Read input End Exit? Process Input Read input Process Input

33 33 Structure of event driven applications Main event loop receives user and application events Event handlers are procedures related to a couple (object, event) and are called from the main event loop when an event is received Every event handler has the same structure EH1; Precondition; Action; State change; Graphical Rendering End EH1;

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

35 35 State-based Behaviours Event-handler depending on application’s state Event-handler depending on system’s state

36 36 Event processing in MS Windows

37 37 State Versus Events 1- Real world evolves in a continuous manner 2- Variables represent step-based variations 3- Events can have a periodic appearance (look at your watch for the coffee break every 30 Sec ) 4- Event arrive and have an impact on state

38 38 Construction in Java Event-based functioning (main loop + event handlers) Event-based programming (event- handlers production) 3 main elements Swing components for the UI Adapters (listeners) Application

39 39 JBuilder 2005 Environment Structure Code Project

40 40 JBuilder 2005 Environment Structure UI Builder Project Properties of the current component Tool palete Interface

41 41 Runtime

42 42

43 43 Development JBuilder 2005 Draw the UI using the UI builder Overload event-handlers Adapters are automatically created Write the code Instanciate the constructor Run the application

44 44 A development method A stepwise approach An automata-based notation A development process close to E/R Going from abstract description to code

45 45 A development method 1) List of events 2) List of actions 3) Behavioural automaton 4) State/event Matrix 5) Event-handlers

46 46 Advantages Complete and unambiguous description Properties analysis Behavioural Usability Code “generation” It is easier to prove than testing

47 47 Augmented Automata An augmented automaton is an automaton which can have Events triggering actions Preconditions for triggering actions Registers (numerical variables) Perform actions on the registers (assignment) All the elements appear on the models as shown

48 48 Augmented Automata (2) Example : a simple system 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 E = {E1, E2, E3, E4}, s0 = E1 Ev = {Ev1, Ev2}, A = {A1, A2, A3, A4}, E1 E2 E3 E4 Ev1 Ev2 Ev1 Ev2 A1A2 A3 A2 A4A3

49 49 Going from model to code Build the State/Event Matrix Extract Event-based behaviour Produce the event-handlers Don’t forget Initialisation Activation/desactivation of widgets

50 50 Event-handler code V = {v}, v0 = 1 and v : integer Handler Ev1 is begin Case v of 1 : A1; v:=2; ev1 active ev2 active 2 : A2; v:=3; ev1 active ev2 active 3 : A2; v:=4; ev1 inactive ev2 active 4 : ‘Forbidden Endcase EndHandler; Handler Ev2 is begin Case v of 1 : ‘ Forbidden 2 : A4; v:=1; ev1 active; ev2 inactive; 3 : A3; v:=2; ev1 & ev2 active 4 : A3; v:=3; ev1 & ev2 active Endcase EndHandler;

51 51 Summary Applications Elements Classical User-driven (event-driven) Communication (application Application = client User = server Application = server User = client Nature of the application TransformationalReactive Control ImperativeDeclarative Dialogue state (of interaction) Historical Value of state variables protocol user)Ö

52 52 Petri nets?

53 53 Exercise 1: 4 buttons Model the behaviour of cyclic buttons Application

54 54 Automaton Exercise 1 4 events CB1, CB2, CB3, CB4 E1 E4E3 E2 CB1 CB2 CB3 CB4

55 55 Problems with JBuilder Pas de fenêtre dans l’onglet design: vous avez oublié de dire que votre classe est une fenêtre: la classe de base javax.swing.JFrame lors de la création public class QuatreBoutonsV2 extends JFrame dans le code Les boutons se mettent n’importe comment dans la fenêtre: vous avez laissé le layoutManager par défault Choisir le layoutManager null dans les propriétés de la frame A l’exécution rien n’apparait: vous n’avez pas rendu visible la fenêtre public static void main(String[] args) { QuatreSaisons quatresaisons = new QuatreSaisons(); quatresaisons.setSize(220,180); quatresaisons.setVisible(true) // si vous inversez ça marche pas  } Des modifications sur les chemins ne semblent pas être prises en compte: il y a des valeurs par défaut qui ont été positionnées et ne sont pas supprimées lors de déplacements Faire un Rebuilt sur la classe

56 56 Four Seasons: class diagram

57 57 Four Seasons: class diagram

58 58 Four Seasons: class diagram

59 59 ActionListeners class QuatreSaisons_jButton2_actionAdapter implements ActionListener { private QuatreSaisons adaptee; QuatreSaisons_jButton2_actionAdapter(QuatreSaisons adaptee) { this.adaptee = adaptee; } public void actionPerformed(ActionEvent e) { adaptee.jButton2_actionPerformed(e); } * The listener interface for receiving action events. The class that is interested in processing an action event implements this interface, and the object created with that class is registered with a component, using the component's addActionListener method. When the action event occurs, that object's actionPerformed method is invoked.

60 60 How does it work (in theory)? A component receives an event when the user uses the input device on that component (click for instance) The component calls the method ActionPerformed for all the registered objects (listeners) If we want to write some code associated to this user action on that component (produce a reaction from the application to user action), the application must « register » to the component (become one of the listeners) Offers a method called ActionPerformed (that will be called by the component) There will be a type problem i.e. the component must be able to use polymorphism on the application. To do so the application will implement “implements” a special interface that will offer the method ActionPerformed. This interface is called ActionListener. It is the code written in the method ActionPerformed that will be executed when the user acts on the component by means of the input devices

61 61 How does it work (practically)? You must create a « inner class » i.e. a class created inside another one class QuatreSaisons_jButton1_actionAdapter implements ActionListener { private QuatreSaisons adaptee; QuatreSaisons_jButton1_actionAdapter(QuatreSaisons adaptee) { this.adaptee = adaptee; } public void actionPerformed(ActionEvent e) { adaptee.jButton1_actionPerformed(e); } You must register one instance (the only one of that class) to the adequate component jButton1.addActionListener(new QuatreSaisons_jButton1_actionAdapter(this));

62 62

63 63

64 64 Exercise 2: 4 buttons cyclic version 2 Specification of the behaviour of the 4 buttons applications but all the buttons always presented as activated

65 65 Automaton Exercise 2 (2/3) 4 events CB1, CB2, CB3, CB4 4 actions (change appearance of buttons) E1 E4E3 E2 CB1 A1 CB2 A2 CB3 A3 CB4 A4 CB2 CB3 CB4 CB2 CB3 CB4 CB1 CB3 CB1 CB4 CB2

66 66 Exercise 2: Class diagram

67 67 Exercise 2: Class diagram

68 68 Exercise 2: Class diagram

69 69 Exercise 3: 4 buttons cyclic version 3 4 buttons cyclic behaviour always available and there is a shortcut in the state where B3 is bold click on button 2 is allowed brings the system back to the initial state

70 70 Exercise 3: Automaton 4 events CB1, CB2, CB3, CB4 4 actions (change apparence of buttons) E1 E4E3 E2 CB1 A1 CB2 A2 CB3 A3 CB4 A4 CB2 CB3 CB4 CB2 CB3 CB4 CB1 CB3 CB1 CB4 CB2 A4

71 71 Example 4: 4 buttons 2 pairs 4 buttons working by pairs in an alternate mode Application

72 72 Exercise 4: Automaton 4 events CB1, CB2, CB3, CB4 E1 E3 E4 E2 CB1 CB2 CB3 CB4 E6 E5 CB1 CB2 CB4 CB3 CB1 CB2 CB3 CB4

73 73 And Space bar, and tab, … E1 E3 E4 E2 CB1 CB2 CB3 CB4 E6 E5 CB1 CB2 CB4 CB3 CB1 CB2 CB3 CB4 Space E8 E7 tab Space tab

74 74 Iteration 2 buttons (start, stop) 1 counter The user MUST be able to stop counting Application Your Application Your Appli Refresh

75 75 Automaton Counter A1: for (int i = 1; i<30000 ; i++) { toto = new Integer (i).toString(); jLabel1.setText(toto); // or // jLabel1.setText(Integer.toString(i)); } A2: jLabel1.setText("pouf"); InitCounting CStart CStop A2 A1

76 76 Automaton Counter Displayed A1: for (int i = 1; i<30000 ; i++) { toto = new Integer (i).toString(); jLabel1.setText(toto); // or // jLabel1.setText(Integer.toString(i)); jLabel1.paintImmediately(this.getBounds()); } A2: jLabel1.setText("pouf"); InitCounting CStart CStop A2 A1

77 77 Exercise counter+1 3 buttons We can only click 3 times on +1 Click on Stop displays "Pouf" Application Cstop Cstart C+1 Cstart

78 78 Exercise counter+1 A1: jLabel1.text="0" A2: jLabel1.text= "pouf" A3: jlabel1.text=val(jLabel1.text)+1 InitE1 CStart CStop A2 A1 E2E3E4 C+1 A3 C+1 'nothing to do C+1 A3 C+1 A3

79 79 Compteur+1 folding InitE1 CStart CStop A2 A1 E1 C+1 A3 C+1 A2 C+1 A3 C+1 A3 Foldable states

80 80 Counter+1 Folding InitE1 CStart CStop A2 A1 C+1 A3 C+1 ‘nothing Undeterminism of the automaton

81 81 Counter+1 determinism InitE1 CStart A1 n=0 CStop A2 n=0 C+1/n<3 A3 n++ C+1/n=>3 ‘Nothing n=0 Add a state variable connected to state E1 Systematically updated for each state change Conditions added to remove undeterminism n=0 A1

82 82 State/event Matrix CStart CStop C+1 Init E1 A1 n=0 state="E1" A2 n=0 state="Init" If n<3 then A3 n=n+1 State="E1" Else ‘nothing n=0 state="Init" EndIf ‘ Forbidden Form_load() A1 n=0 state="Init"

83 83 Exercise Timer (subject) We remove button +1 (jButton3) We add a timer Properties "delay" and methods "start" and "stop" Event "ActionPerformed" (as for a normal button)

84 84 Exercise Timer (automaton) Events : Cstart, Cstop, Timer InitE1 CStart A1 n=0 CStop A2 n=0 Timer/n<3 A3 n++ Timer/n>=3 A2 n=0

85 85 State/event Matrix CStart CStop Timer Init E1 A1 n=0 state="E1" A2 n=0 state="Init" If n<3 then A3 n=n+1 State="E1" Else ‘nothing n=0 state="Init" EndIf ‘ Forbidden Form_load() A1 n=0 state="Init"

86 86 Exercise Timer (code) Remove button +1 (jButton3) Add a timer Give the “name” of the button to the timer Move code from the event-handler of the button +1 to the event-handler of the timer Set timer period (setDelay or constructer) Increase limit to 3000 (instead of 3 in the +1 exercise) int delay = 1000; //milliseconds ActionListener taskPerformer = new ActionListener() { public void actionPerformed(ActionEvent evt) { //...Perform a task... } }; new Timer(delay, taskPerformer).start();

87 87 Go Forward – Go Backwards Possible to increment Possible to decrement Possible to stop the execution

88 88 Go Forward – Go Backwards Automaton Init Forward CStart A1 n=0 CStop A2 n=0 Timer/n<5 A3 n++ ClicAv n=n Backward CStop A2 n=0 Timer/n>0 A3 n-- Timer/n>=5 A2 n=0 Timer/n<=0 A2 n=0 ClicArr n=n A1: jLabel1.text="0" A2: jLabel1.text="Pouf" A3: jlabel1.text=Integer.toString(n);

89 89 Exercise: Traffic Light Computer-based simulation of a traffic light Example

90 90 Exercise: Traffic Light Use of modes to handle complexity Working Stopped Broken OutOfOrder Start Stop Start

91 91 Exercise: Traffic Light Stopped Broken OutOfOrder Start Stop Start G O R T3 T2 T1

92 92 Exercise: Traffic Light Broken OutOfOrder Start Stop Start G O R T3 T2 T1 A

93 93 Exercise: Traffic Light OutOfOrder Start Stop Start G O R T3 T2 T1 A Of Oo T5 T4

94 94 Exercise: Traffic Light A V O R E OA CM A1 CA A4 T1 A3 A1 : Switch On Red Switch Off Orange Switch Off Green A2 : Switch Off Red Switch On Orange Switch Off Green A3 : Switch Off Red Switch Off Orange Switch On Green A4 : Switch Off Red Switch Off Orange Switch Off Green CM A1 CM A1 CA A4 CA A4 CA A4 CA A4 T3 A1 T2 A2 T5 A4 T4 A2 CP A2 CP A2 CP A2 Form_Load ‘nothing

95 95 Example: Traffic Light Reliability-Usability- Modifiability How to check the reliability of the application (produce test cases) Ex. After clicking 4 times on Start everything is stopped How to check and ensure usability (internal and external stated) How to test the modifiability Example Testing

96 96 Example UK traffic light Different behaviour Both red and orange on Before green on After only red on Example

97 97 Example: UK traffic light No mode change A change in mode Working G O R RO Mode Working Working Stopped Broken OutOfOrder Start Stop Start

98 98 Example: Austrian Traffic Light Different behaviour Both red and orange on Before green on After red only Before orange on Green blinks 4 times Example

99 99 Example: Austrian Traffic Light A new sub-mode (green blinking) Modification of mode Working Temporal evolutions G O R RO Mode Working GreenBl Working Stopped Broken OutOfOrder Start Stop Start

100 100 Example: Austrian Traffic Light A new sub-mode (green blinking) Modification of mode Working Temporal evolutions Undeterminism T7 Other possibility unfold V O R RO Mode Working Gf Go T7 T8 T1 T2 T6 T7 T3 Working Stopped Broken OutOfOrder Start Stop Start

101 101 Unfolded Automaton G O R RO All timers are different and thus can be parameterized If durations are equal (as the actions are the same in addition) se can only use one timer or 2 timers (if on and off durations are different) GoGf T15 T1 T2 T6 T11 T3 Gf T13 Go Gf T9 GoGf T7T8 T10 GoGf T14T12 Mode Working

102 102 Example: Austrian Traffic Light A G O R Of Oo CM A1 T1 A3 A1 : SwitchOn_Red SwitchOff_Orange SwitchOff_Green A2 : SwitchOff_Red SwitchOff_Orange SwitchOff_Green A3 : SwitchOn_Red SwitchOn_Orange SwitchOff_Green A4 : SwitchOff_Red SwitchOff_Orange SwitchOff_Green A5 : SwitchOff_Red SwitchOn_Orange SwitchOff_Green CM A1 CM A1 CA A4 CA A4 CA A4 CA A4 T4 A1 T2 A4 T5 A2 T6 A5 CP A2 CP A2 CP A2 Form_Load ‘nothing Gf Go T7 A2;n=0 T3/n<4 A4; n++ T8 A2;n CA A4 CA A4 CP A2 CP A2 RO T3/n>=4 A5;n=0 CA A4 CP A2 Everywhere n=0 CA A4

103 103 Rubber Banding Interactive line drawing Left Button pressed then start drawing Moving the mouse draws the line Line (x1,y1)-(x2,y2), RGB (0,0,0) ‘black Line (x1,y1)-(x2,y2), RGB (255,0,0) 'red Release left button finishes the drawing

104 104 Rubber Banding InitE1 MouseDown A1 MouseUp A2 MouseMove A3 MouseMove 'rien Form_Load 'rien

105 105 Rubber Banding (other) InitE1 MouseDown A1 MouseUp ‘rien MouseMove A3 MouseMove 'rien E2 MouseMove A4 MouseUp A2 A3 and A4 must be different A3: draw a line A4: delete line AND tracer un trait Form_Load 'rien

106 106 State/Event Matrix MouseMove MouseUp MouseDown Init E1 state="Init" ‘nothing state="Init" A2 ‘Impossible state="E1" A3 'Impossible Form_load() state="Init" ‘nothing state="E1" A1

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

108 108 Circle (centrex,centrey), rayon calcul du rayon: Sqr((x1-x2)²+(y1-y2)²) Application de dessin (calcul du rayon) x,y x1,y1 x2,y2 Longueur = abs(y-y2)=a Longueur = abs(x-x1)=b x3,y3 rayon=c

109 109 Application de dessin (modes) CercleLigne Rectangle ClicRectangle ClicCercle ClicLigne ClicCercle Idle Trace Modes ClicRectangle MMove MUpMDown Attention au mode Trace (on ne veut pas que l’utilisateur puisse cliquer sur les boutons)

110 110 Application de dessin (comportement) IM1 TM1 MouseDown A1 MouseUp A2 MouseMove line MouseMove 'rien IM2 TM2 MouseDown A1 MouseUp A3 MouseMove circle MouseMove 'rien IM3 TM3 MouseDown A1 MouseUp A4 MouseMove rectangle MouseMove 'rien ClicCircle ‘rien ClicCircle ‘rien ClicRectangle ‘rien ClicRectangle ‘rien ClicLine ‘rien ClicLine ‘rien

111 111 La matrice États/événements CircleLineRectMDMUMM IM1 Etat="IM2" ‘rien 'interditEtat="IM3" ‘rien Etat="TM1" A1 'Impossible'rien Etat="IM1" TM1 'interdit 'ImpossibleEtat="IM1" A2 Etat="TM1" Line IM2 'interditEtat="IM1" ‘rien Etat="IM3" ‘rien Etat="TM2" A1 'Impossible'rien Etat="IM1" TM2 'interdit 'ImpossibleEtat="IM2" A3 Etat="TM2" circle IM3 Etat="IM2" ‘rien Etat="IM1" ‘rien 'interditEtat="TM3" A1 'Impossible'rien Etat="IM1" TM3 'interdit 'ImpossibleEtat="IM3" A4 Etat="TM3" rectangle

112 Target Applications, Domains Notations and toolsUser Interface Interaction Technique 2020 TODAY The Invisible UI Roadmap on Formal Methods in HCI No more programming ? No more bugs ? Automated autonomous Real- Time Systems (VAL, TCAS) B (Atelier B), Z, … No Interaction Technique Tangible User Interface WIMP Direct Manipulation Embodied UI Augmented Reality Full concurrency Dynamic instantiation Hardware/Software Infinite number of states Tool support Advanced Analysis techniques Web Applications Command and Control Systems All Applications 2010 Multimodal Interaction Business Applications UML, E/R, …


Download ppt "Interactive Systems Engineering Philippe Palanque - Logiciels Interactifs et."

Similar presentations


Ads by Google