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

 Understanding the User: social & contextual aspects
Contextual Design Methodology
• Contextual Inquiry
• Work Modelling

TS2 - CONTEXTUAL DESIGN

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

Understanding the User 1
Contextual Inquiry & Work Modeling
Time Duration Topic Details

00:30 20 min Prof. Introduces Contextual Inquiry &

+ 5 min provides specific case example
00:55 10 min Teams prepare presentation on Contextual Prepare presentation
Inquiry of example case slides
01:05 15 min Teams present their Contextual Inquiry of 3 min each team
example case
01:20 25 min Prof. introduces Work Modeling of
Contextual Inquiry
01:45 10 min Teams prepare presentation on Work Prepare presentation
Modeling of example case slides
01:55 15 min Teams present Work Modeling of example 3 min each team
case
02:10 10 min Self evaluation Quiz
02:20 3 min Next session

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

 Interaction Design
• What does “design” entail?
– Define communication between system and person
– Define which parts the user can control
– Define how the user will be able to control them
• With which actions?
• With which interfaces? (input)
• How are these interfaces linked to the actions in the application? (input
mapping)
– Define how the system will provide responses
• With what information?
• With what stimuli? (image, sound, text, vibration, ...)
• With which interfaces? (output)
• How are these responses linked to the interfaces towards the users? (output
mapping)

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

 Understanding the User

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

 Interaction Design
• Adopt a user centred standpoint
– User profile
– Tasks
– Interaction place

• It is usually an iterative process

– Requirements
– Conceptual designs
– Low and high level prototypes
– Evaluation (& not only on the final application)
– Set-up

• It is a multidisciplinary process
– Graphic, industrial and interaction designers
– Engineers (specialized in human factors)
– Sociologists & Anthropologists
– Computer scientists, ...

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

 Understanding the User
• Social & contextual aspects:
Contextual Design Methodology
Hugh Beyer, Karen Holtzblatt: Contextual design: defining customer-centered
systems, Morgan Kaufmann, 1998 (QA76.9.S88 B49)

– Users do not interact with computer systems in an isolated

manner.
• Social relations are very important.
• Usually integrated in social group or context.
• Work practice is social and the tools are used in a social context.
• Its is important that we study the work environments (or leisure, or
learning, etc. environments) → we will call them “activity” contexts.

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

 Contextual Design Method
• Basic ideas of Contextual Design:
– Systems → provide real support to the activity.
– Understand activity practice.
– It is only possible in the correct activity context.
– Very often it precisely entails understanding
• what is not found in the current application,
• or what is not done with this application.
– Designers:
• Develop an institutional (or corporative) strategy,
• Structure a system that supports the redesign of the activity.
Interaction Engineering – ESUP – DTIC - UPF 2nd Yr, 3rd Trim
 Contextual Design Method
• Methodology → stages:
– Contextual Inquiry: understanding users
– Work Modeling: representation of work (the activity)
– Consolidation: integrate results
– Work Redesign: vision implemented through storyboarding
– User environment design: design explicitation, including the
environment
– Mock-up and test with customers: tests with prototypes from the start
– Putting into practice: implementation process

• We will only use the first two stages

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

 Contextual Inquiry
• How to undertake CI:
– Observe activity
→ discover what is important.
Users are not always aware of what they do, especially in daily activities
→ get the details.
Avoid generalizing & summary visions
→ obtain structure
The strategies and techniques behind the activity
→ they are discovered through examples
– Relation: Master (user) ←→ Apprentice (we)

– Avoid other relation models such as:

• interviewee (user) / interviewer (we)
• newbie (user) / expert (we)
• guest (user) / host (we)

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

 Contextual Inquiry
• How to undertake CI (cont):
– Structure of a CI:

Initial conventions: Transition: Inquiry: Closure:

• presentation, • new rules of “game”; • the user starts doing the • the first interpretations
explanations, start relation task & we may interrupt to are commented & any
permissions master - apprentice ask for clarification on weak points are clarified
(5-15 min) (1-2 min) some details (10 min)
(variable time)

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

 Contextual Inquiry
• How to undertake CI (cont):
– Partner relationship: alternate observation &
probing.
– Interpretations: share them with users.
– It is key to focus: guide conversation
(Caveat: this may hide the unexpected).
– Expand focus: defy suppositions, as opposed to
trying to validate them.

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

Understanding the User 1
Contextual Inquiry & Work Modeling
Time Duration Topic Details

00:30 20 min Prof. Introduces Contextual Inquiry &

+ 5 min provides specific case example
00:55 10 min Teams prepare presentation on Contextual Prepare presentation
Inquiry of example case slides
01:05 15 min Teams present their Contextual Inquiry of 3 min each team
example case
01:20 25 min Prof. introduces Work Modeling of
Contextual Inquiry
01:45 10 min Teams prepare presentation on Work Prepare presentation
Modeling of example case slides
01:55 15 min Teams present Work Modeling of example 3 min each team
case
02:10 10 min Self evaluation Quiz
02:20 3 min Next session

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

 Contextual Inquiry: Example Case
The Parking Meter machine
• In your teams, you must:
– Simulate you are in the correct context
• Which context is it? What characteristics does it have? Define a specific (real) location where the CI
would be done.
– Simulate one of you is a typical user
• What is the profile of this user? What will the user be carrying? What will the user be expecting?
What will the user be worrying about? Will the user interact with other people around him/her?
– Simulate how the CI will be undertaken
• Where will you (as observer) be located? What tasks will the user be doing? How are you going
to be taking notes of what is occurring?
– Simulate the full execution of CI and take notes on what you observe, learn, discover
• Make your “user” act as if s/he is really going to use the Parking Meter. Do not focus your
observations on how the user interacts with the parking meter only. Remember you must also
observe and note everything that happens to the user all around him/her in that context. Start
from the point in which the user must find where the PM is found.

• Note: In a real CI, you will NOT be defining context, user profile, tasks, etc., because
you do not know them before hand.
This is precisely what you will be trying to find out.
Here we do it to make you think about these issues and to be able to simulate them.

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

Understanding the User 1
Contextual Inquiry & Work Modeling
Time Duration Topic Details

00:30 20 min Prof. Introduces Contextual Inquiry &

+ 5 min provides specific case example
00:55 10 min Teams prepare presentation on Contextual Prepare presentation
Inquiry of example case slides
01:05 15 min Teams present their Contextual Inquiry of 3 min each team
example case
01:20 25 min Prof. introduces Work Modeling of
Contextual Inquiry
01:45 10 min Teams prepare presentation on Work Prepare presentation
Modeling of example case slides
01:55 15 min Teams present Work Modeling of example 3 min each team
case
02:10 10 min Self evaluation Quiz
02:20 3 min Next session

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

Understanding the User 1
Contextual Inquiry & Work Modeling
Time Duration Topic Details

00:30 20 min Prof. Introduces Contextual Inquiry &

+ 5 min provides specific case example
00:55 10 min Teams prepare presentation on Contextual Prepare presentation
Inquiry of example case slides
01:05 15 min Teams present their Contextual Inquiry of 3 min each team
example case
01:20 25 min Prof. introduces Work Modeling of
Contextual Inquiry
01:45 10 min Teams prepare presentation on Work Prepare presentation
Modeling of example case slides
01:55 15 min Teams present Work Modeling of example 3 min each team
case
02:10 10 min Self evaluation Quiz
02:20 3 min Next session

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

 Contextual Inquiry
• Activity (work) Modeling
– Modeling helps:
• Visualize the activity,
• Show important differences.
– Models:
• Flow, communication & coordination with other agents
• Sequence, detailed steps of tasks
• Physical, structure of the environment
• Artifact, physical objects involved
• Cultural, constraints in the user’s understanding of the world

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

 Contextual Design: Activity Modeling

• Full example: The ATM (automatic [bank] teller machine)

– Study the use of an ATM; one of those “hole in the wall” found on the sidewalk; i.e.
not those that are in a cubicle within the bank office.
– We wish to understand everything that entails using the ATM and not only its
interface → context
– We can choose a couple of representative users.
– We ask them to use the ATM as they always do.
– We ask permission to observe them. We can ask permission to record them.
– We must situate ourselves at a certain distance to see the global situation, but
sufficiently close to see the details and how they use the interface.
– We must not interrupt activity unless we have an urgent doubt we need to clarify at
that precise instant and we cannot wait until later when activity is over.
– We finally model what we have seen, noted and perhaps recorded.

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

 Contextual Design: Activity Modeling

• Flow Model:
– How is the activity divided among different people?
– How are they coordinated to do the activity?
– Indentify individuals, groups, & responsibilities
– Highlight communication paths, actions and themes
– Identify communication artifacts
– Identify communication locations and breaks in communication
– Graphic representation:
• Individuals → bubbles with list of responsibilities
Main user at the center of diagram

• Communication paths → arrows linking bubbles

• Communication artifacts → small rectangles on arrows

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

 Contextual Design: Activity Modeling

Flow Model Example

Bank
personnel Problems Partner
with ATM Bank operations: Lives and
Must make
office work balance, shares
and help users withdrawal, … expenses with
our user

Check
operations
Confirm
operations
Transfer
Required
information

Payment Which account

confirmation should I use?
Human
Resources
department of
your work Have I
They pay your been paid
this
salary ATM user
month?
Is worried about Check
payment
Salary doing bank
payment operations such
as withdrawals, Check
transfers, etc. payment

Other ATM
users waiting Companies you
They have agreed direct
different Are you taking Payment payment with
priorities, too long? confirmed They must charge
schedules, etc. correct amount and on
correct date.

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

 Contextual Design: Activity Modeling

• Sequence Model:
– Represents steps for actions to occur
– Provides low level information → useful to make detailed
design decisions
– Identify primary and secondary goals
– Identify triggers of actions
– Detail real actions, their order in time, any loops that may
appear, branching, & breaks in the sequence

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

 Contextual Design: Activity Modeling

• Sequence Model Trigger: Access to ATM

Example
Intent: withdraw money
ATM asks for identification
Intent: identify yourself
Get some money Look for credit card

from ATM Insert card

Sometimes cannot remember PIN &
finds it in smartphone or paper egenda
Input PIN

Intent: withdraw specific amount of money

Select operation:
withdrawal

Select account
User might not have
sufficient money in account

Confirm operation
User can forget card

Take card
User can forget money

Take money
Interaction Engineering – ESUP – DTIC - UPF 2nd Yr, 3rd Trim
 Contextual Design: Activity Modeling

• Physical Model:
– Study how physical space facilitates or hinders the activity
– Model of the site where the activity takes place and its spatial configuration,
which reflects the activity
– Graphic representation:
• The plan of the activity site
• The locations where activity occurs

• The structures that define and limit space: walls, furniture, etc.

• Use of space and movement

• The network of tools and artifacts

• The organization of tools and artifacts in space
• Breaks in space

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

 Contextual Design: Activity Modeling

• Physical Model Example

1. The city area may be unsafe.

2. Sidewalk might be narrow and people

bother you on passing.

3. The height of the ATM must be comfortable

to use it standing up. BUT must [3] [6] [5]
accommodate different heights of people
and people in wheelchairs.
[1] [4]
4. No safe and comfortable place to leave
your bag or case while using ATM. [2]
5. People waiting in a queue put pressure on
you.

6. People around you could catch your private [7]

information: PIN, balance, personal data, [8]
etc.

7. Noisy place may be difficult to hear sound

feedback.

8. Ambient light or direct sunlight may make it

difficult to see screen properly.

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

 Contextual Design: Activity Modeling

• Artifact Model:
– Objects that are used or created during the activity
– Objects that “tell stories” about the activity
– Objects that show suppositions, concepts, strategies, or structure of activity
– Important to go over artifacts together with user and save copies
– Graphic representation:
• Physical structure of artifact: its parts and structure
• Its use
• Information it presents
• Any annotations that may denote informal use
• Its presentation
• Breaks in use or in activity
• Any other conceptual information

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

 Contextual Design: Activity Modeling

• Artifact Model
Example

A smartphone during ATM use

Uses:
1. Remember PIN for ATM. Potential problems:
2. Check e-mail for bank account number for 1. Depends on battery!
a transfer.
2. Keeps a hand busy.
3. Call relative to ask or agree on some bank
action. 3. One extra object to protect
(safety), both in privacy and the
4. Etc. actual object.
Interaction Engineering – ESUP – DTIC - UPF 2nd Yr, 3rd Trim
 Contextual Design: Activity Modeling

• Cultural Model:
– Helps visualize the “culture” of the context of activity
– Users are immersed in a culture → it is invisible (e.g. water & fish, air & people)
– Relevant influences: standards, policies, power, values, expectations, desires, group
identity, emotions, style, preferences, etc.
– Make influences on user emerge explicitly: what conditions choices? what leads to
constraints? etc.

– Graphic representation:
• The user in the center
• The influencers (individuals or groups) that affect the activity practice surrounding user
• The extension of the effect of the influencers
• The influences that affect user
• Breaks in the activity

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

 Contextual Design: Activity Modeling

• Cultural People in the Don’t spend

Partner
Model
so much!
area
Example: People in the queue
are in a hurry!
I must pay
attention to I need you to Do the weekly
too many transfer money shopping at the
Potential to account
lack of issues supermarket
safety

U1
ATM User
Offer new Did you hear “X”
banking products I don’t feel lost her job
safe using because of
recession?
the ATM
We want you to do
all operations Watch how he
through the ATM spends his money
You must learn to in the current
recession context
use interactive
technologies
Bank Society

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

 Contextual Design: Activity Modeling

• Not all models are always relevant

• In every case we must choose those that are most

adequate → that provide the most information and help
understanding the context

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

 Contextual Inquiry: Example Case
The Parking Meter machine
• In your teams, you must:
– Choose 2 out of the 5 models for your CI
• Think which of the 5 models: Flow, Sequence, Physical, Artifact, or Cultural, are most relevant to your
case and choose the first two.
– Justify why you took those 2
• Explain what do these 2 chosen models describe especially well from the context of your case.
– Justify why you think the other 3 were not as relevant
• Explain why these 3 rejected models are not as relevant as the other 2 chosen ones.
– Provide the diagrams that you think you would obtain for your 2 chosen models
• Provide a diagram for each of your 2 chosen models in the same format as the ones we have
defined before.

• Note: In a real CI, you will NOT be choosing 2 only, although you will probably not be
using all 5 models either.

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

 Contextual Inquiry
• Activity (work) Modeling
– Modeling helps:
• Visualize the activity,
• Show important differences.
– Models:
• Flow, communication &
coordination with other
agents
• Sequence, detailed steps of
tasks
• Physical, structure of the
environment
• Artifact, physical objects
involved
• Cultural, constraints in the
user’s understanding of the
world

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

Understanding the User 1
Contextual Inquiry & Work Modeling
Time Duration Topic Details

00:30 20 min Prof. Introduces Contextual Inquiry &

+ 5 min provides specific case example
00:55 10 min Teams prepare presentation on Contextual Prepare presentation
Inquiry of example case slides
01:05 15 min Teams present their Contextual Inquiry of 3 min each team
example case
01:20 25 min Prof. introduces Work Modeling of
Contextual Inquiry
01:45 10 min Teams prepare presentation on Work Prepare presentation
Modeling of example case slides
01:55 15 min Teams present Work Modeling of example 3 min each team
case
02:10 10 min Self evaluation Quiz
02:20 3 min Next session

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

Understanding the User 1
Contextual Inquiry & Work Modeling
Time Duration Topic Details

00:30 20 min Prof. Introduces Contextual Inquiry &

+ 5 min provides specific case example
00:55 10 min Teams prepare presentation on Contextual Prepare presentation
Inquiry of example case slides
01:05 15 min Teams present their Contextual Inquiry of 3 min each team
example case
01:20 25 min Prof. introduces Work Modeling of
Contextual Inquiry
01:45 10 min Teams prepare presentation on Work Prepare presentation
Modeling of example case slides
01:55 15 min Teams present Work Modeling of example 3 min each team
case
02:10 10 min Self evaluation Quiz
02:20 3 min Next session

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

Understanding the User 1
Contextual Inquiry & Work Modeling
Time Duration Topic Details

00:30 20 min Prof. Introduces Contextual Inquiry &

+ 5 min provides specific case example
00:55 10 min Teams prepare presentation on Contextual Prepare presentation
Inquiry of example case slides
01:05 15 min Teams present their Contextual Inquiry of 3 min each team
example case
01:20 25 min Prof. introduces Work Modeling of
Contextual Inquiry
01:45 10 min Teams prepare presentation on Work Prepare presentation
Modeling of example case slides
01:55 15 min Teams present Work Modeling of example 3 min each team
case
02:10 10 min Self evaluation Quiz
02:20 3 min Next session

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

 Contextual Inquiry (2h)
Time Duration Topic Details

00:30 15 min Brief reminder of Contextual Inquiry by prof.

00:45 65 min Teams work on their own chosen web site Class splits up into teams
GUIs. of practice
They must: (3 students/team)
• Formalize the context of their GUI (based on previous
practice session & new theory on Contextual Design)
• Formalize the profile of the user of their GUI (based Prof. helps teams; moves
again on …) through class from team
• Analyze and define how they will undertake Contextual to team
Inquiry
Practice Session

• Analyze and define which two models they will use and
justify why
• Analyze and define which three models they will NOT
use and justify why
• Prepare a short presentation to show to prof.

01:50 30 min Every team presents their ideas to prof. only, These presentation slides are
to ensure correct approach for doing preliminary approach to final
presentation for next
Contextual Inquiry & Modeling and to present
seminar session
in next seminar session.
02:20

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

 Contextual Inquiry
• How to undertake CI:
– Understand activity practice.
– It is only possible in the correct activity context.
– Very often it precisely entails understanding
• what is not found in the current application,
• or what is not done with this application.
– Partner relationship: Master (user) ←→ Apprentice (we)
– Alternate observation & probing.
– Interpretations: share them with users.
– It is key to focus: guide conversation
(Caveat: this may hide the unexpected).
– Expand focus: defy suppositions, as opposed to trying to validate
them.

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

 Contextual Inquiry
• How to undertake CI (cont):
– Structure of a CI:

Initial conventions: Transition: Inquiry: Closure:

• presentation, • new rules of “game”; • the user starts doing the • the first interpretations
explanations, start relation task & we may interrupt to are commented & any
permissions master - apprentice ask for clarification on weak points are clarified
(5-15 min) (1-2 min) some details (10 min)
(variable time)

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

 Contextual Inquiry
• Activity (work) Modeling
– Modeling helps:
• Visualize the activity,
• Show important differences.
– Models:
• Flow, communication &
coordination with other
agents
• Sequence, detailed steps of
tasks
• Physical, structure of the
environment
• Artifact, physical objects
involved
• Cultural, constraints in the
user’s understanding of the
world

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

 Contextual Inquiry (2h)
Time Duration Topic Details

00:30 15 min Brief reminder of Contextual Inquiry by prof.

00:45 65 min Teams work on their own chosen web site Class splits up into teams
GUIs. of practice
They must: (3 students/team)
• Formalize the context of their GUI (based on previous
practice session & new theory on Contextual Design)
• Formalize the profile of the user of their GUI (based Prof. helps teams; moves
again on …) through class from team
• Analyze and define how they will undertake Contextual to team
Inquiry
Practice Session

• Analyze and define which two models they will use and
justify why
• Analyze and define which three models they will NOT
use and justify why
• Prepare a short presentation to show to prof.

01:50 30 min Every team presents their ideas to prof. only, These presentation slides are
to ensure correct approach for doing preliminary approach to final
presentation for next
Contextual Inquiry & Modeling and to present
seminar session
in next seminar session.
02:20

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

 Contextual Inquiry (2h)
Time Duration Topic Details

00:30 15 min Brief reminder of Contextual Inquiry by prof.

00:45 65 min Teams work on their own chosen web site Class splits up into teams
GUIs. of practice
They must: (3 students/team)
• Formalize the context of their GUI (based on previous
practice session & new theory on Contextual Design)
• Formalize the profile of the user of their GUI (based Prof. helps teams; moves
again on …) through class from team
• Analyze and define how they will undertake Contextual to team
Inquiry
Practice Session

• Analyze and define which two models they will use and
justify why
• Analyze and define which three models they will NOT
use and justify why
• Prepare a short presentation to show to prof.

01:50 30 min Every team presents their ideas to prof. only, These presentation slides are
to ensure correct approach for doing preliminary approach to final
presentation for next
Contextual Inquiry & Modeling and to present
seminar session
in next seminar session.
02:20

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

 Contextual Inquiry (2h)
Time Duration Topic Details

00:30 105 Presentations on Contextual Inquiry and Every team has 10 min
min Modeling by students for their presentation
(plus 3 min for
comments)
02:15
Seminar Session

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