HCI Quick Guide
  (Human-Computer Interaction Quick Guide)




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




Document version   Revision date            ...
Author
emanuel.m.fernandes@gmail.com
HCI Quick Guide
                       Human-Computer Interaction



"Although many people think things just happen,
there...
Brief Contents

first and foremost   The user is not like me 13

        Chapter 1    Perception 15

        Chapter 2    ...
Contents

first and foremost             The user is not like me 13

Chapter 1          Perception 15
  16   Perception: t...
Chapter 4            Interaction Design 51
    52   Application responsiveness times
    53   Reading rates
    54   Human...
Chapter 7          Color 91
  92   Color movement
  93   Color blindness
  94   Saturated colors and visual fatigue
  96  ...
Preface
There are out there an immense quantity of human-computer
interaction (HCI) design principles that guide designers...
first
and
foremost


12
The user is not like me
              Look, listen, probe, and empathize with your users. Don't assume
              much ...
1
Perception



             15
Perception: top down vs bottom up
                  We perceive the world using the combination of our physical
          ...
Change blindness: overlook fine differences
             People are bad at noticing subtle changes in subsequent images.
 ...
Visual area with sharp details is very small
               Our eyes cannot see details within the entire area we’re looki...
2
Cognition



            21
Functional fixedness
              “Functional fixedness is a cognitive bias that limits a person to
               using ...
Attention limitations
              “A wealth of information creates a poverty of attention and we
               need to ...
Decision-making heuristics and biases
             The process of decision making is simplified by the usage of
          ...
Decision-making heuristics and biases
1 - Cue reception and integration
We receive information — cues — from the world thr...
Decision-making heuristics and biases
Cue primacy and anchoring
When receiving cues along time, the first cues have primac...
Decision-making heuristics and biases
Availability heuristic
It is easier to retrieve hypothesis that have been considered...
Decision-making heuristics and biases
Confirmation bias
The tendency to only seek out information which confirms a
hypothe...
Decision-making heuristics and biases
Availability of possible outcomes
When considering the outcomes of the different act...
Multitasking and time-sharing
              Good performance when doing more than one thing at the same
              time...
Multitasking and time-sharing
Multitasking guidelines
                                                                    ...
Multitasking and time-sharing
Use multiple senses
By using multiple senses you’re requiring different resources
that can b...
Multitasking and time-sharing
Minimize switching tasks
There is always a cost when switching tasks.
Writing a document, ch...
Signal detection theory
               Theory that describes how we respond the question:
              “Did you perceive ...
Signal detection theory
Improve response bias
For example, on an airport baggage screener, the cost of missing
a weapon or...
Signal detection theory
Improve response sensitivity
With the same example of an airport luggage screening, by
improving r...
Signal detection theory
Slow down the rate of signal presentation
Decrease the time luggage passes by the monitoring syste...
Situation awareness
              “Knowing what is going on around you” by Mica Endsley



Situation awareness when drivin...
3
Memory



         41
Working memory limitations
             Working memory is used to temporarily store chunks of
             information use...
Long-term memory retrieval issues
               We have big restrictions when trying to retrieve content from our
       ...
Remember good memories, forget bad ones
             We tend to remember only the good aspects of an experience as
       ...
Important of experiences: end & start
              Due to the primacy and recency effects we tend to remember
           ...
To forget and how to improve memory
             In theory our memory has an infinite capacity, but as obvious we
        ...
To forget and how to improve memory
Memory guidelines
The following recommendations guide you to overcome the
memory retri...
To forget and how to improve memory
Design information to be remembered
Information to be more easily Remember, must be   ...
Design information to remember
             By understanding how our long-term memory works, we can
             design in...
4
Interaction
  Design

              51
Application responsiveness times
              Upon which time should we respond to users actions? How long
              ...
Reading rates
             Reading rates depends on the eye movements plus the cognitive
             effort required by t...
Human brain processing times
              The Model Human Processor theory brings together a set of info
              ga...
Human brain processing times




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

...
Human brain processing times
To use these values you must specify which parts of the brain
will be in place for a specific...
Fitts’s law in interaction design
               The difficulty of selecting and pointing to a target is dependable
      ...
Hick-Hyman law in interaction design
     choices
                 Decision time increases with number of choices and few ...
F-shaped pattern for reading web content
              Has been found in eye tracking visualizations that users when
     ...
Feedback, feedforward and affordances
             Feedback tells the user what’s happening. Feedforward tells the
     FF...
5
Interface
 Design

            63
Bevel-like effect in backgrounds
              For making a visual separation of content, the bevel effect
              p...
Small multiples in data visualization
             Small multiples are a type of visualization where small images are
    ...
Color is powerful in search
             One of the best ways to discriminate an object among others is
             by us...
Fast visual search
             When performing a visual search for an object if that object has a
             single dis...
Depth perception
             Our eyes use some depth cues to interpret tridimensionality in
             the world and we...
Depth perception
Occlusion or interposition
An occluded object looks to be farther away than the
front object.
The blue bu...
Depth perception
Texture gradient
Similar objects in a surface that will change size continuously
will appear to form a su...
Depth perception
Stereopsis
Each eye sees a different image from the world. This binocular
disparity in the retina, gives ...
Gestalt principles
              A set of visual rules that act as a reference for our visual system
              when in...
Gestalt Principles
Figure / ground
An image that is on top of a background with enough contrast,
creates a relationship of...
Gestalt Principles
Proximity
Objects nearby are considered to be part of a group.
In this application toolbar, related but...
Combination of color brightness levels
   light     By mixing the brightness levels of a single color instead of using
   ...
Display design principles
              Displays should be designed according to humans’ perception
              and cogn...
Display design principles
1 - Perceptual principles
Principles related to the way we perceive the world.




Legibility
Co...
Display design principles
Discriminability. Similarity causes confusion: use
discriminable elements.
Similar appearing sig...
Display design principles
3 - Attention principles
Humans have restricted attention resources and displays
should minimize...
Display design principles
4 - Memory principles
Since our memory is very limited in terms of storage we
must minimize the ...
Dynamic displays: analog vs digital
  12:21       Dynamic displays depicts a variable that continuously changes
          ...
Configural displays
                “(...) multiple displays of single variables can be arrayed (...), so
configural
     ...
6
Text



       85
Web: users scan instead of reading
              On the web users usually scan webpages until they find what
             ...
Easy and effective instructions
 1            To understand instructions we must rely on our working memory
 2            ...
Name buttons with intended behavior
               You should always name a button with its related action, to
           ...
Usage of ALL CAPS and SMALL CAPS
             The glyphs of a typeface in all caps or small caps are better used
 aaA     ...
7
Color



        91
Color movement
               Colors can be characterized by a movement sensation they
               induce in our eyes. ...
Color blindness
            “Color blindness, a color vision deficiency, is the inability to
             perceive differe...
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
HCI Quick Guide
Upcoming SlideShare
Loading in...5
×

HCI Quick Guide

6,184

Published on

The Human-Computer Interaction Quick Guide is a document with the most important design principles in the field of HCI.

It lists HCI principles in a quick way with examples of the real world, and links to research for further information.

Use it to guide and base your decision rationale, wether you're designing a webpage, software application, objects, marketing, etc.

Published in: Design
0 Comments
13 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,184
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
388
Comments
0
Likes
13
Embeds 0
No embeds

No notes for slide

Transcript of "HCI Quick Guide"

  1. 1. HCI Quick Guide (Human-Computer Interaction Quick Guide) Image from Flickr user Will Lion.
  2. 2. HCI Quick Guide Human-Computer Interaction Quick Guide Document version Revision date Author (s) Changes 1.0 22 set 2009 Emanuel Fernandes Initial document.
  3. 3. Author emanuel.m.fernandes@gmail.com
  4. 4. HCI Quick Guide Human-Computer Interaction "Although many people think things just happen, there are those who believe that science must be behind most decisions we take most of the days. Designing, selling, advertising, managing, all these tasks require a set of understanding skills about the context and the subject they deal with. The so many times used “common sense” or “best guessing” seem to be a good way of driving people when performing a task. But they are not! This is why many times things go wrongly and we wonder why. Even if there is always a certain degree of uncertainty, derived from the world we live, guiding our decisions with some sort of scientific knowledge most of the times gets the job well done. This also applies to designing user interfaces. Only by understanding how humans work we can better design something to be used by humans. That’s why I urge all of you to listen to those who understand this field of Human-Computer Interaction, or at least to inform yourself before making guessed design decisions, otherwise there is a very likely chance that most of the times, guessed decisions will fail.” by emanuel fernandes
  5. 5. 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
  6. 6. Contents first and foremost The user is not like me 13 Chapter 1 Perception 15 16 Perception: top down vs bottom up 17 Change blindness: overlook fine differences 18 Visual area with sharp details is very small Chapter 2 Cognition 21 22 Functional fixedness 23 Attention limitations 24 Decision-making heuristics and biases 30 Multitasking and time-sharing 34 Signal detection theory 38 Situation awareness Chapter 3 Memory 41 42 Working memory limitations 43 Long-term memory retrieval issues 44 Remember good memories, forget bad ones 45 Important of experiences: end & start 46 To forget and how to improve memory 49 Design information to remember
  7. 7. Chapter 4 Interaction Design 51 52 Application responsiveness times 53 Reading rates 54 Human brain processing times 57 Fitts’s law in interaction design 58 Hick-Hyman law in interaction design 59 F-shaped pattern for reading web content 60 Feedback, feedforward and affordances Chapter 5 Interface Design 63 64 Bevel-like effect in backgrounds 65 Small multiples in data visualization 66 Color is powerful in search 67 Fast visual search 68 Depth perception 72 Gestalt principles 75 Combination of color brightness levels 76 Display design principles 81 Dynamic displays: analog vs digital 82 Configural displays Chapter 6 Text 85 86 Web: users scan instead of reading 87 Easy and effective instructions 88 Name buttons with intended behavior 89 Usage of ALL CAPS and small caps 8 contents
  8. 8. Chapter 7 Color 91 92 Color movement 93 Color blindness 94 Saturated colors and visual fatigue 96 Aging and sensitivity to blue 97 Constraints of pure blue color 99 Green: easiest color for the eye 100 High contrast variations and visual fatigue 101 Visual periphery colors: blue & yellow 102 Brighter colors: middle of visible spectrum 103 Yellow: most luminous color 104 Color contrast Chapter 8 Motion 109 110 Periphery vision is sensitive to motion 111 Animation from still images Chapter 9 Metaphors 113 114 Shopping cart metaphor on the web Bibliography references 118 Bibliography 123 Subject index 130 contents 9
  9. 9. Preface There are out there an immense quantity of human-computer interaction (HCI) design principles that guide designers in what or not to do when designing a user interface. Those who work in the field many times apply these principles unconsciously and may even forget some of them. This is normal, as humans memory have many limitations. Another problem is that these principles are spread across many disciplines and may be difficult and time- consuming to access. To resolve these issues, the HCI Quick Guide was envisioned. This is a guide with the most important principles in the Human-Computer Interaction field that aims at providing information in a quick way. Besides enumerating design and usability principles, the guide contains practical examples and short scientific explanations for the most sceptic ones. Further reading can be done by following the bibliography. Because it is always important to maintain credibility in our actions or explanations, this guide also has the goal of helping people to better understand why some interfaces are well or badly designed. Explaining each principle is not only important to explain certain design solutions but is also important for designers to make better, confident and informed design decisions. The audience of this guide are primarily designers. Interaction, user experience, usability designers, whoever you can recall of people that work into creating great applications that have a human interaction. If you create, this is, design anything, that any human will use, then this guide is for you. For those, who also want to know more about what is Human-Computer Interaction, then you can get a better understanding as well. This guide only contains what the author considered of being the most important HCI principles and therefore is not a complete set of HCI principles. These are organized into logic related chapters to make the search and reading easier. The author as a designer himself has to warn, that these are principles and guidelines that should guide our design but not in a rigidly way as different problems may require different solutions. Some principles even go against others, but this is normal and as in other aspects of life, there always pros and cons. As a good designer, it is you job to critically analyze each situation and make the best design for it, even if breaking some of these principles. Nevertheless, don’t make use of this excuse for not getting your work well done :)
  10. 10. first and foremost 12
  11. 11. The user is not like me Look, listen, probe, and empathize with your users. Don't assume much about what the user knows and is capable of. What the world really is, and what the user thinks the world is (mental model). You should: listen empathize look probe Quick facts You know too much. Users have their own mental model. Empathize with your users. In depth As a designer you know too much, so be Put yourself in the user's mind careful with assumptions you make about (empathize) and try to design for that your users. Observe your users behavior, mental model. listen to them, probe and understand what is their mental model. first and foremost 13
  12. 12. 1 Perception 15
  13. 13. Perception: top down vs bottom up We perceive the world using the combination of our physical senses and our previous mental knowledge. Experience Top-Down Knowledge Processing (Expectancies and Desires) Perception The senses Bottom-Up Processing Stimulus World Relation between top-down and bottom-up processing when perceiving the world around us. Image based on diagram in (an_introduction_to_human_factors_engineering, 2004). Quick facts Perception of the world: Experience & Stimulus World. In depth Perceiving the world has two components something, while the bottom-up processing that interplay with each other. We use our involves using our senses. It is the senses to perceive the world and our combination of both that we use most of the knowledge complements it. Physical and times to perceive the world around us. mental are brought together in what is called The example below shows a design top-down and bottom-up processing. where knowledge helps a poor stimulus (font Top-down processing involves using our too small). It’s easier to guess a name than a expectancies and desires to perceive meaningless email and phone number. Emanuel Hernandez Emamhernandez@company.com 96-308-4572. Example: is a better design than is Emanuel Hernandez Emamhernandez@company.com 96-308-4572. 16 perception
  14. 14. Change blindness: overlook fine differences People are bad at noticing subtle changes in subsequent images. This is a psychological effect called “change blindness.” Can you notice the differences between each other? One screenshot is before logging in and the other is after logging in. Quick facts Working memory limitations. Make important changes noticeable. Subtle changes unnoticed. In depth Humans have a very limited working When designing a notification to your memory, therefore it is almost impossible users, make sure the changes have enough to retain all details of an image we see. contrast to be noticed. When a similar image is presented to a user without significant changes, it is very difficult for us to remember enough details and spot the changes. perception 17
  15. 15. Visual area with sharp details is very small Our eyes cannot see details within the entire area we’re looking at. We are capable of capturing details only if we fixate our gaze on a small area within the entire visual field. Fovea Visual acuity is smaller than people think. Flower image: (sensation_and_perception_web_activities, 2006). Quick facts Sharp details only seen at fovea. VA = arctangent(object size/distance). Best acuity visual angle (VA) = 2º. Visual area with sharp details is small. In depth When our eyes interpret the world, there Example: for a visual angle of 2° and is only a small part that we can see with looking at a screen away 50 cm, we have an great acuity, or details. In the back of our area of high acuity in our fovea of 1,7 cm. eyes, there is a small area in the center of 1,7 = tangent(2)*50. the retina, called fovea, that is responsible for This is the same area as decoding these details. this square on the right. The neurons that live in the fovea can Do not expect users to look achieve the highest degree of detail with a at a graphical user interface size of 2° of visual angle. Visual angle and understand all the details, measures the size of objects in the retina. unless the fixate their gaze on each part. 18 perception
  16. 16. 2 Cognition 21
  17. 17. Functional fixedness “Functional fixedness is a cognitive bias that limits a person to using an object only in the way it is traditionally used.” in Wikipedia In this experiment people are asked to grab the two ropes at the same time. People with functional fixedness won’t complete the task because they are unable to think of the red plier as a support tool. In their minds, a plier has a single specific function that is to cut wires. Image from (functional_fixedness_image, 2001). Quick facts People’s world: fixed structure. Avoid hypothetical situations with users. Don’t ask for new features. Experts overlook important details. In depth People understand their world within a fixed This has the following implications in structure. This functional fixedness lead the design of systems: don’t ask users to people to recognize objects only for their tell you about new features, don’t ask them obvious functions, creating a mental block to think about hypothetical situations, don’t that prevents using tools in a new way to expect every user to be able to invent new solve problems. ways of working with your tools and expect experts to overlook details. 22 cognition
  18. 18. Attention limitations “A wealth of information creates a poverty of attention and we need to allocate it efficiently.” by Herbert Simon (Economics Nobel Prize winner, 1978) If you were walking at night in Times Square, New York, where would your attention be driven to? Image from Flickr user heymynameispaul. Quick facts Limited attention resources depends on: Expectancy, Salience, Effort & Value. In depth Attention is the process on which our brain changing lanes, because there’s much allocates our scarce mental resources for “effort to give.” performing a task. The way we move our Expectancy is where we will expect to attention in the world depends on salience, find things. For example, if we usually read effort, expectancy and value of information. from top to bottom and left to right, it is Salience is how “inviting” will be very likely that when reading a book we will something to us, that will capture our look first to the top-left part. attention. This relates to our senses. Value is how worth is to spend our For example, titles in a book get our attention on something. For example, when attention first then the prose. crossing the street, the value of looking to Effort describes the amount of work traffic lights is enough to spend our required to attend something. For example, attention on it? fatigued drivers may not look back when cognition 23
  19. 19. Decision-making heuristics and biases The process of decision making is simplified by the usage of heuristics that in some cases may bias our decisions. Which path to choose? This is a common question when trying to make a decision. Image from Flickr user nerovivo. Quick facts “Good enough” decision. Rules of thumb. In depth When making a decision humans usually As a result we use a set of heuristics, don’t consider all aspects and weight all pros rules of thumb, to simplify the decision and cons of each option. The goal is to make making process. Sometimes these rules may a “good enough” decision in the shortest bias our decisions to a certain direction. time available with the fewest resources. While these rules help us deciding fast, sometimes they can lead to poor decisions. continues 24 cognition
  20. 20. Decision-making heuristics and biases 1 - Cue reception and integration We receive information — cues — from the world through our senses and hold it in our working memory (memory that holds Available cue Selected cue temporary information). This is to perceive the problem. What? Attention to a limited number of cues Due to our working memory restrictions we can only use a small set of cues to get an overall picture of the situation. Yes, you cannot handle much information at once. Overweighting of unreliable cues To simplify the integration of all cues there is the temptation to consider all cues as reliable, even if some are not. For example, on a trial some witnesses may lie, others may tell the true, some may have faulty memories, but nevertheless, all testimonies are usually treated as equally valid and reliable. Cue salience Most salient cues get more attention even if they are not the most important. For example, information at the top of the display, the loudest alarm, the largest display will be given more attention. continues cognition 25
  21. 21. Decision-making heuristics and biases Cue primacy and anchoring When receiving cues along time, the first cues have primacy over the remaining. For whatever reason, information processed early is often most influential and typically we Time anchor our hypotheses on this initial evidence. This reveals the familiar phenomenon that first impressions are lasting. Inattention to later cues Cues occurring later or that change over time are often ignored due to focused attention. Time For example in a medical diagnosis, symptoms that are presented first are more likely to be brought into working memory and stay dominant. 2 - Hypotheses generation and selection Using the previous cues we generate hypotheses combining Available hypotheses cues in the working memory with knowledge we have in our long-term memory. This is to understand the problem. Why? Selected hypotheses Generation of a limited number of hypotheses The limits of our working memory lead us to consider very few hypotheses at once. Usually 1 to 4 hypotheses are considered, but under stress this number may be reduced to 1. This is why novices make more wrong decisions that experts, because they choose the wrong initial hypothesis. continues 26 cognition
  22. 22. Decision-making heuristics and biases Availability heuristic It is easier to retrieve hypothesis that have been considered recently or frequently. If something comes to mind relatively easily, people may consider it common and therefore Time a good hypothesis. For example, if a physician readily thinks of an acute appendicitis, he or she may will assume it is relatively common, leading to the judgment that this is the cause of the current set of symptoms. Representativeness heuristic When the pattern of cues are similar to a prototypical situation. This happens when we have the tendency to over generalize situations. Overconfidence Tendency to be overconfident that the hypotheses we are using are good enough. As a consequence we don’t look for alternative hypotheses. We may think we are correct in more situations than in reality. Cognitive tunneling To fixate on a single hypothesis and ignore all the remaining cues. This situation happens often in high stress and workload situations. For example, when escaping from a fire, simple actions like opening a door can become really difficult, because people have a tunnel vision of the subject. This is related to functional fixedness, where people cannot see the obvious. continues cognition 27
  23. 23. Decision-making heuristics and biases Confirmation bias The tendency to only seek out information which confirms a hypothesis, rather than reject it. To only look up information that confirms existing belief. For example, when diagnosing a set of malfunctions in some hardware people may not look for “silly” situations because they are not “possible,” like checking if the energy plug is connected. 3 - Plan generation and choices From the previous hypotheses we select some courses of action and decide which to follow. How to handle it? Available action Selected action Retrieve a small number of actions Due to our limitations in the working memory, we can only consider a small number of actions at once. Availability heuristic for actions Actions are more easy to retrieve from the long-term memory depending on factors of recency, frequency and how strong Time they are associated with the situation. For example, in high risk professions like aviation, emergency lists are used to ensure that all actions are available and considered, even if they’re not frequent to happen. continues 28 cognition
  24. 24. Decision-making heuristics and biases Availability of possible outcomes When considering the outcomes of the different actions, we Estimated probability of outcome won’t use any statistical information. We rather consider the availability of instances of an action in memory. For example, a construction worker may never wear a helmet because he never witnessed an accident, so he may think that the likelihood of Real probability of outcome happening something similar to him is lower than it really is. Framing bias The way a situation is framed can influence decisions. Framing a Lorem ipsum dolor sit? hypotheses in a positive way is more attractive than in a vs negatively way. A phenomenon called sunk cost bias infers that Ipsum dolor sit lorem? people incur greater risks when faced with losses. As a suggestion you should frame decisions in terms of gains to counteract this tendency. Value of meat which is 10% fat vs meat which is 90% lean? (people were found to pay 8,2 cents per pound more for 90 percent lean meat) Do you prefer exam grades stated as 80% correct or 20% wrong? (students more likely to feel they are performing better with 80% correct) Cancer treatment with 20% mortality rate vs 80% success rate? (people more likely to choose 80% success rate) Sunk cost bias - For example when people are on a project and they’re losing money they are framed to continue the project until it returns some money, instead of abandon it. As the project sunk even more, the cost is even higher. end cognition 29
  25. 25. Multitasking and time-sharing Good performance when doing more than one thing at the same time, depends on many factors. Those factors are described. Image from Flickr user _TomTom_. Quick facts Multitasking depends on: Structure of tasks & Similarity of content, Resources demand, Task management. In depth Multitasking is how we manage to do involve dealing with articulated coded more than one task at the same time. content. See Multiple Resource Theory. This depends on resource demand, Similarity of content is when information structure of tasks, similarity of content is very similar between different tasks. For and task management. example counting items while listening Resource demand is how much we make someone speaking about numbers. use of a certain mental resource. For Task management is related to how we example rehearsing “96 308 45 72” requires a allocate resources to each task. Some tasks different demand from rehearsing “0 1 2 9 1 may become prominent and we give more 9 6 3 0 8 4 5 7 2.” Some tasks may require attention to them. We can also switch tasks less resources because they are automated, very quickly appearing we’re doing them like signing a letter, entering passwords, etc. in parallel. Structure of the tasks is when tasks are Only by considering the previous factors, structurally similar that they will use the we can determine if certain tasks can be same resources. For example, speaking while performed at the same time with a certain rehearsing a phone number. Both tasks degree of success. continues 30 cognition
  26. 26. Multitasking and time-sharing Multitasking guidelines Rea sonin Subconscious g Action Symbolic ges Linguistic Sta Processing Perception Visual Auditory Input Tactual Olfactory According to Multiple Resource Theory we have different pools of resources that can be tapped simultaneously. Non-competing tasks can be carried simultaneously. This means that different tasks can be processed in parallel if they require different resources. You can use this theory to measure if some tasks do consume the same resources and have an idea of the mental workload. Recommendations Training can improve allocation to attention You can train to allocate your attention efficiently and perform parallel tasks with better performance. Experts know what to look at. Automaticity of tasks require less resource demand. Image from Flickr user ranil continues cognition 31
  27. 27. Multitasking and time-sharing Use multiple senses By using multiple senses you’re requiring different resources that can better work in parallel. Add sound or touch to vision, for example a GPS navigator gives worded instructions besides a graphical representation. Image from Flickr user Neal Gillis. + “Turn left, then turn right.” Minimize similar tasks Tasks that require similar cognitive resources should be avoided to be done in parallel because they reduce performance. Rehearsing while speaking. Listening while reading, like on presentations. Image from Flickr user suchitra prints. Minimize resource demands If you can, avoid using much of a cognitive resource and release it for being used elsewhere. Using images instead of words, then you can speak and people will listen to you. Reading and listening to music without lyrics. vs Photography - the art or Giving information in world instead of asking users to remember. practice of taking and processing photographs. Automation of certain tasks If possible automate some tasks and release cognitive resources for other tasks. Spell checking. continues 32 cognition
  28. 28. Multitasking and time-sharing Minimize switching tasks There is always a cost when switching tasks. Writing a document, chatting on Messenger, writing on Twitter, emailing, etc. A constant change of tasks costs time and cognitive resources. Number of tasks Decrease number of tasks to be performed in parallel. Usage of reminders to avoid cognitive tunneling, where one only deals with one task and forgets the others. If you can’t juggle while biking, don’t bike or don’t juggle. Choose one of them only. Image from Flickr user Elsie esq. end cognition 33
  29. 29. Signal detection theory Theory that describes how we respond the question: “Did you perceive [or detect] that?” noise signal Is there a dangerous object in this bag? An airport security luggage monitoring system is an example where signal detection theory applies. While still being extremely important to detect dangerous objects (signal), they must be efficient and deal with lots of objects (noise) that complicates the monitoring situation. Quick facts Did you perceive (or detect) that? Sensitivity & Response bias In depth The perception of the world is a complex characteristics of the process of detection: process. Depends on our senses, sensitivity and response bias. expectancies, previous knowledge, Sensitivity is how good we are at restrictions in mental resources, etc. How discriminating between signal and noise. can we improve the decision making results Sensitivity is related to the “quality” of when we’re trying to detect something? our senses and strength of signals To the question “Did you perceive [or relative to noise. detect] that?” two answers can arise: Yes or Response bias is our tendency to No, and four results can arise: correct yes, respond more times yes our no. Bias is incorrect yes, correct no, incorrect no. These related to expectancies and cost / benefits four results can be summarized in two of the answer. continues 34 cognition
  30. 30. Signal detection theory Improve response bias For example, on an airport baggage screener, the cost of missing a weapon or bomb, is huge, so we want to the security personnel to be more biased to answer yes. This is, is better to have a false alarm, than letting a dangerous luggage to pass by. The following recommendations could be used to increase the personnel attention when screening luggage. Recommendations Use rewards systems To give some rewards if a signal is detected, in this case if dangerous luggage are detected. For each dangerous luggage detected, security personnel could receive money rewards. Introduce “false signals” By introducing false signals, we let personnel think the likelihood of a dangerous luggage is higher than in reality. Introduce fake dangerous luggage in the screening queues. Instructions This is the simply to instruct and train personnel. Through training sessions, and even with “how to” printed guides. Cost/benefits of error Describing the costs / benefits of missing a dangerous luggage. This should be performed in the training sessions, and could be regularly revisited to keep the information fresh in workers minds. continues cognition 35
  31. 31. Signal detection theory Improve response sensitivity With the same example of an airport luggage screening, by improving response sensitivity we want security personnel to be experts into detecting dangerous luggage while not being influenced by eventual noise, this is, luggage that looks dangerous but it is not. Recommendations Training Training and instructing personnel continuously. As criminals find new ways to overcome standard security procedures, personnel should be continuously be updated on this subject. Image from Flickr user billaday. Rest breaks The same personnel making the detections should always have frequent breaks. For example, 10 minutes intervals every hour, with 8 hour shifts. Image from Flickr user scribex. Give a visual or audible template of the signal To provide a representation of a similar dangerous object. In the screening monitor the system could try to map potential object contours to objects so that the operator could more easily determine if that object is really harmful or not. Image from Flickr user fishbowl_fish. continues 36 cognition
  32. 32. Signal detection theory Slow down the rate of signal presentation Decrease the time luggage passes by the monitoring system. Image from Flickr user slightly-less-random. Redundant representations of the signal This means to show the same object more than one time. Having more than one person looking at the same luggage. Image from Flickr user Thomas Hawk. Provide knowledge of results To inform personnel about efficacy of their work. To give weekly updates on number of luggage apprehended, types of objects detected, failures in procedures, etc. Image from Flickr user photobunny. Amplifying the signal more than the noise Depends on systems used to automatically call personnel attention to potential dangerous luggage objects. The screening system could show in a more vivid color objects that are considered potentially dangerous. Image from Flickr user psd. end cognition 37
  33. 33. Situation awareness “Knowing what is going on around you” by Mica Endsley Situation awareness when driving Can you perceive the cars ahead of you? Looking through the mirror: Will the car behind me try to surpass me? Are you sleepy? What’s the car current speed? Are you driving within the lane borders? When driving you’re constantly perceiving the environment around you, comprehending and projecting any changes in the near future. All these questions ask about the drivers’ current situation awareness. Image from Flickr user Kyle May. Quick facts Levels of situation awareness: Perception & Comprehension & Projection. In depth Situation awareness — “The perception of important changes, has a high negative the elements in the environment within a cost. For example, driving, piloting an volume of time and space, the airplane, nuclear plants, etc, where deathly comprehension of their meaning and the accidents can happen. projection of their status in the near Perception: perceiving the world in a future.” Mica Endsley. correct and timely manner. Comprehension: We can use situation awareness as a how to combine, interpret, store and retain measure for designing dynamic systems information. Projection: forecasting future when failure to attend and respond to events. 38 cognition
  34. 34. 3 Memory 41
  35. 35. Working memory limitations Working memory is used to temporarily store chunks of information used by our brain to think or act. We can’t work with much information at once in our memory without additional aids. Which is better to remember? 9 6 3 0 8 4 5 7 2 or 96 308 45 72 Working memory capacity augmented with previous knowledge (TV channels): until 9 chunks. Pure working memory capacity: until 4 chunks. Quick facts Working memory capacity 3[2,5 ~ 4,1] for pure capacity. (chunks of info): 7[5 ~ 9] augmented by long-term memory. In depth Humans have big restrictions in the amount For example, it is much easier to of information they can deal with at the remember a phone number as 96 308 45 72, same time. than 9 6 3 0 8 4 5 7 2. Our working memory, used for Another example: from the letters R P S C temporarily store information, is limited in I T V C N M V, we can remember only a few, average to 3 chunks of unrelated information while with same letters but recognizable and 7 chunks of information that is already in chunks (stored in long-term memory) we can our long term-memory. remember many more, such as TV channels RTP SIC TVI CNN MTV TV. 42 memory
  36. 36. Long-term memory retrieval issues We have big restrictions when trying to retrieve content from our long-term memory. Memory retrieval is highly influenced by cues associated with content we want to access. The user finds a file named John and tries to remember all friends named John. 1 2 John John Which John is this? Of course, the John that I play basketball with. On step 1, there are 3 associations to John so it is difficult to retrieve the correct info. On step 2, with the thumbnail there is a distinctive association in memory and it is easier to retrieve the correct John. Quick facts Memory organized by associations Retrieval cues associated to and categories. content. In depth We store information in our long-term Naming a file “John” and if we know 3 memory using associations and categories Johns, then it’s almost impossible to linking cues to content. identify him. The single available cue, the When having the same cue pointing to name, points to 3 different chunks, many content chunks, the more difficult the people. With an image preview, we’re it is to retrieve. The more cues we have adding one more cue that will help us for a content chunk, the most likely retrieving the content. it is to remember. memory 43
  37. 37. Remember good memories, forget bad ones We tend to remember only the good aspects of an experience as time passes by. Good memory Bad memory snake roller coaster For example you may remember better the last time you ride a roller coaster than you would remind seeing a snake (of course, if you don’t like snakes). Quick facts a Fade away faster than b: Emotions vs cognitions, Details vs higher-level constructs, Negative events vs positive events. In depth Our life is made of experiences that build is due the fact that our brain fades away memories. Recalling those memories is not faster emotions, details and negative as accurate as we may think. events. This means that we may remember Knowledge in our long-term memory that we did something, but not remember tends to fade away, meaning that it is less the details and most important, the bad accessible to be recalled. emotions associated. We tend to remember better good memories and forget bad experiences. This 44 memory
  38. 38. Important of experiences: end & start Due to the primacy and recency effects we tend to remember better the ending and start of an experience. On a presentation, which slides do you think that are more likely to be Remember by your audience? Quick facts Memory psychological effect: Primacy & Recency. In depth The recency effect tell us that humans are We should design considering memory, better at retrieving knowledge from their building great start experiences and even long-term memory as they are recent, or better endings. fresh in memory. As a tip for making presentations, For whatever reason, information convey your message on the few first and processed early is often most influential and last slides. we tend to access it easier. This is called the primacy effect. memory 45
  39. 39. To forget and how to improve memory In theory our memory has an infinite capacity, but as obvious we forget. Forgetting is more related to difficulties to retrieve content rather than content being erased from our memory. What’s the password for my home banking? ATM Computer PIN IM Email Home Banking Phone Nowadays we use so many passwords, making it very difficult to retrieve them from memory. Quick facts Memory retrieval is difficult due to: Weaker content associations, Weak content strength, Interference with associations. In depth Content in our long-term memory is Many different content is linked with organized with associations. The way these the same or similar associations. When associations are organized can determine searching for content these similarities can the successful retrieval of the content. cause interference and we may only retrieve Content becomes “weaker” due to low the unwanted content. frequency and low recency of usage. For example, when trying to retrieve the When content has weak or fewer password for our phone we may retrieve associations with other content, with time if the ATM password instead. The concept — we don’ use them they become “weaker.” password — has many similar associations. 46 memory
  40. 40. To forget and how to improve memory Memory guidelines The following recommendations guide you to overcome the memory retrieval limitations that humans have. Recommendations Regular use of information Encourage regular use of information to increase frequency and recency. If you want to remind yourself about something everyday or occasionally nothing best than using a wall poster to keep that information fresh and recent in your mind. Image from Flickr user neon.mamacita. Active verbalization or reproducing of information Encourage active verbalization or reproducing of information that is to be recalled. Taking notes in class or requiring read-back of heard instructions increases the likelihood that information will be Remember. Image from Flickr user romanlily. Use memory aids When a task is to be performed infrequently or when performance is critical, some printed or computer-based aids should be provided. List of procedures for checking potential failures of a printer. continues memory 47
  41. 41. To forget and how to improve memory Design information to be remembered Information to be more easily Remember, must be customer@company.com meaningful, concrete rather than abstract, organized in vs distinctive concepts, no jargon and easy to be guessed by c.dep@company.com other cues. Using full words instead of abbreviations, using wording familiar by the people that will use it, etc. Standardize Use the same terms, images, etc, in different contexts. For example on the automotive industry, the shift gears pattern is standardized being extremely easy to use shift gears even with different cars (by those who actually know how to drive). Image from Flickr user mccown. Support the development of correct mental models Design to support the development of correct mental models, Lock and unlock your by telling people what is happening. phone by using a PIN. Explaining in instructional manuals the reason for a particular action vs and what that action is. Prevent unwanted Giving visibility of system status, this is, to always give information access to your phone, to the user about what a system is doing currently, or what is the current state. by locking and unlocking your phone using a PIN. end 48 memory
  42. 42. Design information to remember By understanding how our long-term memory works, we can design information to last longer. As time goes by, we will have greater chances to remember that information. lorem ame sit dolor ipsum Quick facts Verbalization or reproduction of information. Concrete. Information able to be guessed. Distinctive concepts. Meaningful. Well-organized. In depth Content in our long-term memory is Avoid using abstract words, technical organized with associations. The way these jargon or unknown words as it will be more associations are organized can determine difficult to create associations in memory. the successful retrieval of the content. Important concepts should be distinctive When verbalizing or reproducing content enough from other content to avoid we’re increasing the likelihood that the interference with associations when information will be Remember. retrieving the same content. Besides human senses (e.g.: vision) we Organize information into chunks so that also perceive the world with information you reduce the amount of associations from our own expectancies and previous connecting to the same content. For knowledge. With this processing of example, dividing content using categories, information we may guess other you make it easier to memorize as people related content. will have to make more associations to the Information should be meaningful and same content. concrete for the audience it is intended. memory 49
  43. 43. 4 Interaction Design 51
  44. 44. Application responsiveness times Upon which time should we respond to users actions? How long can users wait for an operation to be completed before we provide any means of feedback? The user feels the Application like: instantaneously some delay unresponsive 0,1 1 10 Time Seconds Quick facts Human stimulus perception time = 100 milliseconds 0.1 seconds = immediate response, 1 second = limit for feeling of control, 10 seconds = unresponsiveness detected. In depth Humans take on average 100 [50 ~ 200] screen changes every 20 milliseconds milliseconds to perceive a stimulus. Less (1/50), meaning that a fastest response than this, there is the risk that the user won’t be noticed by users. won’t perceive the effect of the action. Examples: According to Apple Human On the technology side, if we for Interface Guidelines, the spinning wait example have screens refreshing at a rate of cursor is shown within 2 seconds after 50 HZ, it means that the image on the an application becomes unresponsive. 52 interaction design
  45. 45. Reading rates Reading rates depends on the eye movements plus the cognitive effort required by the text and finally the amount of text read for each eye movement we make. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt. Saccades - eye movements Type of reading Words per minute Memorization < 100 Learning 100-200 Comprehension 200-400 Skimming 400-700 These rates are approximations and you need to take that into account. Use it as a baseline for your design. Quick facts Eye movements (saccades). Cognitive processing. Amount of words read at each saccade. In depth When reading we make several eye At last, the type of content will influence movements (saccades) for each block of the time we take to understand it. Also we content we read. These saccades can take can read for memorization, learning, 230 [70 ~ 700] milliseconds. comprehension and skimming. All these Then we must calculate how many types of reading require a different cognitive words or letters we can read with each processing. saccade. This can be 4 to 5 letters or more depending on our reading speed. interaction design 53
  46. 46. Human brain processing times The Model Human Processor theory brings together a set of info gathered by hundreds of psychological studies about the human brain, setting processing times to be used in interaction design. Model human processor diagram from (the_psychology_of_human-computer_interaction, 1983) Quick facts Brain is composed of: Perceptual & Cognitive & Motor subsystems. In depth Each subsystem has a processor, and it is Perceptual - receive external stimuli connected to memory. We have a long-term and transforms into a representation the memory and working memory. The long- brain can understand, this is, transforms term memory keeps knowledge in our head light energy, touch, smell, etc, into for a long time and content retrieval is electric neural impulses. influenced by cues associated. Short-term Cognitive - Gives meaning to the memory is where temporarily content is perceptual inputs. hold to be processed by our brain. It gets Motor - Tells any part of the body to information either from perceptual system perform an action. or the long-term memory. continues 54 interaction design
  47. 47. Human brain processing times Model human processor diagram from (the_psychology_of_human-computer_interaction, 1983) δ — decay time; μ — capacity; τ — processing time; κ — type of information; WM — working memory; VIA — visual image store; AIS — auditory visual store; continues interaction design 55
  48. 48. Human brain processing times To use these values you must specify which parts of the brain will be in place for a specific task and then use the times mentioned in the respective table. Example: What delay time should we setup a TV remote control to execute a task so that the user feels that the remote is responding to his actions? Answer: This problem requires the user to perceive a stimulus. Understand the stimulus is not important so we only consider the perceptual processor. Looking at the processing times of the perceptual processor, we can obtain that 100 milliseconds is the time for the average person to perceive that he pressed the remote and something occurred. All measurements are as: average [slow ~ fast]. (in milliseconds) Perceptual Cognitive Motor Processing Time 100 [50 ~ 200] 70 [25 ~ 170] 70 [30 ~100] Minimum 50 25 30 Eyes Movement Average 100 70 70 230 [70 ~ 700] Maximum 200 170 100 Table with different processing times from the three brain subsystems. Working memory Visual Image Auditory Image Capacity 3 [2.5 ~ 4.1] chunks 17 [7 ~ 17] letters * 5 [4.4 ~ 6.2] letters* Decay time 7 [5 ~ 226] sec 200 [70 ~ 1000] ms 1500 [900 ~ 3500] ms Type of info Visual or acoustic Physical Physical Table with capabilities of memory. Long term memory has infinity decay time and capacity. * these numbers are difficult to fix, so they are approximations. Decay time is the half-life, which is the time after which the probability of retrieval is less than 50%. Capacity augmented Decay time for Decay time for with long-term memory 1 chunk 3 chunks Working 7 [5 ~ 9] chunks 73 [73 ~ 226] 7 [5 ~ 34] seconds memory seconds Table with memory abilities in special situations. end 56 interaction design
  49. 49. Fitts’s law in interaction design The difficulty of selecting and pointing to a target is dependable on the target's size and distance. By using the Fitts's law you can speed up or slow down the user interaction. Fitts’s law T - time to target. D - distance to target. a, b - constants. W - size of the target. vs Small “Stop Copying” button requires more precision. Rollover menus increase number of targets for selection. Screen corners - fast access. Quick facts Screen edges - infinite target size. More targets - slower selection. Four screen corners - fastest. Every pixel counts. In depth Screen edges have infinite size because you When moving the mouse, it is difficult can throw the mouse on it without for humans to do it straight (our hand is surpassing it. supported by the elbow!) For example, Corners are fast because they don’t multi-level roll overs can be really difficult to have neighbors to compete with. Small use because many accidental cursor targets, like an OK button , slow down movements will happen. This behavior adds users and ask for precision. an extra target, the open menu or the If you want users to slowly and precisely sub menu. access something, like a close button , Non active pixels on screen edges reduce the target size. In most cases always minimize the infinite size effect. One pixel make targets big enough. more or one less increase or decrease target size and mouse movement precision. interaction design 57
  50. 50. Hick-Hyman law in interaction design choices Decision time increases with number of choices and few complex choices leads to more rapid performance. 1 Complexity requires more time to decide vs Which printer controls is faster to use? 2 Less complexity versus more simplicity Writing “SOS” S O S · · · — — — · · · Qwerty keyboard Morse code On case 1, the more buttons you add to a printer, this complexity will result into a slower decision making. On case 2, even if Morse code is simpler we use less keystrokes with the qwerty keyboard. Quick facts Complexity requires more time to decide. Less complexity versus more simplicity. In depth The Hick-Hyman law states that humans simple choices. For example, a Morse code increase their decision time with the number operator has only 2 signals to use but is of choices. Because humans process info at slower than a typist with 26 choices. This a constant rate, if that info increases, the happens because the typist press less keys processing time will increase accordingly. to convey the same message as the Morse Nevertheless, some few complex choices code operator. leads to more rapid performance than more 58 interaction design
  51. 51. F-shaped pattern for reading web content Has been found in eye tracking visualizations that users when reading (scanning) a webpage, they follow an F-shaped pattern. An eye-tracking usability study revealed the F-shaped pattern for reading content on the Internet. Image from (f-shaped_pattern_for_reading_web_content, 2006). Quick facts Web content won’t be read First top info is the most important. throughly. Start sentences with significant words. In depth Don’t assume users will read everything you will decide to stay on the webpage based on write. They rather scan content to see if the what they first read. webpage has what they’re looking for. Because the bottom part of the webpage Don’t waste the top part of your website is scanned in a vertical thin shape, consider with irrelevant content. It’s likely that users having words that carry useful content at the beginning of each block. interaction design 59
  52. 52. Feedback, feedforward and affordances Feedback tells the user what’s happening. Feedforward tells the FFa consequence of an action before doing it. Affordance is a natural way of telling the users how something works. Feedback: tells users what’s the device status. Feedforward: the label tells users what’s the outcome of the action. Affordance: the icon and the color animation unconsciously instructs users how to unlock the phone. Main image is the main screen of a locked iPhone. Quick facts Giving the control to the user. Intuitive and easy to use. Self-explanatory and no training. In depth When telling the user what he’s doing or an application. This requires no explanation what’s the system status, we’re giving him or training. Affordances tell the user how to control. When in control people decide interact with something while feedforward better and feel happier. explains what are the outcomes of that By using feedforward and affordances interaction. This results in something we can implicitly say to the user how to use considered intuitive and easy to use. 60 interaction design
  53. 53. 5 Interface Design 63
  54. 54. Bevel-like effect in backgrounds For making a visual separation of content, the bevel effect provides a very effective and pleasant solution. Bevel-effect with two 1-pixel lines Bevel-effect with one 1-pixel line Quick facts Visually separated content using: two 1-pixel lines & one 1-pixel line. In depth A bevel is observed in real life objects with a slight contrast of each section color as in tables corners and they provide a and you get a pleasant visual distinction. visual meaning that there is a change in the Two 1-pixel lines object dimensions. These sequential We have two sections transitioning color differences in light are interpreted as visual from darker to lighter or vice-versa. Both 1- depth clues. Darker parts are interpreted as pixel lines will be in-between the two inside and lighter parts as outside. sections and each just has to be stronger The bevel-like effect can be created with than the section there're closer two. If the simple 1-pixel lines that provide a natural top section is darker, the near 1-pixel line affordance for making sections visually must be darker. Then the following 1-pixel independent from each other. line must be lighter than the bottom One 1-pixel line lighter section. Having two sections with contrasting colors, just draw in between a 1-pixel line 64 interface design
  55. 55. Small multiples in data visualization Small multiples are a type of visualization where small images are used to allow a quick comparison of data. At a glance you can see the weather forecast, by only looking at the small weather icons. Quick facts Comparison of data. Highlight big picture over detailed analysis. Quick to extract differences. In depth Small multiples are a set of small images making it fast to look and extract with related content, that allows us to see at differences. a glance differences among data. The structure and visual organization of Small multiples allows to quickly small multiples allows us to get a big picture compare related data, because content is over the content, instead of immersing in within the eye span and visually depicted, the details. interface design 65
  56. 56. Color is powerful in search One of the best ways to discriminate an object among others is by using color. If used sparingly and correctly can be really powerful to increase visual search speed. Can you find the red file? Quick facts Color has less features to decode. Use it sparingly. In depth On contrary to text and images, color glare, etc. By using too many colors we doesn't require our brain much effort to decrease the speed of our visual search. decode it. It has less visual elements to Finally, careful with color blindness, so decode such as lines, shapes, shadows, etc. don’t rely completely on color hues only. This simplicity makes color a powerful Use contrast as well. attribute for making visual search fast. Color may look different depending on the environment, with lighting, shadows, 66 interface design
  57. 57. Fast visual search When performing a visual search for an object if that object has a single discriminating feature (color, size, shape, texture, etc.) the search will be really fast as the object automatically “pops up.” Find the blue square: Serial search Parallel We must search item by item. The element “pops up”. Quick facts Serial versus parallel visual search. User expectancies determine search Visual “pop up” effect. starting point. In depth When searching for an object with a feature An object “pops up” faster, if we’re that stands out from the rest, we’re looking at the right spot. Users expectancies performing a parallel search. for a search starting point are driven by This psychological effect is called “pop up.” their previous experience or training. Otherwise, we’re performing a serial search You can use color, size, shape, texture, looking one by one. grouping, location, display density, etc, for making an object “pop up.” interface design 67
  58. 58. Depth perception Our eyes use some depth cues to interpret tridimensionality in the world and we can use them to design more natural graphical user interfaces. M. C. Escher, Relativity, 1953 Quick facts 3D World seen as 2D images. Illusions. Depth cues. In depth Our eyes represent the world in the retina world and provide natural affordances for with a two-dimensional image for each eye. some user interface elements. It is at the back of the eye that the Since we rely on cues for interpreting a tridimensional world is seen as 2D images. tridimensional world, our eyes can be easily Our visual system uses a set of visual misguided. The other senses like touch, cues existent in the world to convey depth. helps us deceive these illusions. We can use these cues to mimic the real continues 68 interface design
  59. 59. Depth perception Occlusion or interposition An occluded object looks to be farther away than the front object. The blue building looks farther because it is occluded by the vegetation and the red buildings. Size Smaller objects look to be farther away than similar but bigger objects. The smaller statues look farther away because they’re smaller than the one near the people. Aerial perspective or haze As light is scattered by the atmosphere, distant objects are subject to more scatter and appear fainter, bluer and less distinct. In the image we see that farther away zones are more blurry than the closer objects. Linear perspective Parallel lines will appear to converge into a vanishing point. This gives the impression of infinitive sizes. The road converges in the horizon. continues interface design 69
  60. 60. Depth perception Texture gradient Similar objects in a surface that will change size continuously will appear to form a surface in depth. The yellow ground is made of rectangles that get continuously smaller as they approach the orange wall, giving the impression of depth in the room. Shading Natural light comes from the top, so objects with some depth will have more light on the top than the bottom and vice-versa. The left buttons look outside while the right buttons look inside the blue background. Motion parallax When in movement, closer objects will look to move quicker than farther objects. The flower is closer because for the same movement it changed position more than the cow. continues 70 interface design
  61. 61. Depth perception Stereopsis Each eye sees a different image from the world. This binocular disparity in the retina, gives us some depth cues. When combining these images, our visual system uses the differences among them for inferring depth information. The example on the right shows the different images we see in each eye. Left eye & right eye Illusions Any application that only relies on visual control is not completely feasible due to these limitations. The triangle on the right is an impossible physical representation, but our eyes interpret it as being and looking real. All images except the Shading are from (sensation_and_perception_web_activities, 2006). end interface design 71
  62. 62. Gestalt principles A set of visual rules that act as a reference for our visual system when interpreting images. Quick facts Individual elements. Provides better visual experiences. Visual principles. In depth The visual world is composed of individual They identified a set of visual principles elements (lines, textures, etc.) that by that our visual system use as a reference to themselves are meaningfulness. A German interpret the world. These principles help us school of psychology (Gestaltism) concluded understand how humans visually perceive that our visual system interpret these things and we can use them to communicate elements as whole, emerging a greater more effectively. meaning in what we see. continues 72 interface design
  63. 63. Gestalt Principles Figure / ground An image that is on top of a background with enough contrast, creates a relationship of belonging. The figure belongs to this well defined ground. An animal warning sign reflects a belonging relationship between the animal (figure) and the sign itself (ground). Equilibrium (symmetry or order) When we look at something our eyes draw an invisible line on on which we look for a visual balance or equilibrium. Our eyes like balance in everything they process. The Preferences window layouts widgets with a center alignment, giving a much cleaner and nicer look to the window. Closure Our eyes have natural tendency to close gaps in objects. This is part of the efficient process it takes to guess how objects look like without requiring much processing effort from our brain. I m s re th t y w ll b ble to und rst a d th s s ntenc even though more than 25% of the letters were omitted. In this example despite there isn’t any triangle or circle on the figures we cannot avoid to actually fill the gaps and perceive a triangle and a complete circle. Isomorphic correspondence Some objects have associated meanings in our minds, and we will respond naturally to these objects as we imagine them. When looking at the image of the ice cream we may be temped to go out and buy one :) continues interface design 73
  64. 64. Gestalt Principles Proximity Objects nearby are considered to be part of a group. In this application toolbar, related buttons are grouped together giving a visual sense that they form a group and therefore are related in the functionality they provide. Continuation Similar to the principle of closure, our eyes tend to fill gaps in what looks unfinished objects. In this case, objects that look like they continue in space our eyes will try to follow that missing gap and give a sensation of continuation in space. The arrows on the application toolbar intuitively point out that there’s something else in front of it. Once we click it we get the remaining menu. Similarity Items that have similar visual characteristics will look to be part of the same group. The example on the right shows a group of songs rated with 5 stars. Despite these songs are apart from each other and not organized sequentially they look like belonging to a group. end 74 interface design
  65. 65. Combination of color brightness levels light By mixing the brightness levels of a single color instead of using vs different color hues we can obtain imagery that is more appealing dark and easy to read. Example: light blue vs dark blue By using the same color with opposite brightness levels, at a glance everything seems uncluttered and content is easy to read with enough contrast. Quick facts Visually appealing. Less dimensions to interpret. In depth Combining the same color on an object the lighter versus darker color combination by only mixing the brightness levels, also gives a good contrast. Since we’re using can create more easy to look and more the same color hue the workload for our appealing imagery. visual system is also reduced. This happens because we’re mixing less colors, therefore less mental load effort and interface design 75
  66. 66. Display design principles Displays should be designed according to humans’ perception and cognition. By understanding humans’ limitations we can design a more usable and pleasant display. 1 display design 2 ..... 13 principles Quick facts 1 - Perceptual principles. 3 - Attention principles. 2 - Mental model principles. 4 - Memory principles. In depth A display is any human-made artifact that relate to how we perceive the world, how carries information to be consumed by we think about it and how we store another human. It can be a printout, a information in memory. Considering these computer screen, factories gauges, phone aspects, 13 principles are explained to help visors, etc. designers designing better displays. The human machine is complex and works under several limitations. These can continues 76 interface design
  67. 67. Display design principles 1 - Perceptual principles Principles related to the way we perceive the world. Legibility Contrast, font size, illumination, visual angles, noise. font size and color also influences contrast Avoid absolute judgment limits Don’t ask users to judge the level of a represented variable using a single sensory variable, like color, size or loudness, Can you select the Aqua blue? which contains more than five to seven possible levels. This is an invitation to errors of judgment. Top-down processing Expectancies, desires and experience influences how people will interact with a system. Confirm people expectations. ⇧ + ⌘ + Z For example on a Mac computer, across the system there is a Standard Mac OS Undo shortcut. shortcut used for undo and one application, Microsoft Office for Mac, uses another shortcut not confirming Mac users' expectations. ⌘ + Y Mac Office Undo shortcut. Redundancy gain When the viewing or listening conditions are degraded, a message is more likely to be interpreted correctly when the message is expressed in more than one way. Using icons with labels are always a good design prerogative. continues interface design 77
  68. 68. Display design principles Discriminability. Similarity causes confusion: use discriminable elements. Similar appearing signals are likely to be confused either at the time they are perceived or after some time if the signals Altitude vs Attitude must be retained in working memory before action is taken. In aviation Altitude and attitude are very different things, however they are very easy to confuse. 2 - Mental model principles People form mental models about how something works and these expectations must be matched. Principle of pictorial realism A display should look like the variable it represents. Imagine that a volume control would reduce the sound by moving the slider from right to left. It would be unintuitive. Principle of moving part The movement of any element within a display should match the users’ mental model of how that information actually moves in the physical world. A speed meter dial goes from the left to the right as you accelerate meaning that as you increase the speed, the dial must also increase. Image from Flickr user michaelroper. continues 78 interface design
  69. 69. Display design principles 3 - Attention principles Humans have restricted attention resources and displays should minimize the workload of attention. Minimizing information access cost Information should be easily accessed because there is always a cost in time and effort to move our attention between different displays locations. The image on the right shows System Preferences on a computer and everything is located in this place minimizing the cost of accessing this related information. Proximity compatibility principle Related information used in the same task should be visually close to each other. This follows the Gestalt principle of proximity, that people relate information when it is close to each other. Principle of multiple resources Dividing information across different resources can minimize 8:30 ENTRY processing that information. GOOD WORK EMANUEL FERNANDES Presenting visual and auditory information concurrently, helps workers to easily understand the outcome of scanning their working card through the monitoring device. + Job entry monitoring continues interface design 79
  70. 70. Display design principles 4 - Memory principles Since our memory is very limited in terms of storage we must minimize the heavy usage of working memory. Replace memory with visual information: knowledge in the world Having a very limited working memory and being difficult to retrieve information from our long-term memory, we should provide information in the display instead of making users to remember. Recognize instead of recalling. The usage of check lists lets users rely on written predefined set of tasks, instead of having to remember them. check lists Principle of predictive aiding Humans are no very good at predicting the future. This is related to restrictions in the amount of information we can deal at the same time in the working memory. When necessary, some prediction should be displayed. A GPS navigator predicts the path for the driver, removing one extra cognitive task. Principle of consistency Since we store information in memory by means of associations, once we have some habits it is very difficult to change them. So displays should always be consistent with the knowledge users already have about a certain context. The close, minimize and maximize buttons in visual different applications are consistent. end 80 interface design
  71. 71. Dynamic displays: analog vs digital 12:21 Dynamic displays depicts a variable that continuously changes quantity. Analog displays are better for detecting changes and making comparisons while digital are better for accurate readings. Rate of changes and direction Easy to estimate at a glance Which is faster, at a glance, to check if lunch hour is nearby? analog Accuracy and range Easy to compare: Which clocks have similar time ranges? Which is faster to detect these similarities? analog Quick facts Analog: Easy to estimate at a glance, Digital: Easy to compare, Accuracy & range. Rate of changes and direction. In depth Analog displays are better to quickly rates of change and direction of the variable estimate values as the visual depiction being measured. allows a faster cognitive processing On the other hand, digital are more compared to numbers in digital. Also this accurate and allow a wider range of values makes it easier to compare values in analog to be displayed. representation. One is not better than the other, we Analog displays show the part within the should make a choice according to the whole, resulting in a better perception of the design situation and after analyzing the advantages and disadvantages of both. interface design 81
  72. 72. Configural displays “(...) multiple displays of single variables can be arrayed (...), so configural that certain properties (...) will emerge from the combination of values on the individual variables.” In Human Factors Engineering. Invoices view Payment evolution across several months As minhas facturas: ... 150 125 100 75 ! 50,00 ! 55,00 ! 65,00 ! 75,00 ! 74,32 ! 110,00 50 ! 25 Julho Agosto Setembro Outubro Novembro Dezembro 0 2008 Dezembro 2008 Pagamento: Ainda por pagar. Multibanco Débito na Conta Payshop Tipo Serviço Preço Referência: 312 121 212 Serviço 1 32,00 Serviço 2 43,00 Código: 21212 Serviço 3 35,00 Valor: 110,00 ! 110,00 SMS Enviar referências do Multibanco por SMS Detalhes Imprimir PDF By combining the individual values of each monthly invoice, a background line is used to show the evolution of monthly payments across several months. This is an example of a configural display. Quick facts New info arise from visual single variables. Visual arrangements of info. In depth Sometimes the visual depiction of several visual dimension that we can use to show variables, can inadvertently result into another type of information. another variable of interest. For example, The way we arrange elements in space a square has the dimensions of height and can be used to enforce and show certain width which we can visually observe. information through visual relations. From this arrangement, the area of the square (height times width) gives another 82 interface design
  73. 73. 6 Text 85
  74. 74. Web: users scan instead of reading On the web users usually scan webpages until they find what they’re looking for. Don’t assume users will read your entire webpage in the order you expect. Quick facts Reading from the computer is tiring. Time is key. The web is about clicking. People have specific goals. In depth Nowadays the computer screen technology With specific goals looking for isn’t as good as paper, so most users don’t information, users must filter all the like to read long paragraphs on the web. information the web gives, so they first Users are in control on the web, so if make a quick scan to see if the webpage they’re not satisfied they'll just go elsewhere. is worth, then they might read. People’s life is fast and if they don’t Finally, ask yourself as a web user, find what they want they will move on, would you fully read your own paragraphs? with no hesitation. 86 text
  75. 75. Easy and effective instructions 1 To understand instructions we must rely on our working memory 2 to hold that information in our mind. Taking this limitation into 3 account we can design more effective instructions. vs 1 - Select the object. Select the desired object and afterwards 2 - Drag it to the Trash. drag it to the Trash to delete it. Do A. Then do X and Y. Before doing X and Y, do A. If light is red, the engine must be shutdown. Don’t start the engine if light is red. Long-term memory is for knowledge stored forever. The working memory short information to be processed in the moment. vs Long-term memory and working memory is respectively for knowledge stored forever and short information to be processed in the moment. Quick facts Short & simple steps. Positive sentences. Consistency between order of text and actions. In depth Our working memory can hold in average 3 or Under degraded sensory conditions, 7 chunks of information. To perform an action negative words like No, Don’t, Do not, can be while still holding the instruction in memory, ignored and the opposite of the action can be it must be simple and short. performed. This extra chunk of information Instructions should be in the same needs to be hold in memory and we may order of the actions so that users forget it when acquiring the rest of the are not confused. instruction. As a guideline always write positive instructions. text 87
  76. 76. Name buttons with intended behavior You should always name a button with its related action, to make clear to users the output of that action. If you didn’t read the message which button would you press? Cancel or OK; Cancel or Erase? Both dialogs are equal and they both ask the user if he or she wants to erase the disk. By using the correct label as with the button “Erase”, users know better the possible outcome of an action without really reading the message. This behavior can prevent many undesired actions to be performed. Quick facts Clear. Avoid errors. In depth Always label buttons using a verb that like to be the best outcome. Using a clear tells the action achieved with the button. It verb, the user does not needs to read the is clearer for the user what action will be entire message to know to a certain degree performed. what will be the result of that action. You can also prevent the user to With some exceptions always label mistakenly perform an action. For example, buttons with action verbs like, Save, Print, when displaying an alert to the user, he or Send Email, Erase, Delete, Search, instead of she may not read the entire description and a simple OK. will perform an action based on what looks 88 text
  77. 77. Usage of ALL CAPS and SMALL CAPS The glyphs of a typeface in all caps or small caps are better used aaA when you want to get attention with words or small sentences and when you have limited space available. abcdefihjklmn size ABCDEFIJKLMN abcdefihjklmn stroke variation ABCDEFIJKLMN ALL CAPS examples: LOREM IPSUM DOLOR SIT AMET, CONSECTETUR DO, SED DO EIUSMOD TEMPOR. Filling every pixel available. Getting attention. More difficult to read! Quick facts ALL CAPS glyphs: have less variation in strokes than lowercase. are taller than lowercase, Small caps can be used to emphasize. In depth All caps glyphs are taller than their Glyphs in all caps have less variation in lowercase counterparts. This means that the stroke, making it more difficult to same letters within the same size will look differentiate between each glyph. Therefore bigger in all caps than lowercase. Therefore it is unsuitable for long sentences. it is suitable for single words to catch If you want to emphasize something in a attention, like WARNING or DANGER. They are sentence without making it stand too much, also suitable when you’re limited in space. you can use small caps. These glyphs have the same x-height as the lowercase. text 89
  78. 78. 7 Color 91
  79. 79. Color movement Colors can be characterized by a movement sensation they induce in our eyes. Warm colors like red appear to move outward. Cool colors like blue appear to move inward. Eye lens focusing: Human eye Light wavelengths Lens Retina Inward: colors appear to move backward (blue). Outward: colors appear to move forward (red). Just right: colors appear to be stopped (green). Quick facts Eye lens focusing. Outward: forward movement (red). Inward: backward movement (blue). Just right: no movement (green). In depth We have a lens in our eye that refracts and Wavelengths in the blue spectrum are focus light rays to obtain a sharp clear focused in front of the retina and vice-versa image in the retina. However different for red. As a consequence blues appear to light wavelengths are focused move backward and reds forward, while differently by the lens. green focus perfectly inducing no movement. 92 color
  80. 80. Color blindness “Color blindness, a color vision deficiency, is the inability to perceive differences between some of the colors that others can distinguish.” In Wikipedia Mainly two types: Red-green & Blue-Yellow. readable? readable? readable? color blinded people may see readable? readable? readable? Color blindness example. Quick facts Lost of one photopigment. Distinguish colors with brightness. In depth Some people lack one of the photopigments There are mainly two types of color used in eye’s retina to transmit color. blindness: Red-green & Blue-Yellow. When this happens, people can only Since about 8% of men and 0.4% of perceive differences in some colors by women are color defective, in your design the brightness levels. avoid using saturated colors with the same brightness levels. color 93

×