TH6204

Advance Design Interface

Topic 3
Standards and Guidelines

TENGKU SITI MERIAM BT TENGKU WOOK

TSMTW

Introduction

TSMTW

Design rules for HCI

Many sets of rules have been proposed to encapsulate
understanding and best practice
Operate at various level
Designing for maximum usability
the goal of interaction design

Principles of usability
general understanding

Standards and guidelines

direction for design

Design patterns
capture and reuse design knowledge
TSMTW

principles
abstract design rules
An interface should be

easy to navigate

standards
specific design rules
high authority
limited application

increasing generality

increasing generality

types of design rules

Guidelines

Standards

increasing authority
increasing authority

guidelines

Advice on how to achieve principle

May conflict; understanding theory helps

resolve
lower authority
more general application
TSMTW

increasing generality

Design rules
suggest how to increase usability
differ in generality and authority

increasing generality

Using design rules

Guidelines

Standards

increasing
increasingauthority
authority

TSMTW

TSMTW

Standards

TSMTW

Standards

Standards for interactive system design are usually set

by national or international bodies to ensure
compliance by a large community of designers
standards require sound underlying theory and slowly
changing technology
Underlying theory: software standards are based on theories
from psychology or cognitive science, which are less well
formed, still evolving and not easy to interpret in the language
of software design.
Change: hardware is more difficult and expensive to change
than software, which is usually designed to be very flexible

TSMTW

STANDARDS

hardware standards more common than

software high authority and low level of detail

ISO 9241 defines usability as effectiveness,

efficiency and satisfaction with which users
accomplish tasks

TSMTW

ISO 9241

Addresses the ergonomics requirements to work

with VDTs (Visual Display Terminals), both
hardware and software

Contains 17 parts:
Part 1 General introduction
Part 2 Guidance on task requirements
Part 3 Visual display requirements
Part 4 Keyboard requirements
Part 5 Workstation layout and postural requirements
Part 6 Environmental requirements
Part 7 Display requirements with reflections
Part 8 Requirements for displayed colours
TSMTW

10

ISO 9241
Part 9 Requirements for non-keyboard input

devices
Part 10

Dialogue principles

Part 11

Guidance on usability specification

measures

and
Part 12

Presentation of information

Part 13

User guidance

Part 14

Menu dialogues

Part 15

Command dialogues

Part 16

Direct manipulation dialogues

Part 17

Form-filling dialogues

TSMTW

11

12

Guidelines

TSMTW

Guidelines

more suggestive and general

many textbooks and reports full of guidelines
abstract guidelines (principles) applicable during
early life cycle activities
detailed guidelines (style guides) applicable
during later life cycle activities
understanding justification for guidelines aids in
resolving conflicts

TSMTW

13

Golden rules and heuristics

Broad brush design rules
Useful check list for good design
Better design using these than
using nothing!
Different collections e.g.

Shneidermans 8 Golden Rules

Nielsens 10 Heuristics

TSMTW

14

Shneidermans 8 Golden
Rules
1. Strive for consistency
2. Enable frequent users to use shortcuts
3. Offer informative feedback
4. Design dialogs to yield closure
5. Offer error prevention and simple error
handling
6. Permit easy reversal of actions
7. Support internal locus of control
8. Reduce short-term memory load
TSMTW

15

Shneidermans 8 Golden Rules

1. Strive for Consistency
Consistent sequences of actions should be
required in similar situations; identical
terminology should be used in prompts,
menus, and help screens; and consistent
commands should be employed throughout.
Consistency
Workflows / Processes
Functionality
Appearance
Terminology
TSMTW

16

Strive for Consistency

TSMTW

17

Strive for Consistency

App

Platfor
m
System

Type
Cultural
Region
The
World

TSMTW

MS Word, WordPress,
eBay,
iPhone/iPad, Windows,
car nav,
home appliance, car,
TV,
(scripts, script direction,
)
rocker switch, dial ,
18

Strive for Consistency

TSMTW

19

Strive for Consistency

TSMTW

20

Strive for Consistency

TSMTW

21

Bad example:
website colors of visited links and
unvisited links
Good example:
- Window control buttons

TSMTW

22

Shneidermans 8 Golden Rules

2. Enable frequent users to use shortcuts
As the frequency of use increases, so
do the users desires to reduce the
number of interactions and to increase
the pace of interaction. Abbreviations,
function keys, hidden commands, and
macro facilities are very helpful to an
expert user.
Flexibility
Minimalism

Keyboard shortcuts
Hidden Power User
features
Automation
TSMTW

23

Enable frequent users to

use shortcuts

TSMTW

24

TSMTW

25

Good example:
CTRL-(x,c,v) :Microsoft applications
for cut, copy and paste (consistency
principle also)
Bad examples:
- Notepad does not provide CTRL-s for
save files.
TSMTW

26

Shneidermans 8 Golden Rules

3. Offer informative feedback
For every operator action, there
should be some system feedback. For
frequent and minor actions, the
response can be modest, while for
infrequent and major actions, the
response should be more substantial.
Feedback

Relevant
Fits importance and urgency
Comprehensible and meaningful
Within appropriate context (time
& place)
TSMTW

27

Offer informative feedback

0,1 s 1,0 s 10 s
Experiencing
cause and effect

Taking turns in
a conversation

Typical human
attention span

Respond to
mouse click,
key press,

Open window,
bring up progress
bar / spinner,

Wake machine,
load file into
app,
start printing,

TSMTW

28

Offer informative feedback

TSMTW

29

Bad example:
- Text editor that allows you to type
during auto-save is in progress, but you
will not see on the screen in a few
seconds
Good example:
- Color selection during the Paint
program allows automatic feedback if
user change the color
TSMTW

30

Shneidermans 8 Golden Rules

4. Design dialogue to yield closure
Sequences of actions should be organized
into groups with a beginning, middle, and
end. The informative feedback at the
completion of a group actions gives the
operators the satisfaction of
accomplishment, a sense of relief, the
signal to drop contingency plans and
options from their minds, and an
indication that the way is clear to prepare
for the next group of actions.
Grouping
of actions
Task
conformance

Explicit completion of an action

Well-defined options for the next step
TSMTW

31

Design dialogue to yield

closure

Example

TSMTW

32

Design dialogue to yield

closure

TSMTW

33

Design dialogue to yield

closure

TSMTW

34

Design dialogue to yield

closure

TSMTW

35

Shneidermans 8 Golden Rules

5. Offer simple error handling
As much as possible, design the system
so the user cannot make a serious error.
If an error is made, the system should be
able to detect error and offer simple,
comprehensible mechanisms for handling
the error.
Recoverability
Forgiveness
TSMTW

Error prevention over error

correction
Automatic detection of
errors
Clear error notifications
Hints for solving the
problem
36

Offer simple error handling

TSMTW

37

Offer simple error handling

TSMTW

38

Offer simple error handling

TSMTW

39

Good Examples:
if the user select an existing file name when save the

file, a dialog box will come out to check if the old file
should be replaced or not.

TSMTW

40

Shneidermans 8 Golden Rules

6. Permit easy reversal of actions
This feature relives anxiety, since the user
knows that errors can be undone; it thus
encourages exploration of unfamiliar
options. The units of reversibility may be a
single action, a data entry, or a complete
group of actions.
No interference with
workflow
More freedom for the user
Single-action undo vs.
action history

Recoverability

TSMTW

41

Permit easy reversal of

actions
Example:
Back button in the web browser is also in the form of
undo button

TSMTW

42

Permit easy reversal of

actions

TSMTW

43

Permit easy reversal of

actions

TSMTW

44

Shneidermans 8 Golden Rules

7. Support internal locus of control
Experienced operators strongly desire
the sense that they are in charge of
the system and that the system
responds to their actions. Design the
system to make users the initiators of
actions rather than the responders.
Dialog inititive
TSMTW

The user commands, the

system obeys Strongly
relies on Informative
Feedback
The Principle of Least
Surprise
45

Support internal locus of

control
Examples:
Helpful pictures on buttons are good

Unhelpful pictures on buttons are bad

TSMTW

46

Support internal locus of

control

TSMTW

47

Support internal locus of

control

Modal

Non-

Dialog box
TSMTW

inspector48

Support internal locus of

control

Hotel
Alarm
Clocks
TSMTW

49

Support internal locus of

control

TSMTW

50

Bad examples from Microsoft Word 97:

Hyperlinks automatically underlined and fontselected

TSMTW

51

Shneidermans 8 Golden Rules

8. Reduce short-term memory load
The limitation of human information
processing in short-term memory requires
that displays be kept simple, multiple page
displays be consolidated, window-motion
frequency be reduced, and sufficient
training time be allotted for codes,
mnemonics, and sequences of actions.

Minimalism

Clear structure:
windows, dialogs, app in its
entirety
Recognition over Recall
Implicit help
TSMTW

52

Reduce short-term memory

load
Understanding a simple sentence can if
interrupted with a tangent like this one,
which contains just twenty words, but
already noticeably challenges your shortterm memory
become a problem.

TSMTW

53

Reduce short-term memory

load

72
Chunks of Information

TSMTW

54

Reduce short-term memory

load

TSMTW

55

Reduce short-term memory

load

TSMTW

56

Reduce short-term memory

load

TSMTW

57

Nielsens Heuristics
10 heuristics evaluation

TSMTW

58

Nielsens Heuristics
1. Visibility of system status
2. Match between system and the real world
3. User control and freedom
4. Consistency and standards
5. Error prevention
6. Recognition rather than recall
7. Flexibility and efficiency of use
8. Aesthetic and minimalist design
9. Help users recognise, diagnose and recover from
errors
10. Help and documentation
TSMTW

59

Nielsens Usability Heuristics

1. Visibility of system status
The system should always keep
users informed about what is going
on, through appropriate feedback
within reasonable time
Observability
Responsiveness

TSMTW

60

Nielsens Usability Heuristics

2. Match between system and the real world
The system should speak the users
language, phrases and concepts familiar
to the user, rather than system-oriented
terms.
Follow real-world conventions,
making information appear in natural and
logical order.
Mapping
Familiarity

TSMTW

61

Nielsens Usability Heuristics

3. User control and freedom
Users often choose system functions
by mistake and will need a clearly
marked emergency exit to leave the
unwanted state without having to go
through an extended dialogue.
Support undo and redo.
Dialog initiative
Recoverability
Forgiveness
TSMTW

62

Nielsens Usability Heuristics

4. Consistency and standards
Users should not have to wonder
whether
different
words,
situations, or actions mean the
same thing.
Follow platform
conventions.
Consistency
TSMTW

63

Nielsens Usability Heuristics

5. Error Prevention
Even better than good error
messages is a careful design which
prevents a problem from occurring
in the first place.
Recoverability
Forgiveness
TSMTW

64

Nielsens Usability Heuristics

6. Recognition rather than recall
Make objects, actions, and options visible.
The user should not have to remember
information from one part of the dialogue
to another. Instructions for use of the
system should be visible or easily
retrievable whenever appropriate.
Visibility
Minimalism

TSMTW

65

Nielsens Usability Heuristics

7. Flexibility and efficiency of use
Accelerators
(unseen by novice
users) may often speed up the
interaction for the expert user such
that the system can cater to both
inexperienced and experienced users.
Allow users to tailor frequent actions.
Flexibility (and all the supporting principles)
TSMTW

66

Nielsens Usability Heuristics

8. Aesthetic and minimalist design
Dialogues should not contain information
which is irrelevant or rarely needed.
Every extra unit of information in a
dialogue competes with the relevant units
of information and diminishes their
relative visibility.
Visibility
Minimalism
TSMTW

67

Nielsens Usability Heuristics

9. Help users recognize, diagnose, and
recover from errors
Error messages should be expressed
in plain language (no codes), precisely
indicate
the
problem,
and
constructively suggest a solution.
Recoverability
Forgiveness
TSMTW

68

Nielsens Usability Heuristics

10.

Help and documentation

Even though it is better if the system

can be used without documentation,
it may be necessary to provide help
and documentation. Any such
information should be easy to search,
focused on the users task, list
concrete steps to be carried out, and
not to be too large.

TSMTW

69

Summary:

The 10 most general principles for

interaction design. They are called
"heuristics" because they are more in
the nature of rules of thumb than
specific usability guidelines.

TSMTW

70

More specific Guidelines

Windows User Experience Interaction

Guidelines
http://msdn.microsoft.com/en-us/library/aa51125
8.aspx

Apple Human Interface Guidelines

http://developer.apple.com/library/mac/#documentati
on/UserExperience/Conceptual/AppleHIGuidelines/XHIG
Intro/XHIGIntro.html

GNOME Human Interface Guidelines

2.2.1
TSMTW

71

GUI Bloopers (Booksite)United

States, California, San Francisco
Jeff Johnson2002-05-20UI Wizards,
Inc.jjohnson@uiwizards.comBooksite
for GUI Bloopers book.

TSMTW

72

Exercise

Many seems like common

sense- but often violated
Pick one everyday object and one

piece of software and assess with

respect to these rules.

TSMTW

73