W2:

THE DESIGN &

INTERACTION

DESIGN
DESIGN
DESIGN
DESIGN
INTERACTION
INTRODUCTION

Some of HCI is focused on

understanding the academic study of
the way people interact with
technology. However, a large part of
HCI is about doing things and making
things – design.
 THE design

What is
Generally speaking, it is the process
of envisioning and planning the
creation of objects, interactive
systems, buildings, vehicles, etc.

It is user-centered, users are at the heart

design
of the design thinking approach.

https://www.strate.education › gallery › news › design-...

 Need to take into account:

What To
 Who the users are
 What activities are being carried out
 Where the interaction is taking place

design Need to optimise the interactions users

have with a product
 Match the users activities and needs
 THE design

Understanding users’ needs

 Need to take into account what people
are good and bad at

 Consider what might help people in the

way they currently do things

 Listen to what people want and get them

involved

 Use tried and tested user-based

methods
 THE design

GOOD or BAD DESIGN

www.baddesigns.com One problem with these elevator controls
is that the labels on the bottom row look
like pushbuttons.

So when you want to open the elevator

door, you accidently push the "DOOR

LABEL
OPEN" label instead of the pushbutton next
to it.

The top row of pushbuttons doesn't seem to

have this problem.

One solution to this problem would be to

put the labels on the pushbuttons, rather
BUTTON than beside the pushbuttons.
 THE design

Which is the best way to interact with a smart TV?

APPLE REMOTE · MINUUM KEYBOARD · STANDARD REMOTE

 Interaction design

What is
Designing interactive products
to support people in their
everyday and working lives

interaction
Sharp, Rogers and Preece (2002)

The design of spaces for

human communication and

design interaction
Winograd (1997)

Interaction design is about creating interventions in often complex situations using technology of many kinds
including PC software, the web and physical devices.
 Interaction design

Goals of interaction design

USABLE · EASY TO LEARN · EFFECTIVE · ENJOYABLE EXPERIENCE · INVOLVED USER

 Interaction design

Evolution of HCI ‘interfaces’

60
50 80 90 00
70
Interface at the interface at the Interface at the Interface at the work Interface becomes
hardware level for programming level - interaction dialogue setting - networked widespread
engineers - switch COBOL, FORTRAN level - GUIs, systems, groupware (RF tags, Bluetooth
panels multimedia technology, mobile devices,
consumer electronics,
interactive screens,
embedded technology)
 Interaction design

From HCI to Interaction Design

Human-computer interaction (HCI) is
“concerned with the design, evaluation and implementation
of interactive computing systems for human use and with
the study of major phenomena surrounding them”
(ACM SIGCHI, 1992, p.6)

Interaction design (ID) is

“the design of spaces for human communication and
interaction” Winograd (1997)

Increasingly, more application areas, more technologies and more issues to consider when designing ‘interfaces
 Interaction design

Relationship between ID, HCI and other fields

• Psychology • Graphic design • HCI

• Engineering • Product design • Human Factors
• Ergonomics • Artist-design • Cognitive Engineering
• Informatics • Cognitive Ergonomics
• Social Sciences • Industrial design
• Computer Supported
• Computing Sciences • Film industry • Co-operative Work
• Information Systems

ACADEMIC DISCIPLINES CONTRIBUTING TO ID DESIGN PRACTICES CONTRIBUTING TO ID FIELDS THAT ‘DO’ INTERACTION DESIGN
 Interaction design

How easy it IS to work in multidisciplinary teams ?

More people involved in doing interaction

design the more ideas and designs
generated…but…

The more difficult it can be to

communicate and progress forwards the
designs being created
 Interaction design

Interaction design in business

NIELSEN NORMAN GROUP
The Nielsen Norman Group is an American computer user interface and user experience consulting firm,
founded in 1998 by Jakob Nielsen and Don Norman. “help companies enter the age of the consumer,
designing human-centered products and services”.

SWIM INTERACTIONS
Swim is a San Francisco-based design consultancy. Founded by Gitta Salomon in 1996, : “provides a wide
range of design services, in each case targeted to address the product development needs at hand”.

IDEO-DESIGN COMPANY
IDEO is a design and consulting firm with offices in the U.S., England, Germany, Japan, and China. It was
founded in Palo Alto, California, in 1991. The company uses the design thinking approach to design products,
services, environments, and digital experiences.
 Interaction design
INTERACTION DESIGNERS
People involved in the design of all the interactive aspects of a
product

USABILITY ENGINEERS
People who focus on evaluating products, using usability
methods and principles

WEB DESIGNERS
People who develop and create the visual design of websites,
such as layouts

INFORMATION ARCHITECTS
people who come up with ideas of how to plan and structure
interactive products What do
USER EXPERIENCE professionals do in
DESIGNERS
people who do all the above but who may also carry out field
studies to inform the design of products
the ID business ?
 Interaction design

What is involved in the

process of interaction design
• Identify needs and establish requirements
• Develop alternative designs
• Build interactive prototypes that can be communicated
and assessed
• Evaluate what is being built throughout the process
 Interaction design

Core characteristics of
interaction design
• Users should be involved through the development
of the project
• Specific usability and user experience goals need
to be identified, clearly documented and agreed at
the beginning of the project
• Iteration is needed through the core activities
 Interaction design

Usability goals
EFFECTIVE TO USE SATISFYING
EFFICIENT TO USE FUN
SAFE TO USE ENJOYABLE
HAVE GOOD UTILITY ENTERTAINING
EASY TO LEARN HELPFUL
EASY TO USE MOTIVATING
AESTHETICALLY PLEASING

User experience goals

 Interaction design

Design principles
• Generalizable concepts for thinking about different
features 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
 Important  VISIBILITY
Interaction 

FEEDBACK
CONSTRAINTS

Design
 AFFORDANCES
 MAPPING
 CONSISTENCY

Principles
 Interaction Design Principles

Visibility
This is a control panel for an elevator.
• How does it work?
• Push a button for the floor you want?
• Nothing happens.
• Push any other button?

Still nothing. What do you need to do?

www.baddesigns.com
 Interaction Design Principles
…you need to insert your room card in
the slot by the buttons to get the
Visibility
elevator to work!

How would you make this action more visible?

• Make the card reader more obvious
• Provide an auditory message, that says what to do
(which language?)
• Provide a big label next to the card reader that
flashes when someone enters

• MAKE RELEVANT PARTS VISIBLE

• MAKE WHAT HAS TO BE DONE OBVIOUS

www.baddesigns.com
 Interaction Design Principles

Feedback
• Sending information back to the user about
what has been done
• Includes sound, highlighting, animation and
combinations of these

e.g. when screen button clicked on provides

sound or red highlight feedback:

PREVIEWS PREVIEWS
 Interaction Design Principles

Constraints
• Restricting the possible actions that can be
performed
• Helps prevent user from selecting incorrect options
• Three main types (Norman, 1999)
• Physical Constraints
• Cultural Constraints
• Logical Constraints
 Interaction Design Principles
constraints
Physical constraints
Refer to the way physical objects
restrict the movement of things
 Interaction Design Principles
constraints
Logical constraints
Exploits people’s everyday common sense
reasoning about the way the world works

Logical or ambiguous design?

• Where do you plug the mouse?
• Where do you plug the keyboard?
• Top or bottom connector?
• Do the color coded icons help?

www.baddesigns.com
 Interaction Design Principles

How to design them more logically constraints

A) Provides direct adjacent B) Provides color coding to
mapping between icon and associate the connectors
connector with the labels
 Interaction Design Principles
constraints
cultural constraints A
• A mechanism for putting knowledge in the
world by adhering to a known convention
• Cultural constraints rely on learned
conventions

• Specific Cultural Constraints

• Precise detail B
• Universal Cultural Constraints
• Once accepted by more than one
cultural groups, they become
universally accepted conventions.
• They cannot be change easily
C
 Interaction Design Principles

Affordances
• Refers to an attribute of an object that allows people
to know how to use it
• e.g. a mouse button invites pushing, a door handle
affords pulling
• Norman (1988) used the term to discuss the design of
everyday objects
• Since has been much popularized in interaction design
to discuss how to design interface objects
• e.g. scrollbars to afford moving up and down, icons to
afford clicking on
 Interaction Design Principles

Mapping
• Relationship between controls and their
movements and the results in the world
• Which is a poor mapping of control buttons?

A B
 Interaction Design Principles

Consistency A

• Design interfaces to have similar operations and use

similar elements for similar tasks
• For example:
• always use ctrl key plus first initial of the command
B
for an operation – ctrl+C, ctrl+S, ctrl+O
• Main benefit of consistent interfaces are easier to
learn and use

C
 Interaction Design Principles

Consistency
• 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, etc., to be the same across applications
and devices
• Very rarely the case, based on different designer’s
preference
 Interaction Design Principles

INTERNAL Consistency
• Internal consistency refers to consistency with other elements in the system—your logo is the
same online and in print, signs within a park are consistent with one another.
 Interaction Design Principles

External Consistency
• External consistency means having the same aesthetic design or performance across multiple
systems.
 Interaction Design Principles

Design Principles revisited

• Visibility Placing the controls in a highly visible location
• Feedback Provision of information about the result of an action
• Constraints Restricting the actions to prevent selecting incorrect options
• Mapping Relationship between controls and their effect in the world
• Affordances Properties of an object that indicate how it can be used
• Consistency
Internal consistency refers to designing operations to behave
the same within an application
External consistency refers to designing operations, interfaces,
to be the same across applications and devices