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
Document version Revision date Author (s) Changes
1.0 22 set 2009 Emanuel Fernandes Initial document.

Author
emanuel.m.fernandes@gmail.com
HCI Quick Guide
Human-Computer Interaction
"Although many people think things just happen,

there are those who believe that science must be
behind most decisions we take most of the days.
Designing, selling, advertising, managing, all these
tasks require a set of understanding skills about the
context and the subject they deal with. The so many
times used “common sense” or “best guessing”
seem to be a good way of driving people when
performing a task. But they are not! This is why
many times things go wrongly and we wonder why.
Even if there is always a certain degree of
uncertainty, derived from the world we live, guiding
our decisions with some sort of scientific knowledge
most of the times gets the job well done. This also
applies to designing user interfaces. Only by
understanding how humans work we can better
design something to be used by humans. That’s why
I urge all of you to listen to those who understand
this field of Human-Computer Interaction, or at least
to inform yourself before making guessed design
decisions, otherwise there is a very likely chance
that most of the times, guessed decisions will fail.”
by emanuel fernandes
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
8 contents
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 9
Preface
There are out there an immense quantity 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 many times apply these principles unconsciously and may
even forget some of them. This is normal, as humans memory
have many limitations. Another problem is that these principles
are spread across many disciplines and may be difficult and time-
consuming to access.
To resolve these issues, the HCI Quick Guide was envisioned.
This is a guide with the most important principles in the
Human-Computer Interaction field that aims at providing
information in a quick way. Besides enumerating design and
usability principles, the guide 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.
Explaining each principle is not only important to explain certain
design solutions but is also important for designers to make better,
confident and informed design decisions.
The audience of this guide are 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 also
want to know more about what is Human-Computer Interaction,
then you can get a better understanding as well.
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 our design but not in a
rigidly way as different problems may require different solutions.
Some principles even go against others, but this is normal and as
in other aspects of life, there 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 :)
first
and
foremost
12
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.
What the world really is, and what the user thinks the world is (mental model).
You should:
listen empathize
look probe
Quick facts
You know too much.
Users have their own mental model.
Empathize with your users.
In depth
As a designer you know too much, so be Put yourself in the user's mind
careful with assumptions you make about (empathize) and try to design for that
your users. Observe your users behavior, mental model.
listen to them, probe and understand what
is their mental model.
first and foremost 13

1
Perception
15
Perception: top down vs bottom up
We perceive the world using the combination of our physical
senses and our previous mental knowledge.
Experience
Top-Down
Knowledge
Processing
(Expectancies
and Desires)
Perception
The senses
Bottom-Up
Processing
Stimulus World
Relation 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).
Quick facts
Perception of the world: Experience & Stimulus World.
In depth
Perceiving the world has two components something, while the bottom-up processing
that interplay with each other. We use our involves using our senses. It is the
senses to perceive the world and our combination of both that we use most of the
knowledge complements it. Physical and times to perceive the world around us.
mental are brought together in what is called The example below shows a design
top-down and bottom-up processing. where knowledge helps a poor stimulus (font
Top-down processing involves using our too small). It’s easier to guess a name than a
expectancies and desires to perceive meaningless email and phone number.
Emanuel Hernandez Emamhernandez@company.com 96-308-4572.

Example: is a better design than is
Emanuel Hernandez Emamhernandez@company.com 96-308-4572.
16 perception
Change blindness: overlook fine differences
People are bad at noticing subtle changes in subsequent images.
This is a psychological effect called “change blindness.”
Can you notice the differences between each other?

One screenshot is before logging in and the other is after logging in.
Quick facts
Working memory limitations.
Make important changes noticeable.
Subtle changes unnoticed.
In depth
Humans have a very limited working When designing a notification to your
memory, therefore it is almost impossible users, make sure the changes have enough
to retain all details of an image we see. contrast to be noticed.
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.
perception 17
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.
Fovea
Visual acuity is smaller than people think. Flower image: (sensation_and_perception_web_activities, 2006).
Quick facts
Sharp details only seen at fovea. VA = arctangent(object size/distance).
Best acuity visual angle (VA) = 2º. Visual area with sharp details is small.
In depth
When our eyes interpret the world, there Example: for a visual angle of 2° and
is only a small part that we can see with looking at a screen away 50 cm, we have an
great acuity, or details. In the back of our area of high acuity in our fovea of 1,7 cm.
eyes, there is a small area in the center of 1,7 = tangent(2)*50.
the retina, called fovea, that is responsible for This is the same area as
decoding these details. this square on the right.
The neurons that live in the fovea can Do not expect users to look
achieve the highest degree of detail with a at a graphical user interface
size of 2° of visual angle. Visual angle and understand all the details,
measures the size of objects in the retina. unless the fixate their gaze on each part.
18 perception
2
Cognition
21
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
In this experiment people are asked to grab the 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 that is to cut wires.
Image from (functional_fixedness_image, 2001).
Quick facts
People’s world: fixed structure. Avoid hypothetical situations with users.
Don’t ask for new features. Experts overlook important details.
In depth
People understand their world within a fixed This has the following implications in
structure. This functional fixedness lead the design of systems: don’t ask users to
people to recognize objects only for their tell you about new features, don’t ask them
obvious functions, creating a mental block to think about hypothetical situations, don’t
that prevents using tools in a new way to expect every user to be able to invent new
solve problems. ways of working with your tools and expect
experts to overlook details.
22 cognition
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)
If you were walking at night in Times Square, New York, where would your attention be driven to?
Image from Flickr user heymynameispaul.
Quick facts
Limited attention resources depends on: Expectancy,
Salience, Effort & Value.
In depth
Attention is the process on which our brain changing lanes, because there’s much
allocates our scarce mental resources for “effort to give.”
performing a task. The way we move our Expectancy is where we will expect to
attention in the world depends on salience, find things. For example, if we usually read
effort, expectancy and value of information. from top to bottom and left to right, it is
Salience is how “inviting” will be very likely that when reading a book we will
something to us, that will capture our look first to the top-left part.
attention. This relates to our senses. Value is how worth is to spend our
For example, titles in a book get our attention on something. For example, when
attention first then the prose. crossing the street, the value of looking to
Effort describes the amount of work traffic lights is enough to spend our
required to attend something. For example, attention on it?
fatigued drivers may not look back when
cognition 23
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.
Which path to choose? This is a common question when trying to make a decision.
Image from Flickr user nerovivo.
Quick facts
“Good enough” decision. Rules of thumb.
In depth
When making a decision humans usually As a result we use a set of heuristics,
don’t consider all aspects and weight all pros rules of thumb, to simplify the decision
and cons of each option. The goal is to make making process. Sometimes these rules may
a “good enough” decision in the shortest bias our decisions to a certain direction.
time available with the fewest resources. While these rules help us deciding fast,
sometimes they can lead to poor decisions.
continues
24 cognition
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 Available cue Selected cue
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 25
Cue primacy and anchoring
When receiving cues along time, the first cues have primacy
over the remaining. For whatever reason, information
processed early is often most influential and typically we
Time
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. Time
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 Available hypotheses
cues in the working memory with knowledge we have in our
long-term memory. This is to understand the problem. Why? Selected hypotheses
Generation of a limited number of hypotheses

The limits 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.
continues
26 cognition
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 Time
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 27
Confirmation bias
The tendency to only seek out information which confirms a
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? Available action Selected action
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 Time
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.
continues
28 cognition
Availability of possible outcomes
When considering the outcomes of the different actions, we Estimated probability of outcome
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 Real probability of outcome
happening something similar to him is lower than it really is.
Framing bias
The way a situation is framed can influence decisions. Framing a Lorem ipsum dolor sit?
hypotheses in a positive way is more attractive than in a vs

negatively way. A phenomenon called sunk cost bias infers that
Ipsum dolor sit lorem?
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 more likely to feel they are performing better with 80% correct)
Cancer treatment with 20% mortality rate vs 80% success rate? (people
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 29
Multitasking and time-sharing
Good performance when doing more than one thing at the same
time, depends on many factors. Those factors are described.
Image from Flickr user _TomTom_.
Quick facts
Multitasking depends on: Structure of tasks & Similarity of content,
Resources demand, Task management.
In depth
Multitasking is how we manage to do involve dealing with articulated coded
more than one task at the same time. content. See Multiple Resource Theory.
This depends on resource demand, Similarity of content is when information
structure of tasks, similarity of content is very similar between different tasks. For
and task management. example counting items while listening
Resource demand is how much we make someone speaking about numbers.
use of a certain mental resource. For Task management is related to how we
example rehearsing “96 308 45 72” requires a allocate resources to each task. Some tasks
different demand from rehearsing “0 1 2 9 1 may become prominent and we give more
9 6 3 0 8 4 5 7 2.” Some tasks may require attention to them. We can also switch tasks
less resources because they are automated, very quickly appearing we’re doing them
like signing a letter, entering passwords, etc. in parallel.
Structure of the tasks is when tasks are Only by considering the previous factors,
structurally similar that they will use the we can determine if certain tasks can be
same resources. For example, speaking while performed at the same time with a certain
rehearsing a phone number. Both tasks degree of success.
continues
30 cognition
Multitasking guidelines
Rea
sonin
Subconscious g
Action
Symbolic
ges
Linguistic
Sta
Processing
Perception
Visual
Auditory
Input
Tactual
Olfactory
According to 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.
Recommendations
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
continues
cognition 31
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.
+
“Turn left, then
turn right.”
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 while reading, like on presentations.
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.
Using images instead of words, then you can speak and people will listen
to you.
Reading and listening to music without lyrics. vs

Photography - the art or
Giving information in world instead of asking users to remember.
practice of taking and
processing photographs.
Automation of certain tasks

If possible automate some tasks and release cognitive
resources for other tasks.
Spell checking.
continues
32 cognition
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, don’t bike or don’t juggle. Choose one
of them only.
Image from Flickr user Elsie esq.
end
cognition 33
Signal detection theory
Theory that describes how we respond the question:
“Did you perceive [or detect] that?”
noise
signal
Is there a dangerous object in this bag?
An airport security luggage monitoring system is an example where 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.
Quick facts
Did you perceive (or detect) that? Sensitivity & Response bias
In depth
The perception of the world is a complex characteristics of the process of detection:
process. Depends on our senses, sensitivity and response bias.
expectancies, previous knowledge, Sensitivity is how good we are at
restrictions in mental resources, etc. How discriminating between signal and noise.
can we improve the decision making results Sensitivity is related to the “quality” of
when we’re trying to detect something? our senses and strength of signals
To the question “Did you perceive [or relative to noise.
detect] that?” two answers can arise: Yes or Response bias is our tendency to
No, and four results can arise: correct yes, respond more times yes our no. Bias is
incorrect yes, correct no, incorrect no. These related to expectancies and cost / benefits
four results can be summarized in two of the answer.
continues
34 cognition
Improve response bias
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.
Recommendations
Use rewards systems
To 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 the simply to instruct and train personnel.
Through training sessions, and even with “how to” printed guides.
Cost/benefits of error
Describing the costs / benefits of missing a dangerous luggage.
This should be performed in the training sessions, and could be regularly
revisited to keep the information fresh in workers minds.
continues
cognition 35
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.
Recommendations
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.
continues
36 cognition
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.
Having more than one person looking at the same luggage.
Image from Flickr user Thomas Hawk.
Provide knowledge of results

To inform personnel about 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.
end
cognition 37
Situation awareness
“Knowing what is going on around you” by Mica Endsley
Situation awareness when driving
Can you perceive the cars ahead of you?
Looking through the mirror: Will the

car behind me try to surpass me?
Are you sleepy?
What’s the car current speed?
Are you driving within the lane borders?
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.
Quick facts
Levels of situation awareness: Perception & Comprehension & Projection.
In depth
Situation awareness — “The perception of important changes, has a high negative
the elements in the environment within a cost. For example, driving, piloting an
volume of time and space, the airplane, nuclear plants, etc, where deathly
comprehension of their meaning and the accidents can happen.
projection of their status in the near Perception: perceiving the world in a
future.” Mica Endsley. correct and timely manner. Comprehension:
We can use situation awareness as a how to combine, interpret, store and retain
measure for designing dynamic systems information. Projection: forecasting future
when failure to attend and respond to events.
38 cognition
3
Memory
41
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.
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.
Quick facts
Working memory capacity 3[2,5 ~ 4,1] for pure capacity.
(chunks of info):
7[5 ~ 9] augmented by long-term memory.
In depth
Humans have big restrictions in the amount For example, it is much easier to
of information they can deal with at the remember a phone number as 96 308 45 72,
same time. than 9 6 3 0 8 4 5 7 2.
Our working memory, used for Another example: from the letters R P S C
temporarily store information, is limited in I T V C N M V, we can remember only a few,
average to 3 chunks of unrelated information while with same letters but recognizable
and 7 chunks of information that is already in chunks (stored in long-term memory) we can
our long term-memory. remember many more, such as TV channels
RTP SIC TVI CNN MTV TV.
42 memory
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.
The user finds a file named John and tries to remember all friends named John.
1 2
John John
Which John is this? Of course, the John that I play basketball with.
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.
Quick facts
Memory organized by associations Retrieval cues associated to
and categories. content.
In depth
We store information in our long-term Naming a file “John” and if we know 3
memory using associations and categories Johns, then it’s almost impossible to
linking cues to content. identify him. The single available cue, the
When having the same cue pointing to name, points to 3 different chunks,
many content chunks, the more difficult the people. With an image preview, we’re
it is to retrieve. The more cues we have adding one more cue that will help us
for a content chunk, the most likely retrieving the content.
it is to remember.
memory 43
Remember good memories, forget bad ones
We tend to remember only the good aspects of an experience as
time passes by.
Good memory Bad memory
snake
roller coaster
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).
Quick facts
a Fade 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 is due the fact that our brain fades away
memories. Recalling those memories is not faster emotions, details and negative
as accurate as we may think. events. This means that we may remember
Knowledge in our long-term memory that we did something, but not remember
tends to fade away, meaning that it is less the details and most important, the bad
accessible to be recalled. emotions associated.
We tend to remember better good
memories and forget bad experiences. This
44 memory
Important of experiences: end & start
Due to the primacy and recency effects we tend to remember
better the ending and start of an experience.
On a presentation, which slides do you think that are

more likely to be Remember by your audience?
Quick facts
Memory psychological effect: Primacy & Recency.
In depth
The recency effect tell us that humans are We should design considering memory,
better at retrieving knowledge from their building great start experiences and even
long-term memory as they are recent, or better endings.
fresh in memory. As a tip for making presentations,
For whatever reason, information convey your message on the few first and
processed early is often most influential and last slides.
we tend to access it easier. This is called the
primacy effect.
memory 45
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.
What’s the password

for my home banking?
ATMIM Computer
PIN Email
Home Banking Phone
Nowadays we use so many passwords, making it very difficult to retrieve them from memory.
Quick facts
Memory retrieval is difficult due to: Weaker content associations,
Weak content strength, Interference with associations.
In depth
Content in our long-term memory is Many different content is linked with
organized with associations. The way these the same or similar associations. When
associations are organized can determine searching for content these similarities can
the successful retrieval of the content. cause interference and we may only retrieve
Content becomes “weaker” due to low the unwanted content.
frequency and low recency of usage. For example, when trying to retrieve the
When content has weak or fewer password for our phone we may retrieve
associations with other content, with time if the ATM password instead. The concept —
we don’ use them they become “weaker.” password — has many similar associations.
46 memory
Memory guidelines
The following recommendations guide you to overcome the
memory retrieval limitations that humans have.
Recommendations
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 reproducing of information

Encourage active verbalization or reproducing of information
that is to be recalled.
Taking notes in class or requiring read-back of heard instructions
increases the likelihood that information will be Remember.
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.
continues
memory 47
Design information to be remembered
Information to be more easily Remember, must be customer@company.com
meaningful, concrete rather than abstract, organized in vs
distinctive concepts, no jargon and easy to be guessed by c.dep@company.com
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.
For example 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, Lock and unlock your
by telling people what is happening. phone by using a PIN.
Explaining in instructional manuals the reason for a particular action
vs
and what that action is.
Prevent unwanted
Giving visibility of system status, this is, to always give information
access to your phone,
to the user about what a system is doing currently, or what is the
current state. by locking and
unlocking your phone
using a PIN.
end
48 memory
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.
lorem ame
sit
dolor ipsum
Quick facts
Verbalization or reproduction of information. Concrete.
Information able to be guessed. Distinctive concepts.
Meaningful. Well-organized.
In depth
Content in our long-term memory is Avoid using abstract words, technical
organized with associations. The way these jargon or unknown words as it will be more
associations are organized can determine difficult to create associations in memory.
the successful retrieval of the content. Important concepts should be distinctive
When verbalizing or reproducing content enough from other content to avoid
we’re increasing the likelihood that the interference with associations when
information will be Remember. retrieving the same content.
Besides human senses (e.g.: vision) we Organize information into chunks so that
also perceive the world with information you reduce the amount of associations
from our own expectancies and previous connecting to the same content. For
knowledge. With this processing of example, dividing content using categories,
information we may guess other you make it easier to memorize as people
related content. will have to make more associations to the
Information should be meaningful and same content.
concrete for the audience it is intended.
memory 49
4
Interaction
Design
51
Application responsiveness times
Upon which time should we respond to users actions? How long
can users wait for an operation to be completed before we
provide any means of feedback?
The user feels the Application like:

instantaneously
some delay unresponsive
0,1 1 10
Time Seconds
Quick facts
Human stimulus perception 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] screen changes every 20 milliseconds
milliseconds to perceive a stimulus. Less (1/50), meaning that a fastest response
than this, there is the risk that the user won’t be noticed by users.
won’t perceive the effect of the action. Examples: According to Apple Human
On the technology side, if we for Interface Guidelines, the spinning wait
example have screens refreshing at a rate of cursor is shown within 2 seconds after
50 HZ, it means that the image on the an application becomes unresponsive.
52 interaction design
Reading rates
Reading rates depends on the eye movements plus the cognitive
effort required by the text and finally the amount of text read for
each eye movement we make.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
Saccades - eye movements
Type of reading Words per minute
Memorization < 100
Learning 100-200
Comprehension 200-400
Skimming 400-700
These rates are approximations and you need to take that into account.
Use it as a baseline for your design.
Quick facts
Eye movements (saccades).
Cognitive processing.
Amount of words read at each saccade.
In depth
When reading we make several eye At last, the type of content will influence
movements (saccades) for each block of the time we take to understand it. Also we
content we read. These saccades can take can read for memorization, learning,
230 [70 ~ 700] milliseconds. comprehension and skimming. All these
Then we must calculate how many types of reading require a different cognitive
words or letters we can read with each processing.
saccade. This can be 4 to 5 letters or more
depending on our reading speed.
interaction design 53
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.
Model human processor diagram from (the_psychology_of_human-computer_interaction, 1983)
Quick facts
Brain is composed of: Perceptual & Cognitive & Motor subsystems.
In depth
Each subsystem has a processor, and it is Perceptual - receive external stimuli
connected to memory. We have a long-term and transforms into a representation the
memory and working memory. The long- brain can understand, this is, transforms
term memory keeps knowledge in our head light energy, touch, smell, etc, into
for a long time and content retrieval is electric neural impulses.
influenced by cues associated. Short-term Cognitive - Gives meaning to the
memory is where temporarily content is perceptual inputs.
hold to be processed by our brain. It gets Motor - Tells any part of the body to
information either from perceptual system perform an action.
or the long-term memory.
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;
continues
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. Understand 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 Eyes Movement
Average 100 70 70 230 [70 ~ 700]

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 Decay time for Decay time for

with long-term memory 1 chunk 3 chunks
Working 7 [5 ~ 9] chunks 73 [73 ~ 226] 7 [5 ~ 34] seconds
memory seconds
Table with memory abilities in special situations.
end
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.
Fitts’s law
T - time to target. D - distance to target.
a, b - constants. W - size of the target.
vs
Small “Stop Copying” button requires more precision.
Rollover menus increase number of targets for selection. Screen corners - fast access.
Quick facts
Screen edges - infinite target size. More targets - slower selection.
Four screen corners - fastest. Every pixel counts.
In depth
Screen edges have infinite size because you When moving the mouse, it is difficult
can throw the mouse on it without for humans to do it straight (our hand is
surpassing it. supported by the elbow!) For example,
Corners are fast because they don’t multi-level roll overs can be really difficult to
have neighbors to compete with. Small use because many accidental cursor
targets, like an OK button , slow down movements will happen. This behavior adds
users and ask for precision. an extra target, the open menu or the
If you want users to slowly and precisely sub menu.
access something, like a close button , Non active pixels on screen edges
reduce the target size. In most cases always minimize the infinite size effect. One pixel
make targets big enough. more or one less increase or decrease target
size and mouse movement precision.
Hick-Hyman law in interaction design
choices
Decision time increases with number of choices and few complex
choices leads to more rapid performance.
1 Complexity requires more time to decide
vs
Which printer controls is faster to use?
2 Less complexity versus more simplicity
Writing “SOS”
S O S · · · — — — · · ·
Qwerty keyboard Morse code
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.
Quick facts
Complexity requires more time to decide.
Less complexity versus more simplicity.
In depth
The Hick-Hyman law states that humans simple choices. For example, a Morse code
increase their decision time with the number operator has only 2 signals to use but is
of choices. Because humans process info at slower than a typist with 26 choices. This
a constant rate, if that info increases, the happens because the typist press less keys
processing time will increase accordingly. to convey the same message as the Morse
Nevertheless, some few complex choices code operator.
leads to more rapid performance than more
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.
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).
Quick facts
Web content won’t be read First top info is the most important.
throughly. Start sentences with significant words.
In depth
Don’t assume users will read everything you will decide to stay on the webpage based on
write. They rather scan content to see if the what they first read.
webpage has what they’re looking for. Because the bottom part of the webpage
Don’t waste the top part of your website is scanned in a vertical thin shape, consider
with irrelevant content. It’s likely that users having words that carry useful content at
the beginning of each block.
Feedback, feedforward and affordances
Feedback tells the user what’s happening. Feedforward tells the
FFa consequence of an action before doing it. Affordance is a natural
way of telling the users how something works.
Feedback: tells users what’s the device status.
Feedforward: the label tells users what’s the

outcome of the action.
Affordance: the icon and the color

animation unconsciously instructs
users how to unlock the phone.
Main image is the main screen of a locked iPhone.
Quick facts
Giving the control to the user.
Intuitive and easy to use.
Self-explanatory and no training.
In depth
When telling the user what he’s doing or an application. This requires no explanation
what’s the system status, we’re giving him or training. Affordances tell the user how to
control. When in control people decide interact with something while feedforward
better and feel happier. explains what are the outcomes of that
By using feedforward and affordances interaction. This results in something
we can implicitly say to the user how to use considered intuitive and easy to use.
5
Interface
Design
63
Bevel-like effect in backgrounds
For making a visual separation of content, the bevel effect
provides a very effective and pleasant solution.
Bevel-effect with two 1-pixel lines
Bevel-effect with one 1-pixel line
Quick facts
Visually separated content using: two 1-pixel lines & one 1-pixel line.
In depth
A bevel is observed in real life objects with a slight contrast of each section color
as in tables corners and they provide a and you get a pleasant visual distinction.
visual meaning that there is a change in the Two 1-pixel lines
object dimensions. These sequential We have two sections transitioning color
differences in light are interpreted as visual from darker to lighter or vice-versa. Both 1-
depth clues. Darker parts are interpreted as pixel lines will be in-between the two
inside and lighter parts as outside. sections and each just has to be stronger
The bevel-like effect can be created with than the section there're closer two. If the
simple 1-pixel lines that provide a natural top section is darker, the near 1-pixel line
affordance for making sections visually must be darker. Then the following 1-pixel
independent from each other. line must be lighter than the bottom
One 1-pixel line lighter section.
Having two sections with contrasting
colors, just draw in between a 1-pixel line
64 interface design
Small multiples in data visualization
Small multiples are a type of visualization where small images are
used to allow a quick comparison of data.
At a glance you can see the weather forecast, by only looking at the small weather icons.
Quick facts
Comparison of data.
Highlight big picture over detailed analysis.
Quick to extract differences.
In depth
Small multiples are a set of small images making it fast to look and extract
with related content, that allows us to see at differences.
a glance differences among data. The structure and visual organization of
Small multiples allows to quickly small multiples allows us to get a big picture
compare related data, because content is over the content, instead of immersing in
within the eye span and visually depicted, the details.
interface design 65
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.
Can you find the red file?
Quick facts
Color has less features to decode. Use it sparingly.
In depth
On contrary to text and images, color glare, etc. By using too many colors we
doesn't require our brain much effort to decrease the speed of our visual search.
decode it. It has less visual elements to Finally, careful with color blindness, so
decode such as lines, shapes, shadows, etc. don’t rely completely on color hues only.
This simplicity makes color a powerful Use contrast as well.
attribute for making visual search fast.
Color may look different depending on
the environment, with lighting, shadows,
66 interface design
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.”
Find the blue square:
Serial search Parallel
We must search item by item. The element “pops up”.
Quick facts
Serial versus parallel visual search. User expectancies determine search
Visual “pop up” effect. starting point.
In depth
When searching for an object with a feature An object “pops up” faster, if we’re
that stands out from the rest, we’re looking at the right spot. Users expectancies
performing a parallel search. for a search starting point are driven by
This psychological effect is called “pop up.” their previous experience or training.
Otherwise, we’re performing a serial search You can use color, size, shape, texture,
looking one by one. grouping, location, display density, etc, for
making an object “pop up.”
interface design 67
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.
M. C. Escher, Relativity, 1953
Quick facts
3D World seen as 2D images.
Illusions.
Depth cues.
In depth
Our eyes represent the world in the retina world and provide natural affordances for
with a two-dimensional image for each eye. some user interface elements.
It is at the back of the eye that the Since we rely on cues for interpreting a
tridimensional world is seen as 2D images. tridimensional world, our eyes can be easily
Our visual system uses a set of visual misguided. The other senses like touch,
cues existent in the world to convey depth. helps us deceive these illusions.
We can use these cues to mimic the real
continues
68 interface design
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 we see that 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 69
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.
continues
70 interface design
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.
Left eye & right 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.
All images except the Shading are from (sensation_and_perception_web_activities, 2006).
end
interface design 71
Gestalt principles
A set of visual rules that act as a reference for our visual system
when interpreting images.
Quick facts
Individual elements.
Provides better visual experiences.
Visual principles.
In depth
The visual world is composed of individual They identified a set of visual principles
elements (lines, textures, etc.) that by that our visual system use as a reference to
themselves are meaningfulness. A German interpret the world. These principles help us
school of psychology (Gestaltism) concluded understand how humans visually perceive
that our visual system interpret these things and we can use them to communicate
elements as whole, emerging a greater more effectively.
meaning in what we see.
continues
72 interface design
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
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 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 73
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.
end
74 interface design
Combination of color brightness levels
light By mixing the brightness levels of a single color instead of using
vs different color hues we can obtain imagery that is more appealing
dark and easy to read.
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.
Quick facts
Visually appealing. Less dimensions to interpret.
In depth
Combining the same color on an object the lighter versus darker color combination
by only mixing the brightness levels, also gives a good contrast. Since we’re using
can create more easy to look and more the same color hue the workload for our
appealing imagery. visual system is also reduced.
This happens because we’re mixing less
colors, therefore less mental load effort and
interface design 75
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 display
design
2
.....
13 principles
Quick facts
1 - Perceptual principles. 3 - Attention principles.
2 - Mental model principles. 4 - Memory principles.
In depth
A display is any human-made artifact that relate to how we perceive the world, how
carries information to be consumed by we think about it and how we store
another human. It can be a printout, a information in memory. Considering these
computer screen, factories gauges, phone aspects, 13 principles are explained to help
visors, etc. designers designing better displays.
The human machine is complex and
works under several limitations. These can
continues
76 interface design
1 - Perceptual principles
Principles related to the way we perceive the world.
Legibility
Contrast, font size, illumination, visual angles, noise. font size and color
also
influences contrast
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, Can you select the Aqua blue?
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.
⇧ + ⌘ + Z
For example on a Mac computer, across the system there is a Standard Mac OS Undo shortcut.
shortcut used for undo and one application, Microsoft Office for Mac,
uses another shortcut not confirming Mac users' expectations.
⌘ + Y
Mac Office Undo shortcut.
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 77
Discriminability. Similarity causes confusion: use
discriminable elements.
Similar appearing signals are likely to be confused either at
the time they are perceived or after some time if the signals Altitude vs Attitude
must be retained in working memory before action is taken.
In aviation Altitude and attitude are very different things, however
they are very easy to confuse.
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 part

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.
continues
78 interface design
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 8:30 ENTRY
processing that information. GOOD WORK
EMANUEL FERNANDES
Presenting visual and auditory information concurrently, helps
workers to easily understand the outcome of scanning their working
card through the monitoring device. +
Job entry monitoring
continues
interface design 79
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 written predefined set of
tasks, instead of having to remember them. check lists
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 visual different
applications are consistent.
end
80 interface design
Dynamic displays: analog vs digital
12:21 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.
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
Quick facts
Analog: Easy to estimate at a glance,
Digital:
Easy to compare,
Accuracy & range.
Rate of changes and direction.
In depth
Analog displays are better to quickly rates of change and direction of the variable
estimate values as the visual depiction being measured.
allows a faster cognitive processing On the other hand, digital are more
compared to numbers in digital. Also this accurate and allow a wider range of values
makes it easier to compare values in analog to be displayed.
representation. One is not better than the other, we
Analog displays show the part within the should make a choice according to the
whole, resulting in a better perception of the design situation and after analyzing the
advantages and disadvantages of both.
interface design 81
Configural displays
“(...) multiple displays of single variables can be arrayed (...), so
configural
that certain properties (...) will emerge from the combination of
values on the individual variables.” In Human Factors Engineering.
Invoices view
Payment evolution across several months
As minhas facturas:
...
150
125
100
75 ! 50,00 ! 55,00 ! 65,00 ! 75,00 ! 74,32 ! 110,00
50 !
25 Julho Agosto Setembro Outubro Novembro Dezembro
0 2008
Dezembro 2008 Pagamento: Ainda por pagar.
Multibanco Débito na Conta Payshop

Tipo Serviço Preço
Referência: 312 121 212

Serviço 1 32,00
Serviço 2 43,00 Código: 21212
Serviço 3 35,00
Valor: 110,00
! 110,00
SMS Enviar referências do Multibanco por SMS
Detalhes Imprimir PDF
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.
Quick facts
New info arise from visual single variables. Visual arrangements of info.
In depth
Sometimes the visual depiction of several visual dimension that we can use to show
variables, can inadvertently result into another type of information.
another variable of interest. For example, The way we arrange elements in space
a square has the dimensions of height and can be used to enforce and show certain
width which we can visually observe. information through visual relations.
From this arrangement, the area of the
square (height times width) gives another
82 interface design
6
Text
85
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.
Quick facts
Reading from the computer is tiring. Time is key.
The web is about clicking. People have specific goals.
In depth
Nowadays the computer screen technology With specific goals looking for
isn’t as good as paper, so most users don’t information, users must filter all the
like to read long paragraphs on the web. information the web gives, so they first
Users are in control on the web, so if make a quick scan to see if the webpage
they’re not satisfied they'll just go elsewhere. is worth, then they might read.
People’s life is fast and if they don’t Finally, ask yourself as a web user,
find what they want they will move on, would you fully read your own paragraphs?
with no hesitation.
86 text
Easy and effective instructions
1 To understand instructions we must rely on our working memory
2 to hold that information in our mind. Taking this limitation into
3 account we can design more effective instructions.
vs
1 - Select the object. Select the desired object and afterwards

2 - Drag it to the Trash. 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.
Long-term memory is for knowledge stored forever. The working memory short
information to be processed in the moment.
vs
Long-term memory and working memory is respectively for knowledge stored forever
and short information to be processed in the moment.
Quick facts
Short & simple steps.
Positive sentences.
Consistency between order of text and actions.
In depth
Our working memory can hold in average 3 or Under degraded sensory conditions,
7 chunks of information. To perform an action negative words like No, Don’t, Do not, can be
while still holding the instruction in memory, ignored and the opposite of the action can be
it must be simple and short. performed. This extra chunk of information
Instructions should be in the same needs to be hold in memory and we may
order of the actions so that users forget it when acquiring the rest of the
are not confused. instruction. As a guideline always write
positive instructions.
text 87
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.
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 if he or she wants to erase the disk. By using the
correct label as with the button “Erase”, users know better the possible outcome of an action without
really reading the message. This behavior can prevent many undesired actions to be performed.
Quick facts
Clear. Avoid errors.
In depth
Always label buttons using a verb that like to be the best outcome. Using a clear
tells the action achieved with the button. It verb, the user does not needs to read the
is clearer for the user what action will be entire message to know to a certain degree
performed. what will be the result of that action.
You can also prevent the user to With some exceptions always label
mistakenly perform an action. For example, buttons with action verbs like, Save, Print,
when displaying an alert to the user, he or Send Email, Erase, Delete, Search, instead of
she may not read the entire description and a simple OK.
will perform an action based on what looks
88 text
Usage of ALL CAPS and SMALL CAPS
The glyphs of a typeface in all caps or small caps are better used
aaA when you want to get attention with words or small sentences
and when you have limited space available.
abcdefihjklmn size ABCDEFIJKLMN

abcdefihjklmn stroke variation ABCDEFIJKLMN
ALL CAPS examples:
LOREM IPSUM DOLOR SIT

AMET, CONSECTETUR DO,
SED DO EIUSMOD TEMPOR.
Filling every pixel available. Getting attention. More difficult to read!
Quick facts
ALL CAPS glyphs: have less variation in strokes than lowercase.
are taller than lowercase, Small caps can be used to emphasize.
In depth
All caps glyphs are taller than their Glyphs in all caps have less variation in
lowercase counterparts. This means that the stroke, making it more difficult to
same letters within the same size will look differentiate between each glyph. Therefore
bigger in all caps than lowercase. Therefore it is unsuitable for long sentences.
it is suitable for single words to catch If you want to emphasize something in a
attention, like WARNING or DANGER. They are sentence without making it stand too much,
also suitable when you’re limited in space. you can use small caps. These glyphs have
the same x-height as the lowercase.
text 89
7
Color
91
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:
Human eye
Light wavelengths Lens Retina
Inward: colors appear to move backward (blue).
Outward: colors appear to move forward (red).
Just right: colors appear to be stopped (green).
Quick facts
Eye lens focusing. Outward: forward movement (red).
Inward: backward movement (blue). Just right: no movement (green).
In depth
We have a lens in our eye that refracts and Wavelengths in the blue spectrum are
focus light rays to obtain a sharp clear focused in front of the retina and vice-versa
image in the retina. However different for red. As a consequence blues appear to
light wavelengths are focused move backward and reds forward, while
differently by the lens. green focus perfectly inducing no movement.
92 color
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
Mainly two types: Red-green & Blue-Yellow.
readable? readable? readable?
color blinded people may see
readable? readable? readable?
Color blindness example.
Quick facts
Lost of one photopigment. Distinguish colors with brightness.
In depth
Some people lack one of the photopigments There are mainly two types of color
used in eye’s retina to transmit color. blindness: Red-green & Blue-Yellow.
When this happens, people can only Since about 8% of men and 0.4% of
perceive differences in some colors by women are color defective, in your design
the brightness levels. avoid using saturated colors with the same
brightness levels.
color 93
Saturated colors and visual fatigue
Excessive usage of simultaneous saturated colors may cause
visual fatigue.
Eye lens refocusing:
Human eye
The worst case for simultaneous saturated colors is blue vs red.
Quick facts
Simultaneous saturated colors. Eye lens refocusing.
In depth
We have a lens in our eye that refracts and As the lens keeps adjusting with
focus light rays to obtain a sharp clear different wavelengths, the muscles may get
image in the retina. However different tired, causing visual fatigue and inducing an
light wavelengths are focused differently by overwhelming sensation. The worst cases
the lens. are the visible electromagnetic spectrum
opposites, blue and red.
continues
94 color
Avoid simultaneous saturated colors
Recommendations
Use gradients
A very subtle gradient can change dramatically the negative
effects of highly saturated colors, while still maintaining a bright
and intense color.
I am very saturated! I have a gradient instead!
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.
end
color 95
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.
older people may see
Because older people loose some color sensitivity they need brighter, saturated colors.
Quick facts
Wavelengths absorption.
Lens yellowing.
Sensitivity decrease.
In depth
The eye lens absorbs more wavelengths in Because of this aging effect, older
the blue blue part of the visible people need brighter, saturated colors.
electromagnetic spectrum than any other
color. Also, as we get older, our lens yellows
decreasing our sensitivity to colors in the
blue spectrum.
96 color
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:
2% “blue” on periphery of fovea.
Fovea
Cones 32% “green” on middle of fovea.
Retina
64% “red” on middle of fovea.
Eye lens focusing:
Human eye
look carefully... look carefully...
Quick facts
Few blue photopigments. Eye lens focusing.
In depth
We have a lens in our eye that refracts and difficult to get a sharp image. When using
focus light rays to obtain a sharp clear pure blue, some small objects may look
image in the retina. However different light blurry. Also, we only have 2% of blue
wavelengths are focused differently by the photopigments available in the periphery of
lens. our fovea in the eye’s retina.
Short wavelengths (blue) never focus in
the retina, therefore blue objects make it
continues
color 97
Avoid pure blue for small text & objects
Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed consectetur adipisicing elit, sed
do eiusmod tempor incididunt do eiusmod tempor incididunt
ut labore et dolore magna ut labore et dolore magna
tempor aliqua. tempor aliqua.
Recommendations
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.
end
98 color
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
Human eye
Light wavelengths Lens Retina Perfect focus in retina.
Quick facts
Perfect eye lens focusing.
In depth
We have a lens in our eye that refracts and Because light wavelengths in the green
focus light rays to obtain a sharp clear spectrum focus perfectly in the retina, these
image in the retina. However different create the sharpest images and, therefore
light wavelengths are focused differently are the easiest colors to perceive.
by the lens.
color 99
High contrast variations and visual fatigue
Because the eye lens also refocus with brightness differences,
sharp contrast in brightness of things being continually viewed,
may cause visual fatigue.
ter
v s brigh
darker
Human eye
Lens refocusing
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.
Quick facts
Eye lens refocusing.
In depth
We have a lens in our eye that refracts and Brightness is also a factor that
focus light rays to obtain a sharp clear contributes to the lens refocusing.
image in the retina. However different If the lens has to continuously refocus
light wavelengths are focused differently for bright and dark objects, it may induce
by the lens. visual fatigue in our eyes.
100 color
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.
Around fovea: we are red-green blind.
>> Reds and greens tends to look yellow...

Human eye
Fovea
>> Violets and blues tends to look blue...
Retina
Center of fovea: our eyes work with trichromatic color.
Extreme periphery: we are insensible to color.
Quick facts
Color neurons distribution.
Visual periphery insensitive to color.
Colors merging.
In depth
In our eyes we have light receptors As we move outside the fovea our color
(neurons) that receive light and transform it sensitivity decreases. Reds and greens tend
into neural activity. Some neurons called to look yellow. Violets and blues tend to look
cones are sensitive to color and located in blue. In the extreme periphery of the retina
the middle of the retina, fovea. we are insensitive to color.
color 101
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 (black and white)
Light neurons peak sensitivity to light brightness
=
Light neurons peak response to light
Medium (green) + Long (red) wavelengths
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
Quick facts
Brightness derived from “Red” & “Green” neurons peak response.
In depth
Our brain interprets color from 3 primary green and red. These “red” and “green”
spectrum wavelengths, red, green and blue. neurons (called cones) have their peak
Then this trichromatic color flows to another responses at the middle of the spectrum,
process where our brain mixes these signals therefore the brightest colors are in the
to obtain 3 new color channels. middle.
One of these color channels carry
brightness information that is derived from
102 color
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.
y other color.
attention faster than an
Yellow gets people’s
Light neurons peak sensitivity to light brightness
American school buses are yellow.

Metro floor barriers are yellow.
Spectrum image from CambridgeinColour.com
Quick facts
Brightness derived from “Red” & “Green” neurons peak response.
In depth
Our brain interprets color from 3 primary green and red. These “red” and “green”
spectrum wavelengths, red, green and blue. neurons (called cones) have their peak
Then this trichromatic color flows to another response at the greenish-yellow color,
process where our brain mixes these signals therefore the brightest color is
to obtain 3 new color channels. greenish-yellow.
One of these color channels carry
brightness information that is derived from
color 103
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.
Chiwawa vs Chiwawa
Chiwawa
Eye lens accommodation
Human eye
Bad contrast makes harder for the eyes to focus (excess of accommodation) causing visual fatigue.
Accommodation is when our eye’ lens expands and contracts to focus light wavelengths in the retina.
Quick facts
Excess of lens accommodation.
In depth
Contrast is the difference in perceived better focus the light wavelengths in the
brightness of two objects. The sharper the eye retina to get a sharper image.
object stands out against its background, Bad contrast makes harder for the eyes
the quicker and better the lens to focus (excess of accommodation) causing
accommodation. visual fatigue.
Accommodation is the process by which
the eye lens expands and contracts to
continues
104 color
Color contrast
Always give enough contrast
Chiwawa Chiwawa
ENROLL IN PROGRAM ENROLL IN PROGRAM
HOME PAGE HOME PAGE
10 de Abril de 2009 10 de Abril de 2009
Recommendations
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.
red & green blue & yellow black & white
can you read me? can you read me? can you read me? can you read me?
continues
color 105
Color contrast
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.
Eye color brightness sensitivity Brighter colors: yellow, green, light blue.
Darker colors: blue, purple, red.
can you read me? can you read me?
can you read me? can you read me?
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 intense.
Lorem ipsum dolor sit amet, consectetur adipisicing.

Lorem ipsum dolor sit amet.
vs vs
Lorem ipsum dolor sit amet, consectetur adipisicing. Lorem ipsum dolor sit amet.
end
106 color
8
Motion
109
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.
Banners next to text?
Motion and contrast

are very effective to
warn the user!
periphery periphery
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.
Quick facts
Periphery eye neurons - rods. Rods - insensitive to light, therefore
Rods are sensitive to motion. sensitive to color contrast.
In depth
Inside our eye, the retina is responsible for trying to focus on something, animation in
transforming light energy into neural activity. the visual periphery can be very distracting.
The periphery of the retina is full of a certain These neurons are part of human
type of light receptors (rods) that are evolution, and became fundamental for our
insensitive to color and very sensitive to survival because we always had to detect
motion. Because they are insensitive to color danger quickly. For example, high-speed
they use color contrast instead for detecting cars or lions attacking you, depending on
changes in the environment. This is why when which age you are/were living.
110 motion
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.
Visual perceptual processor speed:

Fastest: 50 milliseconds
Average: 100 milliseconds
Slowest: 200 milliseconds
Quick facts
Average visual perceptual processor speed = 100[50~200] milliseconds.
Motion sensation = 1000/50 = 20 images per second.
In depth
By exploring the speed of our visual By passing 20 images per second, our
perceptual processor we can induce a brain will see one single stimulus as motion
sensation of motion in our brain. instead of 20 individual stimuli.
If our brain takes between 50 to 200 ms Motion video cameras usually take 24
to process a stimulus and transform it a frames per second, just to make sure motion
representation our mind understands, will be perceived at all times by all people.
something beneath that range will be
processed as a whole.
motion 111
9
Metaphors
113
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.
Grocery store image from Flickr user Chris Devers.
Quick facts
A web shopping cart must be: Immediately accessible,
Persistent, Items easy to add to cart,
Visible, Easy to check out.
In depth
When buying on a physical store you can A persistent cart means that items don’t
carry a shopping cart. While shopping, items disappear no matter where you navigate in
don’t disappear, they’re easy to pick and the online store. The cart and items should
you can choose without reading the be always visible and a click away, while
description. To check out, you just go the the user is shopping.
payment line. Adding items to cart and checking out
should also be one click away.
114 metaphors
Bibliography references
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 (using_color_effectively, 1990)

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)
118 category
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)
category 119
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)
120 category
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)
category 121
Bibliography
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)
Fitts’s law in interaction design
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)
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
category 123
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)
Name buttons with intended behavior
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)
Bevel-like effect in backgrounds
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)
Visual periphery colors: blue & yellow
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)
F-shaped pattern for reading web content
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)
124 category
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)
Web: users scan instead of reading
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)
Remember good memories, forget bad ones
Important of experiences: end & start
Gregg Berryman (1990). Notes on Graphic Design and Visual Communication. Crisp
Publications, Inc.
(notes_on_graphic_design_and_visual_communication, 1990)
Gestalt principles
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)
Green: easiest color for the eye
category 125
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)
Application responsiveness times
Jeremy Wolfe, Keith Kluender & Dennis Levi (2006). Sensation and Perception. Sinauer
Associates, Inc.
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 5 - The Perception of Color

spectrum
Color contrast 2 - The First Steps in Vision 40
Depth perception 6 - Space Perception and

Binocular Vision
Gestalt principles 4 - Perceiving and recognizing

objects
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
Visual area with sharp details is very small 3 - Spatial Vision Visual Angle
Change blindness: overlook fine differences 8 - Attention and The Flicker

Scene Perception Paradigm
Depth perception 6 - Space Perception

and Binocular Vision
Gestalt principles 4 - Perceiving and

recognizing objects
126 category
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)
Small multiples in data visualization
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)
Color movement
High contrast variations and visual fatigue
Brighter colors: middle of visible spectrum
Donald Norman (1988). The psychology of everyday things. New York: Basic Books
[Reprinted MIT Press, 1998].
(the_psychology_of_everyday_things, 1988)
Feedback, feedforward and affordances
Stuart Card, Thomas Moran & Allen Newell, (1983). The Psychology of Human-
Computer Interaction. Lawrence Erlbaum Associates, Inc.
(the_psychology_of_human-computer_interaction, 1983)
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 127
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)
Shopping cart metaphor on the web
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
Color blindness
Color contrast
Wikipedia (2009). Retrieved from Wikipedia, The Free Encyclopedia.

Website http://en.wikipedia.org
(article_name in Wikipedia, 2009)
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
128 category
Subject index
A Buttons (naming), 88
consistency (display), 80
Absolute judgment limits, 77 hick-hyman law, 58
Accommodation, 104 proximity (gestalt principles), 74
Acuity. See Visual acuity. shading (depth perception), 70
Aerial perspective, 69
Affordance, 60, 64, 68
Aging. See Older people.
C
All caps, 89 Cart. See Shopping cart.
Analog, 81 Change blindness, 17
Animation, 110, 111 Closure, 73
Attention, 23 Cognition, 21
decision-making, 25, 26 Cognitive bias, 22
display design principles, 79 Cognitive resources, 32—33.
multitasking, 30, 31 See also Mental resources.
Automaticity, 31 Cognitive tunneling, 27, 33.
See also Functional fixedness.
Color, 91
Color blindness, 66, 93
B Color brightness levels, 75
Banners, 110 Color channels, 102, 103
Bevel-like effect, 64 Color movement, 92
Blue, 97—98 Color search. See Visual search.
aging, 96 Color visual periphery.
color blindness, 93 See Visual periphery colors.
color movement, 92 Configural displays, 82
opponent colors, 105
Confirmation bias. See Decision-making.
saturated colors, 94
visual periphery colors, 101 Consistency, 80
Bottom-up processing, 16 Continuation, 74
Brain processing times. Contrast variations, 100
See Model human processor. Contrast, 104—106, 110
Brightness, 102, 103 bevel-like effect, 64
in blue, 98 change blindness, 17
in color blindness, 93 color brightness levels, 75
in color brightness levels, 75 contrast variations, 100
in contrast variations, 100 figure / ground (gestalt principles), 73
in contrast, 104—106 legibility (display), 77
Cool colors, 92
130
D
Data visualization, 65
Decision-making, 24, 25—29 G
Delay, 52.
Gaze, 18
Depth cues, 68, 69—71
Gestalt principles, 72, 73—74
Depth perception, 68, 69—71
Glyphs, 89
Desires, 16
Gradient, 95, 70. See also Shading.
Digital, 81
Green, 99
Discriminability. See Display.
color blindness, 93
Display design principles, 76, 77—80 color movement, 92
Dynamic displays, 81 brightness, 102—103
H
E
Haze. See Depth perception.
Electromagnetic spectrum, 102, 103, 106 Heuristics. See Decision-making.
Empathize, 13 Hick-Hyman law, 58
Equilibrium. See Gestalt.
Expectancies (user) 16
remember, 49 I, J
signal detection theory, 34
top-down processing, 77 Illusions. See Depth perception.
visual search, 67 Information access cost. See Display.
Experiences, 44, 45 Instructions, 87
Eye lens focusing. See Lens focusing. Interaction design, 51
Interface design, 63
Internet. See Web.
F Interposition. See Depth perception.
F-shaped pattern for reading, 59 Isomorphic correspondence.
Feedback, 60, 52 See Gestalt principles.
Feedforward, 60
Figure / ground, 73
Fitts’s law, 57
K
Font, 89 Knowledge in the world, 80
Forgetting 46.
Framing bias. See Decision-making.
Functional fixedness, 22
131
L Metaphors, 113
Model human processor, 54—56
Labels. See Buttons (naming). Motion parallax, 70
Learn, 46, 47—49 Motion, 109, 110, 111.
Legibility, 77 See also Motion parallax.
Lens focusing Moving part, 78
blue, 97 Multiple resource theory, 30—31
color movement, 92
Multitasking, 30, 31—33
green, 99
Lens refocusing
contrast variations, 100
saturated colors, 94 N
Lens yellowing, 96 Naming. See Buttons (naming).
Linear perspective, 69 Notification, 17
Long-term Memory, 43
decision-making, 26, 28.
experiences, 45
forgetting, 46
O
knowledge in the world, 80 Occlusion, 69
memories, 44, Older people, 96, 98
model human processor, 54—56
Order, 73
remembering, 49
working memory, 42 Overconfidence, 27
Lowercase, 89 Opponent colors, 105
Luminosity, 106. See also Luminous color.
Luminous color, 103
P, Q
“Pop up” effect (visual), 67
M Parallel visual search, 67
Memories, 44 perception, 15
Memorize, 46, 47—49 Periphery vision colors.
See Visual periphery colors.
Memory, 41, 46.
See also Long-term memory Periphery vision, 110.
and Working memory. Pictorial realism. See Display.
guidelines, 47—48 Predictive aiding. See Display.
memories, 44 Primacy effect
remember, 49 in decision-making, 26
Mental model in experiences, 45
display design principles, 78 Progress bars. See Buttons (naming).
memory, 48
Proximity compatibility, 79
user, 13
Proximity (gestalt), 74
Mental resources, 23, 30, 31, 34
132
R Stimulus, 16, 52, 111
Sunk cost bias, 29
Rates. See Times. Symmetry (gestalt), 73
Reading (web content), 53, 59, 86
Reading rates, 53
Recall. See Remember. T
Recency effect
decision-making, 27, 28 Task management, 30
experiences, 45 Text, 85
forgetting, 46 Texture gradient, 70
memory, 47 Time management. See Multitasking.
Redundancy gain. See Display. Time-sharing, 30
Remember, 47—49 Times
Response bias. See Signal detection theory. in animation, 111
Response sensitivity. in brain processing times, 54—56
See Signal detection theory. in reading rates, 53
Responsiveness (application), 52 in responsiveness (application), 52
Typeface, 89
Top-down processing, 16. See also Display.
S Tridimensionality. See Depth perception.
Saccades (eye movements), 53

Saturated colors, 93—96 U
Scanning. See Reading.
Search. See Visual search. Unresponsiveness (application), 52
Senses, 16, 32 Usability studies. See also User.
Serial visual search, 67 User testing. See also User.
Service Design. User, 13. See also Functional fixedness.
See also Experiences and Memories.
Shading, 70
Shopping cart, 114 V
Signal detection theory, 34 Visual acuity, 18
improve response bias, 35
Visual angle, 18
improve response sensitivity, 36—37
Visual fatigue
Similarity. See Gestalt.
contrast variations, 100
Situation awareness, 38. See also Attention. contrast, 104
Small caps, 89 saturated colors, 94—95
Small multiples, 65 Visual field, 18
Spectrum, 102, 103, 106 Visual periphery colors, 101
Stereopsis, 71 Visual periphery. See Periphery vision.
Still images, 111 Visual search, 66, 67
133
W X
W3C, 106 X-height, 89
Wait cursor, 52
Warm colors, 92
Web
Y, Z
F-shaped pattern for reading, 59 Yellow (luminosity), 103
scanning, 86 brightness, 102—103, 106
shopping cart metaphor, 114 color blindness, 93
Working memory, 42 older people, 96
change blindness, 17 opponent colors, 105
decision-making, 24—29 visual periphery colors, 101
discriminability (display), 78
display design principles, 80
instructions, 87 *
instructions, 87 3D, 68, 69—71
model human processor, 54—56 7[5~9]. See Working memory.
Writing, 87
134
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

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

HCI Quick Guide

Enviado por

Direitos autorais:

Formatos disponíveis

HCI Quick Guide

(Human-Computer Interaction Quick Guide)

Image from Flickr user Will Lion.

Document version Revision date Author (s) Changes

1.0 22 set 2009 Emanuel Fernandes Initial document.

"Although many people think things just happen,

first and foremost The user is not like me 13

Chapter 4 Interaction Design 51

Chapter 5 Interface Design 63

Chapter 8 Motion 109

Chapter 9 Metaphors 113

first and foremost The user is not like me 13

Chapter 5 Interface Design 63

Chapter 8 Motion 109

Chapter 9 Metaphors 113

Bibliography references 118

Subject index 130

first and foremost 13

Emanuel Hernandez Emamhernandez@company.com 96-308-4572.

Can you notice the differences between each other?

Don’t ask for new features. Experts overlook important details.

Salience, Effort & Value.

Attention to a limited number of cues

Overweighting of unreliable cues

Inattention to later cues

2 - Hypotheses generation and selection

Generation of a limited number of hypotheses

3 - Plan generation and choices

Retrieve a small number of actions

Availability heuristic for actions

hypotheses in a positive way is more attractive than in a vs

Do you prefer exam grades stated as 80% correct or 20% wrong?

Image from Flickr user _TomTom_.

Resources demand, Task management.

According to Multiple Resource Theory we have different pools of

Image from Flickr user ranil

Image from Flickr user Neal Gillis.

Minimize similar tasks

Listening while reading, like on presentations.

Image from Flickr user suchitra prints.

Minimize resource demands

Reading and listening to music without lyrics. vs

Automation of certain tasks

A constant change of tasks costs time and cognitive resources.

Image from Flickr user Elsie esq.

Is there a dangerous object in this bag?

Introduce “false signals”

Image from Flickr user billaday.

Image from Flickr user scribex.

Give a visual or audible template of the signal

Image from Flickr user fishbowl_fish.

Image from Flickr user slightly-less-random.

Redundant representations of the signal

Image from Flickr user Thomas Hawk.

Provide knowledge of results

Image from Flickr user photobunny.

Amplifying the signal more than the noise

Image from Flickr user psd.

Situation awareness when driving

Can you perceive the cars ahead of you?

Looking through the mirror: Will the

What’s the car current speed?

Are you driving within the lane borders?

Which is better to remember?

δ decay time; μ capacity; τ processing time; κ type of information;