User Interface Design Session 11- LBSC 790 / INFM 718B Building 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

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 controlscalculators, 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 Vista msdn.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 Vista msdn.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 Manager Programs->MS Office->…Tools->Picture Manager ICDL Book Reader 1-comic.jnlp Dr. Dobb’s eMagazine reader 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