1. Brugergrænseflader til apparater BRGA Presentation 4: Guidelines & Heuristics

2. Ingeniørhøjskolen i Århus Slide 2 Outline Recap Until Now –Cognitive HCI & Methods that we employ –Cognitive Walkthrough Methods vs. Guidelines & Heuristics Types of Guidelines & Heuristics Nielsen’s 9 (10) Heuristics and How to use Method: Heuristic Evaluation Other Guidelines

3. Recap Unitl Now Cognitive HCI & Methods that we may employ Cognitive Walkthrough

4. Ingeniørhøjskolen i Århus Slide 4 Until Now Cognitive HCI & Human Capabilities –The Human Mind as an information processor –The Human Body as input/output –Hard Science –Predictions/Calculations GOMS/KLA/Fitts Law –Methods for analysis Expert review Designers: CW (40% of errors found by user testing) –Today Distilled experiences: Guidelines & Heuristics

5. Today: Usability Heuristics Avoid common design pitfalls by following design principles: guidelines & heuristics Inspect an interface for usability problems with these principles (Heuristic evaluation)

6. Ingeniørhøjskolen i Århus Slide 6 Design principles Broad usability statements that guide a developer’s design efforts –use the users language –provide feedback… –MAY LOOK like “common sense” … and is kind of ;-) –But so is UML, OO programming, Patterns etc. Derived from common design problems across many systems and many researchers and developers experiences = Patterns of Usability

7. Ingeniørhøjskolen i Århus Slide 7 Available guidelines General guidelines –Shneiderman’s 8 Golden Rules of Interface Design –Nielsen’s 9 principles of design –Normans 4 principles of good design –Molich’s 5 guidelines for screen dialogs –MANY OTHERS – look for yourselves at ACM and Cite Seer Area specific guidelines –Agricultural: Wagner’s 17 Guidelines –Mobile / Office Workers –Leisure activities (designing for the home) Technology/Platform specific guidelines –Windows (Microsoft guidelines), MS SmartPhone, Tablet PC, Apple, Nokia WAP Guidelines, ELO Touchscreen

8. Ingeniørhøjskolen i Århus Slide 8 General Guidelines & Heuristics Guidelines = Heuristics = Experiences We will be looking at Nielsen’s 9 guidelines next Guidelines are easy to understand, so I will not spend time introducing you to them all -> READ!!! REMEMBER: BE CRITICAL!!!

9. Ingeniørhøjskolen i Århus Slide 9 Usability Engineering – Jakob Nielsen Nine principles of design 1.Simple and natural dialog 2.Speak the user’s language 3.Minimize user’s memory load 4.Be consistent 5.Provide feedback 6.Provide clearly marked exits 7.Provide shortcuts 8.Deal with errors in a positive manner 9.Provide help (+ Prevent Errors in BRGA-1) Heuristic Evaluation Fairly coarse grained model

10. Ingeniørhøjskolen i Århus Slide 10 1 Simple and natural dialogue –use the user’s conceptual model –match the users’ task sequence –minimize mapping between interface and task semantics From Microsoft applications

11. Ingeniørhøjskolen i Århus Slide 11 1 Simple and natural dialogue Present exactly the information the user needs –less is more less to learn, to get wrong, to distract... –information should appear in natural order related information is graphically clustered order of accessing information matches user’s expectations –remove or hide irrelevant or rarely needed information competes with important information on screen –remove modes Norman (Design of Everyday Things + Invisible Computer) –Good Mappings + Visibility – Information Appliances Microsoft Inductive User Interface Guidelines (2005) : –http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwui/html/iuiguidelines.asphttp://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwui/html/iuiguidelines.asp –Inductive – form “Induce”: to lead or move by influence or persuasion

12. Ingeniørhøjskolen i Århus Slide 12 1 Simple and natural dialogue Microsoft Inductive User Interface Guidelines Deductive –Deduce: to conclude by reasoning The user must deduce from interface “What do I have to do here?” –Bad user mental model support Inductive –Induce: to lead or move by influence or persuasion –Split dialogs into simple task atomic units that only have one purpose –Less is more principle What am I supposed to do here?

13. Ingeniørhøjskolen i Århus Slide 13 My program gave me the message Rstrd Info. What does it mean? That’s restricted information But surely you can tell me!!! No, no… Rsdrd Info stands for “Restricted Information” Hmm… but what does it mean??? It means the program is too busy to let you log on Ok, I’ll take a coffee 2 Speak the users’ language

14. Ingeniørhøjskolen i Århus Slide 14 2 Speak the users’ language Terminology based on users’ language for task –e.g. withdrawing money from a bank machine Use meaningful mnemonics, icons & abbreviations –eg File / Save Ctrl + S (abbreviation) Alt FS (mnemonic for menu action) (tooltip icon)

15. Ingeniørhøjskolen i Århus Slide 15 2 Speak the users’ language Glossary: UK English -> US English -> DK English Use Mappings and Metaphors –Between users conceptual model and the information appliances’ display –> may be achieved by understanding the users work domain and jargon (e.g. through field studies & interviews) –Draw on the users ”non-technical” knowledge by using metaphors e.g. ”trash can” for removing files –Problem: metaphors may deceive the users (the trash can does NOT completely remove the file from disk)

16. Ingeniørhøjskolen i Århus Slide 16 2 Speak the users’ language

17. Ingeniørhøjskolen i Århus Slide 17 3 Minimize user’s memory load Computers good at remembering, people are not! Promote recognition over recall –menus, icons, choice dialog boxes vs commands, field formats –relies on visibility of objects to the user (but less is more!) From Microsoft applications

18. Ingeniørhøjskolen i Århus Slide 18 3: Minimize user’s memory load Gives input format, example and default

19. Ingeniørhøjskolen i Århus Slide 19 3: Minimize user’s memory load

20. Ingeniørhøjskolen i Århus Slide 20 4: Be consistent Consistency -> confident users -> explanatory learning Consistent syntax of input (within MS Windows, application, and the dialog) Consist language and graphics –same visual appearance across the system (e.g. widgets) –same information/controls in same location on all windows Consistent effects –commands, actions have same effect in equivalent situations Predictability, reliability OkCancelOkCancelAcceptDismiss Cancel Ok

21. Ingeniørhøjskolen i Århus Slide 21 4. Be Consistent These are labels with a raised appearance. Is it any surprise that people try and click on them?

22. Ingeniørhøjskolen i Århus Slide 22 5: Provide feedback Continuously inform the user about –what it is doing –how it is interpreting the user’s input –user should always be aware of what is going on > Doit What’s it doing? > Doit This will take 5 minutes... Time for coffee. Support the users mental model of the system state

23. Ingeniørhøjskolen i Århus Slide 23 5. Provide feedback What did I select? What mode am I in now? How is the system interpreting my actions? Microsoft Paint What is the feedback of the coffee vending machine?

24. Ingeniørhøjskolen i Århus Slide 24 5. Provide feedback Provide constant feedback –Also provide partial information –While throwing coins into the vending machine, update for each coin –When a problem occurs – light the display, and turn it off again as soon as the problem is resolved

25. Ingeniørhøjskolen i Århus Slide 25 5. Provide feedback Be as specific as possible, based on user’s input Best within the context of the action

26. Ingeniørhøjskolen i Århus Slide 26 5. Provide feedback Multiple files being copied, but feedback is file by file.

27. Ingeniørhøjskolen i Århus Slide 27 5. Provide feedback Response time (already discussed earlier) –how users perceive delays <0.1s perceived as “instantaneous” 1s user’s flow of thought stays uninterrupted, but delay noticed 10s limit for keeping user’s attention focused on the dialog > 10s user will want to perform other tasks while waiting

28. Ingeniørhøjskolen i Århus Slide 28 5. Provide feedback Dealing with long delays –Cursors for short transactions –Percent done dialogs –time left –estimated time –Random for unknown times cancel Contacting host (10-60 seconds)

29. Ingeniørhøjskolen i Århus Slide 29 How do I get out of this? 6. Provide clearly marked exits

30. Ingeniørhøjskolen i Århus Slide 30 6. Provide clearly marked exits Users don’t like to feel trapped by the computer! –should offer an easy way out of as many situations as possible Strategies: –Cancel button (for dialogs waiting for user input) –Universal Undo (can get back to previous state) –Interrupt (especially for lengthy operations) –Quit (for leaving the program at any time) –Defaults (for restoring a property sheet) –BE CONSISTENT Dangerous with limited undo Core Dump

31. Ingeniørhøjskolen i Århus Slide 31 7. Provide shortcuts Experienced users - perform frequent operations quickly Strategies: –keyboard and mouse accelerators abbreviations command completion context menus function keys double clicking vs menu selection –type-ahead (entering input before the system is ready for it) –navigation jumps e.g., going to window/location directly, and avoiding intermediate nodes –history systems WWW: ~60% of pages are revisits

32. Ingeniørhøjskolen i Århus Slide 32 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 Microsoft Powerpoint

33. Ingeniørhøjskolen i Århus Slide 33 8: Deal with errors in a positive manner “Errare humanum est” People will make errors! Errors we make: –Mistakes conscious deliberations lead to an error instead of correct solution –Slips unconscious behaviour gets misdirected en route to satisfying goal –e.g. drive to store, end up in the office, juice in bowl shows up frequently in skilled behaviour –usually due to inattention, interruptions often arises from similar actions (deleting inbox instead of draft)

34. Ingeniørhøjskolen i Århus Slide 34 Designing for slips General rules –prevent slips before they occur –detect and correct slips when they do occur –user correction through feedback and undo –support the mental model of the user –Avoid Modes I can’t believe I pressed Yes...

35. Ingeniørhøjskolen i Århus Slide 35 A problematic message to a nuclear power plant operator 8: Deal with errors in a positive manner

36. Ingeniørhøjskolen i Århus Slide 36 8: Deal with errors in a positive manner Adobe's ImageReady AutoCAD Mechanical Windows Notepad Microsoft's NT Operating System

37. Ingeniørhøjskolen i Århus Slide 37 8: Deal with errors in a positive manner Provide meaningful error messages –error messages should be in the user’s task language –don’t make people feel stupid “Try again, bonehead!” “Error 25” “Cannot open this document” “Cannot open “chapter 5” because the application “Microsoft Word” is not on your system” “Cannot open “chapter 5” because the application “Microsoft Word” is not on your system. Open it with “Teachtext” instead?”

38. Ingeniørhøjskolen i Århus Slide 38 8: Deal with errors in a positive manner Prevent errors –try to make errors impossible –modern widgets: can only enter legal data Provide reasonableness checks on input data –on entering order for office supplies 5000 pencils is an unusually large order. Do you really want to order that many?

39. Ingeniørhøjskolen i Århus Slide 39 9. Provide help Help is not a replacement for bad design! Simple systems: –walk up and use; minimal instructions Most other systems –feature rich –simple things should be simple –learning path for advanced features Volume 37: A user's guide to...

40. Ingeniørhøjskolen i Århus Slide 40 Documentation and how it is used Many users do not read manuals –prefer to spend their time pursuing their task Usually used when users are in some kind of panic –paper manuals unavailable in many businesses! e.g. single copy locked away in system administrator’s office –online documentation better –good search/lookup tools –online help specific to current context Sometimes used for quick reference –syntax of actions, possibilities... –list of shortcuts...

41. Ingeniørhøjskolen i Århus Slide 41 Heuristic evaluation Systematic inspection to see if interface complies to guidelines (could be these 9 – and/or others) Method –3-5 inspectors –usability engineers, end users, double experts… –inspect interface in isolation (~1–2 hours for simple interfaces) –compare notes afterwards single evaluator only catches ~35% of usability problems 5 evaluators catch 75% (insert figure page 156) Works for paper, prototypes, and working systems

42. Ingeniørhøjskolen i Århus Slide 42 Heuristic evaluation Advantages –“minimalist” approach a few guidelines identify many common usability problems easily remembered, easily applied with modest effort –discount usability engineering end users not required cheap and fast way to inspect a system – or even mock-up can be done by usability experts, double experts, and end users Problems: –principles are more or less at the motherhood level can’t be treated as a simple checklist subtleties involved in their use evaluators might not understand the domain

43. Ingeniørhøjskolen i Århus Slide 43 Top 10 Usability Guidelines for WAP 1.Implement navigational menus using a elements 2.Keep soft key labels to 5 characters or less. 3.Use Wizards instead of forms 4.Keep the content that appears above select and input fields to 1 or 2 lines max (including images). 5.Assign the most commonly chosen action or most intuitive task to the accept soft key 6.Don't use the task to navigate to a card that is already on the history stack 7.Allow the user to dial phone calls from the application by pressing a single key 8.Use the format attribute to constrain text input fields to only allow valid character types 9.Don't set a deck's expiration (maxage) to a low value unless the content is highly volatile 10.Ensure all decks are smaller than 500 bytes

44. Ingeniørhøjskolen i Århus Slide 44 Design Guidelines for Windows Uddrag fra MSDN om “Visual Design”: –http://www.msdn.microsoft.com/library/default.asp?url=/library/en -us/dnwue/html/ch14b.asphttp://www.msdn.microsoft.com/library/default.asp?url=/library/en -us/dnwue/html/ch14b.asp Color: –Some percentage of the population may have color-identification problems. This can affect the accessibility of your software to the widest possible audience. For example, about 9 percent of the adult male population have some form of color confusion. Access Keys: –Always define an access key for the label of any control or menu item. The only exceptions are the OK and Cancel buttons because the ENTER and ESC keys typically serve as the access keys to these buttons. Also, avoid having the same access key used by more than one control in a single context or more than one item on the same menu. Animation: –Avoid gratuitous use of animation. When animation is used only for a decorative effect, it can distract or annoy the user. To use animation most effectively, use it for a specific purpose or condition. Avoid repeating the animation unless the condition persists or reoccurs. You should provide the user with the option of turning off the animation or otherwise customizing the animation effects.

45. Ingeniørhøjskolen i Århus Slide 45 Pocket PC Guidelines Pocket PC User Interface Guidelines –http://msdn.microsoft.com/library/default.asp?url=/library/en-us/ui_guide_ppc/html/PPCUser_Interface_Guidelines_SKLK.asphttp://msdn.microsoft.com/library/default.asp?url=/library/en-us/ui_guide_ppc/html/PPCUser_Interface_Guidelines_SKLK.asp Usability: –Use the following checklist to confirm that an application user interface meets basic usability requirements: –Dialog boxes do not contain irrelevant information because it diminishes the visibility of relevant information. –Information appears in a logical order in the dialog box based on the functionality provided. The information is communicated using words and concepts that are familiar to a user. –Instructions for using an application are visible or easily accessible whenever appropriate. Avoid complicated instructions. –When appropriate, the same user action is consistently used to complete the same application operation. –Appropriate feedback is provided to a user within a reasonable time. –Shortcuts for experienced users are provided for completing tasks. Tabs –On Windows Mobile-based Pocket PCs, use tabs in an application to group related information and functionality. Consider the following when you include tabs in an application: –So that the user does not need to scroll to view the tabs, avoid creating more tabs than can fit on the screen at one time. –So that the user does not need to scroll to view the controls, ensure that all of the edit controls are visible on a property sheet when the input panel is displayed. –To keep the content area uncluttered at the top of the screen, place tabs at the bottom of the screen. –Label Attributes –Use the 8pt, Tahoma black font