1 usability guidelines, principles & theories lecture 6 date: 16 th february
Post on 22-Dec-2015
216 views
TRANSCRIPT
![Page 1: 1 Usability Guidelines, Principles & Theories Lecture 6 Date: 16 th February](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649d775503460f94a594a7/html5/thumbnails/1.jpg)
1
Usability Guidelines, Principles &
TheoriesLecture 6
Date: 16th February
![Page 2: 1 Usability Guidelines, Principles & Theories Lecture 6 Date: 16 th February](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649d775503460f94a594a7/html5/thumbnails/2.jpg)
2
Overview of Lecture
•Principles
•Principles of Universal Design
•Major design principles
•Nielsen’s usability principles
•Theories
•GOMs
•7 Stages-of-Action
•Levels of Analysis
![Page 3: 1 Usability Guidelines, Principles & Theories Lecture 6 Date: 16 th February](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649d775503460f94a594a7/html5/thumbnails/3.jpg)
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
![Page 4: 1 Usability Guidelines, Principles & Theories Lecture 6 Date: 16 th February](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649d775503460f94a594a7/html5/thumbnails/4.jpg)
4
Design Principles
•Visibility
•Feedback
•Constraints
•Mapping
•Consistency
•Affordance//Will be discussed in conjunction with usability principles
Principles
![Page 5: 1 Usability Guidelines, Principles & Theories Lecture 6 Date: 16 th February](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649d775503460f94a594a7/html5/thumbnails/5.jpg)
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
![Page 6: 1 Usability Guidelines, Principles & Theories Lecture 6 Date: 16 th February](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649d775503460f94a594a7/html5/thumbnails/6.jpg)
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
![Page 7: 1 Usability Guidelines, Principles & Theories Lecture 6 Date: 16 th February](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649d775503460f94a594a7/html5/thumbnails/7.jpg)
7Principles
Usability/Design Principles
Visibility
Feedback Mapping
Affordance
Consistency
Constraints
Help
Simplicity
User control
error prevention
Consistency
Errors mgt
Recognition
Flexibility
Match to worldVisibilityof status
![Page 8: 1 Usability Guidelines, Principles & Theories Lecture 6 Date: 16 th February](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649d775503460f94a594a7/html5/thumbnails/8.jpg)
8
Usability/Design Principles
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
– e.g. when screen button clicked on provides sound or red highlight feedback:
“ccclichhk”
Principles
![Page 9: 1 Usability Guidelines, Principles & Theories Lecture 6 Date: 16 th February](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649d775503460f94a594a7/html5/thumbnails/9.jpg)
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
![Page 10: 1 Usability Guidelines, Principles & Theories Lecture 6 Date: 16 th February](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649d775503460f94a594a7/html5/thumbnails/10.jpg)
10
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
Usability/Design Principles
![Page 11: 1 Usability Guidelines, Principles & Theories Lecture 6 Date: 16 th February](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649d775503460f94a594a7/html5/thumbnails/11.jpg)
11
•Why is this a poor mapping of control buttons?
•Why is this a better mapping
Principles
Usability/Design Principles
![Page 12: 1 Usability Guidelines, Principles & Theories Lecture 6 Date: 16 th February](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649d775503460f94a594a7/html5/thumbnails/12.jpg)
12
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
Usability/Design Principles
![Page 13: 1 Usability Guidelines, Principles & Theories Lecture 6 Date: 16 th February](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649d775503460f94a594a7/html5/thumbnails/13.jpg)
13
•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
Usability/Design Principles
![Page 14: 1 Usability Guidelines, Principles & Theories Lecture 6 Date: 16 th February](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649d775503460f94a594a7/html5/thumbnails/14.jpg)
14
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 is consistent interfaces are easier to learn, use and remember
Principles
Usability/Design Principles
![Page 15: 1 Usability Guidelines, Principles & Theories Lecture 6 Date: 16 th February](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649d775503460f94a594a7/html5/thumbnails/15.jpg)
15
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
Usability/Design Principles
![Page 16: 1 Usability Guidelines, Principles & Theories Lecture 6 Date: 16 th February](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649d775503460f94a594a7/html5/thumbnails/16.jpg)
16
• 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
Usability/Design Principles
![Page 17: 1 Usability Guidelines, Principles & Theories Lecture 6 Date: 16 th February](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649d775503460f94a594a7/html5/thumbnails/17.jpg)
17
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
Usability/Design Principles
![Page 18: 1 Usability Guidelines, Principles & Theories Lecture 6 Date: 16 th February](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649d775503460f94a594a7/html5/thumbnails/18.jpg)
18
• A case of external inconsistency
1 2 3
4 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a) phones, remote controls(a) phones, remote controls (b) calculators, computer keypads(b) calculators, computer keypads
Principles
Usability/Design Principles
![Page 19: 1 Usability Guidelines, Principles & Theories Lecture 6 Date: 16 th February](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649d775503460f94a594a7/html5/thumbnails/19.jpg)
19
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
Usability/Design Principles
![Page 20: 1 Usability Guidelines, Principles & Theories Lecture 6 Date: 16 th February](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649d775503460f94a594a7/html5/thumbnails/20.jpg)
20
• 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
Usability/Design Principles
![Page 21: 1 Usability Guidelines, Principles & Theories Lecture 6 Date: 16 th February](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649d775503460f94a594a7/html5/thumbnails/21.jpg)
21
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
Usability/Design Principles
![Page 22: 1 Usability Guidelines, Principles & Theories Lecture 6 Date: 16 th February](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649d775503460f94a594a7/html5/thumbnails/22.jpg)
22
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
Usability/Design Principles
![Page 23: 1 Usability Guidelines, Principles & Theories Lecture 6 Date: 16 th February](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649d775503460f94a594a7/html5/thumbnails/23.jpg)
23
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• 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
Usability/Design Principles
![Page 24: 1 Usability Guidelines, Principles & Theories Lecture 6 Date: 16 th February](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649d775503460f94a594a7/html5/thumbnails/24.jpg)
24
• 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
Usability/Design Principles
![Page 25: 1 Usability Guidelines, Principles & Theories Lecture 6 Date: 16 th February](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649d775503460f94a594a7/html5/thumbnails/25.jpg)
25
• 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
Usability/Design Principles
![Page 26: 1 Usability Guidelines, Principles & Theories Lecture 6 Date: 16 th February](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649d775503460f94a594a7/html5/thumbnails/26.jpg)
26
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
Usability/Design Principles
![Page 27: 1 Usability Guidelines, Principles & Theories Lecture 6 Date: 16 th February](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649d775503460f94a594a7/html5/thumbnails/27.jpg)
27
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
Usability/Design Principles
![Page 28: 1 Usability Guidelines, Principles & Theories Lecture 6 Date: 16 th February](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649d775503460f94a594a7/html5/thumbnails/28.jpg)
28
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
Usability/Design Principles
![Page 29: 1 Usability Guidelines, Principles & Theories Lecture 6 Date: 16 th February](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649d775503460f94a594a7/html5/thumbnails/29.jpg)
29
Pros and Cons: Heuristic Evaluation
AdvantagesAdvantagesdetects 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
DisadvantagesDisadvantagesgroups 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
![Page 30: 1 Usability Guidelines, Principles & Theories Lecture 6 Date: 16 th February](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649d775503460f94a594a7/html5/thumbnails/30.jpg)
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
![Page 31: 1 Usability Guidelines, Principles & Theories Lecture 6 Date: 16 th February](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649d775503460f94a594a7/html5/thumbnails/31.jpg)
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
Theories
Device/Tooldependent
![Page 32: 1 Usability Guidelines, Principles & Theories Lecture 6 Date: 16 th February](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649d775503460f94a594a7/html5/thumbnails/32.jpg)
32
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
![Page 33: 1 Usability Guidelines, Principles & Theories Lecture 6 Date: 16 th February](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649d775503460f94a594a7/html5/thumbnails/33.jpg)
33
Stages of Action Model
Theories
THE WORLD
Goals
Intention to act
Sequence of actions
Execution of theAction sequence
Evaluation ofinterpretations
Interpreting theperception
Perceiving the stateof the world
1
2
3
7
6
54
![Page 34: 1 Usability Guidelines, Principles & Theories Lecture 6 Date: 16 th February](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649d775503460f94a594a7/html5/thumbnails/34.jpg)
34
Stages of Action Model
Theories
1. Form the Goal
3. Specify action
ConceptualModel(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
![Page 35: 1 Usability Guidelines, Principles & Theories Lecture 6 Date: 16 th February](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649d775503460f94a594a7/html5/thumbnails/35.jpg)
35
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
![Page 36: 1 Usability Guidelines, Principles & Theories Lecture 6 Date: 16 th February](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649d775503460f94a594a7/html5/thumbnails/36.jpg)
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
Theories
(Card, Moran and Newell, 1980)
![Page 37: 1 Usability Guidelines, Principles & Theories Lecture 6 Date: 16 th February](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649d775503460f94a594a7/html5/thumbnails/37.jpg)
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
Theories
![Page 38: 1 Usability Guidelines, Principles & Theories Lecture 6 Date: 16 th February](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649d775503460f94a594a7/html5/thumbnails/38.jpg)
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
Theories
![Page 39: 1 Usability Guidelines, Principles & Theories Lecture 6 Date: 16 th February](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649d775503460f94a594a7/html5/thumbnails/39.jpg)
39
KLM ExamplesFrom Card et al 1980
–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
»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 argument MK[RETURN]
�Terminate command K[RETURN]
»Texecute = 4tM + 15tK = 8.4 sec.�Assuming tK = 0.2sec.
Conclusion: mouse-basedinteraction is faster
Mouse-based editor
Keyboard-based editor
Theories
![Page 40: 1 Usability Guidelines, Principles & Theories Lecture 6 Date: 16 th February](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649d775503460f94a594a7/html5/thumbnails/40.jpg)
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
![Page 41: 1 Usability Guidelines, Principles & Theories Lecture 6 Date: 16 th February](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649d775503460f94a594a7/html5/thumbnails/41.jpg)
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