1

WIA2010 HUMAN-COMPUTER INTERACTION

WELCOME
 WIA2010 HUMAN-COMPUTER INTERACTION 2

WELCOME MESSAGE

Dr. Nazean Jomhari

LECTURER

Our lecture schedule will be on Tuesday 1.30pm-3pm (live)

Tutorial on Thursday : Group 1 3-4pm, Group 2 4-5pm
Leaders please remind your team members in Whatapps group to be alert 10 minutes before the class start.
 3

Our course based on HCI notes from…

Interaction Design Foundation

John Doe

https://www.interaction-design.org/
WIA2010 HUMAN-COMPUTER INTERACTION 4

BEGINNER HCI

Beginner

HCI
The Interaction Design Foundation (IDF) is an
independent non-profit initiative established in
2002 in Denmark. Its purpose is to democratize
knowledge of User Experience, product design and
human-computer interaction at a low-cost and high
quality. There are around 30 courses available, they
are organized as a beginner, intermediate and
advanced.
 WIA2010 HUMAN-COMPUTER INTERACTION 5

MAIN REFERENCE BOOK IN IDF

Alan Dix
Professor

This book has been adopted by the Interaction Design Foundation (IDF) for HCI course and of the authors,
Profession Alan Dix narrated in the video for the online classes.
 6

IDF HCI Professional Course, USD144 per year

 7

E-Book (FREE)for UM Student!!! Register

https://bookshelf.vitalsource.com/

Normal price: RM 177.32

Normal price: RM1473.41 !!!

 WIA2010 HUMAN-COMPUTER INTERACTION
8

1.1 WHAT YOU WILL LEARN (I HOPE!)

Facts Analysis Design Attitude

About systems & about Deep understanding of From understanding to Thinking about real use and
humans issues solutions real users
WIA2010 HUMAN-COMPUTER INTERACTION 9

TOPIC AREAS FOR

THE COURSE

Design basics
• process, evaluation, experience

Underlying knowledge and theory

• e.g. Human perception/ cognition/ emotion

Implementation
• architecture, prototypes

Specific topics/ domains

• e.g. information visualization, physicality
 WIA2010 HUMAN-COMPUTER INTERACTION
10

1.1 WHAT YOU WILL LEARN (I HOPE!)

Facts Analysis Design Attitude

About systems & about Deep understanding of From understanding to Thinking about real use and
humans issues solutions real users
 WIA2010 HUMAN-COMPUTER INTERACTION 11

1.2 WHAT IS HCI?

AN ACADEMIC A DESIGN DISCIPLINE

AN ACADEMIC A DESIGN DISCIPLINE

Studying people interacting with computer Designing interventions for systems involving
technology people and technology.
WIA2010 HUMAN-COMPUTER INTERACTION
12

MANY ROOTS &

BRANCHES
 13
WIA2010 HUMAN-COMPUTER INTERACTION

DESIGN – THREE
“USE” WORDS

#01 USEFUL
Functional, does things

USABLE
#02
Easy to do things, does the right
things, enjoyable, user experience

#03 USED
Attractive, available, acceptable to organization
WIA2010 HUMAN-COMPUTER INTERACTION 14

1.3 CHANGES AND

TRENDS

Domestic use
Global networks
Ubiquitous devices

HOW MANY COMPUTERS IN YOUR HOUSE?

WIA2010 HUMAN-COMPUTER INTERACTION
15

1.4 DIALOGUE
WITH THE
COMPUTER &
WORLD
Now
• Internet shopping, communities, home
• Experience and enjoyment
• More decision points
 1

HUMAN-COMPUTER INTERACTION
DR. NAZEAN JOMHARI

John Doe
 WIA2010 HUMAN-COMPUTER INTERACTION 2

1.2 WHAT IS HCI?

AN ACADEMIC A DESIGN DISCIPLINE

AN ACADEMIC A DESIGN DISCIPLINE

Studying people interacting with computer Designing interventions for systems involving
technology people and technology.
 WIA2010 HUMAN-COMPUTER INTERACTION 3

INTERACTION
DESIGN BASIC
Overview
1. Design
2. The design process
3. User
4. Scenarios
Interaction Design
5. Navigation Basic
6. Screen Design
Design The design
7. Iteration & prototypes (Overview) process
What it is, interventions, What happens when
goals, constraints
 4

Interaction Design
Basic
Scenarios Navigation Screen design Iteration &
User prototypes

Who they are, what they Rich stories of design Finding your way What goes where, Never get it right
are like around a system and what it looks first time!
like
 WIA2010 HUMAN-COMPUTER INTERACTION 5

WHAT IS DESIGN?

Definition: Achieving goals within

constraints

Goals – purpose
• Who is it for, why do they want it
Constraints
• Materials, platforms
Trade-offs
 6

WHAT ARE WE
DESIGNING?
 7

Not just interfaces

We are designing Not just the immediate interaction

interactions…
 8

Not just the artefacts

We are designing Not just system

interventions… But also changing the documentation,

manuals, tutorial
WIA2010 HUMAN-COMPUTER INTERACTION 9

GOLDEN RULE OF
DESIGN
Understand your materials

Understand computers
• Limitations, capacities, tools, platforms

Understand people
• Psychological, social aspects
• Human error

And their interactions

 WIA2010 HUMAN-COMPUTER INTERACTION 10

Human error vs
Design error
Air crash? Industrial accident? Hospital mistake?

Concrete bridge breaks?

Human error is normal

• We know how users behave under stress
• So design for it!

Treat the user at least as well as physical materials!

 11

WIA2010 HUMAN-COMPUTER INTERACTION

CENTRAL MESSAGE
User
 WI A 2 0 1 0 H u ma n C o mputer I nte ra c t i o n1

Dr. Nazean

Interaction Design (1)

1.1 FIVE Stages in the Interaction Design Process

1.2 Learn to prioritize in Your Interaction Design Process
1.3 User Focus – Personae
 2

INTERACTION
DESIGN BASIC
Overview
1. Design
2. The design process
3. User
4. Scenarios
Interaction Design
5. Navigation Basic
6. Screen Design
Design The design
7. Iteration & prototypes (Overview) process
What it is, interventions, What happens when
goals, constraints
 3

Interaction Design
Basic
Scenarios Navigation Screen design Iteration &
User prototypes

Who they are, what they Rich stories of design Finding your way What goes where, Never get it right
are like around a system and what it looks first time!
like
4
 5

INTERACTION DESIGN PROCESS

 6

INTERACTION DESIGN PROCESS

STAGE 1: WHAT USER NEEDS/WANTS

• Observe people
• Interview people
• Look at existing
solutions
 7

INTERACTION DESIGN PROCESS

STAGE 1: WHAT USER NEEDS/WANTS

IT’S EASY TO ASSUME

YOU KNOW
WHAT PEOPLE WANT
WIHTOUT EVEN
THINKING ABOUT IT
 8

INTERACTION DESIGN PROCESS

STAGE 1: WHAT USER NEEDS/WANTS

IT’S QUITE OFTEN

DIFFICULT FOR
SOMEBODY TO
ENVISAGE THAT
FUTURE
 9

INTERACTION DESIGN PROCESS

INTERACTION DESIGN PROCESS
STAGE 2: ANALYSIS

• SORTING
• ORDERING
• STRUCTURING
 11

But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the
system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids
pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely
painful.
 12

Card Sorting
Activity
 Fund 13
Newslett Photo Join our
raise for About us
er Gallery society
us
Organizat
Backgrou Get Post Ongoing
ional Vision
nd involved event event
Chart

News & Fundraise

Sponsor Mission Form FAQ
events FAQ

Contact Donate Upcomin

Volunteer Event
us now g event 13
14
15
 16

WRITE HERE SOMETHING ABOUT

WELCOME MESSAGE

INTERACTION DESIGN PROCESS

STAGE 2: ANALYSIS (structuring)
 17

INTERACTION DESIGN PROCESS

STAGE 2: ANALYSIS (structuring)
 18

INTERACTION DESIGN PROCESS

 19

INTERACTION DESIGN PROCESS

STAGE 3: DESIGN (guidelines)

https://material.io/desi
gn
 20

INTERACTION DESIGN PROCESS

 21

INTERACTION DESIGN PROCESS

STAGE 4: PROTOTYPE

YOU ARE NEVER

GET IT RIGHT THE
FIRST TIME
 22

About
Us

Home Get
Involved

Page News &

Events

Donate
Now
 23

Student
Form
 24

Parent
Form
 25

Teacher
Form
26
27
 28

INTERACTION DESIGN PROCESS

 29

You do need a precise You need to know

specification what you are going to deploy

If you have not made the It was the intervention that

design decisions, ultimately you design
they will make them
without realizing they are
 30

PRIORITIZE
31
 32

PRIORTIZE

• LIMITED TIME/ STAFF

• TRADE OFF
• IDENTIFY IMPORTANT
PROBLEM
 33

USER FOCUS
 34

USER FOCUS

• TALK TO THEM
• WATCH THEM
• IDENTIFY QUESTIONS TO ASK
• EMPATHY – PUT YOURSELF IN
THEIR SHOE
35
36
37
38
 39

ATTIA NURSING HOME

40
 41

reflection
 42

Reflection
- Learn how nursing home operates
- Story behinds the nursing career
- Routine of an elder in nursing home
- Learn how to design based on needs of organization
 43

We feel that the old folks need some entertainment such as video game or watching
movie.
During the visitation, we feel empathy and we want to do our best to help the
community.
We learnt that it is important to have interaction with human.
we think that even though we were busy with our work, we should take care of parents
ourselves. With that, the old folks will have family activity that can entertain them.
 44
PERSONA

44
 LESSON 4
1. User focus – Probes
2. Scenarios
3. Introduction & Structure
4. Navigation Design (4 Golden Rules)
5. Navigation Design - Global: Between Screens, within the Application
1. USER FOCUS – PROBES

 Probes -> meaning “It serves as a means of gathering inspirational data about
people's lives, values and thoughts”

 Direct observation sometimes hard

 in the home
 psychiatric patients

 Probe packs prompt responses

 Glass to listen at wall, camera, postcard
 User’s own environment
1. USER FOCUS – PROBES

https://www.youtube.com/watch?v=bqgQrSuesGU
1. TECHNOLOGY – PROBES
New Technology

Design
Designer

Item
User
System
2. SCENARIOS

 Stories for design

 Use and reuse
 Linearity: time is linear – our lives are linear, limited alternatives
 Step-by-step walkthrough
3. INTRODUCTION NAVIGATION &
STRUCTURE
Hardware or Software
1. Widget choice: menus, buttons, colour,
2. Screen design
3. Navigation design: site structure
4. Environment: the web, browser, real world
3. INTRODUCTION NAVIGATION &
STRUCTURE
Structure in Design (Software)
1. Within a screen
2. Local: Looking from this screen out
3. Global: Structure of site, movement between screen
4. Wider still: Relationship with other applications
 4. NAVIGATION DESIGN (4 GOLDEN RULES)

 1. Knowing where you are

 2. Knowing what you can do
 3. Knowing where you are going
 Or what will happen
 4. Knowing where you’ve been
 Or what you’ve done
5. NAVIGATION DESIGN - GLOBAL: BETWEEN
SCREENS, WITHIN THE APPLICATION
❖Navigating Hierarchies – Deep is difficult
❖Miller’s 7 +- 2 short term memory, not menu size
❖Optimal: Many items on each screen/ structured within screen
❖Think about dialogue with computer
❖Network diagrams – Paths in your system
 Lesson 5
Interaction Design (3) – Dr Nazean
 Topic to cover…
• 1. Navigation design – Wider still: Between Applications and Beyond
• 2. Design & Layout
• 3. Whitespace
• 4. Physical Devices Too
 1. Navigation design – Wider still: Between
Applications and Beyond
• 1. Style issues: Platform standards, consistency
• 2. Functional issues: Cut and paste
• 3. Navigation issues: Embedded applications, links to other apps….the web
 2. Design & Layout

• Basic principles
• 1. Ask : What is the user doing?
• 2. Think: What information, comparisons, order
• 3. Design: Form follows function
 2. Design & Layout

• Available Tools
1. Grouping of items
2. Order of items
3. Decoration – Fonts, boxes etc
4. Alignment of items
5. Whitespace
 2. Design & Layout

1. Grouping of items: Logically together = Physically together

 2. Design & Layout

2. Order of items
• Think what is natural order
• Should match screen order : use box,
space, set up tabbing
• Instructions: Beware the cake recipe
syndrome: mix milk and flour, add fruit
after beating them
 2. Design & Layout

3. Decoration
• Use box to group logical items
• Use fonts for emphasis, headings
• But not too many!
 2. Design & Layout

4. Alignment - Text
• You read from left to right (Malaysian,
English)
• Scanning - Make it easy to recognize
• Numbers: Align decimal points or right
align integers
 3. Whitespace
• Matches the function
• Space to separate
• Space to highlight
 4. Physical Devices Too
• Order of items
• Grouping of items
1. Type of heating
2. Temperature
3. Time to cook
4. Start
 4. Physical Devices Too

• Decoration
• Different colours for different
functions
 4. Physical Devices Too

• Alignment
• Centre text in button
 4. Physical Devices Too

• Whitespace
• Gaps to aid grouping
 1. User Action & Control

2. Appropriate Appearance

3. Analysing Website Navigation and Screen Design

Lesson 6 4. Why do You Need Prototyping

1. User Action & Control

 Entering Information
 Knowing what to do
 Affordances
1. User Action & Control

Entering Information
 Forms, dialogue boxes – Presentation + data input
 Logical layout – task analysis, grouping natural
order for entering information
1. User Action & Control

Knowing What To Do  What is active what is passive

 Consistent style helps
 Labels and icons
  Psychological term
1. User Action & Control
 For physical objects – shape and size suggest actions
 For screen objects – button ‘affords’ mouse click
Affordances
 Culture of computer use – icons ‘afford’ clicking
2. Appropriate Appearance

 Presenting Information
 Aesthetics and utility
 Colour and 3D
 Localisation and internationalisation
1. Appropriate Appearance
 Purpose matters – sort order, text vs diagram,
scatter graph vs histogram
Presenting information

 Use paper presentation principles

 But add interactivity –soften design choices

  Aesthetically pleasing designs
1. Appropriate Appearance  Beauty and utility may conflict
 But can work together
Aesthetics and utility
  Both often used very badly
 Colour – use sparingly to reinforce other information
1. Appropriate Appearance
 3D effects – good for physical info and some
graphs, but if over used…
Colour and 3D
3. Analysing Website Navigation &
Screen Design (Exercise for Tutorial)

 Choose https://publicgold.com.my/ website

 Identify the main functions in the website
 Analyse the navigation structure – Is it hierarchical? If not how it is structured? Do you feel
it is easily comprehensible? Why?
 Look at a few key screens – Does it use any of the features (space, grouping, colour etc)?
Are there other good bad features about the screen design?
 3. Analysing Website Navigation &
Screen Design (Exercise for Tutorial)

 Main functions in the publicgold.com.my website:

No. Main function Structure

 3. Analysing Website Navigation &
Screen Design (Exercise for Tutorial)

 Main functions in the publicgold.com.my website:

No. Main function Structure

 3. Analysing Website Navigation &
Screen Design (Exercise for Tutorial)

 Main functions in the publicgold.com.my website:

No. Main function Structure

 3. Analysing Website Navigation &
Screen Design (Exercise for Tutorial)

 Main functions in the publicgold.com.my website:

No. Main function Structure

 4. Why do You Need Prototyping

 We don’t get things right first time

 Prototype Cycle – You always need to iterate
4. Why do You Need Prototyping
Low fidelity
Low fidelity
Low fidelity
High Fidelity Prototype – Figma.com
 User-Centered Website
Development: A Human-
Computer Interaction Approach

Chapter 9: Color Copyright © 2004 by Prentice Hall

 Daniel D. McCracken
City College of New York
Rosalee J. Wolfe
DePaul University
With a foreword by:
Jared M. Spool, Founding Principal,
User Interface Engineering
PowerPoint slides by Dan McCracken, with thanks
to Rosalee Wolfe, S. Jane Fritz of St. Joseph’s
College, and Rhonda Schauer

Chapter 9: Color Copyright © 2004 by Prentice Hall

 Credits

Slides 7 and 35-44: Daniel D. McCracken.

Slide 29: Courtesy of American Honda Motor Co., Inc.
Slide 31: Courtesy of Crate&Barrel.
Slide 33: Courtesy of Mattel, Inc.
Slide 45: Estate of Horace W. McCracken.

Chapter 9: Color Copyright © 2004 by Prentice Hall

 9. Color
In this chapter you will learn about:
Physical and perceptual aspects of color
Several color models and the advantages of each
Four color-harmony schemes
Some examples of color in nature, relating them
to our vocabulary of color
Tool programs available to you for studying color
How color can make Web pages pleasing and
easy to read

Chapter 9: Color Copyright © 2004 by Prentice Hall

 9.2 The Physics of Color
The spectrum of visible light
The electromagnetic spectrum
Human response to color

Chapter 9: Color Copyright © 2004 by Prentice Hall

 The spectrum of visible light

Chapter 9: Color Copyright © 2004 by Prentice Hall

 The electromagnetic spectrum, of which
visible light is a very thin band

Chapter 9: Color Copyright © 2004 by Prentice Hall

 Human response to color

Chapter 9: Color Copyright © 2004 by Prentice Hall

 9.3 Color Models
A color model is a representation system for
describing a color more precisely than would be
possible with nouns and adjectives
An artist’s color wheel: red, yellow, and blue
(RYB)
Additive color: red, green, blue (RGB)
Subtractive color: cyan, magenta, yellow, and
black (CMYK)
Hue, saturation, and brightness (HSB)
L*a*b

Chapter 9: Color Copyright © 2004 by Prentice Hall

 The artist’s model: red, yellow, and blue

Chapter 9: Color Copyright © 2004 by Prentice Hall

 An artist’s color wheel

Chapter 9: Color Copyright © 2004 by Prentice Hall

 The secondary colors

Chapter 9: Color Copyright © 2004 by Prentice Hall

 The tertiary colors

Chapter 9: Color Copyright © 2004 by Prentice Hall

 Additive color: things that emit light,
especially monitors (RGB)

Chapter 9: Color Copyright © 2004 by Prentice Hall

 In additive color . . .

Red + Green = Yellow

Red + Blue = Magenta
Green + Blue = Cyan
Red + Green = Yellow? Yes, when you add
colors. Paint and print subtract colors.

Chapter 9: Color Copyright © 2004 by Prentice Hall

 Subtractive color: things that reflect (and
selectively absorb) light (CMYK)

Chapter 9: Color Copyright © 2004 by Prentice Hall

 In subtractive color . . .

Cyan subtracts red

Magenta subtracts green
Yellow subtracts blue
In photography, that’s it: all three together
subtract all light, giving black
In print, the dyes aren’t that good, and we need
black ink too
Hence, four-color printing: CMYK
K from blacK; B already means Blue

Chapter 9: Color Copyright © 2004 by Prentice Hall

 HSB: Hue, Saturation, and Brightness

Hue: where a color lies around a color wheel:

red, green, yellow, blue-green, etc.
Saturation: the “purity” of a color; a fully-
saturated color has no white mixed with it, in
paint terms
Brightness: light, dark, or in between?
In everyday use, most people probably are
thinking of hue when they speak of color

Chapter 9: Color Copyright © 2004 by Prentice Hall

 The color cone: hue, saturation, and
brightness in relation to each other

Chapter 9: Color Copyright © 2004 by Prentice Hall

 White, black, and all grays are zero percent
saturated
A color becomes more saturated as it moves
away from gray to a pure color
A pure (fully-saturated) color, in RGB terms, in
one that contains:
Only red, green, or blue, or
Only yellow (= red + green), or
Only magenta (= red + blue)
Only cyan (= blue + green)

Chapter 9: Color Copyright © 2004 by Prentice Hall

 More on saturation, continued

Note: the previous slide said nothing about the

brightness of those pure colors
A saturated color can be a brilliant yellow, but
It can be a deep crimson, or midnight blue
The flower pictures, Slides 35 to 44, show many
combinations of brightness and saturation

Chapter 9: Color Copyright © 2004 by Prentice Hall

 Varying saturation, with brightness held
constant

Chapter 9: Color Copyright © 2004 by Prentice Hall

 Varying brightness, with saturation held
constant

Chapter 9: Color Copyright © 2004 by Prentice Hall

 L*a*b
L is luminance
a specifies where a color lies on an axis that runs from
green to red
b specifies where a color lies on an axis that runs from
blue to yellow.
The L*a*b model is the internal representation of color in
Adobe products and in Postscript.
L*a*b is also the basis of ordinary TV (not digital).
The format was adopted at a time when there were very
few color television sets
the color signal needed to be compatible with black and white
sets
Black and white sets look only at the luminance portion of the
signal and ignore the chrominance portion.

Chapter 9: Color Copyright © 2004 by Prentice Hall

 9.4 Four Color-Harmony Schemes
Monochromatic: colors of same or similar hue,
differing in brightness and/or saturation
Complementary: colors approximately opposite
each other on a color wheel
Analogous: colors adjacent to each other, from
any segment of a color wheel
Triadic: three colors approximately equally
spaced around a color wheel

Chapter 9: Color Copyright © 2004 by Prentice Hall

 Monochromatic color harmony: colors of
same hue, differing in brightness and/or
saturation

All blue All orange

Chapter 9: Color Copyright © 2004 by Prentice Hall

 Monochromatic example: orange, with
variation in brightness and saturation

Chapter 9: Color Copyright © 2004 by Prentice Hall

 Complementary: red and green

Chapter 9: Color Copyright © 2004 by Prentice Hall

 Complementary: various blues, with red-
orange highlights

Chapter 9: Color Copyright © 2004 by Prentice Hall

 Analogous: bright orange, darker yellow-
orange, light yellow

Chapter 9: Color Copyright © 2004 by Prentice Hall

 Analogous: red-orange through yellow-
green

Chapter 9: Color Copyright © 2004 by Prentice Hall

 Triadic: red, yellow, blue

Chapter 9: Color Copyright © 2004 by Prentice Hall

 Triadic: red, yellow, blue

Chapter 9: Color Copyright © 2004 by Prentice Hall

 The color software at the companion Web
site is a great way to learn

Permits simple experimentation with the

concepts, e.g.:
What is pink? (Desaturated red)
Can a dark color be saturated? (Yes)
Does adding red and green really give yellow? (Yes)
Is gray ever saturated? (No)
What does saturation mean at low brightness levels?
(Not much)
In RGB, how do you “add white” to red? (Increase the
amounts of green and blue)
http://www.prenhall.com/mccracken/

Chapter 9: Color Copyright © 2004 by Prentice Hall

 Here is pure red; what would we have to
do to make pink?

Chapter 9: Color Copyright © 2004 by Prentice Hall

 Answer: add green and blue

Chapter 9: Color Copyright © 2004 by Prentice Hall

 Lower all three, to get “dusty red,”
maybe, although we don’t often use the
language of fashion or interior decoration

Chapter 9: Color Copyright © 2004 by Prentice Hall

 This is a cool gray: less red than green
and blue

Chapter 9: Color Copyright © 2004 by Prentice Hall

 This is a warm gray: less blue than red
and green

Chapter 9: Color Copyright © 2004 by Prentice Hall

 Is gray ever saturated? Let’s try: this is so
dark as to be almost black, depending on
room lighting; zero saturation

Chapter 9: Color Copyright © 2004 by Prentice Hall

 Another gray (same amount of R, G, and
B); saturation still zero, brightness up

Chapter 9: Color Copyright © 2004 by Prentice Hall

 A lighter gray

Chapter 9: Color Copyright © 2004 by Prentice Hall

 Gray getting toward white; still zero
saturation

Chapter 9: Color Copyright © 2004 by Prentice Hall

 Black is completely unsaturated, right?
Right.

Chapter 9: Color Copyright © 2004 by Prentice Hall

 Change the amount of blue from zero to
one: now 100% saturated (same result in
Adobe and Microsoft software)

Chapter 9: Color Copyright © 2004 by Prentice Hall

 Now B = 40; can you distinguish from
black? (Still 100% saturated)

Chapter 9: Color Copyright © 2004 by Prentice Hall

 Now B = 100, and we have something
like midnight blue; still 100% saturated—
but now that begins to make sense

Chapter 9: Color Copyright © 2004 by Prentice Hall

 Pure blue; fully saturated by any
definition

Chapter 9: Color Copyright © 2004 by Prentice Hall

 Moral

The axis of the color cone (Slide 20) runs from

black at the bottom, through the grays, to white
at the top
All points on the axis are unsaturated
Near the bottom of the color cone there is very
little space between the axis and the pure colors
And the pure colors at the bottom of the cone
are dark
Hence: saturation is not a helpful term for low-
brightness colors

Chapter 9: Color Copyright © 2004 by Prentice Hall

 “I’d like the house painted a sky-blue
yellow”

That was the description once given to a

husband: “I want a yellow, but not a bright
yellow; like sky blue isn’t exactly blue.”
The husband didn’t understand, but negotiation
found the color
Now he understands: desaturate pure yellow, as
in the following slides

Chapter 9: Color Copyright © 2004 by Prentice Hall

 Starting point: what is sky blue? Find a
sample somewhere; note its saturation
and brightness

Chapter 9: Color Copyright © 2004 by Prentice Hall

 Now make a pure yellow, which is
maximum red and green

Chapter 9: Color Copyright © 2004 by Prentice Hall

 Now change the saturation and
brightness to what we had for sky blue.
Voilá! Sky-blue yellow.

Chapter 9: Color Copyright © 2004 by Prentice Hall

 The color matching tool from the
companion website

Two versions: match using RGB or HSB model

Start with any of the hundreds of named colors
available
That color appears in a top rectangle; bottom
rectangle is black
Move sliders to match colors
Hints given; “warmer” means “your last change
got you closer”
When you get a match, the number of
adjustments taken is reported

Chapter 9: Color Copyright © 2004 by Prentice Hall

 Let’s match orange, in the HSB model

Chapter 9: Color Copyright © 2004 by Prentice Hall

 Increase saturation and brightness, so we
can see where we are

Chapter 9: Color Copyright © 2004 by Prentice Hall

 Need to increase saturation and
brightness, and adjust hue

Chapter 9: Color Copyright © 2004 by Prentice Hall

 Success! (Not all adjustments were
shown, obviously.)

Chapter 9: Color Copyright © 2004 by Prentice Hall

 Let’s try a cool color, using the RGB
model

Chapter 9: Color Copyright © 2004 by Prentice Hall

 Dark olive green is green, but obviously
not fully saturated

Chapter 9: Color Copyright © 2004 by Prentice Hall

 So add some red and blue to desaturate

Chapter 9: Color Copyright © 2004 by Prentice Hall

 Success again—and again not all
adjustments were shown

Chapter 9: Color Copyright © 2004 by Prentice Hall

 A little more on color harmony

In the text we were limited in the number of

color pages we could use, so the examples of
color harmony were necessarily restricted. With
the luxury of more space here, we can add some
additional material.
In printing color in the book there is also the
problem of gamut: many colors we can produce
on the screen cannot be printed on a CMYK
printer. Examples: red, green, and blue.

Chapter 9: Color Copyright © 2004 by Prentice Hall

 The colors, laid out linearly instead of
around a circle

On the next two slides we have the 12 colors of

Slide 12, but shown in vertical bands
In each band the colors range from quite light to
quite dark
Light colors may appear almost white—but that
perception depends in part on background
Dark colors may appear almost black—same
comment
So we show with a black background and then
with a white background

Chapter 9: Color Copyright © 2004 by Prentice Hall

 1 2 3 4 5 6 7 8 9 10 11 12
1
2
3
4
5
6
7
8
9
10
11
12
13
Chapter 9: Color Copyright © 2004 by Prentice Hall
 1 2 3 4 5 6 7 8 9 10 11 12
1
2
3
4
5
6
7
8
9
10
11
12
13
Chapter 9: Color Copyright © 2004 by Prentice Hall
 The four color-harmony schemes

Monochromatic: colors from one column

Complementary: any two colors whose column
numbers differ by 6
Analogous: several colors from adjacent
columns, with 12 considered next to 1
Triadic: colors from columns:
1, 5, and 9, or
2, 6, and 10, or
3, 7, and 11, or
4, 8, and 12

Chapter 9: Color Copyright © 2004 by Prentice Hall

 Three columns for picking monochromatic
schemes; these three make a triadic
3 7 11

Chapter 9: Color Copyright © 2004 by Prentice Hall

 Monochromatic: Column 8, rows 2, 7, 12

Chapter 9: Color Copyright © 2004 by Prentice Hall

 Monochromatic: Column 1, rows 1, 4, 10

Chapter 9: Color Copyright © 2004 by Prentice Hall

 Three pairs of complementary colors
(complements don’t have to scream)

Chapter 9: Color Copyright © 2004 by Prentice Hall

 But they can scream, if you wish (It’s
called a clash—gets people’s attention)

But don’t do this casually—the clash can be almost

painful; you need to have a reason to do it
Chapter 9: Color Copyright © 2004 by Prentice Hall
 A triadic can shout . . .

Chapter 9: Color Copyright © 2004 by Prentice Hall

 . . . or whisper . . .

Chapter 9: Color Copyright © 2004 by Prentice Hall

 . . . or speak conversationally . . .

Chapter 9: Color Copyright © 2004 by Prentice Hall

 . . . or let others talk . . .

Big Important Words

Nice words, but not headline-type words.

Text. The story, now that I have your
attention.

Chapter 9: Color Copyright © 2004 by Prentice Hall

 End interlude

End of Interlude

And that is what we have time for, in

exploring another way of looking at
color harmony. Try it! Think about the
color combinations that work, and
experiment with variations of them.

Chapter 9: Color Copyright © 2004 by Prentice Hall

 Further reading on color harmony

Anon. The New Munsell Student Color Set.

Fairchild Publications, 1994.
Faber Birren. Principles of Color. Schiffer
Publishing, 1987.
Cailin Boyle. Color Harmony for the Web.
Rockport Publishers, 2001.
Hideaki Chijiiwa. Color Harmony: A Guide to
Creative Color Combinations. Rockport
Publishers, 1987
Bride Whelan and Lesa Sawahata. Color
Harmony Workbook. Rockport Publishers, 2001.

Chapter 9: Color Copyright © 2004 by Prentice Hall

 Text and background colors for legibility

Rule #1: Provide adequate contrast

Rule #2: But not too much, and for extended
use, black on white is too much contrast
Rule #3: Dark on light is better than light on
dark, for text
Rule #4: There are no other rules
Complements work
So does a dark color on a background of the same hue
but much lighter
Light on dark is occasionally OK for headings

Chapter 9: Color Copyright © 2004 by Prentice Hall

 Text in a dark color on its complement in
a light color works nicely

Color is one of the pleasurable aspects of eyesight

and is an integral part of Web pages. Properly used,
color makes a page both attractive and usable. It
can provide cues that indicate a button’s function or
state. It can distinguish between navigational aids
and content, unobtrusively guiding the user through
a page. This chapter presents some color basics
and design tips to enhance both the effectiveness
and appeal of a Web site.

Chapter 9: Color Copyright © 2004 by Prentice Hall

 A great many combinations are possible

In this chapter you will do the following:

understand physical and perceptual aspects of color
become aware of several color models and learn the
advantages of each
learn to apply four different color harmony schemes
explore how color can make Web pages pleasing
and easy to read

Chapter 9: Color Copyright © 2004 by Prentice Hall

 Even a little color in the background
makes text easier to read

It is rare that the color choices for Web pages are left
entirely in the hands of a developer or designer. In most
cases, the client will already have some colors in mind,
based on a corporate logo, a school insignia or personal
preference. Color harmonies provide options for
choosing colors that are compatible with the client’s
wishes. Applying guidelines for text and background
color will foster readability. Finally, using color to
organize text and focus attention will result in easier
navigation.

Chapter 9: Color Copyright © 2004 by Prentice Hall

 Now, for comparison, here is what black
on white looks like

There is quite a bit of overlap in the response curves.

The peak sensitivities for the first and second types
are actually in the yellow range. There is a big disparity
in the height of the three curves. This is due to the fact
that human eyes are most sensitive in the green range
of the spectrum and are dramatically less sensitive in
the blue range.
Black on white may not look too bad here. But
suppose you sat at a monitor six hours a day. Wouldn’t
you prefer a pastel background? And text that is dark
but not black?
Chapter 9: Color Copyright © 2004 by Prentice Hall
 But do provide adequate contrast

Offer expires 07/31/03. Offer available to new High Speed

Internet subscribers only. May not be used in conjunction
with any other offer. Service is not available in all areas.
Certain taxes and fees may apply. DSL: Offer requires a 12
month subscription. First six months will be billed at $29.95
per month, 49.95 thereafter. Early termination fees apply.
Includes Standard DSL Installation Kit. Does not include
shipping and handling charges. Additional equipment may be
required.

Chapter 9: Color Copyright © 2004 by Prentice Hall

 Always remember how we perceive blue
vs. red and green

Below is the same text as on the previous slide, except pure

blue instead of pure yellow. According to Adobe they both
have 100% brightness, and according to Microsoft they both
have luminance of 128. But that it not how we perceive them.
Offer expires 07/31/03. Offer available to new High Speed
Internet subscribers only. May not be used in conjunction
with any other offer. Service is not available in all areas.
Certain taxes and fees may apply. DSL: Offer requires a 12
month subscription. First six months will be billed at $29.95
per month, 49.95 thereafter. Early termination fees apply.
Includes Standard DSL Installation Kit. Does not include
shipping and handling charges. Additional equipment may be
required.
Chapter 9: Color Copyright © 2004 by Prentice Hall
 Don’t use red on blue or vice-versa

Blue has the shortest wavelength of visible light and red

the longest. Blue is refracted more strongly than red in our
lenses. (Compare with what a prism does to white light.)
Result: our eyes can’t focus on red and blue at the same
time, and the boundary seems to vibrate. It gets painful.
Camera lenses deal with this by using lens components
with different indexes of refraction, to produce an
achromatic lens, so that red and blue both focus at the
focal plane. Our eyes don’t work that way. This hurts.

Chapter 9: Color Copyright © 2004 by Prentice Hall

 Never use bright red on bright green or
vice-versa

Red on green also hurts the eyes. I refuse to

show any more of it!

Chapter 9: Color Copyright © 2004 by Prentice Hall

 But change brightness and/or saturation . . .

But: same hues, except a very light green background and

a very dark red text—different story. In fact, this is rather
nice, so I’ll show some more of it.
One reason this works is that there is adequate contrast
between the text and the background. As noted, our low
sensitivity to blue makes it hard to give rules on what the
difference in brightness should be. Use judgment and
common sense. And maybe do some user testing. ☺

Chapter 9: Color Copyright © 2004 by Prentice Hall

 That’s It For
Text/Background
You have seen combinations that
work and combinations that don’t
work. Be bold! Experiment! Just
maintain adequate contrast.

Chapter 9: Color Copyright © 2004 by Prentice Hall

 Summary
In this chapter you learned about:
The color spectrum; our eyes’ sensitivity to red, green,
and blue
Additive (RGB) and subtractive (CMYK) color models
The hue, saturation, and brightness (HSB) color model
Four color-harmony schemes: monochromatic,
complementary, analogous, and triadic
Text and background color combinations that are
legible and easy on the eyes

Chapter 9: Color Copyright © 2004 by Prentice Hall

THE HUMAN: PERCEPTION &
COGNITION
HCI
 THE HUMAN PERCEPTION INTRODUCTION

COMPUTATIONAL ANALOGY:
INPUT → PROCESSING → OUTPUT
THE FIVE SENSES
HCI
THE FIVE SENSES AND SOME MORE

PERCEPTION OF OUTSIDE
 THE FIVE SENSES AND SOME MORE

• HEADACHES
• HUNGER PERCEPTION OF INSIDE
• PROPRIOCEPTION
THE MOST USED SENSE!
EYE & VISION
HCI
 SIGHT

• MAJOR SENSE
• HALF OUR BRAIN DEDICATED TO VISION
• MAJORITY OF COMPUTER OUTPUT
 THE EYE

WHAT YOU CAN SEE

• PUPIL: THE LENS COVERING ‘HOLE’ INTO THE EYE
• IRIS: MUSCLES TO CHANGE LENS SHAPE

BEHIND THE SCENES

• UPSIDE DOWN IMAGE (LENS INVERTS)
• CELLS TO DETECT LIGHT (RODS AND CONES)
• OPTIC NERVE – BLIND SPOT….FILLING IN
 SENSING LIGHT

CONES RODS
• CENTRAL • PERIPHERAL
• COLOUR (3 KINDS) RGB • GREY ONLY
• DETAIL • MOVEMENT
• BRIGHT LIGHT • DIM LIGHT
 FOCUS & ATTENTION

FOVEA PERIPHERAL VISION

• CENTRE OF VISION • MAINLY RODS
• MAINLY CONES • DETECT MOVEMENT →CATCH
• PRETTY SMALL→ NEED
ATTENTION
SACCADES
FOCUS & ATTENTION
 WHAT WE REALLY SEE

SENSATION
• DIRECT IMPACT OF LIGHT ON RETINA

PERCEPTION
• WHAT WE FEEL WE SEE
• NOT THE SAME – OPTICAL ILLUSIONS
OPTICAL ILLUSIONS
 FOOLED?

OPTICAL ILLUSIONS
• OFTEN ODD EYE POSITIONS, UNUSUAL IMAGES

PERCEPTION
• DESIGNED FOR THE REAL WORLD
• OUR BRAIN TRIES TO ‘MAKE SENSE’ OF SENSATION

FOR DESIGN?
EAR & SOUND
HCI
 SOUNDS

• SECOND SENSE?
• PARTICULARLY IMPORTANT FOR SPEECH

• LESS USED IN USER INTERFACES

• PARTLY BECAUSE ANNOYING FOR OTHERS
• BECAUSE LESS DIRECTIONAL MORE DIFFUSE
• STRENGTH AND WEAKNESS
 THE SPECTRUM OF SOUNDS

• SOUND VARY IN
• PITCH (FREQUENCY)
• VOLUME
• TIMBRE … (THE ‘SHAPE’) GUITAR VS PIANO
• VIOLIN VS BIG BASS DRUM
 THE EAR

• SENSITIVE FROM ~20HZ TO ~20KHZ

• CHANGES WITH AGEING
• BALANCE ORGANS ALSO IN THE INNER EAR
 TWO EARS AND THE PINNA

• TWO EARS : STEREO SOUND →

LEFT/RIGHT DETECTION
• PINNA (VISIBLE EAR!): DIRECTIONAL,
CHANGES SHAPE OF SOUND →
FULL 3D SOUND
 TIME AND SPACE

• BINAURAL HEARING
• DISTANCE BETWEEN EARS ~30
• SPEED OF SOUND ~340 MS
• DELAY LEFT-RIGHT ~1 MS
 TIME AND SPACE

• WAVELENGTHS
• FOR EXAMPLE MIDDLE C PIANO
• FREQUENCY: 261.6 HZ
• WAVELENGTH ~1.3 METRES, 4.5
FEET

• AFFECTS PROPAGATION IN SPACES,

RESONANCE
IN THE INTERFACE
 SETTING THE MOOD

• THE MOVIE SOUNDTRACK

• ENGAGEMENT IN VIDEO GAMES AND VR
 ATTENTION & BACKGROUND

• CAN FOCUS ORAL ATTENTION

• CAN GRAB ATTENTION – BIG BANG OR SOFTLY WHISPERED NAME
SIGHT & SOUND
HCI
EYE & EAR … COMMON
 MEMORY

WI F2 0 0 1 HU MAN C O MP U TER I NTER AC TI O N

TYPES OF MEMORY
MECHANISM
IN THE BRAIN
MEMORY

S H O R T- T E R M M E M O RY
SHORT-TERM MEMORY
MEMORY CAPACITY
MEMORY

L O N G - T E R M M E M O RY
LONG-TERM MEMORY
TYPES OF EXPLICIT – LONG-TERM MEMORY
ASSOCIATIVE

• Concepts linked to one another

– Finding a start point?
– External cues

Recognition vs. recall

e.g. menus vs. command line

IMPLICIT/ TACIT KNOWLEDGE
LINKED
MEMORY

M E Z Z A N I N E M E M O RY
MEZZANINE MEMORY
WHERE STUDIED

• Cockpits and control rooms

– Situation awareness

• Reading
– Long-term working memory
SEMANTIC NOT PHOTOGRAPHIC
EMOTION & EXPERIENCE
EMOTION MATTERS!
NOT NEW?
BUSINESS VALUE
WHY USER EXPERIENCE?
MASLOW’S HIERARCHY OF NEEDS
…AND FOR USER INTERFACES?
EMOTION IN INTERFACES
SYSTEM & EMOTION INPUT/OUTPUT
KINDS OF EMOTION
KINDS OF EMOTION (2)
KINDS OF EMOTION (3)
REASON AND EMOTION
THE HAPPY MEAN
THE HAPPY MEAN
EXPERIENCE & ENCHANTMENT
EXPERIENCE & ENCHANTMENT (2)
BAKED BEAN VS MARS BAR DESIGN
BAKED BEAN VS MARS BAR DESIGN
WHO WINS?
WHO WINS?
HOW TO DESIGN FOR PEAK EXPEREINCE
WHEN TO SEEK PEAK EXPERIENCE