The Essential Guide to User Interface Design

786 Pages·2002·5.25 MB·English

by  Wilbert O. Galitz

3900 P- FM 4/24/02 2:36 PM Page i
The Essential Guide to
User Interface Design
Second Edition
An Introduction to GUI Design
Principles and Techniques
Wilbert O. Galitz
Wiley Computer Publishing
John Wiley & Sons, Inc.
NEW YORK • CHICHESTER • WEINHEIM • BRISBANE • SINGAPORE • TORONTO
3900 P- FM 4/24/02 2:36 PM Page xiv
3900 P- FM 4/24/02 2:36 PM Page i
The Essential Guide to
User Interface Design
Second Edition
An Introduction to GUI Design
Principles and Techniques
Wilbert O. Galitz
Wiley Computer Publishing
John Wiley & Sons, Inc.
NEW YORK • CHICHESTER • WEINHEIM • BRISBANE • SINGAPORE • TORONTO
3900 P- FM 4/24/02 2:36 PM Page ii
To my wife and business partner, Sharon,
for many years of love and support in our
home and office.
To our grandchildren, Mitchell, Barry, Deirdra,
and Spencer Galitz, Lauren and Scott Roepel,
and Shane Watters. May one or more of them
pick up the writing torch.
Publisher: Robert Ipsen
Executive Editor: Robert Elliott
Assistant Editor: Emilie Herman
Associate Managing Editor: John Atkins
Text Design & Composition: Publishers’ Design and Production Services, Inc.
Designations used by companies to distinguish their products are often claimed as trade-
marks. In all instances where John Wiley & Sons, Inc., is aware of a claim, the product names
appear in initial capital or ALL CAPITAL LETTERS. Readers, however, should contact the appro-
priate companies for more complete information regarding trademarks and registration.
This book is printed on acid-free paper.
Copyright © 2002 by Wilbert O. Galitz. All rights reserved.
Published by John Wiley & Sons, Inc.
Published simultaneously in Canada.
Wiley also publishes its books in a variety of electronic formats. Some content that appears in
print may not be available in electronic books.
No part of this publication may be reproduced, stored in a retrieval system or transmitted in
any form or by any means, electronic, mechanical, photocopying, recording, scanning or
otherwise, except as permitted under Sections 107 or 108 of the 1976 United States Copyright
Act, without either the prior written permission of the Publisher, or authorization through
payment of the appropriate per-copy fee to the Copyright Clearance Center, 222 Rosewood
Drive, Danvers, MA 01923, [phone], fax [phone]. Requests to the Publisher for
permission should be addressed to the Permissions Department, John Wiley & Sons, Inc., 605
Third Avenue, New York, NY 10158-0012, [phone], fax [phone], E-Mail:
PERMREQ @ WILEY.COM.
This publication is designed to provide accurate and authoritative information in regard to
the subject matter covered. It is sold with the understanding that the publisher is not en-
gaged in professional services. If professional advice or other expert assistance is required,
the services of a competent professional person should be sought.
Library of Congress Cataloging-in-Publication Data:
ISBN: 0-471-084646
Printed in the United States of America.
10 9 8 7 6 5 4 3 2 1
3900 P- FM 4/24/02 2:36 PM Page iii
Contents
Preface xv
Acknowledgments xxiii
About the Author xxiv
Part 1 The User Interface—An Introduction and
Overview 1
Chapter 1 The Importance of the User Interface 3
Defining the User Interface 4
The Importance of Good Design 4
The Benefits of Good Design 5
A Brief History of the Human-Computer Interface 6
Introduction of the Graphical User Interface 7
The Blossoming of the World Wide Web 9
A Brief History of Screen Design 11
The Purpose of This Book 13
What’s Next? 14
Chapter 2 Characteristics of Graphical and Web User Interfaces 15
The Graphical User Interface 15
The Popularity of Graphics 16
The Concept of Direct Manipulation 16
Graphical Systems: Advantages and Disadvantages 18
Characteristics of the Graphical User Interface 23
The Web User Interface 27
The Popularity of the Web 28
Characteristics of a Web Interface 29
iii
3900 P- FM 4/24/02 2:36 PM Page iv
iv Contents
The Merging of Graphical Business Systems
and the Web 38
Characteristics of an Intranet versus the Internet 39
Extranets 39
Principles of User Interface Design 40
Principles for the Xerox STAR 40
General Principles 41
What’s Next? 51
Part 2 The User Interface Design Process 53
Obstacles and Pitfalls in the Development Path 53
Designing for People: The Five Commandments 54
Usability 55
Usability Assessment in the Design Process 55
Common Usability Problems 56
Some Practical Measures of Usability 58
Some Objective Measures of Usability 59
The Design Team 60
Step 1 Know Your User or Client 61
Understanding How People Interact with Computers 61
Why People Have Trouble with Computers 62
Responses to Poor Design 63
People and Their Tasks 64
Important Human Characteristics in Design 65
Perception 65
Memory 66
Sensory Storage 67
Visual Acuity 68
Foveal and Peripheral Vision 69
Information Processing 69
Mental Models 70
Movement Control 70
Learning 71
Skill 71
Individual Differences 72
Human Considerations in Design 72
The User’s Knowledge and Experience 72
The User’s Tasks and Needs 77
The User’s Psychological Characteristics 80
The User’s Physical Characteristics 81
Human Interaction Speeds 83
3900 P- FM 4/24/02 2:36 PM Page v
Contents v
Performance versus Preference 85
Methods for Gaining an Understanding of Users 85
Step 2 Understand the Business Function 87
Business Definition and Requirements Analysis 88
Direct Methods 89
Indirect Methods 93
Requirements Collection Guidelines 96
Determining Basic Business Functions 97
Understanding the User’s Mental Model 98
Developing Conceptual Models 98
The User’s New Mental Model 103
Design Standards or Style Guides 104
Value of Standards and Guidelines 104
Document Design 106
Design Support and Implementation 106
SYSTEM Training and Documentation Needs 107
Training 107
Documentation 107
Step 3 Understand the Principles of Good Screen Design 109
Human Considerations in Screen Design 109
How to Distract the Screen User 110
What Screen Users Want 111
What Screen Users Do 111
Interface Design Goals 112
The Test for a Good Design 113
Screen Meaning and Purpose 113
Organizing Screen Elements Clearly and Meaningfully 114
Consistency 114
Ordering of Screen Data and Content 115
Upper-Left Starting Point 117
Screen Navigation and Flow 117
Visually Pleasing Composition 119
Amount of Information 138
Distinctiveness 145
Focus and Emphasis 146
Conveying Depth of Levels or a Three-Dimensional Appearance 149
Presenting Information Simply and Meaningfully 151
Organization and Structure Guidelines 181
Reading, Browsing, and Searching on the Web 192
Intranet Design Guidelines 204
Extranet Design Guidelines 205
Statistical Graphics 205
3900 P- FM 4/24/02 2:36 PM Page vi
vi Contents
Types of Statistical Graphics 215
Flow Charts 225
Technological Considerations in Interface Design 226
Graphical Systems 226
Web Systems 229
The User Technology Profile Circa 2001 234
Examples of Screens 235
Step 4 Develop System Menus and Navigation Schemes 249
Structures of Menus 250
Single Menus 250
Sequential Linear Menus 251
Simultaneous Menus 251
Hierarchical Menus 253
Connected Menus 253
Event-Trapping Menus 255
Functions of Menus 255
Displaying Information 256
Navigation to a New Menu 256
Execute an Action or Procedure 256
Data or Parameter Input 256
Content of Menus 256
Menu Context 257
Menu Title 257
Choice Descriptions 257
Completion Instructions 257
Formatting of Menus 257
Consistency 258
Display 258
Presentation 258
Organization 259
Complexity 262
Item Arrangement 262
Ordering 263
Groupings 265
Phrasing the Menu 267
Menu Titles 268
Menu Choice Descriptions 269
Menu Instructions 271
Intent Indicators 272
Keyboard Equivalents 273
Keyboard Accelerators 274
3900 P- FM 4/24/02 2:36 PM Page vii
Contents vii
Selecting Menu Choices 276
Initial Cursor Positioning 276
Choice Selection 277
Defaults 278
Unavailable Choices 278
Mark Toggles or Settings 279
Toggled Menu Items 280
Navigating Menus 281
Web Site Navigation Problems 281
Navigation Goals 282
Web Site Navigation 284
Components of a Web Navigation System 286
Web Site Navigation Guidelines 293
Maintaining a Sense of Place 300
Kinds of Graphical Menus 302
Menu Bar 303
Pull-Down Menu 308
Cascading Menus 315
Pop-up Menus 318
Tear-off Menus 321
Iconic Menus 322
Pie Menus 322
Default Menu Items 323
Functions Not Represented by Default Items 325
Graphical Menu Examples 327
Step 5 Select the Proper Kinds of Windows 337
Window Characteristics 337
The Attraction of Windows 338
Constraints in Window System Design 340
Components of a Window 342
Frame 343
Title Bar 343
Title Bar Icon 343
Window Sizing Buttons 345
What’s This? Button 345
Menu Bar 346
Status Bar 346
Scroll Bars 346
Split Box 346
Toolbar 347
Command Area 347
Size Grip 348
Work Area 348
3900 P- FM 4/24/02 2:36 PM Page viii
viii Contents
Window Presentation Styles 348
Tiled Windows 348
Overlapping Windows 349
Cascading Windows 350
Picking a Presentation Style 351
Types of Windows 352
Primary Window 352
Secondary Windows 353
Dialog Boxes 358
Property Sheets and Property Inspectors 359
Message Boxes 362
Palette Windows 364
Pop-up Windows 364
Window Management 367
Single-Document Interface 367
Multiple-Document Interface 368
Workbooks 369
Projects 370
Organizing Window Functions 371
Window Organization 371
Number of Windows 372
Window Operations 372
Active Window 373
General Guidelines 373
Opening a Window 374
Sizing Windows 375
Window Placement 377
Window Separation 378
Moving a Window 378
Resizing a Window 379
Other Operations 380
Window Shuffling 380
Keyboard Control/Mouseless Operation 380
Closing a Window 381
Web Systems 381
Frames 381
Pop-Up Windows 383
Step 6 Select the Proper Device-Based Controls 385
Characteristics of Device-Based Controls 386
Trackball 387
Joystick 388
Graphic Tablet 389
Touch Screen 389