MemoryWeb Ex. 2022
`Apple v. MemoryWeb — IPR2022-00032
`
`cadBNA
`
`amu }
`
`the Essential
`Guide to
`User interface
`Design
`
`Wilbert O. Galitz
`
`ve marnintcnton to GUI Design Principles and Techniques
`
`MemoryWeb Ex. 2022
`Apple v. MemoryWeb – IPR2022-00032
`
`

`

`The Essential G
`User Interface Design
`An Introduction to GUll",,D~es, i,g.,, !
`
`Thi,rdi :Editio~ni
`
`Wilbert C
`
`Wile r-publishing,~Inc._
`
`MemoryWeb Ex. 2022
`Apple v. MemoryWeb – IPR2022-00032
`
`

`

`The Essential Guide to User Interface Design: An Introduction to GUI Design Principles and
`Techniques, Third Edition
`
`Published by
`Wiley Publishing, Inc.
`10475 Crosspoint Boulevard
`Indianapolis, IN 46256
`www. wiley, com
`
`Copyright © 2007 by Wflbert O. Galitz. All rights reserved.
`
`Published by Wiley Publishing, Inc., Indianapolis, Indiana
`
`Published simultaneously in Canada
`
`ISBN: 978-0-470-05342-3
`
`Manufactured in the United States of America
`
`10987654321
`
`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, (978) 750-8400, fax (978)
`646-8600. Requests to the Publisher for permission should be addressed tb the Legal Department,
`Wiley Publishing, Inc., 10475 Crosspoint Blvd., Indianapolis, IN 46256, (317) 572-3447, fax (317)
`572-4355, or online at http://www.wiley.com/go/permissions.
`
`Limit of Liability/Disclaimer of Warranty: The publisher and the author make no representations or
`warranties with respect to the accuracy or completeness of the contents of this work and specifically dis-
`claim all warranties, including without limitation warranties of fitness for a particular purpose. No war-
`ranty may be created or extended by sales or promotional materials. The advice and strategies contained
`herein may not be suitable for every situation. This work is sold with the understanding that the pub-
`lisher is not engaged in rendering legal, accountmg, or other professional services. If professional assis-
`tance is required, the services of a competent professional person should be sought. Neither the publisher
`nor the author shall be liable for damages arising herefrom. The fact that an organization or Website is
`referred to in flus work as a citation and/or a potential source of further information does not mean that
`the author or the publisher endorses the information the organization or Website may provide or recom-
`mendations it may make. Further, readers should be aware that Internet Websites listed in this work may
`have changed or disappeared between when this work was written and when it is read.
`
`For general information on our other products and services or to obtain technical support, please con-
`tact our Customer Care Department within the U.S. at (800) 762-2974, outside the U.S. at (317) 572-3993
`or fax (317) 572-4002.
`
`Library of Congress Cataloging-in-Publication Data
`
`Galitz, Wilbert O.
`The essential guide to user interface design : an introduction to GUI design principles and
`techniques / Wilbert O. Galitz. -- 3rd ed.
`p. cm.
`
`includes bibliographical references and index.
`ISBN-13:978-0-470-05342-3 (paper/webs~te)
`ISBN-10:0-470-05342-9 (paper/website)
`1. Graphical user interfaces (Computer systems) I. Title.
`QA76.9.U83G33 2007
`005.4’37~c22
`
`2006038755
`
`Trademarks: Wiley and the Wiley logo are registered trademarks of John Wiley & Sons, Inc. and/or its
`affiliates, in the United States and other countries, and may not be used without written permission.
`All other trademarks are the property of their respective owners. Wiley Publishing, Inc., is not associ-
`ated with any product or vendor mentioned in this book.
`
`Wiley also publishes its books in a variety of electronic formats. Some content that appears in pnnt
`may not be available in electronic books.
`
`MemoryWeb Ex. 2022
`Apple v. MemoryWeb – IPR2022-00032
`
`

`

`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 and Emily Watters. May one or
`more of them pick up the writing torch.
`
`MemoryWeb Ex. 2022
`Apple v. MemoryWeb – IPR2022-00032
`
`

`

`About th
`
`Wilbert (Bill) O. Galitz is an internationally respected consultant, author, and instruc-
`tor with a long and illustrious career in Human Factors and user-interface design. For
`many years he has consulted, lectured, written about, and conducted seminars and
`workshops on these topics worldwide. He is now the author of eleven books, and his
`first book, Human Factors in Ofyf’ce Automation (1980), was critically acclaimed interna-
`tionally. This book was the first to address the entire range of human factors issues
`involved in business information systems. As a result, he was awarded the
`Administrative Management Society’s Olsten Award. Other books have included
`User-Interface Screen Design and It’s Time to Clean Your Windows. He has long been rec-
`ognized as a world authority on the topic of screen design.
`Bill’s career now spans more than 45 years in information systems, and he has been
`witness to the amazing transformation of technology over this time span. His career
`began in 1961 with the System Development Corpotation, where he was a Training
`Consultant for the SAGE North American Air Defense System. SAGE was the world’s
`first large-scale display-based system. Before forming his own consulting company in
`1981, he worked for CNA Insurance and the Insurance Company of North America
`(now CIGNA), where he designed the user-interfaces and developed screen and inter-
`face design standards for a variety of business information systems. His work experi-
`ence also includes an appointment at South Africa’s National Institute for Personnel
`Research and a number of years with UNIVAC (now UNISYS). At UNIVAC he per-
`formed the human engineering of the company’s first commercial display terminal
`and completed a pioneering study on the operational aspects of large-scale computer
`systems.
`A native of Chicago, Bill possesses a B.A. in Psychology from Lake Forest College in
`Illinois and an M.S. in Industrial Psychology from Iowa State University. He currently
`resides in Surprise, Arizona.
`
`MemoryWeb Ex. 2022
`Apple v. MemoryWeb – IPR2022-00032
`
`

`

`Executive Editor
`Robert Elliott
`
`Development Editor
`Ed Connor
`
`Technical Editor
`Robert Barnett
`
`Copy Editor
`Mildred Sanchez
`
`Editorial Manager
`Mary Beth Wakefield
`
`Production Manager
`Tim Tare
`
`Vice President and Executive Group
`Publisher
`Richard Swadley
`
`Vice President and Executive Publisher
`Joseph B. Wikert
`
`Project Coordinator
`Erin Smith
`
`Graphics and Production Specialists
`Denny Hager
`Jennifer Mayberry
`
`Quality Control Technician
`Brian H. Walls
`
`Proofreading
`Broccoli Information Management
`
`Indexing
`Anne Leach
`
`Anniversary Logo Design
`Richard Pacifico
`
`MemoryWeb Ex. 2022
`Apple v. MemoryWeb – IPR2022-00032
`
`

`

`Co. entS
`
`About the Author
`
`Preface
`
`Acknowledgments
`
`Part 1
`Chapter !
`
`The User Interface-An Introduction and Overview
`
`The Importance of the User Interface
`Defining the User Interface
`The Importance of Good Design
`The Benefits of Good Design
`A Brief History of the Human-Computer Interface
`Introduction of the Graphical User Interface
`The Blossoming of the World Wide Web
`A Brief History of Screen Design
`What’s Next?,
`
`Chapter 2 Characteristics of Graphical and Web User Interfaces
`Interaction Styles
`Command Line
`Menu Selection
`Form Fill-in
`Direct Manipulation
`Anthropomorphic
`The Graphical User Interface
`The Popularity of Graphics
`The Concept of Direct Manipulation
`Graphical Systems: Advantages and Disadvantages
`Characteristics of the Graphical User Interface
`
`V
`
`xix
`
`xxvii
`
`4
`4
`5
`7
`7
`8
`10
`12
`
`13
`14
`14
`14
`15
`15
`16
`16
`17
`19
`24
`
`vii
`
`MemoryWeb Ex. 2022
`Apple v. MemoryWeb – IPR2022-00032
`
`

`

`viii Contents
`
`Part 2
`
`Step 1
`
`The Web User Interface
`The Popularity of the Web
`Characteristics of a Web Interface
`The Merging of Graphical Business Systems and the Web
`Characteristics of an Intranet versus the Internet
`Extrariets
`Web Page versus Application Design
`Principles of User Interface Design
`Principles for the Xerox STAR
`General Principles
`Part I Exercise
`What’s Next?
`
`The User Interface Design Process
`Obstacles and Pitfalls in the Development Path
`Designing for People: The Seven Commandments
`Usability
`Usability Assessment in the Design Process
`Common Usability Problems
`Some Practical Measures of Usability
`Some Objective Measures of Usability
`
`Know Your User or Client
`Understanding How People Interact with Computers
`The Human Action Cycle
`Why People Have Trouble with Computers
`Responses to Poor Design
`People and Their Tasks
`Important Human Characteristics in Design
`Perception
`Memory
`Sensory Storage
`Visual Acuity
`Foveal and Peripheral Vision
`Information Processing
`Mental Models
`Movement Control
`Learning
`Skill
`Performance Load
`Individual Differences
`Human Considerations in the Design of Business Systems
`The User’s Knowledge and Experience
`The User’s Tasks and Needs
`The User’s Psychological Characteristics
`The User’s Physical Characteristics
`Human Interaction Speeds
`
`28
`29
`29
`39
`39
`40
`40
`44
`44
`45
`’ 58
`58
`
`59
`59
`60
`64
`65
`65
`68
`69
`
`71
`71
`72
`73
`74
`76
`76
`76
`78
`79
`80
`81
`81
`82
`83
`83
`84
`84
`85
`87
`87
`92
`95
`96
`100
`
`MemoryWeb Ex. 2022
`Apple v. MemoryWeb – IPR2022-00032
`
`

`

`Contents ix
`
`Step 2
`
`Step 3
`
`Performance versus Preference
`Methods for Gaining an Understanding of Users
`Step I Exercise
`
`Understand the Business Function
`Business Definition and Requirements Analysis
`Information Collection Techniques
`Defining the Domain
`Considering the Environment
`Possible Problems in Requirements Collection
`Determining Basic Business Functions
`Understanding the User’s Work
`Developing Conceptual Models
`The User’s New Mental Model
`Design Standards or Style Guides
`Value of Standards and Guidelines
`Customized Style Guides
`Design Support and Implementation
`System Training and Documentation Needs
`Training
`Documentation
`Step 2 Exercise
`
`Understand the Principles of Good Interface and
`Screen Design
`Human Considerations in Interface and Screen Design
`How to Discourage the User
`What Users Want
`What Users Do
`Interface Design Goals
`The Test for a Good Design
`Screen and Web Page Meaning and Purpose
`Organizing Elements Clearly and Meaningfully
`Consistency
`Starting Point
`Ordering of Data and Content
`Navigation and Flow
`Visually Pleasing Composition
`Distinctiveness
`Focus and Emphasis
`Conveying Depth of Levels or a Three-Dimensional
`Appearance
`Presenting Information Simply and Meaningfully
`Application and Page Size
`Application Screen Elements
`Organization and Structure Guidelines
`The Web -- Web sites and Web Pages
`
`101
`102
`102
`
`103
`104
`104
`112
`112
`113
`113
`114
`115
`120
`120
`121
`124
`125
`125
`126
`126
`126
`
`127
`128
`128
`130
`130
`131
`132
`132
`133
`133
`135
`136
`139
`141
`161
`162
`
`165
`168
`178
`184
`220
`230
`
`MemoryWeb Ex. 2022
`Apple v. MemoryWeb – IPR2022-00032
`
`

`

`x
`
`Contents
`
`Step 4
`
`Intranet Design Guidelines
`Extranet Design Guidelines
`Small Screens
`Weblogs
`Statistical Graphics
`Types of Statistical Graphics
`Flow Charts
`Technological Considerations in Interface Design
`Graphical Systems
`Web Systems
`The User Technology Profile Circa 2006
`Examples of Screens
`Example 1
`Example 2
`Example 3
`Example 4
`Example 5
`Example 6
`Example 7
`Step 3 Exercise
`
`Develop System Menus and Navigation Schemes
`Structures of Menus
`Single Menus
`Sequential Linear Menus
`Simultaneous Menus
`Hierarchical or Sequential Menus
`Connected Menus
`Event-Trapping Menus
`Functions of Menus
`Navigation to a New Menu
`Execute an Action or Procedure
`Displaying Information
`Data or Parameter Input
`Content of Menus
`Menu Context
`Menu Title
`Choice Descriptions
`Completion instructions
`Formatting of Menus
`Consistency
`Display
`Presentation
`Organization
`Complexity
`Item Arrangement
`Ordering
`
`258
`259
`259
`260
`261
`273
`283
`284
`284
`287
`292
`293
`293
`297
`3OO
`301
`302
`303
`305
`306
`
`30?
`3O8
`308
`309
`309
`310
`311
`313
`313
`314
`314
`314
`314
`314
`315
`315
`315
`315
`315
`316
`316
`316
`317
`320
`321
`321
`
`MemoryWeb Ex. 2022
`Apple v. MemoryWeb – IPR2022-00032
`
`

`

`Groupings
`Selection Support Menus
`Phrasing the Menu
`Menu Titles
`Menu Choice Descriptions
`Menu Instructions
`Intent Indicators
`Keyboard Shortcuts
`Selecting Menu Choices
`Initial Cursor Positioning
`Choice Selection
`Defaults
`Unavailable Choices
`Mark Toggles or Settings
`Toggled Menu Items
`Web Site Navigation
`Web Site Navigation Problems
`Web Site Navigation Goals
`Web Site Navigation Design
`Maintaining a Sense of Place
`Kinds of Graphical Menus
`Menu Bar
`Pull-Down Menu
`Cascading Menus
`Pop-Up Menus
`Tear-Off Menus
`Iconic Menus
`Pie Menus
`Graphical Menu Examples
`Example I
`
`Step 5
`
`Select the Proper Kinds of Windows
`Window Characteristics
`The Attraction of Windows
`Constraints in Window System Design
`Components of a Window
`Frame
`Title Bar
`Title Bar Icon
`Window Sizing Buttons
`What’s This? Button
`Menu Bar
`Status Bar
`Scroll Bars
`Split Box
`Toolbar
`Command Area
`
`Contents xi
`
`323
`325
`328
`329
`330
`332
`332
`333
`337
`337
`338
`339
`340
`340
`341
`342
`343
`344
`345
`367
`369
`369
`371
`375
`377
`379
`380
`380
`382
`382
`
`385
`385
`386
`388
`390
`390
`391
`391
`392
`393
`393
`394
`394
`394
`394
`395
`
`MemoryWeb Ex. 2022
`Apple v. MemoryWeb – IPR2022-00032
`
`

`

`xii Contents
`
`Size Grip
`Work Area
`Window Presentation Styles
`Tiled Windows
`Overlapping Windows
`Cascading Windows
`Picking a Presentation Style
`Types of Windows
`Primary Window ~
`Secondary Windows
`Dialog Boxes
`Property Sheets and Property Inspectors
`Message Boxes
`Palette Windows
`Pop-Up Windows
`Organizing Window Functions
`Window Organization
`Number of Windows
`Sizing Windows
`Window Placement
`The Web and the Browser
`Browser Components
`Step 5 Exercise
`
`Select the Proper Interaction Devices
`Input Devices
`Characteristics of Input Devices
`Other Input Devices
`Selecting the Proper Input Device
`Output Devices
`Screens
`Speakers
`Step 6 Exercise
`
`Choose the Proper Screen-Based Controls
`Operable Controls
`Buttons
`Text Entry/Read-Only Controls
`Text Boxes
`Selection Controls
`Radio Buttons
`Check Boxes
`Palettes
`List Boxes
`List View Controls
`Drop-Down/Pop-Up List Boxes
`
`Step 6
`
`Step 7
`
`395
`395
`395
`396
`397
`398
`399
`399
`400
`401
`407
`408
`411
`413
`413
`414
`414
`415
`416
`417
`419
`419
`422
`
`423
`423
`424
`436
`436
`440
`440
`441
`441
`
`443
`445
`445
`461
`461
`468
`468
`478
`488
`493
`503
`503
`
`MemoryWeb Ex. 2022
`Apple v. MemoryWeb – IPR2022-00032
`
`

`

`Contents xiii -
`
`Combination Entry/Selection Controls
`Spin Boxes
`Combo Boxes
`Drop-Down/Pop-Up Combo Boxes
`Other Operable Controls
`Slider
`Tabs
`Date-Picker
`Tree View
`Scroll Bars
`Custom Controls
`Presentation Controls
`Static Text Fields
`Group Boxes
`Column Headings
`ToolTips
`Balloon Tips
`Progress Indicators
`Sample Box
`Scrolling Tickers
`Selecting the Proper Controls
`Entry versus Selection -- A Comparison
`Comparison of GUI Controls
`Control Selection Criteria
`Choosing a Control Form
`Examples
`Example 1
`Example 2
`Example 3
`Example 4
`Example 5
`Example 6
`Step 7 Exercise
`
`Step 8
`
`Write Clear Text and Messages
`Words, Sentences, Messages, and Text
`Readability
`Choosing the Proper Words
`Writing Sentences and Messages
`Kinds of Messages
`Presenting and Writing Text
`Window Title, Conventions, and Sequence Control Guidance
`Content and Text for Web Pages
`Words
`Page Text
`Page Title
`
`509
`509
`512
`514
`517
`517
`521
`524
`525
`526
`531
`531
`532
`533
`534
`535
`537
`539
`540
`542
`542
`543
`544
`547
`548
`552
`552
`553
`556
`557
`558
`559
`561
`
`563
`564
`564
`565
`568
`570
`578
`582
`584
`584
`585
`589
`
`MemoryWeb Ex. 2022
`Apple v. MemoryWeb – IPR2022-00032
`
`

`

`xiv Contents
`
`Step 9
`
`Step 10
`
`Step 11
`
`Headings and Headlines
`Instructions
`Error Messages
`Step 8 Exercise
`
`Provide Effective Feedback and Guidance and Assistance
`Providing the Proper Feedback
`Response Time
`Dealing with Time Delays
`Blinking for Attention
`Use of Sound
`Guidance and Assistance
`Preventing Errors
`Problem Management
`Providing Guidance and Assistance
`Instructions or Prompting
`Help Facility
`Contextual Help
`Task-Oriented Help
`Reference Help
`Wizards
`Hints or Tips
`Step 9 Exercise
`
`Provide Effective Internationalization and Accessibility
`International Considerations
`Localization
`Cultural Considerations
`Words and Text
`Images and Symbols
`Color, Sequence, and Functionality
`Requirements Determination and Testing
`Accessibility
`Types of Disabilities
`Accessibility Design
`Step 10 Exercise
`
`Create Meaningful Graphics, Icons, and Images
`Icons
`Kinds of Icons
`Characteristics of Icons
`Influences on Icon Usability
`Choosing Icons
`Choosing Icon Images
`Creating Icon Images
`Drawing Icon Images
`Icon Animation and Audition
`The Icon Design Process
`Screen Presentation
`
`589
`590
`590
`591
`
`593
`594
`594
`598
`601
`602
`603
`603
`604
`606
`608
`608
`613
`617
`619
`620
`622
`623
`
`625
`626
`626
`627
`628
`631
`633
`635
`635
`636
`636
`650
`
`651
`652
`652
`654
`654
`657
`659
`659
`664
`665
`667
`667
`
`MemoryWeb Ex. 2022
`Apple v. MemoryWeb – IPR2022-00032
`
`

`

`Contents xv
`
`Step 12
`
`Multimedia
`Graphics
`Images
`Photographs / Pictures
`Video
`Diagrams
`Drawings
`Animation
`Audition
`Combining Mediums
`Step 11 Exercise
`
`Choose the Proper Colors
`Color -- What Is It?
`RGB
`HSV
`Dithering
`Color Uses
`Color as a Formatting Aid
`Color as a Visual Code
`Other Color Uses
`Possible Problems with Color
`High Attention-Getting Capacity
`Interference with Use of Other Screens
`Varying Sensitivity of the Eye to Different Colors
`Color-Viewing Deficiencies
`Color Connotations
`Cross-Disciplinary and Cross-Cultural Differences
`Color -- What the Research Shows
`Color and Human Vision
`The Lens
`The Retina
`Choosing Colors
`Choosing Colors for Categories of Information
`Colors in Context
`Usage
`Discrimination and Harmony
`Emphasis
`Common Meanings
`Location
`Ordering
`Foregrounds and Backgrounds
`Three-Dimensional Look
`Color Palette, Defaults, and Customization
`Grayscale
`Text in Color
`Monochromatic Screens
`
`669
`669
`671
`676
`677
`678
`681
`681
`683
`686
`689
`
`692
`694
`694
`694
`695
`695
`696
`696
`696
`696
`697
`697
`697
`698
`700
`7O0
`701
`701
`701
`702
`703
`703
`704
`704
`706
`706
`707
`708
`708
`709
`710
`711
`712
`712
`
`MemoryWeb Ex. 2022
`Apple v. MemoryWeb – IPR2022-00032
`
`

`

`xvi Contents
`
`Consistency
`Considerations for People with Color-Viewing Deficiencies
`Cultural, Disciplinary, and Accessibility Considerations
`Choosing Colors for Textual Graphic Screens
`Effective Foreground / Background Combinations
`Choose the Background First
`Maximum of Four Colors
`Use Colors in Toolbars Sparingly
`Test the Colors
`Choosing Colors for Statistical Graphics Screens
`Emphasis
`Number of Colors
`Backgrounds
`Size
`Status
`Measurements and Area-Fill Patterns
`Physical Impressions
`Choosing Colors for Web Pages
`Uses of Color to Avoid
`Step 12 Exercise
`
`Step 13
`
`Step 14
`
`Organize and Layout Windows and Pages
`Organizing and Laying Out Screens
`General Guidelines
`Organization Guidelines
`Control Navigation
`Window Guidelines
`Web Page Guidelines
`Screen Examples
`Example 1
`Example 2
`
`Test, Test. and Retest
`Usability
`The Purpose of Usability Testing
`The Importance of Usability Testing
`Scope of Testing
`Prototypes
`Hand Sketches and Scenarios
`Interactive Paper Prototypes
`Programmed Facades
`Prototype-Oriented Languages
`Comparisons of Prototypes
`Kinds of Tests
`Guidelines and Standards Review
`Heuristic Evaluation
`Cognitive Walk-Throughs
`
`713
`713
`714
`714
`714
`717
`717
`718
`718
`718
`718
`718
`719
`719
`719
`719
`720
`721
`723
`725
`
`727
`728
`728
`729
`748
`749
`750
`761
`761
`762
`
`767
`768
`768
`769
`770
`771
`772
`774
`775
`776
`776
`777
`779
`780
`786
`
`MemoryWeb Ex. 2022
`Apple v. MemoryWeb – IPR2022-00032
`
`

`

`Think-Aloud Evaluations
`Usability Test
`Classic Experiments
`Focus Groups
`Choosing a Testing Method
`Developing and Conducting a Test
`The Test Plan
`Test Conduct and Data Collection
`Analyze, Modify, and Retest
`Evaluate the Working System
`Additional Reading
`A Final Word
`
`References
`
`Index
`
`Contents xvii
`
`788
`789
`790
`791
`792
`795
`795
`803
`806
`807
`809
`810
`
`811
`
`835
`
`MemoryWeb Ex. 2022
`Apple v. MemoryWeb – IPR2022-00032
`
`

`

` Prefa :e
`
`This third edition of The Essential Guide to User Interface Design is about designing clear,
`easy-to-understand-and-use interfaces and screens for graphical and Web systems. It
`is the eighth in a long series of books by the author addressing screen and interface
`design. Over the past two decades these books have evolved and expanded as inter-
`face technology has changed and research knowledge has expanded.
`The first book in the series, called The Handbook of Screen Format Design, was pub-
`lished in 1981. It presented a series of screen design guidelines for the text-based tech-
`nology of that era. Through the 1980s and early 1990s the book’s content was regularly
`updated to reflect current technology and published under different, but similar, titles.
`In 1994, graphical user interface, or GU1, systems having assumed interface domi-
`nance, the newest version of the book, which focused exclusively on graphical system
`interface design, was released. It was titled It’s Time to Clean Your Windows. The follow-
`on and updated version of It’s Ti~ne to Clean Your Windows was the first edition of this
`book, The Essential Guide to User Interface Design. The impetus for these newer editions
`of The Essential Gnide to User Interface Design has been the impact of the World Wide
`Web on interface and screen design. This new edition incorporates an extensive com-
`pilation of Web interface design guidelines, and updates significant general interface
`findings over the past several years.
`
`Is Good Design Important?
`
`Is good design important? It certainly is! Ask the users whose productivity improved
`25 to 40 percent as a result of well-designed screens, or the company that saved $20,000
`in operational costs simply by redesigning one window. (These studies are described
`in Chapter 1.)
`What comprises good design? To be truly effective, good screen design requires an
`understanding of many things. Included are the characteristics of people: how we see,
`
`xix
`
`MemoryWeb Ex. 2022
`Apple v. MemoryWeb – IPR2022-00032
`
`

`

`xx Preface
`
`understand, and think. It also includes how information must be visually presented to
`enhance human acceptance and comprehension, and how eye and hand movements
`must flow to minimize the potential for fatigu.e and injury. Good design must also con-
`sider the capabilities and limitations of the hardware and software of the human-com-
`puter interface.
`What does this book do? This book addresses interface and screen design from the
`user’s perspective, spelling out hundreds of guidelines for good design in a clear and
`concise manner. It blends the results of screen design research, knowledge concerning
`people, knowledge about the hardware and software capabilities of the interface, and
`my practical experience, which now spans 45 years in display-based systems.
`Looking ahead, an example of what this book will accomplish for you is illustrated
`in Figures P.1 through P.4. Figure P.1 is an actual interface screen. It looks bad but you
`do not realize how really horrible it is until you look at Figure P.2, a redesigned ver-
`sion. The same goes for Figure P.3, an original screen, and Figure P.4, a redesigned ver-
`sion. This book will present the rules for the redesigned screens, and the rationale and
`reasoning that explains why they are much friendlier. We’ll fully analyze these screens
`later in this text. Sprinkled throughout the pages will also be many other examples of
`good and bad design.
`
`Family times 0 helvelica 0 courier 0 sans serif
`
`Size
`
`small O medium 0
`
`large O
`
`Slyle underline [] bold []
`
`italic []
`
`Pitch
`
`10 CPI 0 1:~ CPI 0
`
`15 CPI 0 proportional 0
`
`Color blackO blue 0 red 0 green 0
`
`Border ~ 0
`
`0 ~0 ~
`
`Figure P.! An existing screen.
`
`MemoryWeb Ex. 2022
`Apple v. MemoryWeb – IPR2022-00032
`
`

`

`Preface xxi
`
`Family
`
`--Pitch
`
`- Border
`
`O Courier
`
`O Helvetica
`
`O Sans Serif
`
`O Times
`
`0 10 CPI
`0 ~2 cPi
`0 ~ ~
`0 Proportional
`
`Size
`
`Style
`
`i
`
`O Small
`
`0 Medium
`
`O Large
`
`[] Bold
`
`[-I Italic
`
`[-I Underline
`
`i
`
`Figure P.2 A redesigned screen.
`
`Program Filename:
`
`Window Title:
`
`Optional Parameters:
`
`Start-up Diredory:
`
`Color
`
`i
`
`Black
`
`Blue
`
`Green
`
`Red
`
`I
`
`Video Memory:
`
`0 Text
`
`0 Low Graphics
`
`0 High Graphics
`
`Memory Requirements: KB Required
`
`~ KB Desired
`
`EMS Memory:
`
`KB Required
`
`×MS Memory:
`
`KB Required
`
`] KB Limit
`
`Display Usage: O Full Screen
`
`Execution: O Background
`
`O Windowed
`
`O Exclusive
`
`[] Close Window on Exit
`
`Figure P,3 An existing screen.
`
`MemoryWeb Ex. 2022
`Apple v. MemoryWeb – IPR2022-00032
`
`

`

`xxii Preface
`
`The Purpose of This Book
`
`This book’s first objective is to present the important practical guidelines for good
`interface and screen design. It is intended as a ready reference source for all graphical
`and Web systems. The guidelines reflect a mix of human behavior, science, and art,
`and are organized within the context of the GUI design process. The specific objectives
`are to enable the reader to do the following:
`
`Understand the many considerations that must be applied to the interface and
`screen design process.
`
`Understand the rationale and rules for an effective interface design methodology.
`
`Identify the components of graphical and Web interfaces and screens, including
`windows, menus, and controls.
`
`Design and organize graphical screens and Web pages to encourage the fastest
`and most accurate comprehension and execution of screen features.
`
`Choose screen colors and design screen icons and graphics.
`
`Perform the user interface design process, including interface development and
`testing.
`
`The book’s other objective is to provide materials that, when applied, will allow our
`users to become more productive--and more satisfied--using the interfaces we pro-
`duce. A satisfied user also means, of course, a satisfied designer.
`
`How This Book Is Organized
`
`This book is composed of two parts. Part 1 provides an introduction to the human-
`computer interface. Chapter 1 examines what an interface is, its importance, and its
`history. Chapter 2 reviews the two dominant user interfaces today: the graphical user
`interface (GUI) and the World Wide Web (WWW or Web). GUI interfaces are looked at
`in terms of their components, characteristics, and advantages over the older text-based
`systems. Web interfaces are compared to both GUI interfaces and conventional printed
`documents. The differing characteristics of three distinct Web environments--the
`lntemet, intranet, and extranet--are also summarized. The second chapter concludes
`with a statement of the basic underlying principles for interface design.
`Part 2 presents an extensive series of guidelines for the interface design process. It is
`organized in the order of the development steps typically followed in creating a
`graphical system’s or Web site’s screens and pages. The 14 steps presented are:
`
`MemoryWeb Ex. 2022
`Apple v. MemoryWeb – IPR2022-00032
`
`

`

`Preface xxii|
`
`-APPLICATION
`
`Program Rlename:
`
`Window Title:
`
`Optional Parameters:
`
`Start-up Directo hi:.
`
`MEMORY
`REAL >
`
`Required:
`
`EMS ¯
`
`Required:
`
`XMS >
`
`Required:
`
`VIDEO ¯ Type:
`
`~KB Desired. [~]KB
`Limil:
`]KB
`[
`I
`Umi,:
`[
`I
`[ O Text O Low Graphics ~) High Graphics I
`
`IKB
`
`-Display Usage --
`
`"Execution
`
`Window
`
`0 Full Screen
`~) Windowed
`
`~) Background
`
`0 Exclusive
`
`[] Close on Exit
`
`Figure P.4 A redesigned screen.
`
`Step 1: Know Your User or Client. To begin, an understanding of the most impor-
`tant system or Web site component, the user or client, must be obtained.
`Understanding people and what they do is a critical and often difficult and
`undervalued process. The first step in the design process involves identifying
`people’s innate and learned characteristics, and understanding how they affect
`design.
`
`Step 2: Understand the Business Function. A system or Web site must achieve the
`business objectives for which it is designed. To do so requires an understanding
`of the goals of the system and the functions and tasks performed. Determining
`basic business functions, describing user activities through task analysis, under-
`standing the user’s mental model, and developing a conceptual model of the sys-
`tem accomplish this. The system’s conceptual model must fit the user’s view of
`the tasks to be performed. Step 2 also addresses the establishment of design stan-
`dards or style guides, and the definition of training and documentation needs.
`
`Step 3: Understand the Principles of Good Interface and Screen Design. A well-
`designed screen must reflect the needs and capabilities of its users, be developed
`within the physical constraints imposed by the hardware on which it is dis-
`played, and effectively utilize the capabilities of its controlling software. Step 3
`involves understanding the capabilities of, and limitations imposed by, people,
`hardware, and software in designing screens and Web pages. It presents an enor-
`mous number of general design guidelines for organizing and presenting infor-
`mation to people.
`
`MemoryWeb Ex. 2022
`Apple v. MemoryWeb – IPR2022-00032
`
`

`

`xxiv Preface
`
`Step 4: Develop System Menus and Navigation Schemes. Graphical systems and
`Websites are heavily menu-oriented. Menus are used to designate commands,
`properties that apply to an object, documents, and windows. To accomplish these
`goals, a variety of menu styles are available to choose from. Step 4 involves
`understanding how menus are used, and selecting the proper kinds for specific
`tasks. The principles of menu design are described, and the purpose and proper
`usage of various menu types are detailed. In this step guidelines for Web site nav-
`igation are also presented. Topics addressed include the elements of Web naviga-
`tion such as links, navigation aids, and search facilities.
`
`Step 5: Select the Proper Kinds of Windows. Graphical screen design consists of a
`series of windows. Step 5 involves understanding how windows are used and
`selecting the proper kinds for the tasks. The elements of windows are described,
`and the purpose and proper usage of various types of windows are detailed. The
`step concludes with a discussion of Web browsers.
`
`Step 6: Select the Proper Interaction Devices. In addition to the keyboard, a system
`or Web site might offer the user a mouse, trackball, joystick, graphic tablet, touch
`screen, light pen, or some other similar device. Step 6 consists of identifying the
`characteristics and capabilities of these various control mechanisms and provid-
`ing the proper ones for users and their tasks.
`
`Step 7: Choose the Proper Screen-Based Controls. The designer is presented with
`an array of controls to choose from. Selecting the right one for the user and the
`task is often difficult. But, as with interaction devices, making the right choice is
`critical to system success. A proper fit between user and control will lead to fast,
`accurate performance. A poor fit will result in lower productivity, more errors,
`and often user dissatisfaction. Step 7 consists of identifying the characteristics
`and capabilities of these various screen-based controls and guidelines for provid-
`ing the proper ones for users and their tasks.
`
`Step 8: Write Clear Text and Messages. Creating text and messages in a form the
`user wants and understands is absolutely necessary for system acceptance and
`success. Rules for writing text and messages for systems and Web sites are pre-
`sented.
`
`Step 9: Provide Effective Feedback and Guidance and Assistance. Effective feed-
`back and guidance and assistance are also necessary elements of good design.
`This step presents the guidelines for presenting to the user feedback concerning
`the system and its processing status. It also describes t