User Experience Modelling

1
User Experience Modelling

• UX Model

2
User Experience Model

• Use cases describe the way a system will be used,
  but they dont specify the system user interface.
• User experience storyboards, based on use cases,
  add the process and techniques necessary to
  design and build a user interface that will meet
  requirements and allow users to exercise all the
  system behaviour described in use cases.
• Also facilitate communication among the UI
  designers, and the UI architects and developers
  who design and implement the system.

3
User Experience (UX)

• Term used to describe the team and the activities
  of those specialists responsible for keeping the
  user interface consistent with current paradigms
  and appropriate for the context in which the
  system is to run.
• Some of the concerns of the UX team are
  architecturally significant (navigational flows)
  whereas others are purely cosmetic (colours,
  fonts). We concentrate on architecture here.

4
Information Architect (IA)

• The main member of the UX team is the information
  Architect (IA). The IA is concerned with the
  information content of the screens, their
  organisation and their navigation.
• The principal artefact the IA is responsible for
  is the UX Guidelines Document. This document
  defines the overall look and feel and provides
  a foundation of rules for defining new screens
  and flows.
• The UX team consume Use Cases and, using
  prototypes for illustrating storyboards, produce
  the UX Guideline Document.

5
Artefacts of the UX Model

• Artefacts of the UX Model
• Screens and content descriptions
• Storyboard scenarios
• Navigational paths through the screens
• The UX model is a view of the system through its
  screens.
• The architecturally significant properties of the
  screens and their navigational relationships are
  the main elements of the UX model.
• UML Collaborations capture storyboard scenarios
  of the application in terms of the systems
  screens.
• The UX models storyboards are themselves
  mappings to the use case model.

6
1. Screens
7
Screens

• A screen is something that is presented to the
  user.
• A screen contains the standard user interface
  infrastructure, such as menus and controls, as
  well as business relevant content.
• Content is a combination of
• Static content field names, titles, text and
  images that are constant for each user
• Dynamic content selected products, personal
  information, current status and other computed
  information
• Web pages are mechanisms that build and produce
  screens, usually by server-side mechanisms such
  as ASP, JavaServer Pages, servlets and so on. A
  screen is simply what is presented to the user.

8
Overview of Screen Properties

• A screens properties and its behaviour with the
  user define the screen. These include
• Name and description
• Structure
• Static content
• Business logic content
• Managed content
• Input fields and controls that accept user input
• Descriptions of user interaction with the screen

Screen
Static content Business logic content Managed
content User input
Structure
9
Screen Properties

• Name and description- indicates purpose and why
  the screen is important
• Structure- describes how the screens information
  is laid out
• Static content- all the embedded text and images
  that remain constant over time and with each user
• Input fields and controls identify what
  information the users can provide to the system
  through the interface

10
Dynamic content (business and managed)

• Dynamic content managed by business processes
• Banner ads
• Help and informational messages
• Press releases
• White papers
• Dynamic content managed and delivered by the
  application
• Search results
• Shopping cart line items
• User preferences

11
Storyboards

• When screens are combined and ordered they can
  describe use case scenarios.
• The goal of these so called storyboard
  scenarios is to express a typical use of the
  system through the eyes of the user.
• Each scenario is an expression of a typical use
  of the system.
• Early in development, the screens might simply be
  hand-drawn diagrams but later these evolve into
  HTML files which make their way into the
  application builds.

12
Navigational Paths

• Maps of the navigational paths express the
  structure of an applications screens with their
  potential navigational pathways.
• The maps express all the legal and expected
  pathways through the system

13
UX Modelling with UML

• A screen is represented in a UML model with a
  ltltscreengtgt stereotyped class.
• A screens name is used as the class name and a
  screens description captured as the class
  description.
• Static content such as labels and images are not
  architecturally significant and are not modelled.
  
• Content layout is not modelled for the same
  reasons. (These belong in the UX Guidelines
  Document).
• The simplest way to model dynamic content is to
  enumerate it as attributes of the stereotyped
  class.
• Strict data types are not necessary, it is
  sufficient to identify the domain content by name
  (with elaboration in the accompanying
  documentation)

14
Modelling Dynamic Content

• If there is really only one allowed instance of
  the content in a screen, it should be modelled as
  an attribute of the class (Total appears as a
  class attribute since there is only one
  occurrence of this value to be seen on the
  screen.
• The content in the line items is variable.

ltltScreengtgt
Cart
Total
0..
Line Items
Id Name Short Description Quantity Number
Available Thumbnail URL
15
Modelling Screen Behaviour
The behaviour of interest in the UX model is the
behaviour that the screen user can invoke on the
screen to alter its state or the state of the
system. (Behind the screen action in creating the
screen are not generally of interest in the UX
model although some operations (navigation for
example) are sometimes included for clarity).
ltltScreengtgt
Cart
Total
Update quantity() Delete line item()
0..
Line Items
Id Name Short Description Quantity Number
Available Thumbnail URL
16
Modelling Screen Flow
Catalog
ltltScreengtgt
Home Page Featured product ID Featured product
Name Featured product Price Featured product
description Featured product thumbnail select
featured product select catalog
ltltScreengtgt
Categories
0..
Previous
Category item Id Name Description Image URL
Category Category ID Category name Category
description Category image scroll forward scroll
backward select product
ltltScreengtgt
Subcategories
0..
Next
What might appear in the Product Screen?
Featured Product
Product
ltltScreengtgt
17
Modelling Screen Flow

• Model associations between classes (screens).
• The influence of the browsers back button is of
  no interest here.
• Navigational paths are limited to the expected
  paths, not every possible one.

18
User Input

• In the UX model, it is important to capture each
  named input field and, optionally, the type of
  control used to collect it.
• Input forms are modelled with a separate
  ltltinputformgtgt stereotyped class.
• This becomes a composite aggregate of the screen
  class.
• Fields are captured as attributes and can be
  optionally typed with the type of input control
  they are.

19
User Input

• In this example
• The Input Form Modelled as Contained Class
• The user input to the search form does not
  determine the next screen to be navigated.

ltltScreengtgt
Catalog
Categories
0..
Category Item Id Name Description Image URL
ltltinput formgtgt Search Form
Keywords Text
20
User Input
Here, the user input to the search form
determines the next screen to be navigated.
ltltScreengtgt
Payment Information
ltltScreengtgt
ltltinput formgtgt
Successful
ltltScreengtgt
Incomplete
Payment Info
Order Summary
Missing Data
Error
ltltScreengtgt
Processing Error
21
Screen Compartments

• It is becoming common for I.A.s to define
  screens and the look and feel as a whole- in
  terms of screen compartments, or sub screens.
• Each has a dedicated purpose that is expected to
  combine with other compartments to make a whole
  screen.
• The main of screen compartments advantage is
  reuse.
• They are modelled with a ltltscreen compartmentgtgt
  sterotyped class.
• They are modelled as shared aggregates (just like
  dynamic content).

22
Screen Compartments Example
23
Storyboard Construction

• In a web application, the screens are the
  individual boards that, when strung together,
  tell a story of the application.
• A UML storyboard is a collaboration and is best
  captured by collaboration diagrams.
• The UML storyboard maps to a Use Case.
• Steps
• Illustrate navigation map (sometimes called a
  Participants Diagram) showing all the classes
  participating in the use case being storyboarded
  e.g the browse catalog use case. Remember, not
  all navigation paths may be shown if it
  complicates the diagram.
• Construct a sequence diagram for the browse
  catalog use case.
• Express the storyboard scenario as a
  collaboration diagram.

24
STEP 1

• Illustrate navigation map

25
Catalog Select
Home Page Featured product ID Featured product
Name Featured product Price Featured product
description Featured product thumbnail select
featured product select catalog
ltltScreengtgt
ltltScreengtgt
ltltinput formgtgt Search Form
Categories
Keywords Text
0..
Previous
Category item Id Name Description Image URL
Category Category ID Category name Category
description Category image scroll forward scroll
backward select product
ltltScreengtgt
Subcategories
0..
Next
Line Item ID Name Description Quantity Number
available Thumbnail URL
Featured Product
Product select
ltltScreengtgt
Cart Total Remove
ltltScreengtgt
LineItemsForm RemoveProduct()Checkbox Quantity()
Text
ltltinput formgtgt
26
Step 2

• Construct a sequence diagram

27
Home Page Catalog Category
Product Cart
Navigate
Customer navigates to eRetail site
Catalog
Customer selects the product catalog
Navigate
Select category
Customer selects a category
Navigate
Scroll forward
Customer scrolls forward Then backward through
the List of products
Scroll backward
Select product
Customer selects a product
Navigate
The system responds with a detailed product
description
Select product
Navigate
28
STEP 3

• Express the storyboard scenario as a
  collaboration diagram

29
1.
ltltScreengtgt Home Page
ltltScreengtgt Electronics Catalog
2.
4.
3.
ltltScreengtgt CamerasCategory
ltltScreengtgt SonyP210Product
ltltScreengtgt Cart
5.
6.
ltltScreengtgt CanonR45Product
ltltScreengtgt CamerasCategory
7.
8.
9.
ltltScreengtgt Kodak K23Product
ltltScreengtgt Cart
ltltScreengtgt CamerasCategory
10.
30
Problem Description
User needs
Many requirements will be resolved
through interaction with actors
The experience of the user during Interactions
needs to be modelled
Req Spec.
Use Cases
UX Model
Analysis Models To model the user/applications
domain

• Class Diagrams
• Object Diagrams
• Sequence Diagrams
• Collaboration Diagrams
• Activity Diagrams

• Class Diagrams
• Activity Diagrams
• Sequence diagrams
• Collaboration diagrams

• Use Case Diagrams
• Use Case text
• Activity Diagrams
• Sequence diagrams

Templates