CHAPTER

11 USER INTERFACE
DESIGN

W
KEY e live in a world of high-technology products, and virtually all of
CONCEPTS them—consumer electronics, industrial equipment, corporate systems,
accessibility . . .334 military systems, personal computer software, and WebApps—require
command human interaction. If a product is to be successful, it must exhibit good usability—
labeling . . . . . .333 a qualitative measure of the ease and efficiency with which a human can employ
control . . . . . . .313 the functions and features offered by the high-technology product.
design Whether an interface has been designed for a digital music player or the
evaluation . . . . .342
weapons control system for a fighter aircraft, usability matters. If interface mech-
error handling . .333
anisms have been well designed, the user glides through the interaction using a
golden rules . . .313
smooth rhythm that allows work to be accomplished effortlessly. But if the inter-
help facilities . .332
face is poorly conceived, the user moves in fits and starts, and the end result is
interface
analysis . . . . .320 frustration and poor work efficiency.
consistent . . .316 For the first three decades of the computing era, usability was not a dominant
design . . . . . .328 concern among those who built software. In his classic book on design, Donald
models . . . . . .317 Norman [Nor88] argued that it was time for a change in attitude:
internationali- To make technology that fits human beings, it is necessary to study human beings. But
zation . . . . . . .334
now we tend to study only the technology. As a result, people are required to conform
memory load . .314
to technology. It is time to reverse this trend, time to make technology that conforms
to people.

QUICK What is it? User interface design mental requirements. Once user tasks have been
LOOK creates an effective communication identified, user scenarios are created and ana-
medium between a human and a lyzed to define a set of interface objects and
computer. Following a set of interface actions. These form the basis for the creation of
design principles, design identifies interface ob- screen layout that depicts graphical design and
jects and actions and then creates a screen layout placement of icons, definition of descriptive
that forms the basis for a user interface prototype. screen text, specification and titling for windows,
Who does it? A software engineer designs the and specification of major and minor menu
user interface by applying an iterative process items. Tools are used to prototype and ultimately
that draws on predefined design principles. implement the design model, and the result is
Why is it important? If software is difficult to use, evaluated for quality.
if it forces you into mistakes, or if it frustrates What is the work product? User scenarios are
your efforts to accomplish your goals, you won’t created and screen layouts are generated. An
like it, regardless of the computational power it interface prototype is developed and modified in
exhibits, the content it delivers, or the functional- an iterative fashion.
ity it offers. The interface has to be right because How do I ensure that I’ve done it right? An in-
it molds a user’s perception of the software. terface prototype is “test driven” by the users,
What are the steps? User interface design begins and feedback from the test drive is used for the
with the identification of user, task, and environ- next iterative modification of the prototype.

312
 CHAPTER 11 USER INTERFACE D E S IG N 313

principles and As technologists studied human interaction, two dominant issues arose. First, a set
guidelines . . . . .336 of golden rules (discussed in Section 11.1) were identified. These applied to all hu-
process . . . . . .319
man interaction with technology products. Second, a set of interaction mechanisms
response time . .332
were defined to enable software designers to build systems that properly imple-
task analysis . .322
task mented the golden rules. These interaction mechanisms, collectively called the
elaboration . . . .324 graphical user interface (GUI), have eliminated some of the most egregious problems
usability . . . . . .317 associated with human interfaces. But even in a “Windows world,” we all have
user analysis . .321 encountered user interfaces that are difficult to learn, difficult to use, confusing,
WebApp interface
counterintuitive, unforgiving, and in many cases, totally frustrating. Yet, someone
design . . . . . . .335
spent time and energy building each of these interfaces, and it is not likely that the
builder created these problems purposely.

11.1 THE GOLDEN RULES

In his book on interface design, Theo Mandel [Man97] coins three golden rules:

1. Place the user in control.

2. Reduce the user’s memory load.
3. Make the interface consistent.

These golden rules actually form the basis for a set of user interface design princi-
ples that guide this important aspect of software design.

11.1.1 Place the User in Control

During a requirements-gathering session for a major new information system, a key
uote: user was asked about the attributes of the window-oriented graphical interface.

“It’s better to “What I really would like,” said the user solemnly, “is a system that reads my mind.
design the user It knows what I want to do before I need to do it and makes it very easy for me to get
experience than it done. That’s all, just that.”
rectify it.” My first reaction was to shake my head and smile, but I paused for a moment.
Jon Meads There was absolutely nothing wrong with the user’s request. She wanted a system
that reacted to her needs and helped her get things done. She wanted to control the
computer, not have the computer control her.
Most interface constraints and restrictions that are imposed by a designer are
intended to simplify the mode of interaction. But for whom?
As a designer, you may be tempted to introduce constraints and limitations to
simplify the implementation of the interface. The result may be an interface that is
easy to build, but frustrating to use. Mandel [Man97] defines a number of design
principles that allow the user to maintain control:

Define interaction modes in a way that does not force a user into unneces-
sary or undesired actions. An interaction mode is the current state of the inter-
face. For example, if spell check is selected in a word-processor menu, the software
344 PART TWO MODELING

scales (e.g., strongly agree, somewhat agree), (5) percentage (subjective) response,
or (6) open-ended.
If quantitative data are desired, a form of time-study analysis can be conducted.
Users are observed during interaction, and data—such as number of tasks correctly
completed over a standard time period, frequency of actions, sequence of actions,
time spent “looking” at the display, number and types of errors, error recovery time,
time spent using help, and number of help references per standard time period—are
collected and used as a guide for interface modification.
A complete discussion of user interface evaluation methods is beyond the scope
of this book. For further information, see [Hac98] and [Sto05].

11.7 SUMMARY
The user interface is arguably the most important element of a computer-based sys-
tem or product. If the interface is poorly designed, the user’s ability to tap the com-
putational power and informational content of an application may be severely
hindered. In fact, a weak interface may cause an otherwise well-designed and solidly
implemented application to fail.
Three important principles guide the design of effective user interfaces: (1) place
the user in control, (2) reduce the user’s memory load, and (3) make the interface con-
sistent. To achieve an interface that abides by these principles, an organized design
process must be conducted.
The development of a user interface begins with a series of analysis tasks. User
analysis defines the profiles of various end users and is gathered from a variety of
business and technical sources. Task analysis defines user tasks and actions using
either an elaborative or object-oriented approach, applying use cases, task and ob-
ject elaboration, workflow analysis, and hierarchical task representations to fully
understand the human-computer interaction. Environmental analysis identifies the
physical and social structures in which the interface must operate.
Once tasks have been identified, user scenarios are created and analyzed to define
a set of interface objects and actions. This provides a basis for the creation of a screen
layout that depicts graphical design and placement of icons, definition of descriptive
screen text, specification and titling for windows, and specification of major and minor
menu items. Design issues such as response time, command and action structure, er-
ror handling, and help facilities are considered as the design model is refined. A variety
of implementation tools are used to build a prototype for evaluation by the user.
Like interface design for conventional software, the design of WebApp interfaces
describes the structure and organization of the user interface and includes a repre-
sentation of screen layout, a definition of the modes of interaction, and a description
of navigation mechanisms. A set of interface design principles and an interface de-
sign workflow guide a WebApp designer when layout and interface control mecha-
nisms are designed.
CHAPTER 11 USER INTERFACE D E S IG N 345

The user interface is the window into the software. In many cases, the interface
molds a user’s perception of the quality of the system. If the “window” is smudged,
wavy, or broken, the user may reject an otherwise powerful computer-based system.

PROBLEMS AND POINTS TO PONDER

11.1. Describe the worst interface that you have ever worked with and critique it relative to the
concepts introduced in this chapter. Describe the best interface that you have ever worked with
and critique it relative to the concepts introduced in this chapter.

11.2. Develop two additional design principles that “place the user in control.”

11.3. Develop two additional design principles that “reduce the user’s memory load.”

11.4. Develop two additional design principles that “make the interface consistent.”

11.5. Consider one of the following interactive applications (or an application assigned by your
instructor):

a. A desktop publishing system

b. A computer-aided design system
c. An interior design system (as described in Section 11.3.2)
d. An automated course registration system for a university
e. A library management system
f. An Internet-based polling booth for public elections
g. A home banking system
h. An interactive application assigned by your instructor

Develop a user model, design model, mental model, and an implementation model, for any one
of these systems.

11.6. Perform a detailed task analysis for any one of the systems listed in Problem 11.5 Use
either an elaborative or object-oriented approach.

11.7. Add at least five additional questions to the list developed for content analysis in
Section 11.3.3.

11.8. Continuing Problem 11.5, define interface objects and actions for the application you
have chosen. Identify each object type.

11.9. Develop a set of screen layouts with a definition of major and minor menu items for the
system you chose in Problem 11.5.

11.10. Develop a set of screen layouts with a definition of major and minor menu items for the
SafeHome system. You may elect to take a different approach than the one shown for the screen
layout in Figure 11.3.

11.11. Describe your approach to user help facilities for the task analysis design model and
task analysis you have performed as part of Problems 11.5 through 11.8.

11.12. Provide a few examples that illustrate why response time variability can be an issue.

11.13. Develop an approach that would automatically integrate error messages and a user
help facility. That is, the system would automatically recognize the error type and provide a help
window with suggestions for correcting it. Perform a reasonably complete software design that
considers appropriate data structures and algorithms.

11.14. Develop an interface evaluation questionnaire that contains 20 generic questions that
would apply to most interfaces. Have 10 classmates complete the questionnaire for an interac-
tive system that you all use. Summarize the results and report them to your class.