17. Who is Involved in Interaction Design
Interaction Designers
Product Designers
Graphic Designers
Artists
Animators
Photographers
Film Makers
18. 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 field studies to inform the design of products
19.
20. The Goals of Interaction Design
Effectiveness
Efficiency
Safety
Utility
Learnability
Memorability
Enjoyability
Aesthetics
Usability Goals User Experience Goals
21.
22. 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.
23. 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.
24. Recognition:
Don’t make users rely on memory.
Efficiency:
Provide short-cuts for expert users.
Minimalism:
Avoid overloading users with info.
Help:
Provide users with helpful documentation.
Usability Principles Contd…
25. 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.
26. 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
33. Cognition is what goes on in our heads.
Thinking
Sensing
Understanding
learning
reasoning
planning
imagining
decision making
problem solving
using language
42. 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 find
difficult
43. 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
44. Learning
Learning new things about the world
Using Language
Listening, speaking, reading and writing
Problem-Solving
Planning, reasoning and decision-making
45. 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.
46. 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 find important information.
47.
48. 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
49. 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
50. 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
51. Strategies for Remembering
Mnemonics
Mnemonics turn unmemorable sequences into easily remembered phrases
e.g. Many people find it difficult 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”
52. 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, flags, tags, timestamps, icons, etc.
53. Learning
Learning can be through first-person “doing”or third-
person “reading”
People find learning through doing to be much easier than learning through
reading
54. 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
55. 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
56. We understand objects based on their normal
appearances in our everyday life
This is how we interpret
57. • All objects in the picture
are shown in a random
order
• these kinds of pictures
are difficult to interpret
58. 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:
61. 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.
62. 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
64. Always keep in mind when making design decisions
how the user will understand and remember the
underlying conceptual model
65. 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
66. 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?
67. 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
68. Conceptual Models Based on interaction modes
1. Instructing
2. Conversing
3. Manipulating and navigating
4. Exploring and browsing
69. Conceptual Models Based on interaction modes
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
70. Conceptual Models Based on interaction modes
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
71. Conceptual Models Based on interaction modes
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
72. Conceptual Models Based on interaction modes
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
73. 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
80. 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.
82. 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 sufficient 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:
86. 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
89. 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
90. Ok now we understand
interactions and
interfaces….
next what?
99. 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;
100. 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
109. 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
110. Identifying Needs and Establishing
Requirements
Needs and requirements are identified at the start
111. Users
people who will directly interact with the design.
Who is concerned with your product?
Stakeholders
people who will be affected by the design.
112. 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.
113. 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
114. Techniques for gathering requirements
Questionnaires
useful for asking specific questions from a number group of
people, questionnaires are often combined with other
techniques
115. Techniques for gathering requirements
Interviews
useful for exploring issues that arise as the result of asking
questions, but they are time-consuming
116. Techniques for gathering requirements
Focus Groups
good for gaining a consensus view of an issue and/or
highlighting areas of conflict/disagreement
117. Techniques for gathering requirements
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)
118. Scenario
An informal narrative description
of a user performing a task that
allows the exploration of the
context, needs and requirements
Techniques for gathering requirements
119. 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
Techniques for gathering requirements
121. 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.
123. Mobile Information Systems
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.
125. 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
126. 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.
127. 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
128. 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
129. 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
130. Mobile Information Systems
Part 3: Conceptual Design– 30 minutes
Work in a group, ideate and develop the Conceptual Design using the
scenarios which you developed
132. 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
133. 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”
134. 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
135. Mobile Information Systems
Part 4: Prototyping – 1 hour
Convert your ideas, concepts and functionalities into a medium paper prototype with
all affordances.
136. 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
