CIT 3441: HUMAN COMPUTER

INTERFACE

Lecture PowerPoints

1
Guidelines, Principles and Theories

2
 Topics Covered
• Introduction
• Guidelines
• Principles
• Theories
• Object-Action Interface Model

3
 Introduction

• Successful designers of interactive systems know that

they can and must go beyond intuitive judgments made
hastily when a design problem emerges.
• Fortunately, guidance for designers is available in the
form of
(1) specific and practical guidelines,
(2) middle-level principles, and
(3) high-level theories and models.
• The practical guidelines prescribe cures for
– design problems, caution against dangers, and provide helpful
reminders based on accumulated wisdom.
• The middle-level principles help in analyzing and
comparing design alternatives. 4
 Introduction (continued)

• For developers of high-level theories and models,

– the goal is to describe objects and actions with consistent
terminology so that comprehensible explanations can be made
to support communication and teaching.
• Other theories are predictive,
– such as those for reading, typing, or pointing times.
• In many contemporary systems, there is a grand
opportunity to improve the user interface.
– The cluttered displays, complex and tedious procedures,
inadequate functionality, inconsistent sequences of actions, and
insufficient informative feedback can generate debilitating stress
and anxiety.

5
 Introduction (concluded)

• It is perfectly understandable that users whose network

connections drop as they are completing lengthy online
purchase orders may become frustrated and even angry.
– These experiences can lead to poor performance, frequent
minor slips, and occasional serious errors, all contributing to job
dissatisfaction and consumer frustration.
• Guidelines, principles, and theories-which can provide
remedies and preventive medicine for these problems-
have matured in recent years.
• Reliable methods for predicting pointing and input times,
helpful cognitive theories, and better frameworks for
online help now shape research and guide design.

6
 Guidelines

• Shared language
• Best practices
• Critics
– Too specific, incomplete, hard to apply, and sometimes wrong
• Proponents
– Encapsulate experience
• Following are examples of guidelines

7
 Navigating the interface
• Since navigation can be difficult for many users,
providing clear rules is helpful.
• 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

8
 Accessibility guidelines
A few of the Priority 1 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 identification and navigation
The goal of these guidelines is to have
– web-page designers use features that permit users with
disabilities to employ screen readers or other special
technologies to give them access to web-page content

9
 Organizing the display

• Smith and Mosier (1986) offer five high-level goals as

part of their guidelines for data display:
– 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

10
 Getting the user’s attention
The following guidelines specify several techniques for
getting the user’s attention:
• Intensity
• Marking
• Size
• Choice of fonts
• Inverse video
• Blinking
• Color
• Audio

11
 Facilitating data entry
• Data-entry tasks can occupy a substantial fraction of the
users' time
– and can be the source of frustrating and potentially dangerous
errors
• Smith and Mosie (1986) offer five high-level objectives
as part of their guidelines for data entry:
1. Consistency of data-entry transactions.
2. Minimal input actions by user.
3. Minimal memory load on users.
4. Compatibility of data entry with data display.
5. Flexibility for user control of data entry.

12
 Principles
• While guidelines are narrowly focused, principles tend to
be more fundamental, widely applicable, and enduring
• Determine user’s skill levels
• Identify the tasks
• Choose an interaction style
– Five primary interaction styles
• Eight golden rules of interface design
• Prevent errors
• Automation and human control

13
 Determine user’s skill levels
• “Know thy user”
• 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

14
 Identify the tasks

• Task Analysis usually involve long hours observing

and interviewing users
• Decomposition of high level tasks
• Relative task frequencies

15
 Choose an interaction style

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

16
Spectrum of Directness

17
 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

18
 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

19
Automation and human control

20
 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

21
 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

22
 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

23
 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

24
 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

25
 Automation and
human control (concluded)

Features to aid in universal

access
Above: Mac OS X system preference
settings
Right: Windows Vista Control Panel

26
 Theories

• Goal of human-computer interaction

– To go beyond specifics of guidelines and build on principles to
develop theories
• Some theories are descriptive and explanatory
– Such are useful in developing consistent terminology for objects
and actions thus supporting collaboration and training
– Observing behavior
– Describing activity
– Conceiving of designs
– Comparing high-level concepts of two designs
– Training
• Some theories are predictive
– These enable designers to compare proposed designs for
execution time or error rates 27
 Theories (continued)

Theories can also be grouped according to

• motor-task performance (pointing with a mouse)
– good at predicting keystroking or pointing times
• Perceptual activities (finding an item on a display)
– good at predicting reading times for free text, lists, or formatted
displays and other visual or auditory tasks
• Cognitive aspects (planning the conversion of a
boldfaced character to an italic one)
– are central to problem solving
– play a key role in understanding productivity as a function of
response time

28
 Theories (concluded)
• Web designers have emphasized information-
architecture models
– with navigation as the key to user success.
• Web users are considered as foraging for information,
– effectiveness of the information scent of links is the issue
– A high-quality link, relative to a specific task, gives users a good
scent (or indication) of what is at the destination.
– E.g, if users are trying to find an executable demonstration of a
software package, then a link with text "download demo" has a
good scent.
• The challenge to designers is
– to understand user tasks well enough to design a large web site
such that users will be able to navigate successfully
• Information-foraging theory attempts to predict user
success rates
29
– given a set of tasks and a web site, so as to guide refinements.
 Taxonomy

• Another tool for understanding is a taxonomy

– can be part of a descriptive or explanatory theory
• A taxonomy imposes order by classifying a complex set
of phenomena into understandable categories
– e,g. a taxonomy might be created for different kinds of input
devices
– Other taxonomies might cover tasks, personality styles, technical
aptitudes, user experience levels, or user interface styles
• Taxonomies
– facilitate useful comparisons, organize topics for newcomers,
guide designers, often indicate opportunities for novel products

30
 Taxonomy (concluded)

• Contribution
– Any theory that might help designers to predict performance for
even a limited range of users, tasks, or designs is a contribution.
• HCI is filled with many theories
• Practitioners must keep up with the rapid developments
– not only in software tools, design guidelines, but also in theories.
• Critics raise two challenges:
– Theories should be more central to research and practice.
• A good theory guides researchers in understanding concepts and
generalizing results
– Theories should lead rather than lag behind practice.
• A robust theory predicts or guide practitioners in designing new products

• Another direction for theoreticians is to predict subjective

31
satisfaction or emotional reactions of users.
 Levels of analysis theories
• One approach to descriptive theory is to separate
concepts according to levels.
– Such theories have been helpful in software engineering and
network design.
• An appealing and easily comprehensible model for
interfaces is Foley and van Dam four-level conceptual,
semantic, syntactic, and lexical model
1. The conceptual level is the user's "mental model" of the
interactive system.
2. The semantic level describes the meanings conveyed by the
user's input and by the computer's output display.
3. The syntactic level defines how the user actions that convey
semantics are assembled into complete sentences that instruct
the computer to perform certain tasks.
4. The lexical level deals with device dependencies and with the 32
precise mechanisms by which users specify the syntax
Levels of analysis theories (continued)

• This approach is convenient for designers

– because its top-down nature is easy to explain,
– matches the software architecture,
– and allows for useful modularity during design.

33
 Stages-of-action models

• Another approach to forming theories is to portray the

stages of action that users go through in trying to use
interactive products
– such as information appliances, office tools, and web interfaces.
• Norman offers seven stages of action, arranged in a
cyclic pattern, as an explanatory model of human-
computer interaction:
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
34
7. Evaluating the outcome
 Stages-of-action models (continued)
• Norman makes a contribution by placing his stages in
the context of cycles of action and evaluation
• The seven-stages model leads naturally to identification
of the gulf of execution
– the mismatch between user's intentions and allowable actions
• and the gulf of evaluation
– the mismatch between the system's representation and the
user's expectation.
• This model leads Norman to suggest four principles of
good design.
– State and the action alternatives should be visible
– There should be a good conceptual model with a consistent
system image
– Interface should include good mappings that reveal the
relationships between stages
35
– User should receive continuous feedback
 Stages-of-action models (continued)

• A stages-of-action model helps us to describe user

exploration of an interface
• As users try to accomplish their goals, there are four
critical points where user failures can occur
– Users can form an inadequate goal
– Users might not find the correct interface object because of an
incomprehensible label or icon
– Users may not know how to specify or execute a desired action
– Users may receive inappropriate or misleading feedback
• The latter three failures may be prevented by
– improved design or overcome by time-consuming experience
with the interface

36
 Stages-of-action models (continued)

• Refinements of the stages-of-action model have been

developed for other domains.
• For example, information-seeking has been
characterized by these stages:
(1) recognize and accept an information problem,
(2) define and understand the problem,
(3) choose a search system,
(4) formulate a query,
(5) execute the search,
(6) examine the results,
(7) make relevance judgments,
(8) extract information, and
(9) reflect/iterate/stop
37
 GOMS and the keystroke-level model

• An influential group of theorists at Carnegie-Mellon

University carried forward the idea of levels of analysis
– by decomposing user actions into small measurable steps.
• They proposed two important models:
– goals, operators, methods, and selection rules (GOMS) model
– and the keystroke-level model
• The GOMS model postulated that users begin by
– formulating goals (edit document) and subgoals (insert word).
• Then users think in terms of operators,
– which are "elementary perceptual, motor, or cognitive acts,
– Whose execution is necessary to change any aspect of the
user's mental state or to affect the task environment”
– (press up-arrow key, move hand to mouse, recall file name, 38
verify that the cursor is at end of file).
 GOMS and the keystroke-level model
(concluded)
• Finally, users achieve their goals by using methods
– (move cursor to desired location by following a sequence of
arrow keys).
• The selection rules are the control structures for
choosing between the several methods available for
accomplishing a goal
– (delete by repeated backspace versus delete by selecting a
region and pressing the Delete button).
• The keystroke-level model is a simplified version of
GOMS that predicts times for error-free expert
performance of tasks by summing up the times for
– keystroking, pointing, homing, drawing, thinking, and waiting for
the system to respond.
39
 Consistency through grammars

• An important goal for designers is a consistent user

interface.
– However, the definition of consistency is elusive and has multiple
levels that are sometimes in conflict; it is also sometimes
advantageous to be inconsistent.
• The argument for consistency is that
– a command language or set of actions should be orderly,
predictable, describable by a few rules, and therefore easy to
learn and retain.
• These overlapping concepts are conveyed by an
example that shows two kinds of inconsistency
– (A illustrates lack of any attempt at consistency, and B shows
consistency except for a single violation):
40
 Consistency through grammars
(continued)
Consistent Inconsistent A Inconsistent B
delete/insert table delete/insert table delete/insert table
delete/insert column remove/add column remove/insert column
delete/insert row destroy/create row delete/insert row
delete/insert border erase/draw border delete/insert border

• Each of the actions in the consistent version is the same,

– whereas the actions vary for the inconsistent version A.
• The inconsistent action verbs are all acceptable,
– but their variety suggests that they will take longer to learn, will
cause more errors, will slow down users, and will be harder for
users to remember.

41
 Consistency through grammers
(continued)
• Inconsistent version B is somehow more startling,
– because there is a single unpredictable inconsistency that
stands out so dramatically that this language is likely to be
remembered for its peculiar inconsistency
• To capture these notions, Reisner proposed an action
grammar to describe two versions of a graphics-system
interface.
– She demonstrated that the version that had a simpler grammar
was easier to learn.
• Payne and Green expanded her work by addressing the
multiple levels of consistency (lexical, syntactic, and
semantic)
– through a notational structure they call task action grammars
(TAGs). 42
 Consistency through grammers
(continued)
• They also address some aspects of completeness of a
language by trying to characterize a complete set of
tasks;
– for example, up, down, and left constitute an incomplete set of
arrow-cursor movement tasks, because right is missing.
• Once the full set of task-action mappings is written down,
– the grammar of the command language can be tested against it
to demonstrate completeness.
• For example, a TAG definition of cursor control would
have a dictionary of tasks:
move-cursor-one-character-forward [Direction = forward, Unit =
char]
move-cursor-one-character-backward [Direction =backward, Unit
=char] 43
 Consistency through grammers
(continued)
move-cursor-one-word-forward [Direction = forward, Unit = word]
move-cursor-one-word-backward [Direction =backward, Unit =
word]
• The high-level rule schemas that describe the syntax of
the commands would be as follows:
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"
• These schemas will generate a consistent grammar:
move cursor one character forward CTRL-C
move cursor one character backward ESC-C
move cursor one word forward CTRL-W
44
move cursor one word backward ESC-W
 Object-Action Interface Model

• The object-action interface (OAI) model provides

valuable guidance for designers of interfaces, online
help, and training
– OAI is descriptive and explanatory, and it can also be
prescriptive
• The emphasis is on the visual display of user-task
objects and actions.
– For example, a collection of stock-market portfolios might be
represented by leather folders with icons of engraved share
certificates;
– Likewise, actions might be represented by trash cans for
deletion, or shelf icons to represent destinations for portfolio
copying.
45
 Object-Action Interface Model
(continued)
• There are syntactic aspects of direct manipulation,
– such as knowing whether to drag the file to the trash can or vice
versa,
– but the amount of syntax is small and can be thought of as being
at the lowest level of the interface actions.
– Syntactic forms such as double-clicking, mouse-down-and-wait,
or gestures seem simple compared to the pages of grammars for
early command languages.
• Doing object-action design starts with understanding the
task.
– That task includes the universe of real-world objects with which
users work to accomplish their intentions and the actions that
they apply to those objects (see next Figure).

46
Task and interface concepts, separated into hierarchies of objects and actions

47
 Object-Action Interface Model
(continued)
• The high-level task objects might be stock-market
listings, a photo library, or a personal phone book.
• These objects can be decomposed into information on a
single stock, for example, and finally into atomic units,
such as a share price.
• Task actions start from high-level intentions that are
decomposed into intermediate goals and individual
steps.
• To accommodate the arguments of situated action and
distributed cognition,
– the objects may include real-world items (such as books, maps,
or other devices)
– and actions may include common activities (such as speaking to48
colleagues, handling interruptions, or answering telephones).
 Object-Action Interface Model
(continued)
• Once there is agreement on the task objects and actions
and their decomposition,
– the designer can create the metaphoric representations of the
interface objects and actions.
• Interface objects do not have weight or thickness;
– they are pixels that can be moved or copied in ways that
represent real-world task objects with feedback to guide users.
• Finally, the designer must make the interface actions
visible to users,
– so that users can decompose their plans into a series of
intermediate actions, such as opening a dialog box, all the way
down to a series of detailed keystrokes and clicks.

49
 Object-Action Interface Model
(concluded)
• In outline, the OAI model is a descriptive and
explanatory model that focuses on task and interface
objects and actions.
• Because the syntactic details are minimal,
– users who know the task-domain objects and actions can learn
the interface relatively easily
• The OAI model is in harmony with the common software-
engineering method of object-oriented design

50
Task hierarchies of objects and actions

• The primary way people deal with large and complex

problems is to
– decompose them into several smaller problems, in a hierarchical
manner, until each subproblem is manageable.
• Tasks include hierarchies of objects and actions at high
and low levels.
• Hierarchies are not perfect, but they are comprehensible
and useful.
• Most users accept a separation of their tasks into high-
and low-level objects and actions.

51
Task hierarchies of objects and actions

• Like tasks, interfaces include hierarchies of objects and

actions at high and low levels.
– For example, a central set of interface object concepts deals with
storage.
• Users come to understand the high-level concept that
computers store information.
• The stored information can then be refined into objects,
– such as a directory and the files of information it contains.
– In turn, the directory object is refined into a set of directory
entries, each of which has a name, length, date of creation,
owner, access-control setting, and so on.
– Likewise, each file is an object that has a lowerlevel

52
Task hierarchies of objects and actions
(concluded)
• The interface actions also are decomposable into lower-
level actions.
– The highlevel plans, such as backing up a data file, may require
selection, duplication, and save actions.
– The mid-level action of saving a file is refined into the actions of
selecting a destination and moving the file onto a remote disk,
providing a password, overwriting previous versions, assigning a
name to the file
– There are also many low-level details about permissible file
types or sizes, error conditions such as shortage of storage
space, or responses to hardware or software errors.
– Finally, users carry out each low-level action by selecting a
button in a dialog box or clicking on a pull-down menu item.

53
 The disappearance of syntax

• In the early days of computers, users had to maintain a

profusion of device dependent details in their human
memories.
• These low-level syntactic details included knowledge of
• which action erases a character
– (Delete, Backspace, Ctrl-H, Ctrl-G, Ctrl-D, rightmost mouse
button, or Escape),
• which action inserts a new line after the third line of a
text file (Ctrl-I, Insert key),
• which abbreviations are permissible,
• and which of the numbered function keys produces the
previous screen.
54
 The disappearance of syntax
(continued)
• The learning, use, and retention of this knowledge are
hampered by two problems.
– First, these details vary across interfaces in an unpredictable
manner.
– Second, acquiring syntactic knowledge is often a struggle
because the arbitrariness of these minor design features greatly
reduces the effectiveness of paired-associate learning.
• Rote memorization requires repeated rehearsals to
reach competence,
– and retention over time is poor unless the knowledge is applied
frequently.
• A further problem with syntactic knowledge lies in the
difficulty of providing a hierarchical structure or even a
modular structure to cope with the complexity. 55
 The disappearance of syntax
(continued)
• For example, it may be hard for users to remember
these details of using an electronic mail system:
– press Return to terminate a paragraph, Ctrl-D to terminate a
message, Q to quit the electronic-mail subsystem, and log out to
terminate the session.
• The knowledgeable computer user understands these
four forms of termination as commands in the context of
the full system,
– but the novice may be confused by four seemingly similar
situations that have radically inconsistent syntactic forms.
• A final difficulty is that syntactic knowledge is system-
dependent.
– Users who switch from one machine to another may face
different keyboard layouts, commands, function-key usage, and56
 The disappearance of syntax
(continued)
• Expert frequent users can overcome these difficulties,
and they tend to be less troubled by syntactic knowledge
problems
• Novices and knowledgeable but intermittent users are
especially troubled by syntactic irregularities.
• Their burden can be lightened by
– use of menus, a reduction in the arbitrariness of the keypresses,
use of consistent patterns of commands, meaningful command
names and labels on keys, and fewer details that must be
memorized
• Minimizing these burdens is the goal of most interface
designers.
57
 The disappearance of syntax
(concluded)
• Modern direct-manipulation styles support the process of
presenting users with
– screens filled with familiar objects and actions representing their
task objects and actions.
• Modern user-interface building tools facilitate the design
process by making standard widgets easily available.
• Innovative designers may recognize opportunities for
novel widgets that provide a closer match between the
screen representation and the user's workplace.

58