HCI Quick Guide

HCI Quick Guide(Human-Computer Interaction Quick Guide)

Image from Flickr user Will Lion.

HCI Quick GuideHuman-Computer Interaction Quick Guide

Document version Revision date Author (s) Changes

1.0 22 set 2009 Emanuel Fernandes Initial document.

Author

[email protected]

"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

HCI Quick GuideHuman-Computer Interaction

Brief Contents

first and foremost The user is not like me 13

Chapter 1 Perception 15

Chapter 2 Cognition 21

Chapter 3 Memory 41

Chapter 4 Interaction Design 51

Chapter 5 Interface Design 63

Chapter 6 Text 85

Chapter 7 Color 91

Chapter 8 Motion 109

Chapter 9 Metaphors 113

Contents

first and foremost The user is not like me 13

Chapter 1 Perception 1516 Perception: top down vs bottom up

17 Change blindness: overlook fine differences

18 Visual area with sharp details is very small

Chapter 2 Cognition 2122 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 4142 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 5152 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 6364 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 8586 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 9192 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 109110 Periphery vision is sensitive to motion

111 Animation from still images

Chapter 9 Metaphors 113114 Shopping cart metaphor on the web

Bibliography references 118

Bibliography 123

Subject index 130

contents 9

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 theHuman-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 :)

Preface

12

firstandforemost

The user is not like meLook, listen, probe, and empathize with your users. Don't assume much about what the user knows and is capable of.

You know too much.

Empathize with your users.Users have their own mental model.

Quick facts

In depthAs a designer you know too much, so be careful with assumptions you make about your users. Observe your users behavior, listen to them, probe and understand what is their mental model.

Put yourself in the user's mind (empathize) and try to design for that mental model.

listen

look probe

empathize

What the world really is, and what the user thinks the world is (mental model).

You should:

first and foremost 13

1 15

Perception

Perception: top down vs bottom upWe perceive the world using the combination of our physical senses and our previous mental knowledge.

Perception of the world: Experience & Stimulus World.

Quick facts

In depthPerceiving the world has two components that interplay with each other. We use our senses to perceive the world and our knowledge complements it. Physical and mental are brought together in what is called top-down and bottom-up processing.

Top-down processing involves using our expectancies and desires to perceive

something, while the bottom-up processing involves using our senses. It is the combination of both that we use most of the times to perceive the world around us.

The example below shows a design where knowledge helps a poor stimulus (font too small). It’s easier to guess a name than a meaningless email and phone number.

16 perception

Experience

Knowledge

(Expectancies

and Desires)

The senses

Stimulus World

Top-Down

Processing

Perception

Bottom-Up

Processing

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).

Emanuel Hernandez [email protected] 96-308-4572.is a better design than is

Emanuel Hernandez [email protected] 96-308-4572.

Example:

Change blindness: overlook fine differencesPeople are bad at noticing subtle changes in subsequent images. This is a psychological effect called “change blindness.”

Working memory limitations.

Subtle changes unnoticed.Make important changes noticeable.

Quick facts

perception 17

In depthHumans have a very limited working memory, therefore it is almost impossible to retain all details of an image we see. When a similar image is presented to a user without significant changes, it is very difficult for us to remember enough details and spot the changes.

When designing a notification to your users, make sure the changes have enough contrast to be noticed.

Can you notice the differences between each other?

One screenshot is before logging in and the other is after logging in.

Visual area with sharp details is very smallOur eyes cannot see details within the entire area we’re looking at. We are capable of capturing details only if we fixate our gaze on a small area within the entire visual field.

Visual acuity is smaller than people think. Flower image: (sensation_and_perception_web_activities, 2006).

Sharp details only seen at fovea.

Best acuity visual angle (VA) = 2º.

VA = arctangent(object size/distance).

Visual area with sharp details is small.

Quick facts

In depthWhen our eyes interpret the world, there

is only a small part that we can see with great acuity, or details. In the back of our eyes, there is a small area in the center of the retina, called fovea, that is responsible for decoding these details.

The neurons that live in the fovea can achieve the highest degree of detail with a size of 2° of visual angle. Visual angle measures the size of objects in the retina.

Example: for a visual angle of 2° and looking at a screen away 50 cm, we have an area of high acuity in our fovea of 1,7 cm.1,7 = tangent(2)*50.

This is the same area as this square on the right.

Do not expect users to look at a graphical user interface and understand all the details, unless the fixate their gaze on each part.

Fovea

18 perception

⇒

2 21

Cognition

Functional fixedness“Functional fixedness is a cognitive bias that limits a person to using an object only in the way it is traditionally used.” in Wikipedia

People’s world: fixed structure.

Don’t ask for new features.

Avoid hypothetical situations with users.

Experts overlook important details.

Quick facts

In depthPeople understand their world within a fixed structure. This functional fixedness lead people to recognize objects only for their obvious functions, creating a mental block that prevents using tools in a new way to solve problems.

This has the following implications in the design of systems: don’t ask users to tell you about new features, don’t ask them to think about hypothetical situations, don’t expect every user to be able to invent new ways of working with your tools and expect experts to overlook details.

22 cognition

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).

Attention limitations“A wealth of information creates a poverty of attention and we need to allocate it efficiently.” by Herbert Simon (Economics Nobel Prize winner, 1978)

Limited attention resources depends on:

Salience,

Expectancy,

Effort & Value.

Quick facts

cognition 23

In depthAttention is the process on which our brain allocates our scarce mental resources for performing a task. The way we move our attention in the world depends on salience, effort, expectancy and value of information.

Salience is how “inviting” will be something to us, that will capture our attention. This relates to our senses.For example, titles in a book get our attention first then the prose.

Effort describes the amount of work required to attend something. For example, fatigued drivers may not look back when

changing lanes, because there’s much “effort to give.”

Expectancy is where we will expect to find things. For example, if we usually read from top to bottom and left to right, it is very likely that when reading a book we will look first to the top-left part.

Value is how worth is to spend our attention on something. For example, when crossing the street, the value of looking to traffic lights is enough to spend our attention on it?

If you were walking at night in Times Square, New York, where would your attention be driven to?Image from Flickr user heymynameispaul.

continues ⇒

Decision-making heuristics and biasesThe process of decision making is simplified by the usage of heuristics that in some cases may bias our decisions.

“Good enough” decision. Rules of thumb.

Quick facts

In depthWhen making a decision humans usually don’t consider all aspects and weight all pros and cons of each option. The goal is to make a “good enough” decision in the shortest time available with the fewest resources.

As a result we use a set of heuristics, rules of thumb, to simplify the decision making process. Sometimes these rules may bias our decisions to a certain direction. While these rules help us deciding fast, sometimes they can lead to poor decisions.

24 cognition

Which path to choose? This is a common question when trying to make a decision.Image from Flickr user nerovivo.

Decision-making heuristics and biases1 - Cue reception and integrationWe receive information — cues — from the world through our senses and hold it in our working memory (memory that holds temporary information). This is to perceive the problem. What?

Attention to a limited number of cues

Due to our working memory restrictions we can only use a small set of cues to get an overall picture of the situation.Yes, you cannot handle much information at once.

Overweighting of unreliable cues

To simplify the integration of all cues there is the temptation to consider all cues as reliable, even if some are not.For example, on a trial some witnesses may lie, others may tell the true, some may have faulty memories, but nevertheless, all testimonies are usually treated as equally valid and reliable.

Cue salience

Most salient cues get more attention even if they are not the most important.For example, information at the top of the display, the loudest alarm, the largest display will be given more attention.

continues ⇒cognition 25

Selected cueAvailable cue

Decision-making heuristics and biasesCue 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 anchor our hypotheses on this initial evidence.This reveals the familiar phenomenon that first impressions are lasting.

Inattention to later cues

Cues occurring later or that change over time are often ignored due to focused attention.For example in a medical diagnosis, symptoms that are presented first are more likely to be brought into working memory and stay dominant.

2 - Hypotheses generation and selectionUsing the previous cues we generate hypotheses combining cues in the working memory with knowledge we have in our long-term memory. This is to understand the problem. Why?

Generation of a limited number of hypotheses

The 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.

26 cognitioncontinues ⇒

Selected hypotheses

Available hypotheses

Time

Time

Decision-making heuristics and biasesAvailability 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 thereforea 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 visionof the subject. This is related to functional fixedness, where people cannot see the obvious.


Time

Decision-making heuristics and biasesConfirmation 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 choicesFrom the previous hypotheses we select some courses of action and decide which to follow. How to handle it?

Retrieve a small number of actions

Due to our limitations in the working memory, we can only consider a small number of actions at once.

Availability heuristic for actions

Actions are more easy to retrieve from the long-term memory depending on factors of recency, frequency and how strong they are associated with the situation.For example, in high risk professions like aviation, emergency lists are used to ensure that all actions are available and considered, even if they’re not frequent to happen.


Time

Available action Selected action

Decision-making heuristics and biasesAvailability of possible outcomes

When considering the outcomes of the different actions, we won’t use any statistical information. We rather consider the availability of instances of an action in memory.For example, a construction worker may never wear a helmet because he never witnessed an accident, so he may think that the likelihood of happening something similar to him is lower than it really is.

Framing bias

The way a situation is framed can influence decisions. Framing a hypotheses in a positive way is more attractive than in a negatively way. A phenomenon called sunk cost bias infers that people incur greater risks when faced with losses. As a suggestion you should frame decisions in terms of gains to counteract this tendency.Value of meat which is 10% fat vs meat which is 90% lean? (people were found to pay 8,2 cents per pound more for 90 percent lean meat)

Do you prefer exam grades stated as 80% correct or 20% wrong? (students 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.

endcognition 29

Real probability of outcome

Estimated probability of outcome

Lorem ipsum dolor sit?

Ipsum dolor sit lorem?

vs

Multitasking and time-sharingGood performance when doing more than one thing at the same time, depends on many factors. Those factors are described.

Multitasking depends on:

Resources demand,

Structure of tasks & Similarity of content,

Task management.

Quick facts

In depthMultitasking is how we manage to domore than one task at the same time.This depends on resource demand,structure of tasks, similarity of contentand task management.

Resource demand is how much we make use of a certain mental resource. For example rehearsing “96 308 45 72” requires a different demand from rehearsing “0 1 2 9 1 9 6 3 0 8 4 5 7 2.” Some tasks may require less resources because they are automated, like signing a letter, entering passwords, etc.

Structure of the tasks is when tasks are structurally similar that they will use the same resources. For example, speaking while rehearsing a phone number. Both tasks

involve dealing with articulated coded content. See Multiple Resource Theory.

Similarity of content is when information is very similar between different tasks. For example counting items while listening someone speaking about numbers.

Task management is related to how we allocate resources to each task. Some tasks may become prominent and we give more attention to them. We can also switch tasks very quickly appearing we’re doing themin parallel.

Only by considering the previous factors, we can determine if certain tasks can be performed at the same time with a certain degree of success.


Image from Flickr user _TomTom_.


Multitasking and time-sharingMultitasking guidelines

Training can improve allocation to attention

You can train to allocate your attention efficiently and perform parallel tasks with better performance.Experts know what to look at.Automaticity of tasks require less resource demand.

Image from Flickr user ranil

Recommendations

According to Multiple Resource Theory we have different pools of resources that can be tapped simultaneously. Non-competing tasks can be carried simultaneously. This means that different tasks can be processed in parallel if they require different resources.

You can use this theory to measure if some tasks do consume the same resources and have an idea of the mental workload.

Action

Processing

Perception

Visual

Tactual

Olfactory

Linguistic

SymbolicSubconscious

Reasoning

Stages

Auditory

Inpu

t

Use multiple senses

By using multiple senses you’re requiring different resourcesthat can better work in parallel.Add sound or touch to vision, for example a GPS navigator gives worded instructions besides a graphical representation.

Image from Flickr user Neal Gillis.

Minimize similar tasks

Tasks that require similar cognitive resources should be avoided to be done in parallel because they reduce performance.Rehearsing while speaking.

Listening 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.

Giving information in world instead of asking users to remember.

Automation of certain tasks

If possible automate some tasks and release cognitiveresources for other tasks.Spell checking.


Multitasking and time-sharing

+“Turn left, then turn right.”

Photography - the art or practice of taking and processing photographs.

vs

endcognition 33

Multitasking and time-sharingMinimize 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.

Signal detection theory Theory that describes how we respond the question:“Did you perceive [or detect] that?”

Did you perceive (or detect) that? Sensitivity & Response bias

Quick facts

In depthThe perception of the world is a complex process. Depends on our senses, expectancies, previous knowledge, restrictions in mental resources, etc. How can we improve the decision making results when we’re trying to detect something?

To the question “Did you perceive [or detect] that?” two answers can arise: Yes or No, and four results can arise: correct yes, incorrect yes, correct no, incorrect no. These four results can be summarized in two

characteristics of the process of detection: sensitivity and response bias.

Sensitivity is how good we are at discriminating between signal and noise. Sensitivity is related to the “quality” ofour senses and strength of signalsrelative to noise.

Response bias is our tendency to respond more times yes our no. Bias is related to expectancies and cost / benefits of the answer.

34 cognition

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.

Is there a dangerous object in this bag?

signal

noise

continues ⇒


Signal detection theoryImprove response bias

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 thelikelihood 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.

Recommendations

For example, on an airport baggage screener, the cost of missing a weapon or bomb, is huge, so we want to the security personnel to be more biased to answer yes. This is, is better to have a false alarm, than letting a dangerous luggage to pass by. The following recommendations could be used to increase the personnel attention when screening luggage.

Training

Training and instructing personnel continuously.As criminals find new ways to overcome standard security procedures, personnel should be continuously be updated on this subject.

Image from Flickr user billaday.

Rest breaks

The same personnel making the detections should always have frequent breaks.For example, 10 minutes intervals every hour, with 8 hour shifts.

Image from Flickr user scribex.

Give a visual or audible template of the signal

To provide a representation of a similar dangerous object.In the screening monitor the system could try to map potential object contours to objects so that the operator could more easily determine if that object is really harmful or not.

Image from Flickr user fishbowl_fish.


Signal detection theory

Recommendations

Improve response sensitivity

With the same example of an airport luggage screening, by improving response sensitivity we want security personnel to be experts into detecting dangerous luggage while not being influenced by eventual noise, this is, luggage that looks dangerous but it is not.

endcognition 37

Signal detection theorySlow down the rate of signal presentationDecrease 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.

Situation awareness“Knowing what is going on around you” by Mica Endsley

Levels of situation awareness: Perception & Comprehension & Projection.

Quick facts

In depthSituation awareness — “The perception of the elements in the environment within a volume of time and space, the comprehension of their meaning and the projection of their status in the near future.” Mica Endsley.

We can use situation awareness as a measure for designing dynamic systems when failure to attend and respond to

important changes, has a high negative cost. For example, driving, piloting an airplane, nuclear plants, etc, where deathly accidents can happen.

Perception: perceiving the world in a correct and timely manner. Comprehension: how to combine, interpret, store and retain information. Projection: forecasting future events.

38 cognition

When driving you’re constantly perceiving the environment around you, comprehending and

projecting any changes in the near future. All these questions ask about the drivers’ current

situation awareness. Image from Flickr user Kyle May.

Are you sleepy?

Situation awareness when driving

Can you perceive the cars ahead of you?

Looking through the mirror: Will the

car behind me try to surpass me?

What’s the car current speed?

Are you driving within the lane borders?

341

Memory

Working memory limitationsWorking memory is used to temporarily store chunks of information used by our brain to think or act. We can’t work with much information at once in our memory without additional aids.

Working memory capacity (chunks of info):

3[2,5 ~ 4,1] for pure capacity.

7[5 ~ 9] augmented by long-term memory.

Quick facts

In depthHumans have big restrictions in the amount of information they can deal with at the same time.

Our working memory, used for temporarily store information, is limited in average to 3 chunks of unrelated information and 7 chunks of information that is already in our long term-memory.

For example, it is much easier to remember a phone number as 96 308 45 72, than 9 6 3 0 8 4 5 7 2.

Another example: from the letters R P S C I T V C N M V, we can remember only a few, while with same letters but recognizable chunks (stored in long-term memory) we can remember many more, such as TV channels RTP SIC TVI CNN MTV TV.

42 memory

Which is better to remember?

9 6 3 0 8 4 5 7 2

or

96 308 45 72

Working memory capacity augmented with previous knowledge (TV channels): until 9 chunks.

Pure working memory capacity: until 4 chunks.

Long-term memory retrieval issuesWe have big restrictions when trying to retrieve content from our long-term memory. Memory retrieval is highly influenced by cues associated with content we want to access.

Memory organized by associations and categories.

Retrieval cues associated to content.

Quick facts

memory 43

In depthWe store information in our long-term memory using associations and categories linking cues to content.

When having the same cue pointing to many content chunks, the more difficultit is to retrieve. The more cues we havefor a content chunk, the most likelyit is to remember.

Naming a file “John” and if we know 3 Johns, then it’s almost impossible toidentify him. The single available cue, the name, points to 3 different chunks,the people. With an image preview, we’re adding one more cue that will help us retrieving the content.

1 2

On step 1, there are 3 associations to John so it is difficult to retrieve the correct info. On step 2, with the thumbnail there is a distinctive association in memory and it is easier to retrieve the correct John.

Which John is this? Of course, the John that I play basketball with.

John

The user finds a file named John and tries to remember all friends named John.

John

Remember good memories, forget bad onesWe tend to remember only the good aspects of an experience as time passes by.

a Fade away faster than b: Emotions vs cognitions,Details vs higher-level constructs,Negative events vs positive events.

Quick facts

In depthOur life is made of experiences that build memories. Recalling those memories is not as accurate as we may think.

Knowledge in our long-term memory tends to fade away, meaning that it is less accessible to be recalled.

We tend to remember better good memories and forget bad experiences. This

is due the fact that our brain fades away faster emotions, details and negative events. This means that we may remember that we did something, but not remember the details and most important, the bad emotions associated.

44 memory

Good memory

For example you may remember better the last time you ride a roller coaster than you would

remind seeing a snake (of course, if you don’t like snakes).

Bad memory

snake

roller coaster

Important of experiences: end & startDue to the primacy and recency effects we tend to remember better the ending and start of an experience.

Memory psychological effect: Primacy & Recency.

Quick facts

memory 45

In depthThe recency effect tell us that humans are better at retrieving knowledge from their long-term memory as they are recent, or fresh in memory.

For whatever reason, information processed early is often most influential and we tend to access it easier. This is called the primacy effect.

We should design considering memory, building great start experiences and even better endings.

As a tip for making presentations, convey your message on the few first and last slides.

On a presentation, which slides do you think that are

more likely to be Remember by your audience?

To forget and how to improve memoryIn theory our memory has an infinite capacity, but as obvious we forget. Forgetting is more related to difficulties to retrieve content rather than content being erased from our memory.

Memory retrieval is difficult due to:

Weak content strength,

Weaker content associations,

Interference with associations.

Quick facts

In depthContent in our long-term memory is organized with associations. The way these associations are organized can determine the successful retrieval of the content.

Content becomes “weaker” due to low frequency and low recency of usage.

When content has weak or fewer associations with other content, with time if we don’ use them they become “weaker.”

Many different content is linked with the same or similar associations. When searching for content these similarities can cause interference and we may only retrieve the unwanted content.

For example, when trying to retrieve the password for our phone we may retrieve the ATM password instead. The concept — password — has many similar associations.

46 memory

Nowadays we use so many passwords, making it very difficult to retrieve them from memory.

ATMPIN EmailIMComputer

Home Banking Phone

What’s the password

for my home banking?

continues ⇒memory 47

To forget and how to improve memoryMemory guidelines

Regular use of information

Encourage regular use of information to increase frequency and recency.If you want to remind yourself about something everyday or occasionally nothing best than using a wall poster to keep that information fresh and recent in your mind.

Image from Flickr user neon.mamacita.

Active verbalization or 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.

Recommendations

The following recommendations guide you to overcome the memory retrieval limitations that humans have.

Design information to be remembered

Information to be more easily Remember, must be meaningful, concrete rather than abstract, organized in distinctive concepts, no jargon and easy to be guessed by other cues.Using full words instead of abbreviations, using wording familiar by the people that will use it, etc.

Standardize

Use the same terms, images, etc, in different contexts.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, by telling people what is happening.Explaining in instructional manuals the reason for a particular action and what that action is.

Giving visibility of system status, this is, to always give information to the user about what a system is doing currently, or what is the current state.

48 memoryend

To forget and how to improve memory

[email protected]

vs

[email protected]

Lock and unlock your

phone by using a PIN.

vs

Prevent unwanted

access to your phone,

by locking and

unlocking your phone

using a PIN.

Design information to rememberBy understanding how our long-term memory works, we can design information to last longer. As time goes by, we will have greater chances to remember that information.

Verbalization or reproduction of information.

Information able to be guessed.

Meaningful.

Concrete.

Distinctive concepts.

Well-organized.

Quick facts

In depthContent in our long-term memory is organized with associations. The way these associations are organized can determine the successful retrieval of the content.

When verbalizing or reproducing content we’re increasing the likelihood that the information will be Remember.

Besides human senses (e.g.: vision) we also perceive the world with information from our own expectancies and previous knowledge. With this processing of information we may guess otherrelated content.

Information should be meaningful and concrete for the audience it is intended.

Avoid using abstract words, technical jargon or unknown words as it will be more difficult to create associations in memory.

Important concepts should be distinctive enough from other content to avoid interference with associations when retrieving the same content.

Organize information into chunks so that you reduce the amount of associations connecting to the same content. For example, dividing content using categories, you make it easier to memorize as people will have to make more associations to the same content.

ipsumlorem ame

dolorsit

memory 49

4 51

Interaction Design

Application responsiveness timesUpon 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?

Human stimulus perception time = 100 milliseconds

0.1 seconds = immediate response,

1 second = limit for feeling of control,

10 seconds = unresponsiveness detected.

Quick facts

In depthHumans take on average 100 [50 ~ 200] milliseconds to perceive a stimulus. Less than this, there is the risk that the user won’t perceive the effect of the action.

On the technology side, if we for example have screens refreshing at a rate of 50 HZ, it means that the image on the

screen changes every 20 milliseconds (1/50), meaning that a fastest response won’t be noticed by users.

Examples: According to Apple Human Interface Guidelines, the spinning wait cursor is shown within 2 seconds after an application becomes unresponsive.

52 interaction design

0,1 1 10Time Seconds

instantaneously

some delay unresponsive

The user feels the Application like:

Reading ratesReading 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.

These rates are approximations and you need to take that into account.

Use it as a baseline for your design.

Eye movements (saccades).

Amount of words read at each saccade.Cognitive processing.

Quick facts

interaction design 53

In depthWhen reading we make several eye movements (saccades) for each block of content we read. These saccades can take 230 [70 ~ 700] milliseconds.

Then we must calculate how many words or letters we can read with each saccade. This can be 4 to 5 letters or more depending on our reading speed.

At last, the type of content will influence the time we take to understand it. Also we can read for memorization, learning, comprehension and skimming. All these types of reading require a different cognitive processing.

Type of reading Words per minute

Memorization < 100

Learning 100-200

Comprehension 200-400

Skimming 400-700

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.

Saccades - eye movements

Human brain processing timesThe 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.

Brain is composed of: Perceptual & Cognitive & Motor subsystems.

Quick facts

In depthEach subsystem has a processor, and it is connected to memory. We have a long-term memory and working memory. The long-term memory keeps knowledge in our head for a long time and content retrieval is influenced by cues associated. Short-term memory is where temporarily content is hold to be processed by our brain. It gets information either from perceptual system or the long-term memory.

Perceptual - receive external stimuliand transforms into a representation the brain can understand, this is, transforms light energy, touch, smell, etc, intoelectric neural impulses.

Cognitive - Gives meaning to the perceptual inputs.

Motor - Tells any part of the body to perform an action.

54 interaction designcontinues ⇒

Model human processor diagram from (the_psychology_of_human-computer_interaction, 1983)

Human brain processing times

continues ⇒interaction design 55

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;

Human brain processing times

56 interaction designend

Eyes Movement

230 [70 ~ 700]

To use these values you must specify which parts of the brain will be in place for a specific task and then use the times mentioned in the respective table.

Example: What delay time should we setup a TV remote control to execute a task so that the user feels that the remote is responding to his actions?

Answer: This problem requires the user to perceive a stimulus. 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

Minimum

Average

Maximum

100 [50 ~ 200] 70 [25 ~ 170] 70 [30 ~100]

50 25 30

100 70 70

200 170 100

Table with different processing times from the three brain subsystems.

Working memory Visual Image Auditory Image

Capacity

Decay time

Type of info

3 [2.5 ~ 4.1] chunks 17 [7 ~ 17] letters * 5 [4.4 ~ 6.2] letters*

7 [5 ~ 226] sec 200 [70 ~ 1000] ms 1500 [900 ~ 3500] ms

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%.

Working memory

Capacity augmented with long-term memory

Decay time for1 chunk

Decay time for 3 chunks

7 [5 ~ 9] chunks 73 [73 ~ 226] seconds

7 [5 ~ 34] seconds

Table with memory abilities in special situations.

Fitts’s law in interaction designThe difficulty of selecting and pointing to a target is dependable on the target's size and distance. By using the Fitts's law you can speed up or slow down the user interaction.

Screen edges - infinite target size.

Four screen corners - fastest.

More targets - slower selection.

Every pixel counts.

Quick facts


In depthScreen edges have infinite size because you can throw the mouse on it without surpassing it.

Corners are fast because they don’t have neighbors to compete with. Small targets, like an OK button , slow down users and ask for precision.

If you want users to slowly and precisely access something, like a close button , reduce the target size. In most cases always make targets big enough.

When moving the mouse, it is difficult for humans to do it straight (our hand is supported by the elbow!) For example, multi-level roll overs can be really difficult to use because many accidental cursor movements will happen. This behavior adds an extra target, the open menu or thesub menu.

Non active pixels on screen edges minimize the infinite size effect. One pixel more or one less increase or decrease target size and mouse movement precision.

vs

Small “Stop Copying” button requires more precision.

Screen corners - fast access.Rollover menus increase number of targets for selection.

T - time to target.

a, b - constants.

D - distance to target.

W - size of the target.

Fitts’s law

Hick-Hyman law in interaction designDecision time increases with number of choices and few complex choices leads to more rapid performance.

Complexity requires more time to decide.

Less complexity versus more simplicity.

Quick facts

In depthThe Hick-Hyman law states that humans increase their decision time with the number of choices. Because humans process info at a constant rate, if that info increases, the processing time will increase accordingly.

Nevertheless, some few complex choices leads to more rapid performance than more

simple choices. For example, a Morse code operator has only 2 signals to use but is slower than a typist with 26 choices. This happens because the typist press less keys to convey the same message as the Morse code operator.

S O S · · · — — — · · ·Qwerty keyboard Morse code

Writing “SOS”

Which printer controls is faster to use?

Complexity requires more time to decide

Less complexity versus more simplicity

1

2

On case 1, the more buttons you add to a printer, this complexity will result into a slower decision making. On case 2, even if Morse code is simpler we use less keystrokes with the qwerty keyboard.

vs


choices

F-shaped pattern for reading web contentHas been found in eye tracking visualizations that users when reading (scanning) a webpage, they follow an F-shaped pattern.

Web content won’t be read throughly.

First top info is the most important.

Start sentences with significant words.

Quick facts


In depthDon’t assume users will read everything you write. They rather scan content to see if the webpage has what they’re looking for.

Don’t waste the top part of your website with irrelevant content. It’s likely that users

will decide to stay on the webpage based on what they first read.

Because the bottom part of the webpage is scanned in a vertical thin shape, consider having words that carry useful content at the beginning of each block.

An eye-tracking usability study revealed the F-shaped pattern for reading content on the Internet.Image from (f-shaped_pattern_for_reading_web_content, 2006).

Feedback, feedforward and affordancesFeedback tells the user what’s happening. Feedforward tells the consequence of an action before doing it. Affordance is a natural way of telling the users how something works.

Giving the control to the user.

Self-explanatory and no training.Intuitive and easy to use.

Quick facts

In depthWhen telling the user what he’s doing or what’s the system status, we’re giving him control. When in control people decide better and feel happier.

By using feedforward and affordances we can implicitly say to the user how to use

an application. This requires no explanation or training. Affordances tell the user how to interact with something while feedforward explains what are the outcomes of that interaction. This results in something considered intuitive and easy to use.

Affordance: the icon and the color

animation unconsciously instructs

users how to unlock the phone.

Feedback: tells users what’s the device status.

Feedforward: the label tells users what’s the

outcome of the action.


Main image is the main screen of a locked iPhone.

FFa

5 63

Interface Design

Bevel-like effect in backgroundsFor making a visual separation of content, the bevel effect provides a very effective and pleasant solution.

Visually separated content using: two 1-pixel lines & one 1-pixel line.

Quick facts

In depthA bevel is observed in real life objects

as in tables corners and they provide a visual meaning that there is a change in the object dimensions. These sequential differences in light are interpreted as visual depth clues. Darker parts are interpreted as inside and lighter parts as outside.

The bevel-like effect can be created with simple 1-pixel lines that provide a natural affordance for making sections visually independent from each other.One 1-pixel line

Having two sections with contrasting colors, just draw in between a 1-pixel line

with a slight contrast of each section color and you get a pleasant visual distinction.Two 1-pixel lines

We have two sections transitioning color from darker to lighter or vice-versa. Both 1-pixel lines will be in-between the two sections and each just has to be stronger than the section there're closer two. If the top section is darker, the near 1-pixel line must be darker. Then the following 1-pixel line must be lighter than the bottomlighter section.

64 interface design

Bevel-effect with one 1-pixel line

Bevel-effect with two 1-pixel lines

Small multiples in data visualizationSmall multiples are a type of visualization where small images are used to allow a quick comparison of data.

Comparison of data.

Quick to extract differences.Highlight big picture over detailed analysis.

Quick facts

interface design 65

In depthSmall multiples are a set of small images with related content, that allows us to see at a glance differences among data.

Small multiples allows to quickly compare related data, because content is within the eye span and visually depicted,

making it fast to look and extract differences.

The structure and visual organization of small multiples allows us to get a big picture over the content, instead of immersing in the details.

At a glance you can see the weather forecast, by only looking at the small weather icons.

Color is powerful in searchOne of the best ways to discriminate an object among others is by using color. If used sparingly and correctly can be really powerful to increase visual search speed.

Color has less features to decode. Use it sparingly.

Quick facts

In depthOn contrary to text and images, color doesn't require our brain much effort to decode it. It has less visual elements to decode such as lines, shapes, shadows, etc.

This simplicity makes color a powerful attribute for making visual search fast.

Color may look different depending on the environment, with lighting, shadows,

glare, etc. By using too many colors we decrease the speed of our visual search. Finally, careful with color blindness, so don’t rely completely on color hues only. Use contrast as well.

66 interface design

Can you find the red file?

Fast visual searchWhen performing a visual search for an object if that object has a single discriminating feature (color, size, shape, texture, etc.) the search will be really fast as the object automatically “pops up.”

Serial versus parallel visual search.

Visual “pop up” effect.

User expectancies determine search starting point.

Quick facts

interface design 67

In depthWhen searching for an object with a feature that stands out from the rest, we’re performing a parallel search.This psychological effect is called “pop up.” Otherwise, we’re performing a serial search looking one by one.

An object “pops up” faster, if we’re looking at the right spot. Users expectancies for a search starting point are driven by their previous experience or training.

You can use color, size, shape, texture, grouping, location, display density, etc, for making an object “pop up.”

Serial search Parallel

We must search item by item. The element “pops up”.

Find the blue square:

Depth perceptionOur eyes use some depth cues to interpret tridimensionality in the world and we can use them to design more natural graphical user interfaces.

3D World seen as 2D images.

Depth cues.Illusions.

Quick facts

In depthOur eyes represent the world in the retina with a two-dimensional image for each eye. It is at the back of the eye that the tridimensional world is seen as 2D images.

Our visual system uses a set of visual cues existent in the world to convey depth. We can use these cues to mimic the real

world and provide natural affordances for some user interface elements.

Since we rely on cues for interpreting a tridimensional world, our eyes can be easily misguided. The other senses like touch, helps us deceive these illusions.

68 interface designcontinues ⇒

M. C. Escher, Relativity, 1953

Depth perceptionOcclusion or interposition

An occluded object looks to be farther away than thefront 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 butbigger 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 andless 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 perceptionTexture 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 continuouslysmaller as they approach the orange wall, giving the impressionof 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.


Depth perceptionStereopsis

Each eye sees a different image from the world. This binocular disparity in the retina, gives us some depth cues. When combining these images, our visual system uses the differences among them for inferring depth information.The example on the right shows the different images we see in each eye.

Illusions

Any application that only relies on visual control is not completely feasible due to these limitations.The triangle on the right is an impossible physical representation, but our eyes interpret it as being and looking real.

endinterface design 71

Left eye & right eye

All images except the Shading are from (sensation_and_perception_web_activities, 2006).

Gestalt principlesA set of visual rules that act as a reference for our visual system when interpreting images.

Individual elements.

Visual principles.Provides better visual experiences.

Quick facts

In depthThe visual world is composed of individual elements (lines, textures, etc.) that by themselves are meaningfulness. A German school of psychology (Gestaltism) concluded that our visual system interpret these elements as whole, emerging a greater meaning in what we see.

They identified a set of visual principles that our visual system use as a reference to interpret the world. These principles help us understand how humans visually perceive things and we can use them to communicate more effectively.


Gestalt PrinciplesFigure / 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 :)


Gestalt PrinciplesProximity

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 fillgaps in what looks unfinished objects. In this case,objects that look like they continue in space our eyeswill try to follow that missing gap and give a sensationof 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.

74 interface designend

Combination of color brightness levelsBy mixing the brightness levels of a single color instead of using different color hues we can obtain imagery that is more appealing and easy to read.

Visually appealing. Less dimensions to interpret.

Quick facts

interface design 75

In depthCombining the same color on an objectby only mixing the brightness levels,can create more easy to look and more appealing imagery.

This happens because we’re mixing less colors, therefore less mental load effort and

the lighter versus darker color combination also gives a good contrast. Since we’re using the same color hue the workload for our visual system is also reduced.

Example: light blue vs dark blue

By using the same color with opposite brightness levels, at a glance everything

seems uncluttered and content is easy to read with enough contrast.

lightvs

dark

Display design principlesDisplays should be designed according to humans’ perception and cognition. By understanding humans’ limitations we can design a more usable and pleasant display.

1 - Perceptual principles.

2 - Mental model principles.

3 - Attention principles.

4 - Memory principles.

Quick facts

In depthA display is any human-made artifact that carries information to be consumed by another human. It can be a printout, a computer screen, factories gauges, phone visors, etc.

The human machine is complex and works under several limitations. These can

relate to how we perceive the world, how we think about it and how we store information in memory. Considering these aspects, 13 principles are explained to help designers designing better displays.


1

2

.....

13

display

design

principles

Display design principles1 - Perceptual principlesPrinciples related to the way we perceive the world.

Legibility

Contrast, font size, illumination, visual angles, noise.

Avoid absolute judgment limits

Don’t ask users to judge the level of a represented variable using a single sensory variable, like color, size or loudness, which contains more than five to seven possible levels. This is an invitation to errors of judgment.

Top-down processing

Expectancies, desires and experience influences how people will interact with a system. Confirm people expectations.For example on a Mac computer, across the system there is a shortcut used for undo and one application, Microsoft Office for Mac, uses another shortcut not confirming Mac users' expectations.

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.


Standard Mac OS Undo shortcut.

Mac Office Undo shortcut.

⌘ Z⇧ + +

⌘ Y+

Can you select the Aqua blue?

font size and color

also

influences contrast

Altitude vs Attitude

Display design principlesDiscriminability. 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 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 principlesPeople 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.


Display design principles3 - Attention principlesHumans 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 processing that information.Presenting visual and auditory information concurrently, helps workers to easily understand the outcome of scanning their working card through the monitoring device.

interface design 79 continues ⇒

8:30 ENTRYGOOD WORK

EMANUEL FERNANDES

+

Job entry monitoring

Display design principles4 - Memory principlesSince 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.

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.

80 interface designend

check lists

Dynamic displays: analog vs digitalDynamic displays depicts a variable that continuously changes quantity. Analog displays are better for detecting changes and making comparisons while digital are better for accurate readings.

Analog: Easy to estimate at a glance, Easy to compare, Rate of changes and direction.

Digital:Accuracy & range.

Quick facts

interface design 81

In depthAnalog displays are better to quickly estimate values as the visual depiction allows a faster cognitive processing compared to numbers in digital. Also this makes it easier to compare values in analog representation.

Analog displays show the part within the whole, resulting in a better perception of the

rates of change and direction of the variable being measured.

On the other hand, digital are more accurate and allow a wider range of values to be displayed.

One is not better than the other, we should make a choice according to the design situation and after analyzing the advantages and disadvantages of both.

Rate of changes and direction

Easy to estimate at a glance

Which is faster, at a glance, to

check if lunch hour is nearby? analog

Accuracy and range

Easy to compare:

Which clocks have similar time ranges? Which is faster to detect these similarities? analog

12:21

Configural displays“(...) multiple displays of single variables can be arrayed (...), so that certain properties (...) will emerge from the combination of values on the individual variables.” In Human Factors Engineering.

New info arise from visual single variables. Visual arrangements of info.

Quick facts

In depthSometimes the visual depiction of several variables, can inadvertently result into another variable of interest. For example,a square has the dimensions of height and width which we can visually observe.From this arrangement, the area of the square (height times width) gives another

visual dimension that we can use to show another type of information.

The way we arrange elements in space can be used to enforce and show certain information through visual relations.

82 interface design

By combining the individual values of each monthly invoice, a background line is used to show the evolution of monthly payments across several months. This is an example of a configural display.

Payment evolution across several monthsInvoices view

As minhas facturas:

! 65,00

...

150

125

100

75

50

25

0 2008Setembro Outubro Novembro Dezembro

! 75,00 ! 74,32 ! 110,00

!

! 55,00! 50,00

AgostoJulho

Dezembro 2008

Tipo Serviço Preço

Serviço 1 32,00

Serviço 2 43,00

Serviço 3 35,00

Pagamento: Ainda por pagar.

! 110,00

Detalhes

Enviar referências do Multibanco por SMS

Referência:

Multibanco Débito na Conta Payshop

Código:

Valor:

312 121 212

21212

110,00

Imprimir PDF

SMS

configural

6 85

Text

Web: users scan instead of readingOn the web users usually scan webpages until they find what they’re looking for. Don’t assume users will read your entire webpage in the order you expect.

Reading from the computer is tiring.

The web is about clicking.

Time is key.

People have specific goals.

Quick facts

In depthNowadays the computer screen technology isn’t as good as paper, so most users don’t like to read long paragraphs on the web.

Users are in control on the web, so if they’re not satisfied they'll just go elsewhere.

People’s life is fast and if they don’tfind what they want they will move on, with no hesitation.

With specific goals looking for information, users must filter all the information the web gives, so they firstmake a quick scan to see if the webpageis worth, then they might read.

Finally, ask yourself as a web user,would you fully read your own paragraphs?

86 text

Easy and effective instructionsTo understand instructions we must rely on our working memory to hold that information in our mind. Taking this limitation into account we can design more effective instructions.

Short & simple steps.

Consistency between order of text and actions.Positive sentences.

Quick facts

In depthOur working memory can hold in average 3 or 7 chunks of information. To perform an action while still holding the instruction in memory, it must be simple and short.

Instructions should be in the sameorder of the actions so that usersare not confused.

Under degraded sensory conditions, negative words like No, Don’t, Do not, can be ignored and the opposite of the action can be performed. This extra chunk of information needs to be hold in memory and we may forget it when acquiring the rest of the instruction. As a guideline always write positive instructions.

Long-term memory is for knowledge stored forever. The working memory short

information to be processed in the moment.

Long-term memory and working memory is respectively for knowledge stored forever

and short information to be processed in the moment.

vs

vs

1 - Select the object.

2 - Drag it to the Trash.

Select the desired object and afterwards

drag it to the Trash to delete it.

Do A. Then do X and Y. Before doing X and Y, do A.

If light is red, the engine must be shutdown. Don’t start the engine if light is red.

text 87

123

Name buttons with intended behaviorYou should always name a button with its related action, to make clear to users the output of that action.

Clear. Avoid errors.

Quick facts

In depthAlways label buttons using a verb that

tells the action achieved with the button. It is clearer for the user what action will be performed.

You can also prevent the user to mistakenly perform an action. For example, when displaying an alert to the user, he or she may not read the entire description and will perform an action based on what looks

like to be the best outcome. Using a clear verb, the user does not needs to read the entire message to know to a certain degree what will be the result of that action.

With some exceptions always label buttons with action verbs like, Save, Print, Send Email, Erase, Delete, Search, instead of a simple OK.

88 text

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.

Usage of ALL CAPS and SMALL CAPSThe glyphs of a typeface in all caps or small caps are better used when you want to get attention with words or small sentences and when you have limited space available.

ALL CAPS glyphs:

are taller than lowercase,

have less variation in strokes than lowercase.

Small caps can be used to emphasize.

Quick facts

In depthAll caps glyphs are taller than their lowercase counterparts. This means that the same letters within the same size will look bigger in all caps than lowercase. Therefore it is suitable for single words to catch attention, like WARNING or DANGER. They are also suitable when you’re limited in space.

Glyphs in all caps have less variation in stroke, making it more difficult to differentiate between each glyph. Therefore it is unsuitable for long sentences.

If you want to emphasize something in a sentence without making it stand too much, you can use small caps. These glyphs have the same x-height as the lowercase.

abcdefihjklmn ABCDEFIJKLMNsize

abcdefihjklmn ABCDEFIJKLMNstroke variation

LOREM IPSUM DOLOR SIT

AMET, CONSECTETUR DO,

SED DO EIUSMOD TEMPOR.

Filling every pixel available. Getting attention. More difficult to read!

ALL CAPS examples:

text 89

aaA

7 91

Color

Color movementColors can be characterized by a movement sensation they induce in our eyes. Warm colors like red appear to move outward. Cool colors like blue appear to move inward.

Eye lens focusing.

Inward: backward movement (blue).

Outward: forward movement (red).

Just right: no movement (green).

Quick facts

In depthWe have a lens in our eye that refracts and focus light rays to obtain a sharp clearimage in the retina. However differentlight wavelengths are focuseddifferently by the lens.

Wavelengths in the blue spectrum are focused in front of the retina and vice-versa for red. As a consequence blues appear to move backward and reds forward, while green focus perfectly inducing no movement.

92 color

Inward: colors appear to move backward (blue).

Outward: colors appear to move forward (red).

Just right: colors appear to be stopped (green).

RetinaLight wavelengths Lens

Human eye

Eye lens focusing:

Color blindness“Color blindness, a color vision deficiency, is the inability to perceive differences between some of the colors that others can distinguish.” In Wikipedia

Lost of one photopigment. Distinguish colors with brightness.Quick facts

color 93

In depthSome people lack one of the photopigments used in eye’s retina to transmit color.When this happens, people can only perceive differences in some colors bythe brightness levels.

There are mainly two types of color blindness: Red-green & Blue-Yellow.

Since about 8% of men and 0.4% of women are color defective, in your design avoid using saturated colors with the same brightness levels.

Mainly two types: Red-green & Blue-Yellow.

readable? readable? readable?

readable? readable? readable?

color blinded people may see

Color blindness example.

Saturated colors and visual fatigueExcessive usage of simultaneous saturated colors may cause visual fatigue.

Simultaneous saturated colors. Eye lens refocusing.

Quick facts

In depthWe have a lens in our eye that refracts and focus light rays to obtain a sharp clear image in the retina. However differentlight wavelengths are focused differently by the lens.

As the lens keeps adjusting with different wavelengths, the muscles may get tired, causing visual fatigue and inducing an overwhelming sensation. The worst cases are the visible electromagnetic spectrum opposites, blue and red.

94 color

The worst case for simultaneous saturated colors is blue vs red.


Human eye

Eye lens refocusing:

continues ⇒

endcolor 95

Saturated colors and visual fatigueAvoid simultaneous saturated colors

Use gradients

A very subtle gradient can change dramatically the negative effects of highly saturated colors, while still maintaining a bright and intense color.

Desaturate your colors

When you want to use several different colors you can choose to desaturate some of the colors while maintaining one saturated. It all depends on the effect you want to produce. The best advice is to try over and over and see what works better, but always be aware of the dangers of mixing highly saturated colors.

Image from Flickr user shianghan27.

Recommendations

I am very saturated! I have a gradient instead!

Aging and sensitivity to blueAs people get older they suffer the loss of sensitivity to colors in the blue part of the visible electromagnetic spectrum.

Wavelengths absorption.

Sensitivity decrease.Lens yellowing.

Quick facts

In depthThe eye lens absorbs more wavelengths in the blue blue part of the visible electromagnetic spectrum than any other color. Also, as we get older, our lens yellows decreasing our sensitivity to colors in the blue spectrum.

Because of this aging effect, older people need brighter, saturated colors.

96 color

older people may see

Because older people loose some color sensitivity they need brighter, saturated colors.

Constraints of pure blue colorIt is difficult to obtain a sharp image in retina with pure blue color. Therefore, we should avoid using pure blue with small objects, text and edges.

Few blue photopigments. Eye lens focusing.

Quick facts

color 97

In depthWe have a lens in our eye that refracts and focus light rays to obtain a sharp clear image in the retina. However different light wavelengths are focused differently by the lens.

Short wavelengths (blue) never focus in the retina, therefore blue objects make it

difficult to get a sharp image. When using pure blue, some small objects may look blurry. Also, we only have 2% of blue photopigments available in the periphery of our fovea in the eye’s retina.

Retina

Fovea

Cones ⇒

2% “blue” on periphery of fovea.

32% “green” on middle of fovea.

64% “red” on middle of fovea.

Few bluephotopigments:


Human eye

Eye lens focusing:

look carefully...look carefully...

continues ⇒

Use brightness and saturation levels of blue

For text and small objects consider using a slight darker blue. Control the brightness and saturation levels to obtain a less saturated and darker color.

Older people need brighter colors

If your audience is older, than you should consider using brighter colors in your design.

Image from Flickr user SundeepGoel.

98 colorend

Constraints of pure blue color

Recommendations

Avoid pure blue for small text & objectsLorem ipsum dolor sit amet,

consectetur adipisicing elit, sed

do eiusmod tempor incididunt

ut labore et dolore magna

tempor aliqua.

Lorem ipsum dolor sit amet,

consectetur adipisicing elit, sed

do eiusmod tempor incididunt

ut labore et dolore magna

tempor aliqua.

Green: easiest color for the eyeWavelengths 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.

Quick facts

color 99

In depthWe have a lens in our eye that refracts and focus light rays to obtain a sharp clear image in the retina. However differentlight wavelengths are focused differentlyby the lens.

Because light wavelengths in the green spectrum focus perfectly in the retina, these create the sharpest images and, therefore are the easiest colors to perceive.


Human eye

Perfect eye lens focusing

Perfect focus in retina.

High contrast variations and visual fatigueBecause the eye lens also refocus with brightness differences, sharp contrast in brightness of things being continually viewed, may cause visual fatigue.

Eye lens refocusing.

Quick facts

In depthWe have a lens in our eye that refracts and focus light rays to obtain a sharp clear image in the retina. However differentlight wavelengths are focused differentlyby the lens.

Brightness is also a factor that contributes to the lens refocusing.

If the lens has to continuously refocusfor bright and dark objects, it may inducevisual fatigue in our eyes.

100 color

Human eyeLens refocusing

darker vs brighter

When driving in a sunny day in the forest we have to deal with alternated dark trees shadows and the bright environment. This constant change in brightness leads to a constant eye lens refocusing, leading

to a potential visual fatigue. Car image from Flickr user masontrullinger.

Visual periphery colors: blue & yellowYellow and blue are the best colors to use in the visual periphery. In this area these are the colors we are most sensitive to.

Color neurons distribution.

Colors merging.Visual periphery insensitive to color.

Quick facts

color 101

In depthIn our eyes we have light receptors (neurons) that receive light and transform it into neural activity. Some neurons called cones are sensitive to color and located in the middle of the retina, fovea.

As we move outside the fovea our color sensitivity decreases. Reds and greens tend to look yellow. Violets and blues tend to look blue. In the extreme periphery of the retina we are insensitive to color.

Around fovea: we are red-green blind.

>> Reds and greens tends to look yellow...

>> Violets and blues tends to look blue...

Retina

Fovea

Center of fovea: our eyes work with trichromatic color.

Extreme periphery: we are insensible to color.

Human eye

Brighter colors: middle of visible spectrumThe brighter colors our eyes perceive are found in the middle of the visible electromagnetic spectrum. These are the yellow, green-yellow and orange-yellow colors.

Brightness derived from “Red” & “Green” neurons peak response.

Quick facts

In depthOur brain interprets color from 3 primary spectrum wavelengths, red, green and blue. Then this trichromatic color flows to another process where our brain mixes these signals to obtain 3 new color channels.

One of these color channels carry brightness information that is derived from

green and red. These “red” and “green” neurons (called cones) have their peak responses at the middle of the spectrum, therefore the brightest colors are in the middle.

102 color

Light neurons peak sensitivity to light brightness

Brightness (black and white)

=

Medium (green) + Long (red) wavelengths

Light neurons peak response to light

By combining the wavelengths in the green and red areas of the visible electromagnetic spectrum, our eye extracts the brightness channel information. Images from CambridgeinColour.com

Yellow: most luminous colorYellow is the most luminous color in the visible electromagnetic spectrum. Yellow gets people’s attention faster than any other color.

Brightness derived from “Red” & “Green” neurons peak response.

Quick facts

color 103

In depthOur brain interprets color from 3 primary spectrum wavelengths, red, green and blue. Then this trichromatic color flows to another process where our brain mixes these signals to obtain 3 new color channels.

One of these color channels carry brightness information that is derived from

green and red. These “red” and “green” neurons (called cones) have their peak response at the greenish-yellow color, therefore the brightest color isgreenish-yellow.

Light neurons peak sensitivity to light brightness

Spectrum image from CambridgeinColour.com

Yellow gets people’s attention faster than any other color.

American school buses are yellow.

Metro floor barriers are yellow.

Human eye

Eye lens accommodation

Chiwawa

Color contrastThe eye focuses most sharply on objects that have enough contrast. Low contrast causes visual fatigue. Text size also maters, the smaller the text, higher needs to be the contrast.

Excess of lens accommodation.

Quick facts

In depthContrast is the difference in perceived brightness of two objects. The sharper the object stands out against its background, the quicker and better the lens accommodation.

Accommodation is the process by which the eye lens expands and contracts to

better focus the light wavelengths in the eye retina to get a sharper image.

Bad contrast makes harder for the eyes to focus (excess of accommodation) causing visual fatigue.

104 colorcontinues ⇒

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.

Chiwawa Chiwawavs

continues ⇒color 105

Color contrastAlways give enough contrast

Dark colors vs bright colors

When in doubt about contrast ask yourself: “Is this color bright or dark?”. If the answers for the two colors are the same, then it is likely that you have a contrast problem. Check and adjust brightness levels using the HSB color space.

Best contrast colors are the ones in the opponent channels

Opponent colors are the range of colors that our eyes by default perceive them as opponent or contrasting. However be careful about mixing simultaneous saturated colors.

Recommendations

ENROLL IN PROGRAM

HOME PAGE

Chiwawa

ENROLL IN PROGRAM

HOME PAGE

Chiwawa

10 de Abril de 2009 10 de Abril de 2009

red & green blue & yellow black & white

can you read me? can you read me? can you read me?can you read me?

Brighter colors vs darker colors in visible spectrum

By default some colors are brighter or darker in the visible electromagnetic spectrum. By using colors in the middle versus colors in the extremes of the spectrum, we’re choosing contrasting colors by default.

Use a compliant tool with WCAG 2.0's luminosity contrast algorithm.

The organization World Wide Web Consortium (W3C) has some contrast guidelines for readability that can be used to get better color contrast.

http://juicystudio.com/services/luminositycontrastratio.php

Color contrasts are more intense and sharp on screens.

Because the screens emit light instead of reflecting it, the resulting colors are brighter and intense.

106 colorend

Color contrast

Eye color brightness sensitivity

can you read me?can you read me?

can you read me?can you read me?

Brighter colors: yellow, green, light blue.Darker colors: blue, purple, red.

Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consectetur adipisicing.

Lorem ipsum dolor sit amet, consectetur adipisicing. Lorem ipsum dolor sit amet.

vs vs

8 109

Motion

Periphery vision is sensitive to motionPeriphery vision is what our eyes see in visual field periphery.This part has low acuity and is sensitive to motion and contrast changes. And it can be used in good ways or to disturb users.

Periphery eye neurons - rods.

Rods are sensitive to motion.

Rods - insensitive to light, therefore sensitive to color contrast.

Quick facts

In depthInside our eye, the retina is responsible for transforming light energy into neural activity. The periphery of the retina is full of a certain type of light receptors (rods) that are insensitive to color and very sensitive to motion. Because they are insensitive to color they use color contrast instead for detecting changes in the environment. This is why when

trying to focus on something, animation inthe visual periphery can be very distracting.

These neurons are part of human evolution, and became fundamental for our survival because we always had to detect danger quickly. For example, high-speedcars or lions attacking you, depending on which age you are/were living.

110 motion

Motion and contrast

are very effective to

warn the user!

Banners next to text?

peripheryperiphery

Some email applications unobtrusively warn users using high contrast colors and a slight animation, while some highly animated banners disturb users that are trying to read text.

Visual perceptual processor speed:Visual perceptual processor speed:Fastest: 50 milliseconds

Average: 100 millisecondsSlowest: 200 milliseconds

Animation from still imagesTo create animation we can present still images continuously at a rate that overcomes the time by which our visual system process a stimulus.

Average visual perceptual processor speed = 100[50~200] milliseconds.

Motion sensation = 1000/50 = 20 images per second.

Quick facts

motion 111

In depthBy exploring the speed of our visual perceptual processor we can induce a sensation of motion in our brain.

If our brain takes between 50 to 200 ms to process a stimulus and transform it a representation our mind understands, something beneath that range will be processed as a whole.

By passing 20 images per second, our brain will see one single stimulus as motion instead of 20 individual stimuli.

Motion video cameras usually take 24 frames per second, just to make sure motion will be perceived at all times by all people.

9 113

Metaphors

Shopping cart metaphor on the webTo use an effective shopping car metaphor on the web, you want to provide a similar experience of shopping in a grocery store.

A web shopping cart must be:

Persistent,

Visible,

Immediately accessible,

Items easy to add to cart,

Easy to check out.

Quick facts

In depthWhen buying on a physical store you can carry a shopping cart. While shopping, items don’t disappear, they’re easy to pick and you can choose without reading the description. To check out, you just go the payment line.

A persistent cart means that items don’t disappear no matter where you navigate in the online store. The cart and items should be always visible and a click away, while the user is shopping.

Adding items to cart and checking out should also be one click away.

114 metaphors

Grocery store image from Flickr user Chris Devers.

Name Bibliographic reference

Aging and sensitivity to blue (the_essential_guide_to_user_interface_design, 2007)

(using_color_effectively, 1990)

Animation from still images (the_psychology_of_human-computer_interaction, 1983)

Application responsiveness times (the_psychology_of_human-computer_interaction, 1983)

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

Bibliography references


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)

(sensation_and_perception_web_activities, 2006)

(notes_on_graphic_design_and_visual_communication, 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-computer_interaction, 1983)

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-computer_interaction, 1983)

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-computer_interaction, 1983)

(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-computer_interaction, 1983)

Yellow: most luminous color (the_essential_guide_to_user_interface_design, 2007)


category 121

Bibliography

category 123

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

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)

Functional fixedness

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)

Functional fixedness

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, fromuseit.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.(sensation_and_perception, 2006)

Periphery vision is sensitive to motion 2 - The First Steps in Vision 33-38

Fast visual search 8 - Attention and Scene Perception

Brighter colors: middle of visible spectrum

5 - The Perception of Color

Color contrast 2 - The First Steps in Vision 40

Depth perception 6 - Space Perception and Binocular Vision

Gestalt principles 4 - Perceiving and recognizing objects

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(sensation_and_perception_web_activities, 2006)

Visual area with sharp details is very small 3 - Spatial Vision Visual Angle

Change blindness: overlook fine differences 8 - Attention and Scene Perception

The Flicker Paradigm

Depth perception 6 - Space Perception and Binocular Vision

Gestalt principles 4 - Perceiving and recognizing objects

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

Saturated colors and visual fatigue

Aging and sensitivity to blue


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(using_color_effectively, 1990)

Color blindness

Saturated colors and visual fatigue

Aging and sensitivity to blue


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

130

A

Absolute judgment limits, 77Accommodation, 104Acuity. See Visual acuity.Aerial perspective, 69Affordance, 60, 64, 68Aging. See Older people.All caps, 89Analog, 81Animation, 110, 111Attention, 23

decision-making, 25, 26display design principles, 79multitasking, 30, 31

Automaticity, 31

B

Banners, 110Bevel-like effect, 64Blue, 97—98

aging, 96color blindness, 93color movement, 92opponent colors, 105saturated colors, 94visual periphery colors, 101

Bottom-up processing, 16Brain processing times.

See Model human processor.Brightness, 102, 103

in blue, 98in color blindness, 93in color brightness levels, 75in contrast variations, 100in contrast, 104—106

Buttons (naming), 88consistency (display), 80hick-hyman law, 58proximity (gestalt principles), 74shading (depth perception), 70

C

Cart. See Shopping cart.Change blindness, 17Closure, 73Cognition, 21Cognitive bias, 22Cognitive resources, 32—33.

See also Mental resources.Cognitive tunneling, 27, 33.

See also Functional fixedness.Color, 91Color blindness, 66, 93Color brightness levels, 75Color channels, 102, 103Color movement, 92Color search. See Visual search.Color visual periphery.

See Visual periphery colors.Configural displays, 82Confirmation bias. See Decision-making.Consistency, 80Continuation, 74Contrast variations, 100Contrast, 104—106, 110

bevel-like effect, 64change blindness, 17color brightness levels, 75contrast variations, 100figure / ground (gestalt principles), 73legibility (display), 77

Cool colors, 92

Subject index

131

D

Data visualization, 65Decision-making, 24, 25—29Delay, 52.Depth cues, 68, 69—71Depth perception, 68, 69—71Desires, 16Digital, 81Discriminability. See Display.Display design principles, 76, 77—80Dynamic displays, 81

E

Electromagnetic spectrum, 102, 103, 106Empathize, 13Equilibrium. See Gestalt.Expectancies (user) 16

remember, 49signal detection theory, 34top-down processing, 77visual search, 67

Experiences, 44, 45Eye lens focusing. See Lens focusing.

F

F-shaped pattern for reading, 59Feedback, 60, 52Feedforward, 60Figure / ground, 73Fitts’s law, 57Font, 89Forgetting 46.Framing bias. See Decision-making.Functional fixedness, 22

G

Gaze, 18Gestalt principles, 72, 73—74Glyphs, 89Gradient, 95, 70. See also Shading. Green, 99

color blindness, 93color movement, 92brightness, 102—103

H

Haze. See Depth perception.Heuristics. See Decision-making.Hick-Hyman law, 58

I, J

Illusions. See Depth perception.Information access cost. See Display.Instructions, 87Interaction design, 51Interface design, 63Internet. See Web.Interposition. See Depth perception.Isomorphic correspondence.

See Gestalt principles.

K

Knowledge in the world, 80

132

L

Labels. See Buttons (naming).Learn, 46, 47—49Legibility, 77Lens focusing

blue, 97color movement, 92green, 99

Lens refocusingcontrast variations, 100saturated colors, 94

Lens yellowing, 96Linear perspective, 69Long-term Memory, 43

decision-making, 26, 28.experiences, 45forgetting, 46knowledge in the world, 80memories, 44,model human processor, 54—56remembering, 49working memory, 42

Lowercase, 89Luminosity, 106. See also Luminous color.Luminous color, 103

M

Memories, 44Memorize, 46, 47—49Memory, 41, 46.

See also Long-term memoryand Working memory.guidelines, 47—48memories, 44remember, 49

Mental modeldisplay design principles, 78memory, 48user, 13

Mental resources, 23, 30, 31, 34

Metaphors, 113Model human processor, 54—56Motion parallax, 70Motion, 109, 110, 111.

See also Motion parallax.Moving part, 78Multiple resource theory, 30—31Multitasking, 30, 31—33

N

Naming. See Buttons (naming).Notification, 17

O

Occlusion, 69Older people, 96, 98Order, 73Overconfidence, 27Opponent colors, 105

P, Q

“Pop up” effect (visual), 67Parallel visual search, 67perception, 15Periphery vision colors.

See Visual periphery colors.Periphery vision, 110.Pictorial realism. See Display.Predictive aiding. See Display.Primacy effect

in decision-making, 26in experiences, 45

Progress bars. See Buttons (naming).Proximity compatibility, 79Proximity (gestalt), 74

133

R

Rates. See Times.Reading (web content), 53, 59, 86Reading rates, 53Recall. See Remember.Recency effect

decision-making, 27, 28experiences, 45forgetting, 46memory, 47

Redundancy gain. See Display.Remember, 47—49Response bias. See Signal detection theory.Response sensitivity.

See Signal detection theory.Responsiveness (application), 52

S

Saccades (eye movements), 53Saturated colors, 93—96Scanning. See Reading.Search. See Visual search.Senses, 16, 32Serial visual search, 67Service Design.

See also Experiences and Memories.Shading, 70Shopping cart, 114Signal detection theory, 34

improve response bias, 35improve response sensitivity, 36—37

Similarity. See Gestalt.Situation awareness, 38. See also Attention.Small caps, 89Small multiples, 65Spectrum, 102, 103, 106Stereopsis, 71Still images, 111

Stimulus, 16, 52, 111Sunk cost bias, 29Symmetry (gestalt), 73

T

Task management, 30Text, 85Texture gradient, 70Time management. See Multitasking.Time-sharing, 30Times

in animation, 111in brain processing times, 54—56in reading rates, 53in responsiveness (application), 52

Typeface, 89Top-down processing, 16. See also Display.Tridimensionality. See Depth perception.

U

Unresponsiveness (application), 52Usability studies. See also User.User testing. See also User.User, 13. See also Functional fixedness.

V

Visual acuity, 18Visual angle, 18Visual fatigue

contrast variations, 100contrast, 104saturated colors, 94—95

Visual field, 18Visual periphery colors, 101Visual periphery. See Periphery vision.Visual search, 66, 67

134

W

W3C, 106Wait cursor, 52Warm colors, 92Web

F-shaped pattern for reading, 59scanning, 86shopping cart metaphor, 114

Working memory, 42change blindness, 17decision-making, 24—29discriminability (display), 78display design principles, 80instructions, 87instructions, 87model human processor, 54—56

Writing, 87

XX-height, 89

Y, ZYellow (luminosity), 103

brightness, 102—103, 106color blindness, 93older people, 96opponent colors, 105visual periphery colors, 101

*3D, 68, 69—71 7[5~9]. See Working memory.

Document design information

Book dimensions: A5 (420 pt x 595 pt, 14,8 cm x 21 cm, 5,83 in x 8,27 in)

Main typeface: Delicious

Secondary typeface: TitilliumText14L

HCI Quick Guide

Design

interaction design

small chapter

color contrast chapter

images chapter

affordances chapter

interface design

better design

design information