Bringing together the results of more than 300 new design studies, an understanding of people, knowledge of hardware and software capabilities, and the author’s practical experience gained from 45 years of work with display-based systems, this book addresses interface and screen design from the user’s perspective. You will learn how to create an effective design methodology, design and organize screens and Web pages that encourage efficient comprehension and execution, and create screen icons and graphics that make displays easier and more comfortable to use.

Table of Contents:
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