Design Principles IS 485, Professor Matt Thatcher

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

3 Review l 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 l Today we translate these design guides into heuristics (or rules of thumb) of good GUI design

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

5 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 > Doit What’s it doing? > Doit This will take 5 minutes... Time for coffee.

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

7 H2-2: Match Between System and Real World l 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 l Effective use of metaphors l Speak the user’s language –user-centered terminology –use common words, not “techno-jargon”

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

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) l Tree metaphor l Other examples?

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

15 H2-3: User Control and Freedom l 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) l Wizards –users must respond to 1 Q before going to next l Good for infrequent tasks –modem configuration –software installation l 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 l 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 l 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 l Same information/controls in same location on all screens / dialog boxes l Check boxes vs. option buttons –one of the most common mistakes on the web OkCancelOkCancelDoneNever MindAcceptDismiss Cancel Ok

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? l The elevators in our hotel in Paris Elevator # 1 23 ES ES Elevator # 2

22 H2-5: Error Prevention l 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 l 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 l 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 l Menu systems –shallow and wide vs. deep and thin?

25 H2-7: Flexibility and Efficiency of Use l Accelerators for experts –e.g., gestures, kb shortcuts l Allow users to tailor frequent actions –e.g., macros l 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 and palettes for frequent actions Split menu, with recently used fonts on top Scrolling controls for page-sized increments Double-click raises object- specific menu Double-click raises toolbar dialog box

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

28 H2-8: Aesthetic and Minimalist Design

29 H2-9: Help Users Recognize, Diagnose, and Recover From Errors l Error messages in plain language –user-centered and task-centered messages for recovery –not technology-centered l Precisely indicate the problem l 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 l Cannot open this document vs. l Cannot open “chapter 5” because the application “Microsoft Word” is not on your system vs. l Cannot open “chapter 5” because the application “Microsoft Word” is not on your system. Open it with “Teachtext” instead?

35 Some Helpful Suggestions l Recover automatically if possible l 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?” – l Avoid humor l Make the system take the blame

36 H2-10: Help and Documentation l Many users do not read manuals –prefer to spend their time pursuing their task –use mouse-over tips, status bar text, etc. l 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 l Sometimes used for quick reference –syntax of actions, possibilities... –list of shortcuts...

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

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