User Interface Design

1. User Interface Design Cartoon removed Session 11- LBSC 790 / INFM 718B Building the Human-Computer Interface

2. Agenda • Questions • Testing & debugging notes • User interface design • Principles • Practice • Design critique • Project check-in

3. Programming Best Practices • Design before you build • Focus your learning • Program defensively • Pair programming • Limit complexity • Debug syntax from the top down

4. 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)

5. 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?

7. Six design principles • Visibility • Feedback • Constraints • Mapping • Consistency • Affordance Don Norman, The Design of Everyday Things (1988)

8. Visibility –An elevator control panel

9. Visibility –An elevator control panel

10. Feedback • Sending information back to the user about what has been done click

11. Physical Constraints • Reflect the way physical objects restrict the movement of things

12. 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?

13. How to design them more logically Proximity Color coding

14. Cultural constraints • Learned arbitrary conventions

15. Mapping • Relationship between controls and their movements and the results in the world

16. 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

17. Keypad numbers layout • External inconsistency phones, remote controls calculators, computer keypads

18. 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

19. Virtual affordances • How do the following screen objects afford? • What if you were a novice user? • Would you know what to do with them?

20. 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

21. 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

22. 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

23. 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

24. 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

25. 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

26. 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

27. Suggested applications • MS Office Picture Manager Programs->MS Office->…Tools->Picture Manager • ICDL Book Reader www.childrenslibrary.org/library/books/readers/hrdaxlf_00320001-comic.jnlp • Dr. Dobb’s eMagazine reader www.nxtbook.com/nxtbooks/cmp/ddj-ravenflow2 • PDA applications

28. Six design principles • Visibility • Feedback • Constraints • Rules • Layout • Color • Size • Mapping • Consistency • Affordance Don Norman, The Design of Everyday Things (1988)

29. 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

31. 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