CHAPTER 11:

Balancing Function and Fashion

Designing the User Interface:

Strategies for Effective Human-Computer Interaction

Fifth 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.

 Introduction

• User experiences play a critical role in

influencing software acceptance
– Conversational messages have their limits
– Design needs to be comprehensible,
predictable, and controllable
– Information layout is important
– Multiwindow coordination
– Designing for large, fast, high-resolution color
displays
1-2

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

 Error messages
• Phrasing of error messages or diagnostic warnings is critical,
especially when dealing with novices

• Avoid
– imperious tone that condemns user
– messages that are too generic (e.g. WHAT? or SYNTAX ERROR)
– messages that are too obscure (e.g. FAC RJCT 004004400400)

• Specificity

Poor Better

SYNTAX ERROR Unmatched left parenthesis

ILLEGAL ENTRY Type first letter: Send, Read, or Drop

INVALID DATA Days range from 1 to 31

BAD FILE NAME File names must begin with a letter

1-3
11-3
© 2010 Pearson Addison-Wesley. All rights reserved.
 Error messages (cont.)
• Constructive guidance and positive tone
– Messages should, where possible, indicate what users
should do to correct the problem
– Unnecessarily hostile messages using violent terminology
can disturb non-technical users:
• FATAL ERROR, RUN ABORTED
• CATASTROPHIC ERROR: LOGGED WITH OPERATOR
• Negative terms such as ILLEGAL, ERROR, INVALID, BAD
should be eliminated or used infrequently

Poor Better
Run-Time error ‘-2147469 (800405): Method ‘Private Virtual memory space consumed. Close some
Profile String’ of object ‘System’ failed. programs and retry.
Resource Conflict Bus: 00 Device: 03 Function: 01 Remove your compact flash card and restart

Network connection refused. Your password was not recognized. Please retype.

Bad date. Drop-off date must come after pickup date.

1-4
11-4
© 2010 Pearson Addison-Wesley. All rights reserved.
 Error messages (cont.)

• User-centered phrasing
– Suggests user controls the interface, initializing more
than responding
– User should have control over amount of information
system provides e.g. screen tips; a help button for
context-sensitive help or an extensive online user
manual
– Telephone company, “We’re sorry, but we are unable
to complete your call as dialed. Please hang up,
check your number, or consult the operator for
assistance”, versus “Illegal telephone number. Call
aborted. Error number 583-2R6.9. Consult your user
manual for further information.’
1-5

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

 Error messages (cont.)

• Appropriate physical format

– use uppercase-only messages for brief, serious
warnings
– avoid code numbers; if required, include at end of
message
– debate over best location of messages. E.g. Could
be:
• near where problem arose
• placed in consistent position on bottom of
screen
• near to, but not obscuring relevant information
– audio signals useful, but can be embarrassing -
place under user control
1-6

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

 Error messages (cont.)

• Development of effective messages

– Messages should be evaluated by several people and tested with
suitable participants
– Messages should appear in user manuals and be given high
visibility
– Users may remember the one time when they had difficulties with
a computer system rather than the 20 times when everything went
well

– Recommendations
• Increase attention to message design
• Establish quality control
• Develop guidelines
– Have a positive tone
– Be specific and address the problem in the user's terms
– Place the users in control of the situation
– Have a neat, consistent, and comprehensible format
• Carry out usability test
• Collect user performance data 1-7

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

 Error messages (cont.)

1-8

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

 Nonanthropomorphic design

• Concerns
– attributions of intelligence, autonomy, free will, etc can deceive,
confuse, and mislead users
– important to clarify differences between people and computers
– users and designers must accept responsibility for misuse of
computers
– although attractive to some people, an anthropomorphic interface
can produce anxiety in others
• computers can make people feel dumb
• computers should be transparent and support concentrating on the
task in hand
– mature technology should avoid Mumford's obstacle of animism
– anthropomorphic interfaces may distract users
• Microsoft’s ill-fated Clippet character was intended to provide help
suggestions
– Amused some, but annoyed many
– Disruptive interference
– Lacked appropriate emotional expressions
1-9

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

 Nonanthropomorphic design (cont.)
• Advocates of anthropomorphic interfaces suggest
that they may be most useful as teachers,
salespeople, therapists, or entertainment figures
• An alternative design is to present a human author
of a package through prerecorded audio or video
• Guidelines
– Be cautious in presenting computers as people.
– Design comprehensible, predictable, and controllable
interfaces.
– Use appropriate humans for introductions or guides.
– Use cartoon characters in games or children’s software, but
usually not elsewhere
– Provide user-centered overviews for orientation and closure.
– Do not use 'I' pronouns when the computer responds to
human actions.
– Use "you" to guide users, or just state facts.
1-10

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

 Display design

• Effective display designs must provide all the

necessary data in the proper sequence to carry out
the task

• Mullet and Sano's categories of design principles:

– Elegance and Simplicity: unity, refinement and fitness
– Scale, Contrast, and Proportion: clarity, harmony, activity,
and restraint
– Organization and Visual Structure: grouping, hierarchy,
relationship, and balance
– Module and Program: focus, flexibility, and consistent
application
– Image and Representation: immediacy, generality,
cohesiveness, and characterization
– Style: distinctiveness, integrity, comprehensiveness, and
appropriateness 1-11

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

 1-12
Samples of the 162 data-display guidelines from Smith and Mosier
© 2010 Pearson Addison-Wesley. All rights reserved. 11-12
 Display design (cont.)
• Field layout
– Blank spaces and separate lines can distinguish fields.
– Names in chronological order, alignment of dates,
familiar date separators.
– Labels are helpful for all but frequent users.
– Distinguish labels from data with case, boldfacing, etc.
– If boxes are available they can be used to make a more
appealing display, but they consume screen space.
– Specify the date format for international audiences
– Other coding categories – background shading, color,
and graphic icons

1-13

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

 Display design (cont.)
• Empirical results
– structured form superior to narrative form
– improving data labels, clustering related information, using
appropriate indentation and underlining, aligning numeric values,
and eliminating extraneous characters improves performance
– performance times improve with fewer, denser displays for
expert users
– screen contents should contain only task-relevant information
– consistent location, structure, and terminology across displays
important
– sequences of displays should be similar throughout the system
for similar tasks
– sequences of displays should be
similar throughout the system for
similar tasks 1-14

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

 Display design (cont.)

• Display-complexity metrics
– Although knowledge of the users’ tasks and
abilities is key to designing effective screen
displays, objective and automatable metrics of
screen complexity are attractive aids
• Tullis (1997) developed four task-
independent metrics for alphanumeric
displays:
– Overall Density
– Local Density
– Grouping
– Layout Complexity
1-15

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

 Display design (cont.)

• Sears (1993) developed a task-dependent metric called layout

appropriateness to assess whether the spatial layout is in
harmony with the users’ tasks

1-16

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

 Web page design

The top ten mistakes of web-based presentation of information (Tullis)

1-17

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

 Web page design (cont.)
• Numerous guidelines for web designers are available on the Web and
can be incorporated into your design process to ensure consistency
and adherence to emerging standards.
• Examples include, but are not limited to:
• The Java Look and Feel Design Guidelines, Second Edition (Sun,
2001)
• Sun’s Web Design Guide (Sun, 2008)
• The National Cancer Institute’s Research-Based Web Design &
Usability Guidelines (NCI, 2008)
• The World Wide Web Consortium’s Web Accessibility Initiative
(WAI, 2008)
• The Web Style Guide (Lynch and Horton, 2008)
• There are numerous web sites that address web design, some of
which were created as companions to relevant books:
• Web 2.0 How-To Design Guide (Hunt, 2008)
• Web Bloopers (Johnson, 2003)
• KillerSites.com (Siegel, 1997)
1-18

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

 Web page design (cont.)

Mash-ups are web pages or applications that integrate complementary elements

from two or more sources (for example, Craigslist and Google Maps™
1-19

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

 Window design

• Introduction
– Users need to consult multiple sources rapidly
– Must minimally disrupt user's task
– With large displays, eye-head movement and visibility are
problems
– With small displays, windows too small to be effective
– Need to offer users sufficient information and flexibility to
accomplish task, while reducing window housekeeping
actions, distracting clutter, eye-head movement
• opening, closing, moving, changing size
• time spent manipulating windows instead of on task
– Can apply direct-manipulation strategy to windows
– Rooms - a form of window macro that enables users to
specify actions on several windows at once
1-20

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

 Window design

• Coordinating multiple windows

– Designers may break through to the next generation of window
managers by developing coordinate windows, in which windows
appear, change contents, and close as a direct result of user
actions in the task domain
– Such sequences of actions can be established by designers, or
by users with end-user programming tools
– A careful study of user tasks can lead to task-specific
coordinations based on sequences of actions
– Important coordinations:
• Synchronized scrolling
• Hierarchical browsing
• Opening/closing of dependent windows
• Saving/opening of window state
1-21

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

 Window design

Hierarchical browsing has been integrated into Windows Explorer to allow users
to browse hierarchical directories, into Outlook to enable browsing of folders of e-mails
and into many other applications. Hierarchical browsing in the XperCASE tool example here
(now called EasyCASE with EasyCODE).

The specification is on the left. As users click on components (DoubleAttrWebAdapter),

the detail view appears on the right in a Nassi-Shneiderman chart. 1-22

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

 Window design

• Image browsing
– A two-dimensional cousin of hierarchical
browsing
• Work with large images
• Overview in one window (context), detail in another
(focus)
• Field of view box in the overview
• Panning in the detail view, changes the field of
view box
• Matched aspect ratios between field of view box
and the detail view 1-23

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

 • Zoom factors: 5-30
– Larger suggests
an intermediate
view is needed
• Semantic zooming
• Side by side
placement, versus
fisheye view
1-24

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

 Window design

• Image browsing (cont.)

– The design of image browsers should be
governed by the users’ tasks, which can be
classified as follows:
• Image generation
• Open-ended exploration
• Diagnostics
• Navigation
• Monitoring
1-25

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

 Window design

• Personal role management

– A role centered design emphasizes he
users’ taks rather than the applications
and documents
• Vision statement
• Set of people
• Task hierarchy
• Schedule
• Set of documents
1-26

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

 Window design

• Personal role management (cont.)

– The requirements for personal role management
include:
• Support a unified framework for information
organization according to users' roles
• Provide a visual, spatial layout that matches tasks
• Support multi-window actions for fast arrangement of
information
• Support information access with partial knowledge of its
nominal, spatial, temporal, and visual attributes and
relationships to other pieces of information.
• Allow fast switching and resumption among roles
• Free user's cognitive resources to work on task domain
actions rather than interface domain actions.
• Use screen space efficiently and productively for tasks.
1-27

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

 Color

• Color can
– Soothe or strike the eye
– Add accents to an uninteresting display
– Facilitate subtle discriminations in
complex displays
– Emphasize the logical organization of
information
– Draw attention to warnings
– Evoke string emotional reactions of joy,
excitement, fear, or anger
1-28

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

 Color

• Guidelines
– Use color conservatively
– Limit the number and amount of colors
– Recognize the power of color to speed or slow tasks
– Color coding should support the task
– Color coding should appear with minimal user effort
– Color coding should be under user control
– Design for monochrome first
– Consider the needs of color-deficient users
– Color can help in formatting
– Be consistent in color coding
– Be alert to common expectations about color codes
– Be alert to problems with color pairings
– Use color changes to indicate status changes
– Use color in graphic displays for greater information 1-29
density
© 2010 Pearson Addison-Wesley. All rights reserved. 11-29
 Color

1-30

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