HCI Quick Guide


Published on

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 software apps, websites, physical objects, marketing, etc.

Published in: Design
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

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