user interface design session 11- lbsc 790 / infm 718b building the human-computer interface cartoon...
TRANSCRIPT
User Interface Design
Session 11- LBSC 790 / INFM 718BBuilding the Human-Computer Interface
Cartoon removed
Agenda
• Questions
• Testing & debugging notes
• User interface design – Principles
– Practice
• Design critique
• Project check-in
Programming Best Practices
• Design before you build
• Focus your learning
• Program defensively
• Pair programming
• Limit complexity
• Debug syntax from the top down
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)
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?
Six design principles
• Visibility• Feedback• Constraints
• Mapping• Consistency• Affordance
Don Norman, The Design of Everyday Things (1988)
Visibility – An elevator control panel
Visibility – An elevator control panel
Feedback
• Sending information back to the user about what has been done
click
Physical Constraints
• Reflect the way physical objects restrict the movement of things
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?
How to design them more logically
Color codingProximity
• Learned arbitrary conventions
Cultural constraints
• Relationship between controls and their movements and the results in the world
Mapping
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
Keypad numbers layout
• External inconsistency
phones, remote controls calculators, computer keypads
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
Virtual affordances
• How do the following screen objects afford?– What if you were a novice user?– Would you know what to do with them?
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
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
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
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
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
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
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
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
Six design principles
• Visibility• Feedback• Constraints
• Rules– Layout– Color– Size
• Mapping• Consistency• Affordance
Don Norman, The Design of Everyday Things (1988)
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
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