Design PrinciplesAgendaReviewHeuristics of Good GUI Design (Jakob Nielsen)H2-1: Visibility of System StatusSlide 6H2-2: Match Between System and Real WorldMetaphors That Violate H2-2 (or metaphors that breakdown)Slide 9Interface Hall of Shame (Stoplight Metaphor)Interface Hall of Shame (Magnifying Glass Metaphor)Wording That Violate H2-2 (or poor user-centered wording)Metaphors That Violate H2-2 (User Interfaces for Interactive TV)H2-3: User Control and FreedomSlide 15An Exception to H2-3 (Wizards)WizardsH2-4: Consistency & StandardsSlide 19Slide 20External Consistency?H2-5: Error PreventionSlide 23H2-6: Recognition Rather Than RecallH2-7: Flexibility and Efficiency of UseH2-7: Flexibility and Efficiency of UseH2-8: Aesthetic and Minimalist DesignH2-8: Aesthetic and Minimalist DesignH2-9: Help Users Recognize, Diagnose, and Recover From ErrorsSlide 30Slide 31Slide 32Slide 33H2-9: Help Users Recognize, Diagnose, and Recover From ErrorsSome Helpful SuggestionsH2-10: Help and DocumentationSlide 37How Did Nielsen Come Up With This Set of Heuristics?Design PrinciplesIS 485, Professor Matt Thatcher2AgendaAdministriviaPrinciples (or heuristics) of good GUI designInteractive assignment3Review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 design4Heuristics 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 documentation5H2-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?> DoitThis will take5 minutes... Time for coffee.6Multiple files being copied, but feedback is file by file.H2-1: Visibility of System Status7H2-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”8Metaphors That Violate H2-2(or metaphors that breakdown)Printer software programEject the disk or delete the disk?9Metaphors That Violate H2-2(or metaphors that breakdown)Where does this metaphor for a physical filing cabinet break down?10Interface Hall of Shame(Stoplight Metaphor)11Interface Hall of Shame(Magnifying Glass Metaphor)12Wording That Violate H2-2(or poor user-centered wording)13Metaphors That Violate H2-2(User Interfaces for Interactive TV)Tree metaphorOther examples?14H2-3: User Control and FreedomDon’t force users down fixed pathsHow do I get out of this?15H2-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)16An 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 experts17Wizards18H2-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-v19H2-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 webOk Cancel OkCancel Done Never Mind Accept DismissCancelOk20H2-4: Consistency & StandardsThese are labels with a raised appearance.Is it any surprise that people try and click on them?21External Consistency?The elevators in our hotel in ParisElevator # 12 3ES1-203 4120ESElevator # 222H2-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 fields23H2-5: Error Prevention24H2-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?25H2-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?26H2-7: Flexibility and Efficiency of UseKeyboard accelerators for menusCustomizable toolbars andpalettes for frequent actionsSplit menu, with recently used fonts on topScrolling controls for page-sized incrementsDouble-click raises object-specific menuDouble-click raises toolbar dialog box27H2-8: Aesthetic and