INTERACTION
DESIGN
Today’s objectives
• Understanding & conceptualizing interaction
• Project page
• Visio – workflow
UNDERSTANDING &
CONCEPTUALIZING
INTERACTION
Understanding & conceptualizing
interaction
• When creating interactive products, can be tempting to
begin by designing the physical interface and what
technologies and interaction styles to use (e.g. multitouch,
speech, graphical user interface, gesture-based).
• A problem with starting here is that usability and user
experience goals can be overlooked.
Usability goals
A problem with starting here is that usability and user
experience goals can be overlooked.
• Effective to use
• Efficient to use
• Safe to use
• Have good utility
• Easy to learn
• Easy to remember how to use
User experience goals
A problem with starting here is that usability and user experience goals can
be overlooked.
Desirable aspects
satisfying
enjoyable
engaging
pleasurable
exciting
entertaining
helpful
motivating
challenging
enhancing
supporting creativity
cognitively stimulating
Undesirable aspects
boring
frustrating
making one feel guilty
annoying
childish
fun
provocative
surprising
sociability rewarding
emotionally fulfilling
unpleasant
patronizing
making one feel stupid
cutesy
gimmicky
Understanding & conceptualizing
interaction
• Must articulate nature of the problem space before
choosing technology or deciding how to design the
physical aspects
• Must understand and conceptualize current user
experience/product and how it is going to be improved or
changed.
• Designers must think through how their ideas will support
or extend the way people communicate and interact in
their everyday activities.
Understanding problem space
1.
2.
3.
4.
5.
Identifying usability and UX goals or ensuring they are
met.
What do you want to create?
What are your assumptions?
What are your claims?
Will it achieve what you hope it will? If so, how?
9
What is an assumption?
• taking something for granted when it needs further
investigation
• e.g. people will want to watch TV while driving
www.id-book.com
10
What is an assumption?
• What are the assumptions and claims made about 3D
TV?
Assumptions: realistic or wish-list?
• People won’t mind wearing glasses needed to see in
3D in their living rooms – reasonable
• People won’t mind paying a lot more for a new 3D-
enabled TV screen - not reasonable
• People would really enjoy the enhanced clarity and
color detail provided by 3D – reasonable
• People will be happy carrying around their own special
glasses - reasonable only for a very select bunch of
users
Understanding problem space
• Allowing people to explain assumptions and claims about
why they think something might be a good idea enables
design team to view multiple perspectives on the problem
space, revealing conflicts and problems.
Benefits of conceptualising
• Orientation
• enables design team to ask specific questions about
how the conceptual model will be understood
• Open-minded
• prevents design teams from becoming narrowly
focused early on
• Common ground
• allows design teams to establish a set of commonly
agreed terms
Understand problem space
Core questions to help design team analyse
problem space:
1. Are there problems with existing product or UX?
2. Why do you think there are problems?
3. How will your proposed design overcome them?
4. How will the proposed design extend or change
current ways of doing things?
From
Problem
space
Conceptualizing
design space
Source: www.theaterxtremeseattle.com/
Conceptualizing design space
From problem space to design space:
• A good understanding of the problem space helps inform
the design space
• e.g., what kind of interface, behavior, functionality to provide
Conceptualizing design space
• Conceptualizing the design space – describe
what system is going to do for users.
• Conceptualizing the design space –
• outlines what people can do with product and
• what concepts are needed to understand how to
interact with it.
• We conceptualize the design space using a conceptual
model
Your heater?
You return home to find your house very
cold. You have friends coming over in 2
minute so you need to get the house
warm as quickly as possible.
What do you do?
Conceptualizing design space
• A conceptual model is:
“a high-level description of how a system is organized and operates.”
(Johnson and Henderson, 2002, p. 26)
• Organization of functionality and interaction to
assist user in understanding how system works.
Conceptualizing design space
• Designers have a model…, users develop a model and
hopefully they are the same –designers’ model must be
clear.
• People develop knowledge about how to interact with the
systems and how they systems works – this is often
referred to as the user’s mental model.
• Mental models are used by people to reason about a
system and to try to figure out how to use it, particularly
when something unexpected happens.
• Designers have a model…, users develop a model and
hopefully they are the same –designers’ model must be
clear.
Conceptualizing design space
• Designer's must specify completely and unambiguously
the user’s whole experience....
• The most important thing to design properly is the user's
conceptual model. Everything else should be
subordinated to making that model clear, obvious, and
substantial.
Source: (Liddle - http://hci.stanford.edu/publications/bds/2-liddle.html
Conceptualizing design space
Conceptual model should consist of:
1.
Major metaphors and analogies
2.
Concepts users are exposed (e.g., folders, URL,
dragging, drop, etc.)
3.
Relationships between the concepts (e.g., one
object contains another )
4.
Mappings between the concepts
What are the:
1.
Major metaphors and analogies
2.
Concepts users are exposed
3.
Relationships between the concepts
4.
Mappings
Conceptualizing design space
• … what concepts are needed to understand how to
interact with this interface.
Mappings?
Insert screwdriver
Turning screwdriver
Conceptualizing design space
• … what concepts are needed to understand how to
interact with this interface.
Interaction Example:
Multi-touch surface
http://www.youtube.com/watch?v=REIH4AjQxXM
Conceptualizing design space
• … what concepts are needed to understand how to
interact with this interface.
Conceptualizing design space
• … what concepts are needed to understand how to
interact with this interface.
Browsing
Shopping | Shopping Cart
Checkout
Linking
Departments
Searching
Scrolling
Buttons
URL
Metaphors/analogies
Metaphors/analogies
Print calendar
Concepts
Navigating
Search
Entering an
appointment
Creating a
calendar
Scroll
Relationships between
concepts
Enter a appointment =
highlights in calendar
By clicking a date, 24
hours will display here.
Appointments here are for
one day. There can be
multiple appointments in
one day
The selected date.
Mappings
Enter an appointment
• appointment is saved
• shows in calendar
• get alert on date and time.
Select a date, full day
(24 hours) display
here
Click next button
• next calendar month appears
INTERACTION STYLES
AND TYPES
Another way of conceptualizing the design
space
Interaction Example
Conceptualizing the design space
• Another way of conceptualizing the design space is in
terms of the user’s interaction with the product.
• Helps form a conceptual model by determining what
kinds of interaction to use and why.
Interaction mode
• Think about how users will interact with the
system/product (talk, instruct, manipulate, etc.).
• Can help designers formulate a conceptual model
by determining kinds of interaction to use, and
why, before committing to a particular interface.
In a noisy room is a talk interaction type appropriate?
Interaction mode
• Interaction type:
• what the user is doing when interacting with a system,
e.g. instructing, talking, browsing, etc.
• Interaction style:
• kind of interface used to support the mode, e.g. speech,
menu-based, gesture
Interaction types
• Instructing
• issuing commands using keyboard and function keys and selecting
options via menus
• Conversing
• interacting with the system as if having a conversation
• Manipulating
• interacting with objects in a virtual or physical space by
manipulating them (WIMP)
• Exploring
• moving through a virtual environment or a physical space
Instructing
• Users instruct system by telling it what to do
• e.g., tell the time, print a file, find a photo
• Common interaction type underlying a range of
devices and systems
• Main benefit of instructing is to support quick and
efficient interaction
• good for repetitive kinds of actions performed on
multiple objects
Instructing
Vending machines
Which is easiest to use?
Conversing
• Like having a conversation with another human
• More like two-way communication, with the system
acting like a partner rather than a machine that obeys
orders
• Ranges from simple voice recognition menu-driven
systems to more complex ‘natural language’ dialogues
• Examples include search engines, advice-giving
systems and help systems (e.g., Sync)
Sync example
Pros and cons of conversational model
• Allows users, especially novices and technophobes, to
interact with the system in a way that is familiar
• makes them feel comfortable, at ease and less
scared
• Misunderstandings can arise when the system does
not know how to parse what the user says
Manipulating
• Exploit’s users’ knowledge of how they move and
manipulate in the physical world
• Virtual objects can be manipulated by moving,
selecting, opening, and closing them
Direct manipulation
• Shneiderman (1983) coined the term Direct Manipulation
• Digital objects can be designed so they can be interacted
with analogous to how physical objects are manipulated
• Assumes that direct manipulation interfaces enable users to
feel that they are directly controlling the digital objects
• WIMP - window, icon, menu, pointing device
Manipulative
Core principles of DM
• Physical actions and button pressing instead of
issuing commands with complex syntax
• Rapid reversible actions with immediate feedback
on object of interest
Exploring
• Involves users moving through virtual or physical
environments
• Examples include:
• 3D desktop virtual worlds where people navigate using
mouse around different parts to socialize (e.g., Second
Life)
• CAVEs where users navigate by moving whole body,
arms, and head
A CAVE
Cave video
http://www.youtube.com/watch?v=-Sf6bJjwSCE
Many kinds of interaction styles available…
•
•
•
•
•
•
•
•
•
•
Command
Speech
Data-entry
Form fill-in
Query
Graphical
Web
Pen
Augmented reality
Gesture
and even...
Choose an interaction style
•
•
•
•
•
Direct Manipulation
Menu selection
Form fill-in
Command language
Natural language
Problems with interface metaphors
(Nelson, 1990)
• Break conventional and cultural rules
• e.g., recycle bin placed on desktop
• Can constrain designers in the way they conceptualize a problem
•
•
•
•
space
Conflict with design principles
Forces users to only understand the system in terms of the metaphor
Designers can inadvertently use bad existing designs and transfer the
bad parts over
Limits designers’ imagination in coming up with new conceptual
models
Activity
• A company has been asked to design a computer-based
system that will encourage autistic children to
communicate and express themselves better.
• What type of interaction would be appropriate to use at
the interface for this particular user group?
THREADS OF
TECHNICAL
DEVELOPMENT
• Find a one-trip fight from Los Angeles to Sacramento,
which leaves Los Angeles on February 1st. You need to
find the flight with the departure time closest to 4:00pm.
UNDERSTANDING AND
CONCEPTUALIZING
INTERACTION
UNDERSTANDING AND
CONCEPTUALIZING
INTERACTION