user experience modelling
DESCRIPTION
User Experience Modelling. UX Model. User Experience Model. Use cases describe the way a system will be used, but they don’t specify the system user interface. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: User Experience Modelling](https://reader036.vdocument.in/reader036/viewer/2022062309/56815a9a550346895dc81614/html5/thumbnails/1.jpg)
User Experience Modelling
UX Model
![Page 2: User Experience Modelling](https://reader036.vdocument.in/reader036/viewer/2022062309/56815a9a550346895dc81614/html5/thumbnails/2.jpg)
User Experience Model
• Use cases describe the way a system will be used, but they don’t 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.
![Page 3: User Experience Modelling](https://reader036.vdocument.in/reader036/viewer/2022062309/56815a9a550346895dc81614/html5/thumbnails/3.jpg)
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.
![Page 4: User Experience Modelling](https://reader036.vdocument.in/reader036/viewer/2022062309/56815a9a550346895dc81614/html5/thumbnails/4.jpg)
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.
![Page 5: User Experience Modelling](https://reader036.vdocument.in/reader036/viewer/2022062309/56815a9a550346895dc81614/html5/thumbnails/5.jpg)
Artefacts of the UX Model
• Artefacts of the UX Model1. Screens and content descriptions2. Storyboard scenarios3. 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 system’s screens. • The UX model’s storyboards are themselves mappings to the use
case model.
![Page 6: User Experience Modelling](https://reader036.vdocument.in/reader036/viewer/2022062309/56815a9a550346895dc81614/html5/thumbnails/6.jpg)
1. Screens
![Page 7: User Experience Modelling](https://reader036.vdocument.in/reader036/viewer/2022062309/56815a9a550346895dc81614/html5/thumbnails/7.jpg)
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.
![Page 8: User Experience Modelling](https://reader036.vdocument.in/reader036/viewer/2022062309/56815a9a550346895dc81614/html5/thumbnails/8.jpg)
Overview of Screen Properties
A screen’s 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
Stru
ctur
e
![Page 9: User Experience Modelling](https://reader036.vdocument.in/reader036/viewer/2022062309/56815a9a550346895dc81614/html5/thumbnails/9.jpg)
Screen Properties
• Name and description- indicates purpose and why the screen is important
• Structure- describes how the screen’s 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
![Page 10: User Experience Modelling](https://reader036.vdocument.in/reader036/viewer/2022062309/56815a9a550346895dc81614/html5/thumbnails/10.jpg)
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
![Page 11: User Experience Modelling](https://reader036.vdocument.in/reader036/viewer/2022062309/56815a9a550346895dc81614/html5/thumbnails/11.jpg)
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.
![Page 12: User Experience Modelling](https://reader036.vdocument.in/reader036/viewer/2022062309/56815a9a550346895dc81614/html5/thumbnails/12.jpg)
Navigational Paths
• Maps of the navigational paths express the structure of an application’s screens with their potential navigational pathways.
• The maps express all the legal and expected pathways through the system
![Page 13: User Experience Modelling](https://reader036.vdocument.in/reader036/viewer/2022062309/56815a9a550346895dc81614/html5/thumbnails/13.jpg)
UX Modelling with UML
• A screen is represented in a UML model with a <<screen>> 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)
![Page 14: User Experience Modelling](https://reader036.vdocument.in/reader036/viewer/2022062309/56815a9a550346895dc81614/html5/thumbnails/14.jpg)
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.
Cart
Line Items
0..*
Total
IdNameShort DescriptionQuantityNumber AvailableThumbnail URL
<<Screen>>
![Page 15: User Experience Modelling](https://reader036.vdocument.in/reader036/viewer/2022062309/56815a9a550346895dc81614/html5/thumbnails/15.jpg)
Modelling Screen Behaviour
Cart
Line Items0..*
Total
IdNameShort DescriptionQuantityNumber AvailableThumbnail URL
<<Screen>> 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).
Update quantity()Delete line item()
![Page 16: User Experience Modelling](https://reader036.vdocument.in/reader036/viewer/2022062309/56815a9a550346895dc81614/html5/thumbnails/16.jpg)
Modelling Screen Flow Home Page
Featured product IDFeatured product NameFeatured product PriceFeatured product descriptionFeatured product thumbnail
select featured productselect catalog
Product
Category
Category IDCategory nameCategory descriptionCategory image
scroll forwardscroll backwardselect product
Catalog
Category item
IdNameDescriptionImage URL
Previous
Next
Featured Product
Subcategories
0..*
Categories0..*
<<Screen>>
<<Screen>>
<<Screen>>
<<Screen>>
What might appear in the Product Screen?
![Page 17: User Experience Modelling](https://reader036.vdocument.in/reader036/viewer/2022062309/56815a9a550346895dc81614/html5/thumbnails/17.jpg)
Modelling Screen Flow
• Model associations between classes (screens). • The influence of the browser’s back button is of
no interest here. • Navigational paths are limited to the expected
paths, not every possible one.
![Page 18: User Experience Modelling](https://reader036.vdocument.in/reader036/viewer/2022062309/56815a9a550346895dc81614/html5/thumbnails/18.jpg)
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 <<inputform>> 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.
![Page 19: User Experience Modelling](https://reader036.vdocument.in/reader036/viewer/2022062309/56815a9a550346895dc81614/html5/thumbnails/19.jpg)
User Input
Category Item
IdNameDescriptionImage URL
<<input form>> Search Form
Catalog
Keywords: Text
<<Screen>>
Categories0..*
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.
![Page 20: User Experience Modelling](https://reader036.vdocument.in/reader036/viewer/2022062309/56815a9a550346895dc81614/html5/thumbnails/20.jpg)
User Input
<<Screen>>
<<Screen>>
<<Screen>><<Screen>> <<input form>>
Payment Information
Missing Data Payment Info Order Summary
Processing Error
Error
SuccessfulIncomplete
Here, the user input to the search form determines the next screen to be navigated.
![Page 21: User Experience Modelling](https://reader036.vdocument.in/reader036/viewer/2022062309/56815a9a550346895dc81614/html5/thumbnails/21.jpg)
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 <<screen compartment>>
sterotyped class.• They are modelled as shared aggregates (just like
dynamic content).
![Page 22: User Experience Modelling](https://reader036.vdocument.in/reader036/viewer/2022062309/56815a9a550346895dc81614/html5/thumbnails/22.jpg)
Screen Compartments Example
+Seacrh()
-Featured product ID-Featured product name-Featured product price-Featured product short description-Featured product thumbnail
«Screen»Home
«Screen Compartment»Menu
«Screen Compartment»Footer
«Screen Compartment»Header
«Input Form»Search Form
11
11
1
1
1
1
![Page 23: User Experience Modelling](https://reader036.vdocument.in/reader036/viewer/2022062309/56815a9a550346895dc81614/html5/thumbnails/23.jpg)
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:1. 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.
2. Construct a sequence diagram for the browse catalog use case.
3. Express the storyboard scenario as a collaboration diagram.
![Page 24: User Experience Modelling](https://reader036.vdocument.in/reader036/viewer/2022062309/56815a9a550346895dc81614/html5/thumbnails/24.jpg)
STEP 1
Illustrate navigation map
![Page 25: User Experience Modelling](https://reader036.vdocument.in/reader036/viewer/2022062309/56815a9a550346895dc81614/html5/thumbnails/25.jpg)
Home Page
Featured product IDFeatured product NameFeatured product PriceFeatured product descriptionFeatured product thumbnail
select featured productselect catalog
Productselect
Category
Category IDCategory nameCategory descriptionCategory image
scroll forwardscroll backwardselect product
CatalogSelect
Category item
IdNameDescriptionImage URL
Previous
Next
Featured Product
Subcategories
0..*
Categories0..*
<<Screen>>
<<Screen>>
<<Screen>>
<<Screen>>
<<input form>> Search Form
Keywords: Text
CartTotalRemove
<<Screen>>
Line ItemIDNameDescriptionQuantityNumber availableThumbnail URL LineItemsForm
RemoveProduct():CheckboxQuantity():Text
<<input form>>
![Page 26: User Experience Modelling](https://reader036.vdocument.in/reader036/viewer/2022062309/56815a9a550346895dc81614/html5/thumbnails/26.jpg)
Step 2
Construct a sequence diagram
![Page 27: User Experience Modelling](https://reader036.vdocument.in/reader036/viewer/2022062309/56815a9a550346895dc81614/html5/thumbnails/27.jpg)
:Home Page :Catalog :Category :Product :Cart
Navigate
CatalogNavigate
Customer navigates to eRetail site
Customer selects the product catalog
Select categoryCustomer selects a category
Navigate
Scroll forward
Scroll backward
Select product
Customer scrolls forwardThen backward through theList of products
Navigate
Customer selects a product
The system responds with a detailed product description
Select product
Navigate
![Page 28: User Experience Modelling](https://reader036.vdocument.in/reader036/viewer/2022062309/56815a9a550346895dc81614/html5/thumbnails/28.jpg)
STEP 3
Express the storyboard scenario as a collaboration diagram
![Page 29: User Experience Modelling](https://reader036.vdocument.in/reader036/viewer/2022062309/56815a9a550346895dc81614/html5/thumbnails/29.jpg)
<<Screen>>
Home Page<<Screen>>
Electronics: Catalog
<<Screen>>
Cameras:Category
<<Screen>>
SonyP210:Product
<<Screen>>
Cart
<<Screen>>
CanonR45:Product
<<Screen>>
Kodak K23:Product
<<Screen>>
Cart
<<Screen>>
Cameras:Category
<<Screen>>
Cameras:Category
1.
2.
3. 4.
5.
6.
7.
8. 9.
10.
![Page 30: User Experience Modelling](https://reader036.vdocument.in/reader036/viewer/2022062309/56815a9a550346895dc81614/html5/thumbnails/30.jpg)
ReqSpec.
*
*
*
*
Use CasesAnalysis Models: To model the user/applications domain
•Class Diagrams•Object Diagrams•Sequence Diagrams•Collaboration Diagrams•Activity Diagrams
UX Model
•Use Case Diagrams•Use Case text•Activity Diagrams•Sequence diagrams
•Class Diagrams•Activity Diagrams•Sequence diagrams•Collaboration diagrams
Problem Description User needs Many requirements willbe resolved throughinteraction with actors
The experience of the user duringInteractions needs to be modelled
Templates