Interaction design workshop

Shyamala Prayaga
Interaction Design Bootcamp

Introduction to Interaction Design
Cognitive and Conceptual Model
3 ACTIVITES – INTERACTION DESIGN

Interaction Design Basics
3 ACTIVITES

User Interfaces & Effects on Users
Interface Types

Why bother about Interaction
Design?

What makes the DIFFERENCE between them?

How do you define GOOD
Interaction?

In a NUTSHELL
Interaction design is the field concerned with the
design of interactive products that are easy, effective
and enjoyable to use.

Interaction Design RELATED field

Who is Involved in Interaction Design
Interaction Designers
Product Designers
Graphic Designers
Artists
Animators
Photographers
Film Makers

Interaction Design Roles
Interaction Designers
Involved in all aspects of interaction design
Usability Engineers
Focus on user-based evaluation of products
Information Architects
Plan and structure interactive products
User-Experience Designers
Conduct ﬁeld studies to inform the design of products

The Goals of Interaction Design
Effectiveness
Efﬁciency
Safety
Utility
Learnability
Memorability
Enjoyability
Aesthetics
Usability Goals User Experience Goals

Interaction Design Principles
Visibility:
Make important information visible.
Feedback:
Provide feedback about processes.
Constraints:
Restrict interactions in a context.
Mapping:
Effects of controls should be obvious.
Consistency:
Similar controls, similar effects.
Affordance:
Provide clues about use of controls.

Usability Principles
Visibility:
Keep the user informed.
Familiarity:
Speak the user’s language.
Freedom:
Provide easy escape routes.
Consistency:
Use appropriate standards.
Helpfulness:
Help users recover from errors.
Prevention:
Prevent users from making errors.

Recognition:
Don’t make users rely on memory.
Efﬁciency:
Provide short-cuts for expert users.
Minimalism:
Avoid overloading users with info.
Help:
Provide users with helpful documentation.
Usability Principles Contd…

What’s the DIFFERENCE?
“Design Principles and Usability Principles are very similar
but they come from different disciplines and have different
uses”
The design principles are intended to be used as prescriptions during the design of
interactive product.
The usability principles are intended to be uses as guidelines during the evaluation
of interactive products.

Control Redesign – 30 minutes
1. Look for real world controls that need to be improved from among the enclosed list
of contexts from the activity sheet
2. Redesign a control of your choice
3. Present the design as a poster in the workshop with details mentioned in the activity
sheet

Where does interaction design start?
The User Interface?
The System Architecture?
The Computer Program?
None of the Above

Interaction design starts with the USERS...

Hence its important to understand
COGNITIVE and CONCEPTUAL Models

Cognitive Model?
What is that?

Cognition is what goes on in our heads.
Thinking
Sensing
Understanding
learning
reasoning
planning
imagining
decision making
problem solving
using language

Experiential:
perceiving, acting and reacting to events

Reﬂective:
thinking, planning and decision-making

Cognitive models are models of human
cognition

How are cognitive
models developed?
Psychologists and cognitive
scientists study how humans
perceive, think, act in
laboratory tests

What do cognitive models tell us?
Cognitive models tell us about human cognitive strengths and
weaknesses, i.e. what humans are good and bad at.

Beneﬁts of Cognitive Modelling

Cognitive models can help interaction designers in a
number of ways:
Inform design decisions
Help designers produce better designs
Extend human capabilities
Help designers produce systems that build on what humans are already good at
Compensate for human weaknesses
Help designers produce systems that can help people do things that that ﬁnd
difﬁcult

Cognitive Processes
Cognitive is often described as processes
Attention
Paying attention to what’s important in the world
Perception
Perceiving and recognizing things in the world
Memory
Remembering useful things about the world

Learning
Learning new things about the world
Using Language
Listening, speaking, reading and writing
Problem-Solving
Planning, reasoning and decision-making

Attention
Selecting things to concentrate on
Depends upon a person’s goals and the information
available in the person’s situation
Goals
The goals that a person is trying to achieve can greatly
affect what people will consider important.
Information
How information is presented can greatly effect what
people attend to in an interface.

Design Implications of Attention
Make information salient when it’s needed
Use techniques like animation, color, decoration, ordering,
sequencing and layout to draw attention.
Avoid cluttering up an interface
Interfaces that are plain are much easier to use because it is
easier for users to ﬁnd important information.

Perception
Getting information from the
environment
Information is sensed and transformed into
experiences through pattern recognition
During perception sense data is
combined
Perceptions often involve multiple senses
making multimedia a powerful interaction
design too

Design Implications of Perception
Information needs to be represented in ways that are
easily recognized
• The meaning of icons and symbols should be
obvious
• Sounds should be easily distinguished from each
other
• Text should be easily distinguished from its
background
• Speech should be easily distinguished and
understood
• Tactile feedback should be distinct and appropriate

Memory
Recalling knowledge and experiences
Memories are recalled to support cognition and take appropriate
actions
Memories do not store every detail
Typically, memories of experiences do not contain every sight, smell,
sound etc.
Memories aren’t perfect
We forget things we’d like to remember and we remember things
we’d like to forget
Context is important
Context can greatly affect what we remember and can lead to the
construction of false memories

Strategies for Remembering
Mnemonics
Mnemonics turn unmemorable sequences into easily remembered phrases
e.g. Many people ﬁnd it difﬁcult to remember the order of the compass directions in
a clockwise order is NESW, especially the positions of east and west, a mnemonic is
“Never Eat Shredded Wheat”

Design Implications of Memory
Do not overload the user’s memory with complicated
procedures
Keep procedures short and make them consistent
Design interfaces that promote recognition rather than recall
Menus, icons, organisation, feedback, etc.
Provide users with useful ways to help them support their
memory
Folders, labels, colors, ﬂags, tags, timestamps, icons, etc.

Learning
Learning can be through ﬁrst-person “doing”or third-
person “reading”
People ﬁnd learning through doing to be much easier than learning through
reading

Design interfaces to encourage exploration
Allow users to explore possibilities and undo mistakes
Design interfaces that constrain and guide
Guide users to help them select appropriate actions
Design interfaces to encourage learning
Provide users with helpful context-sensitive information
Design Implications of Learning

Activity – 10 minutes
Draw a sketch with all the following objects being a part
of it
1. House
2. Tree
3. Flight
4. Car
5. Truck

We understand objects based on their normal
appearances in our everyday life
This is how we interpret

• All objects in the picture
are shown in a random
order
• these kinds of pictures
are difficult to interpret

Mobile Information Systems
Part 1: Need Finding/Brainstorming – 30 minutes
1. Urban elders retrieving location information about friends and family members in
support of opportunistic rendezvous.
2. Commuters sharing, seeking, and retrieving information in support of their commute.
3. Mobile workers (plumber, realtor, in-home yoga instructor, etc.) looking for a place to
be (food/coffee) between jobs.
4. Moms retrieving status information on their kids from across their online social
networking services and communication channels.
Working in teams of three or four, students will explore the issues and design challenges
around mobile information systems. Teams will design interfaces that allow a unique set
of users to navigate information in the completion of one the following tasks:

while interacting with any system a person
has a concept of what the system is: what its
components are, what properties they have
and and what interactions they can enter
into.

CONCEPTUAL MODEL…
A conceptual model is a high level description of:
“the proposed system in terms of a set of integrated ideas and concepts
about what it should do, behave and look like, that will be
understandable by the users in the manner intended”
• Many kinds and ways of classifying them
• We describe them in terms of core activities and objects
• Also in terms of interface metaphors

Conceptual models include mental models,
information processing, external cognition

Always keep in mind when making design decisions
how the user will understand and remember the
underlying conceptual model

Components
Concepts that people are exposed to through the product
task–domain objects, their attributes, and operations (e.g. saving, revisiting,
organizing)
Metaphors and analogies
understand what a product is for and how to use it for an activity
Relationship and mappings between these concepts

First steps in formulating a conceptual
model
• What will the users be doing when carrying out their tasks?
• How will the system support these?
• What kind of interface metaphor, if any, will be appropriate?
• What kinds of interaction modes and styles to use?

Different Interaction modes
“Tell” the system to do something
• Delegation mode
• Issue instruction
“Do” something on the system
• Control mode
• Acting
“Exploring” the system
• Navigation mode
• Browsing

Conceptual Models Based on interaction modes
1. Instructing
2. Conversing
3. Manipulating and navigating
4. Exploring and browsing

Instructing
describes how users carry out their
tasks through instructing the system
what to do. 1 way Process:
like tell the time, print a file, save a file
E.g. Commands in DOS or Unix,
E.g. Word processing, CAD, Email
E.g. vending machines

Conversing
User converses with the system, where the system acts as a dialogue
performer. 2 way Process
Range from simple voice recognition menu-driven systems to more
complex ‘natural language’ dialogues
E.g. help systems, search engines, timetables, advice-giving systems etc.
E.g. Voice or natural language based system

Manipulating and
navigating
Exploit’s user’s knowledge of how
they move and manipulate in the
physical world
Involves dragging, selecting,
opening, closing and zooming
actions on virtual objects
E.g. Video Games
E.g. Virtual Reality

Exploring and browsing
allows people to browse / navigate
through information
Similar to how people browse
information with existing media (e.g.
newspapers, magazines, libraries,
pamphlets)
E.g. CD-ROMs, DVD’s
E.g. web pages, Multimedia

Which conceptual model is best?
Manipulation is good for ‘doing’ types of tasks, e.g. designing, drawing,
playing (flying, driving), sizing windows
Issuing instructions is good for repetitive tasks, e.g. spellchecking, file
management
Having a conversation is good for children, computerphobic, disabled
users and specialized applications (e.g. phone services) or for FUN

What Conceptual Model does the following products
support?
Activity – 10 mins

How do user interfaces affect people?

User interfaces can motivate
users to:
learn or play,
to explore and be creative,
encourage users to be social,
provide a calm environment for
working,
engender feelings of trust, etc.

An application doesn’t work properly or crashes
A system doesn’t do what the user wants it to
A user’s expectations are not met (e.g. it is too slow)
A system doesn’t provide sufﬁcient information
An error message is vague, obtuse, or condemning
An interface is unattractive (e.g. noisy, garish, patronising)
A system forces a user to restart after a long process
User interfaces can elicit negative responses too
Reasons include:

What’s wrong with this error message?

"Valid authentication credentials were not provided"
Hmm... I wonder if that means my password is wrong?

What is a "value state" I wonder?

Level of Frustration: High
Users feel helpless in
the face of an
incomprehensible
error message.
Cause: A system or application crashes and provides an unhelpful error message

Remedy: Provide useful information about how to ﬁx a
problem in the error message.

Do you see any problem with this interface?

Level of Frustration: Mild
Users are annoyed at the effort gone into the gimmick
Cause: Expectations are not met and a user is presented with a gimmicky display.
Remedy: Avoid using gimmicks in an attempt to cover up a real
problem.
e.g. Only make a website live once the material has been created, people rarely
return to websites that have been “under construction” the last time they visited

Ok now we understand
interactions and
interfaces….
next what?

Command Line Interface Design – 30 minutes
Design a Command Line Interface for a phone
1. analyze all basic functions of the phone on your desk
1. design a Command Line (incl. abbreviations) for this machine;

Natural User Interface Design – 30 minutes
Design a Natural User Interface for an ATM Machine
1. Identify and analyze all basic functions of the ATM Kiosk
1. Design a NUI with the aid of voice, touch etc

Process of Interaction Design
Need finding and establishing requirements
Develop a set of alternative designs

Process of Interaction Design
Build iterative prototypes for testing
Evaluate designs throughout the process

The Process of Interaction Design
1. Identify needs and establish requirements
2. Develop a set of alternative designs
3. Build iterative prototypes for testing
4. Evaluate designs throughout the process

Identifying Needs and Establishing
Requirements
Needs and requirements are identiﬁed at the start

Users
people who will directly interact with the design.
Who is concerned with your product?
Stakeholders
people who will be affected by the design.

Good Designer?
Although it is tempting for a designer to design what they would want, but a
good designer is able to design for the needs of the users of a product.

Different types of requirements
Functional :
what should the product do?
Data:
what types of data should the product handle?
Environmental:
physical/social/organisational/technical
User:
characteristics of the target user group
Usability:
important usability goals and measures

Techniques for gathering requirements
Questionnaires
useful for asking speciﬁc questions from a number group of
people, questionnaires are often combined with other
techniques

Interviews
useful for exploring issues that arise as the result of asking
questions, but they are time-consuming

Focus Groups
good for gaining a consensus view of an issue and/or
highlighting areas of conﬂict/disagreement

Observations
shadowing people as they work with a system can
provide important insight into what people actually
do (compared to what they say they do)

Scenario
An informal narrative description
of a user performing a task that
allows the exploration of the
context, needs and requirements

Use Case
A description of how a user (actor) would interact with a system to
achieve a task, allowing the description of the interactions required
throughout

Studying Documentation
existing documentation can be a good source of information about
user activities

Observation – 30 minutes
1. Select a person performing an activity in a public space such as a restaurant, health
club, the student union, or a shopping center and observe them for a minimum of 10
minutes.
2. The person you observe must be a stranger to you. If you feel it is appropriate, you
may want to introduce yourself and ask if you can observe them, explaining that it is
part of a class assignment and assure them of confidentiality.
3. Make detailed notes while you observe. You must include descriptions of the physical
setting (make a sketch of the layout), the person, the actions of the person, and any
thoughts that occur to you about the work the individual is doing while you are
observing.
4. Create field notes from the data you collected.

Part 2: Scenario Development– 30 minutes
Write a scenario for how someone would interact with your
MIS application.
Tell a short story about how someone would use your application in their
everyday life.

Ways to develop alternative designs
Generating design ideas
Methods for generating design ideas
Cross-fertilisation of existing ideas
e.g. analogy, bisociation, case-based reasoning, mutation
Evolution of existing ideas
e.g. addition of new features, extrapolation of trends
Reproduction of existing ideas
e.g. application of ideas to new domains

Develop a set of alternative designs
Developing conceptual and detailed designs
Conceptual Design
Conceptual models for products that describe what a product should do and how
the product should behave
Detailed Design
Detailed models for products that describe aspects of an interface, e.g. colors, sounds,
images, icons, menus, etc.

Developing a Conceptual Model
Three perspectives
Interaction Mode
How the user invokes actions when interacting with the device
Interface Metaphor
Combining familiar knowledge with new knowledge in a way that helps the user
understand the system
Interaction Paradigm
Particular way of thinking about interaction design

Techniques used in Conceptual Design
Scenarios/Use Cases
• Basis for the overall design
• Basis for technical implementation
• Means of cooperation within design teams
• Means of cooperation across professional boundaries (multidisciplinary teams)
Prototyping

What functions will the product perform?
(how will tasks be divided up?)
How are the functions related to each other?
• Temporal (sequential or parallel)
• Categorization
What information needs to be available?
• What data is required to perform the task?
• How is this data to be transformed by the system?
Expanding the Conceptual Model

Part 3: Conceptual Design– 30 minutes
Work in a group, ideate and develop the Conceptual Design using the
scenarios which you developed

Prototyping
What is a prototype?
Limited representation of a product
design
• Scale models, etc.
• In interaction design it can be (among other
things):
• a series of screen sketches
• a storyboard, i.e. a cartoon-like series of
scenes
• a piece of software with limited
functionality

Why Prototyping
“People cannot describe what they want, but they are quick to recognize what they do
not like!”
• Interactive exploration with envisioned product
• Clarifies vague requirements with concrete communication between
stakeholders
• Answers questions and supports design decisions with forced reflection
• Tests feasibility & compatibility
• Sells product ideas
• Inspires innovation in “prototyping cultures”

Prototyping Types
• Low-Fi: Cheap to produce,
does not realistically simulate
the final product
Conceptual Design
• Hi-Fi: Increased similarity to
final product, possibly even
using the same “parts”
Physical Design
• Prototypes should shift
from Low-Fi to Hi-Fi as
project progresses

Part 4: Prototyping – 1 hour
Convert your ideas, concepts and functionalities into a medium paper prototype with
all affordances.

Evaluating
Observation of users
e.g. number of errors made using the design
Questionnaires of users
e.g. how appealing is the design
Objective evaluation
e.g. how well does the design match requirements

Part 5: Evaluating– 1 hour

Interaction design workshop

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Interaction design workshop (20)

More from Shyamala Prayaga (20)

Recently uploaded (20)

Interaction design workshop