An Instructor’s Outline of

Designing the User Interface

4th Edition

by Ben Shneiderman & Catherine Plaisant

Slides developed by Roger J. Chapman

Copyright © 2005, Pearson Education, Inc.

 Chapter 2

Guidelines, Principles, and Theories

Copyright © 2005, Pearson Education, Inc.

 Guidelines
• Shared language
• Best practices
• Critics
– Too specific, incomplete, hard to apply, and
sometimes wrong
• Proponents
– Encapsulate experience

Copyright © 2005, Pearson Education, Inc.

 Navigating the interface
• Sample of the National Cancer Institutes
guidelines:
– Standardize task sequences
– Ensure that embedded links are descriptive
– Use unique and descriptive headings
– Use check boxes for binary choices
– Develop pages that will print properly
– Use thumbnail images to preview larger
images

Copyright © 2005, Pearson Education, Inc.

 Accessibility guidelines
• Provide a text equivalent for every nontext
element
• For any time-based multimedia
presentation synchronize equivalent
alternatives
• Information conveyed with color should
also be conveyed without it
• Title each frame to facilitate from
identification and navigation
Copyright © 2005, Pearson Education, Inc.
 Organizing the display
• Smith and Mosier (1986) offer five high-
level goals
– Consistency of data display
– Efficient information assimilation by the user
– Minimal memory load on the user
– Compatibility of data display with data entry
– Flexibility for user control of data display

Copyright © 2005, Pearson Education, Inc.

 Getting the user’s attention
• Intensity
• Marking
• Size
• Choice of fonts
• Inverse video
• Blinking
• Color
• Audio

Copyright © 2005, Pearson Education, Inc.

 Facilitating data entry
• Smith and Mosier (1986) offer five high-
level objectives as part of their guidelines
for data entry
– Consistency of data-entry transactions
– Minimal input actions by user
– Minimal memory load on users
– Compatibility of data entry with data display
– Flexibility for user control of data entry

Copyright © 2005, Pearson Education, Inc.

 Principles
• More fundamental, widely applicable, and
enduring than guidelines
• Need more clarification
• Fundamental principles
– Determine user’s skill levels
– Identify the tasks
• Five primary interaction styles
• Eight golden rules of interface design
• Prevent errors
• Automation and human control
Copyright © 2005, Pearson Education, Inc.
 Determine user’s skill levels
• “Know thy user” Hansen (1971)
• 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
– Knowledgeable intermittent users
– Expert frequent users
• Multi-layer designs

Copyright © 2005, Pearson Education, Inc.

 Identify the tasks
• Task Analysis usually involve long hours
observing and interviewing users
• Decomposition of high level tasks
• Relative task frequencies

Copyright © 2005, Pearson Education, Inc.

 Choose an interaction style
• Direct
Manipulation
• Menu selection
• Form fillin
• Command
language
• Natural language

Copyright © 2005, Pearson Education, Inc.

 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

Copyright © 2005, Pearson Education, Inc.

 Prevent errors
• Make error messages specific, positive in tone,
and constructive
• Mistakes and slips (Norman, 1983)
• Correct actions
– Gray out inappropriate actions
– Selection rather than freestyle typing
– Automatic completion
• Complete sequences
– Single abstract commands
– Macros and subroutines

Copyright © 2005, Pearson Education, Inc.

 Automation and human control

Copyright © 2005, Pearson Education, Inc.

 Automation and
human control (cont.)
• 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

Copyright © 2005, Pearson Education, Inc.

 Automation and
human control (cont.)
• Supervisory control needed to deal
with real world open systems
– E.g. air-traffic controllers with low
frequency, but high consequences of
failure
– FAA: design should place the user in
control and automate only to improve
system performance, without reducing
human involvement
Copyright © 2005, Pearson Education, Inc.
 Automation and
human control (cont.)
• Goals for autonomous agents
– knows user's likes and dislikes
– makes proper inferences
– responds to novel situations
– performs competently with little guidance
• Tool like interfaces versus autonomous
agents
• Aviators representing human users, not
computers, more successful
Copyright © 2005, Pearson Education, Inc.
 Automation and
human control (cont.)
• User modeling for adaptive interfaces
– keeps track of user performance
– adapts behavior to suit user's needs
– allows for automatically adapting system
• response time, length of messages, density of feedback,
content of menus, order of menu items, type of feedback,
content of help screens
– can be problematic
• system may make surprising changes
• user must pause to see what has happened
• user may not be able to
– predict next change
– interpret what has happened
– restore system to previous state

Copyright © 2005, Pearson Education, Inc.

 Automation and
human control (cont.)
• Alternative to agents:
– user control, responsibility,
accomplishment
– expand use of control panels
• style sheets for word processors
• specification boxes of query facilities
• information-visualization tools

Copyright © 2005, Pearson Education, Inc.

 Theories
• Beyond the specifics of guidelines
• Principles are used to develop
theories
• Descriptions/explanatory or
predictive
• Motor task, perceptual, or cognitive

Copyright © 2005, Pearson Education, Inc.

 Explanatory and
predictive theories
• Explanatory theories:
– Observing behavior
– Describing activity
– Conceiving of designs
– Comparing high-level concepts of two designs
– Training
• Predictive theories:
– Enable designers to compare proposed
designs for execution time or error rates

Copyright © 2005, Pearson Education, Inc.

 Perceptual, Cognitive,
& Motor tasks
• Perceptual or Cognitive subtasks
theories
– Predicting reading times for free text,
lists, or formatted displays
• Motor-task performance times
theories:
– Predicting keystroking or pointing times

Copyright © 2005, Pearson Education, Inc.

 Taxonomy
(explanatory theory)

– Order on a complex set of phenomena

– Facilitate useful comparisons
– Organize a topic for newcomers
– Guide designers
– Indicate opportunities for novel
products.

Copyright © 2005, Pearson Education, Inc.

Conceptual, semantic, syntactic,
and lexical model
• Foley and van Dam four-level approach
– Conceptual level:
• User's mental model of the interactive system
– Semantic level:
• Describes the meanings conveyed by the user's command input and by
the computer's output display
– Syntactic level:
• Defines how the units (words) that convey semantics are assembled
into a complete sentence that instructs the computer to perform a
certain task
– Lexical level:
• Deals with device dependencies and with the precise mechanisms by
which a user specifies the syntax
• Approach is convenient for designers
– Top-down nature is easy to explain
– Matches the software architecture
– Allows for useful modularity during design

Copyright © 2005, Pearson Education, Inc.

 Stages of action models
• 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

Copyright © 2005, Pearson Education, Inc.

 Stages of action models (cont.)
• 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

Copyright © 2005, Pearson Education, Inc.

 GOMS and the
keystroke-level model
• Goals, operators, methods, and selection
rules (GOMS) model
– Keystroke-level model: Predict performance
times for error-free expert performance of tasks
– Transition diagrams
– Natural GOMS Language (NGOMSL)
– Several alternative methods to delete fields, e.g.
• Method 1 to accomplish the goal of deleting the field:
1. Decide: If necessary, then accomplish the goal of
selecting the field
2. Accomplish the goal of using a specific field delete
method
3. Report goal accomplished

Copyright © 2005, Pearson Education, Inc.

 GOMS and the
keystroke-level model (cont.)
• Method 2 to accomplish the goal of deleting the field:
1. Decide: If necessary, then use the Browse tool to go
to the card with the field
2. Choose the field tool in the Tools menu
3. Note that the fields on the card background are
displayed
4. Click on the field to be selected
5. Report goal accomplished
• Selection rule set for goal of using a specific field-delete
method:
– If you want to past the field somewhere else, then
choose "Cut Field" from the Edit menu.
– If you want to delete the field permanently, then
choose "Clear Field" from the Edit menu.
– Report goal accomplished.

Copyright © 2005, Pearson Education, Inc.

 Consistency through grammars
Consistent user interface goal
– Definition is elusive - multiple levels sometimes in
conflict
– Sometimes advantageous to be inconsistent.

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

Copyright © 2005, Pearson Education, Inc.

 Consistency through
grammars (cont.)
Inconsistent action verbs
– Take longer to learn
– Cause more errors
– Slow down users
– Harder for users to remember

Copyright © 2005, Pearson Education, Inc.

 Consistency through
grammars (cont.)
• Task-action grammars (TAGs) try to characterize a
complete set of tasks.
• Example: TAG definition of cursor control

• Dictionary of tasks:
move-cursor-one-character-forward [Direction=forward,Unit=char]
move-cursor-one-character-backward [Direction=backward,Unit=char]
move-cursor-one-word-forward
[Direction=forward,Unit=word]
move-cursor-one-word-backward
[Direction=backward,Unit=word]

Copyright © 2005, Pearson Education, Inc.

 Consistency through
grammars (cont.)
High-level rule schemas describing command syntax:
1. task [Direction, Unit] -> symbol [Direction] + letter [Unit]
2. symbol [Direction=forward] -> "CTRL"
3. symbol [Direction=backward] -> "ESC"
4. letter [Unit=word] -> "W"
5. letter [Unit=char] -> "C"

Generates a consistent grammar:

move cursor one character forward CTRL-C
move cursor one character backward ESC-C
move cursor one word forward CTRL-W
move cursor one word backward ESC-W

Copyright © 2005, Pearson Education, Inc.

 Widget-level theories
Follow simplifications made in higher-level, user-
interface building tools.
Potential benefits:
– Possible automatic generation of performance
prediction
– A measure of layout appropriateness available as
development guide
– Estimates generated automatically and amortized
over many designers and projects
– perceptual complexity
– cognitive complexity
– motor load
– Higher-level patterns of usage appear

Copyright © 2005, Pearson Education, Inc.

 Object/Action Interface model
Syntactic-semantic model of human behavior
• used to describe
– programming
– database-manipulation facilities
– direct manipulation
• Distinction made between meaningfully-acquired
semantic concepts and rote-memorized syntactic details
• Semantic concepts of user's tasks well-organized and
stable in memory
• Syntactic details of command languages arbitrary and
required frequent rehearsal

Copyright © 2005, Pearson Education, Inc.

 Object/Action Interface
model (cont.)
With introduction of GUIs, emphasis shifted to simple
direct manipulations applied to visual representations of
objects and actions.

Syntactic aspects not eliminated, but minimized.

Copyright © 2005, Pearson Education, Inc.

 Object/Action Interface
model (cont.)
Object-action design:
1. understand the task.
– real-world objects
– actions applied to those object
2. create metaphoric representations of interface objects
and actions
3. designer makes interface actions visible to users

Copyright © 2005, Pearson Education, Inc.

 Task hierarchies of
objects and actions
Decomposition of real-world complex
systems natural
• human body
• buildings
• cities
• symphonies
• baseball game

Copyright © 2005, Pearson Education, Inc.

 Task hierarchies of
objects and actions (cont.)
Computer system designers must generate a
hierarchy of objects and actions to model
users' tasks:
• Representations in pixels on a screen
• Representations in physical devices
• Representations in voice or other audio cue

Copyright © 2005, Pearson Education, Inc.

 Interface hierarchies of
objects and actions
Interface includes hierarchies of objects and actions
at high and low levels. E.g. A computer system:
• Interface Objects
– rectory
• name
• length
• date of creation
• owner
• access control
– files of information
• lines
• difields
• characters
• fonts
• pointers
• binary numbers

Copyright © 2005, Pearson Education, Inc.

 Interface hierarchies of
objects and actions (cont.)
• Interface Actions
– load a text data file
– insert into the data file
– save the data file
• save the file
• save a backup of the file
• apply access-control rights
• overwrite previous version
• assign a name

Copyright © 2005, Pearson Education, Inc.

 Interface hierarchies of
objects and actions (cont.)
Interface objects and actions based on
familiar examples.

Users learn interface objects and actions by:

• seeing a demonstration
• hearing an explanation of features
• conducting trial-and-error sessions

Copyright © 2005, Pearson Education, Inc.

 The disappearance of syntax
• Users must maintain a profusion of device-
dependent details in their human memory.
– Which action erases a character
– Which action inserts a new line after the third line of a
text file
– Which abbreviations are permissible
– Which of the numbered function keys produces the
previous screen.

Copyright © 2005, Pearson Education, Inc.

 The disappearance
of syntax (cont.)
• Learning, use, and retention of this knowledge is
hampered by two problems
– Details vary across systems in an unpredictable
manner
– Greatly reduces the effectiveness of paired-associate
learning
• Syntactic knowledge conveyed by example and
repeated usage
• Syntactic knowledge is system dependent

Copyright © 2005, Pearson Education, Inc.

 The disappearance
of syntax (cont.)
• Minimizing these burdens is the goal of most
interface designers
– Modern direct-manipulation systems
– Familiar objects and actions representing their task
objects and actions.
– Modern user interface building tools
– Standard widgets

Copyright © 2005, Pearson Education, Inc.