`Interface Guidelines
`
`Addison-Wesley Publishing Company
`
`Reading, Massachusetts Menlo Park, California New York
`Don Mills, Ontario Wokingham, England Amsterdam Bonn
`Sydney Singapore Tokyo Madrid San Juan
`Paris Seoul Milan Mexico City Taipei
`
`Thi d
`
`t
`
`t d ith F
`
`M k
`
`4 0 4
`
`CiM Ex. 1042 Page 1
`
`K
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`LIMITED WARRANTY ON MEDIA AND
`REPLACEMENT
`
`ALL IMPLIED WARRANTIES ON THIS
`MANUAL, INCLUDING IMPLIED
`WARRANTIES OF MERCHANTABILITY
`AND FITNESS FOR A PARTICULAR
`PURPOSE, ARE LIMITED IN DURATION
`TO NINETY (90) DAYS FROM THE DATE
`OF THE ORIGINAL RETAIL PURCHASE
`OF THIS PRODUCT.
`
`Even though Apple has reviewed this
`manual, APPLE MAKES NO WARRANTY
`OR REPRESENTATION, EITHER EXPRESS
`OR IMPLIED, WITH RESPECT TO THIS
`MANUAL, ITS QUALITY, ACCURACY,
`MERCHANTABILITY, OR FITNESS FOR A
`PARTICULAR PURPOSE. AS A RESULT,
`THIS MANUAL IS SOLD “AS IS,” AND
`YOU, THE PURCHASER, ARE ASSUMING
`THE ENTIRE RISK AS TO ITS QUALITY
`AND ACCURACY.
`
`IN NO EVENT WILL APPLE BE LIABLE
`FOR DIRECT, INDIRECT, SPECIAL,
`INCIDENTAL, OR CONSEQUENTIAL
`DAMAGES RESULTING FROM ANY
`DEFECT OR INACCURACY IN THIS
`MANUAL, even if advised of the possibility
`of such damages.
`
`THE WARRANTY AND REMEDIES SET
`FORTH ABOVE ARE EXCLUSIVE AND IN
`LIEU OF ALL OTHERS, ORAL OR
`WRITTEN, EXPRESS OR IMPLIED. No
`Apple dealer, agent, or employee is
`authorized to make any modification,
`extension, or addition to this warranty.
`
`Some states do not allow the exclusion or
`limitation of implied warranties or liability
`for incidental or consequential damages, so
`the above limitation or exclusion may not
`apply to you. This warranty gives you
`specific legal rights, and you may also have
`other rights which vary from state to state.
`
`K
`Apple Computer, Inc.
` 1995, Apple Computer, Inc.
`All rights reserved.
`No part of this publication may be
`reproduced, stored in a retrieval
`system, or transmitted, in any form or
`by any means, mechanical, electronic,
`photocopying, recording, or otherwise,
`without prior written permission of
`Apple Computer, Inc. Printed in the
`United States of America.
`No licenses, express or implied, are
`granted with respect to any of the
`technology described in this book.
`Apple retains all intellectual property
`rights associated with the technology
`described in this book. This book is
`intended to assist application
`developers to develop applications only
`for Apple Macintosh computers.
`Apple Computer, Inc.
`20525 Mariani Avenue
`Cupertino, CA 95014
`408-996-1010
`Apple, the Apple logo, APDA,
`AppleLink, AppleShare, AppleTalk,
`EtherTalk, HyperTalk, ImageWriter,
`LaserWriter, Macintosh, MultiFinder,
`and StyleWriter are trademarks of
`Apple Computer, Inc., registered in the
`United States and other countries.
`BalloonHelp, BalloonWriter, Finder,
`PowerBook, QuickDraw, ResEdit,
`System 7, and TrueType are trademarks
`of Apple Computer, Inc.
`Adobe Illustrator and PostScript are
`trademarks of Adobe Systems
`Incorporated, which may be registered
`in certain jurisdictions.
`AGFA is a trademark of Agfa-Gevaert.
`FrameMaker is a registered trademark
`of Frame Technology Corporation.
`Helvetica and Palatino are registered
`trademarks of Linotype Company.
`HyperCard, MacDraw, MacPaint, and
`MacWrite are registered trademarks of
`Claris Corporation.
`ITC Zapf Dingbats is a registered
`trademark of International Typeface
`Corporation.
`Varityper is a registered trademark
`of Varityper, Inc.
`Simultaneously published in the United
`States and Canada.
`
`ISBN 0-201-62216-5
`1 2 3 4 5 6 7 8 9-BA-9695949392
`First Printing, November 1992
`
`7
`
`The paper used in this book meets the
`EPA standards for recycled fiber.
`
`Thi d
`
`t
`
`t d ith F
`
`M k
`
`4 0 4
`
`CiM Ex. 1042 Page 2
`
`(cid:211)
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`Preface
`
`Contents
`
`Figures and Tables
`
`xiii
`
`xxi
`
`About This Book
`xxi
`Who Should Read This Book
`What’s New in Macintosh Human Interface From Apple
`About
`Making It Macintosh
`xxii
`What’s in This Book
`xxii
`The Basic Philosophy
`xxii
`The Interface Elements
`xxiii
`Appendixes
`xxiii
`Visual Cues Used in This Book
`
`xxiii
`
`xxii
`
`Part 1
`
`Fundamentals
`
`Chapter 1
`
`3
`
`4
`
`8
`
`Human Interface Principles
`The Human Interface Design Principles
`Metaphors
`4
`Direct Manipulation
`See-and-Point
`7
`7
`Consistency
`WYSIWYG (What You See Is What You Get)
`User Control
`9
`Feedback and Dialog
`Forgiveness
`10
`Perceived Stability
`Aesthetic Integrity
`Modelessness
`12
`Additional Issues to Consider
`Knowledge of Your Audience
`Accessibility
`14
`
`5
`
`9
`
`11
`11
`
`13
`13
`
`Chapter 2
`
`General Design Considerations
`Worldwide Compatibility
`16
`Cultural Values
`17
`Resources
`17
`
`15
`
`Thi d
`
`t
`
`t d ith F
`
`M k
`
`4 0 4
`
`iii
`
`CiM Ex. 1042 Page 3
`
`
`
`
`
`
`
`
`
`
`
`
`
`20
`
`18
`Language Differences
`19
`Text Display and Text Editing
`Default Alignment of Interface Elements
`Keyboards
`22
`Fonts
`23
`24
`Universal Access
`25
`People With a Physical Disability
`25
`People With a Visual Disability
`26
`People With a Hearing Disability
`People With a Speech or Language Disability
`People With a Seizure Disorder
`27
`Collaborative Computing
`27
`Concern for Other Users
`28
`User Identification
`28
`Access Privileges
`28
`Passwords
`29
`Data Encryption for Security
`Clear Communications
`30
`30
`Displaying the Current State of Data
`Communicating With Other Environments
`Network Transparency
`31
`
`30
`
`27
`
`31
`
`Chapter 3
`Process
`
`33
`
`Human Interface Design and the Development
`
`34
`Design Decisions
`Features Inspired by Market Pressures
`Feature Cascade
`35
`The 80 Percent Solution
`35
`Managing Complexity
`Using Progressive Disclosure
`Implementing Preferences
`Extending the Interface
`38
`When to Go Beyond the Guidelines
`Build on the Existing Interface
`39
`Don’t Assign New Behaviors to Existing Objects
`Create a New Interface Element Cautiously
`40
`Involving Users in the Design Process
`41
`Define Your Audience
`41
`Analyze Tasks
`41
`Build Prototypes
`42
`Observe Users
`Ten Steps for Conducting a User Observation
`
`34
`
`38
`
`39
`
`43
`
`35
`
`35
`
`37
`
`42
`
`iv
`
`CiM Ex. 1042 Page 4
`
`
`
`
`
`
`
`
`
`
`
`
`
`Part 2
`
`The Interface Elements
`
`Chapter 4
`
`49
`
`Menus
`52
`The Menu Bar
`55
`Menu Behavior
`58
`Menu Elements
`58
`Menu Item Names
`Grouping Items in Menus
`Menu Dividers
`62
`Standard Characters and Text Style in Menus
`Checkmarks and Dashes in Menus
`64
`67
`The Ellipsis Character in Menus
`A Diamond Mark in the Application Menu
`Avoid Nonstandard Marks in Menus
`72
`Text Styles in Menus
`73
`Toggled Menu Items
`75
`Scrolling Menus
`Hierarchical Menus
`82
`Pop-Up Menus
`Standard Pop-Up Menus
`Type-In Pop-Up Menus
`Tear-Off Menus and Palettes
`Tear-Off Menus
`93
`Palettes
`96
`Standard Macintosh Menus
`The Apple Menu
`98
`About
`98
`File Menu
`99
`99
`New
`101
`Open
`102
`Close
`104
`Save
`106
`Save As
`107
`Revert
`Page Setup… 108
`Print…
`108
`Quit
`109
`The Edit Menu
`The Clipboard
`Undo/Redo
`Cut
`114
`Copy
`115
`Paste
`115
`Clear
`117
`
`60
`
`87
`91
`
`92
`
`98
`
`78
`
`79
`
`109
`111
`113
`
`64
`
`71
`
`v
`
`CiM Ex. 1042 Page 5
`
`
`
`
`
`
`
`
`
`
`
`Chapter 5
`
`vi
`
`117
`
`117
`Select All
`Show Clipboard/Hide Clipboard
`Create Publisher… 117
`Subscribe To… 118
`Publisher/Subscriber Options… 118
`The Font Menu
`120
`The Size Menu
`122
`The Style Menu
`124
`The Help Menu
`125
`The Keyboard Menu
`The Application Menu
`Keyboard Equivalents
`
`125
`127
`128
`
`131
`
`134
`
`135
`
`143
`
`Windows
`134
`Window Appearance
`Document Window Controls
`Use of Color in Windows
`Utility Windows
`137
`Window Behaviors
`139
`The Active Window
`139
`Opening Windows
`141
`Window Display Order
`Window Positions
`146
`The Default Position on a Single Screen
`The Default Position on Multiple Screens
`Dialog Box and Alert Box Positions
`150
`Closing a Window
`152
`Moving a Window
`154
`Changing the Size of a Window
`Scrolling a Window
`158
`Scroll Bars
`158
`163
`Scrolling With the Scroll Arrows
`164
`Scrolling With the Gray Area
`Scrolling by Dragging the Scroll Box
`Automatic Scrolling
`166
`The Zoom Box and Window Behavior
`Splitting a Window
`170
`Window Pane Behavior
`One Split per Orientation
`
`147
`148
`
`156
`
`164
`
`168
`
`172
`173
`
`CiM Ex. 1042 Page 6
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`Chapter 6
`
`Chapter 7
`
`175
`
`179
`181
`
`186
`187
`
`Dialog Boxes
`178
`Modeless Dialog Boxes
`Modeless Dialog Box Appearance
`Modeless Dialog Box Behaviors
`Menu Bar Access
`181
`Accepting Changes in a Modeless Dialog Box
`Completing Commands
`184
`Movable Modal Dialog Boxes
`185
`Movable Modal Dialog Box Appearance
`Movable Modal Dialog Box Behaviors
`Menu Bar Access
`187
`Modal Dialog Boxes
`188
`Modal Dialog Box Appearance
`Modal Dialog Box Behaviors
`Menu Bar Access
`191
`Stacking Modal Dialog Boxes
`Alert Boxes
`193
`Alert Box Appearance
`Note Alert Boxes
`194
`Caution Alert Boxes
`195
`196
`Stop Alert Boxes
`196
`Basic Dialog Box Layout
`Keyboard Navigation in Dialog Boxes
`Dialog Box Messages
`199
`Standard File Dialog Boxes
`Save Changes Alert Box
`
`190
`191
`
`192
`
`198
`
`194
`
`200
`201
`
`203
`
`204
`
`Controls
`Standard Toolbox Controls
`Buttons
`204
`205
`Button Behavior
`206
`Button Names
`210
`Radio Buttons
`211
`Checkboxes
`Controls Not Supported by the Macintosh Toolbox
`Sliders
`214
`Little Arrows
`218
`Outline Triangles
`Other Elements for User Interaction
`Text Entry Fields
`219
`Scrolling Lists
`220
`
`216
`
`218
`
`182
`
`214
`
`vii
`
`CiM Ex. 1042 Page 7
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`Chapter 8
`
`Chapter 9
`
`viii
`
`223
`
`230
`
`231
`
`232
`
`233
`
`241
`
`242
`
`Icons
`224
`Why Icons Work
`227
`Limitations of Icons
`229
`Designing Effective Icons
`229
`Use Appropriate Metaphors
`Think About Worldwide Compatibility
`Avoid Text in Icons
`230
`Design for the Macintosh Display
`Use a Consistent Light Source
`232
`Optimize for Your Target Display
`Maintain a Consistent Visual Appearance in an
`Icon Family
`233
`Use Icon Elements Consistently
`The Finder Icon Family
`234
`An Icon Design Process
`236
`Black-and-White Icons
`238
`Color Icons
`238
`Icon Colors
`240
`240
`The Apple Icon Color Set
`Degradation of the Color Set Across Monitors
`Selection Mechanism for Color Icons
`241
`Color Labeling Mechanism for Color Icons
`Anti-Aliasing
`243
`244
`Small Icons
`Default and Custom Icons
`Application Icons
`246
`Document Icons
`247
`Stationery Pad Icons
`Query Document Icons
`Edition Icons
`250
`Preferences Icons
`Extension Icons
`251
`Control Panel Icons
`Movable Resource Icons
`Keyboard Icons
`252
`
`245
`
`248
`249
`
`250
`250
`
`252
`
`257
`
`Color
`Color Design of Standard Interface Elements
`Windows and Dialog Boxes
`258
`Menus
`260
`Pointers
`260
`Highlighting and Selection
`
`260
`
`258
`
`CiM Ex. 1042 Page 8
`
`
`
`
`
`
`
`
`
`
`
`Chapter 10
`
`261
`
`261
`Color Application Guidelines
`Match Complexity to the Level of User
`Design for the Macintosh
`262
`Design for Black and White First
`Limit the Number of Colors
`264
`Colors on Gray
`265
`Beware of Blue
`265
`Small Objects
`265
`Color for Categorizing Information
`
`263
`
`265
`
`267
`
`268
`
`272
`
`277
`
`278
`
`279
`
`279
`
`Behaviors
`The Pointing Device
`Mouse Actions
`271
`271
`Clicking
`Double-Clicking
`Pressing
`273
`Dragging
`274
`The Keyboard
`275
`Character Keys
`275
`Enter
`275
`Tab
`276
`Return
`276
`Delete (or Backspace)
`Clear
`277
`Escape
`277
`Modifier Keys
`Shift
`278
`Caps Lock
`Option
`280
`Command
`280
`Control
`Type-Ahead and Auto-Repeat
`International Keyboards
`281
`Arrow Keys
`281
`Appropriate Uses for the Arrow Keys
`Moving the Insertion Point
`282
`Moving the Insertion Point in Empty Documents
`Using Modifier Keys With Arrow Keys
`282
`Function Keys
`284
`Help
`285
`Forward Delete (Del)
`Home
`285
`End
`285
`Page Up
`Page Down
`
`280
`
`281
`
`285
`
`286
`286
`
`282
`
`ix
`
`CiM Ex. 1042 Page 9
`
`
`
`
`
`
`
`
`
`
`
`286
`Selecting
`288
`Selection Methods
`289
`Selection by Clicking
`289
`Selection by Dragging
`289
`Changing a Selection With Shift-Click
`Changing a Selection With Command-Click
`Selections in Text
`292
`Selecting With the Mouse
`Selecting Ranges
`294
`Selecting With the Arrow Keys
`Selections in Graphics
`297
`Selections in Arrays and Tables
`Editing Text
`300
`300
`Inserting Text
`300
`Deleting Text
`Replacing a Selection
`Intelligent Cut and Paste
`Editing Fields
`302
`
`293
`
`295
`
`298
`
`301
`
`301
`
`Language
`Style
`306
`307
`Terminology
`Developer Terms and User Terms
`Terms That Are Often Misused
`Click
`308
`Checkbox
`Document
`File
`308
`309
`Utility Window
`Labels for Interface Elements
`Dialog Box Messages
`310
`User Documentation
`313
`Online Help Systems
`314
`314
`Provide Concurrent Help
`314
`Provide Multiple Levels of Help
`Assist Users by Answering Their Questions
`Keep the Help System Simple
`316
`Design Online Help as an Interactive Coach
`Balloon Help
`316
`When to Use a Help Balloon
`How to Write a Balloon
`318
`Wording for Specific Balloon Types
`Buttons With Words
`319
`Menu Titles
`320
`Menu Items
`320
`
`305
`
`308
`308
`
`Chapter 11
`
`x
`
`307
`308
`
`309
`
`317
`
`319
`
`291
`
`315
`
`316
`
`CiM Ex. 1042 Page 10
`
`
`
`Appendix A
`
`Appendix B
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`321
`Radio Buttons
`321
`Checkboxes
`Groups of Checkboxes or Radio Buttons
`Tools in Palettes
`323
`Window Parts
`324
`Modal Dialog Box on the Screen
`Icons
`324
`Text Entry Boxes
`
`324
`
`325
`
`329
`
`330
`
`Resources
`Association for Computing Machinery (ACM)
`Communications of the ACM
`329
`SIGCHI
`329
`SIGGRAPH
`CSCW 330
`331
`Human Factors Society
`Human Factors Society Annual Meeting
`Human Factors
`331
`Human Factors Society Bulletin
`Apple Developer Information
`APDA
`332
`333
`Developer Support Center
`In-House Development Support
`develop
`333
`
`332
`332
`
`333
`
`335
`
`Bibliography
`Animation
`336
`Cognitive Psychology and Human Factors
`Color
`337
`338
`Environmental Design
`Graphic and Information Design
`Graphic Design and Drawing
`Icons and Symbols
`339
`Typography
`340
`History of Human Interface
`Human-Computer Design
`Consistency
`341
`Direct Manipulation
`Menus
`342
`342
`Metaphors
`Product Design
`Usability Testing
`
`339
`339
`
`340
`341
`
`341
`
`343
`343
`
`322
`
`329
`
`331
`
`336
`
`xi
`
`CiM Ex. 1042 Page 11
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`344
`
`347
`
`344
`User-Centered Design
`Human-Computer Interaction
`Language
`346
`346
`Programming
`347
`Special Applications
`Collaborative Computing
`Hypertext
`347
`Multimedia
`348
`Online Documentation and Online Help
`Universal Access
`349
`Visual Thinking
`349
`Worldwide Software
`
`350
`
`348
`
`351
`
`351
`
`354
`
`Checklist
`General Considerations
`Graphic Design
`353
`Color
`353
`Icons
`354
`Windows
`355
`Dialog Boxes
`357
`Alert Boxes
`357
`Scrolling
`358
`Menus
`359
`Pop-Up Menus
`Palettes and Tear-Off Menus
`Mouse Standards
`360
`Text
`360
`360
`Balloon Help
`Keyboard Equivalents
`Edition Manager
`361
`Documentation
`362
`
`359
`
`361
`
`Glossary
`
`363
`
`Index
`
`373
`
`Appendix C
`
`xii
`
`CiM Ex. 1042 Page 12
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`Figures and Tables
`
`Chapter 1
`
`Human Interface Principles
`
`3
`
`Figure 1-1
`Figure 1-2
`
`Figure 1-3
`
`6
`Direct manipulation
`An example of a bad message and an example of a helpful
`message
`10
`Don’t use arbitrary graphic elements
`
`12
`
`Chapter 2
`
`General Design Considerations
`
`15
`
`Figure 2-1
`Figure 2-2
`Figure 2-3
`
`Figure 2-4
`Figure 2-5
`Figure 2-6
`Figure 2-7
`Figure 2-8
`Figure 2-9
`
`18
`Menu bars in different languages
`20
`English and Arabic dialog boxes
`Dialog boxes with display rectangles that are different sizes and
`the same size
`21
`Right-to-left alignment of dialog box items
`The Keyboard menu
`23
`The boundaries of a font
`The Sound control panel
`28
`A shutdown message
`The AppleShare connect dialog box
`
`21
`
`29
`
`24
`26
`
`Chapter 3
`
`Human Interface Design and the Development Process
`
`33
`
`Figure 3-1
`Figure 3-2
`Figure 3-3
`Figure 3-4
`
`36
`An expanding dialog box
`Directions a window can expand
`An incorrect subpalette indicator
`A better subpalette indicator
`
`40
`
`37
`40
`
`Chapter 4
`
`Menus
`
`49
`
`Figure 4-1
`Figure 4-2
`Figure 4-3
`Figure 4-4
`Figure 4-5
`Figure 4-6
`Figure 4-7
`Figure 4-8
`Figure 4-9
`Figure 4-10
`Figure 4-11
`Figure 4-12
`Figure 4-13
`Figure 4-14
`Figure 4-15
`
`The standard order of actions
`A menu bar
`53
`53
`Three menu bars
`The Finder menu bar in six languages
`An unavailable menu
`55
`56
`Opening a menu
`A feedback technique
`A typical menu
`58
`59
`A menu with adjectives
`Command names properly capitalized
`Unavailable items aren’t highlighted
`Menus with appropriate groups
`61
`Grouping items in menus
`62
`Standard menu dividers
`63
`An inappropriate menu divider
`
`51
`
`63
`
`57
`
`54
`
`59
`60
`
`xiii
`
`Thi d
`
`t
`
`t d ith F
`
`M k
`
`4 0 4
`
`CiM Ex. 1042 Page 13
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`Figure 4-16
`Figure 4-17
`
`Figure 4-18
`
`Figure 4-19
`
`Figure 4-20
`Figure 4-21
`Figure 4-22
`
`Figure 4-23
`
`Figure 4-24
`Figure 4-25
`Figure 4-26
`Figure 4-27
`Figure 4-28
`Figure 4-29
`
`Figure 4-30
`Figure 4-31
`Figure 4-32
`Figure 4-33
`Figure 4-34
`Figure 4-35
`Figure 4-36
`Figure 4-37
`Figure 4-38
`
`Figure 4-39
`Figure 4-40
`Figure 4-41
`Figure 4-42
`Figure 4-43
`Figure 4-44
`Figure 4-45
`Figure 4-46
`Figure 4-47
`Figure 4-48
`Figure 4-49
`Figure 4-50
`Figure 4-51
`Figure 4-52
`Figure 4-53
`Figure 4-54
`Figure 4-55
`Figure 4-56
`Figure 4-57
`Figure 4-58
`Figure 4-59
`Figure 4-60
`
`xiv
`
`79
`
`82
`
`87
`
`95
`
`97
`
`99
`
`64
`A menu with text styles and an indicator
`A checkmark to indicate a choice in a mutually exclusive
`group
`65
`A checkmark to indicate a choice in an accumulating attribute
`group
`65
`Dashes to indicate partial attributes in an accumulating attribute
`group
`66
`67
`Several attributes in effect
`The ellipsis character means more information is required
`Don’t use the ellipsis character with a command that doesn’t
`require more information
`69
`The absence of the ellipsis character means no more information
`is required
`70
`The ellipsis character doesn’t mean an alert box appears
`The Application menu with a notification symbol
`72
`Don’t use arbitrary symbols in menus
`72
`A Style menu with text styles
`73
`74
`The effects of the two states of a Style menu item
`A menu with nonstandard marks and extraneous text styles and a
`menu all in plain text style
`75
`A set of toggled menu items
`76
`A single toggled menu item whose name changes
`An ambiguous toggled menu item
`77
`An incorrect use of a checkmark to indicate a state
`A scrolling menu
`78
`The menu scrolling in the other direction
`A hierarchical menu
`79
`80
`Don’t use submenus unnecessarily
`A menu bar on a 9-inch screen with space for more menu
`titles
`81
`81
`Examples of submenu titles
`Avoid more than one level of submenus
`A pop-up menu and its parts
`83
`84
`Opening a pop-up menu
`85
`Pop-up menus versus radio buttons
`86
`Pop-up menus versus checkboxes
`Don’t use pop-up menus for commands
`A standard pop-up menu
`87
`88
`Using a pop-up menu
`Correct and incorrect use of fonts in pop-up menus
`Pop-up menu behavior
`90
`A hidden pop-up menu
`91
`A type-in pop-up menu
`92
`A type-in pop-up menu with user’s choice added
`A tools palette and a color palette
`93
`Using a tear-off menu
`94
`A tear-off menu on top of a document window
`Palettes and feedback
`96
`A tool palette with the corresponding pointers
`A tool palette in a window
`97
`An Apple menu
`98
`An About dialog box for an application
`
`68
`
`71
`
`76
`
`78
`
`89
`
`92
`
`CiM Ex. 1042 Page 14
`
`
`
`Figure 4-61
`Figure 4-62
`Figure 4-63
`Figure 4-64
`Figure 4-65
`Figure 4-66
`Figure 4-67
`Figure 4-68
`Figure 4-69
`Figure 4-70
`Figure 4-71
`Figure 4-72
`Figure 4-73
`Figure 4-74
`Figure 4-75
`
`Figure 4-76
`Figure 4-77
`Figure 4-78
`Figure 4-79
`Figure 4-80
`Figure 4-81
`Figure 4-82
`Figure 4-83
`Figure 4-84
`Figure 4-85
`Figure 4-86
`Figure 4-87
`Figure 4-88
`Figure 4-89
`Table 4-1
`Table 4-2
`
`Table 4-3
`
`Chapter 5
`
`Windows
`
`131
`
`Figure 5-1
`Figure 5-2
`Figure 5-3
`Figure 5-4
`Figure 5-5
`Figure 5-6
`Figure 5-7
`Figure 5-8
`Figure 5-9
`Figure 5-10
`Figure 5-11
`Figure 5-12
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`101
`
`105
`
`104
`
`110
`
`99
`A File menu
`100
`The New command
`The standard file dialog box for opening files
`The save changes alert box
`103
`The correct location of the save changes alert box
`The Save command
`105
`A sample alert box to use when a disk is full
`The Save As command and dialog box
`106
`The Revert command
`107
`A Page Setup dialog box
`108
`A Print dialog box
`109
`A standard Edit menu for an application
`110
`Adding commands to the Edit menu
`A sample Edit menu with Edition Manager commands
`A sample hierarchical Edit menu with Edition Manager
`commands
`111
`The Clipboard
`112
`114
`The Undo and Redo commands
`116
`The results of using the Paste command
`The Create Publisher command and dialog box
`The Subscribe To command and dialog box
`The Publisher Options dialog box
`119
`The Subscriber Options dialog box
`119
`A Font menu
`121
`Don’t combine the Font menu with other menus
`A Size menu
`122
`A sample pull-down Size menu and font size dialog box
`A Style menu
`124
`The Help menu
`125
`126
`The Keyboard menu
`Apple-reserved keyboard equivalents for all systems
`Additional reserved keyboard equivalents for worldwide
`systems
`128
`Common keyboard equivalents that are not reserved
`
`118
`
`118
`
`122
`
`111
`
`123
`
`128
`
`129
`
`133
`134
`
`Examples of standard windows
`Standard document window parts
`Windows on a color screen
`135
`136
`Standard window components in color
`Colors that the user can choose for windows
`A utility window
`137
`Make it clear where text will appear
`The active window
`139
`141
`Don’t show a selection in an inactive window
`Appropriate window titles for a series of unnamed windows
`Examples of correct and incorrect window titles
`143
`Display order of document windows and modeless dialog
`boxes
`144
`
`137
`
`138
`
`142
`
`xv
`
`CiM Ex. 1042 Page 15
`
`
`
`Figure 5-13
`Figure 5-14
`Figure 5-15
`Figure 5-16
`Figure 5-17
`Figure 5-18
`Figure 5-19
`Figure 5-20
`Figure 5-21
`Figure 5-22
`Figure 5-23
`Figure 5-24
`Figure 5-25
`Figure 5-26
`Figure 5-27
`Figure 5-28
`Figure 5-29
`Figure 5-30
`
`Figure 5-31
`Figure 5-32
`Figure 5-33
`Figure 5-34
`Figure 5-35
`Figure 5-36
`Figure 5-37
`Figure 5-38
`Figure 5-39
`Figure 5-40
`Figure 5-41
`Figure 5-42
`
`146
`
`148
`
`149
`
`151
`
`154
`
`156
`
`158
`
`145
`Adding floating windows to the desktop
`Adding a movable modal dialog box to the desktop
`Window positions on a single screen
`147
`The standard window position on two sizes of screens
`The standard window position on multiple screens
`A window displayed across two screens
`150
`Standard position of an alert box
`151
`Alert box position in relation to the active document window
`Standard alert box position with more than one screen
`152
`The close box
`153
`The save changes alert box
`Moving a window
`155
`Multiple monitors and conceptual work space
`A window growing larger
`157
`Relationship between a window and a document
`The elements of a scroll bar
`159
`159
`Using scroll arrows and the scroll box
`Inactive scroll bars in active and inactive document
`windows
`160
`Background between the content and the window frame
`Acceptable additions to the scroll bar region
`162
`Too many controls in the scroll bar
`162
`Scrolling by clicking a scroll arrow
`163
`Scrolling by clicking in the gray area
`164
`Scrolling by dragging the scroll box
`165
`Automatic scrolling
`166
`The zoom box
`168
`The standard state and the user state of a document
`A split window
`171
`Split bar size
`171
`Independent and locked scrolling of window panes
`
`161
`
`169
`
`172
`
`Chapter 6
`
`Dialog Boxes
`
`175
`
`Figure 6-1
`Figure 6-2
`Figure 6-3
`Figure 6-4
`Figure 6-5
`Figure 6-6
`
`Figure 6-7
`Figure 6-8
`Figure 6-9
`Figure 6-10
`Figure 6-11
`
`Figure 6-12
`Figure 6-13
`Figure 6-14
`
`xvi
`
`177
`178
`
`Examples of dialog box types
`A typical modeless dialog box
`179
`Two open modeless dialog boxes
`180
`The essential elements of a modeless dialog box
`181
`Incorrect absence of a close box in a modeless dialog box
`Provide a place for the user to enter information in a modeless
`dialog box
`184
`185
`A typical movable modal dialog box
`The essential elements of a movable modal dialog box
`Close box used incorrectly in a movable modal dialog box
`A Finder movable modal dialog box
`187
`Menu bar access while a movable modal dialog box is
`open
`188
`An example of a modal dialog box
`A status dialog box
`190
`The essential elements of a modal dialog box
`
`186
`187
`
`189
`
`190
`
`CiM Ex. 1042 Page 16
`
`
`
`Figure 6-15
`
`Figure 6-16
`Figure 6-17
`Figure 6-18
`Figure 6-19
`Figure 6-20
`Figure 6-21
`
`Figure 6-22
`Figure 6-23
`Figure 6-24
`Figure 6-25
`
`Chapter 7
`
`Controls
`
`203
`
`Figure 7-1
`Figure 7-2
`Figure 7-3
`Figure 7-4
`Figure 7-5
`Figure 7-6
`Figure 7-7
`Figure 7-8
`Figure 7-9
`Figure 7-10
`Figure 7-11
`Figure 7-12
`Figure 7-13
`Figure 7-14
`Figure 7-15
`Figure 7-16
`Figure 7-17
`Figure 7-18
`Figure 7-19
`Figure 7-20
`
`Chapter 8
`
`Icons
`
`223
`
`Figure 8-1
`Figure 8-2
`Figure 8-3
`Figure 8-4
`
`Figure 8-5
`Figure 8-6
`Figure 8-7
`Figure 8-8
`Figure 8-9
`Figure 8-10
`
`193
`
`Access to the Edit menu when displaying a modal dialog
`box
`191
`Second modal dialog box on top of first one
`The essential elements of an alert box
`194
`An example of a note alert box
`195
`An example of a caution alert box
`195
`An example of a stop alert box
`196
`Recommended spacing of buttons and text in dialog and alert
`boxes
`197
`198
`An active scrolling list
`199
`A well-written dialog box message
`The standard file dialog box for opening files
`The save changes alert box
`201
`
`200
`
`205
`Buttons in a dialog box
`205
`A highlighted button
`207
`A dialog box with OK and Cancel buttons
`A dialog box with a Done button instead of an OK button
`A progress indicator that uses a Stop button
`209
`A confirmation alert box with appropriately named button
`Sets of radio buttons
`210
`Radio buttons for selecting the alignment of text
`The General Controls panel
`211
`A set of checkboxes
`212
`A single checkbox in a dialog box
`The Find dialog box
`213
`An example of a slider
`214
`215
`A slider with direction information
`Incorrect use of a scroll bar and correct use of a slider
`Little arrows control
`216
`Content-dependent increment
`Outline triangle control
`218
`A text entry field
`219
`A scrolling list
`220
`
`212
`
`217
`
`211
`
`208
`
`209
`
`215
`
`224
`Common icons
`225
`Examples of common traffic symbols
`Examples of commonly-used international symbols
`Symbols are easier to understand than keyboard
`commands
`226
`Grouping icons on the desktop
`A confusing image
`227
`Context clarifies the image
`Icons with label text
`228
`A logical and an illogical metaphor
`Localized mailbox icons
`230
`
`226
`
`227
`
`229
`
`225
`
`xvii
`
`CiM Ex. 1042 Page 17
`
`
`
`Figure 8-11
`Figure 8-12
`Figure 8-13
`Figure 8-14
`Figure 8-15
`
`Figure 8-16
`Figure 8-17
`Figure 8-18
`Table 8-1
`Figure 8-19
`Figure 8-20
`Figure 8-21
`Figure 8-22
`Figure 8-23
`Figure 8-24
`Figure 8-25
`Figure 8-26
`Figure 8-27
`Figure 8-28
`Figure 8-29
`Figure 8-30
`Figure 8-31
`Figure 8-32
`Figure 8-33
`Figure 8-34
`
`Figure 8-35
`Figure 8-36
`Figure 8-37
`Figure 8-38
`Figure 8-39
`Figure 8-40
`Figure 8-41
`Figure 8-42
`Figure 8-43
`Figure 8-44
`Figure 8-45
`Figure 8-46
`Figure 8-47
`Figure 8-48
`Table 8-2
`Figure 8-49
`
`231
`
`234
`
`235
`238
`238
`
`240
`
`231
`Avoid text in icons
`Certain shapes don’t work well
`A consistent light source
`232
`Inconsistent light sources
`232
`Design the large icon first and base the small icon
`design on it
`233
`Consistent use of icon elements
`An icon family
`234
`235
`Different sizes of icons
`Icon display on monitors of different bit depths
`A well-designed icon and its selected version
`A poorly designed icon and its selected version
`Icons with a black outline
`239
`Icons without a black outline
`239
`Standard 256-color palette with icon colors marked
`An example of dithered color in an icon
`241
`Color icons and their selected states
`242
`Color icons and their color-labeled states
`Correct anti-aliasing
`243
`Consistently designed small icons
`Inconsistently designed small icons
`Default application icons
`246
`Custom application icons
`246
`Examples of bad application icons
`Default document icons
`247
`Application icon and document icon with the same
`graphic element
`247
`Acceptable and unacceptable custom document icons
`Document icons with standard symbols
`248
`Default stationery pad icons
`249
`Default query document icons
`249
`Default edition icons
`250
`Preferences file icons
`250
`Default extension icons
`251
`251
`Examples of Chooser icons
`Icons for the Color control panel
`Font icons
`252
`A sound icon
`252
`The default keyboard layout and input method icons
`Examples of keyboard icons
`253
`Examples of modification indicators on keyboard icons
`Pattern substitutions for colors in keyboard icons
`254
`Enlarged keyboard icons with correct color substitutions
`
`243
`
`244
`245
`
`247
`
`251
`
`248
`
`253
`
`254
`
`255
`
`Chapter 9
`
`Color
`
`257
`
`Figure 9-1
`Figure 9-2
`Figure 9-3
`Figure 9-4
`
`259
`A colorized window
`A colorized movable modal dialog box
`Color palette and custom color mixing tool
` Design for black-and-white monitors first
`
`259
`
`262
`263
`
`xviii
`
`CiM Ex. 1042 Page 18
`
`
`
`Figure 9-5
`Figure 9-6
`
`Don’t mimic color effects in black-and-white designs
`A limited palette of colors
`264
`
`263
`
`Chapter 10
`
`Behaviors
`
`267
`
`Figure 10-1
`Figure 10-2
`Table 10-1
`Figure 10-3
`Figure 10-4
`Figure 10-5
`Figure 10-6
`Figure 10-7
`Figure 10-8
`Figure 10-9
`Figure 10-10
`Figure 10-11
`Figure 10-12
`Table 10-2
`
`Figure 10-13
`Figure 10-14
`Figure 10-15
`Figure 10-16
`Figure 10-17
`
`Figure 10-18
`Figure 10-19
`Figure 10-20
`Figure 10-21
`Figure 10-22
`Figure 10-23
`Figure 10-24
`Figure 10-25
`Figure 10-26
`Figure 10-27
`Figure 10-28
`
`269
`
`272
`
`287
`
`292
`
`268
`Different pointing devices
`The insertion point and the pointer
`Pointers
`270
`271
`A status indicator
`272
`Clicking a button
`Double-clicking to select a word
`Pressing a scroll arrow
`273
`274
`Dragging to move an object
`276
`Using the Tab key to cycle through fields
`Using the Return key to move the insertion point
`A sample confirmation dialog box for the Escape key
`Using Option-drag to make a copy of an object
`279
`Arrow keys
`281
`How modifier keys change the movement of the insertion point with
`the arrow keys
`283
`The function keys
`284
`Three ways of selecting information
`Selection techniques
`288
`290
`Expanding and shrinking a text selection
`Extending text selections using the addition and fixed-point
`methods
`290
`Discontinuous selection within an array
`Text selections
`293
`296
`Selecting with Shift and arrow keys
`296
`Selecting with Option-Shift and arrow keys
`Selection in an object-based graphics document
`Selection in a bitmap-based graphics document
`Field selection in an array
`298
`Column selection in an array
`298
`Range selection in an array
`299
`Discontinuous selection in an array
`Intelligent cut and paste
`302
`
`277
`
`278
`
`297
`297
`
`299
`
`Chapter 11
`
`Language
`
`305
`
`Table 11-1
`Figure 11-1
`Figure 11-2
`Figure 11-3
`Figure 11-4
`Figure 11-5
`Figure 11-6
`Figure 11-7
`Table 11-2
`Figure 11-8
`
`307
`309
`
`Translation chart for user documentation
`Proper capitalization of screen elements
`Clear button names
`310
`311
`A poorly written alert box message
`311
`An improved alert box message
`311
`A well-written alert box message
`Correct absence of a colon to introduce a list of options
`Correct use of a colon
`312
`Categories of questions for help systems
`A help balloon
`316
`
`315
`
`312
`
`xix
`
`CiM Ex. 1042 Page 19
`
`
`
`319
`Help balloon for a button
`320
`Help balloon for a menu title
`320
`Help balloon for a menu item
`Help balloon for a selected radio button
`Help balloon for a checkbox
`322
`Help balloon for a group of radio buttons
`Help balloon for a tool palette
`323
`Help balloons for an application icon and a document icon
`Help balloon for a text entry box
`325
`
`323
`
`321
`
`324
`
`Figure 11-9
`Figure 11-10
`Figure 11-11
`Figure 11-12
`Figure 11-13
`Figure 11-14
`Figure 11-15
`Figure 11-16
`Figure 11-17
`
`xx
`
`CiM Ex. 1042 Page 20
`
`
`
`
`
`
`
`
`
`
`
`
`C H A P T E R 9
`
`Figure 9-0
`Listing 9-0
`Table 9-0
`
`Color
`
`9
`
`9
`
`Thi d
`
`t
`
`t d ith F
`
`M k
`
`4 0 4
`
`257
`
`CiM Ex. 1042 Page 21
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`C H A P T E R 9
`
`Color
`
`This chapter presents information on how to use color in the Macintosh
`interface as well as in applications that deal with color. Apple’s goal in adding
`color to the interface is to enhance meaning, not just to color things to
`improve aesthetics. If used carefully, color can be a valuable additional
`channel of information to the user.
`Ultimately, color is the domain of the user. The user should control color in
`most cases, modifying or removing any color scheme that your application
`uses as a default. To implement color successfully in an application, you need
`to understand some of the complex issues surrounding its use. There are
`many books available on the use of color. This chapter covers the basic
`issues of color that relate to its implementation in the Macintosh interface
`and applications.
`
`User Control
`
`Color Design of Standard Interface Elements
`
`9
`
`Aesthetic Integrity
`
`This section describes the use of color with standard Macintosh interface
`elements and provides recommendations about how your application can fit
`in with the color scheme of system software.
`The appearance of the Macintosh interface elements is enhanced by the color
`capabilities of the Macintosh. Color distinguishes the active window from
`other windows and enhances user controls on the window frame. Color in the
`interface should help users focus their attention on their work not draw
`attention to the interface itself. In general, the use of color makes the interface
`more visually pleasing.
`
`9
`
`Windows and Dialog Boxes
`The windows and dialog boxes in System 7 are designed for aesthetic
`consistency across all monitors from black-and-white displays to 8-bit color
`displays. For display on color monitors,