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
