The Essential Guide to User Interface Design

WILBERT O. GALITZ is an internationally respected consultant, author, and instructor in human factors and user interface design. He has lectured and conducted seminars on these topics worldwide and is recognized as a top authority on screen design. Bill has been involved with information systems for 45 years and writing about interface design since 1981.

About the Author v

Preface xix

Acknowledgments xxvii

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 7

Introduction of the Graphical User Interface 7

The Blossoming of the World Wide Web 8

A Brief History of Screen Design 10

What’s Next? 12

Chapter 2 Characteristics of Graphical and Web User Interfaces 13

Interaction Styles 13

Command Line 14

Menu Selection 14

Form Fill-in 14

Direct Manipulation 15

Anthropomorphic 15

The Graphical User Interface 16

The Popularity of Graphics 16

The Concept of Direct Manipulation 17

Graphical Systems: Advantages and Disadvantages 19

Characteristics of the Graphical User Interface 24

The Web User Interface 28

The Popularity of the Web 29

Characteristics of a Web Interface 29

The Merging of Graphical Business Systems and the Web 39

Characteristics of an Intranet versus the Internet 39

Extranets 40

Web Page versus Application Design 40

Principles of User Interface Design 44

Principles for the Xerox STAR 44

General Principles 45

Part 1 Exercise 58

What’s Next? 58

Part 2 The User Interface Design Process 59

Obstacles and Pitfalls in the Development Path 59

Designing for People: The Seven Commandments 60

Usability 64

Usability Assessment in the Design Process 65

Common Usability Problems 65

Some Practical Measures of Usability 68

Some Objective Measures of Usability 69

Step 1 Know Your User or Client 71

Understanding How People Interact with Computers 71

The Human Action Cycle 72

Why People Have Trouble with Computers 73

Responses to Poor Design 74

People and Their Tasks 76

Important Human Characteristics in Design 76

Perception 76

Memory 78

Sensory Storage 79

Visual Acuity 80

Foveal and Peripheral Vision 81

Information Processing 81

Mental Models 82

Movement Control 83

Learning 83

Skill 84

Performance Load 84

Individual Differences 85

Human Considerations in the Design of Business Systems 87

The User’s Knowledge and Experience 87

The User’s Tasks and Needs 92

The User’s Psychological Characteristics 95

The User’s Physical Characteristics 96

Human Interaction Speeds 100

Performance versus Preference 101

Methods for Gaining an Understanding of Users 102

Step 1 Exercise 102

Step 2 Understand the Business Function 103

Business Definition and Requirements Analysis 104

Information Collection Techniques 104

Defining the Domain 112

Considering the Environment 112

Possible Problems in Requirements Collection 113

Determining Basic Business Functions 113

Understanding the User’s Work 114

Developing Conceptual Models 115

The User’s New Mental Model 120

Design Standards or Style Guides 120

Value of Standards and Guidelines 121

Customized Style Guides 124

Design Support and Implementation 125

System Training and Documentation Needs 125

Training 126

Documentation 126

Step 2 Exercise 126

Step 3 Understand the Principles of Good Interface and Screen Design 127

Human Considerations in Interface and Screen Design 128

How to Discourage the User 128

What Users Want 130

What Users Do 130

Interface Design Goals 131

The Test for a Good Design 132

Screen and Web Page Meaning and Purpose 132

Organizing Elements Clearly and Meaningfully 133

Consistency 133

Starting Point 135

Ordering of Data and Content 136

Navigation and Flow 139

Visually Pleasing Composition 141

Distinctiveness 161

Focus and Emphasis 162

Conveying Depth of Levels or a Three-Dimensional Appearance 165

Presenting Information Simply and Meaningfully 168

Application and Page Size 178

Application Screen Elements 184

Organization and Structure Guidelines 220

The Web — Web sites and Web Pages 230

Intranet Design Guidelines 258

Extranet Design Guidelines 259

Small Screens 259

Weblogs 260

Statistical Graphics 261

Types of Statistical Graphics 273

Flow Charts 283

Technological Considerations in Interface Design 284

Graphical Systems 284

Web Systems 287

The User Technology Profile Circa 2006 292

Examples of Screens 293

Example 1 293

Example 2 297

Example 3 300

Example 4 301

Example 5 302

Example 6 303

Example 7 305

Step 3 Exercise 306

Step 4 Develop System Menus and Navigation Schemes 307

Structures of Menus 308

Single Menus 308

Sequential Linear Menus 309

Simultaneous Menus 309

Hierarchical or Sequential Menus 310

Connected Menus 311

Event-Trapping Menus 313

Functions of Menus 313

Navigation to a New Menu 314

Execute an Action or Procedure 314

Displaying Information 314

Data or Parameter Input 314

Content of Menus 314

Menu Context 315

Menu Title 315

Choice Descriptions 315

Completion Instructions 315

Formatting of Menus 315

Consistency 316

Display 316

Presentation 316

Organization 317

Complexity 320

Item Arrangement 321

Ordering 321

Groupings 323

Selection Support Menus 325

Phrasing the Menu 328

Menu Titles 329

Menu Choice Descriptions 330

Menu Instructions 332

Intent Indicators 332

Keyboard Shortcuts 333

Selecting Menu Choices 337

Initial Cursor Positioning 337

Choice Selection 338

Defaults 339

Unavailable Choices 340

Mark Toggles or Settings 340

Toggled Menu Items 341

Web Site Navigation 342

Web Site Navigation Problems 343

Web Site Navigation Goals 344

Web Site Navigation Design 345

Maintaining a Sense of Place 367

Kinds of Graphical Menus 369

Menu Bar 369

Pull-Down Menu 371

Cascading Menus 375

Pop-Up Menus 377

Tear-Off Menus 379

Iconic Menus 380

Pie Menus 380

Graphical Menu Examples 382

Example 1 382

Step 5 Select the Proper Kinds of Windows 385

Window Characteristics 385

The Attraction of Windows 386

Constraints in Window System Design 388

Components of a Window 390

Frame 390

Title Bar 391

Title Bar Icon 391

Window Sizing Buttons 392

What’s This? Button 393

Menu Bar 393

Status Bar 394

Scroll Bars 394

Split Box 394

Toolbar 394

Command Area 395

Size Grip 395

Work Area 395

Window Presentation Styles 395

Tiled Windows 396

Overlapping Windows 397

Cascading Windows 398

Picking a Presentation Style 399

Types of Windows 399

Primary Window 400

Secondary Windows 401

Dialog Boxes 407

Property Sheets and Property Inspectors 408

Message Boxes 411

Palette Windows 413

Pop-Up Windows 413

Organizing Window Functions 414

Window Organization 414

Number of Windows 415

Sizing Windows 416

Window Placement 417

The Web and the Browser 419

Browser Components 419

Step 5 Exercise 422

Step 6 Select the Proper Interaction Devices 423

Input Devices 423

Characteristics of Input Devices 424

Other Input Devices 436

Selecting the Proper Input Device 436

Output Devices 440

Screens 440

Speakers 441

Step 6 Exercise 441

Step 7 Choose the Proper Screen-Based Controls 443

Operable Controls 445

Buttons 445

Text Entry/Read-Only Controls 461

Text Boxes 461

Selection Controls 468

Radio Buttons 468

Check Boxes 478

Palettes 488

List Boxes 493

List View Controls 503

Drop-Down/Pop-Up List Boxes 503

Combination Entry/Selection Controls 509

Spin Boxes 509

Combo Boxes 512

Drop-Down/Pop-Up Combo Boxes 514

Other Operable Controls 517

Slider 517

Tabs 521

Date-Picker 524

Tree View 525

Scroll Bars 526

Custom Controls 531

Presentation Controls 531

Static Text Fields 532

Group Boxes 533

Column Headings 534

ToolTips 535

Balloon Tips 537

Progress Indicators 539

Sample Box 540

Scrolling Tickers 542

Selecting the Proper Controls 542

Entry versus Selection — A Comparison 543

Comparison of GUI Controls 544

Control Selection Criteria 547

Choosing a Control Form 548

Examples 552

Example 1 552

Example 2 553

Example 3 556

Example 4 557

Example 5 558

Example 6 559

Step 7 Exercise 561

Step 8 Write Clear Text and Messages 563

Words, Sentences, Messages, and Text 564

Readability 564

Choosing the Proper Words 565

Writing Sentences and Messages 568

Kinds of Messages 570

Presenting and Writing Text 578

Window Title, Conventions, and Sequence Control Guidance 582

Content and Text for Web Pages 584

Words 584

Page Text 585

Page Title 589

Headings and Headlines 589

Instructions 590

Error Messages 590

Step 8 Exercise 591

Step 9 Provide Effective Feedback and Guidance and Assistance 593

Providing the Proper Feedback 594

Response Time 594

Dealing with Time Delays 598

Blinking for Attention 601

Use of Sound 602

Guidance and Assistance 603

Preventing Errors 603

Problem Management 604

Providing Guidance and Assistance 606

Instructions or Prompting 608

Help Facility 608

Contextual Help 613

Task-Oriented Help 617

Reference Help 619

Wizards 620

Hints or Tips 622

Step 9 Exercise 623

Step 10 Provide Effective Internationalization and Accessibility 625

International Considerations 626

Localization 626

Cultural Considerations 627

Words and Text 628

Images and Symbols 631

Color, Sequence, and Functionality 633

Requirements Determination and Testing 635

Accessibility 635

Types of Disabilities 636

Accessibility Design 636

Step 10 Exercise 650

Step 11 Create Meaningful Graphics, Icons, and Images 651

Icons 652

Kinds of Icons 652

Characteristics of Icons 654

Influences on Icon Usability 654

Choosing Icons 657

Choosing Icon Images 659

Creating Icon Images 659

Drawing Icon Images 664

Icon Animation and Audition 665

The Icon Design Process 667

Screen Presentation 667

Multimedia 669

Graphics 669

Images 671

Photographs/Pictures 676

Video 677

Diagrams 678

Drawings 681

Animation 681

Audition 683

Combining Mediums 686

Step 11 Exercise 689

Step 12 Choose the Proper Colors 691

Color — What Is It? 692

RGB 694

HSV 694

Dithering 694

Color Uses 695

Color as a Formatting Aid 695

Color as a Visual Code 696

Other Color Uses 696

Possible Problems with Color 696

High Attention-Getting Capacity 696

Interference with Use of Other Screens 697

Varying Sensitivity of the Eye to Different Colors 697

Color-Viewing Deficiencies 697

Color Connotations 698

Cross-Disciplinary and Cross-Cultural Differences 700

Color — What the Research Shows 700

Color and Human Vision 701

The Lens 701

The Retina 701

Choosing Colors 702

Choosing Colors for Categories of Information 703

Colors in Context 703

Usage 704

Discrimination and Harmony 704

Emphasis 706

Common Meanings 706

Location 707

Ordering 708

Foregrounds and Backgrounds 708

Three-Dimensional Look 709

Color Palette, Defaults, and Customization 710

Grayscale 711

Text in Color 712

Monochromatic Screens 712

Consistency 713

Considerations for People with Color-Viewing Deficiencies 713

Cultural, Disciplinary, and Accessibility Considerations 714

Choosing Colors for Textual Graphic Screens 714

Effective Foreground/Background Combinations 714

Choose the Background First 717

Maximum of Four Colors 717

Use Colors in Toolbars Sparingly 718

Test the Colors 718

Choosing Colors for Statistical Graphics Screens 718

Emphasis 718

Number of Colors 718

Backgrounds 719

Size 719

Status 719

Measurements and Area-Fill Patterns 719

Physical Impressions 720

Choosing Colors for Web Pages 721

Uses of Color to Avoid 723

Step 12 Exercise 725

Step 13 Organize and Layout Windows and Pages 727

Organizing and Laying Out Screens 728

General Guidelines 728

Organization Guidelines 729

Control Navigation 748

Window Guidelines 749

Web Page Guidelines 750

Screen Examples 761

Example 1 761

Example 2 762

Step 14 Test, Test, and Retest 767

Usability 768

The Purpose of Usability Testing 768

The Importance of Usability Testing 769

Scope of Testing 770

Prototypes 771

Hand Sketches and Scenarios 772

Interactive Paper Prototypes 774

Programmed Facades 775

Prototype-Oriented Languages 776

Comparisons of Prototypes 776

Kinds of Tests 777

Guidelines and Standards Review 779

Heuristic Evaluation 780

Cognitive Walk-Throughs 786

Think-Aloud Evaluations 788

Usability Test 789

Classic Experiments 790

Focus Groups 791

Choosing a Testing Method 792

Developing and Conducting a Test 795

The Test Plan 795

Test Conduct and Data Collection 803

Analyze, Modify, and Retest 806

Evaluate the Working System 807

Additional Reading 809

A Final Word 810

References 811

Index 835