Stumpf and Teague ObjectOriented Systems Analysis and Design

Learning Objectives • Describe which features of the usercomputer dialogue should be included in a design model for the user interface. • Explain the components of a state transition diagram (statechart) and what each of them represents. • Use a coordinated pair of state transition diagrams to model the user-computer interface. © 2005 Prentice Hall 2

Learning Objectives (continued) • Explain the conventions for window navigation diagrams. • Use a window navigation diagram to model the navigation through a series of windows or Web pages. • Discuss the importance of testing the interface for usability. • Describe the Model-View Separation pattern and discuss the advantages it provides. © 2005 Prentice Hall 3

Overview Applying the design principles of Chapter 11 requires modeling the design of the user-computer interaction at the automation boundary Some of these models present the interface design to prospective users. Others specify the interaction in sufficient detail for the interface to be constructed. © 2005 Prentice Hall 4

Overview (continued) The external design of the user interface should be recorded in a written specification. Testing the design of the user interface throughout the development process is critical to success. There is no acceptable substitute for observing users as they interact with prototypes as well as with the completed system. © 2005 Prentice Hall 5

Overview (continued) State transition diagrams effectively model the details of user-computer interaction at the automation boundary. Window navigation diagrams model the navigation paths between the windows in a GUI or the pages of a Web site. Simulations and prototypes facilitate communicating the interface design to users. © 2005 Prentice Hall 6

Overview (continued) The Model-View Separation pattern guides the connection of the presentation layer and the business layer. It enforces the design principle that objects in the application domain should have no direct knowledge of or be directly coupled to objects in the presentation layer. © 2005 Prentice Hall 7

Modeling the User-Computer Dialogue The user-computer dialogue consists of messages across the automation boundary

Modeling the User-Computer Dialogue (continued) A model of this dialogue should represent: • • • Messages containing data Messages controlling the dialogue Material inputs and outputs Operations or procedures Coordination and sequencing of the actions of the processors © 2005 Prentice Hall 9

State Transition Diagrams A state transition diagram (known in the UML as a statechart) is a useful model of user-computer interaction. It models the actions of a finite state machine with no state memory. This processor may be in only one state at a time. A transition to a different state is caused by the occurrence of an event or by a condition’s becoming true. © 2005 Prentice Hall 10

State Transition Diagrams (continued) Components of a state transition diagram are: • State: where the processor waits for an occurrence to cause a transition • Transition: an instantaneous change to another state © 2005 Prentice Hall 11

State Transition Diagrams (continued) Transitions are labeled to show: • the event(s) which trigger them, and • the action(s) occurring during the transition. An event may be constrained by a guard – a condition which must be true for the transition to occur. © 2005 Prentice Hall 12

State Transition Diagrams (continued) . © 2005 Prentice Hall 13

State Transition Diagrams (continued) A state transition diagram may be decomposed into subdiagrams in

Modeling the Interface Dialogue with State Transition Diagrams Two state transition diagrams can be used to model the user-computer dialogue – one diagram for the human processor and one for the computer. The pair of diagrams shows the synchronization more clearly than a single diagram. Actions of the user are the events which trigger transitions in the computer, and vice versa. © 2005 Prentice Hall 15

Real Use Case Narratives Expanded real use case narratives may help in designing the interaction. They record decisions about the details of the technology, which were deliberately omitted from the essential narratives developed during analysis. © 2005 Prentice Hall 16

Real Use Case Narratives (continued) . © 2005 Prentice Hall 17

An Example of a State Transition Diagram. © 2005 Prentice Hall 18

Navigation is the process of moving through the windows of a graphical user interface (or the pages of a Web site). A well-designed interface facilitates this navigation so that the user knows his or her current location along the navigation path. © 2005 Prentice Hall 19

Window Navigation Diagrams A window navigation diagram models the windows and the navigation paths between them. Figures 12. 13 and 12. 14 show one type of window navigation diagram. © 2005 Prentice Hall 20

Window Navigation Diagrams (continued) . © 2005 Prentice Hall 21

Window Navigation Diagrams (continued) . © 2005 Prentice Hall 22

Simulation of the Interface Design A simulation is often the most effective way of

Specifying the Interface Design . © 2005 Prentice Hall 24

Usability Testing of the Interface Design Careful testing of the interface design is critical. Usability testing evaluates users’ satisfaction with the interface. • • • It requires a user. It observes people doing tasks with the product being tested. Interpreting the observations requires judgment and is therefore imprecise. © 2005 Prentice Hall 25

Methods of Observation in Usability Testing Three methods of observation are used. • Cooperative observation: The designer watches. The user and the designer may ask each other questions. • Observation in a controlled environment: The user thinks out loud. The designer watches without interacting with the user. • Observation in a natural environment: The user performs tasks where the product will be used. © 2005 Prentice Hall 26

The Interface to the Presentation Layer Although user-computer interaction happens at the automation boundary, user requests must reach the business layer via the presentation layer. What kind of visibility should the objects in the GUI have to the business layer? How shall we connect the application layer to the presentation layer? © 2005 Prentice Hall 27

The Interface to the Presentation Layer (continued) . © 2005 Prentice Hall 28

The Model-View Separation Pattern The Model-View Separation pattern enforces the principle that the layers of the three-tier model should have minimum coupling. It permits only indirect communication from the application layer to the presentation layer. © 2005 Prentice Hall 29

The Model-View Separation Pattern (continued). © 2005 Prentice Hall 30

Advantages of Model-View Separation • Minimizes the impact of interface changes on the application layer; • Minimizes the impact of changes to the application logic on the user interface; • Permits multiple views of the same application object, such as a spreadsheet and a chart; © 2005 Prentice Hall 31

Advantages of Model-View Separation (continued) • Permits the application layer to be used with another kind of user interface; • Allows parallel development of the user interface and the application layer; and • Allows execution of the application logic apart from the normal user interface. © 2005 Prentice Hall 32

Model-View Separation – An Example. © 2005 Prentice Hall 33

Summary State transition diagrams effectively model the details of user-computer interaction at the automation boundary. Window navigation diagrams model the navigation paths between the windows in a GUI or the pages of a Web site. The Model-View Separation pattern allows only indirect communication from objects in the business layer to those in the presentation layer. © 2005 Prentice Hall 34