INTERACTION DESIGN PROCESS

NM3243 USER EXPERIENCE DESIGN

8:08:02 AM
 M O D U L E OV E RV I E W

1. Introduction 7. Social Interaction

2. The UX Design Process; 8. Requirement Discovery
Conceptualizing Interaction
9. Emotional Interaction
3. Cognitive Processes and Frameworks 10. Prototyping and Iterative Design
4. Data Gathering 11. Evaluation with users
5. Data Analysis
12. Evaluation without users
6. Midterm Quiz 13. Final Quiz
ADMINISTRIVIA
 T U TO R I A L S

• Tutorials are starting next week (Week 3)

• You will be receiving an invite to the Miro platform via email once tutorial
allocations are (somewhat) finalized
• If you have not secured a tutorial slot for whatever reason,
you should submit an appeal via ModReg
• We will use tutorials as an opportunity to help you prepare
for the two individual assignments and to work on the project
• Read the Tutorial Overview document to prepare for tutorials
 TO DAY W E W I L L C OV E R …

• Process of designing for interaction

• Understanding the problem space
• Exploring the design space
• User-centered, iterative design
• Conceptualizing interaction
• Conceptual models
• Conceptual knowledge informing design
 THE
INTERACTION DESIGN
P RO C E S S
F U N DA M E N TA L AC T I V I T I E S O F I N T E R AC T I O N D E S I G N

DISCOVERING
REQUIREMENTS

DESIGNING
EVALUATING
ALTERNATIVES

FINAL PRODUCT

PROTOTYPING

Adapted from Sharp, Preece and Rogers, Interaction Design: Beyond Human-Computer Interaction,
D O U B L E D I A M O N D M O D E L O F I N T E R AC T I O N D E S I G N
Discover Define Develop Deliver
insight into the problem the area to focus upon potential solutions Solutions that work

Problem Definition
Problem

Solution
Research Design

Design Brief

Adapted from Sharp, Preece and Rogers, Interaction Design: Beyond Human-Computer Interaction,
D O U B L E D I A M O N D M O D E L O F I N T E R AC T I O N D E S I G N
Discover Define Develop Deliver
insight into the problem the area to focus upon potential solutions Solutions that work

Problem Definition
Problem

Solution
Problem Space

Design Brief

Adapted from Sharp, Preece and Rogers, Interaction Design: Beyond Human-Computer Interaction,
 U N D E R S TA N D I N G T H E P RO B L E M S PAC E

• Discover
• What is the current user experience, products, and solutions?
• What is the context of the user?

• Define
• Why is a change needed?
• How will the change improve the user experience?
 U N D E R S TA N D I N G T H E P RO B L E M S PAC E

• But how do you answer those questions?

• Requires understanding of theories (Week 3, 7, 9)
• Human Cognition
• Social Interaction
• Emotional Behavior
• Requires observation of actual current user practices in context (Week 4, 5)
 USER-CENTERED DESIGN

• Early focus on users and tasks

• Who are the users?
• How do they currently perform the tasks involved?
• Empirical measurement
• User research before any actual design starts
• Testing involving the user and prototypes throughout the design process
• Can be qualitative or quantitative
• Iterative process
• Research, prototype, test, (re)design, repeat!
 P R AC T I C A L U S E R C O N S I D E R AT I O N S

• Who are the users?

• Consider which stakeholders may be relevant
• What are the user’s needs?
• Note that user needs and user wants are two different things!
• Users are not designers (designers are not users either)
• Users tend not to know what is possible, but they know what they want
• Do not expect users or stakeholders to tell you what they need
CONCEPTUALIZING
DESIGN
D O U B L E D I A M O N D M O D E L O F I N T E R AC T I O N D E S I G N
Discover Define Develop Deliver
insight into the problem the area to focus upon potential solutions Solutions that work

Problem Definition
Problem

Solution
Design Space

Design Brief

Adapted from Sharp, Preece and Rogers, Interaction Design: Beyond Human-Computer Interaction,
 CONCEPTUAL MODEL

“a high-level description of how a system is organized and operates [that enables]

designers to straighten out their thinking before they start laying out their widgets”
Johnson and Henderson, 2002
 CONCEPTUAL MODEL

Provides a working strategy and framework of general concepts and interrelations

• Can be made up of
• metaphors and analogies
• What is this used for? How to use it?
• concepts that the users are exposed to
• Task-domain objects that users can create and/or manipulate
• Attributes of those objects
• Operations that can be performed on them
• relationships and mappings between concepts and the user experience
 C O N C E P T U A L M O D E L : M E TA P H O R S & A N A LO G I E S

Conceptualizes user activity

• Spatial metaphor:
the Internet as an “ocean of information”
• Users surf the net
• Traversing this ocean of information

• But has this metaphor aged well?

 C O N C E P T U A L M O D E L : M E TA P H O R S & A N A LO G I E S

Conceptualizes user interfaces

• Use of appropriate interface metaphors helps users form good conceptual models
• Provides structure similar to something the user is familiar with
• May have its own behaviors and properties!
 C O N C E P T U A L M O D E L : M E TA P H O R S & A N A LO G I E S

Note that interface metaphors may not always align with what the user is familiar with!
• Do you typically have a trash can / recycling bin sitting on top of your desk?
 C O N C E P T U A L M O D E L : M E TA P H O R S & A N A LO G I E S

Conceptualizes user operations

• The product has been put into your shopping cart
 C O N C E P T U A L M O D E L : M E TA P H O R S & A N A LO G I E S

Benefits of using metaphors and analogies

• Makes learning new systems easier
• Helps users understand the underlying conceptual model

Drawbacks of using metaphors and analogies

• Can break conventions and defy expectations
• Recycle bin on desktop example
• Forces users to understand the system based on the metaphor
• Incomplete or inaccurate understanding
• May constrain designers unnecessarily
 C O N C E P T U A L M O D E L : M E TA P H O R S & A N A LO G I E S

Useful for novices but can be limiting for expert users

• Often not completely accurate
• Trying to ensure that metaphors or analogies hold across an entire system can lead to the
metaphors or analogies breaking down
INTERACTION
TYPES
 I N T E R AC T I O N T Y P E S

• Instructing Users instruct / tells the system what to do

• Conversing
• Manipulating
• Exploring
• Responding
 I N T E R AC T I O N T Y P E S

• Instructing Users engage in a conversation with the system as if it were human

• Conversing
• Manipulating
• Exploring
• Responding
 I N T E R AC T I O N T Y P E S

• Instructing Users interact based on understanding of the physical world

• Conversing
• Manipulating
• Exploring
• Responding
 I N T E R AC T I O N T Y P E S

• Instructing Three core properties of direct manipulation

• Continuous representation of objects and actions
• Conversing • Physical actions instead of issuing commands
• Manipulating • Rapid reversible actions with immediate feedback

• Exploring
• Responding
 I N T E R AC T I O N T Y P E S

• Instructing Users interact by moving through virtual or physical environments

• Conversing
• Manipulating
• Exploring
• Responding
 I N T E R AC T I O N T Y P E S

• Instructing System takes initiative to alert user to something it “thinks” is of interest

• Conversing
• Manipulating
• Exploring
• Responding
CONCEPTUAL KNOWLEDGE
INFORMING DESIGN
 C O N C E P T U A L K N OW L E D G E I N F O R M I N G D E S I G N

• Paradigms A set of practices agreed upon by a community (researchers,

designers etc.)
• Visions
For example
• Theories • WIMP (windows, icons, menus, pointers)
• Ubiquitous computing
• Models
• Wearable computers
• Frameworks • Internet of Things
 C O N C E P T U A L K N OW L E D G E I N F O R M I N G D E S I G N

• Paradigms Future scenarios that frame research and development

• Visions Typically, in terms of film or narrative

• Theories
• Models
• Frameworks
 C O N C E P T U A L K N OW L E D G E I N F O R M I N G D E S I G N

• Paradigms An explanation of some aspect of a phenomenon

• E.g. Dual Process Theory (Week 3)
• Visions
• Theories
• Models
• Frameworks
 C O N C E P T U A L K N OW L E D G E I N F O R M I N G D E S I G N

• Paradigms A simplification of some aspect of phenomenon

• E.g. Don Norman’s “Seven Stages of Interaction” (Week 3)
• Visions
• Theories
• Models
• Frameworks
 C O N C E P T U A L K N OW L E D G E I N F O R M I N G D E S I G N

• Paradigms Set of interrelated concepts from a given domain

• E.g. Distributed Cognition (Week 3)
• Visions
• Theories
• Models
• Frameworks
WRAP UP
 W H AT W E C OV E R E D TO DAY

• Interaction design follows a user-centered, iterative process

• It is important to be able to conceptualize the design space
• The problem space informs the design space
• Conceptual models provide a high-level description of system
• Interface metaphors provide a (somewhat) familiar structure
• Interaction types describe what use is doing when interacting
• Interface types are ways of supporting interaction
• Conceptual models can be inspired by paradigms, visions, theories, models and frameworks
 W H AT I S N E X T ?

1. Introduction 7. Social Interaction

2. The UX Design Process; 8. Requirement Discovery
Conceptualizing Interaction
9. Emotional Interaction
3. Cognitive Processes and 10. Prototyping and Iterative Design
Frameworks
11. Evaluation with users
4. Data Gathering
12. Evaluation without users
5. Data Analysis
13. Final Quiz
6. Midterm Quiz
 P R E PA R I N G F O R N E X T W E E K

• Do the reading for Week 3

• Chapter 4: Cognitive Aspects

• Remember that tutorials start Week 3, read the Tutorial Overview to prepare