Chapter 4Chapter 4User Experience ModelUser Experience Model

User experience model (Ux)User experience model (Ux) Visual specification of the user interfaceVisual specification of the user interface Both static and dynamic aspects of the systemBoth static and dynamic aspects of the system Covers user interface elements and their navigationCovers user interface elements and their navigation Main concern is how to present system data to the Main concern is how to present system data to the

useruser Not about attractiveness and visual appeal of the Not about attractiveness and visual appeal of the

user interfaceuser interface Capture how the user will be carrying out the task Capture how the user will be carrying out the task

defined in the use case.defined in the use case. Use user stories and use cases to develop a draft of Use user stories and use cases to develop a draft of

the user experience model.the user experience model. This development may provide opportunity to refine This development may provide opportunity to refine

use cases.use cases.

Ux: ElementsUx: Elements Screens: a list of screens makes up the user a list of screens makes up the user

interfaceinterface Screens are related to each other with Screens are related to each other with

associations which identify navigation paths.associations which identify navigation paths. Navigation map: convey the structure of the : convey the structure of the

user experience modeluser experience model A screen may contain multiple A screen may contain multiple input forms, each , each

of which contains user input fields.of which contains user input fields. Screens and input forms have class stereotypes Screens and input forms have class stereotypes

of of <<screen>><<screen>> and and <<input form>>,<<input form>>, respectively respectively The association between a screen and its forms The association between a screen and its forms

is UML composition since forms are created and is UML composition since forms are created and destroyeddestroyed by the screen in the Web by the screen in the Web environment.environment.

Screen and input form Screen and input form relationshiprelationship

Figure 4-2

Ux: ElementsUx: Elements Each screen should define the following:Each screen should define the following:

The user actions that should be available to the user. User The user actions that should be available to the user. User actions are modeled as class operationsactions are modeled as class operations

The environment actions on the screen. Those actions are The environment actions on the screen. Those actions are normally performed by the web browser or server on the normally performed by the web browser or server on the screen. A “$” is used to prefixed the action namescreen. A “$” is used to prefixed the action name

One environment action for each message that can be One environment action for each message that can be displayed on the screen. Such messages may be like error displayed on the screen. Such messages may be like error message, notifications, system statemessage, notifications, system state

An attribute in the screen class representing the message type An attribute in the screen class representing the message type (e.g., “(e.g., “problem messageproblem message”), its value depends on the error”), its value depends on the error

One operation for each message to be displayed. E.g., One operation for each message to be displayed. E.g., $display invalid acct info message().$display invalid acct info message().

Dynamic content of the screen, i.e., what the system has to Dynamic content of the screen, i.e., what the system has to display on screen. It covers business information. It is display on screen. It covers business information. It is modeled as a set of attributes. E.g., display user account modeled as a set of attributes. E.g., display user account info, user name, address, etc are modeled as attributes.info, user name, address, etc are modeled as attributes.

Ux: Screen Mock-upsUx: Screen Mock-ups

Use screen mock-ups to model the Use screen mock-ups to model the user interface.user interface.

HTML documents may be created as HTML documents may be created as mock-ups.mock-ups.

Create Account pageCreate Account page

Figure 4-9

Verify Account pageVerify Account page

Figure 4-10

Ux: Navigation mapUx: 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 interfaceIt is a summary of the structure of the user interface Identify each association with a name that represents Identify each association with a name that represents

the action that has initiated the navigationthe action that has initiated the navigation Since a screen may contain multiple forms, a link Since a screen may contain multiple forms, a link

should be from an input form to another screen, not should be from an input form to another screen, not from the parent screen to another screen.from the parent screen to another screen.

You should be able to trace every navigation path to You should be able to trace every navigation path to a flow of events in a use case.a flow of events in a use case.

Keep every screen within three navigational steps of Keep every screen within three navigational steps of the home screenthe home screen

One map for each business use case packageOne map for each business use case package

Ux: Use case storyboardsUx: Use case storyboards They represent the dynamic aspect of the user experience They represent the dynamic aspect of the user experience

model.model. A storyboard for each use case.A storyboard for each use case. Two diagrams: flow diagram and participants diagramTwo diagrams: flow diagram and participants diagram Flow diagramFlow diagram: :

a sequence diagram representing the collaboration of the user and a sequence diagram representing the collaboration of the user and the screens involved for the task.the screens involved for the task.

Messages in a flow diagram must match the operations defined in Messages in a flow diagram must match the operations defined in each corresponding class.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 diagramParticipants diagram: :

It contains the screens and input forms involved in the user It contains the screens and input forms involved in the user interactions for the specific use case.interactions for the specific use case.

One participants diagram per storyboard.One participants diagram per storyboard.

Tracing storyboards to use Tracing storyboards to use cases.cases.

Figure 4-4

Participation Diagram: Participation Diagram: Create AcctCreate Acct

Figure 4-7

Flow diagram: Basic flow of Flow diagram: Basic flow of Create Account use caseCreate Account use case

Figure 4-5

Participants diag.: Create acctParticipants diag.: Create acct

Figure 4-6

Flow diagram: Create AcctFlow diagram: Create Acct

Figure 4-8

Ux: Navigation mapUx: 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 interfaceIt is a summary of the structure of the user interface Identify each association with a name that represents Identify each association with a name that represents

the action that has initiated the navigationthe action that has initiated the navigation Since a screen may contain multiple forms, a link Since a screen may contain multiple forms, a link

should be from an input form to another screen, not should be from an input form to another screen, not from the parent screen to another screen.from the parent screen to another screen.

You should be able to trace every navigation path to You should be able to trace every navigation path to a flow of events in a use case.a flow of events in a use case.

Keep every screen within three navigational steps of Keep every screen within three navigational steps of the home screenthe home screen

One map for each business use case packageOne map for each business use case package

User Acct Mngt - navigation User Acct Mngt - navigation mapmap

Figure 4-3

Ux: SummaryUx: Summary Elements: screens and input formsElements: screens and input forms Artifacts: Artifacts:

Navigation mapsNavigation maps (static): valid navigation paths between screens and (static): valid navigation paths between screens and input formsinput forms

Use case storyboardsUse case storyboards (dynamic): the realization of the flow of events (dynamic): the realization of the flow of events for the uses that involves graphical user interactionsfor the uses that involves graphical user interactions

Storyboards: Storyboards: Flow diagramFlow diagram: the sequence of screens navigation for a specific task : the sequence of screens navigation for a specific task Participants diagramParticipants diagram: the screens and input forms and the navigation : the screens and input forms and the navigation

paths for a specific taskpaths for a specific task One navigation map per packageOne navigation map per package One use case storyboard per use caseOne use case storyboard per use case Each storyboard should contain at least one flow diagram for the Each storyboard should contain at least one flow diagram for the

basic flow of the use case.basic flow of the use case. Each storyboard must be traceable to a use caseEach storyboard must be traceable to a use case