1. Usability Guidelines, Principles & Theories
Lecture 6
Date: 16th February

2. Overview of Lecture Principles Theories Principles of Universal Design
Major design principles
Nielsen’s usability principles
Theories
GOMs
7 Stages-of-Action
Levels of Analysis

3. Design Principles A number of design principles have been promoted
They are concerned with how to determine what users should see and do
6 major design principles have been identified (written about extensively in Norman’s Design of Everyday Things)
Principles

4. Design Principles Visibility Feedback Constraints Mapping Consistency
Affordance
//Will be discussed in conjunction with usability principles
Principles

5. Usability Principles
Nielsen defined 10 usability principles that can be applied to any system, although frequently used for web applications
Similar in aim to usability goals, except more slightly more prescriptive
Used mainly as the basis for evaluating systems
Provide a framework for usability evaluation
Principles

6. Usability Principles Visibility of system status
Match between system and the real world
User control and freedom
Consistency and standards.
Help users recognize, diagnose and recover from errors
Error prevention
Recognition rather than recall
Flexibility and efficiency of use
Aesthetic and minimalist design
Help and documentation
Principles

7. Usability/Design Principles
Feedback
Mapping
Visibility
Help
Simplicity
User control
error prevention
Consistency
Errors mgt
Recognition
Flexibility
Match to world
Visibility
of status
Consistency
Constraints
Affordance
Principles

8. Usability/Design Principles
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
e.g. when screen button clicked on provides sound or red highlight feedback:
“ccclichhk”
Principles

9. Usability/Design Principles
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

10. Usability/Design Principles
Match between system and the real world
Speak the users’ language
Don’t use system oriented terms
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

11. Usability/Design Principles
Why is this a poor mapping of control buttons?
Why is this a better mapping
Principles

12. Usability/Design Principles
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

13. Usability/Design Principles
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.
Can take away user control built into the Web.
A "home" button on every page
simple way to let users feel in control of your site.
Principles

14. Usability/Design Principles
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 is consistent interfaces are easier to learn, use and remember
Principles

15. Usability/Design Principles
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

16. Usability/Design Principles
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

17. Usability/Design Principles
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

18. Usability/Design Principles
A case of external inconsistency
(a) phones, remote controls
(b) calculators, computer keypads 1 2 3 7 8 9 4 5 6 4 5 6 7 8 9 1 2 3
Principles

19. Usability/Design Principles
5. Help users recognize, 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

20. Usability/Design Principles
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
provide constructive error messages
what error was detected
which field was in error
what corrective action is necessary
resend only erroneous information back to system
Principles

21. Usability/Design Principles
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

22. Usability/Design Principles
Recognition vs recall uses concept of Affordance 
Refers to an attribute of an object that allows people to know how to use it
Much popularised term in interaction design to discuss how to design interface objects
e.g. scrollbars to afford moving up and down, icons to afford clicking on
Principles

23. Usability/Design Principles
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
permit review of message about to be sent
handle common misspellings
permit editing of message about to be sent
advise of non-reversible changes
Principles

24. Usability/Design Principles
Constraints (for error prevention)
permit review of message about to be sent
handle common misspellings
permit editing of message about to be sent
Restricting the possible actions that can be performed
Helps prevent user from selecting incorrect options
Three main types (Norman, 1999)
Physical – (discussed in next side)
cultural - e.g. culture
Logical – e.g. menu item ordering
Principles

25. Usability/Design Principles
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

26. Usability/Design Principles
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 specialized views of a site for specific tasks
Principles

27. Usability/Design Principles
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.
Support different uses of content. No brochures.
Principles

28. Usability/Design Principles
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

29. Pros and Cons: Heuristic Evaluation
Advantages
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 priorities
Disadvantages
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

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

31. 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
Device/Tool
dependent
Theories

32. Stages of Action Model Norman's seven stages of action
Forming the goal
Forming the intention
Specifying the action
Executing the action
Perceiving the system state
Interpreting the system state
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

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

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

35. Stages of Action Model Four 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 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

36. 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
(Card, Moran and Newell, 1980)
Theories

37. 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
Actual, numerical predictions for standard tasks users have to carry out when interaction with a (actual or proposed) system.
Card, Moran and Newell’s 1983 book The Psychology of Human-Computer Interaction was a landmark in the development of HCI as a subject. In it they argued that system developers needed evaluation methods which would enable them to make design decisions. They suggested that decision-making typically did not demand highly precise estimates of performance, but it was important that the estimates could be made quickly. In their book they describe a set of models (the GOMS models - see later for explanation of the term) which make approximate predictions of task performance time and which would meet this requirement. The first one they described (Card et al 1980) - and the simplest to understand - was the Keystroke Level Model (KLM).
Card et al’s method relies under a number of assumptions. Firstly, performance can only be predicted for routine tasks (like text editing); more complex tasks - say, designing a car, or controlling a nuclear power station - would be too complex to model using their technique. Secondly, they can only model the behaviour of an expert user who does not make errors. This assumption is necessary because new users are highly variable in their behaviour and it is difficult to predict what they will do; Card et al defended it with the argument that most systems will ultimately be operated by expert users after they have been exposed to the system for a while. Is this a sound argument?
Finally, the technique requires some detailed information about the system before it can be applied.
Theories

38. 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
Texecute = TK + TP + TH + TD + TM + TR
where K = keystroking; P = pointing; H = homing; D = drawing; M = mental operator; R = system response operator
In simple terms, the KLM calculates the total time to complete a task by summing the times to make the keystrokes. (A similar principle underlies the other GOMS models, but they do the analysis at a higher level of description.)
Obviously, in order to specify the keystrokes that the user will make, you need to be able to state the steps in the task i.e. you must develop a task model. If there are different methods for tackling the task, you need to know about these as well. You must also be able to specify how long each keystroke will take, requiring a basic model of the user’s mental and physical capabilities - a user model. Finally, the total time will also be influenced by the speed of operation of the computer, so a model of the computer must also be specified.
In the case of the KLM, these sub-models are quite simple (even crude): the task is specified in terms of a sequence of operators (the lowest level actions which are necessary to complete the sequence of task steps). These operators include keystrokes, but also pointing movements (e.g. using a mouse); homing movements (e.g. moving the hand from the mouse to the keyboard); simple mental processes, such as deciding which key to press; and system processes, determining the speed of the computer’s response the user’s actions.
The operators are the means by which the behaviour of the user and the device are related to the actions of the task. The user model specifies the time that should be assumed for each of the operators. The times are specified primarily on the basis of existing data on user behaviour, derived through previous psychological research or empirical studies of human skills (e.g. typing speed). For example, research by Fitts in the 1950s showed a reliable relationship between the time taken to point to a target and the distance moved and size of target, and this can be used to specify pointing time; (Card et al cite a number of these sources in their book). The device model is even simpler, and is just a specification of the response time, which may be based on the best possible estimates of the time to complete processing.
The time taken to execute the task is calculated simply by summing together the times associated with each operator in the task.
Theories

39. KLM Examples From Card et al 1980
Keyboard-based editor
Method for Task T1-Poet
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 command K[RETURN]
Texecute = 4tM + 15tK = 8.4 sec.
Assuming tK = 0.2sec.
Mouse-based editor
Method for task T1-Disped
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]
Texecute = 2tM + 8tK + 2tH + tP = 6.2s
The 1980 paper by Card et al illustrates the use of the KLM in the evaluation of two alternative user interfaces for text editing. One was a traditional keyboard based editor (POET), requiring the specification of a string to be replaced followed by entry of the corrected string; and the other exploited the (then novel) mouse for selecting a string to be corrected (a display editor - DISPED).
The tasks for each of the two editors is specified as a sequence of operators and the operators are replaced with times based upon a user model specified in the paper (for example, keystrokes are assumed to take 0.2sec.). Summing the times for implementing the operators shows that the task can be performed more quickly using the mouse-based display editor than the keyboard-based system. Assuming speed is the most relevant aspect of performance, the evaluation suggests that the display editor is preferable.
[This description has simplified some aspects of the KLM; you could look at Card et al’s paper - it’s quite short - for the way they addressed some of the complexities.]
Conclusion: mouse-based
interaction is faster
Theories

40. 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
Major design principles
Nielsen’s usability principles
Theories - introduced 3 HCI theories
Levels of Analysis
7 Stages-of-Action
GOMS / Keystroke Level Model
References

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