1. Chapter 4 User Experience Model

2. User experience model (Ux) Visual specification of the user interface Visual specification of the user interface Both static and dynamic aspects of the system Both static and dynamic aspects of the system Covers user interface elements and their navigation Covers user interface elements and their navigation Main concern is how to present system data to the user Main concern is how to present system data to the user Not about attractiveness and visual appeal of the user interface Not about attractiveness and visual appeal of the user interface Capture how the user will be carrying out the task defined in the use case. Capture how the user will be carrying out the task defined in the use case. Use user stories and use cases to develop a draft of the user experience model. Use user stories and use cases to develop a draft of the user experience model. This development may provide opportunity to refine use cases. This development may provide opportunity to refine use cases.

3. Ux: Elements a list of screens makes up the user interface Screens: a list of screens makes up the user interface Screens are related to each other with associations which identify navigation paths. Screens are related to each other with associations which identify navigation paths. : convey the structure of the user experience model Navigation map: convey the structure of the user experience model A screen may contain multiple, each of which contains user input fields. A screen may contain multiple input forms, each of which contains user input fields. Screens and input forms have class stereotypes of > and >, respectively Screens and input forms have class stereotypes of > and >, respectively The association between a screen and its forms is UML composition since forms are created and destroyed by the screen in the Web environment. The association between a screen and its forms is UML composition since forms are created and destroyed by the screen in the Web environment.

4. Screen and input form relationship Figure 4-2

5. Ux: Elements Each screen should define the following: Each screen should define the following: The user actions that should be available to the user. User actions are modeled as class operations The user actions that should be available to the user. User actions are modeled as class operations The environment actions on the screen. Those actions are normally performed by the web browser or server on the screen. A “$” is used to prefixed the action name The environment actions on the screen. Those actions are normally performed by the web browser or server on the screen. A “$” is used to prefixed the action name One environment action for each message that can be displayed on the screen. Such messages may be like error message, notifications, system state One environment action for each message that can be displayed on the screen. Such messages may be like error message, notifications, system state An attribute in the screen class representing the message type (e.g., “problem message”), its value depends on the error An attribute in the screen class representing the message type (e.g., “problem message”), its value depends on the error One operation for each message to be displayed. E.g., $display invalid acct info message(). One operation for each message to be displayed. E.g., $display invalid acct info message(). Dynamic content of the screen, i.e., what the system has to display on screen. It covers business information. It is modeled as a set of attributes. E.g., display user account info, user name, address, etc are modeled as attributes. Dynamic content of the screen, i.e., what the system has to display on screen. It covers business information. It is modeled as a set of attributes. E.g., display user account info, user name, address, etc are modeled as attributes.

6. Ux: Screen Mock-ups Use screen mock-ups to model the user interface. Use screen mock-ups to model the user interface. HTML documents may be created as mock-ups. HTML documents may be created as mock-ups.

7. Create Account page Figure 4-9

8. Verify Account page Figure 4-10

9. Ux: Navigation map It represents the navigation paths between screens. It represents the navigation paths between screens. It is a summary of the structure of the user interface It is a summary of the structure of the user interface Identify each association with a name that represents the action that has initiated the navigation Identify each association with a name that represents the action that has initiated the navigation Since a screen may contain multiple forms, a link should be from an input form to another screen, not from the parent screen to another screen. Since a screen may contain multiple forms, a link should be from an input form to another screen, not from the parent screen to another screen. You should be able to trace every navigation path to a flow of events in a use case. You should be able to trace every navigation path to a flow of events in a use case. Keep every screen within three navigational steps of the home screen Keep every screen within three navigational steps of the home screen One map for each business use case package One map for each business use case package

10. Ux: Use case storyboards They represent the dynamic aspect of the user experience model. They represent the dynamic aspect of the user experience model. A storyboard for each use case. A storyboard for each use case. Two diagrams: flow diagram and participants diagram Two diagrams: flow diagram and participants diagram Flow diagram: Flow diagram: a sequence diagram representing the collaboration of the user and the screens involved for the task. a sequence diagram representing the collaboration of the user and the screens involved for the task. Messages in a flow diagram must match the operations defined in each corresponding class. Messages in a flow diagram must match the operations defined in each corresponding class. One flow diagram for each possible flow of events in the use case. One flow diagram for each possible flow of events in the use case. Participants diagram: Participants diagram: It contains the screens and input forms involved in the user interactions for the specific use case. It contains the screens and input forms involved in the user interactions for the specific use case. One participants diagram per storyboard. One participants diagram per storyboard.

11. Tracing storyboards to use cases. Figure 4-4

12. Participation Diagram: Create Acct Figure 4-7

13. Flow diagram: Basic flow of Create Account use case Figure 4-5

14. Participants diag.: Create acct Figure 4-6

15. Flow diagram: Create Acct Figure 4-8

16. Ux: Navigation map It represents the navigation paths between screens. It represents the navigation paths between screens. It is a summary of the structure of the user interface It is a summary of the structure of the user interface Identify each association with a name that represents the action that has initiated the navigation Identify each association with a name that represents the action that has initiated the navigation Since a screen may contain multiple forms, a link should be from an input form to another screen, not from the parent screen to another screen. Since a screen may contain multiple forms, a link should be from an input form to another screen, not from the parent screen to another screen. You should be able to trace every navigation path to a flow of events in a use case. You should be able to trace every navigation path to a flow of events in a use case. Keep every screen within three navigational steps of the home screen Keep every screen within three navigational steps of the home screen One map for each business use case package One map for each business use case package

17. User Acct Mngt - navigation map Figure 4-3

18. Ux: Summary Elements: screens and input forms Elements: screens and input forms Artifacts: Artifacts: Navigation maps (static): valid navigation paths between screens and input forms Navigation maps (static): valid navigation paths between screens and input forms Use case storyboards (dynamic): the realization of the flow of events for the uses that involves graphical user interactions Use case storyboards (dynamic): the realization of the flow of events for the uses that involves graphical user interactions Storyboards: Storyboards: Flow diagram: the sequence of screens navigation for a specific task Flow diagram: the sequence of screens navigation for a specific task Participants diagram: the screens and input forms and the navigation paths for a specific task Participants diagram: the screens and input forms and the navigation paths for a specific task One navigation map per package One navigation map per package One use case storyboard per use case One use case storyboard per use case Each storyboard should contain at least one flow diagram for the basic flow of the use case. Each storyboard should contain at least one flow diagram for the basic flow of the use case. Each storyboard must be traceable to a use case Each storyboard must be traceable to a use case