Inside Mac OS X
Aqua Human Interface Guidelines
October 2001
Apple Computer, Inc. trademarks of Apple Computer, Inc., © 2001 Apple Computer, Inc. registered in the United States and All rights reserved. other countries. No part of this publication may be Balloon Help, Carbon, Finder, iMac, reproduced, stored in a retrieval iMovie, and ResEdit are trademarks system, or transmitted, in any form or of Apple Computer, Inc. by any means, mechanical, electronic, Objective-C is a trademark of NeXT photocopying, recording, or Software, Inc., registered in the otherwise, without prior written United States and other countries. permission of Apple Computer, Inc., Java is a trademark of Sun with the following exceptions: Any Microsystems, Inc., registered in the person is hereby authorized to store U.S. and other countries. documentation on a single computer Simultaneously published in the for personal use only and to print United States and Canada copies of documentation for personal use provided that the documentation Even though Apple has reviewed this contains Apple’s copyright notice. manual, APPLE MAKES NO WARRANTY OR REPRESENTATION, The Apple logo is a trademark of EITHER EXPRESS OR IMPLIED, WITH Apple Computer, Inc. RESPECT TO THIS MANUAL, ITS Use of the “keyboard” Apple logo QUALITY, ACCURACY, (Option-Shift-K) for commercial MERCHANTABILITY, OR FITNESS purposes without the prior written FOR A PARTICULAR PURPOSE. AS A consent of Apple may constitute RESULT, THIS MANUAL IS SOLD “AS trademark infringement and unfair IS,” AND YOU, THE PURCHASER, ARE competition in violation of federal ASSUMING THE ENTIRE RISK AS TO and state laws. ITS QUALITY AND ACCURACY. No licenses, express or implied, are granted with respect to any of the IN NO EVENT WILL APPLE BE LIABLE technology described in this book. FOR DIRECT, INDIRECT, SPECIAL, Apple retains all intellectual property INCIDENTAL, OR CONSEQUENTIAL rights associated with the technology DAMAGES RESULTING FROM ANY described in this book. This book is DEFECT OR INACCURACY IN THIS intended to assist application MANUAL, even if advised of the developers to develop applications possibility of such damages. only for Apple-labeled or THE WARRANTY AND REMEDIES SET Apple-licensed computers FORTH ABOVE ARE EXCLUSIVE AND Every effort has been made to ensure IN LIEU OF ALL OTHERS, ORAL OR that the information in this document WRITTEN, EXPRESS OR IMPLIED. No is accurate. Apple is not responsible Apple dealer, agent, or employee is for typographical errors. authorized to make any modification, Apple Computer, Inc. extension, or addition to this warranty. 1 Infinite Loop Some states do not allow the exclusion or Cupertino, CA 95014 limitation of implied warranties or 408-996-1010 liability for incidental or consequential Apple, the Apple logo, AirPort, damages, so the above limitation or AppleScript, AppleTalk, exclusion may not apply to you. This AppleWorks, Aqua, Cocoa, Final Cut warranty gives you specific legal rights, Pro, FireWire, Keychain, Mac, and you may also have other rights which Macintosh, QuickDraw, QuickTime, vary from state to state. Sherlock, and WorldScript are
Contents
Figures and Tables 13
Chapter 1 Introduction to the Aqua Human Interface Guidelines 19 The Benefits of Applying the Interface Guidelines 20 Tools for Applying the Guidelines 20 If You Have a Need Not Covered by the Guidelines 22 What’s New in Aqua 23 Filename Extension Hiding 25
Chapter 2 Human Interface Design 27 Human Interface Design Principles 27 Metaphors 27 Direct Manipulation 28 See-and-Point 28 Consistency 29 WYSIWYG (What You See Is What You Get) 29 User Control 30 Feedback and Dialog 30 Forgiveness 31 Perceived Stability 31 Aesthetic Integrity 31 Modelessness 32 Knowledge of Your Audience 33 Worldwide Compatibility 33 Cultural Values 34 Language Differences 34 Text Display and Text Editing 35 Default Alignment of Interface Elements 35 Resources 36
3 Apple Computer, Inc. October 2001
CONTENTS
Universal Accessibility 36 Visual Disabilities 37 Hearing Disabilities 37 Physical Disabilities 38
Chapter 3 The Dock 39 Dock Notification Behavior 39 Dock Menus 40 Clicking in the Dock 41
Chapter 4 Menus 43 What’s New in Aqua 43 Menu Elements 45 Menu Titles 45 Menu Items 46 Grouping Items in Menus 46 Menu Behavior 48 Scrolling Menus 48 Toggled Menu Items 49 Hierarchical Menus (Submenus) 50 Sticky Menus 51 Standard Pull-Down Menus (The Menu Bar) 51 The Apple Menu 52 The Application Menu 53 The Application Menu Title 54 The Application Menu Contents 55 The File Menu 55 The Edit Menu 58 The View Menu 60 The Window Menu 60 The Help Menu 61 Menu Bar Status Items 61 Contextual Menus 62
4 Apple Computer, Inc. October 2001
CONTENTS
Using Special Characters and Text Styles in Menus 63 Using Symbols in Menus 63 Using Ellipses in Menus 64 Using Text Styles and Fonts in Menus 65
Chapter 5 Windows 67 What’s New in Aqua 68 Window Appearance and Behavior 69 Opening and Naming Windows 70 Positioning Windows 73 Closing Windows 76 Moving Windows 77 Resizing and Zooming Windows 77 Active and Inactive Windows 78 Click-Through 78 Scrolling Windows 81 Automatic Scrolling 83 Minimizing and Expanding Windows 84 Windows With Changeable Panes 84 Special Windows 85 Drawers 85 When to Use Drawers 86 Drawer Behavior 86 Utility Windows 87 The About Window 88
Chapter 6 Dialogs 91 What’s New in Aqua 91 Types of Dialogs and When to Use Them 92 Document-Modal Dialogs (Sheets) 93 Sheet Behavior 94 When to Use Sheets 94 When Not to Use Sheets 95 Alerts 95
5 Apple Computer, Inc. October 2001
CONTENTS
Dialog Behavior 98 Accepting Changes 98 The Open Dialog 99 Saving, Closing, and Quitting Behavior 101 Save Dialogs 102 Closing a Document With Unsaved Changes 105 Saving Documents During a Quit Operation 106 Saving a Document With the Same Name as an Existing Document 109 The Choose Dialog 110 The Printing Dialogs 112
Chapter 7 Controls 115 What’s New in Aqua 115 Control Behavior and Appearance 116 Push Buttons 116 Push Button Specifications 117 Radio Buttons and Checkboxes 118 Radio Button and Checkbox Specifications 119 Selections Containing More Than One Checkbox State 119 Pop-Up Menus 120 Pop-Up Menu Specifications 122 Command Pop-Down Menus 123 Combination Boxes 123 Combo Box Specifications 124 The Text Entry Field 125 The Pop-Up Menu or Scrolling List 125 Placards 126 Bevel Buttons 126 Bevel Button Specifications 127 Pop-Up Icon Buttons and Pop-Up Bevel Buttons 128 Slider Controls 131 Slider Control Specifications 131 Tab Controls 132 Tab Control Specifications 133 Progress Indicators and Relevance Controls 135
6 Apple Computer, Inc. October 2001
CONTENTS
Text Fields and Scrolling Lists 137 Tools for Creating Lists 138 Text Input Field Specifications 139 Scrolling List Specifications 140 Image Wells 140 Disclosure Triangles 141
Chapter 8 Layout Guidelines 143 Positioning Controls in Dialogs and Windows 143 Group Boxes 144 Sample Dialog Layouts 147 Using Small Versions of Controls 153
Chapter 9 User Input 155 What’s New in Aqua 155 The Mouse and Other Pointing Devices 156 Using the Mouse 156 Clicking 157 Double-Clicking 157 Pressing 157 Dragging 158 The Keyboard 158 The Functions of Specific Keys 159 Character Keys 159 Modifier Keys 161 Arrow Keys 162 Function Keys 167 Keyboard Focus and Navigation 168 Keyboard Equivalents 172 Creating Your Own Keyboard Equivalents 174 Type-Ahead and Auto-Repeat 176 Selecting 176 Selection Methods 177 Selection by Clicking 178
7 Apple Computer, Inc. October 2001
CONTENTS
Selection by Dragging 178 Changing a Selection With Shift-Click 179 Changing a Selection With Command-Click 180 Selections in Text 181 Selecting With the Mouse 181 What Constitutes a Word 182 Selecting Text With the Arrow Keys 183 Selections in Graphics 183 Selections in Arrays and Tables 183 Editing Text 184 Inserting Text 184 Deleting Text 184 Replacing a Selection 185 Intelligent Cut and Paste 185 Editing Text Fields 186 Entering Passwords 187
Chapter 10 Fonts 189
Chapter 11 Icons 191 What’s New in Aqua 191 More Realistic Icons 191 Icon Genres and Families 192 Types of Icons 194 Application Icons 194 User Application Icons 194 Viewer, Player, and Accessory Icons 196 Utility Icons 197 Non-Application Icons 197 Document Icons 197 Icons for Preferences and Plug-ins 199 Icons for Hardware and Removable Media 199 Toolbar Icons 201 Icon Perspectives 202
8 Apple Computer, Inc. October 2001
CONTENTS
Icon Materials 204 Conveying an Emotional Quality in Icons 205 Suggested Process for Creating Aqua Icons 206 Tips for Designing Aqua Icons 207
Chapter 12 Drag and Drop 209 Drag and Drop Design Overview 209 Drag and Drop Semantics 210 Move Versus Copy 210 When to Check the Option Key State 211 Selection Feedback 212 Single-Gesture Selection and Dragging 212 Background Selections 212 Drag Feedback 213 Destination Feedback 213 Windows 213 Text 214 Multiple Dragged Items 214 Automatic Scrolling 215 Using the Trash as a Destination 215 Drop Feedback 215 Finder Icons 216 Graphics 216 Text 216 Transferring a Selection 216 Feedback for an Invalid Drop 217 Clippings 217
Chapter 13 Help 219 What’s New in Aqua 219 Apple’s Philosophy of Help 220 Help Viewer 221 Providing Access to Help 222
9 Apple Computer, Inc. October 2001
CONTENTS
Help Tags 222 Help Tag Guidelines 223 Setup Assistants 225
Chapter 14 Language 229 Style 229 Terminology 230 Developer Terms and User Terms 230 Labels for Interface Elements 230 Capitalization of Interface Elements 231 Using Contractions in the Interface 232 Writing Good Alert Messages 232
Chapter 15 File Location 235 Predefined User Domain Directories 235
Appendix A Checklist for Creating Aqua Applications 237 General Considerations 237 Graphic Design 239 Menus 240 Pop-Up Menus 241 Windows 241 Scrolling 242 Utility Windows 243 Dialogs 243 Alerts 245 The Mouse 245 Keyboard Equivalents 246 Text 246 Icons 247 User Documentation 247 Help Tags 248
10 Apple Computer, Inc. October 2001
CONTENTS
Appendix B Mac OS X Terminology Guidelines 249
Appendix C Document Revision History 261
Glossary 265
Index 273
11 Apple Computer, Inc. October 2001
CONTENTS
12 Apple Computer, Inc. October 2001
Figures and Tables
Chapter 3 The Dock 39 Figure 3-1 An example of a badged Dock icon: The Mail application icon indicates there are unread messages 40 Figure 3-2 The iTunes Dock icon menu 41
Chapter 4 Menus 43 Figure 4-1 The menu bar 44 Figure 4-2 A pull-down menu and its parts 45 Figure 4-3 Grouping items in menus 47 Figure 4-4 Avoid ambiguous toggled menu items 49 Figure 4-5 A hierarchical menu 50 Figure 4-6 The menu bar displayed when the Finder is active 51 Figure 4-7 The Apple menu 53 Figure 4-8 The Mail application menu 54 Figure 4-9 The File menu 56 Figure 4-10 The Edit menu 58 Figure 4-11 A Window menu 60 Figure 4-12 A contextual menu in a document (left) and in the Finder 62 Figure 4-13 Don’t use arbitrary symbols in menus 63 Figure 4-14 Symbols in menus 64 Figure 4-15 A Font menu displayed with different fonts 65
Chapter 5 Windows 67 Figure 5-1 Standard window parts 69 Figure 5-2 The close button in its unsaved changes state 70 Figure 5-3 Document path pop-up menu, opened by Command-clicking the proxy icon 70 Figure 5-4 Appropriate titles for a series of unnamed windows 71 Figure 5-5 Examples of correct and incorrect window titles 72
13 Apple Computer, Inc. October 2001
FIGURES AND TABLES
Figure 5-6 “Visually centered” new window placement] 74 Figure 5-7 Appropriate placement of a new window on a system with multiple monitors (the user moved the first window to span the screens)) 76 Figure 5-8 Window controls in active and inactive states 78 Figure 5-9 An inactive window with controls that support click-through 79 Figure 5-10 The Save button on the inactive window does not support click- through 81 Figure 5-11 The elements of a scroll bar 82 Figure 5-12 An open drawer next to its parent window 85 Figure 5-13 Examples of tool palettes (utility windows) 87 Figure 5-14 Examples of About windows (all specifications apply to both versions) 89
Chapter 6 Dialogs 91 Figure 6-1 The Save Changes alert: An example of using a sheet to display a document-modal dialog 94 Figure 6-2 A standard alert 96 Figure 6-3 A customized alert showing the caution icon badged with an application icon 97 Figure 6-4 An Open dialog 100 Figure 6-5 The minimal (collapsed) Save dialog 102 Figure 6-6 The expanded Save dialog 104 Figure 6-7 A Save Changes alert for a document-based application 106 Figure 6-8 A Save Changes alert for an application that is not document- based 107 Figure 6-9 The Save Before Quitting alert (sheet) that appears when the user quits with only one unsaved document 108 Figure 6-10 The Review Changes alert (application modal) that appears when the user quits with more than one unsaved document open 108 Figure 6-11 Alert for confirming replacing a file 110 Figure 6-12 A Choose dialog 111 Figure 6-13 A Print dialog 113
14 Apple Computer, Inc. October 2001
FIGURES AND TABLES
Chapter 7 Controls 115 Figure 7-1 Example of standard push buttons 116 Figure 7-2 Stacked push buttons 117 Figure 7-3 Push button dimensions 117 Figure 7-4 Radio button spacing 119 Figure 7-5 Checkbox spacing 119 Figure 7-6 Dashes in checkboxes representing a selection with more than one state 120 Figure 7-7 An open pop-up menu 120 Figure 7-8 Pop-up menu spacing 122 Figure 7-9 A command pop-down menu 123 Figure 7-10 Combo box with scrolling list and with pop-up menu (closed and open) 124 Figure 7-11 Combo box dimensions 124 Figure 7-12 A placard pop-up menu 126 Figure 7-13 Bevel button specifications 127 Figure 7-14 Bevel buttons as radio buttons and push buttons 128 Figure 7-15 Pop-up icon button 129 Figure 7-16 Pop-up bevel button with square corners 130 Figure 7-17 Pop-up bevel button with rounded corners 130 Figure 7-18 Slider control dimensions 131 Figure 7-19 Small slider dimensions 131 Figure 7-20 Orientation of tab text on each side 132 Figure 7-21 Tab control dimensions 133 Figure 7-22 Small tab control dimensions 133 Figure 7-23 Tab panes edge to edge 134 Figure 7-24 Tab panes inset from edge of window 135 Figure 7-25 Progress bars 136 Figure 7-26 Relevance control 136 Figure 7-27 Text input field specifications 139 Figure 7-28 Small text input field specifications 139 Figure 7-29 Scrolling list dimensions 140 Figure 7-30 Image wells 141 Figure 7-31 Disclosure triangles in the Finder list view 141
15 Apple Computer, Inc. October 2001
FIGURES AND TABLES
Chapter 8 Layout Guidelines 143 Figure 8-1 Dialog redesigned without group boxes (first example) 145 Figure 8-2 Dialog redesigned without group boxes (second example) 146 Figure 8-3 Dialog redesigned without a group box (third example)] 147 Figure 8-4 A standard alert with dimensions 148 Figure 8-5 Sample application preferences dialog 149 Figure 8-6 Sample dialogs with panes 150 Figure 8-7 Sample dialog with scrolling list 152 Figure 8-8 Sample window using small scroll bars and resize control 153 Figure 8-9 Sample utility window using small controls 154
Chapter 9 User Input 155 Figure 9-1 Keyboard focus for a text field 168 Figure 9-2 Keyboard focus for a scrolling list 169 Figure 9-3 Keyboard focus for columns 169 Figure 9-4 Selection techniques 178 Figure 9-5 Shift-clicking in the addition model and the fixed-point model 179 Figure 9-6 Discontinuous selection within an array 180 Table 9-1 Moving the insertion point with the arrow keys 164 Table 9-2 Extending text selection with the Shift and arrow keys 165 Table 9-3 Key combinations for moving focus in full keyboard access mode 171 Table 9-4 Reserved and recommended keyboard equivalents 173 Table 9-5 Key combinations reserved for international systems 174 Table 9-6 Recommended keyboard equivalents using Shift to complement other commands 175 Table 9-7 Example of using Option to modify a shortcut already using Command 175
Chapter 10 Fonts 189 Figure 10-1 Mac OS X standard fonts 189
16 Apple Computer, Inc. October 2001
FIGURES AND TABLES
Chapter 11 Icons 191 Figure 11-1 Traditional application icon and Mac OS X icon 191 Figure 11-2 Application icons of different genres—user applications and utilities—shown as they might appear in the Dock 192 Figure 11-3 Two icon genres: User application icons in top row, utility icons in bottom row 193 Figure 11-4 An icon family: The iTunes application icon and its associated icons 194 Figure 11-5 The TextEdit application icon makes it obvious what this application is for 195 Figure 11-6 The Preview application icon: An example of a tool element 195 Figure 11-7 The Stickies application icon: Effective without the addition of a tool 196 Figure 11-8 The icons for QuickTime Player, Calculator, and Chess 196 Figure 11-9 Discriminating use of color in the Process Viewer and Print Center icons 197 Figure 11-10 Icons for the Preview application and a Preview document 198 Figure 11-11 Incorrect and correct badging of a document icon 198 Figure 11-12 Icons for a preferences application (System Preferences) and for a file that stores preferences (for the iTunes application) 199 Figure 11-13 A plug-in icon 199 Figure 11-14 Icons for external (top row) and internal hardware devices 200 Figure 11-15 Icons for removable media 200 Figure 11-16 Finder toolbar icons 201 Figure 11-17 Toolbar icons and their dominant shapes 201 Figure 11-18 The circled icons appear elsewhere in the interface; they retain their perspective when used in a toolbar 202 Figure 11-19 The Mail toolbar 202 Figure 11-20 Perspective for application icons: Sitting on a desk in front of you 203 Figure 11-21 Perspective for flat utility icons: On a shelf in front of you, with a shadow on the wall behind 203 Figure 11-22 Perspective for three-dimensional object: Sitting on a shelf in front of you, with the shadow below the object 204 Figure 11-23 Perspective for toolbar icons: Straight-on, with subtle shadow on the “floor” 204 Figure 11-24 Materials: Transparency used to convey meaning 205
17 Apple Computer, Inc. October 2001
FIGURES AND TABLES
Figure 11-25 Being emotive: The same message conveyed two ways 205
Chapter 12 Drag and Drop 209 Table 12-1 Common drag-and-drop operations and results 211
Chapter 13 Help 219 Figure 13-1 A help tag and an expanded help tag 223 Figure 13-2 The icon for AirPort Setup Assistant 225 Figure 13-3 A typical setup assistant pane 226
Chapter 14 Language 229 Figure 14-1 A poorly written alert message 233 Figure 14-2 An improved alert message 233 Figure 14-3 A well-written alert message 234 Table 14-1 Translating developer terms into user terms 230 Table 14-2 Proper capitalization of onscreen elements 231
Appendix C Document Revision History 261 Table C-1 Document revision history 261
18 Apple Computer, Inc. October 2001
CHAPTER 1
1 Introduction to the Aqua Human Interface Guidelines
This document describes what you need to do to design your application for Aqua, the Mac OS X user interface. Primarily intended for Carbon and Cocoa developers who want their applications to look right and behave correctly in Mac OS X, these guidelines provide examples of how to use Aqua interface elements. Java application developers will also find these guidelines useful.
Mac OS X is the world’s most advanced operating system, combining a powerful core foundation with a new and compelling user interface called Aqua. With brilliant new features and an aesthetically refined use of color, transparency, and animation, Aqua makes computing even easier for new users, while providing the productivity that professional users have come to expect of the Macintosh. The user interface features, behaviors, and appearances introduced in Aqua deliver a well organized and cohesive user experience available to all applications developed for Mac OS X.
This document assumes that you are familiar with the basic software design principles and considerations originally described in Macintosh Human Interface Guidelines. The principles are often overlooked, so they are summarized in the next chapter. You can download the original document, and later supplements, from http://developer.apple.com/techpubs/macos8/mac8.html.
Important This document has been reviewed for technical accuracy, but the information herein is subject to change. To receive notification of updates to this document and others, you can sign up for Apple Developer Connection’s free Online Program and receive the weekly ADC News email newsletter. For more details about the Online Program, see http://developer.apple.com/membership/ index.html.
19 Apple Computer, Inc. October 2001 CHAPTER 1
Introduction to the Aqua Human Interface Guidelines
The Benefits of Applying the Interface Guidelines
These guidelines are designed to assist you in developing products that provide Mac OS X users with a consistent visual and behavioral experience across applications and the operating system. Following the guidelines is to your advantage because users will learn your application faster if the interface looks and behaves like applications they’re already familiar with users will accomplish their tasks quickly, because well-designed applications don’t get in the user’s way your application will have the same modern, elegant appearance as other Mac OS X applications your application will be easier to document, because an intuitive interface and standard behaviors don’t require as much explanation customer support calls will be reduced (for the reasons cited above) your application will be easier to localize, because Apple has worked through many localization issues in the Aqua design process media reviews of your product will be more positive; reviewers easily target software that doesn’t look or behave the way “true” Macintosh applications do
The implementation of Apple’s human interface principles make the Macintosh what it is: intuitive, friendly, elegant, and powerful.
Tools for Applying the Guidelines
Tools are available to help you apply the design principles and interface specifications outlined in this document. Which tool to use depends on your application’s type:
20 The Benefits of Applying the Interface Guidelines Apple Computer, Inc. October 2001 CHAPTER 1
Introduction to the Aqua Human Interface Guidelines