user interface design for mere mortals may 2007

User Interface Design
for Mere
Mortals ®


Addison-Wesley presents the
For Mere Mortals ® Series
Series Editor: Michael J. Hernandez
The goal of the For Mere Mortals ® Series is to present you with information on
important technology topics in an easily accessible, common-sense manner.
The primary audience for Mere Mortals books is that of readers who have little
or no background or formal training in the subject matter. Books in the Series
avoid dwelling on the theoretical and instead take you right into the heart of
the topic with a matter-of-fact, hands-on approach.The books are not designed
to address all the intricacies of a given technology, but they do not avoid or
gloss over complex, essential issues either. Instead, they focus on providing
core, foundational knowledge in a way that is easy to understand and that will
properly ground you in the topic.This practical approach provides you with a
smooth learning curve and helps you to begin to solve your real-world problems immediately. It also prepares you for more advanced treatments of the
subject matter, should you decide to pursue them, and even enables the books
to serve as solid reference material for those of you with more experience.The
software-independent approach taken in most books within the Series also
teaches the concepts in such a way that they can be applied to whatever particular application or system you may need to use.

Titles in the Series:
Database Design for Mere Mortals ®, Second Edition:
A Hands-On Guide to Relational Database Design
Michael J. Hernandez. ISBN: 0201752840
SQL Queries for Mere Mortals ®:
A Hands-On Guide to Data Manipulation in SQL

Michael J. Hernandez and John L.Viescas. ISBN: 0201433362
UML for Mere Mortals ®
Robert A. Maksimchuk and Eric J. Naiburg. ISBN: 0321246241
VSTO for Mere Mortals™
Kathleen McGrath and Paul Stubbs. ISBN: 0321426711
For more information, check out the series web site at
www.awprofessional.com/ForMereMortalsSeries.


User Interface Design
for Mere
Mortals đ

Eric Butow

Boston ã San Francisco ã New York • Toronto • Montreal
London • Munich • Paris • Madrid
Cape Town • Sydney • Tokyo • Singapore • Mexico City


Many of the designations used by manufacturers and sellers to distinguish their products are claimed as
trademarks. Where those designations appear in this book, and the publisher was aware of a trademark
claim, the designations have been printed with initial capital letters or in all capitals.
Microsoft product screenshot(s) reprinted with permission from Microsoft Corporation.
The author and publisher have taken care in the preparation of this book but make no expressed or
implied warranty of any kind and assume no responsibility for errors or omissions. No liability is assumed
for incidental or consequential damages in connection with or arising out of the use of the information or
programs contained herein.
The publisher offers excellent discounts on this book when ordered in quantity for bulk purchases or special sales, which may include electronic versions and/or custom covers and content particular to your
business, training goals, marketing focus, and branding interests. For more information, please contact:

U.S. Corporate and Government Sales
800-382-3419

For sales outside the United States, please contact:
International Sales


Library of Congress Cataloging-in-Publication Data:
Butow, Eric.
User interface design for mere mortals / Eric Butow.
p. cm.
Includes bibliographical references.
ISBN 0-321-44773-5 (pbk. : alk. paper) 1. User interfaces (Computer systems) I. Title.
QA76.9.U83B88 2007
005.4’37—dc22
2007005652

© 2007 by Pearson Education, Inc.
All rights reserved. Printed in the United States of America. This publication is protected by copyright, and
permission must be obtained from the publisher prior to any prohibited reproduction, storage in a
retrieval system, or transmission in any form or by any means, electronic, mechanical, photocopying,
recording, or likewise. For information regarding permissions, write to:
Pearson Education, Inc.
Rights and Contracts Department
One Lake Street
Upper Saddle River, NJ 07458
Fax: (201) 236-3290
ISBN 0-32-144773-5
Text printed in the United States on recycled paper at RR Donnelley, Crawfordsville, Indiana
First printing, May 2007

For my family, who have always supported me and never hesitate to
tell me what I need to hear.
In loving memory of three of my cats I’ve lost recently: Oreo, Josette,
and Tigger. Life isn’t the same without them, though their mother,
Mewsette, doesn’t mind having me all to herself.


This page intentionally left blank


Contents
xv

Preface
Acknowledgments

xvii

About the Author

xix

Introduction

xxv

Who Should Read This Book

xxi

The Purpose of This Book

xxii

How to Read This Book

xxii

How This Book Is Organized

xxiii

CHAPTER 1

Brief Histories

The History of Graphical User Interfaces
Xerox Alto
Apple Macintosh
Microsoft Windows
Linux

The History of Web Design
The Birth of the Internet
Mosaic
The Netscape Revolution
Internet Explorer and Its Impact on Design

Differences in Look and Feel
Windows GUI
Mac OS GUI
Linux GUI
Web Pages
Java and Other Web Programs

1
1
2
3
5
7

8
8
9
9
9

10
11
11
12
13
14

Summary

14

Review Questions

15

vii


viii

Contents

CHAPTER 2

Concepts and Issues

Computing Terms
Graphical User Interface (GUI)
Operating Systems
Parts of a GUI
Internet
World Wide Web

User Interface Models
Batch Interface
Command-Line Interface
The Text User Interface
Graphical User Interfaces
Web Interfaces
Interfaces That Integrate with These Models

Other Interfaces

Design Improvements and Aggravations
Windows Vista
Mac OS X
Linux
Web Design Improvments
What’s Still Not Fixed

Future Plans
Windows Vienna
Mac OS
Web Browsers and Their Impact on Design
Up-and-Coming Interfaces

Usability Terms
Usability Engineers
Usability Scientists
User Experience Professionals
Types of Usability Design

User Analysis Terms
The Goal-Directed Design Process
Testing Methods

17
18
18
18
19

23
25

27
28
28
30
30
32
34
36

38
38
39
40
41
42

43
43
43
43
44

47
48
48
48
48

49
49
49

User Analysis Trends

50

Accessibility Issues

51

Section 508 Accessibility
Web Site Accessibility

52
52


Contents

Operating System Accessibility

ix

54

Summary

55

Review Questions

57

CHAPTER 3

Making the Business Case

Gaps Between Stakeholders
What Users Expect
What Engineers or Designers Expect
What Sales and Marketing People Expect
What Managers Expect

59
60
61
61
62
62

Developing a Business Case Framework

63

The Benefits of Good Design

64

Long-Term Production Costs
Lower Customer Support Costs
Greater Customer Retention

65
66
67

The Case for Profitability

67

Proving ROI

69

ROI Specifics
Calculate the Dollar Amount

The Usability Engineering Life Cycle
Phase 1: Requirements Analysis
Phase 2: Design, Testing, and Development
Phase 3: Installation and Feedback
The Never-Ending Process

69
70

71

72
73
75
76

The Case Study: Mike’s Bikes

76

Summary

82

Review Questions

84

CHAPTER 4

Good Design

85

Good Design Goals

86

Are Designers Against Users?

87

User Constraints
Designer Constraints
Bridging the Gap

Paper Prototyping and Storyboarding
What Paper Prototyping Is . . . and Isn’t

88
88
89

90
91


x

Contents

Overcoming Skepticism
Advantages
Disadvantages

92
93
95

Good Documentation Design

96

Create a Documentation Plan

97

Why You Should Care About Good Design

104

Case Study: Creating a Paper Prototype Test

105

Summary

110

Review Questions

111

CHAPTER 5

How User Behave

113

The Psychology of User Actions

114

Psychological Types
The Four Primary Temperaments
The Seven Stages of Human Action

115
117
121

Knowledge: Brain Versus World

122

Task Structures

124

Conscious and Subconscious Behavior

125

Transforming Difficult Tasks into Simple Ones

126

Creating a Conceptual Model

127

Case Study: Interviewing to Establish the Conceptual Model

129

Summary

132

Review Questions

133

CHAPTER 6

Analyzing Your Users

The Users’ Mental Model
The Result
Implementation Versus Mental Models

The Experience Bell Curve
Different Needs for Different Groups

135
136
138
139

140
141

Understanding the User’s Goals

143

User and Task Analysis

146

Constructing Personas
Watching Users in Action

147
152


Contents

Persona Evaluation

xi

154

Case Study: Producing a Primary Persona

156

Summary

160

Review Questions

161

CHAPER 7 Designing a User Interface
Designing the Persona-Based Interaction Framework
Real-World Requirements
Defining the Framework

Interaction Design
Applying Design Imperatives
Principles
Patterns

163
164
166
166

171
171
172
172

Software Postures

173

Interface Behaviors

177

Using the Mouse Pointer
Window Behaviors

Helping Users Find Information
Visual Cues
Audio Cues
Pop-Up Messages
Search Engines

Communicating with the Users
Making Features Easy to Find
Online Help
Assistants and Wizards

178
181

186
186
187
187
188

189
189
190

190

Refining the Form and Behavior

191

Case Study: Refining the Paper Prototype Test

192

Summary

194

Review Questions

196

CHAPTER 8

Designing a Web Site

197

Web Versus GUI: Similarities and Differences

198

GUI Rules
Web Rules

198
199


xii

Contents

Internet-Based Applications

Web Myths
Usage
Design
Accessibility

Web Postures

200

200
201
202
203

205

Different Types of Web Sites

205

Why You Need Web Engineering

213

“Back-End” Programming
Form Processing
Databases

Web Standards
Colors and Text
Graphics
Navigation
Bread Crumbs

The Four Rules
Keep It Simple
Keep It Consistent
Keep It Current
Keep Navigability to Three Clicks

When Do You Break the Rules?
Breaking GUI Rules
Breaking Web Rules

213
214
215

215

215
216
217
217

218
218
218
219
219

219
219
220

Case Study: Interface Navigation Features

220

Summary

222

Review Questions

223

CHAPTER 9

Usability

Selecting Techniques for Your Usability Test
Observing, Listening to, and Engaging Users
Other Methods of User Interaction

Defining Your Usability Test
Goals and Concerns
Picking Your Test Participants
Selecting, Organizing, and Creating Test Scenarios
Determining How to Measure Usability

225
226
226
227

228
229
229
230
231


Contents

xiii

Preparing Test Materials

232

Conducting the Usability Test

233

Conducting a Pilot Test
Honing Your Observation Skills
Honing Your Interviewing Skills
An Ongoing Relationship
Caring for the Test Participants
Conducting the Real Test

Analyzing and Presenting Usability Test Results
Analyzing and Presenting the Data
The Report
The Presentation
Preparing a Highlight Presentation
Changing the Product and Process

233
234
236
238
239
239

241
241
243
245

246
247

Case Study: Implementing the Paper Prototype Test

248

Summary

251

Review Questions

252

APPENDIX A

Answers to Review Questions

253

APPENDIX B Recommended Reading

265

Glossary

267

References

273

Index

275


This page intentionally left blank


Preface
Training is everything. The peach was once a bitter almond; cauliflower is
nothing but cabbage with a college education.
—Mark Twain
In 2005, I sat down to redesign the usability course for the Online Technical
Writing Certificate Program for California State University, Sacramento. I
spent a few hours researching usability-related books from a number of Web
sources that included book sites and the Society for Technical Communication. Then I got up to go to the kitchen to get my credit card so I could order
a large number of books. That was the beginning of my journey.
The creation of that course was a tremendous journey. I augmented my existing knowledge a great deal during that journey, and I share that knowledge to
a new group of students each semester. As I put together the course, I wondered why there wasn’t a book that discussed current theory and practice of
not only user interface design, but also usability design and testing that
ensures that the interface design is useful. I talked with Carole McClendon,
my literary agent, about expanding the course into a book, and she got me in
touch with Addison-Wesley.

xv

This page intentionally left blank


Acknowledgments
No book can be written alone, and a successful book is the product of cooperation between a number of great people. I want to start by thanking my literary agent, Carole McClendon, for her unflagging efforts to help me write
books that are interesting to me and to my readers. She shows me her professionalism and dedication every day.
Next, I want to thank Kristin Weinberger, my project editor at Addison-Wesley
who inherited the book on short notice and shepherded it through the writing and editing processes. Without her steady hand, you wouldn’t be holding
this book in your hands.
I also want to thank the group of editors and reviewers who looked at this
book and provided me with invaluable feedback. This group includes Mike
Hernandez, who is the keeper of the For Mere Mortals standard. I especially
want to thank my good friend Tony Barcellos, who took time out of his busy
schedule (including writing his own book) to review this book and provide
helpful and humorous suggestions. I would also like to thank Lawrence
Smith, Ben Shneiderman, Rebecca Riordan, and David Whiteman for their
technical editing.

xvii


This page intentionally left blank


About the Author
Eric Butow is the CEO of Butow Communications Group (BCG), a technical
writing and Web design firm based in Roseville, California.
Eric has authored or coauthored eight books since 2000, including Master
Visually Windows 2000 Server, Teach Yourself Visually Windows 2000
Server, FrontPage 2002 Weekend Crash Course, C#:Your Visual Blueprint,

Creating Web Pages Bible, Dreamweaver MX 2004 Savvy, The PDF Book for
Microsoft Office, and Special Edition Using Microsoft Windows Vista. Eric has
also been a technical editor for various computing books and has written articles for international publications including SD Times and Intercom, the magazine of the Society for Technical Communication.
Eric is also an online course developer and instructor. He has developed two
Windows XP networking courses—one for Windows XP Home Edition users
and the other for Windows XP Professional users—for Ed2Go. Eric has also
developed RoboHelp and Windows Vista multimedia courses for Virtual Training Company (VTC). In addition, he is a course developer and instructor for
the California State University, Sacramento College of Continuing Education
Technical Writing Certificate Program.
When Eric isn’t busy writing, teaching, or running his own business, you’ll
find him reading, hanging out with friends (usually at the nearest Starbucks or
bookstore), or enjoying the company of his family at his parents’ home in the
Sierra foothills or the family vineyard in northern California.

xix