Design Principles

1. Design Principles IS 485, Professor Matt Thatcher

2. Agenda • Administrivia • Principles (or heuristics) of good GUI design • Interactive assignment

3. Review • POET and Norman’s general design guides for designing more usable everyday objects • make things visible • affordances, constraints, and crucial distinctions • provide effective metaphors and mappings • provide feedback • Today we translate these design guides into heuristics (or rules of thumb) of good GUI design

4. Heuristics of Good GUI Design(Jakob Nielsen) • H2-1: Visibility of system status • H2-2: Match between system and real world • H2-3: User control and freedom • H2-4: Consistency and standards • H2-5: Error prevention • H2-6: Recognition over recall • H2-7: Flexibility and efficiency of use • H2-8: Aesthetic and minimalist design • H2-9: Help users recognize, diagnose, and recover from errors • H2-10: Help and documentation

5. > Doit > Doit This will take5 minutes... What’s it doing? Time for coffee. H2-1: Visibility of System Status • Keep users informed about what‘s going on • printing, saving, opening, transferring, calculating, etc. • present users with progress bars, hourglass, clock, etc. • present user with confirmation that task is completed successfully or explain why it is not • let the user know that the system has not crashed

6. H2-1: Visibility of System Status Multiple files being copied, but feedback is file by file.

7. H2-2: Match Between System and Real World • Follow real world conventions • e.g., choice of colors, physical analogies, and wording based on cultural, industry, or user norms • e.g., the file metaphor for organizing topics • Effective use of metaphors • Speak the user’s language • user-centered terminology • use common words, not “techno-jargon”

8. Metaphors That Violate H2-2(or metaphors that breakdown) Eject the disk or delete the disk? Printer software program

9. Metaphors That Violate H2-2(or metaphors that breakdown) Where does this metaphor for a physical filing cabinet break down?

10. Interface Hall of Shame(Stoplight Metaphor)

11. Interface Hall of Shame(Magnifying Glass Metaphor)

12. Wording That Violate H2-2(or poor user-centered wording)

13. Metaphors That Violate H2-2(User Interfaces for Interactive TV) • Tree metaphor • Other examples?

14. How do I get out of this? H2-3: User Control and Freedom • Don’t force users down fixed paths

15. H2-3: User Control and Freedom • Design strategies for giving users control and freedom • Cancel button (for dialogs waiting for user input) • Universal Undo (can get back to previous state) • Universal Redo • Interrupt (especially for lengthy operations – printing, saving) • Quit or Exit (for leaving the program at any time) • Defaults (for restoring a property sheet) • Links to Homepage • Back buttons (for getting back to web pages)

16. An Exception to H2-3(Wizards) • Wizards • users must respond to 1 Q before going to next • Good for infrequent tasks • modem configuration • software installation • Good for beginners • helps novice users complete tasks with little training • helps novice users learn • have 2 versions • wizards for novices and “shortcuts” for experts

17. Wizards

18. H2-4: Consistency & Standards • Internal consistency • size, color, wording, location, ordering, spacing, etc. (within a screen and across screens in the UI) • same command always has the same effect • External consistency • existing platforms / cultural conventions should be followed across interfaces • e.g., Microsoft products • following standards help (cut / copy / paste) • ctl-x, ctl-c, ctl-v

19. H2-4: Consistency & Standards • Same information/controls in same location on all screens / dialog boxes • Check boxes vs. option buttons • one of the most common mistakes on the web Ok Cancel Cancel Ok Ok Done Never Mind Accept Dismiss Cancel

20. H2-4: Consistency & Standards These are labels with a raised appearance. Is it any surprise that people try and click on them?

21. External Consistency? • The elevators in our hotel in Paris Elevator # 1 Elevator # 2 2 3 3 4 1 2 ES 1 0 ES -2 0

22. H2-5: Error Prevention • Use appropriate representation to limit choices for the user • if files are represented by icons or names, then they only have to be selected and not typed • use menus or tool bars when appropriate • use appropriate GUI widgets/controls (e.g., check boxes, radio buttons, drop-down boxes, etc.) to limit input errors • appropriate choice of input devices • Specific formatting (e.g., time, date) • provide edit masks for input (date, SS#, phone) • provide default values • provide explanatory messages for expected input fields

23. H2-5: Error Prevention

24. H2-6: Recognition Rather Than Recall • Make objects, actions, options, and directions visible or easily retrievable • this is a key benefit of menu-based and icon-based systems over command-based systems • the 7 (+- 2) rule • Menu systems • shallow and wide vs. deep and thin?

25. H2-7: Flexibility and Efficiency of Use • Accelerators for experts • e.g., gestures, kb shortcuts • Allow users to tailor frequent actions • e.g., macros • Customized user profiles on the web • Amazon.com • Travelocity.com • other examples?

26. H2-7: Flexibility and Efficiency of Use Keyboard accelerators for menus Customizable toolbars andpalettes for frequent actions Split menu, with recently used fonts on top Double-click raises toolbar dialog box Double-click raises object-specific menu Scrolling controls for page-sized increments

27. H2-8: Aesthetic and Minimalist Design • No irrelevant information in dialogues • Don’t overload the user • Think about conscious intent and economizing

28. H2-8: Aesthetic and Minimalist Design

29. H2-9: Help Users Recognize, Diagnose, and Recover From Errors • Error messages in plain language • user-centered and task-centered messages for recovery • not technology-centered • Precisely indicate the problem • Constructively suggest a solution

30. H2-9: Help Users Recognize, Diagnose, and Recover From Errors A problematic message to a nuclear power plant operator

31. H2-9: Help Users Recognize, Diagnose, and Recover From Errors Adobe's ImageReady AutoCAD Mechanical Windows Notepad Microsoft's NT Operating System

32. H2-9: Help Users Recognize, Diagnose, and Recover From Errors Microsoft’s Developer’s Network

33. H2-9: Help Users Recognize, Diagnose, and Recover From Errors

34. H2-9: Help Users Recognize, Diagnose, and Recover From Errors • Cannot open this document vs. • Cannot open “chapter 5” because the application “Microsoft Word” is not on your system vs. • Cannot open “chapter 5” because the application “Microsoft Word” is not on your system. Open it with “Teachtext” instead?

35. Some Helpful Suggestions • Recover automatically if possible • Don’t chastise or punish the users • “fatal error, run aborted” • “disastrous string overflow” • “catastrophic error, logged with operator” • “general protection fault” • Error 25 • “files have been lost, your life is over – OK?” • http://www.fys.ruu.nl/~fdijkstr/mpwc-error-messages.html • Avoid humor • Make the system take the blame

36. H2-10: Help and Documentation • Many users do not read manuals • prefer to spend their time pursuing their task • use mouse-over tips, status bar text, etc. • Usually used when users are in some kind of panic, need immediate help • indicates need for online doc, good search/lookup tools • online help can be specific to current context • paper manuals unavailable in many businesses! • e.g. single copy locked away in system administrator’s office • Sometimes used for quick reference • syntax of actions, possibilities... • list of shortcuts ...

37. H2-10: Help and Documentation • Easy to search • Focused on the user’s task • List concrete steps to carry out • Not too large

38. How Did Nielsen Come Up With This Set of Heuristics? • Statistical analysis of several projects • Performed “heuristic evaluation” with various combinations and numbers of heuristics • Turns out that evaluators tended to find the most usability problems with this set of 10 heuristics