Human Computer Interaction: An Overview

 What is Human Computer Interaction (HCI)?

 Importance of HCI
 Good and Poor Design Examples
 What and Who are involved in HCI design?
 General Principles of HCI Design
 Norman's Principles of Usability
 Conceptual Model

H. C. So Page 1 Semester A 2019-2020

What is HCI?
How Human interacts with Computer:
- Not primarily the study of Human
- Not primarily the study of Computer
- The study of bridge between them, which includes
 Observation of interactions between people & computers,
e.g., Find examination papers via our library Web
 Analysis of the involved interactions, e.g., Are all the
steps involved are necessary?
 Investigating outcomes after interacting with computers,
e.g., Can the user perform his task? Does he enjoy
working with the computer?

H. C. So Page 2 Semester A 2019-2020

What is HCI?
The term HCI was adopted in mid-1980s:
Association for Computing Machinery (ACM): “discipline
concerned with the design, evaluation & implementation of
interactive computer systems for human use & with the
study of major phenomena surrounding them” (1992)
Dix: “HCI is study of people, computer technology and the
ways these influence each other. We study HCI to determine
how we can make this computer technology more usable by
people” (1998)
Carroll: “HCI is the study and practice of usability. It is about
understanding and creating software and other technology
that people will want to use, will be able to use, and will find
effective when used.” (2002)
H. C. So Page 3 Semester A 2019-2020
What is HCI?
Human:
Individual user, a group of users working together, a
sequence of users in an organization
Computer:
Desktop computer, large-scale computer system, smart
phone, embedded system (e.g., photocopier, microwave
oven), software (e.g., search engine, word processor)
User interface:
Parts of the computer that the user contacts with, e.g.,
screen, mouse, keyboard, switch button, knob
Interaction:
Usually involve a dialog with feedback & control throughout
performing a task (e.g., user invokes “print” command and
then interface replies with a dialog box)
H. C. So Page 4 Semester A 2019-2020
What is HCI?
Lamp
 Function/objective: to illuminate the
environment
 Interface: power switch button
 Functional part: light bulb
 Interaction: press “On”, light on; press
“Off”, light off
 User tasks: turn on the lamp, turn off
the lamp

H. C. So Page 5 Semester A 2019-2020

What is HCI?
Stapler
 Objective: to bind paper together
 Interface: top surface where you press
 Functional part: stapler ejection gap
 Interaction: put an edge of the stack of
paper in the stapler’s mouth, press down
firmly and quickly, hear “click” sound,
see paper bound
 User tasks: bind paper together, refill
the staples

H. C. So Page 6 Semester A 2019-2020

What is HCI?
Word processor
 Objective: to edit a document
 Interface: windows, icons, menus, pointers (WIMP), etc.
 Functional part: sub-routines for command execution, file
handling, etc.
 Interaction: use mouse to click the “WORD” icon, observe
WORD is invoked, use mouse to click “FILE” icon, …
 User tasks: edit file, save file, etc.

H. C. So Page 7 Semester A 2019-2020

Why HCI?
 In the past, computers were expensive & used by technical
people only

 Now, computers are cheap and used by non-technical

people (different backgrounds, needs, knowledge, skills)
⇒ Computer and software manufacturers have noticed the
importance of making user-friendly interfaces:
including easy to learn, easy to use, save people time
e.g., Is your washing machine user-friendly?
⇒ We also desire good user experience
e.g., Do you feel pleasure and satisfaction when
using your smart phone?

H. C. So Page 8 Semester A 2019-2020

HCI Scope

H. C. So Page 9 Semester A 2019-2020

HCI Scope
Use & Context: Find application areas for computers

Human: Study psychological & physiological

aspects
e.g., study how a user learns to use a new
product, study human typing speed

Computer: Hardware & software offered

e.g., input & output devices, speed,
interaction types, computer graphics

Development: Design, implementation & evaluation

H. C. So Page 10 Semester A 2019-2020

HCI Goals
 Understand the factors that determine how people use
technology
 At physical level, HCI concerns selecting the most
appropriate input devices and output devices for a
particular interface or task
 Determine the best type of interaction, such as direct
manipulation, natural language, icons, menus
 For systems that include computers, develop or improve
 Safety
 Utility
 Effectiveness
 Efficiency
 Usability
 Appeal
H. C. So Page 11 Semester A 2019-2020
HCI Goals
 Safety: protecting the user from dangerous conditions and
undesirable situations
 Users
 Nuclear energy plant or bomb-disposal – operators
should interact with computer-based systems remotely
 Medical equipment in intensive care unit (ICU)
 Data
 Prevent user from making serious errors by reducing
risk of wrong keys/buttons being mistakenly activated
 Provide user with means of recovering errors
 Ensure privacy (protect personal information such as
habits and address) & security (protect sensitive
information such as passwords, VISA card numbers)

H. C. So Page 12 Semester A 2019-2020

HCI Goals
 Utility: extent of providing the right kind of functionality so
that users can do what they need or want to do
 High utility
 Scientific calculator provides many mathematical
operations, built-in formulae, and is programmable
 Low utility
 Software drawing tool does not allow free-hand drawing
but only supports polygon shape drawing
 Effectiveness: concern a user’s ability to accomplish a
desired goal or to carry out work
 Find a master thesis in our library Web
Any difference between utility and effectiveness?
H. C. So Page 13 Semester A 2019-2020
HCI Goals
Consider a shopping Web that provides all the information,
instruction and server-side support required to perform an
on-line purchase. However, the users cannot figure out how
to find the items they want to buy.

 Efficiency: a measure of how quickly users can accomplish

their goals or finish their work using the system
 Find a book whose title contains “human computer
interaction” in our library Web
 How about a Ph.D. thesis whose author’s last name is
“Cheng”?
 How about the newest book in the subject of “human
computer interaction”?

H. C. So Page 14 Semester A 2019-2020

HCI Goals

H. C. So Page 15 Semester A 2019-2020

HCI Goals
 Usability: ease of learning and ease of use
 Can I use the basic functions of a new digital camera
without reading the manual?
 Does the software facilitate us to learn new functions
easily?

 Appeal: how well the user likes the system

 First impression
 Long-term satisfaction

H. C. So Page 16 Semester A 2019-2020

HCI Goals
 Use Microsoft WORD as an example:

Goals Achieved? Example

Safety Yes Warning for “Exit before Save”
Utility Yes A lot of word processing
functions is provided
Effectiveness Yes A science student can edit
equations
Efficiency Yes Default template avoids initial
document setting
Usability Yes Icons help ease of learning
Appeal Yes Interface is attractive

H. C. So Page 17 Semester A 2019-2020

HCI Benefits
 Gaining market share
 People intend to buy/use products with higher usability
 e.g., Google’s search engine has the largest market share
because it is easy to use with higher efficiency; iPhone
gives good user experience
 Improving productivity
 Employees in a company perform their jobs in a faster
manner
 e.g., Workers in a mainland company needed to press a
lengthy sequence of buttons in performing a task. An IAS
student helped to increase their productivity via writing a
batch program for the button pressing operation

H. C. So Page 18 Semester A 2019-2020

HCI Benefits
 e.g., Cafe de Coral uses
a business management
system (BMS) to
increase productivity,
e.g., food photos are
available on cashier
display and operators do
not need to memorize
food codes, automatic
collection of sales
information at all shop
saves staffing cost
Hong Kong Economics
Times (8 Oct. 2004)
H. C. So Page 19 Semester A 2019-2020
HCI Benefits
 Lowering support costs
 If the product is not usable, calls to customer support can
be enormous
 e.g., If a washing machine is difficult to use even after
reading the instruction manual, many users will call the
customer service, which will result in high cost
 Reducing development cost
 Avoid implementing features users do not want and
creating features that are annoying or inefficient
 e.g., If there are too many unnecessary confirmation
dialog boxes in using a word processor, it is likely this
product needs to be redeveloped

H. C. So Page 20 Semester A 2019-2020

HCI Benefits
However, good user
experience may not
guarantee final success,
e.g., Bluegogo, China’s
third largest bike sharer
went bankrupt. Its
founder mentioned
"with plenty of
investors praising it but
not a single
commitment for new
funding"
Hong Kong Economics
Journal (18 Nov. 2017)
H. C. So Page 21 Semester A 2019-2020
Good and Poor Design Examples
HCI arises in our daily life, e.g.
 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 (www.baddesigns.com)

 People do not make same mistake for the labels and

buttons on the top row. Why not?

Any suggestions to improve the interface?

H. C. So Page 22 Semester A 2019-2020

Good and Poor Design Examples
 This is a lamp switch (www.baddesigns.com)

There are 3 modes: “I”, “O” and “II”

correspond to Low, Off and High, respectively

Is it a good design? Why?

H. C. So Page 23 Semester A 2019-2020

Good and Poor Design Examples
 Cursor keys
(https://www.uxpassion.com/blog/implementation-
mental-representation-models-ux-user-experience/)

Is it a good design? Why?

H. C. So Page 24 Semester A 2019-2020
Good and Poor Design Examples
 Wine glass (https://www.theuncomfortable.com/)

Is it a good design? Why?

H. C. So Page 25 Semester A 2019-2020
Good and Poor Design Examples
 Inside a lift at Yau Ma Tei

Any problems?

H. C. So Page 26 Semester A 2019-2020

Good and Poor Design Examples

Do you know how to use them?

H. C. So Page 27 Semester A 2019-2020
Good and Poor Design Examples

 DYMO and Brother label makers

Which one is more preferable? Why?
H. C. So Page 28 Semester A 2019-2020
Good and Poor Design Examples

 Dayton and Dyson hand dryers

Which one is better? Why?
H. C. So Page 29 Semester A 2019-2020
Good and Poor Design Examples

Is there any problem for the alarm clock?

H. C. So Page 30 Semester A 2019-2020
Good and Poor Design Examples
 This is the interface for WORD 97

Any suggested improvement?

H. C. So Page 31 Semester A 2019-2020

Good and Poor Design Examples
 This is an interface of a dialog box

Is it a good design?
H. C. So Page 32 Semester A 2019-2020
Good and Poor Design Examples

Can you guess what is it? How to operate it?

H. C. So Page 33 Semester A 2019-2020
Good and Poor Design Examples
 This is found in restroom at Vienna Austria airport

Is it a good design? Any suggested improvement?

H. C. So Page 34 Semester A 2019-2020
Good and Poor Design Examples
 Chair or Table?

Is it a good design?
H. C. So Page 35 Semester A 2019-2020
Good and Poor Design Examples
 Egg yolk separators:

Which one do you prefer?

H. C. So Page 36 Semester A 2019-2020
Disciplines Contribute to HCI
Academic Disciplines:
 Computer Science
 Develop programming languages, system architectures,
etc. of the computing systems
 Engineering
 Provide faster and cheaper equipment
 Linguistics, Artificial Intelligence (AI)
 Speech synthesis and recognition, natural language
processing, etc.
 Psychology
 Provide information about human mental capabilities
(e.g., memory, decision making)
 Ergonomics (Human Factors)
 Provide information about human physical capabilities

H. C. So Page 37 Semester A 2019-2020

Disciplines Contribute to HCI
 Sociology
 How people interact in groups
Design Practices:
 Graphic Design
 Art of combining text and graphics and communicating
an effective message in design of posters, brochures,
signs, logos & other type of visual communications
 Product Design
 Process of planning the product's specification
 Industrial Design
 Applied art whereby aesthetics and usability of products
may be improved. Aspects include overall shape of the
object, colors, textures, sounds & product ergonomics
 Film Industry
H. C. So Page 38 Semester A 2019-2020
Disciplines Contribute to HCI

http://paper.hket.com/article/1986970/阿里雲創辦人王堅%20 從心理學教授到 CTO

H. C. So Page 39 Semester A 2019-2020
Disciplines Contribute to HCI
AI has been extensively applied in
many areas including HCI, e.g.,
Hung Fook Tong (鴻福堂), the top
retailer of Chinese herbal products,
introduces 「鴻家 HUNG+」Health
Preservation vending machine
equipped with IBM Cloud, AI and
big data techniques

Consumers only need to take

photos before it, and through face
recognition, combined with the
weather of the day, they can be
recommended
H. C. So Page 40 Semester A 2019-2020
People in HCI Business
 Interactive / 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 & animations
 Information Architects: People who come up with ideas of
how to plan and structure interactive products
 User Experience Designers: people who do all the above
but who may also carry out field studies to inform the
design of products
https://www.indeed.hk/Interaction-Designer-jobs

H. C. So Page 41 Semester A 2019-2020

People in HCI Business
User experience is

 An important concept in interaction design

 About how people feel about a product and their pleasure
and satisfaction when using it, looking at it, holding it,
opening it, closing it, etc.
 Examples: how smoothly a switch rotates, the sound of a
click, the touch of a button when pressing it
 Cannot design a user experience, only design for a user
experience
 You might be involved

H. C. So Page 42 Semester A 2019-2020

People in HCI Business

H. C. So Page 43 Semester A 2019-2020

People in HCI Business
Famous companies which provide HCI consultancies and
education:
 Nielsen Norman Group: “help companies enter the age of
the consumer, designing human-centered products and
services” (www.nngroup.com)
 IDEO: “is a global design company. We create positive
impact through design.” (www.ideo.com)
 Apple (https://developer.apple.com/design/)

H. C. So Page 44 Semester A 2019-2020

Activities in HCI Design
1. Identify needs and establish requirements
2. Develop alternative designs
3. Build interactive prototypes that can be communicated
and assessed
4. Evaluate what is being built throughout the process

H. C. So Page 45 Semester A 2019-2020

Activities in HCI 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 throughout the core activities

H. C. So Page 46 Semester A 2019-2020

General Principles of HCI Design
 Making systems easy to use & learn
 Usability applies to all aspects of a system
 Principles support usability include
 Compatibility
 Ease of Learning
 Memorability
 Predictability
 Simplicity
 Flexibility
 Responsiveness
 Protection
 Invisible Technology
 Control
 WYSIWYG
 Accessibility
H. C. So Page 47 Semester A 2019-2020
Compatibility
 User – know the user
 Design must be appropriate
and compatible with the needs
of the user or client
 Effective design starts with
understanding the user’s
needs and adopting the user’s
point of view
 One common error among
designers is to assume that
users are all alike
 Another is to assume that all
users think, feel, and behave
exactly like the developer
H. C. So Page 48 Semester A 2019-2020
Compatibility
 Product – can reduce
both learning time &
errors
 The intended user of a
new system is often the
user of other systems or
earlier versions of the
system. Habits,
expectations, and a level
of knowledge have been
established and will be
brought in learning the
new system

H. C. So Page 49 Semester A 2019-2020

Compatibility
 If these cannot be applied to the new system, confusion
results and learning requirements are greatly increased

 While compatibility across products must always be

considered in relation to improving interfaces (e.g.,
different applications in Microsoft Office), making new
systems compatible with existing systems (e.g., different
versions of WORD) will take advantage of what users
already know and reduce the necessity for new learning

Any disadvantage?

H. C. So Page 50 Semester A 2019-2020

Compatibility
 Task compatibility: The organization of a system should
match the tasks a person must do to perform the job

H. C. So Page 51 Semester A 2019-2020

Compatibility
 Work flow compatibility:
Structure and flow of
functions should permit
easy transition between
tasks. The user must never
be forced to navigate
between applications or
many screens to complete
routine daily tasks

H. C. So Page 52 Semester A 2019-2020

Ease of Learning
 Ease of learning – the
system should be easy to
learn so that the user can
rapidly start getting some
work done with the
system

H. C. So Page 53 Semester A 2019-2020

Memorability
Interfaces that have high memorability will be easier to learn
and use. Factors which affect memorability include

 Location: It will be easier to remember if a particular object

is placed in a consistent location, e.g., always putting the
search box in the upper right-hand corner of a Web page
 Logical grouping: It will be easier to remember if things
are grouped logically, e.g., putting related options
together in a menu
 Conventions: Conventional objects and symbols will be

easier to remember, e.g., shopping cart symbol

H. C. So Page 54 Semester A 2019-2020

Predictability
Predictability involves a person’s expectations and his/her
ability to determine the results of actions ahead of time. It
includes:
 Consistency – Reinforce our associations and therefore
increase our ability to remember and predict outcomes and
processes, e.g., same format in command, screen layout,
and navigation control
 Generalizabilty – Help us use the knowledge we gather
from previous experience and apply it to similar situations
 Familiarity – A user’s knowledge and experience in other
domain can be applied when interacting with a new
system, e.g., familiar menu names and options help users
locate objects and functions more easily
H. C. So Page 55 Semester A 2019-2020
Predictability

H. C. So Page 56 Semester A 2019-2020

Predictability
 Conventions – Allow us to use our intuitions which are
based on previous experience and logic; if something is
consistently done in a particular way, it will eventually
become the conventional way of doing it

H. C. So Page 57 Semester A 2019-2020

Simplicity
If things are simple they will be easy to understand and thus
easy to learn and remember

H. C. So Page 58 Semester A 2019-2020

Simplicity
It includes:
 Progressive disclosure – Show the user only what is
necessary

H. C. So Page 59 Semester A 2019-2020

Simplicity
 Constraints – Involve limiting the actions that can be
performed in a particular design

H. C. So Page 60 Semester A 2019-2020

Flexibility
 Allow more user control
& accommodates
variations in user skill
and preferences, i.e.,
give users choices

 Hardware
 Types of interaction
 Data format

H. C. So Page 61 Semester A 2019-2020

Flexibility
 Flexibility is the system’s ability to respond to individual
differences in people
 Permit people to choose the method of interaction that is
most appropriate to their situation. People should be able
to interact with a system in terms of their own particular
needs including knowledge, experience, and personal
preference
 Flexibility is accomplished by providing multiple ways to
access application functions and perform tasks
 It is also accomplished through permitting system
customization

H. C. So Page 62 Semester A 2019-2020

Responsiveness
 The system must rapidly
respond to the user’s
requests
 Provide immediate
acknowledgment for user
actions: visual, textual,
and/or auditory

H. C. So Page 63 Semester A 2019-2020

Protection

 Protect users against

disastrous results of
common human error

H. C. So Page 64 Semester A 2019-2020

Invisible Technology
 In general, the user
should need to know as
little as possible about the
technical details of how
the system is implemented
and operates

H. C. So Page 65 Semester A 2019-2020

Control

 Users prefer to feel a

sense of mastery
and control over the
system
 It is frustrating and
demoralizing when
the user is being
controlled and
directed by machine

H. C. So Page 66 Semester A 2019-2020

WYSIWYG

 What you see is what you

get

H. C. So Page 67 Semester A 2019-2020

Accessibility
 Degree to which a product is accessible by as many people
as possible
 Focus on disability, including
 Visually impaired (who need magnifier to see) or blind
 Color blind (who are not able to distinguish two colors)
 Dyslexia (who have difficulties in reading and writing)
 People with missing limbs
 Now a legal issue: Disability Discrimination Ordinance
(Cap 487) has created a legal duty for organisations to
ensure their services are available to everyone regardless
of disability. This principle is applicable to information and
services provided through Websites
https://www.elegislation.gov.hk/hk/cap487
H. C. So Page 68 Semester A 2019-2020
General Principles of HCI Design
 Principles which do / do not support user experience
 Satisfying
 Fun
 Enjoyable
 Entertaining
 Helpful
 Surprising
 Aesthetically pleasing
 Rewarding
 Supportive of creativity
 Emotionally fulfilling
 Boring
 Frustrating
 Annoying
H. C. So Page 69 Semester A 2019-2020
General Principles of HCI Design

 Principles are often in

direct conflicts with one
another. In order to make
the trade-offs intelligently,
a thorough understanding
of the intended users is
required

 These principles are very

general and designers
may not know how to
apply them directly

H. C. So Page 70 Semester A 2019-2020

Norman's Principles of Usability
Norman is a cognitive psychologist, expertise in computers
Cognition refers to how we gain knowledge, includes
understanding, remembering, reasoning, acquiring skills,
creating new idea
Basic ideas of Norman’s principles:
 We can learn from common objects
 We are able to operate common objects without a user
manual
 The objects should provide some cues. If a simple piece
of equipment such as a door or a kitchen stove requires
labelling, that need is sign of design failure
 Visibility, affordance, mapping, constraints, feedback
H. C. So Page 71 Semester A 2019-2020
Norman's Principles of Usability


A product or design with good usability should provide

perceptual cues for us to answer:
 Can we see the interface elements?
Related to visibility
 What do you perceive you can do with the interface?
Related to affordance
 How our interaction is constrained by the interface?
Related to constraint
 What is supposed to happen when we interact with the
interface?
Related to mapping and feedback

H. C. So Page 72 Semester A 2019-2020

Norman's Principles of Usability

 Visibility
 Interface feature is accessible to a human sense organ?
(e.g., Can an answering machine indicate the presence
of incoming voice mails? The number of mails?)
 Indicate what parts operate & how
 Indicate how user is to interact with the device
(e.g., on/off key on a calculator)
 The more visible functions are, the more likely users will
be able to know what to do next

H. C. So Page 73 Semester A 2019-2020

Norman's Principles of Usability

Which one is of higher visibility?

H. C. So Page 74 Semester A 2019-2020

Norman's Principles of Usability

Which one is salt shaker? Which one is pepper shaker?

Which pair is of higher visibility?

H. C. So Page 75 Semester A 2019-2020

Norman's Principles of Usability

 This is a control panel for an

elevator (www.baddesigns.com)
 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?
⇒ It is not visible as to what to do!

H. C. So Page 76 Semester A 2019-2020

Norman's Principles of Usability
Need to insert your room card in the
slot first!
How would you make this action more
visible?
 Make the card reader more obvious
 Provide an auditory message, that
says what to do
 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

H. C. So Page 77 Semester A 2019-2020

Norman's Principles of Usability

Is it easy for you to find where is the toilet paper?

H. C. So Page 78 Semester A 2019-2020

Norman's Principles of Usability
 Feedback
 This principle is nature: when you talk to somebody, you
expect a reply
 Send back to user information about what action has
actually been done. This allows a person to continue with
the activity
(e.g., press a key on a telephone, copy a file in PC,
progress of downloading a file from internet, screen
button clicked on provides sound or red highlight
feedback)

 Include sound, highlighting, animation and combination

of these
H. C. So Page 79 Semester A 2019-2020
Norman's Principles of Usability
Plagiarism check of my PDF using iThenticate

Is the software checking plagiarism?

H. C. So Page 80 Semester A 2019-2020
Norman's Principles of Usability
Any improvement?

H. C. So Page 81 Semester A 2019-2020

Norman's Principles of Usability
A user wants to create a new post and moves the pointer
over the “Create” button:

Has the user received any feedback?

H. C. So Page 82 Semester A 2019-2020

Norman's Principles of Usability
 Constraints
 Restricting the possible actions that can be performed at
a given moment
(e.g., some menu options will be deactivated by shading
them at some occasions)
 Avoid wrong uses of thing, i.e., help prevent user from
selecting incorrect options
 3 main types:
 Physical
 Logical
 Cultural

H. C. So Page 83 Semester A 2019-2020

Norman's Principles of Usability
Physical Constraints
 Physical objects can be designed to constrain things, and
this constraint restricts the user interaction
 How many ways can you insert electrical plug to a socket?
 How about inserting a CD into a computer?
Which of them has a better physical constraint?

 The more possible interpretations a thing has, the more

difficult it will be to use
H. C. So Page 84 Semester A 2019-2020
Norman's Principles of Usability
Logical Constraints
 Exploit people’s common sense reasoning about actions
and their consequences
 When no object is selected, it is not allowed to use the
“Cut” command in WORD

H. C. So Page 85 Semester A 2019-2020

Norman's Principles of Usability
Cultural Constraints
 Society has evolved numerous artificial conventions that
govern acceptable social behaviour. These cultural
conventions have to be learned, but once learned they
apply to a wide variety of circumstances.
 Red colour stands for danger while green colour stands for
safe
 Smiling face stands for happy emotion

Which one is universal and which one is culturally-

specific (i.e., accepted by a cultural group only)?

H. C. So Page 86 Semester A 2019-2020

Norman's Principles of Usability
 Light switch:
 America: down is off
 Britain: down is on

 Water tap:
 America: anti-clockwise is on
 Britain: anti-clockwise is off
 Red colour:
 America: danger
 Egypt: death
 India: life
 China: happiness
H. C. So Page 87 Semester A 2019-2020
Norman's Principles of Usability
 Affordance
 Refer to an attribute of an object that allows people to
know how to use it, i.e., give clues to operations of things
 Indicate what thing is for
(e.g., a door handle affords pulling, a cup handle affords
grasping)

 Indicate how thing could possibly be used

(e.g., knobs are for turning, slots are for inserting things
into)
H. C. So Page 88 Semester A 2019-2020
Norman's Principles of Usability
 Other examples include: scrollbars afford moving up and
down, icons afford clicking on

Milk
Butter
Cheese

Water
Beer
Wine

A radio button in a Web page affords you to choose 1-of-

many choice by clicking one of the items
H. C. So Page 89 Semester A 2019-2020
Norman's Principles of Usability

A check box affords you to choose 0 to all choices

Is it true for Microsoft WORD?

There are two kinds of affordance:

 Real: for physical objects and do not have to be learned
 Perceived: for screen-based interfaces and can be
considered as learned conventions
H. C. So Page 90 Semester A 2019-2020
Norman's Principles of Usability

H. C. So Page 91 Semester A 2019-2020

Norman's Principles of Usability
 Mapping
 Natural relationship between controls & their effects
(e.g. move mouse to left, pointer goes left)

 Upper button controls upper bulbs while lower controls

lower bulbs (button affords you to press)

H. C. So Page 92 Semester A 2019-2020

Norman's Principles of Usability
 The timer knob in a microwave oven is of good mapping
because turning it clockwise implies increasing cook
time (the knob affords you to turn as well)

 The volume knob in a Hi-Fi system is of good mapping

because turning it clockwise implies increasing volume
(the knob affords you to turn as well)
H. C. So Page 93 Semester A 2019-2020
Norman's Principles of Usability
 Slide bar also has a strong mapping, since moving it to
the right/top will increase the value while moving it to
the left/down will decrease it (the slider affords you to
move)

H. C. So Page 94 Semester A 2019-2020

Norman's Principles of Usability

A B C D

Which controls go with which burner rings?

H. C. So Page 95 Semester A 2019-2020

Norman's Principles of Usability

Is it better?

H. C. So Page 96 Semester A 2019-2020

Norman's Principles of Usability

Which arrow-key layout is the best?

Which set is better?

H. C. So Page 97 Semester A 2019-2020

Norman's Principles of Usability
 Pull or Push?

 Which Norman’s
principle has been used?

H. C. So Page 98 Semester A 2019-2020

Norman's Principles of Usability
 Pull or Push?

 Which Norman’s
principle has been
used?

H. C. So Page 99 Semester A 2019-2020

Norman's Principles of Usability

Any suggested improvements?

H. C. So Page 100 Semester A 2019-2020
Norman's Principles of Usability

Which Norman’s principle(s) has/have been applied

in this education toy?
H. C. So Page 101 Semester A 2019-2020
 Norman's Principles of Usability

Which Norman’s principle(s) has/have been

applied in this unit?

H. C. So Page 102 Semester A 2019-2020

 Norman's Principles of Usability

How about this? What is the meaning of 3 black

dots in yellow?
H. C. So Page 103 Semester A 2019-2020
 Norman's Principles of Usability

Different vibrating patterns to indicate states of

pedestrian signal
Directional arrow to indicate the direction of the
pedestrian crossing
This is provided for visually impaired persons to use
Have you misused it?
H. C. So Page 104 Semester A 2019-2020
 Conceptual Model
 Conceptual model is a fundamental aspect of
HCI for interaction designers
 It is a high-level description of how a system/product
is organized and operates
 It outlines what users can do with a product and what
concepts are needed to understand how to interact
with it
 If the conceptual model meets the user’s intention,
this implies that the user will use the system easily.
 How to develop a conceptual model?
 Identify user’s needs and system requirements
 Identify a set of possible ways of interactions
 Select suitable metaphors (e.g., icons)
H. C. So Page 105 Semester A 2019-2020
 Conceptual Model
A classic example is the Star interface by Xerox

H. C. So Page 106 Semester A 2019-2020

 Conceptual Model
 Targeted for workers not interested in computing –
make the computer as “invisible” to the users as
possible and to design applications suitable to them
 Based on an analogy to a physical office
 Metaphors: paper, folders, filing cabinets and
mailboxes were represented as icons on the screen
and were designed to possess some of their
properties of their physical counterparts
 Concepts: Dragging an electronic document onto an
electronic folder was seen as being analogous to
placing a physical document into a physical cabinet;
Placing an electronic file onto the printer icon would
print it out

H. C. So Page 107 Semester A 2019-2020

 Conceptual Model
Another example: Recycle Bin in Windows 7

What is your understanding on the recycle bin?

 A place for deleting objects
 Drag objects to be deleted to the bin
Suppose a company wants to develop a mobile App for
facilitating tourists to hike in Hong Kong.
How to develop a conceptual model for this
system?
What questions should we ask in developing the
conceptual model?
H. C. So Page 108 Semester A 2019-2020
 Conceptual Model
Suggestions:
 Who are they? Putonghua speaking Chinese or
foreigners who speak English?
 What do they want? Hiking information
 How to get to a particular hike in Hong Kong?
 For a particular hike, what is the difficulty level? How
about the hiking time?
 How to support the activity of requesting information
in the optimum way? A menu system or voice
command activated system? Provide a system that
structures information in the form of lists, maps,
recommendations, etc.?
Hoasas
 Metaphors used in the interface? Concepts?
H. C. So Page 109 Semester A 2019-2020