Plumlee & Yohn_2010_An Analysis of the Underlying Causes of Attributed to Restatements
3/2/2004An Introduction to User Interface Design Matthew Plumlee.
-
Upload
kristina-tucker -
Category
Documents
-
view
220 -
download
1
Transcript of 3/2/2004An Introduction to User Interface Design Matthew Plumlee.
![Page 1: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/1.jpg)
3/2/2004 An Introduction to User Interface Design
An Introduction toUser Interface Design
Matthew Plumlee
![Page 2: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/2.jpg)
3/2/2004 An Introduction to User Interface Design
Outline
• What is User Interface Design?
• Models– Norman’s model of task performance– User’s mental models
• Schneiderman’s “8 Golden Rules”
![Page 3: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/3.jpg)
3/2/2004 An Introduction to User Interface Design
What is a User Interface?
• Are user interfaces only on computers?
![Page 4: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/4.jpg)
3/2/2004 An Introduction to User Interface Design
What is a User Interface?
• Are user interfaces only on computers?– Pencil
![Page 5: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/5.jpg)
3/2/2004 An Introduction to User Interface Design
What is a User Interface?
• Are user interfaces only on computers?– Pencil– Flashlight, light switch
![Page 6: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/6.jpg)
3/2/2004 An Introduction to User Interface Design
What is a User Interface?
• Are user interfaces only on computers?– Pencil– Flashlight, light switch– Measuring tape
![Page 7: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/7.jpg)
3/2/2004 An Introduction to User Interface Design
What is a User Interface?
• Are user interfaces only on computers?– Pencil– Flashlight, light switch– Measuring tape– Frying pan
![Page 8: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/8.jpg)
3/2/2004 An Introduction to User Interface Design
What is a User Interface?
• Are user interfaces only on computers?– Pencil– Flashlight, light switch– Measuring tape– Frying pan
• What do all of these things have in common?
![Page 9: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/9.jpg)
3/2/2004 An Introduction to User Interface Design
What is a User Interface?
• Are user interfaces only on computers?– Pencil– Flashlight, light switch– Measuring tape– Frying pan
• What do all of these things have in common?
• Tools, Affordances (The Psychology of Everyday Things)
![Page 10: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/10.jpg)
3/2/2004 An Introduction to User Interface Design
Examples of Affordances
• Doorknobs, push handles, pull handles
![Page 11: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/11.jpg)
3/2/2004 An Introduction to User Interface Design
Examples of Affordances
• Doorknobs, push handles, pull handles
• Buttons/switches– Raised boxes are for pushing– Objlong boxes in tracks are for sliding
![Page 12: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/12.jpg)
3/2/2004 An Introduction to User Interface Design
Examples of Affordances
• Doorknobs, push handles, pull handles
• Buttons/switches– Raised boxes are for pushing– Objlong boxes in tracks are for sliding
• Dials—round things are for turning
![Page 13: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/13.jpg)
3/2/2004 An Introduction to User Interface Design
Examples of Affordances
• Doorknobs, push handles, pull handles
• Buttons/switches– Raised boxes are for pushing– Objlong boxes in tracks are for sliding
• Dials—round things are for turning
• Handles are for grabbing onto/pulling
![Page 14: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/14.jpg)
3/2/2004 An Introduction to User Interface Design
Examples of Affordances
• Doorknobs, push handles, pull handles
• Buttons/switches– Raised boxes are for pushing– Objlong boxes in tracks are for sliding
• Dials—round things are for turning
• Handles are for grabbing onto/pulling
• Can suggest use, can suggest misuse
![Page 15: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/15.jpg)
3/2/2004 An Introduction to User Interface Design
What is User Interface Design?
• User interface…– facilitates the use of a tool…
![Page 16: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/16.jpg)
3/2/2004 An Introduction to User Interface Design
What is User Interface Design?
• User interface…– facilitates the use of a tool…– that tool aids in the completion of a task
![Page 17: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/17.jpg)
3/2/2004 An Introduction to User Interface Design
What is User Interface Design?
• User interface…– facilitates the use of a tool…– that tool aids in the completion of a task
• User interface design:– Creation of user interfaces that best facilitate
the use of a particular tool to complete a task
![Page 18: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/18.jpg)
3/2/2004 An Introduction to User Interface Design
What is User Interface Design?
• User interface…– facilitates the use of a tool…– that tool aids in the completion of a task
• User interface design:– Creation of user interfaces that best facilitate
the use of a particular tool ot complete a task– For computers, actually a bit less direct
(consider mouse/keyboard vs. touchscreen, etc.)
![Page 19: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/19.jpg)
3/2/2004 An Introduction to User Interface Design
Roadmap
• Today:– Models involving users, some general
guidelines for computer UI design
![Page 20: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/20.jpg)
3/2/2004 An Introduction to User Interface Design
Roadmap
• Today:– Models involving users, some general
guidelines for computer UI design
• After Spring Break:– Design process– Testing and evaluation– Examples
![Page 21: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/21.jpg)
3/2/2004 An Introduction to User Interface Design
Models
• 3 Kinds of Models– Explanatory theories (hypotheses)
• Example: Why does patient stop when doctor looks at computer all of a sudden?
![Page 22: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/22.jpg)
3/2/2004 An Introduction to User Interface Design
Models
• 3 Kinds of Models– Explanatory theories (hypotheses)
• Example: Why does patient stop when doctor looks at computer all of a sudden?
– Empirical laws (quantitative, tested hypotheses)• Example: Fitt’s Law
![Page 23: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/23.jpg)
3/2/2004 An Introduction to User Interface Design
Models
• 3 Kinds of Models– Explanatory theories (hypotheses)
• Example: Why does patient stop when doctor looks at computer all of a sudden?
– Empirical laws (quantitative, tested hypotheses)• Example: Fitt’s Law
– Dynamic models (simulation)• Example: what follows…
![Page 24: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/24.jpg)
3/2/2004 An Introduction to User Interface Design
Model of Task Performance• Donald Norman (affordance guy)
• How the user interacts:– Establish goal to be achieved
![Page 25: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/25.jpg)
3/2/2004 An Introduction to User Interface Design
Model of Task Performance• Donald Norman (affordance guy)
• How the user interacts:– Establish goal to be achieved– Form intention for action that will achieve goal
![Page 26: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/26.jpg)
3/2/2004 An Introduction to User Interface Design
Model of Task Performance• Donald Norman (affordance guy)
• How the user interacts:– Establish goal to be achieved– Form intention for action that will achieve goal– Specify action sequence for that intention
![Page 27: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/27.jpg)
3/2/2004 An Introduction to User Interface Design
Model of Task Performance• Donald Norman (affordance guy)
• How the user interacts:– Establish goal to be achieved– Form intention for action that will achieve goal– Specify action sequence for that intention– Execute the action
![Page 28: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/28.jpg)
3/2/2004 An Introduction to User Interface Design
Model of Task Performance• Donald Norman (affordance guy)
• How the user interacts:– Establish goal to be achieved– Form intention for action that will achieve goal– Specify action sequence for that intention– Execute the action– Perceive the system state
![Page 29: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/29.jpg)
3/2/2004 An Introduction to User Interface Design
Model of Task Performance• Donald Norman (affordance guy)
• How the user interacts:– Establish goal to be achieved– Form intention for action that will achieve goal– Specify action sequence for that intention– Execute the action– Perceive the system state– Interpret the state as perceived
![Page 30: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/30.jpg)
3/2/2004 An Introduction to User Interface Design
Model of Task Performance• Donald Norman (affordance guy)
• How the user interacts:– Establish goal to be achieved– Form intention for action that will achieve goal– Specify action sequence for that intention– Execute the action– Perceive the system state– Interpret the state as perceived– Evaluate system state w.r.t goals & intentions
![Page 31: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/31.jpg)
3/2/2004 An Introduction to User Interface Design
Model of Task PerformanceGoal
Intention
Interpretation
Evaluation
Action Seq.
Execution Perception
Physical Activity
Mental Activity
![Page 32: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/32.jpg)
3/2/2004 An Introduction to User Interface Design
Model of Task PerformanceGoal
Intention
Interpretation
Evaluation
Action Seq.
Execution Perception
Physical Activity
Make a copy of two pages from a book to fit on one piece of paper
![Page 33: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/33.jpg)
3/2/2004 An Introduction to User Interface Design
Model of Task PerformanceGoal
Intention
Interpretation
Evaluation
Action Seq.
Execution Perception
Physical Activity
Use the photocopier to reduce the image so two pages fit on one page
![Page 34: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/34.jpg)
3/2/2004 An Introduction to User Interface Design
Model of Task PerformanceGoal
Intention
Interpretation
Evaluation
Action Seq.
Execution Perception
Physical Activity
• Put book on copier
• Set magnification
• Push COPY
• Retrieve copy
![Page 35: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/35.jpg)
3/2/2004 An Introduction to User Interface Design
Model of Task PerformanceGoal
Intention
Interpretation
Evaluation
Action Seq.
Execution Perception
Physical Activity
• Put book on copier
• Set magnification
• Push COPY
• Retrieve copy
![Page 36: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/36.jpg)
3/2/2004 An Introduction to User Interface Design
Model of Task PerformanceGoal
Intention
Interpretation
Evaluation
Action Seq.
Execution Perception
Physical Activity
Look at resulting copy
![Page 37: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/37.jpg)
3/2/2004 An Introduction to User Interface Design
Model of Task PerformanceGoal
Intention
Interpretation
Evaluation
Action Seq.
Execution Perception
Physical Activity
It appears that the right edge of the second page was cut off
![Page 38: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/38.jpg)
3/2/2004 An Introduction to User Interface Design
Model of Task PerformanceGoal
Intention
Interpretation
Evaluation
Action Seq.
Execution Perception
Physical Activity
The two pages don’t fit on one page as intended…
![Page 39: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/39.jpg)
3/2/2004 An Introduction to User Interface Design
Model of Task PerformanceGoal
Intention
Interpretation
Evaluation
Action Seq.
Execution Perception
Physical Activity
Use the photocopier to reduce the image so two pages fit on one page, only this time try a smaller magnification…
![Page 40: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/40.jpg)
3/2/2004 An Introduction to User Interface Design
Model of Task PerformanceGoal
Intention
Interpretation
Evaluation
Action Seq.
Execution Perception
Physical Activity
• Intentions can be nested
• As an interface designer, want to bridge gap between user’s goal and physical activity (involving the system).
![Page 41: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/41.jpg)
3/2/2004 An Introduction to User Interface Design
Mental Models
• How does a user form an intention, or devise an action sequence?
![Page 42: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/42.jpg)
3/2/2004 An Introduction to User Interface Design
Mental Models
• How does a user form an intention, or devise an action sequence?
• How does the user know how to interpret what is perceived, or evaluate it against the intention?
![Page 43: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/43.jpg)
3/2/2004 An Introduction to User Interface Design
Mental Models
• How does a user form an intention, or devise an action sequence?
• How does the user know how to interpret what is perceived, or evaluate it against the intention?
• Analyze your own thought processes…
![Page 44: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/44.jpg)
3/2/2004 An Introduction to User Interface Design
Mental Models
• When you try to solve a problem, what do you do? (Think of a specific problem like getting home or fixing a flat tire…)
![Page 45: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/45.jpg)
3/2/2004 An Introduction to User Interface Design
Mental Models
• When you try to solve a problem, what do you do? (Think of a specific problem like getting home or fixing a flat tire…)
• Some things you might do:– Envision completed goal (2 pages on one)– Take inventory of what objects are available– Take inventory of what actions can be taken– Think about what reactions would be triggered
![Page 46: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/46.jpg)
3/2/2004 An Introduction to User Interface Design
Object-Action vs. Action-Object
• Most natural to think of solutions rooted in objects (tools)– Objects support or facilitate certain actions– Some (cars, computers, people) exhibit regular
behaviors based on interaction
![Page 47: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/47.jpg)
3/2/2004 An Introduction to User Interface Design
Object-Action vs. Action-Object
• Most natural to think of solutions rooted in objects (tools)– Objects support or facilitate certain actions– Some (cars, computers, people) exhibit regular
behaviors based on interaction
• Object-Action Interface model (GUIs, C++)
![Page 48: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/48.jpg)
3/2/2004 An Introduction to User Interface Design
Object-Action vs. Action-Object
• Most natural to think of solutions rooted in objects (tools)– Objects support or facilitate certain actions– Some (cars, computers, people) exhibit regular
behaviors based on interaction
• Object-Action Interface model (GUIs, C++)
• Action-Object Interface model (command line interfaces, C)
![Page 49: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/49.jpg)
3/2/2004 An Introduction to User Interface Design
Survey of Useful Mental Models
• Object-Action Models– What objects available, what actions supported
![Page 50: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/50.jpg)
3/2/2004 An Introduction to User Interface Design
Survey of Useful Mental Models
• Object-Action Models– What objects available, what actions supported
• State Transition Models– Object/system transitions between behavior modes
Example: telephone—Pick-up (dial-tone); push numbers (silence); done pushing numbers (more silence, then either ring or busy)…
![Page 51: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/51.jpg)
3/2/2004 An Introduction to User Interface Design
Survey of Useful Mental Models
• Object-Action Models– What objects available, what actions supported
• State Transition Models– Object/system transitions between behavior modes
• Mapping Models– Sequences of user actions learned for given intention
Example: calculator (multi-digit number entry); bolding a word in text editor (highlight word w/ dbl-click, hit Ctrl-B or bold button)…
![Page 52: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/52.jpg)
3/2/2004 An Introduction to User Interface Design
Survey of Useful Mental Models
• Object-Action Models– What objects available, what actions supported
• State Transition Models– Object/system transitions between behavior modes
• Mapping Models– Sequences of user actions learned for given intention
• Analogical Models– Adapt old model of interaction to new interface
Example: Used to driving particular car, will use same model of interaction for driving other cars or game simulations (not metaphor!)
![Page 53: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/53.jpg)
3/2/2004 An Introduction to User Interface Design
Survey of Useful Mental Models
• Object-Action Models– What objects available, what actions supported
• State Transition Models– Object/system transitions between behavior modes
• Mapping Models– Sequences of user actions learned for given intention
• Analogical Models– Adapt old model of interaction to new interface
• Mixed Models (combine above—handles exceptions)
![Page 54: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/54.jpg)
3/2/2004 An Introduction to User Interface Design
Simple Example: E-mail Client
• Consider Pat, who has used other e-mail clients in the past. How might Pat use this e-mail client, using what mental models?
Send Read Forward Reply
[email protected]: You may have won…
[email protected]: You’re behind in…
[email protected]: Fun virus. Click me!
SuperMail.exe _O X
![Page 55: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/55.jpg)
3/2/2004 An Introduction to User Interface Design
Simple Example: E-mail Client
• Beginning: Analogical—list, forward, reply work fine
Send Read Forward Reply
[email protected]: You may have won…
[email protected]: You’re behind in…
[email protected]: Fun virus. Click me!
SuperMail.exe _O X
![Page 56: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/56.jpg)
3/2/2004 An Introduction to User Interface Design
Simple Example: E-mail Client
• Beginning: Analogical—list, forward, reply work fine
• What does “Send” do (what is the object, what is action)?
Send Read Forward Reply
[email protected]: You may have won…
[email protected]: You’re behind in…
[email protected]: Fun virus. Click me!
SuperMail.exe _O X
![Page 57: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/57.jpg)
3/2/2004 An Introduction to User Interface Design
Simple Example: E-mail Client
• Beginning: Analogical—list, forward, reply work fine
• What does “Send” do (what is the object, what is action)?
• Say interface waits while message is being sent, but lookslike it hangs… eventually learned as a state transition.
Send Read Forward Reply
[email protected]: You may have won…
[email protected]: You’re behind in…
[email protected]: Fun virus. Click me!
SuperMail.exe _O X
![Page 58: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/58.jpg)
3/2/2004 An Introduction to User Interface Design
Simple Example: E-mail Client
• Beginning: Analogical—list, forward, reply work fine
• What does “Send” do (what is the object, what is action)?
• Say interface waits while message is being sent, but lookslike it hangs… eventually learned as a state transition.
• Eventually,learned asstate transition Send Read Forward Reply
[email protected]: You may have won…
[email protected]: You’re behind in…
[email protected]: Fun virus. Click me!
SuperMail.exe _O X
![Page 59: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/59.jpg)
3/2/2004 An Introduction to User Interface Design
Simple Example: E-mail Client
• Beginning: Analogical—list, forward, reply work fine
• What does “Send” do (what is the object, what is action)?
• Say interface waits while message is being sent, but lookslike it hangs… eventually learned as a state transition.
• Eventually,learned asstate transition
• What happens whenthe thing actuallydoes hang?…
Send Read Forward Reply
[email protected]: You may have won…
[email protected]: You’re behind in…
[email protected]: Fun virus. Click me!
SuperMail.exe _O X
![Page 60: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/60.jpg)
3/2/2004 An Introduction to User Interface Design
Schneiderman’s 8 Golden Rules
• Consistency Be consistent within
application: colors, fonts, terminology, etc.
Be consistent with other applications (analogy to literature)
Good to copy the standard practice
![Page 61: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/61.jpg)
3/2/2004 An Introduction to User Interface Design
Schneiderman’s 8 Golden Rules
• Consistency
• Shortcuts for experts
“You’re only a beginner once”
Create/allow special key sequences to be used to bypass long selection processes
Automatic command/ object-name/address expansion
![Page 62: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/62.jpg)
3/2/2004 An Introduction to User Interface Design
Schneiderman’s 8 Golden Rules
• Consistency
• Shortcuts for experts
• Feedback
Every action should be confirmed
Many levels: highlighting/color change, audible or haptic click, visual “depressing” of buttons, real-time movement of objects
Wait icons: hourglass
![Page 63: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/63.jpg)
3/2/2004 An Introduction to User Interface Design
Schneiderman’s 8 Golden Rules
• Consistency
• Shortcuts for experts
• Feedback
• Sequence closure
Group actions in sequences w/ beginning, middle,and end so people can drop their mental baggage at the end of each process (options, contingency plans, anxiety, etc.)
Example: install
![Page 64: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/64.jpg)
3/2/2004 An Introduction to User Interface Design
Schneiderman’s 8 Golden Rules
• Consistency
• Shortcuts for experts
• Feedback
• Sequence closure
• Error prevention/handling
Design so users can’t make serious errors
Don’t allow alpha chars in number fields, check number ranges
Detect errors, suggest simple instructions for recovery (web forms)
Error recovery for crashes (autosave)
![Page 65: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/65.jpg)
3/2/2004 An Introduction to User Interface Design
Schneiderman’s 8 Golden Rules
• Consistency
• Shortcuts for experts
• Feedback
• Sequence closure
• Error prevention/handling
• Reversibility of actions
Deep/infinite undo Relieves user anxiety
(you can try things without worrying about messing up your data or breaking the interface).
![Page 66: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/66.jpg)
3/2/2004 An Introduction to User Interface Design
Schneiderman’s 8 Golden Rules
• Consistency
• Shortcuts for experts
• Feedback
• Sequence closure
• Error prevention/handling
• Reversibility of actions
• Internal locus of control
The human generally should be in control of a human-computer system
Non-obvious or unexpected responses/ actions by computer lead to anxiety or frustration on the user’s part
![Page 67: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/67.jpg)
3/2/2004 An Introduction to User Interface Design
Schneiderman’s 8 Golden Rules
• Consistency
• Shortcuts for experts
• Feedback
• Sequence closure
• Error prevention/handling
• Reversibility of actions
• Internal locus of control
• Reduce short-term memory load
Humans have a very limited capacity for both working memory.
Generally considered 7 ± 2 for verbal items, 3-4 for visual items
Long-term memory is another story (see shortcuts for experts)
![Page 68: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/68.jpg)
3/2/2004 An Introduction to User Interface Design
Creativity, Customization
• What about creativity and customization?– Creativity: good for unique situations (nothing
has been established), or solution is radically better than established practice
![Page 69: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/69.jpg)
3/2/2004 An Introduction to User Interface Design
Creativity, Customization
• What about creativity and customization?– Creativity: good for unique situations (nothing
has been established), or solution is radically better than established practice
– Customization: Are you really going to customize your browser for each computer you come to? Consider customization as something outside normal scope of end-user activities
![Page 70: 3/2/2004An Introduction to User Interface Design Matthew Plumlee.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649eec5503460f94bfda50/html5/thumbnails/70.jpg)
3/2/2004 An Introduction to User Interface Design
Creativity, Customization
• What about creativity and customization?– Creativity: good for unique situations (nothing
has been established), or solution is radically better than established practice
– Customization: Are you really going to customize your browser for each computer you come to? Consider customization as something outside normal scope of end-user activities
• Artistic creativity, customization are fine