user interface design session 11- lbsc 790 / infm 718b building the human-computer interface cartoon...
TRANSCRIPT
![Page 1: User Interface Design Session 11- LBSC 790 / INFM 718B Building the Human-Computer Interface Cartoon removed](https://reader035.vdocument.in/reader035/viewer/2022070410/56649ea35503460f94ba81b6/html5/thumbnails/1.jpg)
User Interface Design
Session 11- LBSC 790 / INFM 718BBuilding the Human-Computer Interface
Cartoon removed
![Page 2: User Interface Design Session 11- LBSC 790 / INFM 718B Building the Human-Computer Interface Cartoon removed](https://reader035.vdocument.in/reader035/viewer/2022070410/56649ea35503460f94ba81b6/html5/thumbnails/2.jpg)
Agenda
• Questions
• Testing & debugging notes
• User interface design – Principles
– Practice
• Design critique
• Project check-in
![Page 3: User Interface Design Session 11- LBSC 790 / INFM 718B Building the Human-Computer Interface Cartoon removed](https://reader035.vdocument.in/reader035/viewer/2022070410/56649ea35503460f94ba81b6/html5/thumbnails/3.jpg)
Programming Best Practices
• Design before you build
• Focus your learning
• Program defensively
• Pair programming
• Limit complexity
• Debug syntax from the top down
![Page 4: User Interface Design Session 11- LBSC 790 / INFM 718B Building the Human-Computer Interface Cartoon removed](https://reader035.vdocument.in/reader035/viewer/2022070410/56649ea35503460f94ba81b6/html5/thumbnails/4.jpg)
Types of Errors• Syntax errors
– Detected at compile time
• Run time exceptions– Cause system-detected failures at run time
• Logic errors– Cause unanticipated behavior (detected by
you!)
• Design errors– Fail to meet the need (detected by stakeholders)
![Page 5: User Interface Design Session 11- LBSC 790 / INFM 718B Building the Human-Computer Interface Cartoon removed](https://reader035.vdocument.in/reader035/viewer/2022070410/56649ea35503460f94ba81b6/html5/thumbnails/5.jpg)
Types of “Testing”• Design walkthrough
– Does the design meet the requirements
• Code walkthrough– Does the code implement the requirements?
• Functional testing– Does the code do what you intended?
• Usability testing– Does it do what the user needs done?
![Page 6: User Interface Design Session 11- LBSC 790 / INFM 718B Building the Human-Computer Interface Cartoon removed](https://reader035.vdocument.in/reader035/viewer/2022070410/56649ea35503460f94ba81b6/html5/thumbnails/6.jpg)
![Page 7: User Interface Design Session 11- LBSC 790 / INFM 718B Building the Human-Computer Interface Cartoon removed](https://reader035.vdocument.in/reader035/viewer/2022070410/56649ea35503460f94ba81b6/html5/thumbnails/7.jpg)
Six design principles
• Visibility• Feedback• Constraints
• Mapping• Consistency• Affordance
Don Norman, The Design of Everyday Things (1988)
![Page 8: User Interface Design Session 11- LBSC 790 / INFM 718B Building the Human-Computer Interface Cartoon removed](https://reader035.vdocument.in/reader035/viewer/2022070410/56649ea35503460f94ba81b6/html5/thumbnails/8.jpg)
Visibility – An elevator control panel
![Page 9: User Interface Design Session 11- LBSC 790 / INFM 718B Building the Human-Computer Interface Cartoon removed](https://reader035.vdocument.in/reader035/viewer/2022070410/56649ea35503460f94ba81b6/html5/thumbnails/9.jpg)
Visibility – An elevator control panel
![Page 10: User Interface Design Session 11- LBSC 790 / INFM 718B Building the Human-Computer Interface Cartoon removed](https://reader035.vdocument.in/reader035/viewer/2022070410/56649ea35503460f94ba81b6/html5/thumbnails/10.jpg)
Feedback
• Sending information back to the user about what has been done
click
![Page 11: User Interface Design Session 11- LBSC 790 / INFM 718B Building the Human-Computer Interface Cartoon removed](https://reader035.vdocument.in/reader035/viewer/2022070410/56649ea35503460f94ba81b6/html5/thumbnails/11.jpg)
Physical Constraints
• Reflect the way physical objects restrict the movement of things
![Page 12: User Interface Design Session 11- LBSC 790 / INFM 718B Building the Human-Computer Interface Cartoon removed](https://reader035.vdocument.in/reader035/viewer/2022070410/56649ea35503460f94ba81b6/html5/thumbnails/12.jpg)
Logical Constraints
• Exploit people’s everyday common sense reasoning about the way the world works
• Where do you plug the keyboard?
• Where do you plug the mouse?
![Page 13: User Interface Design Session 11- LBSC 790 / INFM 718B Building the Human-Computer Interface Cartoon removed](https://reader035.vdocument.in/reader035/viewer/2022070410/56649ea35503460f94ba81b6/html5/thumbnails/13.jpg)
How to design them more logically
Color codingProximity
![Page 14: User Interface Design Session 11- LBSC 790 / INFM 718B Building the Human-Computer Interface Cartoon removed](https://reader035.vdocument.in/reader035/viewer/2022070410/56649ea35503460f94ba81b6/html5/thumbnails/14.jpg)
• Learned arbitrary conventions
Cultural constraints
![Page 15: User Interface Design Session 11- LBSC 790 / INFM 718B Building the Human-Computer Interface Cartoon removed](https://reader035.vdocument.in/reader035/viewer/2022070410/56649ea35503460f94ba81b6/html5/thumbnails/15.jpg)
• Relationship between controls and their movements and the results in the world
Mapping
![Page 16: User Interface Design Session 11- LBSC 790 / INFM 718B Building the Human-Computer Interface Cartoon removed](https://reader035.vdocument.in/reader035/viewer/2022070410/56649ea35503460f94ba81b6/html5/thumbnails/16.jpg)
Consistency
• Similar tasks should have similar operations For example:– Always use ctrl key plus first initial of the
command for an operation:Ctrl+C, Ctrl+S, Ctrl+O
• Internal vs. external consistency
![Page 17: User Interface Design Session 11- LBSC 790 / INFM 718B Building the Human-Computer Interface Cartoon removed](https://reader035.vdocument.in/reader035/viewer/2022070410/56649ea35503460f94ba81b6/html5/thumbnails/17.jpg)
Keypad numbers layout
• External inconsistency
phones, remote controls calculators, computer keypads
![Page 18: User Interface Design Session 11- LBSC 790 / INFM 718B Building the Human-Computer Interface Cartoon removed](https://reader035.vdocument.in/reader035/viewer/2022070410/56649ea35503460f94ba81b6/html5/thumbnails/18.jpg)
Affordance
• A physical attribute of an object that suggests how to use it– a mouse button invites pushing– door handle affords pulling
• Adapted to virtual objects– scrollbars suggest moving
up and down– icons invite clicking on
![Page 19: User Interface Design Session 11- LBSC 790 / INFM 718B Building the Human-Computer Interface Cartoon removed](https://reader035.vdocument.in/reader035/viewer/2022070410/56649ea35503460f94ba81b6/html5/thumbnails/19.jpg)
Virtual affordances
• How do the following screen objects afford?– What if you were a novice user?– Would you know what to do with them?
![Page 20: User Interface Design Session 11- LBSC 790 / INFM 718B Building the Human-Computer Interface Cartoon removed](https://reader035.vdocument.in/reader035/viewer/2022070410/56649ea35503460f94ba81b6/html5/thumbnails/20.jpg)
Usability principles(Nielsen 2001)
• Visibility of system status
• Match between system and the real world
• User control and freedom
• Consistency and standards
• Help users recognize, diagnose and recover from errors
• Error prevention
• Recognition rather than recall
• Flexibility and efficiency of use
• Aesthetic and minimalist design
• Help and documentation
![Page 21: User Interface Design Session 11- LBSC 790 / INFM 718B Building the Human-Computer Interface Cartoon removed](https://reader035.vdocument.in/reader035/viewer/2022070410/56649ea35503460f94ba81b6/html5/thumbnails/21.jpg)
Design Practice
• General rules– Layout– Color– Size
• Guidelines– Java Look & Feel Guidelines
java.sun.com/products/jlf/
– MS Windows Vistamsdn.microsoft.com/library/?url=/library/en-us/
UxGuide/UXGuide
![Page 22: User Interface Design Session 11- LBSC 790 / INFM 718B Building the Human-Computer Interface Cartoon removed](https://reader035.vdocument.in/reader035/viewer/2022070410/56649ea35503460f94ba81b6/html5/thumbnails/22.jpg)
Layout• Group things meaningfully
– Design in a natural task-oriented flow– Use the corners
• Leverage consistency– Similar things should look similar– Different things should look different
• Encourage exploration– Make it obvious which way to go– Avoid hidden functions
• Strive for simplicity– Use hierarchies judiciously to limit complexity
![Page 23: User Interface Design Session 11- LBSC 790 / INFM 718B Building the Human-Computer Interface Cartoon removed](https://reader035.vdocument.in/reader035/viewer/2022070410/56649ea35503460f94ba81b6/html5/thumbnails/23.jpg)
Color
• Design for monochrome displays– Provides assured access for color blind users
• Add muted colors where they help– Useful for rapid recognition of categories– Limit to 4 colors per screen (7 per application)
• Pay attention to readability– “Similar” colors look different on another display– Different systems may have different defaults
![Page 24: User Interface Design Session 11- LBSC 790 / INFM 718B Building the Human-Computer Interface Cartoon removed](https://reader035.vdocument.in/reader035/viewer/2022070410/56649ea35503460f94ba81b6/html5/thumbnails/24.jpg)
Size
• Don’t make icons too small– Fitts’ Law: Time = f(distance, size)
• Size can be used to illustrate quantity– Scale size coding by at least 1.5
• No more than 4 font sizes
![Page 25: User Interface Design Session 11- LBSC 790 / INFM 718B Building the Human-Computer Interface Cartoon removed](https://reader035.vdocument.in/reader035/viewer/2022070410/56649ea35503460f94ba81b6/html5/thumbnails/25.jpg)
Design Practice
• General rules– Layout– Color– Size
• Guidelines– Java Look & Feel Guidelines
java.sun.com/products/jlf/
– MS Windows Vistamsdn.microsoft.com/library/?url=/library/en-us/
UxGuide/UXGuide
![Page 26: User Interface Design Session 11- LBSC 790 / INFM 718B Building the Human-Computer Interface Cartoon removed](https://reader035.vdocument.in/reader035/viewer/2022070410/56649ea35503460f94ba81b6/html5/thumbnails/26.jpg)
Graphical Design Critique• Select 2 GUI’s you know and can use here
• Work in in groups of 3 to critique each GUI– How do they apply the 6 design principles?– Find examples of features that conform or
violate:• Usability principles• Design rules
![Page 27: User Interface Design Session 11- LBSC 790 / INFM 718B Building the Human-Computer Interface Cartoon removed](https://reader035.vdocument.in/reader035/viewer/2022070410/56649ea35503460f94ba81b6/html5/thumbnails/27.jpg)
Suggested applications
• MS Office Picture ManagerPrograms->MS Office->…Tools->Picture Manager
• ICDL Book Readerwww.childrenslibrary.org/library/books/readers/hrdaxlf_00320001-comic.jnlp
• Dr. Dobb’s eMagazine readerwww.nxtbook.com/nxtbooks/cmp/ddj-ravenflow2
• PDA applications
![Page 28: User Interface Design Session 11- LBSC 790 / INFM 718B Building the Human-Computer Interface Cartoon removed](https://reader035.vdocument.in/reader035/viewer/2022070410/56649ea35503460f94ba81b6/html5/thumbnails/28.jpg)
Six design principles
• Visibility• Feedback• Constraints
• Rules– Layout– Color– Size
• Mapping• Consistency• Affordance
Don Norman, The Design of Everyday Things (1988)
![Page 29: User Interface Design Session 11- LBSC 790 / INFM 718B Building the Human-Computer Interface Cartoon removed](https://reader035.vdocument.in/reader035/viewer/2022070410/56649ea35503460f94ba81b6/html5/thumbnails/29.jpg)
Usability principles(Nielsen 2001)
• Visibility of system status
• Match between system and the real world
• User control and freedom
• Consistency and standards
• Help users recognize, diagnose and recover from errors
• Error prevention
• Recognition rather than recall
• Flexibility and efficiency of use
• Aesthetic and minimalist design
• Help and documentation
![Page 30: User Interface Design Session 11- LBSC 790 / INFM 718B Building the Human-Computer Interface Cartoon removed](https://reader035.vdocument.in/reader035/viewer/2022070410/56649ea35503460f94ba81b6/html5/thumbnails/30.jpg)
![Page 31: User Interface Design Session 11- LBSC 790 / INFM 718B Building the Human-Computer Interface Cartoon removed](https://reader035.vdocument.in/reader035/viewer/2022070410/56649ea35503460f94ba81b6/html5/thumbnails/31.jpg)
Coming up• Tomorrow
– Spec 2 due (by midnight)• Next week
– Information Visualization (Catherine Plaisant)
– Interaction Design• Beyond
– Nov 23 – Thanksgiving - No class, but…• Proto 2 / Spec 3 due
– Nov 30 – Applets & final exam review– Dec 7 – Project presentations– Dec 14 – Final Exam