Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

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

HCI Quick Guide (Human-Computer Interaction Quick Guide) Image from Flickr user Will Lion. HCI Quick Guide Human-Computer Interaction Quick Guide Document version Revision date Author (s) Changes 1.0 22 set 2009 Emanuel Fernandes Initial document. Author emanuel.m.fernandes@gmail.com "Although many people think things just happen, there are those who believe that science must be behind most decisions we take most of the days. Designing, selling, advertising, managing, all these tasks require a set of understanding skills about the context and the subject they deal with. The so many times used “common sense” or “best guessing” seem to be a good way of driving people when performing a task. But they are not! This is why many times things go wrongly and we wonder why. Even if there is always a certain degree of uncertainty, derived from the world we live, guiding our decisions with some sort of scientific knowledge most of the times gets the job well done. This also applies to designing user interfaces. Only by understanding how humans work we can better design something to be used by humans. That’s why I urge all of you to listen to those who understand this field of Human-Computer Interaction, or at least to inform yourself before making guessed design decisions, otherwise there is a very likely chance that most of the times, guessed decisions will fail.” by emanuel fernandes HCI Quick Guide Human-Computer Interaction Brief Contents first and foremost The user is not like me 13 Chapter 1 Perception 15 Chapter 2 Cognition 21 Chapter 3 Memory 41 Chapter 4 Interaction Design 51 Chapter 5 Interface Design 63 Chapter 6 Text 85 Chapter 7 Color 91 Chapter 8 Motion 109 Chapter 9 Metaphors 113 Contents first and foremost The user is not like me 13 Chapter 1 Perception 15 16 Perception: top down vs bottom up 17 Change blindness: overlook fine differences 18 Visual area with sharp details is very small Chapter 2 Cognition 21 22 Functional fixedness 23 Attention limitations 24 Decision-making heuristics and biases 30 Multitasking and time-sharing 34 Signal detection theory 38 Situation awareness Chapter 3 Memory 41 42 Working memory limitations 43 Long-term memory retrieval issues 44 Remember good memories, forget bad ones 45 Important of experiences: end & start 46 To forget and how to improve memory 49 Design information to remember Chapter 4 Interaction Design 51 52 Application responsiveness times 53 Reading rates 54 Human brain processing times 57 Fitts’s law in interaction design 58 Hick-Hyman law in interaction design 59 F-shaped pattern for reading web content 60 Feedback, feedforward and affordances Chapter 5 Interface Design 63 64 Bevel-like effect in backgrounds 65 Small multiples in data visualization 66 Color is powerful in search 67 Fast visual search 68 Depth perception 72 Gestalt principles 75 Combination of color brightness levels 76 Display design principles 81 Dynamic displays: analog vs digital 82 Configural displays Chapter 6 Text 85 86 Web: users scan instead of reading 87 Easy and effective instructions 88 Name buttons with intended behavior 89 Usage of ALL CAPS and small caps 8 contents Chapter 7 Color 91 92 Color movement 93 Color blindness 94 Saturated colors and visual fatigue 96 Aging and sensitivity to blue 97 Constraints of pure blue color 99 Green: easiest color for the eye 100 High contrast variations and visual fatigue 101 Visual periphery colors: blue & yellow 102 Brighter colors: middle of visible spectrum 103 Yellow: most luminous color 104 Color contrast Chapter 8 Motion 109 110 Periphery vision is sensitive to motion 111 Animation from still images Chapter 9 Metaphors 113 114 Shopping cart metaphor on the web Bibliography references 118 Bibliography 123 Subject index 130 contents 9 There are out there an immense quantity of human-computer interaction (HCI) design principles that guide designers in what or not to do when designing a user interface. Those who work in the field many times apply these principles unconsciously and may even forget some of them. This is normal, as humans memory have many limitations. Another problem is that these principles are spread across many disciplines and may be difficult and time- consuming to access. To resolve these issues, the HCI Quick Guide was envisioned. This is a guide with the most important principles in the Human-Computer Interaction field that aims at providing information in a quick way. Besides enumerating design and usability principles, the guide contains practical examples and short scientific explanations for the most sceptic ones. Further reading can be done by following the bibliography. Because it is always important to maintain credibility in our actions or explanations, this guide also has the goal of helping people to better understand why some interfaces are well or badly designed. Explaining each principle is not only important to explain certain design solutions but is also important for designers to make better, confident and informed design decisions. The audience of this guide are primarily designers. Interaction, user experience, usability designers, whoever you can recall of people that work into creating great applications that have a human interaction. If you create, this is, design anything, that any human will use, then this guide is for you. For those, who also want to know more about what is Human-Computer Interaction, then you can get a better understanding as well. This guide only contains what the author considered of being the most important HCI principles and therefore is not a complete set of HCI principles. These are organized into logic related chapters to make the search and reading easier. The author as a designer himself has to warn, that these are principles and guidelines that should guide our design but not in a rigidly way as different problems may require different solutions. Some principles even go against others, but this is normal and as in other aspects of life, there always pros and cons. As a good designer, it is you job to critically analyze each situation and make the best design for it, even if breaking some of these principles. Nevertheless, don’t make use of this excuse for not getting your work well done :) Preface 12 first and foremost 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. Quick facts 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 13 1 15 Perception 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. Quick facts 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 name than a meaningless email and phone number. 16 perception Experience Knowledge (Expectancies and Desires) The senses Stimulus World Top-Down Processing Perception Bottom-Up Processing Relation between top-down and bottom-up processing when perceiving the world around us. Image based on diagram in (an_introduction_to_human_factors_engineering, 2004). Emanuel Hernandez Emamhernandez@company.com 96-308-4572. is a better design than is Emanuel Hernandez Emamhernandez@company.com 96-308-4572. Example: Change blindness: overlook fine differences People are bad at noticing subtle changes in subsequent images. This is a psychological effect called “change blindness.” Working memory limitations. Subtle changes unnoticed. Make important changes noticeable. Quick facts perception 17 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. Can you notice the differences between each other? One screenshot is before logging in and the other is after logging in. Visual area with sharp details is very small Our eyes cannot see details within the entire area we’re looking at. We are capable of capturing details only if we fixate our gaze on a small area within the entire visual field. Visual acuity is smaller than people think. Flower image: (sensation_and_perception_web_activities, uploads/Finance/ hci-quick-guide.pdf