design and interaction, part 2 31 january 2006 kathy e. gill
Post on 19-Dec-2015
215 views
TRANSCRIPT
![Page 1: Design and Interaction, Part 2 31 January 2006 Kathy E. Gill](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649d355503460f94a0cb88/html5/thumbnails/1.jpg)
Design and Interaction, Part 2
31 January 2006Kathy E. Gill
![Page 2: Design and Interaction, Part 2 31 January 2006 Kathy E. Gill](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649d355503460f94a0cb88/html5/thumbnails/2.jpg)
Our goal : flow
The process of an optimal experience The activity feels seamless It is intrinsically enjoyable Individual loses self-consciousness
![Page 3: Design and Interaction, Part 2 31 January 2006 Kathy E. Gill](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649d355503460f94a0cb88/html5/thumbnails/3.jpg)
Eight Golden Rules of Interface Design (1/3)
Strive for consistency (the most frequently violated rule): • Terminology • Prompts • Menus • Help screens • Color • Layout • Capitalization • Fonts
![Page 4: Design and Interaction, Part 2 31 January 2006 Kathy E. Gill](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649d355503460f94a0cb88/html5/thumbnails/4.jpg)
Eight Golden Rules of Interface Design (2/3)
Let frequent users use shortcuts • Abbreviations • Special keys • Hidden commands • Macro facilities
Offer informative feedback Design dialogs to yield closure
• Sequences of actions should be organized into groups
• Beginning, middle, and an end
![Page 5: Design and Interaction, Part 2 31 January 2006 Kathy E. Gill](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649d355503460f94a0cb88/html5/thumbnails/5.jpg)
Eight Golden Rules of Interface Design (3/3)
Offer error prevention and simple error handling
Permit easy reversal of actions Support internal locus of control Reduce short-term memory load
![Page 6: Design and Interaction, Part 2 31 January 2006 Kathy E. Gill](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649d355503460f94a0cb88/html5/thumbnails/6.jpg)
Effective navigation
Clearly communicates Where am I? Where have I been? Where can I go?
![Page 7: Design and Interaction, Part 2 31 January 2006 Kathy E. Gill](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649d355503460f94a0cb88/html5/thumbnails/7.jpg)
Navigation icons
Should not require explanation Must represent the correct concept Must be visually distinct Are appropriately sized Text (label) is often the best visual cue
![Page 8: Design and Interaction, Part 2 31 January 2006 Kathy E. Gill](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649d355503460f94a0cb88/html5/thumbnails/8.jpg)
Menus (1/2)
Types• Static, pull down, fly-out, pop-up• Recognition, not recall (memory)
Menu organization • Alphabetical• Chronological• Categorical
![Page 9: Design and Interaction, Part 2 31 January 2006 Kathy E. Gill](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649d355503460f94a0cb88/html5/thumbnails/9.jpg)
Menus (2/2)
Provide real-estate savings• But have invisible info
Pull-down, fly-out• Horizontal or vertical
Pop up menus• Appear at various places on the screen
![Page 10: Design and Interaction, Part 2 31 January 2006 Kathy E. Gill](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649d355503460f94a0cb88/html5/thumbnails/10.jpg)
Bridging Gulf of Execution
Hick’s Law : number of choices directly affects the size of the Gulf of Execution
Fitt's Law : time required to acquire a target is a function of the distance to, placement of, and size of the target.
How does this relate to navigation?
![Page 11: Design and Interaction, Part 2 31 January 2006 Kathy E. Gill](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649d355503460f94a0cb88/html5/thumbnails/11.jpg)
KISS
Remember each bit of info competes with other bits
Eliminate irrelevant information
![Page 12: Design and Interaction, Part 2 31 January 2006 Kathy E. Gill](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649d355503460f94a0cb88/html5/thumbnails/12.jpg)
From The Interface Hall of Shame http://www.iarchitect.com/tabs.htm
What not to do!
![Page 13: Design and Interaction, Part 2 31 January 2006 Kathy E. Gill](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649d355503460f94a0cb88/html5/thumbnails/13.jpg)
The Humane Interface
“An interface is humane if it is responsive to human needs and considerate of human frailties.”• Raskin, The Humane Interface (6)
Requires knowledge of how humans and machines operate
![Page 14: Design and Interaction, Part 2 31 January 2006 Kathy E. Gill](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649d355503460f94a0cb88/html5/thumbnails/14.jpg)
Object-Action Model of Interaction
Understand tasks • Evaluate real-world objects and the actions
applied to those objects Create interface representations
• Objects and actions Make interface actions visible to users
![Page 15: Design and Interaction, Part 2 31 January 2006 Kathy E. Gill](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649d355503460f94a0cb88/html5/thumbnails/15.jpg)
Task Hierarchies
Computer system designers must generate a hierarchy of objects and actions (the interaction) that successfully models user tasks:
Representations in pixels on a screen Representations in physical devices Representations in voice or other audio cue
![Page 16: Design and Interaction, Part 2 31 January 2006 Kathy E. Gill](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649d355503460f94a0cb88/html5/thumbnails/16.jpg)
Semantic Understanding
Understand how the process works, the meaning of an action• A mouse click• A submit button
![Page 17: Design and Interaction, Part 2 31 January 2006 Kathy E. Gill](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649d355503460f94a0cb88/html5/thumbnails/17.jpg)
Syntactic Understanding
Understand the specific rules of behavior that achieve an action• In Windows, double-click on a file to launch
(open) the application and load file• On the Web, single-click an underlined
word to go to a new Web page
![Page 18: Design and Interaction, Part 2 31 January 2006 Kathy E. Gill](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649d355503460f94a0cb88/html5/thumbnails/18.jpg)
When Syntax Vanishes (1/2)
We are forced to maintain a profusion of device-dependent details in our memory. • Which action erases a character?• Which abbreviations are permissible? • Which of the numbered function keys
produces the previous screen?
![Page 19: Design and Interaction, Part 2 31 January 2006 Kathy E. Gill](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649d355503460f94a0cb88/html5/thumbnails/19.jpg)
When Syntax Vanishes (2/2)
Learning, use and knowledge retention is hampered when details vary across systems unpredictably
Syntactic knowledge is learned through repeated usage
Syntactic knowledge is system dependent -- our visitors perceive “the Web” as a system, violate only after careful deliberation
![Page 20: Design and Interaction, Part 2 31 January 2006 Kathy E. Gill](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649d355503460f94a0cb88/html5/thumbnails/20.jpg)
Our Job
To minimize syntactic/memory burdens• Familiar objects and actions represent their
task objects and actions• Standard (or de facto standard) widgets
Why the mailbox did not work as early e-mail icon - not cross-cultural
![Page 21: Design and Interaction, Part 2 31 January 2006 Kathy E. Gill](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649d355503460f94a0cb88/html5/thumbnails/21.jpg)
Five Tests of Effectiveness (1/2)
Time to learn How long does it take for typical members of the community to learn relevant task?
Speed of performance How long does it take to perform relevant benchmarks?
Rate of errors by users How many and what kinds of errors are commonly made during typical applications?
![Page 22: Design and Interaction, Part 2 31 January 2006 Kathy E. Gill](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649d355503460f94a0cb88/html5/thumbnails/22.jpg)
Five Tests of Effectiveness (2/2)
Retention over time Frequency of use and ease of learning help make for better user retention
Subjective satisfaction Allow for user feedback – interviews (focus groups), online surveys (both free-form comments and satisfaction scales).
![Page 23: Design and Interaction, Part 2 31 January 2006 Kathy E. Gill](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649d355503460f94a0cb88/html5/thumbnails/23.jpg)
Design for Diversity
Personality differences Cultural and international diversity Users with disabilities Elderly users Anything else?
![Page 24: Design and Interaction, Part 2 31 January 2006 Kathy E. Gill](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649d355503460f94a0cb88/html5/thumbnails/24.jpg)
Raskin’s Rules
The user should set the pace of the interaction
Error avoidance, facilitated with “undo/redo”
Accessible to the naïve, efficient for the expert
![Page 25: Design and Interaction, Part 2 31 January 2006 Kathy E. Gill](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649d355503460f94a0cb88/html5/thumbnails/25.jpg)
Errors are not mistakes!
Mistakes are the result of conscious deliberation
Slips result from automatic behavior• Norman’s Types: capture, description,
data-driven, associative activation, loss-of-activation and mode errors
![Page 26: Design and Interaction, Part 2 31 January 2006 Kathy E. Gill](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649d355503460f94a0cb88/html5/thumbnails/26.jpg)
Good Error Messages
Polite Illuminating Treat the user with respect
![Page 27: Design and Interaction, Part 2 31 January 2006 Kathy E. Gill](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649d355503460f94a0cb88/html5/thumbnails/27.jpg)
Design for Error
Minimize occurrence by understanding the causes of errors
Make detection and recovery easier Change the attitude toward error from
“stupid user” to “stupid design”
![Page 28: Design and Interaction, Part 2 31 January 2006 Kathy E. Gill](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649d355503460f94a0cb88/html5/thumbnails/28.jpg)
One small problem:
When you design an error-tolerant system, people come to rely on that system (it had best be reliable!)• Anti-lock brakes (ABS)• Blade guard on circular saw• Anything else?
![Page 29: Design and Interaction, Part 2 31 January 2006 Kathy E. Gill](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649d355503460f94a0cb88/html5/thumbnails/29.jpg)
To increase errors, add a little:
Social pressure Time pressure Economic pressure
In other words, real life!
![Page 30: Design and Interaction, Part 2 31 January 2006 Kathy E. Gill](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649d355503460f94a0cb88/html5/thumbnails/30.jpg)
Resultant design philosophy:
Put knowledge in the world (iow,make options visible)
Remember the three questions:• Where am I, where can I go, where have I
been? Design for errors
![Page 31: Design and Interaction, Part 2 31 January 2006 Kathy E. Gill](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649d355503460f94a0cb88/html5/thumbnails/31.jpg)
The End!
Apologies for the background noises as I advanced the slides in outline view … one take only and I don’t have Jyotsna’s production skills. :)