1 / 38

Design Principles

Design Principles. IS 485, Professor Matt Thatcher. Agenda. Administrivia Principles (or heuristics) of good GUI design Interactive assignment. Review. POET and Norman’s general design guides for designing more usable everyday objects make things visible

elaine
Download Presentation

Design Principles

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

More Related