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 vPreface xixAcknowledgments xxviiPart 1 The User Interface—An Introduction and Overview 1Chapter 1 The Importance of the User Interface 3Defining the User Interface 4The Importance of Good Design 4The Benefits of Good Design 5A Brief History of the Human-Computer Interface 7Introduction of the Graphical User Interface 7The Blossoming of the World Wide Web 8A Brief History of Screen Design 10What’s Next? 12Chapter 2 Characteristics of Graphical and Web User Interfaces 13Interaction Styles 13Command Line 14Menu Selection 14Form Fill-in 14Direct Manipulation 15Anthropomorphic 15The Graphical User Interface 16The Popularity of Graphics 16The Concept of Direct Manipulation 17Graphical Systems: Advantages and Disadvantages 19Characteristics of the Graphical User Interface 24The Web User Interface 28The Popularity of the Web 29Characteristics of a Web Interface 29The Merging of Graphical Business Systems and the Web 39Characteristics of an Intranet versus the Internet 39Extranets 40Web Page versus Application Design 40Principles of User Interface Design 44Principles for the Xerox STAR 44General Principles 45Part 1 Exercise 58What’s Next? 58Part 2 The User Interface Design Process 59Obstacles and Pitfalls in the Development Path 59Designing for People: The Seven Commandments 60Usability 64Usability Assessment in the Design Process 65Common Usability Problems 65Some Practical Measures of Usability 68Some Objective Measures of Usability 69Step 1 Know Your User or Client 71Understanding How People Interact with Computers 71The Human Action Cycle 72Why People Have Trouble with Computers 73Responses to Poor Design 74People and Their Tasks 76Important Human Characteristics in Design 76Perception 76Memory 78Sensory Storage 79Visual Acuity 80Foveal and Peripheral Vision 81Information Processing 81Mental Models 82Movement Control 83Learning 83Skill 84Performance Load 84Individual Differences 85Human Considerations in the Design of Business Systems 87The User’s Knowledge and Experience 87The User’s Tasks and Needs 92The User’s Psychological Characteristics 95The User’s Physical Characteristics 96Human Interaction Speeds 100Performance versus Preference 101Methods for Gaining an Understanding of Users 102Step 1 Exercise 102Step 2 Understand the Business Function 103Business Definition and Requirements Analysis 104Information Collection Techniques 104Defining the Domain 112Considering the Environment 112Possible Problems in Requirements Collection 113Determining Basic Business Functions 113Understanding the User’s Work 114Developing Conceptual Models 115The User’s New Mental Model 120Design Standards or Style Guides 120Value of Standards and Guidelines 121Customized Style Guides 124Design Support and Implementation 125System Training and Documentation Needs 125Training 126Documentation 126Step 2 Exercise 126Step 3 Understand the Principles of Good Interface and Screen Design 127Human Considerations in Interface and Screen Design 128How to Discourage the User 128What Users Want 130What Users Do 130Interface Design Goals 131The Test for a Good Design 132Screen and Web Page Meaning and Purpose 132Organizing Elements Clearly and Meaningfully 133Consistency 133Starting Point 135Ordering of Data and Content 136Navigation and Flow 139Visually Pleasing Composition 141Distinctiveness 161Focus and Emphasis 162Conveying Depth of Levels or a Three-Dimensional Appearance 165Presenting Information Simply and Meaningfully 168Application and Page Size 178Application Screen Elements 184Organization and Structure Guidelines 220The Web — Web sites and Web Pages 230Intranet Design Guidelines 258Extranet Design Guidelines 259Small Screens 259Weblogs 260Statistical Graphics 261Types of Statistical Graphics 273Flow Charts 283Technological Considerations in Interface Design 284Graphical Systems 284Web Systems 287The User Technology Profile Circa 2006 292Examples of Screens 293Example 1 293Example 2 297Example 3 300Example 4 301Example 5 302Example 6 303Example 7 305Step 3 Exercise 306Step 4 Develop System Menus and Navigation Schemes 307Structures of Menus 308Single Menus 308Sequential Linear Menus 309Simultaneous Menus 309Hierarchical or Sequential Menus 310Connected Menus 311Event-Trapping Menus 313Functions of Menus 313Navigation to a New Menu 314Execute an Action or Procedure 314Displaying Information 314Data or Parameter Input 314Content of Menus 314Menu Context 315Menu Title 315Choice Descriptions 315Completion Instructions 315Formatting of Menus 315Consistency 316Display 316Presentation 316Organization 317Complexity 320Item Arrangement 321Ordering 321Groupings 323Selection Support Menus 325Phrasing the Menu 328Menu Titles 329Menu Choice Descriptions 330Menu Instructions 332Intent Indicators 332Keyboard Shortcuts 333Selecting Menu Choices 337Initial Cursor Positioning 337Choice Selection 338Defaults 339Unavailable Choices 340Mark Toggles or Settings 340Toggled Menu Items 341Web Site Navigation 342Web Site Navigation Problems 343Web Site Navigation Goals 344Web Site Navigation Design 345Maintaining a Sense of Place 367Kinds of Graphical Menus 369Menu Bar 369Pull-Down Menu 371Cascading Menus 375Pop-Up Menus 377Tear-Off Menus 379Iconic Menus 380Pie Menus 380Graphical Menu Examples 382Example 1 382Step 5 Select the Proper Kinds of Windows 385Window Characteristics 385The Attraction of Windows 386Constraints in Window System Design 388Components of a Window 390Frame 390Title Bar 391Title Bar Icon 391Window Sizing Buttons 392What’s This? Button 393Menu Bar 393Status Bar 394Scroll Bars 394Split Box 394Toolbar 394Command Area 395Size Grip 395Work Area 395Window Presentation Styles 395Tiled Windows 396Overlapping Windows 397Cascading Windows 398Picking a Presentation Style 399Types of Windows 399Primary Window 400Secondary Windows 401Dialog Boxes 407Property Sheets and Property Inspectors 408Message Boxes 411Palette Windows 413Pop-Up Windows 413Organizing Window Functions 414Window Organization 414Number of Windows 415Sizing Windows 416Window Placement 417The Web and the Browser 419Browser Components 419Step 5 Exercise 422Step 6 Select the Proper Interaction Devices 423Input Devices 423Characteristics of Input Devices 424Other Input Devices 436Selecting the Proper Input Device 436Output Devices 440Screens 440Speakers 441Step 6 Exercise 441Step 7 Choose the Proper Screen-Based Controls 443Operable Controls 445Buttons 445Text Entry/Read-Only Controls 461Text Boxes 461Selection Controls 468Radio Buttons 468Check Boxes 478Palettes 488List Boxes 493List View Controls 503Drop-Down/Pop-Up List Boxes 503Combination Entry/Selection Controls 509Spin Boxes 509Combo Boxes 512Drop-Down/Pop-Up Combo Boxes 514Other Operable Controls 517Slider 517Tabs 521Date-Picker 524Tree View 525Scroll Bars 526Custom Controls 531Presentation Controls 531Static Text Fields 532Group Boxes 533Column Headings 534ToolTips 535Balloon Tips 537Progress Indicators 539Sample Box 540Scrolling Tickers 542Selecting the Proper Controls 542Entry versus Selection — A Comparison 543Comparison of GUI Controls 544Control Selection Criteria 547Choosing a Control Form 548Examples 552Example 1 552Example 2 553Example 3 556Example 4 557Example 5 558Example 6 559Step 7 Exercise 561Step 8 Write Clear Text and Messages 563Words, Sentences, Messages, and Text 564Readability 564Choosing the Proper Words 565Writing Sentences and Messages 568Kinds of Messages 570Presenting and Writing Text 578Window Title, Conventions, and Sequence Control Guidance 582Content and Text for Web Pages 584Words 584Page Text 585Page Title 589Headings and Headlines 589Instructions 590Error Messages 590Step 8 Exercise 591Step 9 Provide Effective Feedback and Guidance and Assistance 593Providing the Proper Feedback 594Response Time 594Dealing with Time Delays 598Blinking for Attention 601Use of Sound 602Guidance and Assistance 603Preventing Errors 603Problem Management 604Providing Guidance and Assistance 606Instructions or Prompting 608Help Facility 608Contextual Help 613Task-Oriented Help 617Reference Help 619Wizards 620Hints or Tips 622Step 9 Exercise 623Step 10 Provide Effective Internationalization and Accessibility 625International Considerations 626Localization 626Cultural Considerations 627Words and Text 628Images and Symbols 631Color, Sequence, and Functionality 633Requirements Determination and Testing 635Accessibility 635Types of Disabilities 636Accessibility Design 636Step 10 Exercise 650Step 11 Create Meaningful Graphics, Icons, and Images 651Icons 652Kinds of Icons 652Characteristics of Icons 654Influences on Icon Usability 654Choosing Icons 657Choosing Icon Images 659Creating Icon Images 659Drawing Icon Images 664Icon Animation and Audition 665The Icon Design Process 667Screen Presentation 667Multimedia 669Graphics 669Images 671Photographs/Pictures 676Video 677Diagrams 678Drawings 681Animation 681Audition 683Combining Mediums 686Step 11 Exercise 689Step 12 Choose the Proper Colors 691Color — What Is It? 692RGB 694HSV 694Dithering 694Color Uses 695Color as a Formatting Aid 695Color as a Visual Code 696Other Color Uses 696Possible Problems with Color 696High Attention-Getting Capacity 696Interference with Use of Other Screens 697Varying Sensitivity of the Eye to Different Colors 697Color-Viewing Deficiencies 697Color Connotations 698Cross-Disciplinary and Cross-Cultural Differences 700Color — What the Research Shows 700Color and Human Vision 701The Lens 701The Retina 701Choosing Colors 702Choosing Colors for Categories of Information 703Colors in Context 703Usage 704Discrimination and Harmony 704Emphasis 706Common Meanings 706Location 707Ordering 708Foregrounds and Backgrounds 708Three-Dimensional Look 709Color Palette, Defaults, and Customization 710Grayscale 711Text in Color 712Monochromatic Screens 712Consistency 713Considerations for People with Color-Viewing Deficiencies 713Cultural, Disciplinary, and Accessibility Considerations 714Choosing Colors for Textual Graphic Screens 714Effective Foreground/Background Combinations 714Choose the Background First 717Maximum of Four Colors 717Use Colors in Toolbars Sparingly 718Test the Colors 718Choosing Colors for Statistical Graphics Screens 718Emphasis 718Number of Colors 718Backgrounds 719Size 719Status 719Measurements and Area-Fill Patterns 719Physical Impressions 720Choosing Colors for Web Pages 721Uses of Color to Avoid 723Step 12 Exercise 725Step 13 Organize and Layout Windows and Pages 727Organizing and Laying Out Screens 728General Guidelines 728Organization Guidelines 729Control Navigation 748Window Guidelines 749Web Page Guidelines 750Screen Examples 761Example 1 761Example 2 762Step 14 Test, Test, and Retest 767Usability 768The Purpose of Usability Testing 768The Importance of Usability Testing 769Scope of Testing 770Prototypes 771Hand Sketches and Scenarios 772Interactive Paper Prototypes 774Programmed Facades 775Prototype-Oriented Languages 776Comparisons of Prototypes 776Kinds of Tests 777Guidelines and Standards Review 779Heuristic Evaluation 780Cognitive Walk-Throughs 786Think-Aloud Evaluations 788Usability Test 789Classic Experiments 790Focus Groups 791Choosing a Testing Method 792Developing and Conducting a Test 795The Test Plan 795Test Conduct and Data Collection 803Analyze, Modify, and Retest 806Evaluate the Working System 807Additional Reading 809A Final Word 810References 811Index 835