1 / 31

User Interface Design

User Interface Design. Cartoon removed. Session 11- LBSC 790 / INFM 718B Building the Human-Computer Interface. Agenda. Questions Testing & debugging notes User interface design Principles Practice Design critique Project check-in. Programming Best Practices. Design before you build

anoush
Download Presentation

User Interface Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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?

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

  7. Visibility –An elevator control panel

  8. Visibility –An elevator control panel

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

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

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

  12. How to design them more logically Proximity Color coding

  13. Cultural constraints • Learned arbitrary conventions

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

More Related