Chapter 1:

What is interaction design?

 Computing is ubiquitous

Computers really have become ubiquitous to the

extent that it is rare to find any technology that does
not involve computation
Human computer interaction, foundations and new paradigms, Dix, Alan,2017
 HCI Definition

“Human-computer interaction is a discipline

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 Curricula for Human-Computer Interaction

 HCI Definition

“HCI (human-computer
interaction) is the study of how
people interact with computers
and to what extent computers
are or are not developed for
successful interaction with
human beings”
 Human-Computer Interaction

• Human
– the end-user of a program
– the others in the organization
• Computer
– The machine the program runs on
– Often split between clients and servers
• Interaction
– the user tells the computer what they want
– the computer communicates results
Human-Computer Interaction
Human-Computer Interaction Factors
 User Interfaces (UIs)

Part of application that allows users

• To interact with computer
• To carry out their task
Basic User Interface Styles

• Command Entry Expressive

• Menu
• Form
• WIMP (Window, Icon, Form, Pointer)
• Natural Language
• Touch User Interface
• Gestures Driven (Latest) Intuitive
Command Line Interface Menu

Form WIMP
 Why Study User Interfaces?
• Major part of work for “real” programs
– approximately 50%
• You will work on “real” software
– intended for users other than yourself
• Bad user interfaces cost
• User interfaces hard to get right
– people are unpredictable
 Bad User Interfaces
Hard to tell the difference between the two icons and names
 Who builds UIs?

• A team of specialists (ideally)

 graphic designers
 graphic designers
 interaction / interface designers
 technical writers
 Marketers
 test engineers
 software engineers
 users
Topics in HCI
 Bad designs
– 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?

From: www.baddesigns.com
Good and bad design
• What is wrong with the
Apex remote?
• Why is the TiVo remote so
much better designed?
– Peanut shaped to fit in
hand
– Logical layout and color-
coded, distinctive buttons
– Easy to locate buttons
More Examples
 What to design
• Need to take into account:

– Who the users are?

– What activities are being carried out?
– Where the interaction is taking place?

• Need to optimize the interactions users have with a product

– So that they match the users’ activities and needs
Process of Design
 Activity
• How does making a call differ when using a:
– Cell phone
– Public phone box?
• Consider the kinds of user, type of activity and
context of use
 What is interaction design?

• Designing interactive products to support the way people

communicate and interact in their everyday and working lives
– Sharp, Rogers and Preece (2007)

• The design of spaces for human communication and

Iinteraction. (Winograd , 1997)
HCI and interaction design
Relation between HCI, ID and
other fields
HCI and Other Disciplines
 Relationship between ID, HCI and
other fields
• Academic disciplines contributing to ID:

 Psychology
 Social Sciences
 Computing Sciences
 Engineering
 Informatics
 Ergonmicso (Ergonomics is the science of designing a job, equipment
and/or workplace to fit the worker. The goal is to optimize the "fit" between
each worker and his or her work environment.)
 Relationship between ID, HCI and
other fields

• Design practices contributing to ID:

– Graphic design
– Product design
– Artist-design
– Industrial design
– Film industry
 Relationship between ID, HCI and
other fields

• Interdisciplinary fields that ‘do’ interaction

design:

– HCI
– Human Factors
– Cognitive Engineering
– Cognitive Ergonomics
– Computer Supported Co-operative Work
– Information Systems
Working in multidisciplinary teams
• Many people from different
backgrounds involved.

• Different perspectives
and ways of seeing
and talking about
things
• Benefits:
– More ideas and
designs generated
• Disadvantages:
– difficult to
communicate and
progress forward the
designs being created
 What is involved in the process of
interaction design
• Identifying needs and establishing requirements for the user
experience

• Developing alternative designs to meet these

• Building interactive prototypes that can be communicated

and assessed

• Evaluating what is being built throughout the process and

the user experience it offers
Interaction Design Life Cycle
 Interaction Design Life Cycle

• Identifying needs and establishing requirements

• know target users
• what kind of support an interactive product could usefully provide.

• Developing alternative designs

• Suggesting ideas for meeting the requirements.
• Broken into two sub-activities:
• Conceptual design (what the product should do, behave)

• Physical design (detail of the product including the colors, sounds, and images to use,
menu design, and icon design)
 Cont…

Building interactive versions of the designs

• Most sensible way for users to evaluate designs is to interact with them.

• An iinteractive version of the designs to be built, but does not mean a

software version is required i.e. prototype.
 Evaluating designs
• Evaluation is the process of determining the usability and
acceptability of the product or design that is measured
•
• Number of errors users make using it,
• How appealing it is,
• How well it matches the requirements.

• In most design situations you will find a number of activities

concerned with quality assurance and testing to make sure that the
final product is "fit-for-purpose."

• Evaluation does not replace these activities, but complements(‫)تکمیل‬

and enhances them.
 Interaction design in business
• Increasing number of ID consultancies, examples of well known ones include:

– Nielsen Norman Group: “help companies enter the age of the consumer, designing
human-centered products and services”

– Cooper: ”From research and product to goal-related design”

– Swim: “provides a wide range of design services, in each case targeted to address
the product development needs at hand”

– IDEO: “creates products, services and environments for companies revolutioning

new ways to provide value to their customers”
Core of HCI Professionals
Project Team
 Goals of interaction design

1. Usability and user experience goals

2. Involve users in the design process

 The User Experience
• what the interaction with the system feels like to
the users.

• How a product behaves and is used by people in the

real world
– “every product that is used by someone has a user experience:
newspapers, ketchup bottles, reclining armchairs, cardigan sweaters.”
(Garrett, 2003)
 User experience goals
• Satisfying (‫)مطمئن‬ • aesthetically pleasing (‫)جمالیاتی طور پر خوشگوار‬
• Enjoyable (‫)قابل لطف‬ • supportive of creativity (‫)تخلیقی صلاحیتوں کی حمایت‬
• Engaging (‫)مشغول‬ • Rewarding (‫)ثواب‬
• Pleasurable ( ‫)خوشگوار‬ • Fun (‫)تفریح‬
• Exciting (‫)دلچسپ‬ • Provocative (‫)پروٹوکول‬
• Entertaining (‫)دل لگی‬ • Surprising (‫)حیرت انگیز‬
• Helpful (‫)مددگار‬ • enhancing sociability (‫)سماجی صلاحیت کو بڑھانے‬
• Motivating (‫)حوصلہ افزائی‬
emotionally fulfilling (‫)جذباتی طور پر پورا‬ • Challenging
•

• • Annoying (‫)پریشان کن‬

boring
• • cutesy
Frustrating (‫)مایوسی‬
 What is a user-centered approach?
User-centered approach is based on:

– Early focus on users and tasks: directly studying cognitive(‫)سنجیدگی سے‬,

behavioral, anthropomorphic (giving the characteristics of humans
to other things) & attitudinal characteristics

– Empirical(‫ )تجرباتی‬measurement: users’ reactions and performance to

scenarios(‫)منظرنامہ‬, manuals(‫)دستی‬, simulations(‫ & )فرض کیا ہوا‬prototypes are
observed, recorded and analysed

– Iterative design: when problems are found in user testing, fix

them and carry out more tests
 Usability
• The extent to which a product can be used by specified users to achieve
specified goals with effectiveness, efficiency, and satisfaction in a
specified context of use (ISO)
 Usability goals
• Effectiveness: Effective to use

• Efficiency : Efficient to use

• Safety: Safe to use

• Utility: Have good utility

• Learnability: Easy to learn

• Memorability: Easy to remember how to use

Usability and user experience goals
• How do usability goals differ from user experience goals?
• Are there trade-offs between the two kinds of goals?
– e.g. can a product be both fun and safe?

• How easy is it to measure usability versus user experience

goals?

How users experience an interactive product from their

perspective, rather than assessing how useful or productive
a system is from its own perspective.
 Activity on usability
• How long should it take and how long does it
actually take to:

– Using a DVD to play a movie?

– Use a DVD to pre-record two programs?

– Using a web browser tool to create a website?

 Design principles

• Generalizable abstractions for thinking about different

aspects of 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
• Can see State of device and possible action
• Problem Arise when we can not see

• This is a control panel for an elevator

• How does it work?

• Push a button for the floor you want?

It is not visible as to what to do!

• Nothing happens.
• Push any other button? Still nothing
• What do you need to do?
 Visibility
…you need to insert your room card in the slot by the buttons to get the 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
 Feedback
• Sending information back to the user about what has
been done
• Includes sound, highlighting, animation and combinations
of these
Example
– when screen button clicked on provides sound or red
highlight feedback:

“ccclichhk”
 Constraints
• Restricting the possible actions that can be performed

• Helps prevent user from selecting incorrect options

 Mapping
• This refers to the relationship between controls and
their effects in the world.
 Consistency
• 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 for an operation –
ctrl+C, ctrl+S, ctrl+O
• Main benefit is consistent interfaces are easier to learn and
use
 When consistency breaks down
• What happens if there is more than one command starting
with the same letter?
– e.g. save, spelling, select, style

• Have to find other initials or combinations of keys, thereby

breaking the consistency rule
– e.g. ctrl+S, ctrl+Sp, ctrl+shift+L

• Increases learning burden on user, making them more

prone to errors
Internal and external 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
 Keypad numbers layout

• A case of external inconsistency

(a) phones, remote controls (b) calculators, computer keypads

1 2 3 7 8 9
4 5 6 4 5 6
7 8 9 1 2 3
0 0
 Affordances: to give a clue
• Refers to an attribute of an object that allows people to know
how to use it
• Norman (1988) used the term to discuss the design of
everyday objects
 What does ‘affordance’ have to offer
interaction design?

• Interfaces are virtual and do not have affordances like physical objects
• Norman argues(‫ )بحث کرتے ہیں‬it does not make sense to talk about
interfaces in terms of ‘real’ affordances
• Instead interfaces are better conceptualized as
perceived’(‫ )سمجھا‬affordances
– Learned conventions of arbitrary(‫ )خود مختار‬mappings between action and
effect at the interface
– Some mappings are better than others
 Activity

– Physical affordances:
How do the following physical objects afford? Ar e
they obvious (‫?)واضح ہے‬
 Heuristics and usability principles
• When design principles are used in practice they are
commonly referred to as heuristics.
• This term emphasizes(‫ )پر زور دیتا ہے‬that something has to
be done with them when they are applied to a given
problem.
• In particular, they need to be interpreted in the
design context, drawing on past experience of, for
example, how to design feedback and what it means
for something to be consistent.
 Usability principles (Nielsen 2001)

• Visibility of system status

• Match between system and the real world
• User control and freedom
• Consistency and standards
• Help users recognize, diagnose and recover from errors
• Error prevention
• Recognition rather than recall
• Flexibility and efficiency of use
• Aesthetic (‫ )جمالیاتی‬and minimalist (‫ )کم سے کم‬design
• Help and documentation
Various Terms Describing Usability Concepts

• The various terms used for describing used for various aspects
of usability:
• They ae often used interchangeably and in different
combination.
• Guidance: Most general term , refer all terms of guidance.
• Goals: refers to high level usability aims (e.g. should be
efficient to use)
• Principles: Refers to general guidance intended to inform the
evaluation and design of system.
• Rules: low level guidance refer to particular perception that
should be followed.
• Heuristics: general term refer to design and usability
principles when applied to particular problem.