1. 1 Usability Guidelines, Principles & Theories Lecture 5 DeSiaMorewww.desiamore.com/ifm

2. 2 Overview of Lecture Principles Principles of Universal Design Nielsen’s usability principles/heuristics Theories GOMs 7 Stages-of-Action Levels of Analysis DeSiaMorewww.desiamore.com/ifm

3. 3 Usability Principles Nielsen defined 10 usability principles that can be applied to any system, although frequently used for web applications Used mainly as the basis for evaluating systems Provide a framework for usability evaluation Principles DeSiaMorewww.desiamore.com/ifm

4. 4 Nielsen’s Heuristics Visibility of system status Match between system and the real world User control and freedom Consistency and standards. Help users recognise, diagnose and recover from errors Error prevention Recognition rather than recall Flexibility and efficiency of use Aesthetic and minimalist design Help and documentation Principles DeSiaMorewww.desiamore.com/ifm

5. 5 Does this look familiar? Principles DeSiaMorewww.desiamore.com/ifm

6. 6 Nielsen’s Heuristics 1.Visibility of system status Always keep users informed about what is going on, -> provide appropriate timely feedback within reasonable time What has been done? Includes sound, highlighting, animation and combinations of these “ccclichhk” Principles DeSiaMorewww.desiamore.com/ifm

7. 7 Nielsen’s Heuristics Web-site Visibility The answers to the following questions should be obvious where am I? what can I do? where will I go if I do this? where have I been? Brand each page Show the section it belongs to Mark links to other pages clearly. Users may jumping to any part of the site from elsewhere you need to include this status on every page. Principles DeSiaMorewww.desiamore.com/ifm

8. 8 2.Match between system and the real world 1.Speak the users’ language 2.Don’t use system oriented terms 3.Use real world conventions to make information appear in a natural and logical order  Use a technique called mapping: Relationship between controls and their movements and the results in the world Principles Nielsen’s Heuristics DeSiaMorewww.desiamore.com/ifm

9. 9 Why is this a poor mapping of control buttons? Why is this a better mapping Principles Nielsen’s Heuristics DeSiaMorewww.desiamore.com/ifm

10. 10 3.User control and freedom Provide ways of allowing users to easily escape and navigate to/from places they unexpectedly find themselves e.g. page forward / backward hold cancel end / stop help resume undo Principles Nielsen’s Heuristics DeSiaMorewww.desiamore.com/ifm

11. 11 Need a clearly marked "emergency exit” Users can choose system functions by mistake Need to escape from an unwanted state without having to go through an extended dialogue. Need to support undo and redo. Browser provides "emergency exits” but you can supply your own buttons to support user control and freedom. A "home" button on every page simple way to let users feel in control of your site. Principles Nielsen’s Heuristics DeSiaMorewww.desiamore.com/ifm

12. 12 4.Consistency and standards Avoid making users wonder whether different words, situations or actions means the same thing Design interfaces to have similar operations and use similar elements for similar tasks Main benefit - consistent interfaces are easier to learn, use and remember Principles Nielsen’s Heuristics DeSiaMorewww.desiamore.com/ifm

13. 13 Example: Use consistent wording in your content and buttons. Most common inconsistency is between page titles and page headers for pages, and the links to them. Destination page’s title different from the link that took user there leads to user confusion. Other examples: always use ctrl key plus first initial of the command for an operation – ctrl+C, ctrl+S, ctrl+O Principles Nielsen’s Heuristics DeSiaMorewww.desiamore.com/ifm

14. 14 Follow platform conventions Avoid confusion over whether different words, situations, or actions mean the same thing to user No custom link colours. They may conflict with rest of Web and make site hard to use. Web "standards" Follow HTML specifications Deviations from the standards results in unusable features creeping in Principles Nielsen’s Heuristics DeSiaMorewww.desiamore.com/ifm

15. 15 Internal and external consistency Internal consistency refers to designing operations to behave the same within an application Difficult to achieve with complex interfaces External consistency refers to designing operations, interfaces, etc., to be the same across applications and devices Difficult to ensure across different types of devices - Based on different designer’s preference. Can be dictated by corporate guidelines Principles Nielsen’s Heuristics DeSiaMorewww.desiamore.com/ifm

16. 16 A case of external inconsistency 12 3 456 7 89 7 89 12 3 456 0 0 (a) phones, remote controls (b) calculators, computer keypads Principles Nielsen’s Heuristics DeSiaMorewww.desiamore.com/ifm

17. 17 5.Help users recognise, diagnose and recover from errors Use plain language to describe the nature of the problem and suggest a way of solving it Careful design is better than good error messages prevents problems from occurring in the first place Principles Nielsen’s Heuristics DeSiaMorewww.desiamore.com/ifm

18. 18 Detection immediately detect all errors maintain the item in error visually highlight the item in error identify field requiring missing data display error messages on the screen position cursor at first error use auditory signals conservatively Correction What guidelines have we looked at for error correction? Principles Nielsen’s Heuristics DeSiaMorewww.desiamore.com/ifm

19. 19 6.Recognition rather than recall Make objects, actions, and options visible. Don’t force user to recall information Instructions should be visible or retrieved easily when needed. From point of view of the Web, this heuristic is closely related to system status Users won’t get lost if they can see where they are by looking at clues given by on current page. No need to recall their path to the home page. Good labels & descriptive links are essential for recognition. Use images for links, but they need to be well designed. Principles Nielsen’s Heuristics DeSiaMorewww.desiamore.com/ifm

20. 20 Recognition vs Recall uses concept of Affordance  What does this term refer to? How can this be used in a system interface? Principles Nielsen’s Heuristics DeSiaMorewww.desiamore.com/ifm

21. 21 7.Error prevention Prevent them occurring in first place if possible Key question: Does the system prevent users from making serious errors, and if they do make an error, does it permit them to recover easily Prevention What techniques have we discussed? Principles Nielsen’s Heuristics DeSiaMorewww.desiamore.com/ifm

22. 22 Constraints (for error prevention) Three main types (Norman, 1999) Physical – (discussed in next side) cultural - e.g. culture Logical – e.g. menu item ordering Principles Nielsen’s Heuristics DeSiaMorewww.desiamore.com/ifm

23. 23 Physical Constraints Refer to the way physical objects restrict the movement of things E.g. only one way you can insert a key into a lock How many ways can you insert a CD or DVD disk into a computer? How physically constraining is this action? How does it differ from the insertion of a floppy disk into a computer? Principles Nielsen’s Heuristics DeSiaMorewww.desiamore.com/ifm

24. 24 8. Flexibility and efficiency of use Provide accelerators that are invisible to novice users, but allow more experienced users to carry out tasks more quickly: Use accelerators (keyboard shortcuts) Web Browser provides good accelerators e.g. bookmarks Design for effective book-marking contents of site can easily be linked to users create specialised views of a site for specific tasks Principles Nielsen’s Heuristics DeSiaMorewww.desiamore.com/ifm

25. 25 9.Aesthetic and minimalist design Avoid using info that is irrelevant or rarely needed No irrelevant or rarely needed information in dialogues -> diminishes visibility Extraneous information on a page distracts user & slows them down. Use progressive levels of detail. Principles Nielsen’s Heuristics DeSiaMorewww.desiamore.com/ifm

26. 26 10.Help and documentation Provide information that can be easily searched and provides help in a set of concrete steps that can easily be followed Better if the system can be used without documentation it may be necessary to provide help and documentation Make it easy to search, focused on the user's task, list concrete steps to be carried out, and not too large. Principles Nielsen’s Heuristics DeSiaMorewww.desiamore.com/ifm

27. 27 Pros and Cons: Heuristic EvaluationAdvantages detects both major (42%) and minor (32%) problems in UI more effective than single specialist can be used on designs “realistic” approach “severity rating” helps to set prioritiesDisadvantages groups can develop their own bias doing it properly is not that cheap new technologies (Web, Multimedia, Virtual Reality) may have specific problems not covered by The Heuristics Principles DeSiaMorewww.desiamore.com/ifm

28. 28 Theories Beyond the specifics of guidelines Principles are used to develop theories 3 examples of theories: Levels of Analysis model Stages of action models GOMS and the keystroke-level model Theories DeSiaMorewww.desiamore.com/ifm

29. 29 Levels of Analysis Model Foley and van Dam four-level approach Conceptual level: user’s mental model of system Semantic level: meaning conveyed by input/output Syntactic level: assembly of actions to perform tasks Lexical level: device level actions Approach is convenient for designers Top-down nature is easy to explain Matches the software architecture Allows for useful modularity during design Theories Device/Tool dependent DeSiaMorewww.desiamore.com/ifm

30. 30 Stages of Action Model Norman's seven stages of action 1.Forming the goal 2.Forming the intention 3.Specifying the action 4.Executing the action 5.Perceiving the system state 6.Interpreting the system state 7.Evaluating the outcome Norman's contributions Context of cycles of action and evaluation. Gulf of execution: Mismatch between the user's intentions and the allowable actions Gulf of evaluation: Mismatch between the system's representation and the users' expectations Theories DeSiaMorewww.desiamore.com/ifm

31. 31 Stages of Action Model Theories THE WORLD Goals Intention to act Sequence of actions Execution of the Action sequence Evaluation of interpretations Interpreting the perception Perceiving the state of the world 1 2 3 7 6 5 4 DeSiaMorewww.desiamore.com/ifm

32. 32 Stages of Action Model Theories 1. Form the Goal 3. Specify action Conceptual Model (Goals) 2. Intention 4. Execute action Real World (Interactions) 5. Perceive system state 6. Interpret 7. Evaluate Cycle of Execution Cycle of Evaluation Gulf Gulf of execution: Mismatch between the user's intentions and the allowable actions Gulf of evaluation: Mismatch between the system's representation and the users' expectations DeSiaMorewww.desiamore.com/ifm

33. 33 Stages of Action Model Four principles of good designFour principles of good design State and the action alternatives should be visible Should be a good conceptual model with a consistent system image Interface should include good mappings that reveal the relationships between stages User should receive continuous feedback Four critical points where user failures can occurFour critical points where user failures can occur Users can form an inadequate goal Might not find the correct interface object because of an incomprehensible label or icon May not know how to specify or execute a desired action May receive inappropriate or misleading feedback Theories DeSiaMorewww.desiamore.com/ifm

34. 34 GOMS and the keystroke-level model Goals and sub-goals Operators: “elementary perceptual, motor or cognitive acts” Methods: actions Selection rules: control structures for decisions between methods Theories (Card, Moran and Newell, 1980) DeSiaMorewww.desiamore.com/ifm

35. 35 Keystroke level model (KLM) Card, Moran and Newell (1980) Purpose approximate prediction of time to perform tasks allows comparison between alternative design options applicable in principle to any interactive system Assumptions routine tasks expert, error-free performance assumes knowledge of task/sub-tasks; method used for task; and some information about the system Theories DeSiaMorewww.desiamore.com/ifm

36. 36 Content of the model a description of the task a simple model of the user a simple model of the computer tasks are executed by a sequence of operators - physical actions of the user and computer T execute = TK + TP + TH + TD + TM + TR where K = keystroking; P = pointing; H = homing; D = drawing; M = mental operator; R = system response operator Theories DeSiaMorewww.desiamore.com/ifm

37. 37 KLM Examples From Card et al 1980 –Method for task : –Reach for mouse H[mouse) –Point to word P[word] –Select word K[YELLOW] –Home on keyboard H[keyboard] –Call replace command MK[R] –Type new 5-digit word 5K[word] –Terminate type-in MK[ESC] »T execute = 2tM + 8tK + 2tH + tP = 6.2s »tK = 0.2sec »tM = 1.35sec »tH =.9sec »tP =.4sec »Method for Task : Jump to next line MK[LINEFEED] Call substitute command MK[S] Specify new 5-digit word 5K[word] Terminate argument MK[RETURN] Specify old 5-digit word 5K[word] Terminate argument MK[RETURN] Terminate command K[RETURN] »T execute = 4tM + 15tK = 8.4 sec. tK = 0.2sec tM = 1.35sec Conclusion: mouse-based interaction is faster Mouse-based editor Keyboard-based editor Theories DeSiaMorewww.desiamore.com/ifm

38. 38 Summary of Lecture Usability can be defined as the capacity to be used by humans easily and effectively Ease-of-use Friendliness Guidelines- provided a number of sample guidelines Principles - introduced major principles in HCI Principles of Universal Design Nielsen’s usability principles Theories - introduced 3 HCI theories Levels of Analysis 7 Stages-of-Action GOMS / Keystroke Level Model References DeSiaMorewww.desiamore.com/ifm

39. 39 Terms of Reference Norman, D. (1990) The Design of Everyday Things Preece, J. et al. (2002) Interaction Design Shneiderman, B. & Plaisant, C. (2005) Designing the User Interface Shackel, B. (1990) Human Factors and Usability Smith, S. & Mosier, J. (2005) Guidelines for Designing User Interface Software Foley, J. & Van Dam, A. (1995) Computer Graphics: Principles & Practices in C Card, S. & Newell, A. (1983) The Psychology of Human-Computer Interaction References DeSiaMorewww.desiamore.com/ifm