Brugergrænseflader til apparater BRGA Presentation 6: Capabilities of Human Beings.
-
Upload
maryann-hill -
Category
Documents
-
view
218 -
download
0
Transcript of Brugergrænseflader til apparater BRGA Presentation 6: Capabilities of Human Beings.
![Page 1: Brugergrænseflader til apparater BRGA Presentation 6: Capabilities of Human Beings.](https://reader035.fdocuments.us/reader035/viewer/2022070410/56649ec05503460f94bcaff8/html5/thumbnails/1.jpg)
Brugergrænseflader til apparater BRGA
Presentation 6:
Capabilities of Human Beings
![Page 2: Brugergrænseflader til apparater BRGA Presentation 6: Capabilities of Human Beings.](https://reader035.fdocuments.us/reader035/viewer/2022070410/56649ec05503460f94bcaff8/html5/thumbnails/2.jpg)
Ingeniørhøjskolen i ÅrhusSlide 2 af 44
Outline
• Recap from last time– Methods vs. Guidelines & Heuristics– Types of Guidelines & Heuristics– Nielsen's 9 Heuristics and How to use– Method: Heuristic Evaluation– Other Guidelines– And before that: Cognitive HCI (connected to this)
• This lesson:– Human senses, perception, memory, and interruptions– Mental models, metaphors, and perceived affordance– Some design guidelines based on these topics
![Page 3: Brugergrænseflader til apparater BRGA Presentation 6: Capabilities of Human Beings.](https://reader035.fdocuments.us/reader035/viewer/2022070410/56649ec05503460f94bcaff8/html5/thumbnails/3.jpg)
Ingeniørhøjskolen i ÅrhusSlide 3 af 44
Definitions
• Recap: Cognitive psychology: the study of how people perceive, learn, and remember
• Recap: 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
![Page 4: Brugergrænseflader til apparater BRGA Presentation 6: Capabilities of Human Beings.](https://reader035.fdocuments.us/reader035/viewer/2022070410/56649ec05503460f94bcaff8/html5/thumbnails/4.jpg)
Ingeniørhøjskolen i ÅrhusSlide 4 af 44
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
![Page 5: Brugergrænseflader til apparater BRGA Presentation 6: Capabilities of Human Beings.](https://reader035.fdocuments.us/reader035/viewer/2022070410/56649ec05503460f94bcaff8/html5/thumbnails/5.jpg)
Ingeniørhøjskolen i ÅrhusSlide 5 af 44
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
![Page 6: Brugergrænseflader til apparater BRGA Presentation 6: Capabilities of Human Beings.](https://reader035.fdocuments.us/reader035/viewer/2022070410/56649ec05503460f94bcaff8/html5/thumbnails/6.jpg)
Ingeniørhøjskolen i ÅrhusSlide 6 af 44
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
![Page 7: Brugergrænseflader til apparater BRGA Presentation 6: Capabilities of Human Beings.](https://reader035.fdocuments.us/reader035/viewer/2022070410/56649ec05503460f94bcaff8/html5/thumbnails/7.jpg)
Ingeniørhøjskolen i ÅrhusSlide 7 af 44
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
![Page 8: Brugergrænseflader til apparater BRGA Presentation 6: Capabilities of Human Beings.](https://reader035.fdocuments.us/reader035/viewer/2022070410/56649ec05503460f94bcaff8/html5/thumbnails/8.jpg)
Ingeniørhøjskolen i ÅrhusSlide 8 af 44
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
![Page 9: Brugergrænseflader til apparater BRGA Presentation 6: Capabilities of Human Beings.](https://reader035.fdocuments.us/reader035/viewer/2022070410/56649ec05503460f94bcaff8/html5/thumbnails/9.jpg)
Ingeniørhøjskolen i ÅrhusSlide 9 af 44
Example of context: What do you see?
![Page 10: Brugergrænseflader til apparater BRGA Presentation 6: Capabilities of Human Beings.](https://reader035.fdocuments.us/reader035/viewer/2022070410/56649ec05503460f94bcaff8/html5/thumbnails/10.jpg)
Ingeniørhøjskolen i ÅrhusSlide 10 af 44
Hint: it’s an animal, facing you . . .
![Page 11: Brugergrænseflader til apparater BRGA Presentation 6: Capabilities of Human Beings.](https://reader035.fdocuments.us/reader035/viewer/2022070410/56649ec05503460f94bcaff8/html5/thumbnails/11.jpg)
Ingeniørhøjskolen i ÅrhusSlide 11 af 44
Hint: this animal gives milk, and her face takes up the left half of the picture . . .
![Page 12: Brugergrænseflader til apparater BRGA Presentation 6: Capabilities of Human Beings.](https://reader035.fdocuments.us/reader035/viewer/2022070410/56649ec05503460f94bcaff8/html5/thumbnails/12.jpg)
Ingeniørhøjskolen i ÅrhusSlide 12 af 44
Why couldn’t you see the cow’s face at first (not counting those who’ve read it)?• It’s blurry and too contrasty, of course, but more:• You had no idea what to expect, because there
was no context• Now that you do have a context, you will have little
difficulty recognizing it the next time
![Page 13: Brugergrænseflader til apparater BRGA Presentation 6: Capabilities of Human Beings.](https://reader035.fdocuments.us/reader035/viewer/2022070410/56649ec05503460f94bcaff8/html5/thumbnails/13.jpg)
Ingeniørhøjskolen i ÅrhusSlide 13 af 44
Another example of context: are these letters the same?
![Page 14: Brugergrænseflader til apparater BRGA Presentation 6: Capabilities of Human Beings.](https://reader035.fdocuments.us/reader035/viewer/2022070410/56649ec05503460f94bcaff8/html5/thumbnails/14.jpg)
Ingeniørhøjskolen i ÅrhusSlide 14 af 44
Well, yes, but now in context:
![Page 15: Brugergrænseflader til apparater BRGA Presentation 6: Capabilities of Human Beings.](https://reader035.fdocuments.us/reader035/viewer/2022070410/56649ec05503460f94bcaff8/html5/thumbnails/15.jpg)
Ingeniørhøjskolen i ÅrhusSlide 15 af 44
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
![Page 16: Brugergrænseflader til apparater BRGA Presentation 6: Capabilities of Human Beings.](https://reader035.fdocuments.us/reader035/viewer/2022070410/56649ec05503460f94bcaff8/html5/thumbnails/16.jpg)
Ingeniørhøjskolen i ÅrhusSlide 16 af 44
Figure and ground
• Images are partitioned into – Figure (foreground) and– Ground ( background)
• Sometimes figure and ground are ambiguous
![Page 17: Brugergrænseflader til apparater BRGA Presentation 6: Capabilities of Human Beings.](https://reader035.fdocuments.us/reader035/viewer/2022070410/56649ec05503460f94bcaff8/html5/thumbnails/17.jpg)
Ingeniørhøjskolen i ÅrhusSlide 17 af 44
Figure and ground: What do you see?
![Page 18: Brugergrænseflader til apparater BRGA Presentation 6: Capabilities of Human Beings.](https://reader035.fdocuments.us/reader035/viewer/2022070410/56649ec05503460f94bcaff8/html5/thumbnails/18.jpg)
Ingeniørhøjskolen i ÅrhusSlide 18 af 44
Gestalt psychology
• We discussed this last time – but lets take a recap:
• “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
![Page 19: Brugergrænseflader til apparater BRGA Presentation 6: Capabilities of Human Beings.](https://reader035.fdocuments.us/reader035/viewer/2022070410/56649ec05503460f94bcaff8/html5/thumbnails/19.jpg)
Ingeniørhøjskolen i ÅrhusSlide 19 af 44
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
![Page 20: Brugergrænseflader til apparater BRGA Presentation 6: Capabilities of Human Beings.](https://reader035.fdocuments.us/reader035/viewer/2022070410/56649ec05503460f94bcaff8/html5/thumbnails/20.jpg)
Ingeniørhøjskolen i ÅrhusSlide 20 af 44
Proximity
![Page 21: Brugergrænseflader til apparater BRGA Presentation 6: Capabilities of Human Beings.](https://reader035.fdocuments.us/reader035/viewer/2022070410/56649ec05503460f94bcaff8/html5/thumbnails/21.jpg)
Ingeniørhøjskolen i ÅrhusSlide 21 af 44
Example: a page that can be improved
![Page 22: Brugergrænseflader til apparater BRGA Presentation 6: Capabilities of Human Beings.](https://reader035.fdocuments.us/reader035/viewer/2022070410/56649ec05503460f94bcaff8/html5/thumbnails/22.jpg)
Ingeniørhøjskolen i ÅrhusSlide 22 af 44
By using proximity to group related things
![Page 23: Brugergrænseflader til apparater BRGA Presentation 6: Capabilities of Human Beings.](https://reader035.fdocuments.us/reader035/viewer/2022070410/56649ec05503460f94bcaff8/html5/thumbnails/23.jpg)
Ingeniørhøjskolen i ÅrhusSlide 23 af 44
Similarity
![Page 24: Brugergrænseflader til apparater BRGA Presentation 6: Capabilities of Human Beings.](https://reader035.fdocuments.us/reader035/viewer/2022070410/56649ec05503460f94bcaff8/html5/thumbnails/24.jpg)
Ingeniørhøjskolen i ÅrhusSlide 24 af 44
Example: can you use similarity to improve this page?
![Page 25: Brugergrænseflader til apparater BRGA Presentation 6: Capabilities of Human Beings.](https://reader035.fdocuments.us/reader035/viewer/2022070410/56649ec05503460f94bcaff8/html5/thumbnails/25.jpg)
Ingeniørhøjskolen i ÅrhusSlide 25 af 44
Sure: make the buttons the same size:
![Page 26: Brugergrænseflader til apparater BRGA Presentation 6: Capabilities of Human Beings.](https://reader035.fdocuments.us/reader035/viewer/2022070410/56649ec05503460f94bcaff8/html5/thumbnails/26.jpg)
Ingeniørhøjskolen i ÅrhusSlide 26 af 44
Anything else?
![Page 27: Brugergrænseflader til apparater BRGA Presentation 6: Capabilities of Human Beings.](https://reader035.fdocuments.us/reader035/viewer/2022070410/56649ec05503460f94bcaff8/html5/thumbnails/27.jpg)
Ingeniørhøjskolen i ÅrhusSlide 27 af 44
Sure: use the same font everywhere:
![Page 28: Brugergrænseflader til apparater BRGA Presentation 6: Capabilities of Human Beings.](https://reader035.fdocuments.us/reader035/viewer/2022070410/56649ec05503460f94bcaff8/html5/thumbnails/28.jpg)
Ingeniørhøjskolen i ÅrhusSlide 28 af 44
Symmetry: we use our experience and expectations to make groups of things
We see two triangles.
We see three groups of paired square brackets.
![Page 29: Brugergrænseflader til apparater BRGA Presentation 6: Capabilities of Human Beings.](https://reader035.fdocuments.us/reader035/viewer/2022070410/56649ec05503460f94bcaff8/html5/thumbnails/29.jpg)
Ingeniørhøjskolen i ÅrhusSlide 29 af 44
Continuity: flow, or alignment
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
![Page 30: Brugergrænseflader til apparater BRGA Presentation 6: Capabilities of Human Beings.](https://reader035.fdocuments.us/reader035/viewer/2022070410/56649ec05503460f94bcaff8/html5/thumbnails/30.jpg)
Ingeniørhøjskolen i ÅrhusSlide 30 af 44
Can you use alignment (one form of continuity) to improve this page?
![Page 31: Brugergrænseflader til apparater BRGA Presentation 6: Capabilities of Human Beings.](https://reader035.fdocuments.us/reader035/viewer/2022070410/56649ec05503460f94bcaff8/html5/thumbnails/31.jpg)
Ingeniørhøjskolen i ÅrhusSlide 31 af 44
Sure: the lines on the previous slide show how to use horizontal alignment
![Page 32: Brugergrænseflader til apparater BRGA Presentation 6: Capabilities of Human Beings.](https://reader035.fdocuments.us/reader035/viewer/2022070410/56649ec05503460f94bcaff8/html5/thumbnails/32.jpg)
Ingeniørhøjskolen i ÅrhusSlide 32 af 44
But why stop? Left-align both columns to get vertical alignment also
![Page 33: Brugergrænseflader til apparater BRGA Presentation 6: Capabilities of Human Beings.](https://reader035.fdocuments.us/reader035/viewer/2022070410/56649ec05503460f94bcaff8/html5/thumbnails/33.jpg)
Ingeniørhøjskolen i ÅrhusSlide 33 af 44
Closure: we mentally “fill in the blanks”
All are seen as circles
![Page 34: Brugergrænseflader til apparater BRGA Presentation 6: Capabilities of Human Beings.](https://reader035.fdocuments.us/reader035/viewer/2022070410/56649ec05503460f94bcaff8/html5/thumbnails/34.jpg)
Ingeniørhøjskolen i ÅrhusSlide 34 af 44
Memory
• Hierarchical Model
Sensory
Short Term
Long Term
Practice and effort needed
to make this transfer
![Page 35: Brugergrænseflader til apparater BRGA Presentation 6: Capabilities of Human Beings.](https://reader035.fdocuments.us/reader035/viewer/2022070410/56649ec05503460f94bcaff8/html5/thumbnails/35.jpg)
Ingeniørhøjskolen i ÅrhusSlide 35 af 44
“The Magic Number 7, Plus or Minus 2” George Miller, 1956, Shneiderman
• Value of “ chunking”– 2125685382 vs. 212DanHome (American style Phone
Numbers)– 10 chunks vs. 3 (assuming 212 is familiar)
• Can you remember:– Vsdfnjejn7dknsdnd33s
![Page 36: Brugergrænseflader til apparater BRGA Presentation 6: Capabilities of Human Beings.](https://reader035.fdocuments.us/reader035/viewer/2022070410/56649ec05503460f94bcaff8/html5/thumbnails/36.jpg)
Ingeniørhøjskolen i ÅrhusSlide 36 af 44
How many chunks in . . .
• www.bestbookbuys.com• 20? Not really:
– www.– best– book– buys– .com
![Page 37: Brugergrænseflader til apparater BRGA Presentation 6: Capabilities of Human Beings.](https://reader035.fdocuments.us/reader035/viewer/2022070410/56649ec05503460f94bcaff8/html5/thumbnails/37.jpg)
Ingeniørhøjskolen i ÅrhusSlide 37 af 44
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
![Page 38: Brugergrænseflader til apparater BRGA Presentation 6: Capabilities of Human Beings.](https://reader035.fdocuments.us/reader035/viewer/2022070410/56649ec05503460f94bcaff8/html5/thumbnails/38.jpg)
Ingeniørhøjskolen i ÅrhusSlide 38 af 44
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.)
![Page 39: Brugergrænseflader til apparater BRGA Presentation 6: Capabilities of Human Beings.](https://reader035.fdocuments.us/reader035/viewer/2022070410/56649ec05503460f94bcaff8/html5/thumbnails/39.jpg)
Ingeniørhøjskolen i ÅrhusSlide 39 af 44
Interruptions
• Focusing attention and handling interruptions are related to memory
• In usability design you need to give cues or memory aids for resuming tasks:– Back button– Already chosen menus change color (like followed links)– When filling in forms, blank boxes show where to pick up
the job
![Page 40: Brugergrænseflader til apparater BRGA Presentation 6: Capabilities of Human Beings.](https://reader035.fdocuments.us/reader035/viewer/2022070410/56649ec05503460f94bcaff8/html5/thumbnails/40.jpg)
Ingeniørhøjskolen i ÅrhusSlide 40 af 44
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 taskAlready discussed this with Nielsen!
![Page 41: Brugergrænseflader til apparater BRGA Presentation 6: Capabilities of Human Beings.](https://reader035.fdocuments.us/reader035/viewer/2022070410/56649ec05503460f94bcaff8/html5/thumbnails/41.jpg)
Ingeniørhøjskolen i ÅrhusSlide 41 af 44
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.
![Page 42: Brugergrænseflader til apparater BRGA Presentation 6: Capabilities of Human Beings.](https://reader035.fdocuments.us/reader035/viewer/2022070410/56649ec05503460f94bcaff8/html5/thumbnails/42.jpg)
Ingeniørhøjskolen i ÅrhusSlide 42 af 44
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
![Page 43: Brugergrænseflader til apparater BRGA Presentation 6: Capabilities of Human Beings.](https://reader035.fdocuments.us/reader035/viewer/2022070410/56649ec05503460f94bcaff8/html5/thumbnails/43.jpg)
Ingeniørhøjskolen i ÅrhusSlide 43 af 44
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
![Page 44: Brugergrænseflader til apparater BRGA Presentation 6: Capabilities of Human Beings.](https://reader035.fdocuments.us/reader035/viewer/2022070410/56649ec05503460f94bcaff8/html5/thumbnails/44.jpg)
Ingeniørhøjskolen i ÅrhusSlide 44 af 44
Example of perceived affordance
Top switch controls top lights
By convention, with a light switch “up” is “on”
Other examples (from Norman, 1988):-The Door handles-The Mercedes Seat Adjustment