interactive design is a combination of many businesses, technical, psychological, educational, artistic, and engineering disciplines. Which of the disciplines presented (see diagram in Preece text for full scope) do you feel is most important to HCI?
Chapter 1 Lecture Slides
Elevator controls and labels on the bottom row all look
the same, so it is easy to push a label by mistake instead
of a control button.
People do not make same mistake for the labels and
buttons on the top row. Why not?
• Marble answering machine (Bishop, 1995)
• Based on how everyday objects behave
• Easy, intuitive, and a pleasure to use
• Only requires one-step actions to perform core tasks
Good and bad design
Why is the TiVo remote much
better designed than standard
• Peanut shaped to fit in hand
• Logical layout and color-
coded, distinctive buttons
• Easy-to-locate buttons
Is there such a thing as a ”perfect” way to deal with a smart TV?
• Pecking using a grid keyboard via a remote control
• Swiping across two alphanumeric rows using a touchpad on a remote
• Voice control using remote or smart speaker
What to design
Need to take into account:
– Who the users are
– What activities are being carried out
– Where interaction is taking place
– How does the user think and act?
– Why do they do things a certain way?
Need to optimize the interactions users have with a product:
– So that they match the users’ activities and needs
DEFINITION: Interaction design?
“Designing interactive products to support the way people communicate and interact
in their everyday and working lives.”
Sharp, Rogers, and Preece (2019)
“The design of spaces for human communication and interaction.” Winograd (1997)
The response from the U.S. Federal Government (Section 508 Refresh):
“Interaction design focuses on creating engaging interfaces with well thought out
Goals of interaction
Develop usable products
– Usability means easy to learn, effective to use, and provides an enjoyable
Involve the user and the likely product/candidate product in the design process
NOTE: Usability, as a technical discipline, allows for the measurement of goals, objectives,
and facets of the user experience. These are often referred to as usability measures or
categories. In the definition above, easy to learn is learnability. Effective to use is ease of
use or effectiveness, and provides and enjoyable experience is pleasure.
Which kind of design?
• There are a LOT of terms that are thrown around when it comes to design. Some are
technical, some are psychological, some are artistic, and some are scientific. Examples:
– User interface design, software design, user-centered design, product design, web
design, experience design (UX)
• Interaction design is the umbrella term covering all of these aspects:
– Fundamental to all disciplines, fields, and approaches concerned with researching and
designing computer-based systems for people
Fields you observe:
How does a multi-disciplinary approach
impact the outcome?
• Many people from different backgrounds involved
– Different perspectives and ways of seeing and talking about things
– A holistic experience provides a 360-degree view.
– More ideas and designs generated
– Difficult to communicate and progress forward the designs being create
• The best way to resolve the approach: analysis, evaluation, and prototying
Interaction design in business
Well known consultancies
– Nielsen Norman Group: “help companies enter the age of the consumer,
designing human-centered products and services”
• The most recognized. In this class, we use many videos from Jakob Nielsen,
Donald Norman, and the n/ng* associates.
– Cooper: “From research and product to goal-related design”
– IDEO: “creates products, services and environments for companies pioneering new
ways to provide value to their customers”
CONCEPT: User experience is a collaborative effort of technical, emotional, and social
How a product behaves and is used by people in the real world
– The way people feel about it and their pleasure and satisfaction when using it, looking
at it, holding it, and opening or closing it
– “Every product that is used by someone has a user experience: newspapers, ketchup
bottles, reclining armchairs, cardigan sweaters.” (Garrett, 2010)
– “All aspects of the end-user’s interaction with the company, its services, and its
products. (Nielsen and Norman, 2014)
Cannot design a user experience−only can design for a user experience
Why was the iPod, iPhone, and iPad user experience such a
• Quality user experience from the start
• Forget the marketing hype from Apple. The technical knowns that Apple
prides itself on:
– Ease of Use
Core characteristics of interaction design
• Users or user generated ideas should be involved throughout the
development of the project.
• Specific usability and user experience goals need to be identified, clearly
documented, and agreed to at the beginning of the project.
– There is a significant level of trial and error before you go to market.
Why is interaction deign needed?
– Understand how to design interactive products that fit with what people want, need, and
– Appreciate that one size does not fit all.
• Will an 16-year old like what his 80-year old grandparent likes to use?
– Identify any incorrect assumptions they may have about particular user groups.
• Are all old people deaf? Do all young people see 20/20 and not require big fonts?
– Be aware of both people’s sensitivities and their capabilities
Accessibility and inclusiveness
Accessibility: the extent to which an interactive product is accessible by as many
people as possible
– Focus is on people with disabilities; for instance, those using android OS or apple voiceover
Inclusiveness: making products and services that accommodate the widest possible
number of people
– For example, smartphones designed for all and made available to everyone regardless of their
disability, education, age, or income
Disabilities can be classified as:
– Sensory impairment (such as loss of vision or hearing)
– Physical impairment (having loss of functions to one or more parts of the body after a stroke or spinal
– Cognitive (including learning impairment or loss of memory/cognitive function due to old age)
Each type can be further defined in terms of capability:
– For example, someone might have only peripheral vision, be color blind, or have no light perception
Impairment can be categorized:
– Permanent (for instance, long-term wheelchair user)
– Temporary (that is, after an accident or illness)
– Situational (for example, a noisy environment means that a person can’t hear)
5/21/2015 versus 21/5/2015?
– Which should be used for international services and online forms?
(First option – western way. Second option – eastern way)
• Why is it that certain products are simply accepted as is without any design changes
whatsoever. Can you think of one?
Usability goals (categories)
• Effective to use (effectiveness)
• Efficient to use (efficient)
• Safe to use (error free)
• Have good utility (useful)
• Easy to learn (learnability)
• Easy to remember how to use (memorability / easy to use)
Usability and user experience goals
• Selecting terms to convey a person’s feelings, emotions, and so forth can help
designers understand the multifaceted nature of the user experience.
– measurement – qualitative and quantitative
• How do usability goals differ from user experience goals?
• How easy is it to measure usability versus user experience goals?
User experience goals
Satisfying Helpful Fun
Enjoyable Motivating Provocative
Engaging Challenging Surprising
Pleasurable Enhancing sociability Rewarding
Exciting Supporting creativity Emotionally fulfilling
Entertaining Cognitively stimulating Experiencing flow
Making one feel guilty Making one feel stupid
Concepts evaluated often by usability / UX experts:
• Generalizable abstractions for thinking about different
aspects of design
• The do’s and don’ts of interaction design
• What to provide and what not to provide at the interface
• Derived from a mix of theory-based knowledge,
experience, and common-sense
Visibility – poor interface
• This is a control panel for an elevator
• How does it work?
• Push a button for the floor you want?
• Push any other button? Still nothing. What do you need to do?
If the light doesn’t light – the response is null and void. If it talked,
at least there is some reaction. Multi-modality is often an answer.
However, this remains a poor interface.
• Sending information back to the user about what has been done
– Includes sound, highlighting, animation, and combinations of these
• If you type the letter X on a keyboard, what do you expect the
response to be.
• If you turn the light switch from off to on, what do you expect to see?
• If you turned the volume of your speaker from left to right, what to
you expect to hear?
• Restricting the possible actions that can be performed
• Helps prevent user from selecting incorrect options
• Physical objects can be designed to constrain things. (for example, there
being only one way you can insert a key into a lock)
A constraint creates a barrier.
Logical or ambiguous design?
Here is a COMMON IT problem we have all faced. The
game of connections. Do the icons mean anything? Do the
holes represent something or even make sense?
• Where do you plug the mouse?
• Where do you plug the keyboard, in the top or bottom
• Do the color-coded icons help?
The bigger question – are all of these symbols accessible
How to design them more logically
provides direct adjacent mapping
between icon and connector
provides color coding that
associates the connectors with
When consistency breaks down
• What happens if there is more than one command starting with the same letter? (for example, save,
spelling, select, style)
– You have to find other ways of doing the exact same task.
The usability dilemma:
• Increases learning burden on user (learnability), making them more prone to errors (error handling)
Internal and external consistency
DEFINITION OF CONSISTENCY:
Design interfaces to have similar operations and use similar elements for similar tasks.
• Internal consistency refers to designing operations to behave the same within an application
Difficult to achieve with complex interfaces
• External consistency refers to designing operations, interfaces, and so on to be the same across applications and devices
Very rarely the case, based on different designer’s preference
Keypad numbers layout
A case of external inconsistency
1 2 3
4 5 6
7 8 9
7 8 9
1 2 3
4 5 6
(a) phones, remote controls (b) calculators, computer keypads
Affordances: to give a clue
• Refers to an attribute of an object that allows people to know how to use it. (For
example, a mouse button invites pushing, a door handle affords pulling)
• Norman (1988) used the term to discuss the design of everyday objects
• Has since been popularized in interaction design to discuss how to design interface
objects (for example, scrollbars to enable moving up and down; icons to click on)
Note: The technical view is – will the product work (functional). The design view is –
will the user understand and interact with the product (aesthetic/pleasure).
Affordance: What is the ”given and take” to ensure the user is able to
use the product. Is it truly clear how to do X?
• How do these screen objects afford?
• What if you were a novice user?
• Would you know what to do with them?
- Slide 1
- Bad designs
- Good design
- Good and bad design
- What to design
- DEFINITION: Interaction design?
- Goals of interaction design
- Which kind of design?
- Interaction design
- How does a multi-disciplinary approach impact the outcome?
- Interaction design in business
- User experience
- Slide 14
- Core characteristics of interaction design
- Why is interaction deign needed?
- Accessibility and inclusiveness
- Understanding disability
- Cultural differences
- Usability goals (categories)
- Usability and user experience goals
- User experience goals
- Design principles
- Visibility – poor interface
- Logical or ambiguous design?
- How to design them more logically
- When consistency breaks down
- Internal and external consistency
- Keypad numbers layout
- Affordances: to give a clue