Presentation is loading. Please wait.

Presentation is loading. Please wait.

2. Capabilities of Human Beings

Similar presentations


Presentation on theme: "2. Capabilities of Human Beings"— Presentation transcript:

1 2. Capabilities of Human Beings
In this chapter you will learn about: Human senses, perception, memory, and interruptions Mental models, metaphors, and perceived affordance Some design guidelines based on these topics Chapter 2: Capabilities of Human Beings Copyright © 2004 by Prentice Hall

2 Copyright © 2004 by Prentice Hall
Definitions Cognitive psychology: the study of how people perceive, learn, and remember Cognition: the act or process of knowing The issue: confronted with a new experience (or website) how does a user draw on past experience to make sense of it? Example: underlined blue text is understood to be a link Example: Windows Interface So do I wish I had used some color other than blue for text emphasis? Maybe a little, but it’s not underlined, and it is part of the color scheme in the Microsoft design template I used (Blends). Chapter 2: Capabilities of Human Beings Copyright © 2004 by Prentice Hall

3 Copyright © 2004 by Prentice Hall
Why do we care? Because when people try to understand something, they use a combination of What their senses are telling them The past experience they bring to the situation Their expectations Chapter 2: Capabilities of Human Beings Copyright © 2004 by Prentice Hall

4 Copyright © 2004 by Prentice Hall
Senses Senses (sight, hearing, smell, taste, touch) provide data about what is happening around us We are visual beings (“See what I mean?”) Designing good Web materials requires knowledge about how people perceive Have a little list of other visual metaphors, or invite suggestions from class. “I can’t see Dan playing Falstaff” is a possibility. Chapter 2: Capabilities of Human Beings Copyright © 2004 by Prentice Hall

5 Copyright © 2004 by Prentice Hall
Constructivism Our brains do not create pixel-by-pixel images Our minds create, or construct, models that summarize what comes from our senses These models are what we perceive When we see something, we don’t remember all the details, only those that have meaning for us Sigh. Artists develop “visual memory” and can paint quite accurately from memory. And a few people have what is properly called “eidetic memory,” popularly called photographic memory. But these are exceptions; very few people have eidetic memory, and artists study long and hard to develop visual memory. When we say “Our brains do not create pixel-by-pixel images,” we mean it in the context of the kinds of things users need to remember. If a student has taken a cognitive psych course and challenges the first bullet, give him the floor. She’s right, but not in this context. Chapter 2: Capabilities of Human Beings Copyright © 2004 by Prentice Hall

6 Example: familiar objects that we see, but don’t store in detail
How many links are there on top menu of amazon.com? What are the colors on your favorite cereal box? How many lines are there in the IBM logo? Who cares? Moral: People filter out irrelevant factors and save only the important ones Chapter 2: Capabilities of Human Beings Copyright © 2004 by Prentice Hall

7 Copyright © 2004 by Prentice Hall
Context Context plays a major role in what people see in an image Mind set: factors that we know and bring to a situation Mind set can have a profound effect on the usability of a web site Chapter 2: Capabilities of Human Beings Copyright © 2004 by Prentice Hall

8 An example of context: are these letters the same?
Chapter 2: Capabilities of Human Beings Copyright © 2004 by Prentice Hall

9 Well, yes, but now in context:
Chapter 2: Capabilities of Human Beings Copyright © 2004 by Prentice Hall

10 Exercise applying this idea
Keep a diary of the number of times you couldn’t “see” something that was in front of you, because you expected it to look different: The teabags that were in the “wrong” box The sugar container that was right there—but you were looking for small packets of sugar A book that you remembered as having a blue cover, but it’s really green The button you couldn’t “see” because it was flashing, and your mind set is that anything flashing is an advertisement Chapter 2: Capabilities of Human Beings Copyright © 2004 by Prentice Hall

11 Copyright © 2004 by Prentice Hall
Figure and ground Images are partitioned into Figure (foreground) and Ground ( background) Sometimes figure and ground are ambiguous Chapter 2: Capabilities of Human Beings Copyright © 2004 by Prentice Hall

12 Figure and ground: What do you see?
A much-used example, but some students will not have seen it. It’s either a vase/birdbath/whatever, or it’s two profiles of people facing each other. Which is a pottery student more likely to see? A photography student? Mind set at work again. Chapter 2: Capabilities of Human Beings Copyright © 2004 by Prentice Hall

13 Copyright © 2004 by Prentice Hall
Gestalt psychology “Gestalt” is German for “shape,” but as the term is used in psychology it implies the idea of perception in context We don’t see things in isolation, but as parts of a whole Somewhere in this section, emphasize the connection with website design, and note that these principles are applied directly—sometimes with different names—in Chapter 5, Visual Organization. Most HCI books have a section on Gestalt psychology; not all make the connection with graphic design. Chapter 2: Capabilities of Human Beings Copyright © 2004 by Prentice Hall

14 Five principles of Gestalt psychology
We organize things into meaningful units using Proximity: we group by distance or location Similarity: we group by type Symmetry: we group by meaning Continuity: we group by flow of lines (alignment) Closure: we perceive shapes that are not (completely) there “Gestalt” is capitalized because it’s a German noun, and nouns are capitalized in German. “Gestalt” is not the name of an early psychologist. Chapter 2: Capabilities of Human Beings Copyright © 2004 by Prentice Hall

15 Copyright © 2004 by Prentice Hall
Proximity We see three groups of two lines each. We see three groups of ellipses, even though one “group” has only one member. (Maybe this is obvious, but there is no connection between the two examples.) Chapter 2: Capabilities of Human Beings Copyright © 2004 by Prentice Hall

16 Example: a page that can be improved . .
Chapter 2: Capabilities of Human Beings Copyright © 2004 by Prentice Hall

17 By using proximity to group related things
An example of a fundamental application of proximity: things that are related should be grouped together, and things that are not related should be separated from each other. We sometimes speak of these two aspects as positive proximity and negative proximity. A good quiz or test question: What does proximity say about how links on a page should be grouped? You will say this half a dozen times at least; be brave—put in on a test and see how many people learned it. And if they didn’t, you get to drive it home in going over the exam. Chapter 2: Capabilities of Human Beings Copyright © 2004 by Prentice Hall

18 Copyright © 2004 by Prentice Hall
Similarity Ask, “What do you see here?” and you are more likely to get “three yellow circles and six green ones” than “three rows of three circles each.” The similarity is what stands out. Actually, it’s the difference that stands out, but that’s the other side of similarity. Chapter 2: Capabilities of Human Beings Copyright © 2004 by Prentice Hall

19 Example: can you use similarity to improve this page?
Unless you have given students handouts of the slides, in which case they will be reading ahead, give them a minute to suggest things. Making the fonts the same will probably come last; most students have extremely low sensitivity to font issues. This is ahead of the game, but if you don’t believe that, give a no-credit pop quiz: print a line of Times Roman and a line of Arial, and ask students to identify the serif font and the sans serif font. See if they do better than chance. I know people who are positive that any educated person knows about this; sadly, not true. Of course this is off the subject! But if you do plan to do anything on typography, or perhaps especially if you don’t, take this chance to get in a 30-second plug. Every educated person should know the difference between serif and sans serif. Chapter 2: Capabilities of Human Beings Copyright © 2004 by Prentice Hall

20 Sure: make the buttons the same size:
Chapter 2: Capabilities of Human Beings Copyright © 2004 by Prentice Hall

21 Copyright © 2004 by Prentice Hall
Anything else? Chapter 2: Capabilities of Human Beings Copyright © 2004 by Prentice Hall

22 Sure: use the same font everywhere:
Chapter 2: Capabilities of Human Beings Copyright © 2004 by Prentice Hall

23 Copyright © 2004 by Prentice Hall
Symmetry: we use our experience and expectations to make groups of things At least that’s how they appear to the authors, both of whom have a programming background. Square brackets in a program almost always occur in pairs, so that’s how we see them here. Depending on the prerequisites for your course, you may have students who have zero programming experience. They may see this example differently. In the triangles, some students may object: “We don’t just ‘see’ two triangles; those are triangles.” Use Ctrl-A Ctrl-P to get a pencil tool, and draw to show how the figure can be seen as three non-overlapping areas, only the center one of which is a triangle. (You can change the pencil tool color: right-click while in this mode to see options.) We see two triangles. We see three groups of paired square brackets. Chapter 2: Capabilities of Human Beings Copyright © 2004 by Prentice Hall

24 Continuity: flow, or alignment
In fact there are two different ways to make L-shaped groups of the circles. We see curves AB and CD, not AC and DB, and not AD and BC We see two rows of circles, not two L-shaped groups Chapter 2: Capabilities of Human Beings Copyright © 2004 by Prentice Hall

25 Can you use alignment (one form of continuity) to improve this page?
The solid lines are not part of the page: see the next slide. Chapter 2: Capabilities of Human Beings Copyright © 2004 by Prentice Hall

26 Copyright © 2004 by Prentice Hall
Sure: the lines on the previous slide show how to use horizontal alignment A preview of alignment, treated much more fully in Chapter 5, Visual Organization. Chapter 2: Capabilities of Human Beings Copyright © 2004 by Prentice Hall

27 But why stop? Left-align both columns to get vertical alignment also
Chapter 2: Capabilities of Human Beings Copyright © 2004 by Prentice Hall

28 Closure: we mentally “fill in the blanks”
All are seen as circles Chapter 2: Capabilities of Human Beings Copyright © 2004 by Prentice Hall

29 Copyright © 2004 by Prentice Hall
2.4 Memory Hierarchical Model Sensory Short Term Practice and effort needed to make this transfer  Long Term Chapter 2: Capabilities of Human Beings Copyright © 2004 by Prentice Hall

30 “The Magic Number 7, Plus or Minus 2” George Miller, 1956
Value of “ chunking” vs. 212DanHome 10 chunks vs. 3 (assuming 212 is familiar) Can you remember: Vsdfnjejn7dknsdnd33s Miller did speak in terms of chunks. Some people dismiss his paper as irrelevant because it only has to do with remembering phone numbers, but that’s not an accurate reading. It is also true, however, that we try not to force users to remember lists. If they need the list, keep it visible. The paper is a good read; Google will find it for you. Chapter 2: Capabilities of Human Beings Copyright © 2004 by Prentice Hall

31 Copyright © 2004 by Prentice Hall
How many chunks in . . . 20? Not really: www. best book buys .com Chapter 2: Capabilities of Human Beings Copyright © 2004 by Prentice Hall

32 Copyright © 2004 by Prentice Hall
Recognition vs. recall Why is a multiple choice test easier than an essay test? Multiple choice: you can recognize the answer Essay: you must recall the answer A computer with a GUI allows us to recognize commands on a menu, instead of remembering them as in DOS and UNIX Chapter 2: Capabilities of Human Beings Copyright © 2004 by Prentice Hall

33 Copyright © 2004 by Prentice Hall
Memory aids Post-It® notes In Windows ctrl- N (new) ctrl- C (copy) ctrl- S (save) Favorites List and bookmarks to store URLs Hyperlinks—if their wording indicates the content of the target page. (“Click here” is not a memory aid.) Chapter 2: Capabilities of Human Beings Copyright © 2004 by Prentice Hall

34 Copyright © 2004 by Prentice Hall
2.5 Interruptions Focusing attention and handling interruptions are related to memory In website design you need to give cues or memory aids for resuming tasks: Back button Followed links change color When filling in forms, blank boxes show where to pick up the job Chapter 2: Capabilities of Human Beings Copyright © 2004 by Prentice Hall

35 Interruptions, continued
How fast must a system respond before the user’s attention is diverted? (Robert Miller, 1968) Response time User reaction < 0.1 second Seems instantaneous < 1 sec Notices delay, but does not lose thought > 10 sec Switches to another task Chapter 2: Capabilities of Human Beings Copyright © 2004 by Prentice Hall

36 Copyright © 2004 by Prentice Hall
2.6 Mental Models How do people use knowledge to understand or make predictions about new situations? People build mental models For example, a car: put gas in, turn key, and it runs. (Not exactly a car mechanic’s model!) Can’t ignore user’s mental model And how do we know what the users’ mental models are? Through user testing. Chapter 2: Capabilities of Human Beings Copyright © 2004 by Prentice Hall

37 Copyright © 2004 by Prentice Hall
2.7 Metaphors Way to relate a difficult or more abstract concept to a familiar one Open file Save file Chapter 2: Capabilities of Human Beings Copyright © 2004 by Prentice Hall

38 Metaphors have problems
Disadvantage: metaphor may not be widely known or correctly understood The mailbox icon meant nothing outside rural United States until explained. And it’s backwards: we put the flag up to tell the mailman that we have put mail in the box to be picked up. Chapter 2: Capabilities of Human Beings Copyright © 2004 by Prentice Hall

39 Copyright © 2004 by Prentice Hall
2.8 Affordance Affordance: “The functions or services that an interface provides” A door affords entry to a room A radio button affords a 1-of-many choice On a door, a handle affords pulling; a crash bar affords pushing Chapter 2: Capabilities of Human Beings Copyright © 2004 by Prentice Hall

40 Copyright © 2004 by Prentice Hall
Perceived affordance We want affordance to be visible and obvious to the user The Up and Down lights on an elevator door should have arrows, or they should be placed vertically so that the top one means Up On a car, turning the steering wheel to the left makes the car go left Chapter 2: Capabilities of Human Beings Copyright © 2004 by Prentice Hall

41 Example of perceived affordance
Top switch controls top lights By convention, with a light switch “up” is “on” Chapter 2: Capabilities of Human Beings Copyright © 2004 by Prentice Hall

42 2.9 Design Guidelines for the Web
Lessen burden on user’s memory: Use recognition instead of recall Help users chunk information Require as little short-term memory as possible Consider user’s mental models Provide visual clues and memory aids Provide feedback: let users know their input was received Chapter 2: Capabilities of Human Beings Copyright © 2004 by Prentice Hall

43 Copyright © 2004 by Prentice Hall
Summary In this chapter you learned that Sight is the most important sense—on the Web and in general We construct mental models; we don’t store bitmaps Context and expectations influence what we see Five principles of Gestalt psychology: proximity, similarity, symmetry, continuity, closure Metaphors are tricky Chunking helps memory Perceived affordance depends on users’ backgrounds, mental models, and expectations Chapter 2: Capabilities of Human Beings Copyright © 2004 by Prentice Hall


Download ppt "2. Capabilities of Human Beings"

Similar presentations


Ads by Google