Stumpf and Teague ObjectOriented Systems Analysis and Design
Stumpf and Teague Object-Oriented Systems Analysis and Design with UML © 2005 Prentice Hall 1
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 between two processors – a human and a computer. © 2005 Prentice Hall 8
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 order to reduce its complexity. © 2005 Prentice Hall 14
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 communicating the design of the interface to users. © 2005 Prentice Hall 23
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
- Slides: 34