CHAPTER 2:

Guidelines, Principles, and Theories

Designing the User Interface:

Strategies for Effective Human-Computer Interaction

Sixth Edition

Ben Shneiderman & Catherine Plaisant

in collaboration with
Maxine S. Cohen and Steven M. Jacobs
Addison Wesley
is an imprint of

© 2010 Pearson Addison-Wesley. All rights reserved.

 Outline

• User interface designers have accumulated a wealth of

experience and have produced a body of evidences and
theories

• Guidelines, principles, and theories guide the future

designers, and can prevent some problems (cluttered
displays, complex procedures, inconsistent layouts, and
insufficient informative feedback)

• Fixed, proofed and reliable rules should guide the

designer
1-2

© 2010 Pearson Addison-Wesley. All rights reserved. 2-2

 Guidelines
• Critics
– Too specific, incomplete, hard to apply, and sometimes
wrong

• Proponents (supporters)
‫ ــ‬Building on experience from design leaders contributes
to steady improvements

1-3

© 2010 Pearson Addison-Wesley. All rights reserved. 2-3

 Some interface design guidelines:

– Use radio buttons for mutually exclusive

choices
– Use check boxes for binary/multiple choices
– Develop pages that will print properly
– Use thumbnail images to preview larger
images
– Ensure that embedded links are descriptive
– Use unique and descriptive headings
– Standardize task sequences
1-4

© 2010 Pearson Addison-Wesley. All rights reserved. 2-4

 Some interface design guidelines
(cont.) :

– Provide a text equivalent for every non-text

element Make it easier for users to see and
hear content
– Title each frame to facilitate identification and
navigation
– Make web pages appear and operate in
predictable ways

1-5

© 2010 Pearson Addison-Wesley. All rights reserved. 2-5

 Guidelines for organizing the display

– Consistency of data display

– Efficient information assimilation by the user
• the format should be familiar to the user, and related to the tasks
• neat columns, right use for alphanumeric /integer data, lining up
of decimal points, proper spacing
– Minimal memory load on the user
– Compatibility of data display with data entry
– Flexibility for user to control data display (ex. the order of
columns and sorting of rows should be easily
changeable by the users)

1-6

© 2010 Pearson Addison-Wesley. All rights reserved. 2-6

 Guidelines for organizing the display (cont.)

̶ Marking (underline the item, enclose it in a box, or use an

asterisk*, bullet., dash/, or X)
̶ Size (use up to four sizes, with larger sizes attracting
more attention)
̶ Fonts (use up to three fonts)
̶ Color (use up to four standard colors, with additional
colors reserved for occasional use)
̶ Use inverse video technique (background and text color
values are inverted)
̶ Blinking (use blinking displays (2-4 Hz) with great care
and in limited areas)
̶ Audio (use soft tones for regular positive feedback, and
harsh sounds for rare emergency conditions)
1-7

© 2010 Pearson Addison-Wesley. All rights reserved. 2-7

 Inverse video

1-8

© 2010 Pearson Addison-Wesley. All rights reserved. 2-8

 Homework

• How to use color, contrast, and light

effectively in user interface design?
• At least 2 references
• Due date: next Wed
• Minimum one full page of font 14 (hard
copy)
• Please, don’t just copy and paste !!!

1-9

© 2010 Pearson Addison-Wesley. All rights reserved. 2-9

 Principles

• More fundamental, widely applicable, and

enduring than guidelines
• Need more clarification

• Fundamental principles
– Determine and accommodate user’s skill levels
– Identify the tasks and user needs
– Choose one of five primary interaction styles
– Eight golden rules of interface design
– Ensure human control while increasing automation
1-10

© 2010 Pearson Addison-Wesley. All rights reserved. 2-10

 Determine user’s skill levels
• “Know the user”
• Every design should begin with an
understanding of the intended users (age,
gender, physical and cognitive abilities, education,
cultural or ethnic background, training, motivation,
goals and personality)
• Design goals based on skill level
– Novice or first-time users (little task and interface concepts)
– Knowledgeable intermittent users (stable task concepts, and
broad knowledge of interfaces, but have difficulties about menus and some
features)
– Expert frequent users (familiar with the task and interface concepts
and seek to get their work done quickly)
1-11

© 2010 Pearson Addison-Wesley. All rights reserved. 2-11

 Determine user’s skill levels (cont.)

1. Novice or first-time users

Use instructions, dialog boxes, online help, restricting vocabulary, small # of
actions, feedback, specific error messages, and good documentation and
video demonstrations to overcome limitations
2. Knowledgeable intermittent users
Using consistent sequences of actions, meaningful messages, context-
dependent help, manuals with search capabilities, and guides to frequent
patterns of usage will be useful
3. Expert frequent users
Use shortcuts and macros, to reduce # of steps

• Designing for one class is easy; designing for

several is much more difficult
1-12

© 2010 Pearson Addison-Wesley. All rights reserved. 2-12

 Determine user’s skill levels (cont.)

• How to make interfaces suitable for all user levels?

– A multi-layered (level-structured) design (different
interface designs for different user levels)
– Lowest-common strategies (carefully trim the
features to make a simple common interface)
• Multi-layer designs seem to be the most promising
approach to promoting universal usability
– Novices should be taught a minimal # of actions, and after
gaining confidence, they can progress to greater task and
interface level
– Example: cell phone learning for novices

1-13

© 2010 Pearson Addison-Wesley. All rights reserved. 2-13

 Identify the tasks

• Task Analysis usually involve long hours

observing and interviewing users

• Decomposition of high level tasks

✓ into multiple middle-level task actions, which can be further
refined into atomic actions that users execute with a single
command, menu selection, or other action

1-14
2-14
© 2010 Pearson Addison-Wesley. All rights reserved.
 Example of decomposing tasks

• Word processor:
✓ Frequent actions might be performed by pressing special
keys, such as the four arrow keys, Insert, and Delete
✓ Less frequent actions might be performed by pressing a
single letter plus the Ctrlkey, or by a selection from a pull-
down menu—examples include, bold, or save
✓ Infrequent actions or complex actions might require going
through a sequence of menu selections or form fill-ins, for
example, to change the printing format or to revise
network-protocol parameters

1-15

© 2010 Pearson Addison-Wesley. All rights reserved. 2-15

 Identify the tasks: Relative frequency of use

• Such user-needs assessment clarifies what tasks are essential for

the design and which ones could be left out to preserve system
simplicity and ease of learning

1-16

© 2010 Pearson Addison-Wesley. All rights reserved. 2-16

 Choose an interaction style

• Direct
Manipulation
• Menu selection
• Form fillin
• Command
language
• Natural language

1-17
2-17
© 2010 Pearson Addison-Wesley. All rights reserved.
 Direct manipulation

• Using a visual representation of the actions, greatly simplifies

the users' tasks
• Keyboard entry of commands and menu selections are
replaced by the use of pointing devices to select from a visible
set of objects and actions
• Examples: drawing tools, and games
• Users can carry out tasks rapidly and can observe the results
immediately (for example, dragging and dropping an icon into
a trash)
• Appealing to novices, easy to remember for intermittent users,
and can be rapid for frequent users

1-18

© 2010 Pearson Addison-Wesley. All rights reserved. 2-18

 Menu selection

• Users read a list of items, select the one most

appropriate to their task, and observe the effect
• Little learning or memorization and just a few actions
• Clear structure to decision making, since all possible
choices are presented at one time
• For designers, menu-selection systems require careful
task analysis to ensure that all functions are supported
conveniently and that terminology is chosen carefully and
used consistently

1-19

© 2010 Pearson Addison-Wesley. All rights reserved. 2-19

 Form fill-in
• When data entry is required, menu selection usually
becomes cumbersome (slow), and form fill-in is
appropriate
• Users see a display of related fields, move a cursor
among the fields, and enter data where desired
• Users must understand the field labels, know the
permissible values and the data entry method, and be
capable of responding to error messages
• Since knowledge of the keyboard, labels, and permissible
fields is required, some training may be necessary

1-20

© 2010 Pearson Addison-Wesley. All rights reserved. 2-20

 Command language

• Command languages and lengthier query or

programming languages
• For expert users, command languages provide a strong
feeling of being in control. Users learn the syntax and can
often express complex possibilities rapidly. It makes
easier for them to create simple macros
• It also encourages the creativity
• However, error rates are typically high, training is
necessary, and retention may be poor. Error messages
and online assistance are hard to provide because of the
diversity of possibilities
1-21

© 2010 Pearson Addison-Wesley. All rights reserved. 2-21

 Natural-language

• Computers respond to arbitrary natural-language

sentences or phrases
• Example: Say Ok Google
• May be slower than selecting from a well-organized
menu
• Still, when users are knowledgeable about a task domain
whose scope is limited, there exist opportunities for
natural-language interfaces
• Relieves burden of training

1-22

© 2010 Pearson Addison-Wesley. All rights reserved. 2-22

 Spectrum of Directness

1-23
2-23
© 2010 Pearson Addison-Wesley. All rights reserved.
 The 8 golden rules of interface design

• These principles, derived from experience

and refined over three decades
• No list such as this can be complete, but it
has been well received as a useful guide to
students and designers

1-24

© 2010 Pearson Addison-Wesley. All rights reserved. 2-24

 The 8 golden rules of interface design

1. Strive for consistency

2. Cater to universal usability
3. Offer informative feedback
4. Design dialogs to yield closure
5. Prevent errors
6. Permit easy reversal of actions
7. Support internal locus of control
8. Reduce short term memory load
1-25

© 2010 Pearson Addison-Wesley. All rights reserved. 2-25

 Strive for consistency

• Consistency means:
– Same sequence of actions should be required in similar
situations
– Identical terminology should be used in prompts, menus, and
help screens; and consistent color, layout, capitalization, fonts,
and so on should be employed throughout
Consistent Inconsistent A Inconsistent B
delete/insert character delete/insert character delete/insert character
delete/insert word remove/bring word remove/insert word
delete/insert line destroy/create line delete/insert line
delete/insert paragraph kill/birth paragraph delete/insert paragraph

1-26

© 2010 Pearson Addison-Wesley. All rights reserved. 2-26

 Strive for consistency (cont.)

• Inconsistent action verbs

– Take longer to learn
– Cause more errors
– Slow down users
– Harder for users to remember

• What are the goals of consistency principle?

1-27

© 2010 Pearson Addison-Wesley. All rights reserved. 2-27

 Strive for consistency (cont.)

• Exceptions in applying the consistency principle:

– when required confirmation of the delete command
– to draw attention to a dangerous operation
• But should be comprehensible and limited in number

• Inconsistency in elements such as the positioning of

buttons or colors will slow users down by 5-10%, while
changes to terminology slow users by 20-25%

1-28

© 2010 Pearson Addison-Wesley. All rights reserved. 2-28

 Cater to universal usability

• Recognize the needs of diverse users. Novice to expert

differences, age ranges, disabilities, ..etc.

• Adding features for novices, such as explanations, and

features for experts, such as shortcuts, can enrich the
interface design and improve perceived system quality

1-29

© 2010 Pearson Addison-Wesley. All rights reserved. 2-29

 Offer informative feedback (result)

• For every user action, there should be a system feedback

1-30

© 2010 Pearson Addison-Wesley. All rights reserved. 2-30

 Design dialogs to yield closure

• Sequences of actions should be organized into groups

with a beginning, middle, and end

• Gives users the satisfaction of accomplishment, a sense

of relief

• For example, e-commerce web sites move users from

selecting products to the checkout, ending with a clear
confirmation page that completes the transaction

1-31

© 2010 Pearson Addison-Wesley. All rights reserved. 2-31

 Prevent errors
• Design the system such that users cannot make serious
errors

• The error message should be simple, specific, positive in

tone, and constructive (telling the user what to do, rather
than merely reporting the problem)

• Example: rather than using vague ("?" or "What?") or

('Illegal Operation" or "Syntax Error") messages,
designers are encouraged to use informative messages,
such as "Printer is off, please turn it on" or "Months range
from 1to 12"

1-32

© 2010 Pearson Addison-Wesley. All rights reserved. 2-32

 Prevent errors
• Correct actions to prevent errors:
– Gray out inappropriate actions
– Do not allow alphabetic characters in numeric entry fields
– Users should not have to retype an entire name-address form if
they enter an invalid zip code
– Selection rather than freestyle typing (ex. date of flight, favorite
numbers)
– Automatic completion (ex. google auto complete)
– Offer a sequence of steps as a single action (ex. the driver does
not have to set two switches to signal a left turn, title style in MS
word)
– Offer macros and subroutines

1-33

© 2010 Pearson Addison-Wesley. All rights reserved. 2-33

 Permit easy reversal of actions

• As much as possible, actions should be reversible

• This feature relieves anxiety, since the user knows that

errors can be undone, and encourages exploration of
unfamiliar options

1-34

© 2010 Pearson Addison-Wesley. All rights reserved. 2-34

 Support internal locus of control

• Experienced users strongly desire the sense that they

are in charge of the interface and that the interface
responds to their actions, and they are annoyed by
inability to produce their desired result

• Try to make them feel they are controlling the interface

1-35

© 2010 Pearson Addison-Wesley. All rights reserved. 2-35

 Reduce short-term memory load

• Humans' limited capacity for information processing in

short-term memory requires that designers avoid
interfaces in which users must remember information
from one screen and then use that information on
another screen

• Examples: cell phones should not require re-entry of

phone numbers

1-36

© 2010 Pearson Addison-Wesley. All rights reserved. 2-36

Ensuring human control while increasing automation

1-37
2-37
© 2010 Pearson Addison-Wesley. All rights reserved.
 1-38
38
© 2010 Pearson Addison-Wesley. All rights reserved.
Ensuring human control while increasing automation

• Successful integration:
– Users can avoid:
• Routine, tedious, and error prone tasks
– Users can concentrate on:
• Making critical decisions, coping with
unexpected situations, and planning future
actions

1-39

© 2010 Pearson Addison-Wesley. All rights reserved. 2-39

 Theories

• Beyond the specifics of guidelines

• Tested, reliable, and broadly useful
• Principles are used to develop
theories
• How to group theories?
• Descriptive, explanatory or predictive
• Motor task, perceptual, or cognitive
1-40

© 2010 Pearson Addison-Wesley. All rights reserved. 2-40

 Grouping theories according to the
types of skills involved
• Motor-task performance theories:
– Motor: ex. pointing with a mouse
– Accurate for predicting keystroking or pointing times
• Perceptual subtasks theories
– Ex. finding an item on a display
– Successful in predicting reading times for free text, lists, or
formatted displays
• Cognitive subtasks theories
− Ex. planning the sequence of steps needed to pay a bill
− Short term, working, and long-term memory, are central to
problem solving

1-41

© 2010 Pearson Addison-Wesley. All rights reserved. 2-41

 Contextual Theories

• The physical and social environments are intertwined

with use of technology. Design cannot be separated from
patterns of use
• User actions are situated by time and place
• One way of thinking about user interfaces is by way of
the objects that users encounter and the actions that they
take
• Designers can apply contextual theories by observing
users in their own environments as they carry out their
work, engage socially, or participate in sports or play. A
detailed record of how tasks are carried out would lay the
basis for interface design 1-42

© 2010 Pearson Addison-Wesley. All rights reserved. 2-42

 Contextual Theories (cont.)

• A taxonomy for mobile device application

development could include:
– Monitor and provide alerts, e.g. patient monitoring
systems
– Gather information
– Participate in group collaboration
– Locate and identify nearby object or site
– Capture information about the object and share that
information

1-43

© 2010 Pearson Addison-Wesley. All rights reserved. 2-43