HCI Quick Guide

HCI Quick Guide
(Human-Computer Interaction Quick Guide)
Image from Flickr user Will Lion.

HCI Quick Guide
Human-Computer Interaction Quick Guide
Version Date Author Changes
2 12 jan 2016 Emanuel Fernandes Minor revision to correct some mistakes
and make the content clearer.
1 22 set 2009 Emanuel Fernandes Initial document.

“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
"The aim of possessing method is to seem finally as
if one had no method." — Chieh Tzu Yuan Hua Chuan
As HCI practitioners, our main goal is to help humans
to better interact with any computing systems they
must work with. This includes anything that can be
used by a human and can include computers,
smartphones, tablets, home appliances, cars, etc. A
big part of this field is to understand humans’
perception and cognitive limitations, and most
important, the need to empathize with users.
This guide aims to provide a scientific explanation to
your method that is correct but may seem arbitrary.
HCI Quick Guide
Human-Computer Interaction

Brief Contents
first and foremost The user is not like me 13
Chapter 1 Perception 15
Chapter 2 Cognition 21
Chapter 3 Memory 41
Chapter 4 Interaction Design 51
Chapter 5 Interface Design 63
Chapter 6 Text 85
Chapter 7 Color 91
Chapter 8 Motion 109
Chapter 9 Metaphors 113

Contents
first and foremost The user is not like me 13
Chapter 1 Perception 15
16 Perception: top down vs bottom up
17 Change blindness: overlook fine differences
18 Visual area with sharp details is very small
Chapter 2 Cognition 21
22 Functional fixedness
23 Attention limitations
24 Decision-making heuristics and biases
30 Multitasking and time-sharing
34 Signal detection theory
38 Situation awareness
Chapter 3 Memory 41
42 Working memory limitations
43 Long-term memory retrieval issues
44 Remember good memories, forget bad ones
45 Important of experiences: end & start
46 To forget and how to improve memory
49 Design information to remember

Chapter 4 Interaction Design 51
52 Application responsiveness times
53 Reading rates
54 Human brain processing times
57 Fitts’s law in interaction design
58 Hick-Hyman law in interaction design
59 F-shaped pattern for reading web content
60 Feedback, feedforward and affordances
Chapter 5 Interface Design 63
64 Bevel-like effect in backgrounds
65 Small multiples in data visualization
66 Color is powerful in search
67 Fast visual search
68 Depth perception
72 Gestalt principles
75 Combination of color brightness levels
76 Display design principles
81 Dynamic displays: analog vs digital
82 Configural displays
Chapter 6 Text 85
86 Web: users scan instead of reading
87 Easy and effective instructions
88 Name buttons with intended behavior
89 Usage of ALL CAPS and small caps
contents7

Chapter 7 Color 91
92 Color movement
93 Color blindness
94 Saturated colors and visual fatigue
96 Aging and sensitivity to blue
97 Constraints of pure blue color
99 Green: easiest color for the eye
100 High contrast variations and visual fatigue
101 Visual periphery colors: blue & yellow
102 Brighter colors: middle of visible spectrum
103 Yellow: most luminous color
104 Color contrast
Chapter 8 Motion 109
110 Periphery vision is sensitive to motion
111 Animation from still images
Chapter 9 Metaphors 113
114 Shopping cart metaphor on the web
Bibliography references 118
Bibliography 123
Subject index 130
contents 8

There is a large amount of Human-Computer Interaction (HCI)
design principles that guide designers in what or not to do when
designing a user interface. Those who work in the field, most of
the times apply these principles unconsciously and may even
forgotten some of them — this is normal, as humans’ memory has
many limitations. Another problem is that these principles are
spread across many disciplines and may be difficult and time-
consuming to search. The HCI Quick Guide was envisioned to solve
this problem.
This is a guide with the most important principles in the HCI
field that aims at providing information in a quick manner. Besides
enumerating design and usability principles, it contains practical
examples and short scientific explanations for the most sceptic
ones. Further reading can be done by following the bibliography.
Because it is always important to maintain credibility in our
actions or explanations, this guide also has the goal of helping
people to better understand why some interfaces are well or badly
designed. Also it allows designers to make informed, confident and
better design decisions.
The audience of this guide is primarily designers. Interaction,
user experience, usability designers, whoever you can recall of
people that work into creating great applications that have a
human interaction. If you create, this is, design anything, that any
human will use, then this guide is for you. For those, who want to
know more about what is Human-Computer Interaction, can get a
better understanding about this field.
This guide only contains what the author considered of being
the most important HCI principles and therefore is not a complete
set of HCI principles. These are organized into logic related
chapters to make the search and reading easier.
The author as a designer himself has to warn, that these are
principles and guidelines that should guide your design but not in
a rigidly way as different problems may require different solutions.
Some principles may even go against others, but this is normal
and as in other aspects of life, there are always pros and cons.
As a good designer, it is you job to critically analyze each
situation and make the best design for it, even if breaking some of
these principles. Nevertheless, don’t make use of this excuse for
not getting your work well done.
Preface

The user is not like me
Look, listen, probe, and empathize with your users. Don't assume
much about what the user knows and is capable of.
You know too much.
Empathize with your users.
Users have their own mental model.
In depth
As a designer you know too much, so be
careful with assumptions you make about
your users. Observe your users’ behavior,
listen to them, probe and understand what
is their mental model.
Put yourself in the user's mind
(empathize) and try to design for that
mental model.
listen
look probe
empathize
What the world really is, and what the user thinks the world is (mental model).
You should:
first and foremost 12

Perception: top down vs bottom up
We perceive the world using the combination of our physical
senses and our previous mental knowledge.
Perception of the world: Experience & Stimulus World.
In depth
Perceiving the world has two components
that interplay with each other. We use our
senses to perceive the world and our
knowledge complements it. Physical and
mental are brought together in what is called
top-down and bottom-up processing.
Top-down processing involves using our
expectancies and desires to perceive
something, while the bottom-up processing
involves using our senses. It is the
combination of both that we use most of the
times to perceive the world around us.
The example below shows a design
where knowledge helps a poor stimulus (font
too small). It’s easier to guess a person’s
name than a meaningless ID Card number.
perception15
Experience
Knowledge 
(Expectancies 
and Desires)
The senses
Stimulus World
Top-Down
Processing
Perception
Bottom-Up
Processing
Relationship between top-down and bottom-up processing, when perceiving the world around us. 
Image based on diagram in (an_introduction_to_human_factors_engineering, 2004).
ID Card: 11654012, Emanuel Fernandes 
Is a better design than 
Emanuel Fernandes — ID Card: 11654012.
Example:

Change blindness: overlook fine differences
People are bad at noticing subtle changes in subsequent images.
This is a psychological effect called “change blindness.”
Working memory limitations.
Subtle changes unnoticed.
Make important changes noticeable.
perception 16
In depth
Humans have a very limited working
memory, therefore it is almost impossible
to retain all details of an image we see.
When a similar image is presented to a
user without significant changes, it is very
difficult for us to remember enough details
and spot the changes.
When designing a notification to your
users, make sure the changes have enough
contrast to be noticed.
Besides the big banner, can you notice the differences between each other? 
One screenshot is before logging in and the other is after logging in.

Visual area with sharp details is very small
Our eyes cannot see details within the entire area we’re looking at.
We are capable of capturing details only if we fixate our gaze on a
small area within the entire visual field.
Visual acuity is smaller than people think. Flower image: (sensation_and_perception_web_activities, 2006).
Sharp details only seen at fovea.
Best acuity visual angle (VA) = 2º.
VA = arctangent(object size/distance).
Visual area with sharp details is small.
In depth
When our eyes interpret the world, there
is only a small part that we can see with
great acuity or details. In the back of our
eyes, there is a small area in the center of
the retina, called fovea, that is responsible for
decoding those details.
The neurons that live in the fovea can
achieve the highest degree of detail with a
size of 2° of visual angle. Visual angle
measures the size of objects in the retina.
Example: for a visual angle of 2° and
looking at a screen away 50 cm, we have an
area of high acuity in our fovea of 1,7 cm. 
1,7 = tangent(2)*50.
This is the same area as
this square on the right.
Do not expect users to look
at a graphical user interface
and understand all the details,
unless they fixate their gaze on each part.
1,7 cm
Fovea
perception17

Functional fixedness
“Functional fixedness is a cognitive bias that limits a person to  
using an object only in the way it is traditionally used.” 
in Wikipedia
People’s world: fixed structure.
Don’t ask for new features.
Avoid hypothetical situations with users.
Experts overlook important details.
In depth
People understand their world within a
fixed structure. This functional fixedness
lead people to recognize objects only for
their obvious functions, creating a mental
block that prevents them to use tools in a
new way to solve problems.
This has the following implications in
the design of systems: don’t ask users to
tell you about new features, don’t ask them
to think about hypothetical situations, don’t
expect every user to be able to invent new
ways of working with your tools and expect
experts to overlook details.
cognition21
In this experiment people are asked to grab two ropes at the same time. People with functional
fixedness won’t complete the task because they are unable to think of the red plier as a
support tool. In their minds, a plier has a single specific function to only cut wires.
Image from (functional_fixedness_image, 2001).

Attention limitations
“A wealth of information creates a poverty of attention and we
need to allocate it efficiently.” 
by Herbert Simon (Economics Nobel Prize winner, 1978)
Limited attention resources depends on: Salience, Expectancy, Effort & Value.
cognition 22
In depth
Attention is the process on which our brain
allocates our scarce mental resources for
performing a task. The way we move our
attention in the world depends on salience,
expectancy, effort and value of information.
Salience is how “inviting” is something,
that will capture our attention. This relates
to our senses. For example, titles in a book
get our attention first then the prose.
Expectancy is where we will expect to
find things. For example, if we usually read
from top to bottom and left to right, it is
very likely that when reading a book we will
look first to the top-left part.
Effort describes the amount of work
required to attend something. For example,
fatigued drivers may not look back when
changing lanes, because there’s too much
“effort to give.”
Value is how worth is to spend our
attention on something. For example, when
crossing the street, the value of looking to
traffic lights is enough to spend our
attention on it?
If you were walking at night in Times Square, New York, where would be your attention?
Image from Flickr user heymynameispaul.

continues
Decision-making heuristics and biases
The process of decision making is simplified by the usage of
heuristics that in some cases may bias our decisions.
“Good enough” decisions. Rules of thumb.
In depth
When making a decision, humans usually
don’t consider all aspects and weight all pros
and cons of each option. The goal is to make
a “good enough” decision in the shortest
time available with the fewest resources.
As a result we use a set of heuristics,
rules of thumb, to simplify the decision
making process. Sometimes these rules may
bias our decisions to a certain direction.
While these rules help us deciding fast,
sometimes they can lead to poor decisions.
cognition23
Which path to choose? This is a common question when trying to make a decision.
Image from Flickr user nerovivo.

1 - Cue reception and integration
We receive information — cues — from the world through our
senses and hold it in our working memory (memory that holds
temporary information). This is to perceive the problem. What?
Attention to a limited number of cues
Due to our working memory restrictions we can only use a
small set of cues to get an overall picture of the situation.
Yes, you cannot handle much information at once.
Overweighting of unreliable cues
To simplify the integration of all cues there is the temptation to
consider all cues as reliable, even if some are not.
For example, on a trial some witnesses may lie, others may tell the
true, some may have faulty memories, but nevertheless, all testimonies
are usually treated as equally valid and reliable.
Cue salience
Most salient cues get more attention even if they are not the
most important.
For example, information at the top of the display, the loudest alarm,
the largest display will be given more attention.
continues
cognition 24
Selected cueAvailable cue

Cue primacy and anchoring
When receiving cues through a time period, the first cues have
primacy over the remaining. For whatever reason, information
processed early is often most influential and typically we
anchor our hypotheses on this initial evidence.
This reveals the familiar phenomenon that first impressions are lasting.
Inattention to later cues
Cues occurring later or that change over time are often ignored
due to focused attention.
For example in a medical diagnosis, symptoms that are presented first
are more likely to be brought into working memory and stay dominant.
2 - Hypotheses generation and selection
Using the previous cues we generate hypotheses combining
cues in the working memory with knowledge we have in our
long-term memory. This is to understand the problem. Why?
Generation of a limited number of hypotheses
The limitations of our working memory lead us to consider very
few hypotheses at once. Usually 1 to 4 hypotheses are
considered, but under stress this number may be reduced to 1.
This is why novices make more wrong decisions that experts, because
they choose the wrong initial hypothesis.
cognition25
continues
Selected hypotheses
Available hypotheses
Time
Time

Availability heuristic
It is easier to retrieve hypothesis that have been considered
recently or frequently. If something comes to mind relatively
easily, people may consider it common and therefore 
a good hypothesis.
For example, if a physician readily thinks of an acute appendicitis, he
or she may will assume it is relatively common, leading to the
judgment that this is the cause of the current set of symptoms.
Representativeness heuristic
When the pattern of cues are similar to a prototypical situation.
This happens when we have the tendency to over generalize situations.
Overconfidence
Tendency to be overconfident that the hypotheses we are using
are good enough. As a consequence we don’t look for
alternative hypotheses.
We may think we are correct in more situations than in reality.
Cognitive tunneling
To fixate on a single hypothesis and ignore all the remaining
cues. This situation happens often in high stress and  
workload situations.
For example, when escaping from a fire, simple actions like opening a
door can become really difficult, because people have a tunnel vision 
of the subject. This is related to functional fixedness, where people
cannot see the obvious.
continues
cognition 26
Time

Confirmation bias
The tendency to only seek out information which confirms a
predetermined hypothesis, rather than reject it. To only look
up information that confirms existing belief.
For example, when diagnosing a set of malfunctions in some hardware
people may not look for “silly” situations because they are not
“possible,” like checking if the energy plug is connected.
3 - Plan generation and choices
From the previous hypotheses we select some courses of
action and decide which to follow. How to handle it?
Retrieve a small number of actions
Due to our limitations in the working memory, we can only
consider a small number of actions at once.
Availability heuristic for actions
Actions are more easy to retrieve from the long-term memory
depending on factors of recency, frequency and how strong
they are associated with the situation.
For example, in high risk professions like aviation, emergency lists are
used to ensure that all actions are available and considered, even if
they’re not frequent to happen.
cognition27
continues
Time
Available action Selected action

Availability of possible outcomes
When considering the outcomes of the different actions, we
won’t use any statistical information. We rather consider the
availability of instances of an action in memory.
For example, a construction worker may never wear a helmet because he
never witnessed an accident, so he may think that the likelihood of
happening something similar to him is lower than it really is.
Framing bias
The way a situation is framed can influence decisions. Framing a
hypotheses in a positive way is more attractive than in a
negatively way. A phenomenon called sunk cost bias infers that
people incur greater risks when faced with losses. As a
suggestion you should frame decisions in terms of gains to
counteract this tendency.
Value of meat which is 10% fat vs meat which is 90% lean? 
(people were found to pay 8,2 cents per pound more for 90 percent lean
meat)
Do you prefer exam grades stated as 80% correct or 20% wrong? 
(students are more likely to feel they are performing better with 80%
correct)
Cancer treatment with 20% mortality rate vs 80% success rate? 
(people are more likely to choose 80% success rate)
Sunk cost bias - For example, when people are on a project and they’re
losing money, they are framed to continue the project until it returns
some money, instead of abandon it. As the project sunk even more, the
cost is even higher.
end
cognition 28
Real probability of outcome
Estimated probability of outcome
Lorem ipsum dolor sit?
Ipsum dolor sit lorem?
vs

Multitasking and time-sharing
Good performance when doing more than one thing at the same
time, depends on many factors. Those factors are described.
Multitasking depends on:
Resources demand,
Structure of tasks & Similarity of content,
Task management.
In depth
Multitasking is how we manage to do 
more than one task at the same time. 
This depends on resource demand, 
structure of tasks, similarity of content 
and task management.
Resource demand is how much we make
use of a certain mental resource. For
example rehearsing “96 308 45 72” requires a
different demand from rehearsing “0 1 2 9 1
9 6 3 0 8 4 5 7 2.” Some tasks may require
less resources because they are automated,
like signing a letter, entering passwords, etc.
Structure of the tasks is when tasks are
structurally similar that they will use the
same resources. For example, speaking while
rehearsing a phone number. Both tasks
involve dealing with articulated coded
content. See Multiple Resource Theory.
Similarity of content is when information
is very similar between different tasks. For
example counting items while listening
someone speaking about numbers.
Task management is related to how we
allocate resources to each task. Some tasks
may become prominent and we give more
attention to them. We can also switch tasks
very quickly appearing we’re doing them 
in parallel.
Only by considering the previous factors,
we can determine if certain tasks can be
performed at the same time with a certain
degree of success.
cognition29
continues
Image from Flickr user _TomTom_.

continues
cognition 30
Multitasking guidelines
Training can improve allocation to attention
You can train to allocate your attention efficiently and perform
parallel tasks with better performance.
Experts know what to look at. 
Automaticity of tasks require less resource demand.
Image from Flickr user ranil.
Recommendations
According to the Multiple Resource Theory we have different pools
of resources that can be tapped simultaneously. Non-competing
tasks can be carried simultaneously — this means that different
tasks can be processed in parallel if they require different
resources.
You can use this theory to measure if some tasks do consume
the same resources and have an idea of the mental workload.
Action
Processing
Perception
Visual
Tactual
Olfactory
Linguistic
Symbolic
Subconscious
Reasoning
Stages
Auditory
Input

Use multiple senses
By using multiple senses you’re requiring different resources 
that can better work in parallel.
Add sound or touch to vision, for example a GPS navigator gives worded
instructions besides a graphical representation.
Image from Flickr user Neal Gillis.
Minimize similar tasks
Tasks that require similar cognitive resources should be avoided
to be done in parallel because they reduce performance.
Rehearsing while speaking.
Listening to a keynote speaker while reading the projected slides.
Image from Flickr user suchitra prints.
Minimize resource demands
If you can, avoid using much of a cognitive resource and release
it for being used elsewhere.
On a keynote using images instead of words, allows you to speak and
people will listen to you, conveying the correct message.
Reading and listening to music without lyrics.
Giving information instead of asking users to remember.
Automation of certain tasks
If possible automate some tasks and release cognitive 
resources for other tasks.
Spell checking.
cognition31
continues
+
“Turn left, then
turn right.”
Photography - the art or
practice of taking and
processing photographs.
vs

end
cognition 32
Minimize switching tasks
There is always a cost when switching tasks.
Writing a document, chatting on Messenger, writing on Twitter,
emailing, etc.
A constant change of tasks costs time and cognitive resources.
Number of tasks
Decrease number of tasks to be performed in parallel.
Usage of reminders to avoid cognitive tunneling, where one only deals
with one task and forgets the others.
If you can’t juggle while biking, either bike or juggle — unless you’re
an expert with tons of training. Only choose one of them.
Image from Flickr user Elsie esq.

Signal detection theory
Theory that describes how we respond the question: 
“Did you perceive [or detect] that?”
Did you perceive (or detect) that? Sensitivity & Response bias
In depth
The perception of the world is a complex
process. Depends on our senses,
expectancies, previous knowledge,
restrictions in mental resources, etc. How
can we improve the decision making results
when we’re trying to detect something?
To the question “Did you perceive [or
detect] that?” two answers can arise: Yes or
No, and four results can arise: correct yes,
incorrect yes, correct no, incorrect no. These
four results can be summarized in two
characteristics of the process of detection:
sensitivity and response bias.
Sensitivity is how good we are at
discriminating between signal and noise.
Sensitivity is related to the “quality” of 
our senses and strength of signals 
relative to noise.
Response bias is our tendency to
respond more times yes or no. Bias is
related to expectancies and cost / benefits
of the answer.
cognition33
An airport security luggage monitoring system is an example where the signal detection theory
applies. While still being extremely important to detect dangerous objects (signal), they must
be efficient and deal with lots of objects (noise) that complicates the monitoring situation.
Is there a dangerous object in this bag?
signal
noise
continues

continues
cognition 34
Improve response bias
Use rewards systems
Give some rewards if a signal is detected, in this case if
dangerous luggage are detected.
For each dangerous luggage detected, security personnel could receive
money rewards.
Introduce “false signals”
By introducing false signals, we let personnel think the 
likelihood of a dangerous luggage is higher than in reality.
Introduce fake dangerous luggage in the screening queues.
Instructions
This is simply to instruct and train personnel.
Through training sessions, and even with “how to” printed guides.
Cost/benefits of errors
Describing the costs / benefits of missing a dangerous luggage.
This should be performed in training sessions, and could be regularly
revisited to keep the information fresh in workers’ minds.
Recommendations
For example, on an airport baggage screener, the cost of missing
a weapon or bomb, is huge, so we want to the security
personnel to be more biased to answer yes. This is, is better to
have a false alarm, than letting a dangerous luggage to pass by.
The following recommendations could be used to increase the
personnel attention when screening luggage.

Training
Training and instructing personnel continuously.
As criminals find new ways to overcome standard security procedures,
personnel should be continuously be updated on this subject.
Image from Flickr user billaday.
Rest breaks
The same personnel making the detections should always have
frequent breaks.
For example, 10 minutes intervals every hour, with 8 hour shifts.
Image from Flickr user scribex.
Give a visual or audible template of the signal
To provide a representation of a similar dangerous object.
In the screening monitor the system could try to map potential object
contours to objects so that the operator could more easily determine if
that object is really harmful or not.
Image from Flickr user fishbowl_fish.
cognition35
continues
Recommendations
Improve response sensitivity
With the same example of an airport luggage screening, by
improving response sensitivity we want security personnel to be
experts into detecting dangerous luggage while not being
influenced by eventual noise, this is, luggage that looks
dangerous but it is not.

end
cognition 36
Slow down the rate of signal presentation
Decrease the time luggage passes by the monitoring system.
Image from Flickr user slightly-less-random.
Redundant representations of the signal
This means to show the same object more than one time.
More than one person should be looking at the same luggage.
Image from Flickr user Thomas Hawk.
Provide knowledge of results
To inform personnel about the efficacy of their work.
To give weekly updates on number of luggage apprehended, types of
objects detected, failures in procedures, etc.
Image from Flickr user photobunny.
Amplifying the signal more than the noise
Depends on systems used to automatically call personnel
attention to potential dangerous luggage objects.
The screening system could show in a more vivid color objects that are
considered potentially dangerous.
Image from Flickr user psd.

Situation awareness
“Knowing what is going on around you” by Mica Endsley
Levels of situation awareness: Perception & Comprehension & Projection.
In depth
Situation awareness — “The perception of
the elements in the environment within a
volume of time and space, the
comprehension of their meaning and the
projection of their status in the near
future.” Mica Endsley.
We can use situation awareness as a
measure for designing dynamic systems
when failure to attend and respond to
important changes, has a high negative
cost. For example, driving, piloting an
airplane, nuclear plants, etc, where deathly
accidents can happen.
Perception: to perceive the world in a
correct and timely manner. Comprehension:
how to combine, interpret, store and retain
information. Projection: to forecast future
events.
cognition37
When driving you’re constantly perceiving the environment around you, comprehending and
projecting any changes in the near future. All these questions ask about the drivers’ current
situation awareness. Image from Flickr user Kyle May.
Are you sleepy?
Situation awareness when driving
Can you perceive the cars ahead of you?
What’s the car current speed?
Are you driving within the lane borders?
Looking through the mirror: Will the
car behind me try to overtake me?

Working memory limitations
Working memory is used to temporarily store chunks of
information used by our brain to think or act. We can’t work with
much information at once in our memory without additional aids.
Working memory capacity
(chunks of info):
3 [2,5 ~ 4,1] for pure capacity.
7 [5 ~ 9] augmented by long-term memory.
In depth
Humans have big restrictions on the amount
of information they can handle at the same
time.
Our working memory, used to
temporarily store information, is limited in
average to 3 chunks of unrelated information
and 7 chunks of information that is already
in our long term-memory.
For example, it is easier to remember a
phone number as “96 308 45 72”, instead of
“9 6 3 0 8 4 5 7 2”.
Another example: from the letters R P S C
I T V C N M V, we can remember only a few,
while with same letters but recognizable
chunks (stored in long-term memory) we can
remember many more, such as TV channels
RTP SIC TVI CNN MTV TV.
memory41
Which is better to remember? 
9 6 3 0 8 4 5 7 2 
or 
96 308 45 72
Working memory capacity augmented with previous knowledge (TV channels): until 9 chunks.
Pure working memory capacity: until 4 chunks.

Long-term memory retrieval issues
We have big restrictions when trying to retrieve content from our
long-term memory. Memory retrieval is highly influenced by cues
associated with content we want to access.
Memory organized by associations
and categories.
Retrieval cues associated to
content.
memory 42
In depth
We store information in our long-term
memory using associations and categories
linking cues to content.
When having the same cue pointing to
many content chunks, it is more difficult to
retrieve them. The more cues we have 
for a content chunk, the most likely 
it is to remember it.
Naming a file “John” and if we know 3
Johns, then it’s almost impossible to 
identify him. The single available cue, the
name, points to 3 different chunks, 
the people. With an image preview, we’re
adding one more cue that will help us to
retrieve that content.
1 2
On step 1, there are 3 associations to John so it is difficult to retrieve the correct info. On step 2, with the
thumbnail there is a distinctive association in memory and it is easier to retrieve the correct John.
Which John is this? Of course, John, that I play basketball with.
Jony
The user finds a file named John and tries to remember all friends named John.
Jony

Remember good memories, forget bad ones
We tend to remember only the good aspects of an experience as
time passes by.
a Fades away faster than b: Emotions vs cognitions, 
Details vs higher-level constructs, 
Negative events vs positive events.
In depth
Our life is made of experiences that build
memories. Recalling those memories is not
as accurate as we may think.
Knowledge in our long-term memory
tends to fade away, meaning that it is less
accessible to be recalled.
We tend to remember better good
memories and forget bad experiences.
This is due to the fact that our brain
fades away faster: emotions, details and
negative events. This means that we may
remember that we did something, but not
remember the details and most important,
the bad emotions associated with.
memory43
Good memory
For example: you may remember better the last time you ride a roller coaster than you
would remind seeing a snake (of course, if you don’t like snakes).
Bad memory
snake
roller coaster

Important of experiences: end & start
Due to the primacy and recency effects we tend to remember
better the ending and start of an experience.
Memory’s psychological effect: Primacy & Recency.
memory 44
In depth
The recency effect tell us that humans are
better at retrieving knowledge from their
long-term memory when it is recent, or fresh
in memory.
For whatever reason, information
processed early is often most influential and
we tend to access it easier. This is called the
primacy effect.
We should design considering human’s
memory, building great start experiences
and even better endings.
As a tip for making presentations,
convey your message on the few first and
last slides.
On a presentation, which slides do you think that are
more likely to be remembered by your audience?

To forget and how to improve memory
In theory our memory has an infinite capacity, but as obvious we
forget. Forgetting is more related to difficulties to retrieve
content rather than content being erased from our memory.
Memory retrieval is difficult due to:
Weak content,
Weak associations,
Interference with associations.
In depth
Content in our long-term memory is
organized with associations. The way these
associations are organized can determine
the successful retrieval of the content.
Content becomes “weaker” due to low
frequency and low recency of usage.
When content has weak or fewer
associations with other content, with time if
we don’t use them they become “weaker.”
A lot of different content is linked with
the same or similar associations. When
searching, these similarities can cause
interference and we may only retrieve the
unwanted content. For example, when
trying to retrieve the PIN for our phone we
may retrieve the ATM’s PIN instead. The
concept — PIN — has many similar
associations.
memory45
Nowadays we use so many passwords, making it very difficult to retrieve them from memory.
ATM
PIN EmailIM
Computer
Home Banking Phone
What’s the password
for my home banking?

continues
memory 46
Memory guidelines
Regular use of information
Encourage regular use of information to increase frequency
and recency.
If you want to remind yourself about something everyday or
occasionally nothing best than using a wall poster to keep that
information fresh and recent in your mind.
Image from Flickr user neon.mamacita.
Active verbalization or repetition of information
Encourage active verbalization or repetition of information that
needs to be recalled.
Taking notes in class or requiring read-back of heard instructions
increases the likelihood that information will be remembered.
Image from Flickr user romanlily.
Use memory aids
When a task is to be performed infrequently or when
performance is critical, some printed or computer-based aids
should be provided.
List of procedures for checking potential failures of a printer.
Recommendations
The following recommendations guide you to overcome the
memory retrieval limitations that humans have.

Design information to be remembered
Information to be more easily remembered, must be
meaningful, concrete rather than abstract, organized in
distinctive concepts, no jargon and easy to be guessed by
other cues.
Using full words instead of abbreviations, using wording familiar by
the people that will use it, etc.
Standardize
Use the same terms, images, etc, in different contexts.
On the automotive industry, the shift gears pattern is standardized
being extremely easy to use shift gears even with different cars (by
those who actually know how to drive).
Image from Flickr user mccown.
Support the development of correct mental models
Design to support the development of correct mental models,
by telling people what is happening.
On an instructional manual explain the reason for a particular action
and what that action is.
Giving visibility of system status, this is, to always give information
to the user about what a system is doing currently, or what is the
current state.
memory47
end
customer@company.com 
vs 
c.dep@company.com
Prevent unwanted
access to your phone,
by locking and
unlocking your phone
using a PIN. 
vs 
Lock and unlock your
phone by using a PIN.

Design information to remember
By understanding how our long-term memory works, we can
design information to last longer. As time goes by, we will have
greater chances to remember that information.
Verbalization or reproduction of information.
Information able to be guessed.
Meaningful.
Concrete.
Distinctive concepts.
Well-organized.
In depth
Content in our long-term memory is
organized with associations. The way these
associations are organized can determine
the successful retrieval of this content.
When verbalizing or reproducing content
we’re increasing the likelihood that the
information will be remembered.
Besides human senses (e.g., vision) we
also perceive the world with information
from our own expectancies and previous
knowledge. With this processing of
information we may guess other 
related content.
Information should be meaningful and
concrete for the audience it is intended.
Avoid using abstract words, technical
jargon or unknown words as it will be more
difficult to create associations in memory.
Important concepts should be distinctive
enough from other content to avoid
interference with associations when
retrieving the same content.
Organize information into chunks so that
you reduce the amount of associations
connecting to the same content. For
example, when using categories to divide
chunks of content, you make it easier to
memorize, because each chunk will have a
different association.
ipsum
lorem ame
dolor
sit
memory 48

Application responsiveness times
Upon which time should we respond to users's actions? How
long can users wait for an operation to be completed before we
provide any means of feedback?
Human stimulus response time = 100 milliseconds
0.1 seconds = immediate response,
1 second = limit for feeling of control,
10 seconds = unresponsiveness detected.
In depth
Humans take on average 100 [50 ~ 200]
milliseconds to perceive a stimulus. Less
than this, there is the risk that the user
won’t perceive the effect of the action.
On the technology side, if we for
example have screens refreshing at a rate
of 50 HZ, it means that the image on the
screen changes every 20 milliseconds
(1/50), meaning that a fastest response
won’t be noticed by users.
Examples: According to Apple Human
Interface Guidelines, the spinning wait
cursor , is shown within 2 seconds after
an application becomes unresponsive.
interaction design51
0,1 1 10
Time Seconds
instantaneously
some delay unresponsive
The user feels the Application like:

Reading rates
The reading rate depends on the eye movements, the cognitive
effort required by the text and the amount of text read for each
eye movement we make.
These rates are approximations and you need to take that into account.
Use it as a baseline for your design.
Eye movements (saccades).
Amount of words read at each saccade.
Familiarity of content.
Cognitive processing.
interaction design 52
In depth
When reading, we make several eye
movements (saccades) for each block of
content we read. These saccades can take
230 [70 ~ 700] milliseconds.
For each saccade we must calculate the
amount of words or letters we can read. This
can be 4 to 5 letters or more depending on
our reading speed.
The type of content will influence the
time we take to understand it (more familiar
content is faster to read).
We can also read for memorization,
learning, comprehension and skimming. All
these types of reading require a different
cognitive processing.
Type of reading Words per minute
Memorization < 100
Learning 100-200
Comprehension 200-400
Skimming 400-700
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
Saccades - eye movements

Human brain processing times
The Model Human Processor theory brings together a set of info
gathered by hundreds of psychological studies about the human
brain, setting processing times to be used in interaction design.
The brain is composed of: Perceptual & Cognitive & Motor subsystems.
In depth
Each subsystem has a processor, and it is
connected to memory. We have a long-term
memory and working memory. The long-
term memory keeps knowledge in our head
for a long time and content retrieval is
influenced by cues associated. Short-term
memory is where temporarily content is
hold to be processed by our brain — it gets
information either from the perceptual
system or the long-term memory.
Perceptual - receives external stimuli 
and transforms it into a representation the
brain can understand, this is, transforms
light energy, touch, smell, etc, into 
electric neural impulses.
Cognitive - Gives meaning to the
perceptual inputs.
Motor - Tells any part of the body to
perform an action.
continues
Model human processor diagram from (the_psychology_of_human-computer_interaction, 1983)

continues
Model human processor diagram from (the_psychology_of_human-computer_interaction, 1983)
δ - decay time; μ - capacity; τ - processing time; κ - type of information; 
WM - working memory; VIA - visual image store; AIS - auditory visual store;

end
Eyes Movement
230 [70 ~ 700]
To use these values you must specify which parts of the brain
will be in place for a specific task and then use the times
mentioned in the respective table.
Example: What delay time should we setup a TV remote
control to execute a task so that the user feels that the
remote is responding to his actions?
Answer: This problem requires the user to perceive a
stimulus. Understanding the stimulus is not important so we
only consider the perceptual processor. Looking at the
processing times of the perceptual processor, we can obtain
that 100 milliseconds is the time for the average person to
perceive that he pressed the remote and something occurred.
All measurements are as: average [slow ~ fast].
(in milliseconds) Perceptual Cognitive Motor
Processing Time 100 [50 ~ 200] 70 [25 ~ 170] 70 [30 ~100]
Minimum 50 25 30
Average 100 70 70
Maximum 200 170 100
Table with different processing times from the three brain subsystems.
Working memory Visual Image Auditory Image
Capacity 3 [2.5 ~ 4.1] chunks 17 [7 ~ 17] letters * 5 [4.4 ~ 6.2] letters*
Decay time 7 [5 ~ 226] sec 200 [70 ~ 1000] ms 1500 [900 ~ 3500] ms
Type of info Visual or acoustic Physical Physical
Table with capabilities of memory. Long term memory has infinity decay time and capacity.
* These numbers are difficult to fix, so they are approximations. Decay time is the half-life, which is the
time after which the probability of retrieval is less than 50%.
Capacity augmented  
with long-term memory
Decay time for 
1 chunk
Decay time for  
3 chunks
Working
memory
7 [5 ~ 9] chunks 73 [73 ~ 226]
seconds
7 [5 ~ 34] seconds
Table with memory abilities in special situations.

Fitts’s law in interaction design
The difficulty of selecting and pointing to a target is dependable
on the target's size and distance. By using the Fitts's law you can
speed up or slow down the user interaction.
Screen edges: infinite target size.
Four screen corners: fastest.
More targets: slower selection.
Every pixel counts.
In depth
Screen edges have infinite size because you
can throw the mouse on it without
surpassing it.
Corners are fast because they don’t have
neighbors to compete with. Small targets,
like an OK button — — slow down users
and ask for precision.
If you want users to slowly and precisely
access something, like a close button —
— you must reduce the target size.
In most cases always make targets big
enough to click.
When moving the mouse, it is difficult
for humans to do it straight (our hand is
supported by the elbow). For example,
multi-level roll overs can be really difficult to
use because many accidental cursor
movements will happen. This behavior adds
an extra target, the open menu or the 
sub menu.
Non active pixels on screen edges
minimize the infinite size effect. One pixel
more or one less increase or decrease target
size and the mouse movement precision.
vs
Small “Stop Copying” button requires more precision.
Screen corners - fast access.Rollover menus increase number of targets for selection.
T - time to target.
a, b - constants.
D - distance to target.
W - size of the target.
Fitts’s law

Hick-Hyman law in interaction design
Decision time increases with number of choices and few complex
choices leads to more rapid performance.
Complexity requires more time to decide.
Less complexity vs more simplicity.
In depth
The Hick-Hyman law states that humans
increase their decision time with the number
of choices. Because humans process info at
a constant rate, if that info increases, the
processing time will increase accordingly.
Nevertheless, some few complex choices
leads to more rapid performance than more
simple choices.For example, a Morse code
operator has only 2 signals to use but is
slower than a typist with 26 choices. This
happens because the typist presses less
keys to convey the same message as the
Morse code operator.
S O S · · · — — — · · ·
Qwerty keyboard Morse code
Writing “SOS”
Which printer controls is faster to use?
Complexity requires more time to decide
Less complexity vs more simplicity
1
2
On case 1, the more buttons you add to a printer, this complexity will result into a slower decision
making. On case 2, even if Morse code is simpler we use less keystrokes with the qwerty keyboard.
vs
choices

F-shaped pattern for reading web content
Has been found in eye tracking visualizations that users when
reading (scanning) a webpage, they follow an F-shaped pattern.
Web content won’t be read
throughly.
First top info is the most important.
Start sentences with significant words.
In depth
Don’t assume users will read everything you
write. They rather scan content to see if the
webpage has what they’re looking for.
Don’t waste the top part of your website
with irrelevant content. It’s likely that users
will decide to stay on the webpage based on
what they first read.
Because the bottom part of the webpage
is scanned in a vertical thin shape, consider
having words that carry useful content at
the beginning of each block.
An eye-tracking usability study revealed the F-shaped pattern for reading content on the Internet.
Image from (f-shaped_pattern_for_reading_web_content, 2006).

Feedback, feedforward and affordances
Feedback tells the user what’s happening. Feedforward tells the
consequence of an action before doing it. Affordance is a natural
way of telling the users how something works.
The user must be in control.
Self-explanatory and no training.
Intuitive and easy to use.
In depth
When telling the user what he’s doing or
what’s the system status, we’re giving him
control. When in control people decide
better and feel happier.
By using feedforward and affordances
we can implicitly say to the user how to use
an application. This requires no explanation
or training.
Affordances tell the user how to interact
with something while feedforward explains
what are the outcomes of that interaction.
This results in something considered
intuitive and easy to use.
Affordance: the icon and the color
animation unconsciously instructs
users how to unlock the phone.
Feedback: tells users what’s the device status.
Feedforward: the label tells users what’s the
outcome of the action.
Main image is the main screen of a locked iPhone.
FFa

Bevel-like effect in backgrounds
For making a visual separation of content, the bevel effect
provides a very effective and pleasant solution.
Visually separated content using: two 1-pixel lines & one 1-pixel line.
In depth
A bevel is observed in real life objects
as in tables corners and they provide a
visual meaning that there is a change in the
object dimensions. These sequential
differences in light are interpreted as visual
depth clues. Darker parts are interpreted as
inside and lighter parts as outside.
The bevel-like effect can be created
with simple 1-pixel lines that provide a
natural affordance for making sections
visually independent from each other.
One 1-pixel line: having two sections
with contrasting colors, just draw in
between a 1-pixel line with a slight contrast
of each section color and you get a pleasant
visual distinction.
Two 1-pixel lines: we have two sections
transitioning color from darker to lighter or
vice-versa. Both 1-pixel lines will be in-
between the two sections and each just has
to be stronger than the section there're
closer two. If the top section is darker, the
near 1-pixel line must be darker. Then the
following 1-pixel line must be lighter than
the bottom lighter section.
interface design63
Bevel-effect with one 1-pixel line
Bevel-effect with two 1-pixel lines

Small multiples in data visualization
Small multiples are a type of visualization where small images are
used to allow a quick comparison of data.
Comparison of data.
Quick to extract differences.
Highlight big picture over detailed analysis.
interface design 64
In depth
Small multiples are a set of small images
with related content, that allows us to see at
a glance differences among data.
Small multiples lets people to quickly
compare related data, because content is
within the eye span and visually depicted,
making it fast to look and extract
differences.
The structure and visual organization of
small multiples allows us to get a big picture
over the content, instead of immersing in
the details.
At a glance you can see the weather forecast, by only looking at the small weather icons.

Color is powerful in search
One of the best ways to discriminate an object among others is
by using color. If used sparingly and correctly can be really
powerful to increase visual search speed.
Color has less features to decode. Use it sparingly.
In depth
On contrary to text and images, color
doesn't require our brain much effort to
decode it. It has less visual elements to
decode such as lines, shapes, shadows, etc.
This simplicity makes color a powerful
attribute for making visual search fast.
Color may look different depending on
the environment, lighting, shadows, glare,
etc.
By using too many colors we decrease
the speed of our visual search.
Finally, be careful with color blindness,
and don’t rely completely on color hues
only — use contrast as well.
interface design65
Can you find the red file?

Fast visual search
When performing a visual search for an object if that object has a
single discriminating feature (color, size, shape, texture, etc.) the
search will be really fast as the object automatically “pops up.”
Serial vs parallel visual search.
Visual “pop up” effect.
User expectancies determine search
starting point.
interface design 66
In depth
When searching for an object with a feature
that stands out from the rest, we’re
performing a parallel search. 
This psychological effect is called “pop up.”
Otherwise, we’re performing a serial search
looking one by one.
An object “pops up” faster, if we’re
looking at the right spot.
Users's expectancies for a search
starting point are driven by their previous
experience or training.
You can use color, size, shape, texture,
grouping, location, display density, etc, for
making an object “pop up.”
Serial search Parallel
We must search item by item. The element “pops up”.
Find the blue square:

Depth perception
Our eyes use some depth cues to interpret tridimensionality in
the world and we can use them to design more natural graphical
user interfaces.
3D world seen as 2D images.
Depth cues.
Illusions.
In depth
Our eyes represent the world in the retina
with a two-dimensional image for each eye.
It is at the back of the eye that the
tridimensional world is seen as 2D images.
Our visual system uses a set of visual
cues existent in the world to convey depth.
We can use these cues to mimic the real
world and provide natural affordances for
some user interface elements.
Since we rely on cues for interpreting a
tridimensional world, our eyes can be easily
misguided. The other senses like touch,
helps us deceive these illusions.
interface design67
continues
M. C. Escher, Relativity, 1953

Depth perception
Occlusion or interposition
An occluded object looks to be farther away than the 
front object.
The blue building looks farther because it is occluded by the
vegetation and the red buildings.
Size
Smaller objects look to be farther away than similar but 
bigger objects.
The smaller statues look farther away because they’re smaller than
the one near the people.
Aerial perspective or haze
As light is scattered by the atmosphere, distant objects are
subject to more scatter and appear fainter, bluer and
less distinct.
In the image the farther away zones are more blurry than the closer
objects.
Linear perspective
Parallel lines will appear to converge into a vanishing point.
This gives the impression of infinitive sizes.
The road converges in the horizon.
continues
interface design 68

Depth perception
Texture gradient
Similar objects in a surface that will change size continuously
will appear to form a surface in depth.
The yellow ground is made of rectangles that get continuously 
smaller as they approach the orange wall, giving the impression 
of depth in the room.
Shading
Natural light comes from the top, so objects with some depth
will have more light on the top than the bottom and vice-versa.
The left buttons look outside while the right buttons look inside the
blue background.
Motion parallax
When in movement, closer objects will look to move quicker
than farther objects.
The flower is closer because for the same movement it
changed position more than the cow.
interface design69
continues

Depth perception
Stereopsis
Each eye sees a different image from the world. This binocular
disparity in the retina, gives us some depth cues. When
combining these images, our visual system uses the differences
among them for inferring depth information.
The example on the right shows the different images we see in each eye.
Illusions
Any application that only relies on visual control is not
completely feasible due to these limitations.
The triangle on the right is an impossible physical representation, but
our eyes interpret it as being and looking real.
end
interface design 70
Left eye & right eye
All images except the Shading are from (sensation_and_perception_web_activities, 2006).

Gestalt principles
A set of visual rules that act as a reference for our visual system
when interpreting images.
Individual elements.
Visual principles.
Provides better visual experiences.
In depth
The visual world is composed of individual
elements (lines, textures, etc.) that by
themselves are meaningfulness. A German
school of psychology (Gestaltism) concluded
that our visual system interpret these
elements as whole, emerging a greater
meaning in what we see.
They identified a set of visual principles
that our visual system use as a reference to
interpret the world. These principles help us
understand how humans visually perceive
things and we can use them to communicate
more effectively.
interface design71
continues

Gestalt Principles
Figure / ground
An image that is on top of a background with enough contrast,
creates a relationship of belonging. The figure belongs to this
well defined ground.
An animal warning sign reflects a belonging relationship between the
animal (figure) and the sign itself (ground).
Equilibrium (symmetry or order)
When we look at something our eyes draw an invisible line on
which we look for a visual balance or equilibrium. Our eyes
like balance in everything they process.
The Preferences window layouts widgets with a center alignment,
giving a much cleaner and nicer look to the window.
Closure
Our eyes have a natural tendency to close gaps in objects. This
is part of the efficient process it takes to guess how objects
look like without requiring much processing effort from our
brain. I m s re th t y w ll b ble to und rst a d th s s ntenc
even though more than 25% of the letters were omitted.
In this example despite there isn’t any triangle or circle on the figures
we cannot avoid to actually fill the gaps and perceive a triangle and a
complete circle.
Isomorphic correspondence
Some objects have associated meanings in our minds, and we
will respond naturally to these objects as we imagine them.
When looking at the image of the ice cream we may be temped to go
out and buy one.
continues
interface design 72

Gestalt Principles
Proximity
Objects nearby are considered to be part of a group.
In this application toolbar, related buttons are grouped together
giving a visual sense that they form a group and therefore are related
in the functionality they provide.
Continuation
Similar to the principle of closure, our eyes tend to fill 
gaps in what looks unfinished objects. In this case, 
objects that look like they continue in space our eyes 
will try to follow that missing gap and give a sensation 
of continuation in space.
The arrows on the application toolbar intuitively point out that
there’s something else in front of it. Once we click it we get the
remaining menu.
Similarity
Items that have similar visual characteristics will look to be
part of the same group.
The example on the right shows a group of songs rated with 5 stars.
Despite these songs are apart from each other and not organized
sequentially they look like belonging to a group.
interface design73
end

Combination of color brightness levels
By mixing the brightness levels of a single color instead of using
different color hues we can obtain imagery that is more appealing
and easy to read.
Visually appealing. Less dimensions to interpret.
interface design 74
In depth
Combining the same color on an object
by only mixing the brightness levels, 
can create more easy to look and more
appealing imagery.
This happens because we’re mixing less
colors, therefore less mental load effort and
the lighter versus darker color combination
also gives a good contrast. Since we’re using
the same color hue the workload for our
visual system is also reduced.
Example: light blue vs dark blue
By using the same color with opposite brightness levels, at a glance everything
seems uncluttered and content is easy to read with enough contrast.
light 
vs 
dark

Display design principles
Displays should be designed according to humans’ perception
and cognition. By understanding humans’ limitations we can
design a more usable and pleasant display.
1 - Perceptual principles.
2 - Mental model principles.
3 - Attention principles.
4 - Memory principles.
In depth
A display is any human-made artifact that
carries information to be consumed by
another human. It can be a printout, a
computer screen, factories gauges, phone
visors, etc.
The human machine is complex and
works under several limitations. These can
relate to how we perceive the world, how
we think about it and how we store
information in memory.
Considering these aspects, 13 principles
are explained to help designers designing
better displays.
interface design75
continues
1
2
...
13
display
design
principles

1 - Perceptual principles
Principles related to the way we perceive the world.
Legibility
Contrast, font size, illumination, visual angles, noise.
Avoid absolute judgment limits
Don’t ask users to judge the level of a represented variable
using a single sensory variable, like color, size or loudness,
which contains more than five to seven possible levels. This
is an invitation to errors of judgment.
Top-down processing
Expectancies, desires and experience influences how people
will interact with a system. Confirm people expectations.
On a Mac computer, across the system there is a shortcut used for
redo (shift + Command + Z). Microsoft Office for Mac, uses a different
shortcut not confirming Mac users' expectations.
As a rule of thumb always try to be consistent with the platform your
app is running (e.g., on a Mac respect Mac’s UI conventions).
Redundancy gain
When the viewing or listening conditions are degraded, a
message is more likely to be interpreted correctly when the
message is expressed in more than one way.
Using icons with labels are always a good design prerogative.
continues
interface design 76
Standard Mac OS Redo shortcut.
Mac Office Redo shortcut.
⌘ Z⇧ + +
⌘ Y+
Can you select the Aqua blue?
font size and color
also 
influences contrast

Altitude vs Attitude
Discriminability. 
Similarity causes confusion: use discriminable elements.
Similar appearing signals are likely to be confused at the time
they are perceived. If the signals must be retained in the
working memory before action is taken, they can also be
confusing.
In aviation Altitude and Attitude are very different things, however
they are very easy to misuse.
2 - Mental model principles
People form mental models about how something works and
these expectations must be matched.
Principle of pictorial realism
A display should look like the variable it represents.
Imagine that a volume control would reduce the sound by moving the
slider from right to left. It would be unintuitive.
Principle of moving parts
The movement of any element within a display should match
the users’ mental model of how that information actually
moves in the physical world.
A speed meter dial goes from the left to the right as you accelerate
meaning that as you increase the speed, the dial must also increase.
Image from Flickr user michaelroper.
interface design77
continues

3 - Attention principles
Humans have restricted attention resources and displays
should minimize the workload of attention.
Minimizing information access cost
Information should be easily accessed because there is
always a cost in time and effort to move our attention
between different displays locations.
The image on the right shows System Preferences on a computer and
everything is located in this place minimizing the cost of accessing
this related information.
Proximity compatibility principle
Related information used in the same task should be visually
close to each other. This follows the Gestalt principle of
proximity, that people relate information when it is close to
each other.
Principle of multiple resources
Dividing information across different resources can minimize
the processing of that information.
Presenting visual and auditory information concurrently, helps
workers to easily understand the outcome of scanning a working
card through the monitoring device.
interface design 78
continues
8:30 ENTRY
GOOD WORK
EMANUEL FERNANDES
+
Job entry monitoring

4 - Memory principles
Since our memory is very limited in terms of storage we
must minimize the heavy usage of working memory.
Replace memory with visual information: knowledge
in the world
Having a very limited working memory and being difficult to
retrieve information from our long-term memory, we should
provide information in the display instead of making users
to remember. Recognize instead of recalling.
The usage of check lists lets users rely on a written predefined set
of tasks, instead of having to remember them.
Principle of predictive aiding
Humans are no very good at predicting the future. This is
related to restrictions in the amount of information we can
deal at the same time in the working memory. When
necessary, some prediction should be displayed.
A GPS navigator predicts the path for the driver, removing one extra
cognitive task.
Principle of consistency
Since we store information in memory by means of
associations, once we have some habits it is very difficult to
change them. So displays should always be consistent with
the knowledge users already have about a certain context.
The close, minimize and maximize buttons in different applications
are consistent.
interface design79
end
check lists

Dynamic displays: analog vs digital
Dynamic displays depicts a variable that continuously changes
quantity. Analog displays are better for detecting changes and
making comparisons while digital are better for accurate readings.
Analog: Easy to estimate at a glance, 
Easy to compare, 
Rate of changes and direction.
Digital: 
Accuracy & range.
interface design 80
In depth
Analog displays are better to quickly
estimate values as the visual depiction
allows a faster cognitive processing
compared to numbers in digital. Also this
makes it easier to compare values in analog
representation.
Analog displays show the part within the
whole, resulting in a better perception of the
rates of change and direction of the variable
being measured.
On the other hand, digital are more
accurate and allow a wider range of values
to be displayed.
One is not better than the other, we
should make a choice according to the
design situation and after analyzing the
advantages and disadvantages of both.
Rate of changes and direction
Easy to estimate at a glance
Which is faster, at a glance, to
check if lunch hour is nearby?
analog
Accuracy and range
Easy to compare:
Which clocks have similar time ranges? Which is faster to detect these similarities? analog
12:21

Configural displays
“(...) multiple displays of single variables can be arrayed (...), so
that certain properties (...) will emerge from the combination of
values on the individual variables.” In Human Factors Engineering.
New info arise from visual single variables. Visual arrangements of info.
In depth
Sometimes the visual depiction of several
variables, can inadvertently result into
another variable of interest.
For example, a square has the dimensions
of height and width which we can visually
observe. From this arrangement, the area of
the square (height times width) gives
another visual dimension that we can use
to show another type of information.
The way we arrange elements in space
can be used to enforce and show certain
information through visual relations.
interface design81
By combining the individual values of each monthly invoice, a background line is used to show the
evolution of monthly payments across several months. This is an example of a configural display.
Payment evolution across several months
Invoices view
As minhas facturas:
! 65,00
...
150
125
100
75
50
25
0 2008
Setembro Outubro Novembro Dezembro
! 75,00 ! 74,32 ! 110,00
!
! 55,00! 50,00
AgostoJulho
Dezembro 2008
Tipo Serviço Preço
Serviço 1 32,00
Serviço 2 43,00
Serviço 3 35,00
Pagamento: Ainda por pagar.
! 110,00
Detalhes
Enviar referências do Multibanco por SMS
Referência:
Multibanco Débito na Conta Payshop
Código:
Valor:
312 121 212
21212
110,00
Imprimir PDF
SMS
configural

Web: users scan instead of reading
On the web users usually scan webpages until they find what
they’re looking for. Don’t assume users will read your entire
webpage in the order you expect.
Reading from the computer is tiring.
The web is about clicking.
Time is key.
People have specific goals.
In depth
Nowadays the computer screen technology
isn’t as good as paper, so most users don’t
like to read long paragraphs on the web.
Users are in control on the web, so if
they’re not satisfied they'll just go elsewhere.
People’s life is fast and if they don’t 
find what they want they will move on,  
without hesitating.
When visiting a website users usually
have a specific goal to satisfy, and the first
thing they do is a quick scan to see if the
webpage is worth visiting, only afterwards
they decide if they will stay and read the
information available.
Finally, ask yourself as a web user, 
would you fully read your own paragraphs?
text85

Easy and effective instructions
To understand instructions we must rely on our working memory
to hold that information in our mind. Taking this limitation into
account we can design more effective instructions.
Short & simple steps.
Consistency between order of text and actions.
Positive sentences.
In depth
Our working memory can hold in average 3 or
7 chunks of information. To perform an action
while still holding the instruction in memory,
it must be simple and short.
Instructions should be in the same 
order of the actions so that users 
are not confused.
Under degraded sensory conditions,
negative words like No, Don’t, Do not, can be
ignored and the opposite of the action can be
performed. This extra chunk of information
needs to be hold in memory and we may
forget it when acquiring the rest of the
instruction. As a guideline, instructions should
always be written in a positive manner.
Long-term memory is for knowledge stored forever. The working memory is for short
information to be processed in the moment.
Long-term memory and working memory is respectively for knowledge stored forever
and short information to be processed in the moment.
vs
v
s
1 - Select the object. 
2 - Drag it to the Trash.
Select the desired object and afterwards
drag it to the Trash to delete it.
Do A. Then do X and Y. Before doing X and Y, do A.
If light is red, the engine must be shutdown. Don’t start the engine if light is red.
text 86
1
2
3

Name buttons with intended behavior
You should always name a button with its related action, to
make clear to users the output of that action.
Clear. Avoid errors.
In depth
Always label buttons using a verb that
tells the action achieved with that button,
making it clearer for the user what action
will be performed.
This will prevent the user to mistakenly
perform an action. For example, when
displaying an alert to the user, he or she
may not read the entire description and will
perform an action based on what looks like
to be the best outcome. Using a clear verb,
the user does not need to read the entire
message to know to a certain degree what
will be the result of that action.
With some exceptions always label
buttons with action verbs like, Save, Print,
Send Email, Erase, Delete, Search, instead of
a simple OK.
text87
If you didn’t read the message which button would you press? Cancel or OK; Cancel or Erase?
Both dialogs are equal and they both ask the user to confirm to erase the hard drive. By using the
correct label — “Erase” — users know better the possible outcome of an action without the need to read
and comprehend the text above. This behavior can prevent undesired actions to be performed.

Usage of ALL CAPS and SMALL CAPS
The glyphs of a typeface in all caps or small caps are better used
when you want to get attention with words or small sentences
and when you have limited space available.
ALL CAPS glyphs:
- are taller than lowercase,
- have less variation in strokes than lowercase.
SMALL CAPS can be used to emphasize.
In depth
All caps glyphs are taller than their
lowercase counterparts. This means that the
same letters within the same size will look
bigger in all caps than lowercase. Therefore
it is suitable for single words to catch
attention, like WARNING or DANGER. They are
also suitable when you’re limited in space.
Glyphs in all caps have less variation in
stroke, making it more difficult to
differentiate between each glyph. Therefore
it is unsuitable for long sentences.
If you want to emphasize something in a
sentence without making it stand too much,
you can use small caps. These glyphs have
the same x-height as the lowercase.
abcdefihjklmn ABCDEFIJKLMNsize
abcdefihjklmn ABCDEFIJKLMNstroke variation
LOREM IPSUM DOLOR SIT
AMET, CONSECTETUR DO,
SED DO EIUSMOD TEMPOR.
Filling every pixel available. Getting attention. More difficult to read!
ALL CAPS examples:
text 88
aaA

Color movement
Colors can be characterized by a movement sensation they
induce in our eyes. Warm colors like red appear to move
outward. Cool colors like blue appear to move inward.
Eye lens focusing.
Inward: backward movement (blue).
Outward: forward movement (red).
Just right: no movement (green).
In depth
We have a lens in our eye that refracts and
focus light rays to obtain a sharp clear 
image in the retina.
However, different light wavelengths are
focused in a different manner.
Wavelengths in the blue spectrum are
focused in front of the retina and vice-versa
for red. As a consequence blues appear to
move backward and reds forward, while
green focus perfectly inducing no movement.
color91
Inward: colors appear to move backward (blue).
Outward: colors appear to move forward (red).
Just right: colors appear to be stopped (green).
RetinaLight wavelengths Lens
Human eye
Eye lens focusing:

Color blindness
“Color blindness, a color vision deficiency, is the inability to
perceive differences between some of the colors that others can
distinguish.” In Wikipedia
Lost of one photopigment. Distinguish colors with brightness.
color 92
In depth
Some people lack one of the photopigments
used in eye’s retina to transmit color. 
When this happens, people can only
perceive differences in some colors by the
brightness levels.
There are two main types of color
blindness: Red-green & Blue-Yellow.
Color blinded people instead of the
regular hue will see a tone of gray, but the
brightness level will be similar which means
that you can use that property to make
objects more distinguishable.
Since about 8% of men and 0.4% of
women are color defective, in your design
avoid using saturated colors with the same
brightness levels.
Mainly two types: Red-green & Blue-Yellow.
Color Color Color
Color Color Color
color blinded people may see
Color blindness example.

Saturated colors and visual fatigue
Excessive usage of simultaneous saturated colors may cause
visual fatigue.
Simultaneous saturated colors. Eye lens refocusing.
In depth
focus light rays to obtain a sharp clear
image in the retina. However, different 
light wavelengths are focused differently by
the lens.
As the lens keeps adjusting with
different wavelengths, the muscles may get
tired, causing visual fatigue and inducing an
overwhelming sensation. The worst cases
are the visible electromagnetic spectrum
opposites, blue and red.
color93
The worst case for simultaneous saturated colors is blue vs red.
Human eye
Eye lens refocusing:
continues

end
color 94
Avoid simultaneous saturated colors
Use gradients
A very subtle gradient can change dramatically the negative
effects of highly saturated colors, while still maintaining a bright
and intense color.
Desaturate your colors
When you want to use several different colors you can choose to
desaturate some of the colors while maintaining one saturated.
It all depends on the effect you want to produce. The best advice
is to try over and over and see what works better, but always be
aware of the dangers of mixing highly saturated colors.
Image from Flickr user shianghan27.
Recommendations
I am very saturated! I have a gradient instead!

Aging and sensitivity to blue
As people get older they suffer the loss of sensitivity to colors in
the blue part of the visible electromagnetic spectrum.
Wavelengths absorption.
Sensitivity decrease.
Lens yellowing.
In depth
The eye’s lens absorbs more wavelengths in
the blue part of the visible electromagnetic
spectrum than any other color.
Additionally as we get older, our lens
yellows, decreasing our sensitivity to colors
in the blue spectrum.
Because of this aging effect, older
people need brighter, saturated colors.
color95
older people may see
Because older people loose some color sensitivity they need brighter, saturated colors.

Constraints of pure blue color
It is difficult to obtain a sharp image in retina with pure blue
color. Therefore, we should avoid using pure blue with small
objects, text and edges.
Few blue photopigments. Eye lens focusing.
color 96
In depth
image in the retina. However different light
wavelengths are focused differently by the
lens.
Short wavelengths (blue) never focus in
the retina, therefore blue objects make it
difficult to get a sharp image. When using
pure blue, some small objects may look
blurry.
Additionally, we only have 2% of blue
photopigments available in the periphery of
our fovea in the eye’s retina.
Retina
Fovea
Cones
2% “blue” on periphery of fovea.
32% “green” on middle of fovea.
64% “red” on middle of fovea.
Few blue 
photopigments:
Human eye
Eye lens focusing:
look carefully...look carefully...
continues

Use brightness and saturation levels of blue
For text and small objects consider using a slight darker blue.
Control the brightness and saturation levels to obtain a less
saturated and darker color.
Older people need brighter colors
If your audience is older, than you should consider using
brighter colors in your design.
Image from Flickr user SundeepGoel.
color97
end
Recommendations
Avoid pure blue for small text & objects
Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed
do eiusmod tempor incididunt
ut labore et dolore magna
tempor aliqua.
Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed
do eiusmod tempor incididunt
ut labore et dolore magna
tempor aliqua.

Green: easiest color for the eye
Wavelengths in the green spectrum are the most easy to see due
to perfect focusing in the retina. We can consider green as the
most restful color for the human eye.
Perfect eye lens focusing.
color 98
In depth
image in the retina. However different 
light wavelengths are focused differently 
by the lens.
Because light wavelengths in the green
spectrum focus perfectly in the retina, these
create the sharpest images, and therefore
are the easiest colors to perceive.
Human eye
Perfect eye lens focusing
Perfect focus in retina.

High contrast variations and visual fatigue
Because the eye’s lens also refocus with brightness differences,
sharp contrast in brightness of things being continually viewed,
may cause visual fatigue.
Eye lens refocusing.
In depth
image in the retina. However different 
light wavelengths are focused differently 
by the lens.
Brightness is also a factor that
contributes to the lens refocusing.
If the lens has to continuously refocus 
for bright and dark objects, it may induce 
visual fatigue in our eyes.
color99
Human eye
Lens refocusing
darker vs brighter
When driving in a sunny day in the forest we have to deal with alternated dark trees shadows and the
bright environment. This constant change in brightness leads to a constant eye lens refocusing, leading
to a potential visual fatigue. Car image from Flickr user masontrullinger.

Visual periphery colors: blue & yellow
Yellow and blue are the best colors to use in the visual periphery.
In this area these are the colors we are most sensitive to.
Color neurons distribution.
Colors merging.
Visual periphery insensitive to color.
color 100
In depth
In our eyes we have light receptors
(neurons) that receive light and transform it
into neural activity. Some neurons called
cones are sensitive to color and located in
the middle of the retina, fovea.
As we move outside the fovea our color
sensitivity decreases. Reds and greens tend
to look yellow. Violets and blues tend to
look blue. In the extreme periphery of the
retina we are insensitive to color.
Around fovea: we are red-green blind.
>> Reds and greens tends to look yellow...
>> Violets and blues tends to look blue...
Retina
Fovea
Center of fovea: our eyes work with trichromatic color.
Extreme periphery: we are insensitive to color.
Human eye

Brighter colors: middle of visible spectrum
The brighter colors our eyes perceive are found in the middle of
the visible electromagnetic spectrum. These are the yellow,
green-yellow and orange-yellow colors.
Brightness derived from “Red” & “Green” neurons’ peak response.
In depth
Our brain interprets color from 3 primary
spectrum wavelengths, red, green and blue.
Afterwards, this trichromatic color flows to
another process where our brain mixes these
signals to obtain 3 new color channels.
One of these color channels carry
brightness information that is derived from
green and red.
These “red” and “green” neurons (called
cones) have their peak responses at the
middle of the spectrum, therefore the
brightest colors are in the middle.
color101
Light neurons peak sensitivity to light brightness
Brightness (black and white)
=
Medium (green) + Long (red) wavelengths
Light neurons’ peak response to light
By combining the wavelengths in the green and red areas of the visible electromagnetic spectrum, our
eye extracts the brightness channel information. Images from CambridgeinColour.com

Yellow: most luminous color
Yellow is the most luminous color in the visible electromagnetic
spectrum. Yellow gets people’s attention faster than any other color.
Brightness derived from “Red” & “Green” neurons’ peak response.
color 102
In depth
Our brain interprets color from 3 primary
spectrum wavelengths, red, green and blue.
Then this trichromatic color flows to another
process where our brain mixes these signals
to obtain 3 new color channels.
One of these color channels carry
brightness information that is derived from
green and red.
These “red” and “green” neurons (called
cones) have their peak response at the
greenish-yellow color, therefore the brightest
color is greenish-yellow.
Light neurons peak sensitivity to light brightness
Spectrum image from CambridgeinColour.com
Yellow gets people’s attention faster than any other color.
American school buses are yellow. 
Metro floor barriers are yellow.

Human eye
Eye lens accommodation
Chiwawa
Color contrast
The eye focuses most sharply on objects that have enough
contrast. Low contrast causes visual fatigue. Text size also
maters, the smaller the text, higher needs to be the contrast.
Excess of lens accommodation.
In depth
Contrast is the difference in perceived
brightness of two objects. The sharper the
object stands out against its background,
the quicker the lens accommodation.
Accommodation is the process by which
the eye’s lens expands and contracts to
better focus the light wavelengths in the
retina to get a sharper image.
When there’s a small difference in
brightness on nearby objects, we will squint
our eyes, which is a way to reduce the
amount of light that enters the eye making
it easier to only focus a particular object —
lens’s accommodation.
Bad contrast is harder for the eyes to
focus, causing an excess of accommodation
that results in visual fatigue.
color103
continues
Bad contrast makes harder for the eyes to focus (excess of accommodation) causing visual fatigue.
Accommodation is when the eyes’ lens expands and contracts to focus light wavelengths in the retina.
Chiwawa Chiwawavs

continues
color 104
Color contrast
Always give enough contrast
Dark colors vs bright colors
When in doubt about contrast ask yourself: “Is this color bright or
dark?”. If the answers for the two colors are the same, then it is
likely that you have a contrast problem. Check and adjust
brightness levels using the HSB color space.
Best contrast colors are the ones in the opponent channels
Opponent colors are the range of colors that our eyes by default
perceive them as opponent or contrasting. However be careful
about mixing simultaneous saturated colors.
Recommendations
ENROLL IN PROGRAM
HOME PAGE
Chiwawa
ENROLL IN PROGRAM
HOME PAGE
Chiwawa
10 de Abril de 2009 10 de Abril de 2009
red & green blue & yellow black & white
can you read me? can you read me? can you read me?can you read me?

Brighter colors vs darker colors in visible spectrum
By default some colors are brighter or darker in the visible
electromagnetic spectrum. By using colors in the middle versus
colors in the extremes of the spectrum, we’re choosing
contrasting colors by default.
Use a compliant tool with WCAG 2.0's luminosity contrast
algorithm.
The organization World Wide Web Consortium (W3C) has some
contrast guidelines for readability that can be used to get better
color contrast.
http://juicystudio.com/services/luminositycontrastratio.php
Color contrasts are more intense and sharp on screens.
Because the screens emit light instead of reflecting it, the
resulting colors are brighter and more intense.
color105
end
Color contrast
Eye color brightness sensitivity
can you read me?can you read me?
can you read me?can you read me?
Brighter colors: yellow, green, light blue. 
Darker colors: blue, purple, red.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consectetur adipisicing.
Lorem ipsum dolor sit amet, consectetur adipisicing. Lorem ipsum dolor sit amet.
vs vs

Periphery vision is sensitive to motion
Periphery vision is what our eyes see in visual field periphery. 
This part has low acuity and is sensitive to motion and contrast
changes. And it can be used in good ways or to disturb users.
Periphery eyes’ neurons: rods.
Rods are sensitive to motion.
Rods: insensitive to light, therefore
sensitive to color contrast.
In depth
Inside our eye, the retina is responsible for
transforming light energy into neural activity.
The periphery of the retina is full of a certain
type of light receptors (rods) that are
insensitive to color and very sensitive to
motion. Because they are insensitive to color
they use color contrast instead for detecting
changes in the environment. This is why when
trying to focus on something, animation in 
the visual periphery can be very distracting.
These neurons are part of human
evolution, and became fundamental for our
survival because we always had to detect
danger quickly. For example, high-speed 
cars or lions attacking you, depending on
which age you are/were living.
motion109
Motion and contrast
are very effective to
warn the user!
Banners next to text?
peripheryperiphery
Some email applications unobtrusively warn users using high contrast colors and a slight animation,
while some highly animated banners disturb users that are trying to read text.

Visual perceptual processor speed:
Fastest: 50 milliseconds
Average: 100 milliseconds
Slowest: 200 milliseconds
Animation from still images
To create animation we can present still images continuously at a
rate that overcomes the time by which our visual system process
a stimulus.
Average visual perceptual processor speed = 100[50~200] milliseconds.
Motion sensation = 1000/50 = 20 images per second.
motion 110
In depth
By exploring the speed of our visual
perceptual processor we can induce a
sensation of motion in our brain.
If our brain takes between 50 to 200 ms
to process a stimulus and transform it into a
representation our mind understands,
something beneath that range will be
processed as a whole.
By passing 20 images per second, our
brain will see one single stimulus as motion
instead of 20 individual stimuli.
Motion video cameras usually take 24
frames per second, just to make sure motion
will be perceived at all times by all people.

Shopping cart metaphor on the web
To use an effective shopping car metaphor on the web, you want
to provide a similar experience of shopping in a grocery store.
A web shopping cart must be:
Persistent,
Visible,
Immediately accessible,
Items easy to add to cart,
Easy to check out.
In depth
When buying on a physical store you can
carry a shopping cart. While shopping,
items don’t disappear, they’re easy to pick
and you can choose without reading the
description. To check out, you just go the
payment line.
A persistent cart means that items
don’t disappear no matter where you
navigate in the online store. When
browsing, the cart and items should be
always visible and a click away.
Adding items to cart and checking out
should also be one click away.
metaphors113
Grocery store image from Flickr user Chris Devers.

Name Bibliographic reference
Aging and sensitivity to blue (the_essential_guide_to_user_interface_design,
2007)
(using_color_effectively, 1990)
Animation from still images (the_psychology_of_human-
computer_interaction, 1983)
Application responsiveness times (the_psychology_of_human-
response_times:_the_three_important_limits,
1994)
Attention limitations (an_introduction_to_human_factors_engineering
, 2004)
Bevel-like effect in backgrounds (backgrounds_in_web_design:_examples_and_best
_practices, 2009)
Brighter colors: middle of visible spectrum (the_essential_guide_to_user_interface_design,
2007)
(sensation_and_perception, 2006)
Change blindness: overlook fine differences (sensation_and_perception_web_activities, 2006)
(inattentional_blindness in wikipedia, 2009)
Color blindness (color_blindness in wikipedia, 2009)
Color contrast (why_squinting_helps_you_see_better, 2013)
Color is powerful in search
Color movement (the_essential_guide_to_user_interface_design,
2007)
Combination of color brightness levels
Configural displays (an_introduction_to_human_factors_engineering
, 2004)
category117
Bibliography references

category 118
Constraints of pure blue color (the_essential_guide_to_user_interface_design,
2007)
Decision-making heuristics and biases (an_introduction_to_human_factors_engineering
, 2004)
Depth perception (sensation_and_perception, 2006)
(sensation_and_perception_web_activities, 2006)
Design information to remember (an_introduction_to_human_factors_engineering
, 2004)
Display design principles (an_introduction_to_human_factors_engineering
, 2004)
Dynamic displays: analog vs digital (an_introduction_to_human_factors_engineering
, 2004)
Easy and effective instructions (an_introduction_to_human_factors_engineering
, 2004)
F-shaped pattern for reading web content (f-shaped_pattern_for_reading_web_content,
2006)
Fast visual search (sensation_and_perception, 2006)
(an_introduction_to_human_factors_engineering
, 2004)
Feedback, feedforward and affordances (the_psychology_of_everyday_things, 1988)
Fitts’s law in interaction design (a_quiz_designed_to_give_you_fitts, 1999)
Functional fixedness (functional_fixedness in wikipedia, 2009)
functional_fixedness, 2009)
functional_fixedness_image, 2001)
Gestalt principles (sensation_and_perception, 2006)
(notes_on_graphic_design_and_visual_communic
ation, 1990)
Green: easiest color for the eye (using_color_effectively, 1990)
(physiological_principles_for_the_effective_use_
of_color, 1999)

category119
Hick-Hyman law in interaction design (an_introduction_to_human_factors_engineering
, 2004)
(hick's_law in wikipedia, 2009)
High contrast variations and visual fatigue (the_essential_guide_to_user_interface_design,
2007)
Human brain processing times (the_psychology_of_human-
Important of experiences: end & start (memory_is_more_important_than_actuality,
2009)
(an_introduction_to_human_factors_engineering
, 2004)
Long-term memory retrieval issues (the_psychology_of_human-
Multitasking and time-sharing (an_introduction_to_human_factors_engineering
, 2004)
(workload in wikipedia, 2009)
Name buttons with intended behavior (apple_human_interface_guidelines, 1996)
Perception: top down vs bottom up (an_introduction_to_human_factors_engineering
, 2004)
Periphery vision is sensitive to motion (sensation_and_perception, 2006)
Reading rates (the_psychology_of_human-
(reading_(process) in wikipedia, 2009)
Remember good memories, forget bad ones (memory_is_more_important_than_actuality,
2009)
Saturated colors and visual fatigue (the_essential_guide_to_user_interface_design,
2007)
Shopping cart metaphor on the web (use_and_misuse_of_metaphor, 2000)
Signal detection theory (an_introduction_to_human_factors_engineering
, 2004)

category 120
Situation awareness (an_introduction_to_human_factors_engineering
, 2004)
Small multiples in data visualization (functional_fixedness, 2009)
(small_multiples_within_a_user_interface, 2009)
(small_multiple in wikipedia, 2009)
The user is not like me
To forget and how to improve memory (an_introduction_to_human_factors_engineering
, 2004)
Usage of ALL CAPS and SMALL CAPS (an_introduction_to_human_factors_engineering
, 2004)
Visual area with sharp details is very small (sensation_and_perception_web_activities, 2006)
Visual periphery colors: blue & yellow (color-
vision_mechanisms_in_the_peripheral_retinas_of
_normal_and_dichromatic_observers, 1972)
Web: users scan instead of reading (how_users_read_on_the_web, 1997)
Working memory limitations (the_psychology_of_human-
Yellow: most luminous color (the_essential_guide_to_user_interface_design,
2007)

Bibliography
category 122
Bruce Tognazzini (1999). A Quiz Designed to Give You Fitts. Retrieved August 2009, from
AskTog | Nielsen Norman Group Information. 
Website http://www.asktog.com/columns/022DesignedToGiveFitts.html
(a_quiz_designed_to_give_you_fitts, 1999)
Christopher Wickens, John Lee, Yili Liu & Sallie Becker (2004). An Introduction to Human
Factors Engineering, Second Edition. Pearson Education, Inc.
(an_introduction_to_human_factors_engineering, 2004)
Fitts’s law in interaction design
Usage of ALL CAPS and small caps 4 - Visual Sensory Systems 72-73
Fast visual search 4 - Visual Sensory Systems 79-81
Easy and effective instructions 6 - Cognition 133-132
Important of experiences: end & start 6 - Cognition 134-135
Situation awareness 6 - Cognition 143-145
Dynamic displays: analog vs digital 8 - Displays 196
Configural displays 8 - Displays 205-208
Hick-Hyman law in interaction design 9 - Control 219-220
Perception: top down vs bottom up 4 - Visual Sensory Systems 74-77
Decision-making heuristics and biases 7 - Decision making 160-170
Display design principles 8 - Displays 186-192
Attention limitations 6 - Cognition 122-123,
Multitasking and time-sharing 6 - Cognition 149-155
Signal detection theory 4 - Visual Sensory Systems 82-86
To forget and how to improve memory 6 - Cognition 134-139
Design information to remember 6 - Cognition 138

Apple Inc. (1996). Apple Human Interface Guidelines. From Apple Developer
Connection. Retrieved August 2009, Website 
http://developer.apple.com/mac/library/navigation/index.html
(apple_human_interface_guidelines, 1996)
Matt Cronin (2009). Backgrounds In Web Design: Examples And Best Practices.
From Smashing Magazine. Retrieved August 2009, Website 
http://www.smashingmagazine.com/2009/03/31/backgrounds-in-web-design-examples-and-
best-practices-2/
(backgrounds_in_web_design:_examples_and_best_practices, 2009)
B. Wooten, George Wald (1972). Color-Vision Mechanisms in the Peripheral Retinas
of Normal and Dichromatic Observers. The Journal of General Physiology, 61(2): 125–
145. Retrieved August 2009, from PubMed Central database.
(color-vision_mechanisms_in_the_peripheral_retinas_of_normal_and_dichromatic_observers, 1972)
Jakob Nielsen (2006). F-Shaped Pattern For Reading Web Content. Retrieved August
2009, from useit.com → Alertbox. 
http://www.useit.com/alertbox/reading_pattern.html
(f-shaped_pattern_for_reading_web_content, 2006)
Enotes.com (2009). Functional Fixedness. Retrieved August 2009, from Enotes.com,
Encyclopedia of Psychology. Website 
http://www.enotes.com/gale-psychology-encyclopedia/functional-fixedness
(functional_fixedness, 2009)
Name buttons with intended behavior
Bevel-like effect in backgrounds
Visual periphery colors: blue & yellow
F-shaped pattern for reading web content
category123

The McGraw-Hill Companies (2001). Functional Fixedness image. Retrieved August 2009,
from Introductory Psychology Image Bank, The McGraw-Hill Companies. 
Website http://www.mhhe.com/socscience/intro/ibank/set4.htm
(functional_fixedness_image, 2001)
Jakob Nielsen (1997). How Users Read on the Web. Retrieved August 2009, from
useit.com → Alertbox. 
Website http://www.useit.com/alertbox/9710a.html and 
Why Web Users Scan Instead of Read. Retrieved August 2009, from 
useit.com → Alertbox. 
Website http://www.useit.com/alertbox/whyscanning.html
(how_users_read_on_the_web, 1997)
Donald Norman(2009). Memory Is More Important Than Actuality, XVI.2 - March/April
2009. From ACM Interactions magazine. Retrieved August 2009, Website http://
interactions.acm.org/content/?p=1226
(memory_is_more_important_than_actuality, 2009)
Gregg Berryman (1990). Notes on Graphic Design and Visual Communication. Crisp
Publications, Inc.
(notes_on_graphic_design_and_visual_communication, 1990)
Scott Owen (1999). Physiological Principles for the Effective Use of Color. Retrieved
August 2009, from ACM SIGGRAPH database. Website 
http://www.siggraph.org/education/materials/HyperGraph/color/coloreff.htm
(physiological_principles_for_the_effective_use_of_color, 1999)
Web: users scan instead of reading
Remember good memories, forget bad ones
Important of experiences: end & start
Gestalt principles
Green: easiest color for the eye
category 124

Jakob Nielsen (1994). Response Times: The Three Important Limits. Retrieved
August 2009, from useit.com → Papers and Essays. 
Website http://www.useit.com/papers/responsetime.html
(response_times:_the_three_important_limits, 1994)
Jeremy Wolfe, Keith Kluender & Dennis Levi (2006). Sensation and Perception. Sinauer
Associates, Inc.
Jeremy Wolfe, Keith Kluender & Dennis Levi (2006). Sensation and Perception Web
Activities. Retrieved August 2009, from Sensation and Perception Student Website. Sinauer
Associates, Inc. Website http://www.sinauer.com/wolfe/home/startF.htm
Application responsiveness times
Periphery vision is sensitive to motion 2 - The First Steps in Vision 33-38
Fast visual search 8 - Attention and Scene
Perception
Brighter colors: middle of visible
spectrum
5 - The Perception of Color
Color contrast 2 - The First Steps in Vision 40
Depth perception 6 - Space Perception and
Binocular Vision
Gestalt principles 4 - Perceiving and recognizing
objects
Visual area with sharp details is very small 3 - Spatial Vision Visual Angle
Change blindness: overlook fine differences 8 - Attention and
Scene Perception
The Flicker
Paradigm
Depth perception 6 - Space Perception
and Binocular Vision
Gestalt principles 4 - Perceiving and
recognizing objects
category125

Luke Wroblewski (2005). Small Multiples Within a User Interface. Retrieved August
2009, from UXmatters. Website 
http://www.uxmatters.com/mt/archives/2005/12/small-multiples-within-a-user-interface.php
(small_multiples_within_a_user_interface, 2009)
Wilbert Galitz (2007). The essential guide to user interface design, Third edition.
Chapter 2 - The User Interface Design Process, step 12 - Choose the Proper Colors (pp.
701-702). Wiley Publishing, Inc.
(the_essential_guide_to_user_interface_design, 2007)
Donald Norman (1988). The psychology of everyday things. New York: Basic Books
[Reprinted MIT Press, 1998].
(the_psychology_of_everyday_things, 1988)
Stuart Card, Thomas Moran & Allen Newell, (1983). The Psychology of Human-
Computer Interaction. Lawrence Erlbaum Associates, Inc.
(the_psychology_of_human-computer_interaction, 1983)
Small multiples in data visualization
Color movement
High contrast variations and visual fatigue
Brighter colors: middle of visible spectrum
Feedback, feedforward and affordances
Long-term memory retrieval issues 2 - The Human Information-Processor 39-40
Working memory limitations 2 - The Human Information-Processor 39
Reading rates 2 - The Human Information-Processor 50-51
Application responsiveness times 2 - The Human Information-Processor 31-34
Animation from still images 2 - The Human Information-Processor 31-32,
45-46
Human brain processing times 2 - The Human Information-Processor
category 126

Larry Constantine (2000). Use and Misuse of Metaphor. Retrieved August 2009, from
Constantine & Lockwood, Ltd | Articles, Reports, and Papers. 
Website http://www.foruse.com/articles/metaphor.pdf
(use_and_misuse_of_metaphor, 2000)
Lawrence Najjar (1990). Using Color Effectively. Retrieved August 2009, from Lawrence
Najjar personal website. 
Website http://www.lawrence-najjar.com/papers/Using_color_effectively.html
Wikipedia (2009). Retrieved from Wikipedia, The Free Encyclopedia. 
Website http://en.wikipedia.org
(article_name in Wikipedia, 2009)
Scott (2013). WHY SQUINTING HELPS YOU SEE BETTER. Retrieved January 2016.. 
Website http://www.todayifoundout.com/index.php/2013/11/squinting-helps-see-better/
(why_squinting_helps_you_see_better, 2013)
Shopping cart metaphor on the web
Color blindness
Color contrast
Reading rates Reading (process)
Change blindness overlook fine differences Inattentional blindness
Functional fixedness Functional fixedness
Small multiples in data visualization Small multiple
Color blindness Color blindness
Hick-Hyman law in interaction design Hick's law
Multitasking and time-sharing Workload
category127
Color contrast

129
A
Absolute judgment limits, 77
Accommodation, 104
Acuity. See Visual acuity.
Aerial perspective, 69
Affordance, 60, 64, 68
Aging. See Older people.
All caps, 89
Analog, 81
Animation, 110, 111
Attention, 23
decision-making, 25, 26
display design principles, 79
multitasking, 30, 31
Automaticity, 31
B
Banners, 110
Bevel-like effect, 64
Blue, 97—98
aging, 96
color blindness, 93
color movement, 92
opponent colors, 105
saturated colors, 94
visual periphery colors, 101
Bottom-up processing, 16
Brain processing times.
See Model human processor.
Brightness, 102, 103
in blue, 98
in color blindness, 93
in color brightness levels, 75
in contrast variations, 100
in contrast, 104—106
Buttons (naming), 88
consistency (display), 80
hick-hyman law, 58
proximity (gestalt principles), 74
shading (depth perception), 70
C
Cart. See Shopping cart.
Change blindness, 17
Closure, 73
Cognition, 21
Cognitive bias, 22
Cognitive resources, 32—33.
See also Mental resources.
Cognitive tunneling, 27, 33.
See also Functional fixedness.
Color, 91
Color blindness, 66, 93
Color brightness levels, 75
Color channels, 102, 103
Color movement, 92
Color search. See Visual search.
Color visual periphery.
See Visual periphery colors.
Configural displays, 82
Confirmation bias. See Decision-making.
Consistency, 80
Continuation, 74
Contrast variations, 100
Contrast, 104—106, 110
bevel-like effect, 64
change blindness, 17
color brightness levels, 75
contrast variations, 100
figure / ground (gestalt principles), 73
legibility (display), 77
Cool colors, 92
Subject index

130
D
Data visualization, 65
Decision-making, 24, 25—29
Delay, 52.
Depth cues, 68, 69—71
Depth perception, 68, 69—71
Desires, 16
Digital, 81
Discriminability. See Display.
Display design principles, 76, 77—80
Dynamic displays, 81
E
Electromagnetic spectrum, 102, 103, 106
Empathize, 13
Equilibrium. See Gestalt.
Expectancies (user) 16
remember, 49
signal detection theory, 34
top-down processing, 77
visual search, 67
Experiences, 44, 45
Eye lens focusing. See Lens focusing.
F
F-shaped pattern for reading, 59
Feedback, 60, 52
Feedforward, 60
Figure / ground, 73
Fitts’s law, 57
Font, 89
Forgetting 46.
Framing bias. See Decision-making.
Functional fixedness, 22
G
Gaze, 18
Gestalt principles, 72, 73—74
Glyphs, 89
Gradient, 95, 70. See also Shading.
Green, 99
color blindness, 93
color movement, 92
brightness, 102—103
H
Haze. See Depth perception.
Heuristics. See Decision-making.
Hick-Hyman law, 58I, J
I, J
Illusions. See Depth perception.
Information access cost. See Display.
Instructions, 87
Interaction design, 51
Interface design, 63
Internet. See Web.
Interposition. See Depth perception.
Isomorphic correspondence.
See Gestalt principles.
K
Knowledge in the world, 80

131
L
Labels. See Buttons (naming).
Learn, 46, 47—49
Legibility, 77
Lens focusing
blue, 97
color movement, 92
green, 99
Lens refocusing
saturated colors, 94
Lens yellowing, 96
Linear perspective, 69
Long-term Memory, 43
decision-making, 26, 28.
experiences, 45
forgetting, 46
knowledge in the world, 80
memories, 44,
model human processor, 54—56
remembering, 49
working memory, 42
Lowercase, 89
Luminosity, 106. See also Luminous color.
Luminous color, 103
M
Memories, 44
Memorize, 46, 47—49
Memory, 41, 46.
See also Long-term memory 
and Working memory.
guidelines, 47—48
memories, 44
remember, 49
Mental model
memory, 48
user, 13
Mental resources, 23, 30, 31, 34
Metaphors, 113
Model human processor, 54—56
Motion parallax, 70
Motion, 109, 110, 111.
See also Motion parallax.
Moving part, 78
Multiple resource theory, 30—31
Multitasking, 30, 31—33
N
Naming. See Buttons (naming).
Notification, 17
O
Occlusion, 69
Older people, 96, 98
Order, 73
Overconfidence, 27
Opponent colors, 105
P, Q
“Pop up” effect (visual), 67
Parallel visual search, 67
perception, 15
Periphery vision colors.
See Visual periphery colors.
Periphery vision, 110.
Pictorial realism. See Display.
Predictive aiding. See Display.
Primacy effect
in decision-making, 26
in experiences, 45
Progress bars. See Buttons (naming).
Proximity compatibility, 79
Proximity (gestalt), 74

132
R
Rates. See Times.
Reading (web content), 53, 59, 86
Reading rates, 53
Recall. See Remember.
Recency effect
decision-making, 27, 28
experiences, 45
forgetting, 46
memory, 47
Redundancy gain. See Display.
Remember, 47—49
Response bias. See Signal detection theory.
Response sensitivity.
See Signal detection theory.
Responsiveness (application), 52
S
Saccades (eye movements), 53
Saturated colors, 93—96
Scanning. See Reading.
Search. See Visual search.
Senses, 16, 32
Serial visual search, 67
Service Design.
See also Experiences and Memories.
Shading, 70
Shopping cart, 114
Signal detection theory, 34
improve response bias, 35
improve response sensitivity, 36—37
Similarity. See Gestalt.
Situation awareness, 38. See also Attention.
Small caps, 89
Small multiples, 65
Spectrum, 102, 103, 106
Stereopsis, 71
Still images, 111
Stimulus, 16, 52, 111
Sunk cost bias, 29
Symmetry (gestalt), 73
T
Task management, 30
Text, 85
Texture gradient, 70
Time management. See Multitasking.
Time-sharing, 30
Times
in animation, 111
in brain processing times, 54—56
in reading rates, 53
in responsiveness (application), 52
Typeface, 89
Top-down processing, 16. See also Display.
Tridimensionality. See Depth perception.
U
Unresponsiveness (application), 52
Usability studies. See also User.
User testing. See also User.
User, 13. See also Functional fixedness.
V
Visual acuity, 18
Visual angle, 18
Visual fatigue
contrast, 104
saturated colors, 94—95
Visual field, 18
Visual periphery colors, 101
Visual periphery. See Periphery vision.
Visual search, 66, 67

133
W
W3C, 106
Wait cursor, 52
Warm colors, 92
Web
F-shaped pattern for reading, 59
scanning, 86
shopping cart metaphor, 114
Working memory, 42
change blindness, 17
decision-making, 24—29
discriminability (display), 78
instructions, 87
instructions, 87
model human processor, 54—56
Writing, 87
X
X-height, 89
Y, Z
Yellow (luminosity), 103
brightness, 102—103, 106
color blindness, 93
older people, 96
opponent colors, 105
visual periphery colors, 101
*
3D, 68, 69—71
7[5~9]. See Working memory.

Document design information
Book dimensions: A5 (420 pt x 595 pt, 14,8 cm x 21 cm, 5,83 in x 8,27 in)
Main typeface: Delicious
Secondary typeface: TitilliumText14L

HCI Quick Guide

More Related Content

Viewers also liked

Similar to HCI Quick Guide

Recently uploaded

HCI Quick Guide