Interaction Engineering

Undergraduate program in Computer Science Eng.

2nd Year, 3rd Trimester

Prof. Narcís Parés

narcis.pares@upf.edu

Interaction Engineering – ESUP – DTIC – UPF 2nd Yr, 3rd Trim

 Usage Centered Design Methodology
• Usage Centered Design vs User Centered Design
• Why Usage Centered Design?
• User Roles
• User Tasks & Use Cases
• Content Model & Navigation Model

TS6 - USAGE CENTERED DESIGN

Interaction Engineering – ESUP – DTIC - UPF 2nd Yr, 3rd Trim

Usage Centered Design 3
Content Model & Navigation Map
Time Duration Topic Details

00:30 25 min Prof. Introduces UCD: Content Model &

+ 5 min provides specific case example
01:00 20 min Teams prepare presentation on Content Prepare presentation
Model of example case slides
01:20 15 min Teams present their analysis on Content 3 min each team
Model of example case
01:35 20 min Prof. introduces UCD: Navigation Map
01:55 10 min Self evaluation quiz
02:05 3 min Next session

Interaction Engineering – ESUP – DTIC - UPF 2nd Yr, 3rd Trim

Usage Centered Design 3
Content Model & Navigation Map
Time Duration Topic Details

00:30 25 min Prof. Introduces UCD: Content Model &

+ 5 min provides specific case example
01:00 20 min Teams prepare presentation on Content Prepare presentation
Model of example case slides
01:20 15 min Teams present their analysis on Content 3 min each team
Model of example case
01:35 20 min Prof. introduces UCD: Navigation Map
01:55 10 min Self evaluation quiz
02:05 3 min Next session

Interaction Engineering – ESUP – DTIC - UPF 2nd Yr, 3rd Trim

 Content Model &
Navigation Map

• What is the Content Model?

– Abstract representation of contents of the diverse interaction
spaces in a system.
– Interaction spaces are the “places” of the user interface where
the users interact with functionalities and information to fulfill
a specific task or set of tasks.
– The content of each interaction space is made up of: tools &
materials needed to complete the use cases.
– Model how users navigate from one interaction space to
another when doing specific use cases.
→ the content model includes a navigation map

Interaction Engineering – ESUP – DTIC - UPF 2nd Yr, 3rd Trim

 Content Model

• Abstract Prototyping
– First think on what is found in the user interface before
worrying bout how it will be organized or visually defined.
– Content Model:
• A piece of paper for every interaction space to be
represented
• Each interaction space must have a name according to
their purpose or the functions they offer
• In every interaction space we have: tools & materials that
must be offered to the users.

Interaction Engineering – ESUP – DTIC - UPF 2nd Yr, 3rd Trim

 Content Model

• Abstract Prototyping using Post-it notes

(Karen Holtzblatt i Hugh Beyer)

Interaction space: House Searcher

House style
Image of House
selector
(zoomable image)
Map of town
(zoomable map)

House plan Town ar

ea
(zoomable image) selector
Land plot map
(zoomable map)

Interaction Engineering – ESUP – DTIC - UPF 2nd Yr, 3rd Trim

 Content Model

• Abstract Prototyping using Post-it notes

– Content Model:
→ designers work global structure and organization
→ no need to draw GUI or choose specific widgets!
– Example: House Searcher
Tool for selecting style of house in interaction space:
• scroll list?
• drop-down list?
• radio buttons?
• ... ?
– At some point we will have to make a decision
however, in these first stages interface only defines
abstract tool; e.g. “Style Selector”
Interaction Engineering – ESUP – DTIC - UPF 2nd Yr, 3rd Trim
 Content Model

• Materials: data, containers, displays, work areas, over

which the tools operate.
– Usually represented by large Post-it House Searcher

notes in warm colors: Image of House

(zoomable image)
House
style
selector
yellow, orange or pink Map of town
(zoomable map)

• Tools: what is needed to perform

House plan Town
(zoomable area
image) Land plot map selector
(zoomable map)

a function.
– Usually represented by small Post-it notes in cold colors:
green and blue

Interaction Engineering – ESUP – DTIC - UPF 2nd Yr, 3rd Trim

 Content Model

• Abstract Prototyping using Post-it notes

– Post-it notes may be relocated between different
interaction spaces and try out different combinations
– If users see very visual prototypes or simulations of
screens
→ they confuse them with final interface
→ Post-it notes in a piece of paper will never be
confused
– Users can focus on
• Verifying if everything that is needed is in the space
• The different content spaces are well organized

Interaction Engineering – ESUP – DTIC - UPF 2nd Yr, 3rd Trim

 Content Model

• How to build a Content Model?

– Derive directly from Use Case Model
– Every Use case initially has its own Interaction Space
• When two or more use cases are very similar or related
→ advisable to integrate into a single interaction space
• If a use case is very complex
→ advisable to split it up into different interaction spaces
(Warning: too many interaction spaces for a single task can
become tedious or frustrating for the user)

Interaction Engineering – ESUP – DTIC - UPF 2nd Yr, 3rd Trim

 Content Model

• How to build a Content Model?

– Steps to follow:
• Examine use cases narratives line by line
→ determine, for each one, which materials the interaction
space will need to offer
→ add a Post-it note for each with brief descriptive name of
content
(brief comments may be added)
• Go over use cases again to
→ extract functions and operators: tools
→ add a Post-it note with brief descriptive name of function
(brief comments may be added)

Interaction Engineering – ESUP – DTIC - UPF 2nd Yr, 3rd Trim

 Content Model

• ATM example

Interaction Space: Welcome

Ask for
Bank Logo
identification

User provides
identification

Interaction Engineering – ESUP – DTIC - UPF 2nd Yr, 3rd Trim

 Content Model

• ATM example

Interaction Space: Select an operation

Exit
Collection of banking
operations
Operations
selector

Language
options
Language
selector

Interaction Engineering – ESUP – DTIC - UPF 2nd Yr, 3rd Trim

 Content Model

• ATM example

Interaction Space: Amount selector

Collection of Option to
pre-defined introduce personal
amounts amount
Amount Tool for
selector introducing
amount
Contextual
Navigator
Exit

Interaction Engineering – ESUP – DTIC - UPF 2nd Yr, 3rd Trim

 Content Model

• ATM example

Interaction Space: Check Account Operations

Exit
Bank account
transactions and total

Navigation

Contextual
navigation

Interaction Engineering – ESUP – DTIC - UPF 2nd Yr, 3rd Trim

 Content Model

• ATM example

Interaction Space: Bank transfer

Options for
destination Options for giving
account amount
Destination Tool for giving
selector amount

Contextual Exit
navigation

Interaction Engineering – ESUP – DTIC - UPF 2nd Yr, 3rd Trim

Usage Centered Design 3
Content Model & Navigation Map
Time Duration Topic Details

00:30 25 min Prof. Introduces UCD: Content Model &

+ 5 min provides specific case example
01:00 20 min Teams prepare presentation on Content Prepare presentation
Model of example case slides
01:20 15 min Teams present their analysis on Content 3 min each team
Model of example case
01:35 20 min Prof. introduces UCD: Navigation Map
01:55 10 min Self evaluation quiz
02:05 3 min Next session

Interaction Engineering – ESUP – DTIC - UPF 2nd Yr, 3rd Trim

 Tasks & Use Cases
The Parking Meter machine
• In your teams, you must:
– Define the three interaction spaces for each of the three
essential use cases that you found in the previous class
– Define the list of tools and materials that are needed
– Provide a visual representation of each interaction
space based on Post-it notes as explained in class
– Prepare a presentation to show this in class

Interaction Engineering – ESUP – DTIC - UPF 2nd Yr, 3rd Trim

Usage Centered Design 3
Content Model & Navigation Map
Time Duration Topic Details

00:30 25 min Prof. Introduces UCD: Content Model &

+ 5 min provides specific case example
01:00 20 min Teams prepare presentation on Content Prepare presentation
Model of example case slides
01:20 15 min Teams present their analysis on Content 3 min each team
Model of example case
01:35 20 min Prof. introduces UCD: Navigation Map
01:55 10 min Self evaluation quiz
02:05 3 min Next session

Interaction Engineering – ESUP – DTIC - UPF 2nd Yr, 3rd Trim

Usage Centered Design 3
Content Model & Navigation Map
Time Duration Topic Details

00:30 25 min Prof. Introduces UCD: Content Model &

+ 5 min provides specific case example
01:00 20 min Teams prepare presentation on Content Prepare presentation
Model of example case slides
01:20 15 min Teams present their analysis on Content 3 min each team
Model of example case
01:35 20 min Prof. introduces UCD: Navigation Map
01:55 10 min Self evaluation quiz
02:05 3 min Next session

Interaction Engineering – ESUP – DTIC - UPF 2nd Yr, 3rd Trim

 Navigation Map

• Navigation Map
– Represents the global architecture of the user interface
– models relations between different interaction spaces
– Map models how users can navigate between different
interaction spaces

– Presents global view of system

→ advisable to double-check to simplify interaction spaces;
e.g. if too many transitions spaces may be merged

Interaction Engineering – ESUP – DTIC - UPF 2nd Yr, 3rd Trim

 Navigation Map

• Navigation Map
– Diagram where every interaction space is represented by a
simple rectangle object with a name
Name of interaction space
[ This can later represent a web
page, a screen, a window, a
pop-up dialogue, etc. ]

– Arrows connect these objects → represent possible

transitions from one space to another:
Trigger action
Context transition
Trigger action
Context transition with implied return

Interaction Engineering – ESUP – DTIC - UPF 2nd Yr, 3rd Trim

 Navigation Map
• ATM example
Welcome space User Identified End Exit space
Provide set of
operations

Select
[OK] Select Transfer
Select Withdraw
Check

Check Operations Withdraw money Transfer

...

Pre-defined Specific
amount amount
[ Only part of full map ]
Amount Introduce
selector amount

Interaction Engineering – ESUP – DTIC - UPF 2nd Yr, 3rd Trim

 Navigation Map

• Navigation Map
– At the end of development, if squares are
substituted by screenshots, Navigation maps may
be used as:
• Aid for design to have a global view of full system
• Visual aids for users
• Maps for the manuals or help info of the application

Interaction Engineering – ESUP – DTIC - UPF 2nd Yr, 3rd Trim

Usage Centered Design 3
Content Model & Navigation Map
Time Duration Topic Details

00:30 25 min Prof. Introduces UCD: Content Model &

+ 5 min provides specific case example
01:00 20 min Teams prepare presentation on Content Prepare presentation
Model of example case slides
01:20 15 min Teams present their analysis on Content 3 min each team
Model of example case
01:35 20 min Prof. introduces UCD: Navigation Map
01:55 10 min Self evaluation quiz
02:05 3 min Next session

Interaction Engineering – ESUP – DTIC - UPF 2nd Yr, 3rd Trim

 Content Mod. & Nav. Map – UCD 2 (2h)
Time Duration Topic Details

00:30 15 min Brief reminder of Content Model & Navigation

Map by prof.
00:45 65 min Teams work on their own chosen web site Class splits up into teams
GUIs. of practice
They must define: (3 students/team)
• The Content Model for their interface:
• Define the list of different Content Spaces.
Create a piece of paper for each Navigation Prof. helps teams; moves
Space with its title at the top. through class from team
• For each Interaction Space define the following to team
using Post-it notes as seen in theory class:
Practice Session

• all the Materials by going over every Use

Case of the previous Practica/Seminar
• all the Tools by going over every Use Case
of the previous Practica/Seminar
• The Navigation Map using all the Interaction Spaces and
defining the possible transitions from one to the other.
01:50 30 min Every team presents their ideas to prof. only, These presentation slides are
to ensure correct approach for doing their preliminary approach to final
presentation for next
Content Model and Navigation Map and to
seminar session
present in next seminar session.
02:20

Interaction Engineering – ESUP – DTIC - UPF 2nd Yr, 3rd Trim

 Content Model

• Materials: data, containers, displays, work areas, over

which the tools operate.
– Usually represented by large Post-it House Searcher

notes in warm colors: Image of House

(zoomable image)
House
style
selector
yellow, orange or pink Map of town
(zoomable map)

• Tools: what is needed to perform

House plan Town
(zoomable area
image) Land plot map selector
(zoomable map)

a function.
– Usually represented by small Post-it notes in cold colors:
green and blue

Interaction Engineering – ESUP – DTIC - UPF 2nd Yr, 3rd Trim

 Content Model

• How to build a Content Model?

– Derive directly from Use Case Model
– Every Use case initially has its own Interaction Space
• When two or more use cases are very similar or related
→ advisable to integrate into a single interaction space
• If a use case is very complex
→ advisable to split it up into different interaction spaces
(Warning: too many interaction spaces for a single task can
become tedious or frustrating for the user)

Interaction Engineering – ESUP – DTIC - UPF 2nd Yr, 3rd Trim

 Content Model

• How to build a Content Model?

– Steps to follow:
• Examine use cases narratives line by line
→ determine, for each one, which materials the interaction
space will need to offer
→ add a Post-it note for each with brief descriptive name of
content
(brief comments may be added)
• Go over use cases again to
→ extract functions and operators: tools
→ add a Post-it note with brief descriptive name of function
(brief comments may be added)

Interaction Engineering – ESUP – DTIC - UPF 2nd Yr, 3rd Trim

 Navigation Map

• Navigation Map
– Represents the global architecture of the user interface
– models relations between different interaction spaces
– Map models how users can navigate between different
interaction spaces

– Presents global view of system

→ advisable to double-check to simplify interaction spaces;
e.g. if too many transitions spaces may be merged

Interaction Engineering – ESUP – DTIC - UPF 2nd Yr, 3rd Trim

 Navigation Map

• Navigation Map
– Diagram where every interaction space is represented by a
simple rectangle object with a name
Name of interaction space
[ This can later represent a web
page, a screen, a window, a
pop-up dialogue, etc. ]

– Arrows connect these objects → represent possible

transitions from one space to another:
Trigger action
Context transition
Trigger action
Context transition with implied return

Interaction Engineering – ESUP – DTIC - UPF 2nd Yr, 3rd Trim

 Navigation Map
• ATM example
Welcome space User Identified End Exit space
Provide set of
operations

Select
[OK] Select Transfer
Select Withdraw
Check

Check Operations Withdraw money Transfer

...

Pre-defined Specific
amount amount
[ Only part of full map ]
Amount Introduce
selector amount

Interaction Engineering – ESUP – DTIC - UPF 2nd Yr, 3rd Trim

 Content Mod. & Nav. Map – UCD 2 (2h)
Time Duration Topic Details

00:30 15 min Brief reminder of Content Model & Navigation

Map by prof.
00:45 65 min Teams work on their own chosen web site Class splits up into teams
GUIs. of practice
They must define: (3 students/team)
• The Content Model for their interface:
• Define the list of different Content Spaces.
Create a piece of paper for each Navigation Prof. helps teams; moves
Space with its title at the top. through class from team
• For each Interaction Space define the following to team
using Post-it notes as seen in theory class:
Practice Session

• all the Materials by going over every Use

Case of the previous Practica/Seminar
• all the Tools by going over every Use Case
of the previous Practica/Seminar
• The Navigation Map using all the Interaction Spaces and
defining the possible transitions from one to the other.
01:50 30 min Every team presents their ideas to prof. only, These presentation slides are
to ensure correct approach for doing their preliminary approach to final
presentation for next
Content Model and Navigation Map and to
seminar session
present in next seminar session.
02:20

Interaction Engineering – ESUP – DTIC - UPF 2nd Yr, 3rd Trim

 Content Mod. & Nav. Map – UCD2 (1h)
Time Duration Topic Details

00:30 50 min Presentations on Content Model & Navigation Every team has 5 min for
Map of Student’s GUI by students their presentation (plus 2
min for comments &
change)
01:20
Seminar Session

Interaction Engineering – ESUP – DTIC - UPF 2nd Yr, 3rd Trim