You also want an ePaper? Increase the reach of your titles
YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.
<strong>Apple</strong> <strong>Human</strong> <strong>Interface</strong> <strong>Guidelines</strong>Preliminary October 18, 2003
C O N T E N T SExtending the <strong>Interface</strong> 37When to Go Beyond the <strong>Guidelines</strong> 37Build on the Existing <strong>Interface</strong> 37Don’t Assign New Behaviors to Existing Objects 37Create a New <strong>Interface</strong> Element Cautiously 38Involving Users in the Design Process 38Define Your Audience 38Analyze Tasks 39Build Prototypes 39Observe Users 39Part II The Macintosh Experience 43Chapter 4 First Impressions 45Packaging 45Installation 45General Installer <strong>Guidelines</strong> 46Setup Assistants 47Chapter 5 Mac OS X Environment 49The Finder 49The Dock 50The Dock’s Onscreen Position 50Dock Notification Behavior 50Clicking in the Dock 51The File System 52Domains 52Where to Put Files 52Using Filename Extensions 55Displaying Pathnames 56Multiple Users 56Remote Log In 57Assistive Technologies 57Full Keyboard Access Mode 58Screen Zooming 60Networking 60Application Services 61Displays 61The Always-On Environment 62Chapter 6 Using Existing Technologies 63Providing User Assistance 634 Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C O N T E N T S<strong>Apple</strong> Help 63Help Tags 64Internationalizing Your Application 64Storing Passwords 64Printing 65Choosing Colors 65Setting Fonts and Typography Characteristics 66Selecting Attributes Associated With People 68Speech Technologies 69Part III The Aqua <strong>Interface</strong> 71Chapter 7 User Input 73The Mouse and Other Pointing Devices 73Clicking 73Double-Clicking 74Pressing and Holding 74Dragging 74The Keyboard 75The Functions of Specific Keys 75Keyboard Shortcuts 82Keyboard Focus and Navigation 85Type-Ahead and Key-Repeat 86Selecting 86Selection Methods 87Selections in Text 90Selections in Spreadsheets 91Selections in Graphics 92Editing Text 92Inserting Text 92Deleting Text 92Replacing a Selection 93Intelligent Cut and Paste 93Editing Text Fields 94Entering Passwords 94Chapter 8 Drag and Drop 95Drag and Drop Overview 95Drag and Drop Semantics 96Move Versus Copy 96When to Check the Option Key State 97Selection Feedback 97Single-Gesture Selection and Dragging 97Preliminary © <strong>Apple</strong> Computer, Inc. 20035
C O N T E N T SBackground Selections 97Drag Feedback 98Destination Feedback 98Windows 98Text 99Lists 99Multiple Dragged Items 99Automatic Scrolling 99Using the Trash as a Destination 100Drop Feedback 100Finder Icons 100Graphics 100Text 100Transferring a Selection 101Feedback for an Invalid Drop 101Clippings 101Chapter 9 Text 103Fonts 103Style 105Using Ellipses 105Labels for <strong>Interface</strong> Elements 105Capitalization of <strong>Interface</strong> Elements 106Using Contractions in the <strong>Interface</strong> 107Developer Terms and User Terms 107Chapter 10 Icons 109Icon Genres and Families 109Application Icons 111Document Icons 113Icons for Plug-ins 114Hardware and Removable Media Icons 114Toolbar Icons 115Icon Perspectives and Materials 117Conveying an Emotional Quality in Icons 119Suggested Process for Creating Aqua Icons 119Tips for Designing Aqua Icons 120Chapter 11 Cursors 123Standard Cursors 123Designing Your Own Cursors 1276 Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C O N T E N T SPreferences Windows 183Inspectors and Info Windows 184Find Window 186Fonts Window and Colors Window 186Chapter 14 Dialogs 187Types of Dialogs and When to Use Them 187Document-Modal Dialogs (Sheets) 188Alerts 190Dialog Behavior 193The Default Button 193Accepting Changes 193The Open Dialog 194Dialogs for Saving, Closing, and Quitting 196Save Dialogs 196Closing a Document With Unsaved Changes 199Saving Documents During a Quit Operation 200The Choose Dialog 202The Printing Dialogs 204Print Dialog 204Page Setup Dialog 205Fax Dialog 206Chapter 15 Controls 209Buttons 209Push Buttons 210Metal Buttons 212Bevel Buttons 214Icon Buttons 216Round Buttons 217The Help Button 218Selection Controls 219Radio Buttons 219Checkboxes 221Segmented Control 223Icon Buttons and Bevel Buttons With Pop-Up Menus 225Pop-Up Menus 226Command Pop-Down Menus 230Combination Boxes 232Placards 234Color Wells 234Image Wells 235Adjustment Controls 236Stepper Control (Little Arrows ) 2368 Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C O N T E N T SSlider Controls 238Indicators 240Progress Indicators 240Relevance Indicators 241Text Controls 242Static Text 243Text Input Fields 243Search Fields 245Scrolling Lists 247View Controls 248Disclosure Triangles 248List Views 250Column Views 251Tab Views 252Grouping Controls 254Separators 254Group Boxes 255Chapter 16 Layout Examples 259Positioning Controls 259Sample Layouts 261Grouping Controls 265Using Small and Mini Versions of Controls 269Appendix A Keyboard Shortcuts Quick Reference 273Appendix B Tab View Differences Between Mac OS X Versions 285Document Revision History 287Preliminary © <strong>Apple</strong> Computer, Inc. 20039
C O N T E N T S10 Preliminary © <strong>Apple</strong> Computer, Inc. 2003
Figures, Listings, and TablesChapter 2 <strong>Human</strong> <strong>Interface</strong> Design 23Figure 2-1 Make text display rectangles the same size to facilitate translation 30Chapter 3 The Development Process 33Figure 3-1 Dialog with disclosure button 35Figure 3-2 Expanded dialog with disclosure button 36Figure 3-3 Search field as used in Mail 38Chapter 4 First Impressions 45Figure 4-1 Examples of assistant icons 47Figure 4-2 A typical setup assistant pane 48Chapter 5 Mac OS X Environment 49Figure 5-1 An example of a badged Dock icon: The Mail application icon indicates thereare unread messages 51Figure 5-2 Default home directory 53Figure 5-3 Enabling and disabling plug-ins 55Figure 5-4 Services menu 61Table 5-2 Key combinations used with screen zooming 60Chapter 6 Using Existing Technologies 63Figure 6-1 Print options available in Mac OS X 65Figure 6-2 Colors window 66Figure 6-3 Fonts window 67Figure 6-4 Minimal Fonts window 67Figure 6-5 Typography inspector 68Figure 6-6 Address window as used in Mail 69Chapter 7 User Input 73Figure 7-1 Keyboard focus for a text field 85Figure 7-2 Keyboard focus for a scrolling list 85Figure 7-3 Primary highlight color on child item, secondary color on parent 86Figure 7-4 Selection of a single item 87Preliminary © <strong>Apple</strong> Computer, Inc. 200311
F I G U R E S , L I S T I N G S , A N D T A B L E SFigure 7-5 Range selection 88Figure 7-6 Shift-clicking in the addition model and the fixed-point model 88Figure 7-7 Discontinuous selection 89Figure 7-8 Discontinuous selection within an array 89Table 7-1 Moving the insertion point with the arrow keys 79Table 7-2 Extending text selection with the Shift and arrow keys 80Table 7-4 Key combinations reserved for international systems 83Table 7-5 Some of the recommended keyboard shortcuts using Shift to complement othercommands 84Table 7-6 Example of using Option to modify a shortcut already using Command 84Chapter 8 Drag and Drop 95Table 8-1 Common drag-and-drop operations and results 96Chapter 9 Text 103Table 9-2 Proper capitalization of onscreen elements 106Table 9-3 Translating developer terms into user terms 108Chapter 10 Icons 109Figure 10-1 Application icons of different genres—user applications and utilities—shownas they might appear in the Dock 109Figure 10-2 Two icon genres: User application icons in top row, utility icons in bottomrow 110Figure 10-3 An icon family: The iTunes application icon and its associated icons 110Figure 10-4 The TextEdit application icon makes it obvious what this application is for111Figure 10-5 The Preview application icon: An example of a tool element 111Figure 10-6 The Stickies application icon: Effective without the addition of a tool 112Figure 10-7 The icons for QuickTime Player, Calculator, and Chess 112Figure 10-8 Discriminating use of color in the Process Viewer and Print Setup Utilityicons 113Figure 10-9 Icons for the Preview application and a Preview document 113Figure 10-10 Incorrect and correct badging of a document icon 114Figure 10-11 A plug-in icon 114Figure 10-12 Icons for external (top row) and internal hardware devices 115Figure 10-13 Icons for removable media 115Figure 10-14 Finder toolbar icons 116Figure 10-15 Toolbar icons and their dominant shapes 116Figure 10-16 The circled icons appear elsewhere in the interface; they retain theirperspective when used in a toolbar 116Figure 10-17 The Mail toolbar 117Figure 10-18 Perspective for application icons: Sitting on a desk in front of you 117Figure 10-19 Perspective for flat utility icons: On a shelf in front of you, with a shadowon the wall behind 11812 Preliminary © <strong>Apple</strong> Computer, Inc. 2003
F I G U R E S , L I S T I N G S , A N D T A B L E SFigure 10-20 Perspective for three-dimensional object: Sitting on a shelf in front of you,with the shadow below the object 118Figure 10-21 Perspective for toolbar icons: Straight-on, with subtle shadow on the “floor”118Figure 10-22 Materials: Transparency used to convey meaning 119Figure 10-23 Being emotive: The same message conveyed two ways 119Chapter 11 Cursors 123Figure 11-1 Mac OS 9 cursors that you shouldn’t use in Mac OS X 126Figure 11-2 Use of an asynchronous progress indicator 126Figure 11-3 Spinning wait cursor 127Chapter 12 Menus 129Figure 12-1 Menu bar, Dock, and contextual menus 129Figure 12-2 Scrolling menu 130Figure 12-3 Menu elements 131Figure 12-4 Dynamic menu items 132Figure 12-5 Icons in the Finder Go menu 133Figure 12-6 Icons in the Safari History menu 133Figure 12-7 Symbols in menus 135Figure 12-8 Don’t use arbitrary symbols in menus 135Figure 12-9 Avoid ambiguous toggled menu items 136Figure 12-10 Grouping items in menus 137Figure 12-11 A hierarchical menu 138Figure 12-12 The menu bar displayed when the Finder is active 139Figure 12-13 Dimmed menu title when all items are unavailable 139Figure 12-14 The <strong>Apple</strong> menu 140Figure 12-15 The Mail application menu 141Figure 12-16 The File menu 142Figure 12-17 The Edit menu 144Figure 12-18 A Format menu 146Figure 12-19 A View menu 147Figure 12-20 Finder toolbar customization window 148Figure 12-21 Application-specific menus in Safari 148Figure 12-22 A Window menu 149Figure 12-23 A Help menu 150Figure 12-24 A contextual menu for an icon in the finder and a text selection in adocument 151Figure 12-25 The iTunes Dock menu 152Table 12-1 Acceptable characters for use in menus 134Chapter 13 Windows 155Figure 13-1 Four types of windows 156Preliminary © <strong>Apple</strong> Computer, Inc. 200313
F I G U R E S , L I S T I N G S , A N D T A B L E SFigure 13-2 Standard window parts 157Figure 13-3 Title bar buttons for standard windows 159Figure 13-4 The close button in its unsaved changes state 159Figure 13-5 Proxy icon being dragged to another application 160Figure 13-6 Proxy icons in documents with saved and unsaved changes 161Figure 13-7 Document path pop-up menu, opened by Command-clicking the proxy icon161Figure 13-8 The toolbar control 162Figure 13-9 An open drawer next to its parent window 163Figure 13-10 Finder sidebar as a source list 165Figure 13-11 A brushed metal application window 166Figure 13-12 Metal and regular versions of a document window 166Figure 13-13 Mixing standard and brushed metal versions of windows 167Figure 13-14 System Preferences in the default state 169Figure 13-15 Appropriate titles for a series of unnamed windows 170Figure 13-16 Examples of correct and incorrect window titles 170Figure 13-17 “Visually centered” placement of new nondocument window 171Figure 13-18 Appropriate placement of a new window on a system with multiple monitors(the user moved the first window to span the screens) 172Figure 13-19 Main, key, and inactive windows 176Figure 13-20 An inactive window with controls that support click-through 177Figure 13-21 The Delete button on the inactive window does not support click-through178Figure 13-22 The elements of a scroll bar 179Figure 13-23 Examples of utility windows 181Figure 13-24 Utility window controls 182Figure 13-25 Example of an About windows 183Figure 13-26 Finder preferences window 184Figure 13-27 Info window 185Figure 13-28 Inspector window 185Figure 13-29 A Find window 186Chapter 14 Dialogs 187Figure 14-1 The Save Changes alert: An example of using a sheet to display adocument-modal dialog 188Figure 14-2 A standard alert 190Figure 14-3 A customized alert showing the caution icon badged with an applicationicon 191Figure 14-4 A poorly written alert message 192Figure 14-5 An improved alert message 192Figure 14-6 A well-written alert message 192Figure 14-7 An Open dialog 195Figure 14-8 A customized Open dialog 196Figure 14-9 The minimal (collapsed) Save dialog 197Figure 14-10 The expanded Save dialog 19814 Preliminary © <strong>Apple</strong> Computer, Inc. 2003
F I G U R E S , L I S T I N G S , A N D T A B L E SFigure 14-11 A Save Changes alert for a document-based application 200Figure 14-12 A Save Changes alert for an application that is not document-based 201Figure 14-13 The Review Changes alert (application modal) that appears when the userquits with more than one unsaved document open 201Figure 14-14 Alert for confirming replacing a file 202Figure 14-15 A Choose dialog 203Figure 14-16 A Print dialog (a sheet attached to a document window) 204Figure 14-17 The Page Setup dialog 206Figure 14-18 The Fax dialog 207Chapter 15 Controls 209Figure 15-1 Push button height 211Figure 15-2 Push button spacing 211Figure 15-3 Full size push buttons used in dialogs 212Figure 15-4 Metal buttons 213Figure 15-5 Metal button dimensions 213Figure 15-6 Bevel button examples 215Figure 15-7 Bevel buttons as radio buttons and push buttons 216Figure 15-8 Icon buttons used in a toolbar 216Figure 15-9 Icon button dimensions 217Figure 15-10 Examples of round buttons 217Figure 15-11 Round button dimensions 218Figure 15-12 Help button in the print dialog 218Figure 15-13 Help button dimensions 219Figure 15-14 Radio button dimensions 220Figure 15-15 Checkbox spacing 222Figure 15-16 Segmented controller dimensions 224Figure 15-17 Pop-up icon button 225Figure 15-18 Pop-up bevel button with square corners 226Figure 15-19 Pop-up bevel button with rounded corners 226Figure 15-20 An open pop-up menu 227Figure 15-21 Pop-up menu dimensions 228Figure 15-22 Pop-up menu spacing 229Figure 15-23 A command pop-down menu 230Figure 15-24 Command pop-down menu dimensions 231Figure 15-25 A combo box with the scrolling list open 232Figure 15-26 Combo box dimensions 233Figure 15-27 A placard with a pop-up menu 234Figure 15-28 Color wells in a preferences window 235Figure 15-29 Image wells 235Figure 15-30 Stepper control dimensions 237Figure 15-31 Full-size slider control dimensions 238Figure 15-32 Small slider control dimensions 239Figure 15-33 Mini slider control dimensions 239Figure 15-34 Progress bars 241Preliminary © <strong>Apple</strong> Computer, Inc. 200315
F I G U R E S , L I S T I N G S , A N D T A B L E SFigure 15-35 Asynchronous progress indicator 241Figure 15-36 Relevance indicator 242Figure 15-37 242Figure 15-38 Full-size text input field dimensions 244Figure 15-39 Small text input field dimensions 244Figure 15-40 Mini text input field dimensions 244Figure 15-41 Full-size search field dimensions 246Figure 15-42 Small search field dimensions 246Figure 15-43 Mini search field dimensions 247Figure 15-44 Scrolling list dimensions 248Figure 15-45 Disclosure triangles in a dialog 249Figure 15-46 Disclosure triangles 250Figure 15-47 List view with disclosure triangles 250Figure 15-48 Column view display of files 251Figure 15-49 Full-size tab view dimensions 252Figure 15-50 Small tab view dimensions 252Figure 15-51 Mini tab view dimensions 253Figure 15-52 Tab panes edge to edge 253Figure 15-53 Tab panes inset from edge of window 254Figure 15-54 Separators 255Figure 15-55 Types of group boxes 256Figure 15-56 Group box with a textual title 256Figure 15-57 Group box with a checkbox title 257Figure 15-58 Group boxes with pop-up menu titles 257Chapter 16 Layout Examples 259Figure 16-1 Position of buttons at the bottom of a dialog 260Figure 16-2 A standard alert with dimensions 261Figure 16-3 Sample application preferences window 262Figure 16-4 A window with changeable panes 263Figure 16-5 A brushed metal application window 264Figure 16-6 Grouping with separators 266Figure 16-7 Grouping with empty space 267Figure 16-8 Grouping with group boxes within a group box 268Figure 16-9 Grouping with group boxes in a tabbed pane 269Figure 16-10 Sample utility window using small controls 270Figure 16-11 Sample utility window using mini controls 271Appendix B Tab View Differences Between Mac OS X Versions 285Figure B-1 Tab view differences 28516 Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1Introduction to the <strong>Apple</strong> <strong>Human</strong><strong>Interface</strong> <strong>Guidelines</strong>ImportantThis is a preliminary document. Although it has been reviewedfor technical accuracy, it is not final. <strong>Apple</strong> Computer, Inc. issupplying this information to help you plan for the adoption ofthe technologies and programming interfaces described herein.This information is subject to change, and software implementedaccording to this document should be tested with final operatingsystem software and final documentation.<strong>Apple</strong> has the world’s most advanced operating system, Mac OS X, which combines a powerfulcore foundation with a compelling user interface called Aqua. With advanced features and anaesthetically refined use of color, transparency, and animation, Mac OS X makes computing eveneasier for new users, while providing the productivity that professional users have come to expectof the Macintosh. The user interface features, behaviors, and appearances deliver a well organizedand cohesive user experience available to all applications developed for Mac OS X.These guidelines are designed to assist you in developing products that provide Mac OS X userswith 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 applicationsthey’re already familiar with.Users can accomplish their tasks quickly, because well-designed applications don’t get in theuser’s way.Users with special needs will find your product more accessible.Your application will have the same modern, elegant appearance as other Mac OS Xapplications.Your application will be easier to document, because an intuitive interface and standardbehaviors 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 <strong>Apple</strong> has worked through manylocalization issues in the Aqua design process.Media reviews of your product will be more positive; reviewers easily target software thatdoesn’t look or behave the way “true” Macintosh applications do.Preliminary © <strong>Apple</strong> Computer, Inc. 200317
C H A P T E R 1Introduction to the <strong>Apple</strong> <strong>Human</strong> <strong>Interface</strong> <strong>Guidelines</strong>The implementation of <strong>Apple</strong>’s human interface principles make the Macintosh what it is: intuitive,friendly, elegant, and powerful.What Are the Mac OS X <strong>Human</strong> <strong>Interface</strong> <strong>Guidelines</strong>?This document is the primary user interface documentation for Mac OS X. It includes generaluser interface guidelines, specific user interface areas to be aware of in building well-behavedapplications, and specific details about designing the user interface for Mac OS X applications.This document covers Mac OS X version 10.3, although some of the information may apply toprevious versions of Mac OS X.This document assumes that you are familiar with basic software design principles. Specificprinciples of designing for the Mac OS are summarized in “<strong>Human</strong> <strong>Interface</strong> DesignPrinciples” (page 23).ImportantThis document has been reviewed for technical accuracy, but theinformation herein is subject to change.Who Should Read This Document?All developers building applications for Mac OS X should read and become familiar with thecontents of this document. Primarily intended for Carbon and Cocoa developers who want theirapplications to look right and behave correctly in Mac OS X, Java application developers willalso find these guidelines useful.Organization of This DocumentThe document is divided into three main parts:■■■The first part, “Fundamentals” (page 21), discusses the fundamental design principles tokeep in mind while designing an application.The second part, “The Macintosh Experience” (page 43), discusses technologies you can takeadvantage of to make your application a well-behaved application in the context of theoperating system as a whole.The final part, “The Aqua <strong>Interface</strong>” (page 71), explores specific implementation details forthe user interface of your application.Supplementary information provided in the appendixes includes:■A listing of the recommended and reserved keyboard shortcuts for Mac OS X in “KeyboardShortcuts Quick Reference” (page 273)18 What Are the Mac OS X <strong>Human</strong> <strong>Interface</strong> <strong>Guidelines</strong>?Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1Introduction to the <strong>Apple</strong> <strong>Human</strong> <strong>Interface</strong> <strong>Guidelines</strong>■A discussion of the differences between the appearance of tab views in Mac OS X version10.2 and Mac OS X version 10.3 in “Tab View Differences Between Mac OS X Versions” (page285)A summary of the changes made to this document in its various incarnations appears in“Document Revision History” (page 287).Conventions Used in This DocumentThroughout this document, certain conventions are used to provide additional information:■■Carbon-specific and Cocoa-specific implementation details and references to supplementarydocumentation are called out by paragraphs that begin with either Carbon: or Cocoa:. If youdo not see a specific reference to either Carbon or Cocoa, the information presented appliesto both Carbon and Cocoa.Some of the example images include visual cues to note whether a particular implementationis appropriate or not:❏indicates an example of the correct way to use an interface element.❏ indicates an example of the wrong way to use an interface element. It specifically callsout common mistakes.■Bold text indicates that a new term is being defined and that a definition of the word appearsin the glossary.All <strong>Apple</strong> referenced developer documentation is available from the <strong>Apple</strong> Developer Connection(ADC) website:http://developer.apple.comUnder the heading “Reference Library” on that page, click Documentation to go to the mainDocumentation page. From there you can go to Documentation pages for various categories ofinformation and see the lists of documents applicable to that category.In this document, cross-references to other <strong>Apple</strong> documents look like this:See Handling Carbon Windows and Controls in Carbon User Experience Documentation.To navigate to that document from the main Documentation page, you would click Carbon, thenclick User Experience on the Carbon Documentation page. You are then on the Carbon UserExperience Documentation page, which lists all the documents that have information related tothe user experience in Carbon.You can sort all the document lists by title or revision date. All documents are available in HTML,and many are also available in PDF.Conventions Used in This Document 19Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1Introduction to the <strong>Apple</strong> <strong>Human</strong> <strong>Interface</strong> <strong>Guidelines</strong>See AlsoThe <strong>Apple</strong> Developer Connection documentation website athttp://developer.apple.com/documentation has links to API reference and conceptualdocumentation for many of the topics discussed in this book.The <strong>Apple</strong> Developer Connection User Experience website at http://developer.apple.com/uecontains regularly updated information about user experience design for Mac OS X.The <strong>Apple</strong> Publications Style <strong>Guidelines</strong> provide information helpful for choosing the correctlanguage and terminology to use throughout your application in text displays and dialogs aswell as, of course, your documentation.These guidelines are available from the <strong>Apple</strong> DeveloperConnection documentation website.To receive notification of updates to this document and others, you can sign up for <strong>Apple</strong>Developer Connection’s free Online Program and receive the weekly ADC News email newsletter.For more details about the Online Program, seehttp://developer.apple.com/membership/index.html.20 See AlsoPreliminary © <strong>Apple</strong> Computer, Inc. 2003
P A R T IFundamentalsThis part of <strong>Apple</strong> <strong>Human</strong> <strong>Interface</strong> <strong>Guidelines</strong> presents the philosophy and psychology behind theMacintosh interface. Read this part to learn about the design principles and considerations thatyou can use to create an excellent human interface. You can find out how to incorporate goodhuman interface into your design and decision-making processes and how to involve usersthroughout the design process. It also tells you how to work with and go beyond the guidelineswhile maintaining their spirit and intent.Preliminary © <strong>Apple</strong> Computer, Inc. 200321
P A R T IFundamentals22 Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 2<strong>Human</strong> <strong>Interface</strong> DesignProducts from <strong>Apple</strong> are designed using a number of basic principles of human-computerinteraction. This chapter presents these principles and also points out what to consider forworldwide compatibility and universal access. Keep these considerations in mind as you designyour product.The technical knowledge presented in Part II and III is of little value without an understandingof the theories behind the user interface, which are described in this chapter.<strong>Human</strong> <strong>Interface</strong> Design PrinciplesThis section provides a theoretical base for the wealth of practical information on implementingthe Aqua interface elements presented in the rest of this book.You’ll undoubtedly find that you can’t design in accordance with all of the principles all the time.In those situations, you’ll have to make decisions based on which principle or set of principlesis most important in the context of the task you’re solving. User testing is often an excellent wayto decide between conflicting principles in a particular context.MetaphorsTake advantage of people’s knowledge of the world by using metaphors to convey concepts andfeatures of your application. Use metaphors that represent concrete, familiar ideas and make themetaphors obvious, so users can apply a set of expectations to the computer environment. Forexample, the Macintosh uses the metaphor of file folders for storing documents; people canorganize their hard disks in a way that’s analogous to the way they organize file cabinets.Metaphors in the computer interface suggest a use for something, but that use doesn’t necessarilydefine or limit the implementation of the metaphor. The Trash, for example, doesn’t have to limitits contents to the number of items an actual wastebasket could contain. Try to strike a balancebetween the metaphor’s suggested use and the computer’s ability to support and extend themetaphor.<strong>Human</strong> <strong>Interface</strong> Design Principles 23Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 2<strong>Human</strong> <strong>Interface</strong> DesignSee-and-PointPeople interact with the interface by pointing at onscreen objects with a device, typically a mouse.The Macintosh operating system works according to two fundamental paradigms, both of whichassume that users can see what they’re doing onscreen at all times and can point at what theysee. The paradigms are based on a general form of user action: noun-then-verb.In one paradigm, the user selects an object (the noun) and then chooses the action to be performedon the object (the verb). All actions available for a selected object are listed in the menus, so auser who is unsure of what to do next can scan through them. Users can choose an availableaction without having to remember a specific command.In the second paradigm, the user directly manipulates an object (the noun) and performs anaction (the verb) with it. A common example is dragging a document icon to a folder, for example.The user doesn’t choose a menu command, but it’s clear what happens to an object when it’splaced on another one. For this paradigm to work, the user must recognize what objects are for;the fact that the Trash looks like its real-world counterpart makes the interface easier to use.Direct ManipulationDirect manipulation allows people to feel that they are controlling the objects represented by thecomputer. According to this principle, an onscreen object should remain visible while a userperforms an action on it, and the impact of the action should be immediately visible. For example,a user moves a file by dragging its icon from one location to another. With drag and drop, themost common example of direct manipulation, users can drag selected text directly into anotherdocument.Support direct manipulation when users expect it. Avoid forcing users to use controls tomanipulate data. For example, you should be able to send a facsimile by dragging a document’sicon to a fax machine icon in the Dock, instead of having to open a utility program, choose a file,and click a Fax button.User ControlAllow the user, not the computer, to initiate and control actions. Some applications attempt totake care of the user by offering only alternatives judged good for the user or that protect theuser from having to make detailed decisions. This approach mistakenly puts the computer, notthe user, in control.The key is to create a balance between providing users with the capabilities they need to get theirwork done and helping them avoid dangerous irreversible actions. For a situation in which auser may destroy data accidentally, for example, you should always provide a warning and stillallow the user to proceed if desired.Feedback and CommunicationKeep users informed about what’s happening with your product. Provide feedback as they dotasks. When a user initiates an action, provide an indication that your application has receivedthe user’s input and is operating on it.24 <strong>Human</strong> <strong>Interface</strong> Design PrinciplesPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 2<strong>Human</strong> <strong>Interface</strong> DesignUsers want to know that a command is being carried out or, if it can’t be carried out, they wantto know why not and what they can do instead. When used sparingly, animation is one of thebest ways to show a user that a requested action is being carried out. When a user clicks an iconin the Dock, for example, the icon bounces to let the user know that the application or documentis in the process of opening. In Mac OS X, the kernel environment detects when your applicationdoesn’t respond to events for 2 seconds and automatically displays a busy cursor.For operations that don’t execute immediately, use a progress indicator to provide usefulinformation about how long the operation will take see “Progress Indicators” (page 240). Usersdon’t need to know precisely how many seconds an operation will take, but it helps to give anestimate. For example, the Mac OS uses statements such as “about a minute remains.” It can alsobe helpful to communicate the total number of steps needed to complete a task—“Copying 30of 850 files,” for example.Provide direct, simple feedback that people can understand. In error messages, for example, spellout exactly what situation caused the error (“There’s not enough space on that disk to save thedocument”) and possible actions the user can take to rectify it (“Try saving the document inanother location”). For more information, see “Writing Good Alert Messages” (page 191).ConsistencyConsistency in the interface allows people to transfer their knowledge and skills from oneapplication to any other. Use the standard elements of the Aqua interface to ensure consistencywithin your application and to benefit from consistency across applications. Ask yourself thefollowing questions when thinking about consistency in your product.Is your product consistent:■■■■■Within itself?With earlier versions of your product?With Mac OS standards? For example, does your application use the reserved andrecommended keyboard equivalents? (See “Keyboard Shortcuts” (page 82).)In its use of metaphors?With people’s expectations?Matching everyone’s expectations is the most difficult kind of consistency to achieve since yourproduct is likely to be used by an audience with a wide range of expertise. You can address thisproblem by carefully weighing the consistency issues in the context of your target audience andtheir needs.WYSIWYG (What You See Is What You Get)In applications in which users can format data for printing, make sure there are no significantdifferences between what the user sees onscreen and what the user receives after printing. Whenthe user makes changes to a document, display the results immediately; the user shouldn’t haveto wait for a printout or make mental calculations of how the document will look when printed.Use a print preview function if necessary.<strong>Human</strong> <strong>Interface</strong> Design Principles 25Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 2<strong>Human</strong> <strong>Interface</strong> DesignWYSIWYG is not about only printing; all data experienced by users—movies, audio, and soon—should be faithfully represented in all media.People should be able to find all the available features in your application. Don’t hide featuresby having commands not visible in a menu. Menus present lists of commands so people can seetheir choices instead of having to remember command names.ForgivenessYou can encourage people to explore your application by building in forgiveness—that is, makingmost actions easily reversible. People need to feel that they can try things without damaging thesystem; create safety nets, such as the Undo and the Revert to Saved commands, so people feelcomfortable learning and using your product.Always warn users before they initiate a task that will cause irreversible loss of data. If alertsappear frequently, however, it may mean that the product has some design flaws; when optionsare presented clearly and feedback is timely, using an application should be relatively error-free.Perceived StabilityThe Macintosh interface is designed to provide an understandable, familiar, and predictableenvironment.To give users a visual sense of stability, the interface defines many consistent graphics elements,such as the menu bar, window controls, and so on. Users encounter a familiar environment inwhich they know how things behave and what to do with them.To give users a conceptual sense of stability, the interface provides a clear, finite set of objectsand a clear, finite set of actions to perform on those objects. For example, when a menu commanddoesn’t apply to a selected object or to the object in its current state, it is shown dimmed (grayedout) rather than being omitted.To help preserve the perception of stability, when a user sets up his or her onscreen environmentin a certain layout, it should stay that way until the user changes it. Preserve user-modifiedsettings such as window dimensions and locations.Aesthetic IntegrityAesthetic integrity means that information is well organized and consistent with principles ofvisual design. Your product should look pleasant on the screen even when viewed for a longtime.Keep graphics simple, and use them only when they truly enhance usability. Don’t overload theuser with icons or put dozens of buttons in windows or dialogs. Don’t use arbitrary symbols torepresent concepts; they may confuse or distract users.Match a graphic element with users’ expectations of its behavior. Don’t change the meaning orbehavior of standard items. For example, always use checkboxes for multiple choices; don’t usethem sometimes for exclusive choices.26 <strong>Human</strong> <strong>Interface</strong> Design PrinciplesPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 2<strong>Human</strong> <strong>Interface</strong> DesignModelessnessAs much as possible, allow people to do whatever they want at all times. Avoid using modesthat lock the user into one operation and don’t allow the user to work on anything else until thatoperation is completed.Most acceptable uses of modes fall into one of the following categories:■■Short-term modes in which the user must constantly do something to maintain the mode.Examples are holding down the mouse button to scroll text or holding down the Shift keyto extend a text selection.Alert modes, in which the user must rectify an unusual situation before proceeding. Keepthese modes to a minimum. See “Types of Dialogs and When to Use Them” (page 187) formore information.Other modes are acceptable if they do one of the following:■■■They emulate a familiar real-life situation that is itself modal. For example, choosing differenttools in a graphics application resembles the real-life choice of physical drawing tools.They change only the attributes of something, not its behavior. The boldface and underlinemodes of text entry are examples.They block most other normal operation of the system to emphasize the modality. An exampleis a dialog that makes all menu commands unavailable except Cut, Copy, and Paste.If an application uses modes, there must be a clear visual indicator of the current mode, and itshould be very easy for users to get in and out of the mode. For example, in many graphicsapplications, the pointer can look like a pencil, a cross, a paintbrush, or an eraser, depending onthe function (the mode) the user selects.Keep Your Users in MindIn addition to the basic principles of interface design, there are issues related to your users toconsider.Know Your AudienceIdentifying and understanding your target audience are important first steps when designingyour product. The best way to make sure your product meets the needs of your customers is byexposing your design to their scrutiny. You can do this during every phase of the design processto help reveal what works about your product as well as its flaws. The improvements you makeas a result of prototype testing can translate into competitive advantages, increased sales, andenhanced customer satisfaction.It’s useful to create scenarios that describe a typical day in the life of a person you think uses thetype of product you’re designing. Think about the different environments, tools, and constraintsthat your users deal with. If possible, visit actual workplaces and study how people do their jobs.Keep Your Users in Mind 27Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 2<strong>Human</strong> <strong>Interface</strong> DesignAnalyze the steps necessary to complete each task you anticipate people wanting to accomplishwith your product. Look at how they perform similar tasks without a computer. Then designyour product to facilitate those tasks. Don’t replicate each step on the computer; your applicationshould make the whole process easier.Throughout the design process, use people who fit your audience description to test yourprototypes. Listen to their feedback and try to address their concerns. Develop your productwith people and their capabilities—not computers and their capabilities—in mind. For moreinformation, see “Involving Users in the Design Process” (page 38).Remember that you are rarely designing programs for yourself. It is not your needs or your usagepatterns that you are designing for, but those of your (potential) customers. Recognize that asan application developer or interface designer you have a wealth of knowledge, developed habits,and a more intricate understanding of computers than your customers are likely to have. Althoughno substitute for firsthand knowledge of your audience, these guidelines are designed to helpyou put their needs first and produce quality applications.Worldwide CompatibilityMacintosh system software is designed to address the complex problems you’ll encounter whenyou create an application designed to be compatible with regional, linguistic, and writing systemdifferences around the globe.It’s much easier to include worldwide compatibility from the beginning of your developmentprocess rather than try to incorporate support for script systems after your product is complete.Before you develop software for worldwide use, consider the issues discussed in the followingsections.Cultural ValuesMake sure that visible interface elements can be localized (translated into other languages andadapted for use in other countries). Whenever you design a user interface, consider that variousregions of the world may differ in their use of color, graphics, calendars, text, and therepresentation of time. Specific objects or symbols (such as wall outlets and the $ sign) may alsohave a different appearance, or not be understood, in other countries.Graphics can enhance your application, but an image can also be offensive to certain audiences.Cultures assign varying values and characteristics to living creatures, plants, and inanimateobjects. For example, in the United States the owl is a symbol of wisdom and knowledge, whereasin Central America the owl represents witchcraft and black magic. It’s a good idea to avoid theuse of seasons, holidays, or calendar events in software that you expect to distribute worldwide.If you include images that represent holidays or seasons—such as Christmas trees, pumpkins,or snow—be sure they can be localized.Different calendars are used to mark time around the world. The United States and most ofEurope observe time according the Gregorian calendar. The traditional Arabic calendar, theJewish calendar, and the Chinese calendar are lunar rather than solar. In many places, time ismarked according to one calendar for business and government purposes and another for religiousevents. Make your application flexible in handling dates; you also may want to provide the userwith a way to change the representation of time. Use the text utilities to handle numbers, dates,and sorting.28 Keep Your Users in MindPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 2<strong>Human</strong> <strong>Interface</strong> DesignLanguage DifferencesTranslating text is a sophisticated, delicate task. Avoid using colloquial phrases or nonstandardusage and syntax. Carefully choose words for menu commands, dialogs, and help text. Translatedtext can grow up to 50 percent longer than U.S. English text.Potential grammar problems may arise with error messages. Use complete sentences wheneverpossible. Don’t use phrases that you then concatenate to create sentences; the word order maybecome completely different in another language, rendering the message nonsensical whentranslated. For example, word order in German usually places the verb at the end of a sentence.For more information on handling text in other languages, see the System Overview in Mac OS XDocumentation and the documents listed in Text & International Documentation.Text Display and Text EditingWriting systems differ in the direction in which their characters and lines flow, the size of thecharacter set used, and whether certain characters are context dependent. Mac OS 9 and earlierversions relied on WorldScript and the Script Manager, which used a different character set foreach script system. Mac OS X supports Unicode, a single character set for most writing systemsin the world. Unicode is a cross-platform, international standard for character encoding.Text handling for Cocoa is entirely based on Unicode. For Carbon developers, there is a new setof functions for manipulating Unicode text. For more information about localization tools, fonts,and international technologies, go to http://developer.apple.com/intl.No matter what level of worldwide text support you provide, it’s important to keep in mind that:■■■Text isn’t always left-aligned and read from left to right.Text isn’t always read by a person; it might be spoken through a text-to-speech converter.System and application fonts may change.Default Alignment of <strong>Interface</strong> ElementsWhen dialogs are localized, the text may become longer or shorter, and the alignment of controlsmay vary. For items to appear aligned in languages that read right to left, make sure the items’display rectangles are the same size, as shown in Figure 2-1.Keep Your Users in Mind 29Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 2<strong>Human</strong> <strong>Interface</strong> DesignFigure 2-1Make text display rectangles the same size to facilitate translationResourcesIt’s essential to store region-dependent information in separate resources so user-visible text canbe translated during localization without modifying your application’s code. When you createresources, consider text size, location, and direction. Text size varies in different languages. Also,depending on the script system, the direction of text may change. Most Middle Eastern languagesread from right to left. Text location within a window should be easy to change. For moreinformation, see the System Overview in Mac OS X Documentation available at the <strong>Apple</strong> developerwebsite, and the <strong>Apple</strong> International Technologies website at http://developer.apple.com/intl.Universal AccessibilityMillions of people have a disability or special need, and computers hold tremendous promisefor increasing these people’s productivity. Many countries, including the United States, havelaws mandating that certain equipment provide access for users with a disability.It’s a good idea to build in support for universal access from the beginning of your design processrather than having to add it after your product is done.When you think about designing for thewide range of abilities in your target audience, think about increasing productivity for the entireaudience; be careful not to overcompensate for the disabilities of certain members. Don’t letaccommodations for a particular disability create a burden for people who do not have thatdisability.Mac OS X has many built-in functions designed to accommodate people with special needs. Userscan access these functions in the Universal Access pane of System Preferences.ImportantYour application should not override any of the accessibilityfeatures built into Mac OS X, such as the ability to access all userinterface functions using the keyboard instead of the mouse, orany preference that a user might select to assist with a disability.If you follow the design principles in this chapter, and the guidelines in the rest of this book, youwill meet the needs of most of your users. Here are some additional accessibility requirementsyou should be aware of:30 Keep Your Users in MindPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 2<strong>Human</strong> <strong>Interface</strong> Design■■■The frequency of a blinking item or display must not be in the range above 2 hertz or below55 hertz (to prevent medical complications such as seizures that can be induced in somepeople by blinking lights).When a timed response is required—such as notification that a regularly scheduled actionis about to take place—at least one response method that does not require users to respondwithin the timed interval should be provided. Alternatively, at least one method that allowsusers to adjust the response time to at least 5 times the default setting should be provided.Alerts and other feedback should be provided in both audio and visual formats.The following sections describe the main categories of disabilities and give suggestions for specificdesign solutions and adaptations you can make. Keep in mind that there is a wide range ofdisabilities within each category and many people have multiple disabilities.Visual DisabilitiesPeople with a visual disability have the most trouble with the display (the screen). Some usersneed high contrast. Software that can handle different text sizes can make it easier to supportpeople with a visual disability. Mac OS X (version 10.2 and later) provides an onscreen zoomingoption in Universal Access preferences. Following the layout guidelines can help users with lowvision as well.Color-vision deficiencies are problematic for some people. Don’t create interfaces that use onlycolor coding to convey important information. Color coding should always be redundant to othertypes of cues, such as text, position, or highlighting. If you allow users to select from a varietyof colors to convey information, they can choose colors appropriate for their needs.Hearing DisabilitiesPeople with a hearing disability cannot hear auditory output at normal volume levels or cannothear it at all. Software should never rely solely on sound to provide information; if cues are givenwith sound, they should be available visually as well. When playing an alert or other soundintended to get the user’s attention, your application should call the system alert to ensure thatthe audio cue also has a visual cue.To indicate activity, hardware should have visible lights in addition to the sound generated bythe mechanisms. Hardware that specifically produces sound should facilitate externalamplification. For example, including a jack for external speakers or headphones allows peopleto amplify sound to an appropriate level.Physical DisabilitiesPeople who have a physical disability that requires additional access methods include individualswho are without the use of a hand or an arm because of congenital anomalies, spinal cord injuries,or progressive diseases. People in this group mainly have difficulty with computer input devices,such as the mouse or keyboard, and with handling removable storage media.Some people have difficulty pressing more than one key at a time (required for many keyboardshortcuts, for example). With Sticky Keys, which can be turned on in the Keyboard pane ofUniversal Access preferences, users can press keys sequentially instead of simultaneously.Keep Your Users in Mind 31Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 2<strong>Human</strong> <strong>Interface</strong> DesignUsers who have difficulty with fine motor movements may be unable to use a conventionalmouse or may require modifications to keyboard behavior. In Keyboard preferences, users canmodify how long they must press a key before it repeats; it also supports users who need a delaybetween a keypress and when it is registered. Mac OS X also provides ways for users to completeactions using the keyboard instead of the mouse. When full keyboard access is on, users cannavigate to and select interface items. Mouse Keys, which can be turned on in the Mouse paneof Universal Access preferences, enables users to control the mouse with the numeric keypad,so they can complete tasks such as dragging and resizing windows.Make sure that your application does not override any keyboard navigation setting. For moreinformation, see “Keyboard Focus and Navigation” (page 85).If you design hardware, make sure not to impose physical barriers that would impede someonewith limited or no use of the hands or arms. For example, a disk drive with a latch would bedifficult to open for a user who interacts with the computer with a pencil held in the mouth.32 Keep Your Users in MindPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 3The Development ProcessThis chapter discusses aspects of the product development process, including ways you canincorporate human interface design into that process. First, this chapter presents several issuesto consider when deciding on the features you want to include in your product. Second, it providessuggestions for how to make your product simple and easy to use; too often, users are confusedby unnecessary complexity in an application. Next, this chapter describes how to extend theinterface when your application requires functionality that isn’t covered by existing user interfaceelements. Finally, it explains the benefits of involving users throughout the entire phase of yourproduct development process.Design DecisionsFor design decisions regarding features in your application, you need to weigh the costs, whichare not all financial, against the potential benefits. Every time you add a feature to your application,think about the following factors:■■■■■■■Your application gets larger.Your application gets slower.Your application’s human interface gets more complex.You spend time in development rather than refinement of existing features.Your application becomes more difficult to document.You increase the number of possible user errors.Every new feature can have an impact on an existing feature.This section presents several additional factors you’ll want to take into consideration when addingfeatures to your product.Features Inspired by Market PressuresRemember to think about your users and keep their interests foremost when making your designdecisions. Market pressures can sometimes cause developers to try to implement features thatthey feel are necessary, even when they don’t have the resources to develop those features fully.Design Decisions 33Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 3The Development ProcessBecause a good review in the press can make an application successful, developers are sensitiveto meeting the expectations of reviewers as well as their target audiences. Many times reviewsinclude information on whether or not applications have certain features and the right numberof new features. The pressure of competition is intense, and you may often feel that you mustmake decisions based on market pressures. Instead, you need to balance that market pressurewith your ability to give users a quality product. You cannot ignore market pressures since theycan tell you what your users want. At the same time, you have to recognize that the quality ofthe features of your product is usually, if not always, more important than the sheer number offeatures.Feature CascadeWhen deciding whether or not to add features to your product, think about whether the benefitsto users of additional capabilities outweigh the additional development efforts, growth in size,and reduction in running speed that the features would cost. If you are developing a simpleapplication, it’s very tempting to include additional features. It takes a lot of restraint to stick tothe original intent of the application. Watch out for feature cascade, because it can often reducethe overall effectiveness of and add unwanted complexity to your application.The 80 Percent SolutionDuring the design process, you may discover problems with your product design. You can usethe 80 percent solution to help determine how to solve those problems. The 80 percent solutionmeans that your design meets the needs of at least 80 percent of your users. If you try to designfor the 20 percent of your target audience who are power users, your design will not be usableby the majority of your users. Even though those 20 percent are likely to have good ideas andprobably think a lot like you, the majority of people may not be like the 20 percent who are eliteusers of your product. Involving a broad range of users in your design process will help you findthe 80 percent solution.Managing ComplexityThe best approach to developing software that is easy to use is to keep the design as simple aspossible. (The general design guideline that simple design is good design applies directly to thediscipline of human-computer interactions.) Users will be accomplishing tasks using the toolsthat you design to facilitate their work. The more you can do to simplify the interface and yourproduct for your users, the more likely it is that you will build a product that meets their needsand expectations.Using Progressive DisclosureProgressive disclosure is one way to reduce the complexity of your designs. It allows you topresent the most common choices to users while initially hiding more complex choices oradditional information. Progressive disclosure helps you develop your interface so that it is easyfor novice users to learn and includes the features and power that advanced users desire.34 Managing ComplexityPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 3The Development ProcessFor dialogs, you can implement progressive disclosure and thus reduce the complexity of yourdesign by presenting only the most common options in the dialog that appears initially on thescreen. There are a couple of techniques you can implement to allow users to see more options.The most standard method of letting users see more choices is including a disclosure button inthe lower-left corner of the dialog. When the user clicks the button, the dialog expands to displaymore information. This method is very clear and predictable. People know how to use buttons,and the labels let people know right away that they have access to more information if they don’tsee what they’re looking for. Figure 3-1 and Figure 3-2 show an example of a dialog thatimplements this method of progressive disclosure.Figure 3-1Dialog with disclosure buttonManaging Complexity 35Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 3The Development ProcessFigure 3-2Expanded dialog with disclosure buttonIf you include a disclosure button in a dialog, it’s best to extend the bottom of the window toaccommodate the additional information. You could move a side of the window without causingtoo much change in the perceived stability of the window. However, avoid expanding the windowsymmetrically in all directions, because this behavior destroys the user’s initial sense of thewindow being one object with some of it not visible. In general, it’s best to keep all controls visibleat all times. Also, if the larger state of the dialog box won’t fit on the screen when the disclosurebutton is clicked, move the dialog the minimum amount necessary to make it fit on the screen.When the user clicks the clicks the button again, keep the dialog in its new position; don’t moveit back to its original position on the screen.Implementing PreferencesPreference settings are user-defined parameters that your software remembers from session tosession. Preferences can be a way for your application to offer choices to users about how theapplication runs. Preferences often affect the behavior of the application or attributes of thecontent created with the application.To reduce the complexity of your application, make decisions about which features to implementas preferences based on what your users really need. The key is to implement as preferences onlythose features that your users find useful. In other words, avoid creating one large window withall the preferences you can think of. Instead, eliminate the settings that are special cases of abehavior or an attribute and build in flexible features as a part of your application.A preference should be a setting that the user changes infrequently. If you provide choices tousers that they will change many times in a work session, you should implement those choicesin a menu or other interface element to which the user has easy, modeless access. By choosingthe right way to implement a feature, you can give users the flexibility to choose, in their ownlanguage, their preferred method of working.See “Where to Put Files” (page 52) for information on where to store preference files.36 Managing ComplexityPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 3The Development ProcessExtending the <strong>Interface</strong>This section describes how to extend the Macintosh user interface when your application requiresan element or a behavior that doesn’t already exist, or has a need that this document doesn’taddress. When a need arises that can’t be met by the standard elements, you can extend the setof controls using these guidelines, provided that the new element or behavior supports <strong>Apple</strong>’sinterface design principles. This section contains information on how to determine when it’sappropriate to go beyond the guidelines, how to use the existing interface elements to build newelements, and pitfalls to avoid when you design additional interface elements.When to Go Beyond the <strong>Guidelines</strong>People rely on the standard Mac OS X user interface for consistent predictable user experience.Don’t copy other platforms’ user interface elements or behaviors in Mac OS X because they mayconfuse users who aren’t familiar with them.There are times when the standard user interface doesn’t cover the needs of your application.This is true in the following situations:■■You are creating a new feature for which no element or behavior exists. In this case, you canextend the user interface in a prescribed way.An existing element does almost everything you need it to, but a little modification thatimproves its function makes the difference to your application.Build on the Existing <strong>Interface</strong>When you need to extend the user interface, the best place to begin is with the already definedvisual and behavioral language. Look carefully at the elements that are defined in this document.Think about what the appearance means to people (the look) and how they expect the elementto behave (the feel).Visual cues, like the drop shadow and the arrow on a pop-up menu, are triggers for people.These cues help people recognize elements that they can use. People also learn to associate certainbehaviors with specific elements. For example, people recognize push buttons by their roundedshape. They look for a label that identifies the action the button causes. This particular appearancedistinguishes a push button from other types of elements. When people click a button, they expectthe button to be highlighted to indicate that the action takes effect. People may also expect thatclicking a button has additional behaviors related to it, including dismissing a dialog or changingthe content area of the active document. Mixing visual cues is confusing to users.Don’t Assign New Behaviors to Existing ObjectsThe previous section describes how to use elements from the existing user interface. When youdo use existing interface building blocks, use them in the standard way. Make sure you do notchange the behavior for standard elements. When you need a new behavior, design a new elementfor it. If elements behave differently in different situations, the interface becomes unpredictableand harder to figure out.Extending the <strong>Interface</strong> 37Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 3The Development ProcessCreate a New <strong>Interface</strong> Element CautiouslyBe very cautious about creating new interface elements because you may introduce unnecessarycomplexity. Make sure that you can’t use existing elements or a combination of them to achievethe desired result. Usability testing is essential for determining whether a new element works.The search field is an example of a new user interface element that builds on these guidelines.Introduced in Mail, it builds on the existing text field interface element without changing itsdefault behavior. To the standard text field, it adds a menu on the left and a single button on theright. Its rounded ends help identify it as different from the standard text field but typing in textand using the menu or button are the same as for existing interface elements. Because it wasdesigned to work well with the existing interface and it served a need that was not met with theother interface elements, it has been incorporated as a standard part of the user interface. (See“Search Fields” (page 245) for more information on how to use this control.)Figure 3-3Search field as used in MailInvolving Users in the Design ProcessThe best way to make sure your product meets the needs of your target audience is by exposingyour designs to the scrutiny of users. You can do this during every phase of the design processto help reveal what works about your product as well as what needs improvement.When you give people an opportunity to use your product or a mock-up of it, they will inevitablyfind some undiscovered flaws. You can implement significant changes to your product duringits evolution and thereby save yourself lots of time and money and save your users fromfrustration. By identifying and focusing on users’ needs and experiences, you can create productsthat are easier to assemble, learn, and use. These improvements can translate into competitiveadvantages, increased sales, and enhanced customer satisfaction.Define Your AudienceThere are several steps to involving users in your design process. The first step, done at thebeginning of a project, is to define the users and then do an analysis of the target audience. Youwant to determine what these people are like, how they might use a product like yours, if theyhave any similar products, and what features they would desire in your product. By doing someresearch on your target audience, you can find out if what you’re including in or adding to aproduct is desirable and useful.38 Involving Users in the Design ProcessPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 3The Development ProcessAnalyze TasksThe second step is to analyze the tasks people will be doing with your product. You need to doa task analysis for each task you anticipate that your users will do. Look at how they performsimilar tasks without a computer to help. Then look at how the computer can facilitate the tasks.To help plan a task analysis, imagine a scenario in which a user uses your product. List each taska person might perform in that scenario, then break each task apart into its component steps.This allows you to identify each step that a person goes through in order to complete the task.Order the steps according to how people do them. When you feel you have all the steps listedand ordered, read the list back to someone and see if that person can use the steps you’ve listedto accomplish the task.Build PrototypesFor the third step, apply the information you’ve collected about your users, their skills, and thetasks you envision them performing to create a prototype of your design. Prototyping is theprocess by which you develop preliminary versions of your design to verify its workability. Youcan use a variety of techniques to construct prototypes of your design. Creating storyboards isone technique—you draw out the steps your users will go through to accomplish a task usingyour product. Another technique is to build a simulation of the product in prototyping softwarethat animates some features or demonstrates how the product will work.Observe UsersOnce you have a prototype drawn or mocked up, you can begin to show it to people to getreactions to it. The fourth step, user observation, lets you test the workability of your productdesign by watching and listening carefully to users as they work with your prototype. Althoughit is possible to collect far more elaborate data, observing users is a quick way to obtain an objectiveview of your product. Before you do any testing, take time to figure out what you’re testing andwhat you’re not. By limiting the scope of the test, you’re more likely to get information that willhelp you solve a specific problem. You can use the information you gather about your targetaudience to help you pick participants for your user observation; find people who have the samedemographic background and experience level as the typical user in your target audience.Your participants will work through one or more specific tasks. These tasks can be based on thetask analyses that you performed earlier in the design process. After you determine which tasksto use, write them out as short, simple instructions. Your instructions to the participants shouldbe clear and complete but should not explain how to do things you’re trying to test. See thefollowing sections for more information about how to conduct a user observation; it includes aseries of sample steps on which you can base your own user observation.During the user observation, record what you learn about your design; you’ll be using thisinformation to revise your prototype. Once you’ve revised your prototype, conduct a seconduser observation to test the workability of the changes you’ve made to your design. Continuethis iterative process of creating prototypes and conducting user observations until you feelconfident that you’ve fully addressed the needs of your target audience.Involving Users in the Design Process 39Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 3The Development Process<strong>Guidelines</strong> for Conducting a User ObservationThere are many ways to get feedback from users during the design process. Among these areusability testing, cognitive walkthroughs, group walkthroughs, on-site observations, heuristicwalkthroughs, and user observations. Regardless of how you choose to get user feedback thereare some basic guidelines to keep in mind.You can use the following guidelines when conducting a simple user observation, but they canapply more generally to other types of testing as well. Remember, that testing is not an experiment,so you will not get quantitative data that can be statistically analyzed. You can, however, seewhere people have difficulty using your product, and you can then use that information toimprove your product. These guidelines will help you achieve a more user-centered designapproach:■■■Introduce yourself and describe the purpose of the observation (in very general terms). Mostof the time, you shouldn’t mention what you’ll be observing. Make it clear to the participantthat you are testing your product, not the participant.Tell the participant that it’s OK to quit at any time. Never leave this step out. Make sure youinform participants that they can quit at any time for any reason.If you are using the think aloud protocol, explain how to do it.Ask participants to think aloud during the observation, saying what comes to mind as theywork. By listening to participants think and plan, you’ll be able to examine their expectationsfor your product as well as their intentions and their problem-solving strategies. You’ll findthat listening to users as they work provides you with an enormous amount of usefulinformation that you can get in no other way.You can help the user practice thinking aloud by having them describe a simple task, likehow they get to work in the morning.■It is very important that you allow participants to work with your product without anyinterference or extra help. This is the best way to see how people really interact with theproduct. For example, if you see a participant begin to have difficulty and you immediatelyprovide an answer, you will lose the most valuable information you can gain from userobservation—where users have trouble and how they figure out what to do.Of course, there may be situations in which you will have to step in and provide assistance,but you should decide what those situations will be before you begin testing. For example,you may decide that you will allow someone to struggle for at least three minutes before youprovide assistance. Or you may decide that there is a distinct set of problems on which youwill provide help. However, if a participant becomes very frustrated, it’s better to intervenethan have the participant give up completely.■Describe in general terms what the participant will be doing.Explain what all the materials are (such as the set of tasks and a questionnaire) and thesequence in which the participant will use them. If you are using a lab, talk about theequipment in the room. Explain the purpose of each piece of equipment (hardware, software,video camera, tape recorder, microphones, and so forth) and how it will be used in the test.If you need to demonstrate your product before the user observation begins, be sure youdon’t demonstrate something you’re trying to test. Remember that if you give them theanswer, there is no use asking them the question.40 Involving Users in the Design ProcessPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 3The Development Process■■Make sure to conclude by explaining what you were trying to find out and answer anyquestions they may have.Use the results.As you observe, you will see users doing things you may never have expected them to do.When you see participants making mistakes, your first instinct may be to blame the mistakeson the participant’s inexperience or lack of intelligence. This is the wrong focus to take. Thepurpose of observing users is to see what parts of your product might be difficult to use orineffective. Therefore, if you see a participant struggling or making mistakes, you shouldattribute the difficulties to faulty product design, not to the participant.Involving Users in the Design Process 41Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 3The Development Process42 Involving Users in the Design ProcessPreliminary © <strong>Apple</strong> Computer, Inc. 2003
P A R T I IThe Macintosh ExperienceThis part of <strong>Apple</strong> <strong>Human</strong> <strong>Interface</strong> <strong>Guidelines</strong> presents an overview to the design of Mac OS X asan integrated environment with the user at the center. Read this part to learn about the designprinciples and technologies used in Mac OS X and how your application fits into that environment.You can also find out how to leverage existing technologies to add value to your user interface.Preliminary © <strong>Apple</strong> Computer, Inc. 200343
P A R T I IThe Macintosh Experience44 Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 4First ImpressionsWhen designing your user interface, keep in mind that first impressions are lasting impressionsand design accordingly. If users have trouble getting your application up and running, they aregoing to make judgements about it before they even use it. This chapter discusses some thingyou should keep in mind to provide the best Macintosh experience before the user even opensyour application for the first time.PackagingUsers begin making assessments of your application based on its presentation in a physicalpackage or on webpage from which they download it. Designing a great user experience includesthinking about how your product is presented prior to installation. Whether you distribute yourapplication in a box or online, your goal should be to make the presentation aesthetically pleasingand free of clutter.System requirements are very important to include with your packaging. Be sure to designatewhich version of Mac OS X your software runs in. Mac OS X runs on three different processors,the G3, G4, and G5. If you have features that rely on one of those processors, note that in yoursystem requirements. Make sure to test on as wide a variety of computers as you can. If youknow your application does not work under certain conditions, make that clear by stating it inyour packaging. ADC members can take advantage of the ADC Compatibility Labs to testapplications on a variety of different types of hardware and operating system versions.InstallationInstalling your software is the first task users must accomplish before they can use yourapplication, and you should ensure that it is a quick and painless experience. The best methodis a simple drag install: The user drags an icon or a folder from your CD, for example, to a chosendestination on another disk. The easiest way to achieve such a process is to create an applicationbundle. If files need to be installed in various locations throughout the system or if they need tobe installed in a location that requires authentication, you’ll need to create an installer.You can an create installation package with PackageMaker, which is available with the Xcodetools.Packaging 45Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 4First ImpressionsFor an update to an already-installed application, you should provide an installer that modifiesonly the files required for the new version. Remember that files may have been renamed ormoved; don’t look only in the Applications folders, and don’t rely exclusively on filenames toidentify your application files; check for creation and modification dates, version numbers, filesize, and so on to uniquely identify your application. If you detect multiple versions of yourapplication, provide information such as the location and creation date of each, and let the userchoose which one to update.If users can download your application from the Internet, help simplify the installation processby making it an Internet-enabled disk image and by cleaning up after a successful installationby moving unneeded files to the Trash.For more information on installing your software, including detailed descriptions of how to usePackageMaker and how to make disk images, see Software Distribution in Tools Documentation.General Installer <strong>Guidelines</strong>When designing your product’s installation procedure, keep the following guidelines in mind:■■■■■■■■■Before installing anything, your installer should check the destination volume for previouslyinstalled application components. When searching for files, follow the guidelines in“Installation” (page 45) for software updates.Always provide users with a simple default installation (an “Easy Install”). Most productsshould also provide a custom installation; if a user has accidentally thrown away a particularfile, for example, the user should be able to restore it without having to reinstall the wholeapplication.Provide choices and explain their impact. For example, one installation option could resultin faster performance but consume more disk space; another might use less space but resultin slower performance. Make sure to make these choices clear in terms that will be meaningfulto your users. See “Style” (page 105) for help in making decisions on how to word the text.Always let users choose a specific folder as the installation destination. Don’t require yourapplication to be installed in a particular location.Install files only in the locations recommended in “Where to Put Files” (page 52). If userswant to delete your application for some reason, most will simply drag its icon to the Trash;avoid littering the user’s hard disk with remnant files. If your product uses an installer, itshould include an uninstall option that lets the user delete all associated files.Advise users about data that might be overwritten during the installation and provide a wayfor them to back it up first. Don’t overwrite previous user preferences; deal with version andformat differences the first time the user opens the updated application.Provide help where appropriate. For example, in a custom installation pane, clicking a MoreInfo button should explain why the user would want to install the component and theconsequences of not installing it. Make dependencies between components clear, but don’tforce the user to install anything, even recommended files.Don’t uninstall any of the <strong>Apple</strong> system software in /System.If your application installs software that may already be installed on the user’s system, makesure the version you install is newer than any version the user already has; otherwise, don’t46 General Installer <strong>Guidelines</strong>Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 4First Impressionsinstall it. Make it clear to users which version they already have and which version yourapplication needs, and provide an option for skipping installation of those items.■■■■During installation, indicate progress, such as the current stage and the time remaining. (See“Feedback and Communication” (page 24).)Provide a Cancel button; if cancelling the installation would compromise the system’s stability,disable the button during those times. If a user cancels an installation, leave the destinationdisk in the same state it was in before the installation (in other words, delete any files installedbefore the process was canceled).Consider performing your installation the first time the user opens the application, ratherthan when the user copies the program. This technique is especially well suited for children’sgames.Consider your application’s audience. It’s likely, for example, that elementary school childreninstall their own games, so tailor your instructions for them (don’t use confusing or technicalterms) and make installation as easy as possible for that audience.Setup AssistantsFor products with complex setup procedures, a setup assistant, a small application that guidesusers through the setup options, can be helpful.You can open a setup assistant automatically when appropriate—when the system detects a newhardware device or the first time the user opens your application, for example. Ideally, the usershould use the assistant only once.For the application icon, use the setup assistant icon with an application badge superimposedin the lower-right corner, as shown in Figure 4-1.Figure 4-1Examples of assistant iconsFigure 4-2 shows the layout for a sample setup assistant window. Notice that the text is flush leftwithin the inset area, and controls are indented.Setup Assistants 47Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 4First ImpressionsFigure 4-2A typical setup assistant paneKeep the following guidelines in mind when designing a setup assistant:■■■■■■■■While the assistant is active, display only the application menu, containing About and Quititems, and the Edit menu, containing standard items to assist users in entering text. Don’tprovide a Help menu (or a help button); the setup assistant is help.Provide Go Back and Continue buttons for navigation.The assistant window title bar should contain a dimmed close button, an available minimizebutton, and a dimmed zoom button.Title the first pane “Introduction.” This pane should explain the purpose of subsequent panes.Title the last pane “Conclusion.” This pane should tell users what changes were made totheir system and how to modify these settings. This pane should have a default Done buttonand a dimmed Go Back button.In most cases, it’s best to ask only one question per pane.Provide relevant feedback when appropriate. If needed, you can display a progress bar tothe left of the Go Back button (the left edge aligned with the left edge of the pane).Don’t fill the entire screen; users should be able to access other parts of their system whilethe assistant is open.48 Setup AssistantsPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 5Mac OS X EnvironmentDesigning an application includes taking into account the features of the underlying operatingsystem that impact the application. To help you make your application integrate seamlessly intothe operating system, this chapter addresses those aspects of Mac OS X that affect your applicationswhether or not you do anything to take them into account. The following sections can help youunderstand behaviors that Mac OS X users expect.The FinderThe Finder has many functions in the operating system:■■■■■■It is the primary file browser. As such, it is the first tool users learn to use to get to applicationsand other files.It provides a powerful search tool to find files not easily found by browsing.It provides a way to access servers and other remote volumes including a user’s iDisk.It determines which application is launched when a user double-clicks an icon.It allows users to create file archives.It provides previews of images, movies, and sounds in its preview pane.To many users, the Finder is the computer. They don’t understand, nor do they need tounderstand, that the Finder is just another application.Keep the Finder in mind as you are designing your application and understand that new behaviorsyou introduce should follow patterns users have grown accustomed to in their use of the Finder.Although some of the functionality of the Finder is replicated through the Carbon and Cocoaframeworks, like file browsing, the Finder may be where users feel most comfortable performingcertain functions. Your application should handle actions performed in the Finder gracefully andshould communicate changes to the Finder where appropriate. For example, although you shouldcertainly provide an Open dialog, it is important to also handle a file dragged from the Finderinto your application. See “Drag and Drop” (page 95) for more information on implementingdrag and drop in your application.The Finder 49Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 5Mac OS X EnvironmentThe DockDesigned to help combat onscreen clutter and aid in organizing work, the always-available Dockdisplays an icon for each open application and minimized document. It also contains icons forcommonly used applications and for the Trash.Each item in the Dock has its own rectangular area called a tile. Within each tile is an icon thatrepresents the application, document, folder, or other item in the Dock. For most purposes, youcan think of the tile and icon as synonymous, even though the icon does not completely fill thetile.When a user opens an application, its icon appears in the Dock; when a user opens a documentand clicks its minimize button, the document’s icon appears in the Dock. Users can add anapplication icon permanently to the Dock by choosing Keep In Dock from the Dock menu whilethe application is open or by dragging the item from the Finder to the Dock. They can alsocustomize where and when the Dock appears.While an application is open, the Dock icon has a symbol below it. When the user quits theapplication, the application icon no longer appears in the Dock. If the user has chosen to alwaysdisplay the icon in the Dock, the icon remains but the symbol below it no longer appears.Carbon: See the Dock Manager Reference in Carbon User Experience Documentation formore information on handling the Dock from within your application.The Dock’s Onscreen PositionWhen opening new windows or resizing windows, position them so that they don’t overlap withthe user’s current position of the Dock. Restrict users from resizing a window so that the resizecontrol is behind the Dock.If the user changes the Dock’s size or position, don’t move or resize application windows thatare already open. Users should be able to change specific aspects of their environment withoutcausing other unrequested changes.Carbon: Determine the Dock’s size and location using theGetAvailableWindowPositioningBounds function, which returns a rectanglerepresenting the available Desktop area, not including the menu bar and the spaceoccupied by the Dock.Cocoa: Use the frame and visibleFrame methods of the NSScreen class to determinethe available Desktop area, not including the menu bar and the space occupied by theDockDock Notification BehaviorAn open application can use its Dock tile to convey important information if needed.50 The DockPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 5Mac OS X EnvironmentWhen appropriate, your application’s Dock tile icon can include a small badge superimposedon the icon. In Mail, for example, when a user has unread email, the Dock icon displays a redcircle indicating the number of new messages. This type of badging provides importantinformation without being obtrusive or distracting.Figure 5-1An example of a badged Dock icon: The Mail application icon indicates there are unreadmessagesIf an open and inactive application needs the user’s attention right away, the application icon inthe Dock bounces. This type of notification should be reserved for errors or problems that theuser needs to address right away. If you implement this kind of notification, you should alsoprovide a way for the user to turn off the animation.Carbon: To modify an application or document Dock tile, look for functions inMacWindows.h that include DockTile. See the Notification Manager Reference forinformation about bouncing the Dock icon. Also see Customizing Your Application DockTile in Carbon User Experience Documentation.Cocoa: To modify an application or document Dock tile use the setApplicationIcon:method of the NSApplication class or the setMiniWindowImage: method of theNSWindow class.Clicking in the DockClicking an application icon in the Dock should always result in a window becoming active:■■If the application is not open, a new window should open. In a document-based application,the application should open a new, untitled window. In an application that is notdocument-based, the application window opens.When a user clicks an open application’s icon in the Dock, the application becomes activeand all open unminimized windows are brought to the front; minimized document windowsremain in the Dock. If there are no unminimized windows when the user clicks the Dockicon, the last minimized window should be expanded and made active. If no windows areopen, the application should open a new window—a new untitled window fordocument-based applications, otherwise the main application window.Pressing an application icon in the Dock displays a menu that allows users to quit the application,hide it, or reveal its location in the file system. (This menu can also be opened by Shift-clickingthe icon.) You can modify this menu to make features of your application available from yourDock tile. See “Dock Menus” (page 152) for more information on this menu.The Dock 51Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 5Mac OS X EnvironmentThe File SystemClosely related to the Finder is the file system. As a developer, you obviously need to be awareof how files are arranged on disk. Most users though, shouldn’t need to know too much morethan the basic folders in the home directory and the Applications folder. To keep things simplefor basic users and advanced users alike, put things where users expect them to be.DomainsThere are multiple, similar file hierarchies, or domains, in Mac OS X. These domains providelimits to how items in them affect the rest of the system. There are four domains: system, network,local, and user. Items in the system domain define attributes that apply to all users on a particularcomputer. For example, the standard system font is stored in the system domain and is availableto anyone logged into the computer, while a font stored in a particular user’s user domain wouldbe available only to that user.For the most part, these domains are represented in the structure of the filesystem:■■Items in /System are in the System domain.Items in /Network are in the Network domain.■ The local domain is on the boot hard drive, or /.■The user domains are defined by wherever a user’s home directory is. For nonnetworkaccounts they are in /Users.While the distinction between domains should normally be transparent to users, it is importantfor you to be aware of when designing your applications. A user who has access to one domainmight not have access to another, so be careful when installing files or when using files that mightbe in a domain that a particular user doesn’t have access to. Don’t assume that a user’s domainis in /Users. For a network account, the path to the home directory is not simply /Users.As general rule, don’t put anything in the system domain. Do not modify things there or expectthem to stay the same. This domain may change as <strong>Apple</strong> provides updates to the operatingsystem.Where to Put FilesDuring installation you may install the application itself in a location accessible to all users. Mostof the files you generate while your application is running however, should go in the user domainbecause they pertain to the specific user currently using that application.When a new user account is created in Mac OS X, a suite of folders is automatically created inthe user’s home directory. This structure helps users easily organize and manage the files relatedto the tasks they perform on a daily basis. There are eight predefined top-level user folders. Withthe exception of Desktop and Library, users can move or delete these folders.52 The File SystemPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 5Mac OS X EnvironmentFigure 5-2Default home directoryThe Library folder in the user’s home directory contains system or application-support files.Within the Library folder are two directories you are likely to use:■■An Application Support folder, in which you can create a developer-specific orapplication-specific folder to contain files such as document templates, databases, scripts,automatically saved files, temp files and other files your application uses at runtime.User-created files should not be in this folder.A Preferences folder for storing user preferences. Preferences files should be named with thereverse domain name of the application provider followed by the application name and anyrelevant filename extensions. For example, the preferences for <strong>Apple</strong>’s Mail application arein the file com.apple.mail.plist. If your preferences are not stored in a single file, it is OKto have folders in this folder.See “Implementing Preferences” (page 36) for guidelines on implementing preferences inyour application.Other folders in Library may be appropriate for sounds, fonts, product licenses, and so forth.Youmay want your application to provide its own interface for accessing and managing the contentsof this folder that are relevant to your application.Three of the predefined folders in the user’s home folder support basic system functionality:■■Desktop contains all files visible on the desktop when the user logs in. By default, the contentsaren’t visible to other accounts. This folder is the default location for files downloaded witha web browser.Public allows the user to share files with local and remote users. By default, the contents arevisible to other user accounts. This folder contains a drop box, where others can put files forthe owner that aren’t visible to other users.The File System 53Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 5Mac OS X Environment■Sites allows users to host a website. When the user turns on Personal Web Sharing (in Sharingpreferences), other users can access webpages in this folder. A sample webpage is providedin this folder.The remaining folders are intended to provide default locations for storing specific types of files.They are not intended to contain files whose primary access is through the application whichshould go in the Library folder. The provided folders are:■■■■Documents: The default location for storing user-created files not better served by the otherfolders. Examples include text or spreadsheet documents. Don’t put application support filesor user preference settings here; put them in the user’s Library folder.Movies: The default for storing moving images created by the user or exchanged with otherusers. Examples include QuickTime Player files, iMovie projects, and imported digital videosequences.Music: The default for storing music, sound, or MIDI files created by the user or exchangedwith other users. Applications that generate music or sound-related files should use thisfolder as the default storage location. Examples include iTunes user playlists and music files.Pictures: The default for storing still images created by the user or exchanged with otherusers—images downloaded from a digital camera, for example.When a user saves a file to a destination other than the default folder, your application shouldkeep the user’s selection as the default location for saving files.By default, applications should be installed in /Applications, where they are accessible to allusers on that particular computer. It may be appropriate to install some applications in theApplications folder in a user’s home folder. (This folder is not there by default, but if created,will be understood by the system.) Ultimately, users should be able to install files anywhere theywant, but since Launch Services looks in these suggested folders when searching for compatibleapplications, you might want to encourage users to install their applications in one of these twolocations with the default installation option.Note: Launch Services also looks in the subfolders of /Applications and in ~/Applications,in /Developer/Applications and its subdirectories.Third-party plug-ins should be installed in the /Contents/Plugins directory of the applicationbundle of the application they modify. If installed there, users can easily enable or disable themthrough the Plug-ins pane in the application’s Info window in the Finder as shown in Figure7-3 (page 55). You may want to provide user documentation explaining how to do this if yourapplication supports plug-ins.54 The File SystemPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 5Mac OS X EnvironmentFigure 5-3Enabling and disabling plug-insUsing Filename ExtensionsAny file that has a specific format can have a filename extension indicating that format. When auser copies a file to a computer that uses another operating system, the filename extension givesthe system the information it needs to handle the file correctly.Users, however, don’t need to be aware of a filename’s extension. Filename extensions are hiddenby default, but users can choose to display a document’s filename extension by deselecting the“Hide extension” checkbox in the expanded Save dialog, and can choose to show all filenameextensions in Finder Preferences. Your application should always display filenames that respectthe user’s preference.Applications that already write out filename extensions for interoperability purposes providean enhanced user experience; these filename extensions can be hidden in Mac OS X butautomatically get transferred with the file as it moves to a non-HFS file system. For example,when a user uploads HTML and movie files, because the movie files already have filenameextensions, they don’t need to be renamed, and links in associated web pages function properly.To preserve the “what you see is what you typed” user experience, while supporting robustinteroperability by using filename extensions to indicate file format, applications have severalresponsibilities. <strong>Apple</strong> recommends that applications adopt the following behavior:■Any user-visible filename—in a list, an Info window, or any other situation— should alwayshide or show the extension according to the user’s preference.The File System 55Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 5Mac OS X Environment■■■■When saving files, users should be able to control whether filename extensions are hidden.For more information, see “Dialogs for Saving, Closing, and Quitting” (page 196).Applications should save newly created document files with a filename extension, for easyexchange with other operating systems and other users over the Internet even if the user haschosen to hide extensions.When opening and saving a document file, applications should preserve the value of thedocument filename extension hidden flag and should preserve the existing filename extensionunless the user creates a new document file by choosing Save As.When saving a document file without an extension as a new file in a Save As operation,applications should add an extension, as they would when creating a new document file.ImportantDon’t provide your own options for handling filename extensions;use the standard Open and Save dialogs.Carbon: Set the PreserveSaveFileExtension flag when calling the Save dialog, anduse NavCompleteSav to set the flag to hide the filename extension.Cocoa: The behaviors described above happen automatically using NSDocument.Displaying PathnamesSome dialogs, such as Save and Open, provide a text field in which expert users can typefile-system paths to navigate in the dialog using the slash (/) as the path separator. This field isdisplayed when the user types Command-Shift-G.Avoid displaying pathnames in your application (in document titles, for example). If it’s necessaryto display a pathname, avoid truncating it.Multiple UsersMac OS X is a true multiple-user operating system. Although not usually an issue in regards tofor user interface design, there are a few specific things to keep in mind concerning multipleusers:■■Because of the support in Mac OS X for fast user switching, multiple instances of yourapplications may be running at the same time for different users. See Multiple UserEnvironments for more information.Not all users have the same privileges. For example, only administrator users can write filesin /Applications. Some users may be working under limited privileges where they maynot be able to:❏❏❏Access all of the System PreferencesModify the DockChange their password56 Multiple UsersPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 5Mac OS X Environment❏❏Burn DVDs and CDsOpen certain applicationsBe careful not to make any assumptions concerning any of these tasks.■Users on a computer can include both local and network users. Since a user’s home directorymay not be on his or her computer, avoid processes that search for files based on the locationof a user’s home directory. If that user is on a network volume of any significant size, thesearch can take quite a long time. If something like this is required, make sure to providefeedback and consider a way for the user to escape a process like this.Remote Log InKeep in mind that a user can log in to Mac OS X remotely from the command line or through<strong>Apple</strong> Remote Desktop. Depending on your application, it might be appropriate to recognizethese situations with special behavior in the user interface.Assistive TechnologiesAlthough designed with the mouse in mind, Mac OS X allows users to control windows andcontrols in other ways. This section describes some of the alternative ways users can access theoperating system and your application.Most of the assistive technologies built in to Mac OS X are activated through the Universal Accesspane in System Preferences. By adjusting the settings there, you can see what effect these controlsmight have on your application. In addition to full keyboard access mode and screen zooming,which are discussed in more detail in this section, you should also be aware of these features,which have an impact on your application:■Users with difficulty seeing can choose to show the display in black and white only or ingrayscale. They may also adjust the contrast of the entire user interface. No elements of youruser interface should be distinguishable only by color.Note: The default keyboard shortcuts for increasing and decreasing the screen contrast areCommand-Option-Control-. (period) and Command-Option-Control-, (comma) respectively.Be careful about overriding these.■■■Alerts can be set to offer visual cues in addition to or in lieu of the default audible cues forusers with hearing difficulties.Sticky Keys allows users to generate key combinations in sequence instead of having to pressall the keys at the same time. For example, instead of holding the Command and C keys atthe same time to copy an item, the user presses the Command key first and the C key a fewmoments later to perform the same action.Slow Keys allows users to adjust the amount of time a key must be down before a keystrokeis accepted. This feature is useful for users who might accidentally press keys.Remote Log In 57Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 5Mac OS X Environment■■Mouse keys allow users to move the cursor (pointer) using the keyboard instead of a traditionalpointing device like the mouse.Text in alerts and the text under the mouse can be spoken for users with difficulties seeing.The settings for spoken text are in the Speech pane of System Preferences.Make sure to test your applications with these features. There may be situations where you donot need to handle these features completely, but make sure you fully understand your usersbefore making any design decisions that overrides these features. For example, if you are buildinga visual design tool, it might be nearly impossible to include functionality for the image editingtools to work in greyscale. This does not absolve you from making sure that the other parts ofthe application are accessible. While the people using the editing tool would obviously need tobe able to see color, in a large workflow scenario, other users may be involved with aspects ofyour application like modifying or post processing files where they don’t need to see colors toperform their work.Full Keyboard Access ModeMac OS X provides the option of full keyboard access mode, in which users can navigate throughwindows, dialogs, menus, toolbars, and the Dock using the keyboard alone without a mouse orother pointing device.Users can turn on full keyboard access in the Keyboard Shortcuts pane of Keyboard & Mousepreferences. Control-F1 is a reserved keyboard shortcut for turning full keyboard access on oroff. Control-F7 toggles between keyboard access for all controls in windows and dialogs and thedefault state where only text fields and scrolling lists are accessed with the keyboard. Don’t usethese combinations for any other purpose.With keyboard access turned on in windows and dialogs, the arrow keys move between valueswithin a control. For example, if the user selects a slider with the Tab key, the arrow keys movethe slider control along the slider track. For vertically oriented choices, such as menu items, theUp Arrow and Down Arrow keys move the selection. For horizontally oriented choices, such asa row of tabs, the Right Arrow and Left Arrow keys move the selection. In some cases, it makessense to support both orientations. For example, a vertical slider could use both the Up Arrowand the Right Arrow to increase the value.In some cases, such as radio buttons, moving the focus to an item selects it as well. In other cases,such as push buttons, the user activates a selected item by pressing the Space bar. In full keyboardaccess mode, pressing the Space bar is equivalent to clicking the mouse button.The Escape key (Esc) is used to cancel a dialog and to cancel a selection in a pop-up menu or list.In a Dock menu, Esc dismisses the menu and moves focus to the frontmost window.The user can also quickly place focus in the menu bar, the Dock, toolbars, and utility windowsusing key combinations described in Table 5-1.This behavior is provided for all applications that use the standard controls. If you areimplementing your own controls, you need to provide these behaviors for your users.Table 5-1 lists the key combinations used in full keyboard access mode.58 Assistive TechnologiesPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 5Mac OS X EnvironmentTable 5-1Key combinations for moving focus in full keyboard access modeKey combinationControl-F1Control-F7Control-F2Control-F3Control-F4Shift-Control-F4Control-F5Control-F6Shift-Control-F6Control-TabShift-Control-TabCommand-TabShift-Command-TabArrow keyControl–arrow keyActionTurn full keyboard access on or offToggle the keyboard access mode in windows and dialogsbetween all controls and just text fields and scrolling listsMove focus to the menu barMove focus to the DockMove focus to the active (or next) windowMove focus to the previous windowMove focus to the toolbarMove focus to the first (or next) utility windowMove focus to the previous utility windowMove focus to the next grouping of controls in a dialog orthe next table (when Tab moves to next cell)Move focus to the previous grouping of controlsMoves focus to the first (or next) open application’s DockiconMove focus to the previous open application’s Dock iconMove focus to the next or previous value in a text field orcertain controls, such as menus; also opens Dock menusMove focus to another value or cell within a control such asa tableCommand-‘ (acute accent)Command-Shift-‘ (acute accent)Space barReturn (Enter)EscActivate the next open window in the frontmost applicationActivate the previous open window in the frontmostapplicationSelect the highlighted control (equivalent to clicking themouse button)Select the default buttonCancel a dialog or a selection in a pop-up menu or list; in aDock menu, Esc closes the menu and moves the focus to thefrontmost windowNote: Users can change the default combinations listed above in the Keyboard Shortcuts paneof Keyboard & Mouse preferences. When full keyboard access is on, user-defined combinationsoverride any combinations used in applications.Assistive Technologies 59Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 5Mac OS X EnvironmentFor information on the default keyboard access mode, see “Keyboard Focus and Navigation” (page85). A complete list of keyboard shortcuts is in “Keyboard Shortcuts Quick Reference” (page273).Screen ZoomingMac OS X provides a way for users to enlarge controls. Users can turn on the screen-zoomingfeature in the Seeing pane of Universal Access preferences. If your application uses any of thekeyboard combinations in Table 5-2, they are overridden when zooming is turned on.Table 5-2Key combinations used with screen zoomingKey combinationOption–Command–8Option–Command–=Option–Command-- (hyphen)Command-Option-Control-8Command-Option-/ActionTurn screen zooming on or offZoom inZoom outInvert the screen colorsTurn smoothing on or offNetworkingMac OS X supports a dynamically updating networking model. Since a user may change IPaddresses many times during a single session, don’t save settings based on the IP address. UseRendezvous whenever a user might otherwise be required to set an IP address. Rendezvousenables automatic discovery of computers, devices, and services on IP networks. The use ofRendezvous can dramatically simplify network configuration for your users.For general information on incorporating Rendezvous into your applications seehttp://developer.apple.com/macosx/rendezvous.Carbon: See DNS Service Discovery API in Networking Documentation for specificimplementation details.Cocoa: See Rendezvous Network Services in Networking Documentation for specificimplementation details.60 NetworkingPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 5Mac OS X EnvironmentApplication ServicesApplication services allow applications to offer aspects of their functionality for use by otherapplications in the system. Users activate services through the Services submenu in an applicationmenu. For example, a user could select a name in a text editing document and choose a Servicescommand that looks up the name using an LDAP server, starts up an email application, andopens a new message window with the found email address in the To field.Figure 5-4Services menuConsider which aspects of your application might add value for your users if made available asa service to other applications.Carbon: See Setting Up Your Application to Use the Services Menu in CarbonInterapplication Communication Documentation.Cocoa: See System Services in Cocoa Interapplication Communication Documentation.DisplaysDo not make assumptions about display size. Mac OS X can run on systems with a screen sizeas small as 800 x 600 or users may have multiple high-resolution displays connected to theircomputer. Unless you know that your users will be using a specific display size, it is best tooptimize your applications for display at 1024 x 768 pixels.Application Services 61Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 5Mac OS X EnvironmentThe Always-On EnvironmentAs the center of the digital hub, Mac OS X is designed to be always ready to use. Because ofenergy saving systems, it’s common for a user to leave a computer on most of the time.Since a computer may be on for hours, days, weeks, or even months at a time:■■■Don’t rely on a restart to get rid of cached or temporary files that may use up disk space.Don’t rely on startup or login items to initiate processes.Don’t require users to reboot as a part of updates or installation unless absolutely necessary.Your application is probably not the only one they have open so a reboot can come as a rudeinterruption.62 The Always-On EnvironmentPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 6Using Existing TechnologiesThis chapter discusses some of the technologies that are often overlooked by developers buildingapplications for Mac OS X. If you implement these technologies in the standard way, your userscan focus on what truly makes your application unique, rather than having to learn differentbehaviors for the same tasks performed in different applications. You too can focus on what youdo well, and with minimal work achieve a great return on your development investment.This chapter provides a look at some common tasks performed in the user interface of applicationsand points you to the correct resources for implementing standard techniques for these tasksProviding User AssistanceMac OS X supports two user help components: <strong>Apple</strong> Help and help tags. Help tags allow youto provide temporary context sensitive help while <strong>Apple</strong> Help allows you to provide a morethorough discussion of a topic or procedure.Use these mechanisms to provide user help in your application instead of help mechanisms thatare specific to your application. When users refer to help, it is usually because they are havingdifficulty accomplishing a task—and therefore might be frustrated. This is not the time for usersto have to learn yet another task like figuring out a help viewing mechanism that differs fromthe one they use in all the other applications on their computer.<strong>Apple</strong> HelpWith <strong>Apple</strong> Help, you can display HTML files in Help Viewer, a browser-like applicationdesigned for displaying onscreen help documents. Help Viewer can also display documents withQuickTime content, open <strong>Apple</strong>Script-based automations, retrieve updated help content fromthe Internet, and provide context-sensitive assistance.Users access <strong>Apple</strong> Help by launching the Help Viewer application or, more commonly, fromyour application in one of three ways:■The Help menu. The Help menu is the far-right item in the application region of the menubar. The first item in the Help menu should be Application Name Help, which opens HelpViewer to the first page of your help content. See “The Help Menu” (page 149) for moreinformation on the Help menu.Providing User Assistance 63Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 6Using Existing Technologies■Help buttons. When necessary, you can use a Help button to provide easy access to specificsections of your help. When a user clicks a Help button, send either a search term or an anchorlookup (which leads to a specific page or pages) to Help Viewer.It’s not necessary for every dialog and window in your application to have a Help button. Ifthere is no contextually relevant information in the help, don’t display a Help button.■From a contextual menu item. If contextually appropriate help content is available for anobject being pointed to, the first item in the contextual menu is Help. As with help buttons,the menu item can send either a search term or an anchor lookup to Help Viewer.See Providing User Assistance with <strong>Apple</strong> Help in User Experience Help Technologies Documentationfor more information on writing <strong>Apple</strong> Help content and providing it with your application.Help TagsHelp tags give your application the ability to identify its interface elements and provide basichelp information without forcing the user to leave the primary interface.Help tags are short messages that appear when the user leaves the pointer hovering over aninterface element for a few seconds. When the pointer leaves the object, the tag vanishes. If thecursor is not moved, the operating system automatically hides the help tag after about ten seconds.Use help tags to assist users in identifying the purpose of interface elements.Define help tags in <strong>Interface</strong> Builder. See Providing User Assistance with <strong>Apple</strong> Help in UserExperience Help Technologies Documentation for more information on writing and implementinghelp tags.Internationalizing Your ApplicationThe Mac OS X application bundling scheme is designed to easily support including strings,images, and nib files for multiple languages, but there is more to designing an application foruse in different markets than just including the right translated strings. “WorldwideCompatibility” (page 28) provides some general design considerations as well as some specificguidelines for building internationalization into your application.Carbon: See Internationalizing Your Software in Carbon Text & InternationalizationDocumentation.Cocoa: See the Internationalization in Cocoa Text & Internationalization Documentationas well as Internationalization in Cocoa Design <strong>Guidelines</strong> Documentation.Storing PasswordsIf your application uses passwords, provide the option for users to store them in the systemwidekeychain. The keychain mechanism in Mac OS X adds value because:64 Internationalizing Your ApplicationPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 6Using Existing Technologies■■■It provides a secure, predictable, consistent experience for users to deal with passwords.Users can modify settings for all of the passwords as a group, the default behavior, or set updifferent keychains for different activities with unique activation settings.The Keychain Access application provides a simple user interface for users to manage theirkeychains and their settings, relieving you of this task.See Keychain Services Reference in Security Documentation for information on how your applicationcan make use of Keychain Access.PrintingMac OS X includes an advanced printing system. Because of all the options this system provides,it is important that you use the standard print dialogs so that users understand the options theyhave available to them without getting lost in features. The printing architecture allows users toprint “digital paper” documents which can be sent to a printer, as a fax, or saved as a PDF file.These features are all free when you use the Mac OS X printing system in your application.Figure 6-1Print options available in Mac OS XYou can add custom panes to the Print or Print Setup dialogs for options not provided in thestandard panes. See “The Printing Dialogs” (page 204) for information on custom panes. For moreinformation, see Introduction to the Mac OS X Printing System in Printing Documentation.Choosing ColorsIf your application needs to provide a way for users to set or select colors for specific objects, usethe Colors window. The Colors window provides five different views so that users can pickcolors based on the color model appropriate for the current application.Printing 65Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 6Using Existing TechnologiesFigure 6-2Colors windowCarbonSee Color Picker Manager Reference in Carbon Graphics & Imaging Documentation.CocoaSee Using Color in Cocoa Graphics & Imaging documentatiion.Setting Fonts and Typography CharacteristicsThe Fonts window provided with Mac OS X allows fine-tuned control for the display characteristicof fonts as well as a simple view useful for selecting fonts. The expanded version is shown inFigure 6-3. By dragging the resize control inward, the user can get the smaller version of theFonts window shown in Figure 6-4.66 Setting Fonts and Typography CharacteristicsPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 6Using Existing TechnologiesFigure 6-3Fonts windowAction menuFigure 6-4Minimal Fonts windowThe Fonts window also provides advanced typography controls for fonts that support the options.The user can open a Typography inspector by choosing Typography from the action menu.Typography controls for the Zapfino font are illustrated in Figure 6-5.Setting Fonts and Typography Characteristics 67Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 6Using Existing TechnologiesFigure 6-5Typography inspectorCarbon: See Managing Fonts in Carbon Typography documentation.Cocoa: See Font Panel in Cocoa User Experience documentation.Selecting Attributes Associated With PeopleIf your application needs to store information about individuals, use the Address Book framework.You can use a streamlined version of the Address Book, the Addresses window, within yourapplication. This window is tailored to show only the information appropriate in your application.For example, in Mail, the Addresses window displays only email address for people but not theadditional information stored in the Address Book, but in the fax dialog (opened from the Printdialog), it displays only fax numbers.68 Selecting Attributes Associated With PeoplePreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 6Using Existing TechnologiesFigure 6-6Address window as used in MailSee Address Book in User Experience Documentation.Speech TechnologiesMac OS X contains speech technologies that recognize and speak U.S. English. These technologiesprovide benefits for all users and present the possibility of a new paradigm for human-computerinteraction.Speech recognition is the ability for the computer to recognize and respond to a person’s speech.Using speech recognition, users can accomplish tasks comprising multiple steps—for example,“Schedule a meeting next Friday at 3 p.m. with John, Paul, and George” or “Create a 3-by-3table”—with one spoken command. Mac OS X users can control the computer by voice, ratherthan being limited to the mouse or keyboard; consequently, speech-recognition technology isvery important for people with special needs, as well as for general users. Developers can takeadvantage of the speech engine and API included with Mac OS X, as well as the built-inuser-interface.Speech synthesis, also called text-to-speech (TTS), converts text into audible speech. It providesa way to deliver information to users without forcing them to shift attention from their currenttask. For example, the computer could, in the background, deliver such messages as “Yourdownload is complete; one of the files has been corrupted” and “You have email from your boss;would you like to read it now?” TTS is also crucial for users with vision or attention disabilities.As with speech recognition, Mac OS X TTS provides both an API and several user interfacefeatures.Speech Technologies 69Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 6Using Existing Technologies70 Speech TechnologiesPreliminary © <strong>Apple</strong> Computer, Inc. 2003
P A R T I I IThe Aqua <strong>Interface</strong>This part of <strong>Apple</strong> <strong>Human</strong> <strong>Interface</strong> <strong>Guidelines</strong> presents Aqua, the look and feel of Mac OS X. Readthis part to learn about the components of an application. You can find out how to enhance theunique aspects of your application by building on the strengths of Aqua.Preliminary © <strong>Apple</strong> Computer, Inc. 200371
P A R T I I IThe Aqua <strong>Interface</strong>72 Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 7User InputLike other graphical user interfaces, Mac OS X is optimized for use with a pointing device, suchas a mouse. Many users, however, prefer or need to interact with the computer using the keyboardinstead of the mouse. In Mac OS X, users have the option of enabling keyboard access for allfunctions available using a point-and-click device.The Mouse and Other Pointing DevicesIn the Macintosh interface, the standard pointing device is the mouse. Users can substitute otherdevices—such as trackballs and stylus pens—that maintain the behavior of direct manipulationof objects on screen.Moving the mouse without pressing the mouse button moves the cursor, or pointer. The onscreencursor can assume different shapes according to the context of the application and the cursor’sposition. For example, in a word processor, the cursor takes the I-beam shape while it’s over thetext and changes to an arrow when it’s over a tools palette. Change the cursor’s shape only toprovide information to the user about changes in the cursor’s function. More information onusing cursors correctly can be found in “Cursors” (page 123).Just moving the mouse changes only the pointer’s location, and possibly its shape. Pressing themouse button indicates the intention to do something, and releasing the mouse button completesthe action.The mouse devices provided with Macintosh computers have only one button, and theseguidelines apply to single-button mice. Other input devices may include additional buttons thatcan be programmed to replicate functionality provided in Mac OS X through keystrokes.ClickingClicking has two components: pushing down on the mouse button and releasing it withoutmoving the mouse. (If the mouse moves between button down and button up, it’s dragging, notclicking.)The effect of a click should be immediate and obvious. If the function of the click is to cause anaction (such as clicking a button), the selection is made when the button is pressed, and the actiontakes place when the button is released. For example, if a user presses down the mouse buttonThe Mouse and Other Pointing Devices 73Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 7User Inputwhile the pointer is over an onscreen button, thereby putting the button in a selected state, andthen moves the pointer off the button before releasing the mouse button, the onscreen button isnot clicked. If the user presses an onscreen button and rolls over another button before releasingthe mouse, neither button is clicked.Double-ClickingDouble-clicking involves a second click that follows immediately after the first click. If the twoclicks are close enough to each other in terms of time (as set by the user in Keyboard & Mousepreferences) and location (usually within a couple of pixels), they constitute a double click.Double-clicking is most commonly used as a shortcut for other actions, such as pressingCommand-O to open a document or dragging to select a word. Because not everyone is physicallyable to perform a double click, it should never be the only way to perform an action.Some applications support triple-clicking. For example, in a word processor, the first click setsthe insertion point, the second click selects the whole word, and the third click selects the wholesentence or paragraph. Supporting more than three clicks is inadvisable.Pressing and HoldingPressing means holding down the mouse button while the mouse remains stationary. Pressingby itself should have no more effect than clicking does, except in well-defined areas, such asscroll arrows, where it has the same effect as repeated clicking, or in a Dock tile where it displaysa menu. For example, pressing a Finder icon should select the icon but not open it.DraggingDragging means pressing the mouse button, moving the mouse to a new position, and releasingthe mouse button. The uses of dragging include selecting blocks of text, choosing a menu item,selecting a range of objects, moving an icon from one place to another, and shrinking or expandingan object.Dragging a graphic object should move the entire object (or a transparent representation of it),not just the object’s outline.Your application can restrict an object from being moved past certain boundaries, such as theedge of a window. If the user drags an object and releases the mouse button outside the boundary,the object stays in the original location. If the user drags the item out of the boundary and thenback in before releasing the mouse button, the object moves to the new location. Your applicationcan also automatically scroll a document if the user moves an object beyond the boundary of awindow (see “Automatic Scrolling” (page 180)).If the user drags a proxy object to an area that would cause that proxy object to disappear, displaythe poof cursor to indicate that the proxy object will disappear if dragged to that location.If the user selects an item and begins a drag but releases the item after having moved it three orfewer pixels, the item does not move.See “Drag and Drop” (page 95) for more information about dragging and automatic scrolling.74 The Mouse and Other Pointing DevicesPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 7User InputThe KeyboardThe keyboard’s primary use is to enter text. The keyboard may also be used for navigation, butit should always be an alternative to using the mouse. For more information about using thekeyboard instead of the mouse, see “Keyboard Focus and Navigation” (page 85).ImportantAvoid assigning any key combinations listed in the tables in thissection to commands other than those specified in the tables.Even if your application doesn’t support all the keyboardequivalents shown, don’t assign unused combinations tocommands that conflict with those specified in this section.The Functions of Specific KeysThere are four kinds of keys: character keys, modifier keys, arrow keys, and function keys. Acharacter key sends a character to the computer. When the user holds down a modifier key, italters the meaning of the character key being pressed or the meaning of a mouse action.Note: Not all the keys described here exist on all Macintosh keyboards. Don’t depend on a keyas the only way for users to accomplish a task.Character KeysCharacter keys include letters, numbers, punctuation, the Space bar, and nonprintingcharacters—Tab, Enter, Return, Delete (or Backspace), Clear, and Escape (Esc). It is essential thatyour application use these keys consistently.Space BarIn text, pressing the Space bar enters a space between characters.When full keyboard access is turned on, pressing the Space bar selects the item that currentlyhas the keyboard navigation focus (the equivalent of clicking the mouse button).TabIn text-oriented applications, the Tab key moves the insertion point to the next tab stop. In othercontexts, Tab is a signal to proceed; it means “move to the next item in a sequence.” The nextitem can be a table cell or a dialog text field. Shift-Tab navigates in the reverse direction. PressingTab can cause data to be entered before focus moves to the next item. For more details aboutnavigating with the Tab key, see “Keyboard Focus and Navigation” (page 85).The Keyboard 75Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 7User InputEnterMost applications add information to a document as soon as the user enters it. In some cases,however, the application may need to wait until a whole collection of information is availablebefore processing it. The Enter key tells the application that the user is through enteringinformation in a particular area of the document, such as a text field. While the user is enteringtext into a text document, pressing Enter has no effect.If a dialog has a default button, pressing Enter (or Return) is the same as clicking it.ReturnIn text, the Return key inserts a carriage return (a line break) and moves the insertion point tothe beginning of the next line. In arrays, the Return key signals movement to the leftmost fieldone step lower (like a carriage return on a typewriter). Like Tab, pressing Return can cause datato be entered before focus moves to the next item.If a dialog has a default button, pressing Return (or Enter) is the same as clicking it.Delete (or Backspace)Generally, if an item is selected, pressing Delete (or Backspace) removes the selection withoutputting it on the Clipboard. If nothing is selected, pressing Delete removes the character precedingthe insertion point, without putting it on the Clipboard. The Delete key has the same effect asthe Delete command in the Edit menu.Note: The Delete key is different from the Forward Delete key (labeled Del), which removescharacters following the insertion point. See “Forward Delete (Forward Del)” (page 81).The Option key can be used to extend a deletion to the next semantic unit (such as a word). TheCommand key can extend a deletion to the next semantic unit beyond that supported by Option.Recommended key combinations for text applications are Command-Delete to delete the previousword and Command–Forward Delete to delete the next word. Option-Delete could delete eitherthe word containing the insertion point or the part of the word to the left of the insertion point,depending on what makes the most sense in your application; Option–Forward Delete coulddelete the part of the word right of the insertion point.ClearThe Clear key has the same effect as the Delete command in the Edit menu: It removes the selectionwithout putting it on the Clipboard. Not all keyboards have a Clear key, so don’t require its usein your application.EscapeThe Escape (Esc) key basically means “let me out of here.” It has specific meanings in certaincontexts. The user can press Escape in the following situations:■■■In a dialog, instead of clicking CancelTo stop an operation in progress (such as printing), instead of pressing Command-periodTo cancel renaming a file or an item in a list76 The KeyboardPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 7User Input■To cancel a drag in progressPressing Escape should never cause the user to back out of an operation that would requireextensive time or work to reenter. When the user presses Escape during a lengthy operation,display a confirmation dialog to be sure that the key wasn’t pressed accidentally.Modifier KeysModifier keys alter the way other keystrokes or mouse clicks are interpreted. You should usethese keys—Shift, Caps Lock, Option, Command, and Control—consistently as described here.ShiftWhen pressed at the same time as a character key, the Shift key produces the uppercase alphabeticletter or the upper symbol on the key.The Shift key is also used with the mouse for extending a selection or for constraining movementsin graphics applications. For example, in some applications pressing Shift while using a rectangletool draws squares.Caps LockWhen activated, the Caps Lock key has the same effect on alphabetic keys as the Shift key, butit has no effect on nonalphabetic keys. When the Caps Lock key is down, the user must pressShift to type the upper character on a nonalphabetic key.OptionWhen used with other keys, the Option key produces special symbols. The Key Caps applicationshows which keys generate each symbol.The Option key can also be used with the mouse to modify the effect of a click or drag. Forexample, in some applications pressing Option while dragging an object makes a copy of theobject.CommandOn most keyboards, the Command key is labeled with a cloverleaf symbol () and an <strong>Apple</strong>logo ( ). Pressing the Command key at the same time as a character key tells the application tointerpret the key as a command rather than a character. These key combinations are describedin “Keyboard Shortcuts” (page 82).In some applications, the Command key is used with other keys to provide special functions orshortcuts. It can also be used with the mouse to modify the effect of a click or drag.ControlThe Control key is used to modify the functions of other keys, with terminal-emulation programsfor Control-key sequences, and, combined with a mouse click, to display contextual menus (see“Contextual Menus” (page 150)).The Keyboard 77Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 7User InputControl-F7 temporarily overrides a user’s preference for default navigation or full keyboardnavigation in windows and dialogs. For more information, see “Keyboard Focus andNavigation” (page 85).Cocoa: Consider additional behaviors, as described in Text System Defaults and KeyBindings in Basic Event Handling in Cocoa Events & Other Input Documentation.Arrow Keys<strong>Apple</strong> keyboards have four arrow keys: Up Arrow, Down Arrow, Left Arrow, and Right Arrow.They can be used alone or in combination with other keys. Keyboard combinations using thearrow keys should be used only for shortcuts for mouse actions. It is never appropriate toimplement only a keyboard combination and not provide a mouse-based way to perform thesame action.Appropriate Uses for the Arrow KeysYou can use arrow keys in these ways:■■■■In text, the arrow keys move the insertion point. When used with the Shift key, they extendor shrink the selection. If the user makes a selection and then presses the Right Arrow or LeftArrow, shrink the selection to zero length and place the insertion point at the right or leftedge of the selection.In lists, the arrow keys change the selection.In a graphics application, the arrow keys can be used to move a selected object the smallestpossible increment (one pixel or one grid unit).In full keyboard access mode, the arrow keys move between values within a control. Thisbehavior is described in “Full Keyboard Access Mode” (page 58).Don’t use the arrow keys to■■move the mouse pointer onscreenduplicate the function of the scroll barsMoving the Insertion PointWhen the insertion point moves vertically in a text document, its horizontal position is maintainedin terms of screen pixels, not characters (in other words, the insertion point could move from thetwenty-fifth character in a line down to the fiftieth character, depending on the font and size).As the insertion point moves from line to line, keep it as close as possible to its original horizontalposition, moving it slightly left or right to the nearest new character boundary.The Option and Command keys are used as semantic modifiers with the arrow keys. As a generalrule, the Option key increases the size of the semantic unit by one compared to the arrow keysalone, and the Command key enlarges the semantic unit again. The application determines whatthe semantic units are. In a word processor, typically the units are characters, words, lines,paragraphs, and documents. In a spreadsheet, a basic semantic unit could be a cell.78 The KeyboardPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 7User InputTable 7-1 describes the appropriate behavior of the arrow keys in text documents and fields. Insome cases, the behavior describes what happens when the indicated keys are pressed more thanonce in succession.Table 7-1Moving the insertion point with the arrow keysKeyMoves insertion pointRight ArrowLeft ArrowUp ArrowDown ArrowOption–Right ArrowOption–Left ArrowOption–Up ArrowOption–Down ArrowCommand–Right ArrowCommand–Left ArrowCommand–Up ArrowCommand–Down ArrowOne character to the rightOne character to the leftTo the line above, to the nearest character boundaryat the same horizontal locationTo the line below, to the nearest character boundaryat the same horizontal locationTo the end of current word, then to the end of the nextwordTo the beginning of the current word, then to thebeginning of the previous wordTo the beginning of the current paragraph, then to thebeginning of the previous paragraphTo the end of the current paragraph, then to the endof the next paragraph (not to the blank line after theparagraph, if there is one)To the next semantic unit, typically the end of thecurrent line, then the end of the next lineTo the previous semantic unit, typically the beginningof the current line, then the previous unitUpward in the next semantic unit, typically thebeginning of the documentDownward in the next semantic unit, typically the endof the documentNote: For non-Roman script systems, Command–Left Arrow and Command–Right Arrow arereserved for changing the direction of keyboard input.Extending Text Selection With the Shift and Arrow KeysTable 7-2 (page 80) describes how to extend text selection by pressing the Shift key with the arrowkeys.If no text is selected, the extension begins at the insertion point. If text is selected by dragging,then the extension begins at the selection boundary. For example, in the phrase stop time, if theuser places the insertion point between the “s” and “t” and then presses Shift–Option–RightThe Keyboard 79Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 7User InputArrow, top is selected. However, if the user double-clicks so the whole word is selected, and thenextends the selection left or up, it’s as if the insertion point were before the “s.” If the user extendsthe selection right or down, it’s as if the insertion point were between the “p” and the space afterthe word.Reversing the direction of the selection deselects the appropriate unit. In the previous example,if the word stop is selected and the user presses Shift–Option–Right Arrow, so stop time is selected,and then presses Shift–Option–Left Arrow, time is deselected and stop remains selected.Table 7-2Extending text selection with the Shift and arrow keysKeysExtends selectionShift–Right ArrowShift–Left ArrowShift–Up ArrowShift–Down ArrowShift–Option–Right ArrowShift–Option–Left ArrowShift–Option–Up ArrowShift–Option–Down ArrowCommand–Shift–Right ArrowCommand–Shift–Left ArrowCommand–Shift–Up ArrowCommand–Shift–Down ArrowOne character to the rightOne character to the leftTo the line above, to the nearest characterboundary at the same horizontal locationTo the line below, to the nearest characterboundary at the same horizontal locationTo the end of the current word, then to the endof the next wordTo the beginning of the current word, then to thebeginning of the previous wordTo the beginning of the current paragraph, thento the beginning of the next paragraphTo the end of the current paragraph, then to theend of the next paragraph (include the blank linebetween paragraphs in cut, copy, and pasteoperations)To the next semantic unit, typically the end ofthe current lineTo the previous semantic unit, typically thebeginning of the current lineUpward in the next semantic unit, typically thebeginning of the documentDownward in the next semantic unit, typicallythe end of the document80 The KeyboardPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 7User InputMoving the Insertion Point in “Empty” DocumentsVarious text-editing programs treat empty documents in different ways. Some assume that anempty document contains no characters, in which case clicking at the bottom of a blank windowcauses the insertion point to appear at the top. In this situation, Down Arrow cannot move theinsertion point into the blank space because there are no characters there.Other applications treat an empty document as a page of space characters, in which case clickingat the bottom of a blank window puts the insertion point where the user has clicked and lets theuser type characters there, overwriting the spaces. Whichever of these methods you choose foryour application, it’s essential that you be consistent throughout.Function KeysThere are 15 nondedicated function keys on desktop Macintosh keyboards (F1 through F15).Default function key combinations are listed in Table 5-1 (page 59). Desktop Macintosh keyboardsprovide the following six dedicated function keys with standard behaviors. Because not allMacintosh computers have all function keys, don’t rely on these keys for critical keyboardshortcuts. For example, portable computers usually have 12 function keys (F1 through F12), not15.HelpPressing the Help key (or Command-? or Command-/) invokes the application’s help in HelpViewer.Forward Delete (Forward Del)Pressing the Forward Delete ( ) key deletes the character after the insertion point, shiftingeverything following the removed character one position back. The effect is that the insertionpoint remains stationary while it “vacuums” the character or selection ahead of it.If something is selected when Forward Delete is pressed, it has the same effect as pressing Delete(Backspace) or choosing Delete from the Edit menu.You can support Option–Forward–Delete to delete the next larger semantic unit, as described in“Moving the Insertion Point” (page 78), but deleting more than one word at a time is inadvisable.Users prefer to select large amounts of text with the mouse so they have more control over whatthey’re deleting.Home, EndPressing the Home key is equivalent to moving the scrollers all the way to the top and to the left.In a text document, for example, pressing Home scrolls to the beginning of the document; in aspreadsheet, it may scroll to the beginning of the spreadsheet or to the beginning of a row. Thesekeys should also work in scrolling lists to display the top or bottom of the list.End is the opposite of Home: It scrolls to the end of a document.If the beginning or end of the document is already reached, pressing Home or End produces asystem alert sound. Pressing the Home or End key has no effect on the location of the insertionpoint or selected data.The Keyboard 81Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 7User InputPage Up, Page DownPressing Page Up or Page Down scrolls the document up or down one page. If an entire pagecan’t be displayed in the window, these keys first scroll incrementally up or down, until the topor bottom of the page is visible, before scrolling to the next page. These keys should also workin scrolling lists.If the beginning or end of the document is reached, pressing Page Up or Page Down producesa system alert sound. Pressing the Page Up or Page Down key has no effect on the location ofthe insertion point or selected data.Keyboard ShortcutsKeyboard shortcuts are used throughout Mac OS X to provide quick ways for user to initiatecertain actions. Many are provided by the operating system to meet both general usability andaccessibility needs. Because of this, the operating system reserves certain keys and keyboardcombinations for its use. These combinations, listed in Table 7-3 and Table 7-4, affect allapplications and should not be used for any other function. Other keyboard shortcuts are usedby the universal access features in Mac OS X and should be avoided unless you are absolutelysure that your users will not be using these features. These are noted in Table 5-1 (page 59) andTable 5-2 (page 60). A complete list of the keyboard shortcuts commonly used in Mac OS X isprovided in “Keyboard Shortcuts Quick Reference” (page 273).You may also define keyboard shortcuts in your application for frequently used commands.Some guidelines on how to decide which shortcuts are appropriate are in “Creating Your OwnKeyboard Shortcuts” (page 83). Other sections of this document suggest keyboard shortcutswhere appropriate to help you maintain a consistent and familiar user experience acrossapplications.Key Combinations Reserved by the SystemDon’t use the keys and combinations Table 7-3 for actions other than those in the table.Table 7-3Keyboard shortcuts reserved by the operating systemKeysEscCommand-TabCommand-Shift-TabCommand-Option-DCommand-HCommand-Option-HCommand-Shift-QActionCancel the current actionActivate the most recently used open applicationActivate the least recently used open applicationShow or hide the DockHide the active applicationHide other applications (all but the active one)Log out82 The KeyboardPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 7User InputKeysCommand-Shift-Option-QCommand-Shift-Option-Control-QCommand-Option-EscControl-F1Control-F7ActionLog out without confirmationForce log out without confirmationOpen Force Quit dialogTurn full keyboard navigation on or offToggle keyboard navigation in windows and dialogsMac OS X also provides full keyboard access mode, in which users can navigate through windowsand dialogs. When this mode is active, other keyboard combinations may be reserved by default.(See “Full Keyboard Access Mode” (page 58).)Table 7-4 shows several key combinations that are reserved for use with localized versions ofsystem software, localized keyboards, keyboard layouts, and input methods. These keycombinations don’t correspond directly to menu commands.Table 7-4Key combinations reserved for international systemsKeysActionCommand–Space barCommand–Option–Space barCommand–modifier key–Space barCommand–Right ArrowCommand–Left ArrowRotate through enabled script systemsRotate through keyboard layouts and inputmethods within a script<strong>Apple</strong> reservedChange keyboard layout to current layout ofRoman scriptChange keyboard layout to current layout ofsystem scriptImportantYour application should not override the implementation ofkeyboard focus and navigation in Mac OS X. These featuresprovide functionality for users with special needs.Creating Your Own Keyboard Shortcuts<strong>Apple</strong> reserves the right to reserve other keyboard shortcuts in the future, so be careful aboutadding your own. Add them only for frequently used commands, not for every command.Use the Command key as the main modifier key for keyboard equivalents. For a command thatcomplements another more common command, you can add Shift. The table below shows somerecommended keyboard equivalents using Shift and their relation with the command theycomplement.The Keyboard 83Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 7User InputTable 7-5Some of the recommended keyboard shortcuts using Shift to complement other commandsKeysCommand-Shift-ACommand-Shift-GCommand-Shift-PCommand-Shift-SCommand-Shift-VCommand-Shift-ZCommandDeselect AllFind PreviousPage SetupSave AsPaste as (Quotation, forexample)RedoComplemented commandCommand-A (Select All)Command-G (Find Again)Command-P (Print)Command-S (Save)Command-V (Paste)Command-Z (Undo)Note: Command-Shift-Z would be used for Redo only if Undo and Redo are separate commands(rather than toggled using Command-Z).If there’s a third, less common command that’s related to a pair of commands that use Commandand Command-Shift, you can use Command-Option for the third command’s keyboard equivalent.In the example in Table 7-6, Save All could be a dynamic menu item (see “Naming MenuItems” (page 131)) that appears in place of Save when the user presses the Option key (rather thana separate menu item). Use combinations like these very rarely.Table 7-6Example of using Option to modify a shortcut already using CommandKeysCommandCommand-SCommand-Shift-SCommand-Option-SSaveSave AsSave AllAlso use Option for a keyboard shortcut that is a convenience or power user feature. For example,the Finder uses Command-Option-W for Close All Windows and Command-Option-M forMinimize All Windows.Because the Command key is already used by some of the universal access features as well as intext fields where emacs style key bindings are often used, it should be used as a modifier keyonly when necessary.Remember that other languages may require modifier keys to generate certain characters. Forexample, on a French keyboard, Option-5 generates the “{“ character. You can safely use theCommand key as a modifier, but avoid using Command and an additional modifier withcharacters not available on all keyboards. If you must use a modifier key in addition to theCommand key, try to use it only with the alphabetic characters (a through z).84 The KeyboardPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 7User InputUser-Defined Keyboard ShortcutsUsers may modify your application’s keyboard shortcuts and some of the system in Keyboardand Mouse Preferences. Even though users can remap keyboard shortcuts, you should adhereto the shortcuts recommended throughout this document. See “Keyboard Shortcuts QuickReference” (page 273) for a list of all the reserved and recommended combinations. Doing soprovides a more consistent user experience.Keyboard Focus and NavigationIn default keyboard access mode, focus moves only between fields that receive keyboard input.Mac OS X also provides the option of full keyboard access mode, in which users can navigatethrough windows and dialogs. This section discusses the default keyboard access mode. Forinformation on the full keyboard access mode, see “Full Keyboard Access Mode” (page 58).When using the mouse is undesirable, difficult, or impossible, users can move the onscreen focus(highlight) with the keyboard to access text entry fields, list boxes that support type-ahead,scrolling lists, column views, and list views. In Roman systems, focus always begins at the firstfield that accepts keyboard input and follows a reading path from upper left to bottom right.Focus is indicated with a ring in the appearance color (Aqua or Graphite) as shown in Figure7-1 and Figure 7-2.Figure 7-1Keyboard focus for a text fieldFocus ringFigure 7-2Keyboard focus for a scrolling listFocus ringThe Keyboard 85Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 7User InputIn list and column views, selected items should be highlighted to the full column width or rowheight. In column view, the selected item has a dark highlight and the parent item has a lighterhighlight. When a window becomes inactive, all selections inside it should become the lighterhighlight color.Figure 7-3Primary highlight color on child item, secondary color on parentSecondaryhighlight colorPrimaryhighlight colorFocus ringPressing the Tab key navigates between controls. Shift-Tab navigates in reverse direction. Thearrow keys provide navigation within controls. In list views, the right and left arrow keys openand close disclosure triangles.Type-Ahead and Key-RepeatIf the user types faster than the computer can handle or when the computer is unable to processthe keystrokes, the keystrokes are queued for later processing. This queuing is called type-ahead.There is a limit (varying with the computer) to the number of keystrokes that can be queued, butit’s usually not reached unless the user types while the application is performing a lengthyoperation.When a character key is held down for a certain amount of time, it starts repeating automatically.The user can make adjustments to this feature, called key-repeat, in Mouse & Keyboardpreferences.An application can tell whether keystrokes are generated by key-repeat or by the same key beingpressed numerous times. Your application can disregard key-repeat keystrokes; it should ignorethem in keyboard shortcuts that begin with the Command key.Key-repeat works only when the application is ready to accept keyboard input; it does not functionduring type-ahead.SelectingBefore performing an operation on an object, the user must select it to distinguish it from otherobjects. There is always immediate visual feedback to show that something is selected.86 SelectingPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 7User InputSelecting an object never alters the object itself, and a selection is always undoable by clickingoutside the selection.How something is selected depends on what it is. It’s useful to distinguish among three types ofobjects that are each dealt with in a different way when selected:■■■Text. An application considers all text appearing together in a particular context as a blockof text—a one-dimensional string of characters. A block of text can range from a single field,as in a dialog, to an entire document, as in a word processor. Regardless of where it appears,text is edited in the same way.Arrays are tabular arrangements of fields. A one-dimensional array of fields is a list and atwo-dimensional array is a table. Each field contains information such as text or graphics.Graphics. For the purposes of this discussion, a graphic, or picture, is a discrete object thatcan be selected individually.The following sections discuss the general methods of selecting and the specific methods thatapply to text, arrays, and graphics.Selection MethodsThis section describes selection techniques.Selection by ClickingThe most straightforward method of selecting an object is by clicking it once. Icons, for example,are selected in this way.Figure 7-4Selection of a single itemSelection by DraggingThe user can select a range of some objects by following this procedure:1. The user positions the pointer at one corner of the range and presses the mouse button. Thisposition is called the anchor point of the range.2. Without releasing the mouse button, the user moves the pointer in any direction.As the pointer moves, visual feedback indicates the objects that would be selected if themouse button is released. For text and arrays, the selected area is continuously highlighted.For graphics, a dotted rectangle expands or contracts to show the selected area. If appropriate,the view should scroll to allow extending the selection beyond a window.Selecting 87Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 7User Input3. When the desired range is selected, the user releases the mouse button. The point at whichthe button is released is called the active end of the range.Figure 7-5Range selectionChanging a SelectionA user can extend a selection by holding down the Shift key and clicking the mouse button. Thisaction is called Shift-clicking.In text, if the user Shift-clicks within an already selected range, the new range is smaller than theold range.In an array, a Shift-click can extend the selected range or it can move the selection from the currentcell to wherever the user Shift-clicks.There are two models for extending a continuous selection using Shift-click. In the additionmodel, new text is added to a current selection. In the fixed-point model, the user can extendthe selection on either side of the insertion point. Figure 7-6 illustrates the results of threeconsecutive steps in both models.Figure 7-6Shift-clicking in the addition model and the fixed-point modelAddition modelFixed-point modelUser sets insertion pointby clicking before theword "attention".User extends the selectionto the right by Shift-clickingafter the word "behind".User extends the selectionto the left by Shift-clickingbefore the word "Pay".User extends the selectionto the right by Shift-clickingat the end of the sentence.When considering which model to use in your application, keep in mind that the addition modelprovides more flexibility by allowing users to extend a selection in both directions.88 SelectingPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 7User InputA Shift-click should result in a continuous selection—the selection is extended to includeeverything between the old anchor point and the new active end. A Command-click should resultin a discontinuous selection. With discontinuous selection, in which the user can extend aselection by adding nonadjacent objects to already selected objects, and the objects between thecurrent selection and the new object are not included in the selection.Figure 7-7Discontinuous selectionIn arrays and text in which Shift-click extends a continuous selection, the user can makediscontinuous selections by holding down the Command key and clicking. Each Command-clickadds the new object to the existing selection. If one of the objects selected with Command-clickis already within an existing part of the selection, then it is removed from the selection insteadof being added.Figure 7-8Discontinuous selection within an arrayA B C D1. Cells B2, B3, C2 andC3 are selected.12345A B C D2. The user holds downthe Command key andclicks in D5.3. The user holds downthe Command key andclicks in C3.1234512345A B C DNot all applications support discontinuous selections, and those that do might restrict theoperations a user can perform on them. For example, a word processor might allow the user tochoose a font after making a discontinuous selection, but not allow the user to type replacementcharacters, because it wouldn’t be obvious which part of the selection the characters wouldreplace.Selecting 89Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 7User InputSelections in TextA block of text is a string of characters. A text selection is a substring of this string, which hasany length from zero characters to the whole block.The insertion point (a zero-length text selection) shows where text will be inserted when theuser starts typing, or where the contents of the Clipboard will be pasted. The user establishes thelocation of the insertion point by clicking somewhere in the text; the insertion point appears atthe nearest character boundary. If the user clicks anywhere to the right of the last character on aline, the insertion point appears immediately after the last character. If the user clicks to the leftof the first character on a line, the insertion point appears immediately before the first character.Selected text in a window is highlighted with the color chosen by the user in Appearancepreferences. When the window becomes inactive, the text should remain highlighted, but in thesecondary color, which is a percentage of the original highlight color. Both Carbon and Cocoaprovide a way to return the current highlight color, as well as other important colors in the userinterface. Your application should use these defined colors in any custom controls you create,rather than hard-coding in specific color values.Selecting With the MouseThe user can select a range of text by dragging. A range can consist of characters, words, lines,or paragraphs, as defined by the application.In text fields, clicking should perform the following actions:■■■■Single-clicking places the insertion point at the pointer’s location in the text.Double-clicking within a word selects the word. The selection should provide “smart”behavior; if the user deletes the selected word, for example, the space after the word shouldalso be deleted.Double-clicking in a space selects the space.Triple-clicking selects the next logical unit, as defined by the application. In a word-processingdocument, triple-clicking in a word selects the paragraph containing the word.What Constitutes a WordThe following definition of a word applies in the United States, Canada, and some other countries.In many countries, the definition differs to reflect local formats for numbers, dates, and currency.Double-clicking a character not in the list below results in the selection of only that character.A word is defined as any continuous string that contains any of the following characters:■■■a lettera digita nonbreaking space (Option–Spacebar or Command–SpaceBar)■ a currency symbol ($, ¢, ¬§, £, ¥)■a percent sign90 SelectingPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 7User Input■■■■a comma between digitsa period before a digitan apostrophe between letters or digitsa hyphen, but not an en dash (Option–hyphen) or em dash (Shift–Option–hyphen)These are examples of words:■ $123,456.78■■shouldn’t3 1/2 (with a nonbreaking space)■ 0.5%These are examples of strings treated as more than one word:■ 7/10/6■■blue cheese (with a regular space)“Wow!” (The quotation marks and exclamation point are not part of the word.)In some contexts—in a programming language, for example—it may be appropriate to allowusers to select both the left and right parentheses (or braces or brackets) in a pair, as well as allthe characters between them, by double-clicking either one of them. That would mean that a usercould select the entire expression[x+y–(4*3)^(n–1)]by double-clicking [ or ].Selecting Text With the Arrow KeysSee “Extending Text Selection With the Shift and Arrow Keys” (page 79).Selections in SpreadsheetsTo select a single field (cell), the user clicks in it. The user can also select a field by moving to itwith the Tab or Return key.To select part of the contents of a field, the user must first select the field, then click again to selecta part.A user should be able to quickly select a row or column in a table—for example, clicking a columnheading should select the column. Tables can also support Command-click for selectingdiscontinuous fields.Pressing the Tab key cycles through the fields in an order determined by your application, andShift-Tab navigates in the opposite direction. Typically, the sequence is from left to right, thenfrom top to bottom. Pressing Tab from the last field selects the first field.Selecting 91Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 7User InputIf the concept of rows doesn’t make sense in a particular context, the Return key should have thesame effect as the Tab key.Selections in GraphicsThere are several conventions for selecting graphic objects. This section describes two ways toshow selection feedback; other situations may require other solutions.An object-based graphics document is a collection of individual graphic objects. To select anobject, the user clicks it once. The object is then bracketed with handles, which the user can useto move or resize the object.In object-based graphics documents, users can select with the mouse alone or a combination ofthe mouse and the keyboard. A user can drag a dotted rectangle and select every object that isincluded, even partially, within the rectangle’s outline. The user can also select an initial objectand then use Shift-click or Command-click to select other objects. If the objects have a definedorder, Shift-click should result in a continuous selection and Command-click should provide adiscontinuous selection. If the order is not defined, then both actions result in a discontinuousselection. Examples of continuous and discontinuous selections are shown in “SelectionMethods” (page 87).In a bitmap-based graphics document—where images are a series of pixels rather than discreteobjects—a user selects the range of pixels enclosed within a selection tool.Editing TextIn addition to the methods for selecting text, there are a number of standard ways to edit text.Inserting TextTo insert text, the user positions the insertion point by clicking where the text is to go, then startstyping. The application moves the insertion point to the right (or left, depending on the language)as each new character is added.Applications with multiple-line text blocks should support word wrap, the automatic continuationof text from the end of one line to the beginning of the next without breaking in the middle of aword.Deleting TextWhen the user presses the Delete (or Backspace) key, one of two things happens:■■If text is selected, the entire selection is deleted.If there is no current selection, the character preceding the insertion point is deleted.92 Editing TextPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 7User InputIn either case, the insertion point replaces the deleted character or characters in the document.The deleted characters don’t go on to the Clipboard, but the user can undo the deletion byimmediately choosing Undo from the Edit menu.You can also implement the keyboard combination Option-Delete (or Option-Backspace) to deletethe word that currently contains the insertion point or to delete the part of the word to the leftof the insertion point. Be sure to document this behavior if you implement it.If a keyboard has a Forward Delete (Del) key, the character following the insertion point is deletedeach time the user presses the key.Replacing a SelectionIf the user starts typing when one or more characters are selected, the typed characters replacethe selection. The deleted characters don’t go on to the Clipboard, but the user can undo thereplacement by immediately choosing Undo from the Edit menu.Intelligent Cut and PasteIntelligent cut and paste is a set of editing features that takes into account the need for spacesbetween words. To understand why this feature is helpful, consider the following sequence ofevents in a text application without intelligent cut and paste:1. A sentence in the user’s document readsReturns are only accepted if the merchandise is damaged.The user wants to change this toReturns are accepted only if the merchandise is damaged.2. The user selects the word only by double-clicking. The letters are highlighted, but neitheradjacent space is selected.3. The user chooses Cut from the Edit menu, clicks just before the word if, and chooses Paste.4. The sentence now readsReturns areaccepted onlyif the merchandise is damaged.To correct the sentence, the user has to remove the extra space between are and accepted, andadd a space between only and if.If your application supports intelligent cut and paste, follow these guidelines:■■If the user selects a word or a range of words, the selection itself is highlighted, but spacesadjacent to the selection are not highlighted.When the user chooses Cut, if the character preceding the selection is a space, cut that spacealong with the selection. If the character preceding the selection is not a space, but the characterfollowing the selection is a space, cut that space along with the selection.Editing Text 93Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 7User Input■When the user chooses Paste, if the character to the left or right of the current selection is partof a word (but not inside a word), insert a space before pasting.Use intelligent cut and paste only if the application supports the definition of a word as describedin “What Constitutes a Word” (page 90). These rules apply to any selection consisting of one ormore whole words, no matter how the user made the selection.Note: Intelligent cut and paste doesn’t apply to all languages. Thai, Chinese, and Japanese, forexample, don’t contain spaces.Editing Text FieldsIf your application isn’t primarily a text application, but it has text entry fields in dialogs, forexample, you may not need to provide the full text-editing features described in this section. Theapplication should support the following features:■■■The user can select the whole field and type in a new value, delete text, select a substring ofthe field and replace it, and select a word by double-clicking.The user can choose Undo, Cut, Copy, Paste, and Delete, as described in “The EditMenu” (page 144).The application performs appropriate edit checks. For example, if the only legitimate valuefor a field is a string of digits, the application should alert the user if any nondigits are typed.For a more complete discussion of when to check for errors and apply changes in text fields,see “Accepting Changes” (page 193).When possible, support automatically filling in text fields as users type. You might fill in a fieldwith frequently typed information or information from a history list. If you do this, indicate whatyou are automatically filling in, perhaps by highlighting it, so it is clear what the user has typedand what information your application is providing.Entering PasswordsWhen a user types a password into a text field, each typed character should appear as a bullet,matching the number of characters typed by the user. If the user deletes a character with theDelete key, one bullet is deleted from the text field and the insertion point moves back one bullet,as if the bullet represented an actual character. Double-clicking bulleted text in a password fieldselects all the bullets in the text field.When the user leaves the text field (by pressing Tab, for example), the number of bullets in thetext field should be modified so that the field does not reflect the actual number of characters inthe password.94 Editing TextPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 8Drag and DropThe technique of dragging an item and dropping it on a suitable destination is called drag anddrop.In this chapter, an item is anything that the user can select, such as text, graphics, and icons. Forconvenience, this chapter assumes that the user is dragging with the mouse, but these guidelinesalso apply to other input devices such as pens and trackballs.The Finder provides a focus to indicate the target for a drop.Drag and Drop OverviewIdeally, users should be able to drag any content from any window to any other window thataccepts the content’s type. If the source and destination are not visible at the same time, the usercan create a clipping by dragging data to a Finder window; the clipping can then be draggedinto another application window at another time.Drag and drop should be considered an ease-of-use technique. Except in cases where drag anddrop is so intrinsic to an application that no suitable alternative methods exist—dragging iconsin the Finder, for example—there should always be another method for accomplishing adrag-and-drop task.The basic steps of the drag-and-drop interaction model parallel a copy-and-paste sequence inwhich you select an item, choose Copy from the Edit menu, specify a destination, and then choosePaste. However, drag and drop is a distinct technique in itself and does not use the Clipboard.Users can take advantage of both the Clipboard and drag and drop without side effects fromeach other.A drag-and-drop operation should provide immediate feedback at the significant points: whenthe data is selected, during the drag, when an appropriate destination is reached, and when thedata is dropped. The data that is pasted should be target-specific. For example, if a user dragsan Address Book entry to the “To” text field in Mail, only the email address is pasted, not all ofthe person’s address information.Drag and Drop Overview 95Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 8Drag and DropYou should implement Undo for any drag-and-drop operation you enable in your application.If you implement a drag-and-drop operation that is not undoable, display a confirmation dialogbefore implementing the drop. A confirmation dialog appears, for example, when the userattempts to drop an icon into a write-only drop box on a shared volume, because the user doesnot have privileges to open the drop box and undo the action.Drag and Drop SemanticsYour application must determine whether to move or copy a dragged item after it is droppedon a destination. The appropriate behavior depends on the context of the drag-and-drop operation,as described in this section.Move Versus CopyIf the source and destination are in the same container (for example, a window or a volume), adrag-and-drop operation is interpreted as a move (that is, cut and paste). Dragging an item fromone container to another initiates a copy (copy and paste). The user can perform a copy operationwithin the same container by pressing the Option key while dragging. When performing a copyoperation, indicate a copy operation to the user by using the copy cursor. (See “StandardCursors” (page 123).)When determining whether to move or copy a dragged item, you must consider the underlyingdata structure of the contents in the destination window. For example, if your application allowstwo windows to display the same document (multiple views of the same data), a drag-and-dropoperation between these two windows should result in a move.The principle driving these drag-and-drop guidelines is to prevent the user from accidental dataloss. Moving data across applications may result in potential data loss because an Undo commandin the destination application does not trigger an Undo in the source application. Moving datawithin the same window (or same volume, as in the case of the Finder) does not lead to data loss.Table 8-1Common drag-and-drop operations and resultsDragged itemData in a documentData in a documentData in a documentFinder iconFinder iconFinder iconDestinationThe same documentAnother documentThe FinderAn open document windowThe same volumeAnother volumeResultMoveCopyCopy (creates a clipping)CopyMoveCopy96 Drag and Drop SemanticsPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 8Drag and DropWhen to Check the Option Key StateYour application should check whether the Option key is pressed at drop time. This behaviorgives the user the flexibility of making the move-or-copy decision at a later point in thedrag-and-drop sequence. Pressing the Option key during the drag-and-drop sequence shouldnot “latch” for the remainder of the sequence.Note: The Option key does not act as a toggle switch; Option-dragging between containersalways initiates a copy operation. This guideline allows users to learn that Option means copy.Selection FeedbackThis section covers issues that deserve special mention in the context of drag and drop. Selectionfeedback is discussed in more detail in “Selecting” (page 86).Single-Gesture Selection and DraggingBecause dragging is defined as moving the mouse while the mouse button is held down, amouse-down event must occur before dragging can take place. A selection may be made as aresult of this mouse-down event, just before the user starts dragging. For example, the user canselect and drag a folder icon in a single gesture; the user does not have to click the folder iconfirst, release the mouse button, and then press again to begin dragging the icon. Your applicationshould ensure that implicit selection occurs, when appropriate, when the user starts dragging.Single-gesture selection and dragging is possible only when the process of selecting an item doesnot require dragging. Range-selection operations—such as selecting text or dragging a marqueearound graphic objects—don’t lend themselves to single-gesture selection and dragging becausethe range-selection operation itself requires dragging.Background SelectionsWhen a window containing a highlighted selection becomes inactive, your application shouldmaintain the selection so that users can drag previously selected data from inactive windows tothe active window.Background selections are not required if the dragged item is discrete, such as an icon or graphicalobject, because implicit selection can occur when an item is dragged. However, items selectedonly by range-selection operations such as text or a group of icons must have a backgroundselection to allow the user to drag these items out of inactive windows. Whenever an inactivewindow is made key, the background selection, if any, becomes highlighted as a normal selection.Selection Feedback 97Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 8Drag and DropDrag FeedbackYour application should provide drag feedback as soon as the user drags an item at least threepixels. If a user holds the mouse button down on an object or selected text, it should becomedraggable immediately and stay draggable as long as the mouse remains down. Typically,applications have to provide an image to drag and have to handle the receiver frame. In Aqua,dragged items are transparent.Note: Proxy icons are an exception in that they are not immediately draggable. Since the proxyicon is in the title bar of a window where a user often clicks to initiate moving a window, a proxyicon requires a user to hold the mouse down for a couple seconds before it becomes draggable.Destination FeedbackIf the user drags an item to a destination in your application, your application provides feedbackthat indicates whether it will accept that item. Destination feedback should not occur simplybecause your application is “drag-aware”; rather, it should depend on the destination’s abilityto accept the type of data contained in the dragged item. For example, a text entry field thataccepts only text should not be highlighted when the dragged item is a graphic.Use cursors to indicate what result letting go of the mouse will have. For example, if you aredragging an icon out of a toolbar, show the poof cursor when the user has the icon outside of thetoolbar to indicate that if they let go of it there, the item will disappear. Other cursors that provideuseful feedback during a drag operation include the alias, copy, and not allowed cursors. See“Cursors” (page 123) for more information on the cursors available in Mac OS X.Carbon: The actual appearance of destination feedback depends on the type ofdestination. The Drag Manager provides some utilities for simple highlighting; if yourapplication needs more complex highlighting, you must provide your own highlightingutilities.WindowsThe valid destination region of a document window is usually the window’s content area minusthe title bar and areas used for controls (such as scroll bars, resize controls, tool palettes, rulers,and placards). When there are multiple destination regions within a window, only one destinationregion is highlighted at a time.When the user drags an acceptable item from one destination region to another, your applicationhighlights the destination region as soon as the pointer enters it, and removes the highlightingwhen the pointer leaves the region.If a drag-and-drop operation takes place entirely within one destination region (moving adocument icon to a different location in the same folder window, for example), don’t highlightthe destination region, to avoid distracting the user. However, if the user drags an item completelyout of a destination region and then drags the same item back to the same destination region,the destination region should be highlighted.98 Drag FeedbackPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 8Drag and DropYou can provide more specific destination feedback within a larger destination region. Forexample, when the user drags text from one document window to another, the inactive windowshould display an insertion point where the dragged text would go if the user releases the mousebutton.In many situations, highlighting a more narrowly defined area of a window is more appropriatethan highlighting the entire content region; examples are spreadsheets, text boxes, fill-in forms,and panes. In these cases, the destination region must be tailored to more precisely indicate thespecific destination.TextWhile the user is dragging an item to a text area, an insertion indicator (a vertical bar) shouldappear in the text where the dragged item would be inserted if the user releases the mouse button.ListsAn insertion indicator should appear in a list where a dragged item would be inserted if the userreleases the mouse button. For example, when a user drags an item into the sidebar of the Finder,a horizontal insertion indicator appears.Multiple Dragged ItemsIf the user drags multiple items, the destination feedback should occur only if it can accept all ofthe dragged items. If the destination cannot accept all of the dragged items, the user’s attemptresults in feedback as described in “Feedback for an Invalid Drop” (page 101).When the destination can accept all of the dragged items, the destination should accept them inthe order specified by the source. The source application should organize the dragged items inthe order in which they were selected, except in two cases. If the dragged items come from orderedviews (such as View by Date or an alphabetized list), that view’s ordering takes precedence overthe selection order. If both the source and destination provide a spatial ordering (such as ingraphic applications), the spatial ordering takes precedence over the selection order.Automatic ScrollingWhen an item is being dragged, your application must determine whether to scroll the contentsor allow the item to “escape” the window. If your application allows items to be dragged outsideof windows, you should define an automatic scrolling region. Automatically scroll a destinationwindow only if it is also the source window and is frontmost. Don’t automatically scroll inactivewindows.Destination Feedback 99Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 8Drag and DropUsing the Trash as a DestinationDragging items to the Trash results in moving the item from the source to the Trash. For example,dragging a text selection from a word-processing application and dropping it on the Trash icon(or in the Trash window) results in the text being deleted from the application and a clippingcontaining that text being created inside the Trash. Note that the item is moved, although it isdragged between two containers. This exception to the rules described earlier is appropriatebecause the user can undo the operation by dragging the clipping out of the Trash back to itsoriginal source; it is consistent with the principle of preventing accidental data loss.It is important to preserve the Trash’s container property; do not simply delete the source withoutcreating a clipping or other item in the Trash.Drop FeedbackWhen the user releases the mouse button after dragging an item to a destination, feedback shouldinform the user that the drag-and-drop operation was successful. While this feedback can bevisual, it is primarily behavioral in nature. The behavior comes from the semantic operationindicated by the drag-and-drop sequence.Finder IconsWhen the user moves an item by dropping its icon on a folder icon, the dropped icon disappearsand the highlighting is removed from the destination folder icon.If an icon represents a task, such as printing, you may want to provide progress feedback toindicate that the task is being carried out.GraphicsWhen dropping graphics, the drop feedback is usually the movement of the actual item to thelocation of the mouse-up event.TextAfter text is dropped, it is shown highlighted at its destination.When text is dropped in a destination that supports styled text, the dropped text should maintainits font, typeface, and size attributes. If the destination does not support styled text, the droppedtext should assume the font, typeface, and size attributes specified by the destination insertionpoint.Drag-and-drop operations involving text should support intelligent cut-and-paste rules, asexplained in “Intelligent Cut and Paste” (page 93).100 Drop FeedbackPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 8Drag and DropTransferring a SelectionAfter a successful drag-and-drop sequence involving a single window, the selection feedback ismaintained at the new location. This behavior provides an important user cue and allows theuser to reposition the selection without having to make the selection again.If the user drags an item from an active window to an inactive window, the dragged item becomesa background selection at the destination; the selection in the active window remains selected.This guideline also applies in the reverse situation, where an item is dragged from an inactivewindow to an active window.When content is dropped into a window in which something is selected, your application shoulddeselect everything in the destination before the drop, rather than replacing the selection withthe dragged item.Feedback for an Invalid DropIf a user attempts to drop an item on a destination that does not accept it, the item zooms fromits mouse-up location back to its source location (a “zoomback”). The zoomback behavior shouldalso occur when a drop inside a valid destination does not result in a successful operation.If the user attempts to drag multiple items to a destination that does not accept all of the items,none of the items should be accepted. In such cases you could display a dialog informing theuser of the type of data the destination accepts and which items in the dragged set cannot beaccepted.ClippingsWhen an item is dragged from an application to the desktop, a clipping is created that containsthe data in the dragged item. If discontinuous selections are dragged from a source to the Finder,a separate clipping is created for each selected item.Your application should provide a number of representations (such as TEXT, PICT, and nativeformats) to ensure flexibility with different subsequent destinations. Regardless of whichrepresentations are stored, round-trip data integrity should be preserved; a clipping draggedback into its source should be identical to the original item.Clippings 101Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 8Drag and Drop102 ClippingsPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 9TextAlthough Mac OS X uses graphics as a primary means of user-computer interaction, text isprevalent throughout the interface for such things as button names, pop-up menu labels, dialogmessages, and onscreen help. Using text consistently and clearly is a critical component of interfacedesign.Your product team should include a skilled writer who is responsible for reviewing all user-visibleonscreen text as well as creating the instructional documentation.FontsMac OS X supports standard fonts for interface elements. Whenever your application specifiesa font, use the system-defined constants shown in Table 9-1; avoid naming a specific font andpoint size. Using the system constants ensures that your application always displays theappropriate fonts, regardless of changes to the Mac OS.The system font (Lucida Grande Regular 13 pt) is used for text in menus, modeless dialogs, manycontrols, and titles of document windows. For an example of this font, open a Finder menu.Use the emphasized system font (Lucida Grande Bold 13 pt) sparingly. Emphasized (bold)system font is used in only two places in the interface: the application name in an About window(see “The About Window” (page 182)) and the message text in an alert (see Figure 14-2 (page190)).The small system font (Lucida Grande Regular 11 pt) is used for informative text in alerts (seeFigure 14-2 (page 190)). It is also the default font for headings in lists, for help tags, and for textin the small versions of many controls. You can also use it to provide additional informationabout settings in various windows, such as the QuickTime pane in System Preferences.Use the emphasized small system font (Lucida Grande Bold 11 pt) sparingly. You might use itto title a group of settings that appear without a group box, or for brief informative text belowa text field. For an example of the emphasized small system font, see the Formats pane inInternational preferences.If necessary, the mini system font (Lucida Grande Regular 9 pt) can be used for utility windowlabels and text.Fonts 103Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 9TextAn emphasized mini system font (Lucida Grande Bold 9 pt) is available for cases where theemphasized small system font is too large.If your application creates text documents, use the application font (Lucida Grande Regular 13pt) as the default font for user-created content.The label font (Lucida Grande Regular 10 pt) is used for labels with controls such as sliders andicon bevel buttons. You should rarely need to use this font in dialogs, but may find it useful inutility windows when space is at a premium. For an example of this font used to label a slidercontrol, see the Spoken User <strong>Interface</strong> pane in Speech preferences.Use the view font (Lucida Grande Regular 12pt) as the default font of text in lists and tables.All user-visible text in your application should be anti-aliased, which is automatic if you use oneof the standard system fonts.Table 9-1 shows the constants to use in Carbon functions and the NSFont methods to use inCocoa.Table 9-1Carbon constants and Cocoa methods for system fontsFontSystem fontEmphasized systemfontSmall system fontCarbon constantskThemeSystemFontkThemeEmphasizedSystemFontkThemeSmallSystemFontCocoa methods[NSFontsystemFontSizeForControlSize:NSRegularControlSize][NSFontboldsystemFontOfSize:[NSFontsystemFontSizeForControlSize:NSRegularControlSize]][NSFontsystemFontSizeForControlSize:NSSmallControlSize]Emphasized smallsystem fontkThemeSmallEmphazisedSystemFont [NSFontboldSystemFontOfSize:[NSFontsystemFontSizeForControlSize:NSSmallControlSize]]Mini system fontEmphasized minisystem fontApplication fontkThemeMiniSystemFontNot AvailablekThemeApplicationFont[NSFontsystemFontSizeForControlSize:NSMiniControlSize][NSFontboldSystemFontOfSize:[NSFontsystemFontSizeForControlSize:NSMiniControlSize]][NSFont userFontOfSize:[NSFont]]104 FontsPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 9TextFontCarbon constantsCocoa methodsLabel fontkThemeLabelFont[NSFontlabelFontOfSize:[NSFontlabelFontSize]]StyleThe <strong>Apple</strong> Publications Style Guide defines style and usage issues, and is the key reference for how<strong>Apple</strong> uses language. This document is available at the Mac OS X developer documentationwebsite; consult it whenever you have a question about the preferred style of particular terms.For issues that aren’t covered in the <strong>Apple</strong> Publication Style Guide, <strong>Apple</strong> recommends three otherworks: The American Heritage Dictionary, The Chicago Manual of Style, and Words Into Type. In caseswhere these books give conflicting rules, The Chicago Manual of Style takes precedence for questionsof usage and The American Heritage Dictionary for questions of spelling.The rest of this section discusses specific details of how to present your text in a style that integratesproperly with the Aqua user interface.Using EllipsesAn ellipsis character (…) after a menu item or button label indicates to the user that additionalinformation is required to complete a command. You should use an ellipsis in the followingcases:■■An action that requires further user input to complete or presents an alert allowing the userto cancel the action. Examples include Find, Go To, Open, Page Setup, and Print.An action that opens a settings window. The main function of settings windows is to allowthe user to change some aspect of the application, not the document content. Examples includeSet Title, Preferences, and Options.Don’t use an ellipsis in the following cases:■■An action that requires no further user input to complete and does not present an alert. Oftenthe item to be acted upon is already selected. Examples include New, Cut, Bold, and Quit.An action that opens an informational, accessory, or tool window. These windows can beimplemented as either utility windows (as in the case of a color palette) or modeless windows.These windows provide tools that help create or manage the content in the main windowand are frequently left open to assist in accomplishing the task of the main window. Examplesinclude Get Info and Show Tools.Labels for <strong>Interface</strong> ElementsMake labels for interface elements easy to understand and in the user’s language. Try to be asspecific as possible in any element that requires the user to make a choice, such as radio buttons,checkboxes, and push buttons. It’s important to be concise, but don’t sacrifice clarity for space.Style 105Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 9TextMenu items and buttons that produce a dialog should include an ellipses character (…). See“Using Ellipses” (page 105) for details on when to use ellipses. The dialog title should be the sameas the menu command or button label (except for the ellipses).Capitalization of <strong>Interface</strong> ElementsTitle style means that you capitalize every word except:■■■Articles (a, an, the)Coordinating conjunctions (and, or)Prepositions of three or fewer letters, except when the preposition is part of a verb phrase,as in “Starting Up the Computer.”In title style, always capitalize the first and last word, even if it is an article, a conjunction, or apreposition of three or fewer letters.Sentence style means that the first word is capitalized, and the rest of the words are lowercase,unless they are proper nouns or proper adjectives. Use periods in dialogs only after completesentences.Table 9-2Proper capitalization of onscreen elementsElementMenu titlesMenu itemsCapitalization styleTitleTitleExamplesSee the Highlight Color pop-upmenu in Appearancepreferences.Save as DraftSave As…Log OutMake AliasGo To…Go to Page…Outgoing MailPush buttonsTitleAdd to FavoritesDon’t SaveSet Up PrintersRestore Defaults106 StylePreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 9TextSet Key RepeatElementLabels that are not fullsentences (for example, groupbox or list headings)Capitalization styleTitleExamplesMouse SpeedTotal Connection TimeAccount TypeOptions that are not strictlylabels (for example, radiobutton or checkbox text), evenif they are not full sentencesSentenceEnable polling for remotemail.Cache DNS informationevery ___ minutes.Show displays in menu bar.Maximum number ofdownloadsDialog messagesSentenceAre you sure you want toquit?Using Contractions in the <strong>Interface</strong>In cases where space is at a premium, such as in pop-up menus, contractions may be used, aslong as the contracted words are not critical to the meaning of the phrase. For example, a menucould contain the following items:Don’t Allow PrintingDon’t Allow ModifyingDon’t Allow CopyingIn each case, the contraction does not contain the operative word for the item. But in Sherlock,for example, menu items enabling users to choose between text that “contains” and “does notcontain” are communicated more clearly without the use of contractions.Developer Terms and User TermsDon’t use technical jargon or programming terms in interface elements or user documentation.Table 9-3 shows a few examples; more are in <strong>Apple</strong> Publications Style Guide (available at the MacOS X developer documentation website).Style 107Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 9TextTable 9-3Translating developer terms into user termsDeveloper termData browserDirty documentFocus ringUser-visible textMouse-up eventRebootByte lengthUser term equivalentScrolling list or multicolumn listDocument with unsaved changesHighlighted area; area ready to accept user inputOnscreen textMouse clickRestartNumber of characters108 StylePreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 0IconsThis chapter describes the overall philosophy behind Aqua icons and how to design application,document, toolbar, and other types of icons for Mac OS X.Aqua offers a photo-illustrative icon style—it approaches the realism of photography, but usesthe features of illustrations to convey a lot in a small space. Icons can be represented in 128 x 128pixels to allow ample room for detail. Anti-aliasing makes curves and nonrectilinear lines possible.Alpha channels and translucency allow for complex shading and dimensionality. All of thesequalities pave the way for lush imagery that enables you to create vibrant icons.To represent your application in Mac OS X, it’s essential to create high-quality Aqua-styleapplication icons that scale well in the various places the icon appears—the Dock, Finder previews,alert dialogs, and so on.Icon Genres and FamiliesIcon genres help communicate what you can do with an application before you open it.Applications are classified by role—user applications, software utilities, and so on—and eachcategory, or genre, has its own icon style. This differentiation is very important for helping userseasily distinguish between types of icons in the Dock.Figure 10-1Application icons of different genres—user applications and utilities—shown as they mightappear in the DockFor example, the icons for user applications are colorful and inviting, while utilities have a moreserious appearance. Figure 10-2 shows user application icons in the top row and utility icons inthe bottom row. These genres are further described in “User Application Icons” (page 111) and“Utility Icons” (page 112).Icon Genres and Families 109Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 0IconsFigure 10-2Two icon genres: User application icons in top row, utility icons in bottom rowThe graphic flexibility of Aqua icons can also help users identify files associated with anapplication. In iTunes, for example, a visual cue provided in the application icon is carried overinto icons for other files associated with iTunes, forming an icon family, as shown in Figure 10-3.Figure 10-3An icon family: The iTunes application icon and its associated iconsiTunes application iconDocument icon Preferences icon Playlist icon Plug-in icon110 Icon Genres and FamiliesPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 0IconsApplication IconsUser Application IconsMac OS X user application icons should be vibrant and inviting, and should immediately conveythe application’s purpose. The TextEdit icon, for example, indicates clearly that you would usethis application to create text documents.Figure 10-4The TextEdit application icon makes it obvious what this application is forIf the primary function of your application is creating or handling media, its icon should displaythe media the application creates or views. If appropriate, the icon should also contain a tool thatcommunicates the type of task the application allows the user to accomplish. The Preview icon,for example, uses a magnification tool to help convey that the application can be used to viewpictures. If you include a supportive tool element, it should closely relate to the base object thatit rests upon.Figure 10-5The Preview application icon: An example of a tool elementIn the Stickies application icon, however, the yellow rectangles are easily identifiable as stickynotes; the icon doesn’t include a tool because it isn’t necessary to tell the icon’s story.Icon Genres and Families 111Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 0IconsFigure 10-6The Stickies application icon: Effective without the addition of a toolNotice that the text in the Stickies icon is actual text, not simply wavy lines representing text. Ifyou want to “greek” text in an Aqua icon, use actual text and make it unreadable by shrinkingit or doubling the layers.Generally, Mac OS X user application icons are designed to appear as if they’re sitting on a deskin front of you. They have a slightly diminishing perspective (they are wider at the bottom). Formore information, see “Icon Perspectives and Materials” (page 117).Viewer, Player, and Accessory IconsSome applications that represent objects, such as QuickTime Player and Calculator, are mosteasily recognized by the objects themselves. When creating icons for such applications, it’s moreaesthetically pleasing to create a simplified, idealized representation of the object, rather thanusing an actual screen shot of the software. Re-creating the object is particularly important whenusers could confuse the icon with the actual interface.Figure 10-7The icons for QuickTime Player, Calculator, and ChessThese icons, many of which are a precursor of what you’ll see when you open the application,use a straight-on perspective (rather than the “on a desktop” user application style). You neversee the Calculator on screen in three dimensions, for example, so its icon doesn’t depict it thatway.Utility IconsIcons for utility applications—which are used less often and not simply for fun or creativeactivities— convey a more serious tone than those for user applications. Color in these icons isdesaturated, predominantly gray, and added only when necessary to clearly communicate whatthe applications do.112 Icon Genres and FamiliesPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 0IconsFigure 10-8Discriminating use of color in the Process Viewer and Print Setup Utility iconsBecause utility applications are normally focused on a narrow set of tasks, it’s best to keep thenumber of elements in the icon to a minimum. The focus should be a single object that representswhat the utility does. The perspective of utility icons is straight-on, as if they are on a shelf infront of you. For more information, see “Icon Perspectives and Materials” (page 117).Document IconsTraditionally, a document icon looks like a piece of paper with its top-right corner folded down.As previously suggested, Aqua document icons should make it obvious which application theyare associated with. Preview documents, for example, include a graphic of the media (the pictures)used in the application icon. For simplicity and to avoid confusing the document with theapplication itself, the viewing tool is not repeated in the document icon.Figure 10-9Icons for the Preview application and a Preview documentDocument icons are presented as if they are hovering on the desktop, with the shadow behindthe document. For more information, see “Icon Perspectives and Materials” (page 117).In cases where you want to put an identifying badge over a document icon, treat the badge asan integrated element within the document, instead of putting it over the top of the base imageand breaking out of the overall document shape.Icon Genres and Families 113Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 0IconsFigure 10-10Incorrect and correct badging of a document iconDon t do this.Do this.Icons for Plug-insPlug-in icons look like stackable components, with the associated application identifier on theleft side and a plug-in–specific image on the right.Figure 10-11A plug-in iconHardware and Removable Media IconsHardware icons represent devices as you most often see them: on your desk. Because thesedevices are also frequently handled and carried, people are familiar with them asthree-dimensional objects with weight. The Aqua treatment of hardware icons reinforces theirassociation with real objects.114 Icon Genres and FamiliesPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 0IconsFigure 10-12Icons for external (top row) and internal hardware devicesTo help users distinguish between external devices, their icons provide a region for an identifyingsymbol (FireWire, SCSI, and so on).Removable media such as CDs, floppy disks, and PC cards are depicted the way they look whenyou hold them in front of you—that is, the perspective is straight on.Figure 10-13Icons for removable mediaToolbar IconsThe concept behind toolbars is that they provide access to items as if they were sitting on a shelfin front of you. Toolbars should conserve screen real estate while still being inviting and easilyclickable; 32 pixels by 32 pixels is the recommended size for toolbar icons.Icon Genres and Families 115Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 0IconsFigure 10-14Finder toolbar iconsEach toolbar icon should be easily and quickly distinguishable from the other items in the toolbar.Toolbar icons emphasize their outline form. As shown in Figure 10-15, each Finder toolbar icon’sshape is unique.Figure 10-15Toolbar icons and their dominant shapesNote that although each Finder toolbar icon has a unique shape, the icons harmonize togetherin their perspective, use of color, size, and visual weight.Although icons designed specifically for use in a toolbar appear as if they are sitting on a shelfin front of you, if you place a very recognizable object from elsewhere in the interface in a toolbar,the object should retain its perspective. That is, don’t redesign a toolbar version of a well-knowninterface element.Figure 10-16The circled icons appear elsewhere in the interface; they retain their perspective when usedin a toolbarFor toolbars in applications, you can start with a consistent “look” when it makes sense, andintroduce differences when necessary. In the Mail application toolbar, for example, the Reply,Reply All, Forward, and Bounce buttons—all for actions the user can apply to a selected receivedmessage—use a stamp as the dominant symbol. Because the Bounce button is potentiallydestructive (the user can no longer read the bounced message), its icon is red. The pencil isdepicted in recognizable and realistic yellow.116 Icon Genres and FamiliesPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 0IconsFigure 10-17The Mail toolbarCreating a family of toolbar icons helps make an application recognizable and unique. Mail, forexample, uses blue and white as dominant colors in its toolbar icons.For information about implementing toolbars, see “Toolbars” (page 162).Icon Perspectives and MaterialsThe angles and shadows used for depicting various kinds of icons are intended to reflect howthe objects would appear in reality. All Aqua interface elements have a common light sourcefrom directly above, not from the upper-left corner as in Mac OS 9 and earlier. The variousperspectives are achieved by changing the position of an imaginary camera capturing the icon.Application icons look like they are sitting on a desk in front of you.Figure 10-18Perspective for application icons: Sitting on a desk in front of youUtility icons are depicted as if they were on a shelf in front of you. Flat objects appear as if therewere a wall behind them with an appropriate shadow behind the object.Icon Perspectives and Materials 117Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 0IconsFigure 10-19Perspective for flat utility icons: On a shelf in front of you, with a shadow on the wall behindAn actual three-dimensional object such as a rocket, however, would more realistically be viewedsitting on the ground; its icon shows the rocket sitting on a shelf, with its shadow below it.Figure 10-20Perspective for three-dimensional object: Sitting on a shelf in front of you, with the shadowbelow the objectFor toolbar icons, the perspective is also straight-on, as if the object is on a shelf in front of you.Figure 10-21Perspective for toolbar icons: Straight-on, with subtle shadow on the “floor”Icons that represent actual objects should look as though they are made of real materials. Examinevarious objects to study the characteristics of plastic, glass, paper, and metal. Your icon will lookmore realistic if you successfully convey the item’s weight and feel, as well as its appearance.Use transparency only when it is convincing and when it helps complete the story the icon istelling. You would never see a transparent sneaker, for example, so don’t use one in your icon.118 Icon Perspectives and MaterialsPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 0IconsFigure 10-22Materials: Transparency used to convey meaningConveying an Emotional Quality in IconsFigure 10-23 illustrates the difference between communicating a message in a straightforwardway compared with presenting the same message with an emotive quality. In an appropriatecontext, we would recognize the figure on the left as the symbol for men’s bathroom. The figureon the right, however, tells a story even when it is viewed outside of its context.Figure 10-23Being emotive: The same message conveyed two waysSuggested Process for Creating Aqua IconsYou need to provide at least the following files:■■a 128x128 image (for Finder icons)a mask that defines the image’s edges, so the operating system can determine which regionsare clickableIcons that display in the Finder are viewed at different sizes: They can be magnified in the Dock,they can be previewed at full size, and users can specify a preferred size. For the best-lookingicons at all sizes, you should also provide custom image files (“hints”) at three other sizes: 64 x64, 32 x 32, and 16 x 16. Although the Dock doesn’t use hints (it uses a sophisticated algorithmon the 128 x 128 version), hints are important for preserving crucial details in Finder icons.Conveying an Emotional Quality in Icons 119Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 0IconsIf you are creating an icon that will never change size—on a bevel button, for example—you cansupply the image only at actual size.Here are the suggested steps for creating an icon:1. Sketch the icon.Work out the concept and details of your design on paper, not with software. You should beready to execute the idea by the time you open an application.2. Create a software illustration of the icon.Although you may want the final icon to look like a photograph, in most cases it’s inadvisableto start with an actual photograph. An illustration provides much more flexibility forconveying a concept in a very small space. An illustration also gives you necessary controlover details, perspective, light and shadow, texture, and so on.3. Add detail and color.For each enhancement you make to a larger-version icon, consider whether it is truly addingsomething to the icon’s usability, or whether it is just adding complexity or clutter.4. Add shadows.Shadows give objects dimensionality and realism. They also help tie the elements of an icontogether so it doesn’t look like a collage. The light source should be above and slightly infront of the object. The resulting shadow should create the sense that the icon is resting on asurface.5. In an image-editing program, manipulate the image to get precise effects and create the iconmask.6. Convert the icon to a .icns file. You can complete this step with Icon Composer, includedwith the Mac OS X Developer Tools. There are also several third-party tools available forcompleting this step.Tips for Designing Aqua IconsMany of the suggestions listed here also apply to other graphics you develop for yourapplication–for example, to augment a label or list item.■■■■■For great-looking Aqua icons, have a professional graphic designer create them.Perspective and shadows are the most important components of making good Aqua icons.Use a single light source with the light coming from above the icon.Use universal imagery that people will easily recognize. Avoid focusing on a secondaryaspect of an element. For example, for a mail icon, a rural mailbox would be less recognizablethan a postage stamp.Strive for simplicity. Try to use a single object that captures the icon’s action or representsthe control. Start with a basic shape.Use color judiciously to help the icon tell its story; don’t add color just to make the icon morecolorful. Smooth gradients typically work better than sharp delineations of color.120 Tips for Designing Aqua IconsPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 0Icons■■■Avoid using Aqua interface elements in your icons; they could be confused with the actualinterface.Don’t use replicas of <strong>Apple</strong> hardware products in your icons. These symbols are copyrightedand hardware designs change frequently.Design toolbar icons at their actual size (32x32). For other icons, concentrate on perfectingyour icon’s look at 128x128 and work down from there. It usually works best if you scaledown elements independently and then combine them, rather than scaling the entire icon atonce.Tips for Designing Aqua Icons 121Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 0Icons122 Tips for Designing Aqua IconsPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 1CursorsThis chapter discusses the standard cursors available in Mac OS X and provides information onimplementing your own cursors. The standard cursors are designed to provide feedback to users.To maintain a consistent user experience, it is important that you use them only for their intendedpurpose.Each cursor has a hot spot—the portion of the cursor that must be positioned over a screen objectbefore mouse clicks have an effect on the object. The hot spot should be intuitive, such as the tipof an arrow cursor or the center point of a crosshair. Screen objects have a hot zone—the areathat the cursor’s hot spot must be within in order for mouse clicks to have an effect.Standard CursorsTable 11-1 shows the standard cursors and explains when to use each. The “API informationcolumn gives the constants to implement them in Carbon or Cocoa.Table 11-1Standard cursors in Mac OS XCursorUseAPI informationArrowMenu bar, desktop, scroll bar, resizecontrol, title bar, close button, zoombutton, minimize button, othercontrols.Carbon: kThemeArrowCursorCocoa: arrowCursorContextualmenuIndicates the user can open acontextual menu for an item. Shownwhen the user presses the Controlkey while the cursor is over an objectwith a contextual menu.Carbon: kThemeContextualMenuArrowCursorCocoa: Not availableAliasIndicates the drag destination willhave an alias for the original object(the original object will not bemoved).Carbon: kThemeAliasArrowCursorCocoa: Not availableStandard Cursors 123Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 1CursorsCursorUseAPI informationPoofCopyIndicates that the proxy object beingdragged will go away, withoutdeleting the original object, if themouse button is released. Only usedfor proxy objects.Indicates the drag destination willhave a copy of the original object (theoriginal object will not be moved).Carbon: kThemePoofCursorCocoa: disappearingItemCursorCarbon: kThemeCopyArrowCursorCocoa: Not availableNotallowedIndicates an invalid drag destination.Carbon: kThemeNotAllowedCursorCocoa: Not availableI beamSelecting and inserting text.Carbon: kThemeIBeamCursorCocoa: IBeamCursorCrosshairPrecise rectangular selection,especially useful for graphics objects.Carbon: kThemeCrossCursorCocoa: crosshairCursorPointinghandURL links.Carbon: kThemePointingHandCursorCocoa: pointingHandCursorOpenhandIndicates an item can be manipulatedwithin its containing view.Carbon: kThemeOpenHandCursorCocoa: openHandCursorClosedhandPushing, sliding, or adjusting anobject within a containing view.Carbon: kThemeClosedHandCursorCocoa: closedHandCursorMoveleftMoverightMoving or resizing an object, usuallya pane splitter, to the left. Use whenthe user can move the object only inthe indicated direction.Moving or resizing an object, usuallya pane splitter, to the right. Usewhen the user can move the objectonly in the indicated direction.Carbon: kThemeResizeLeftCursorCocoa: resizeLeftCursorCarbon: kThemeResizeRightCursorCocoa: resizeRightCursor124 Standard CursorsPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 1CursorsCursorUseAPI informationMoveleft andrightMoving or resizing an object, usuallya pane splitter, to the left or the right.Carbon: kThemeResizeLeftRightCursorCocoa: resizeLeftRightCursorMoveupMovedownMoveup anddownMoving or resizing an object, usuallya pane splitter, upward. Use whenthe user can move the object only inthe indicated direction.Moving or resizing an object, usuallya pane splitter, downward. Usewhen the user can move the objectonly in the indicated direction.Moving or resizing an object, usuallya pane splitter, either upward ordownward.Carbon: kThemeResizeUpCursorCocoa: resizeUpCursorCarbon: kThemeResizeDownCursorCocoa: resizeDownCursorCarbon: kThemeResizeUpDownCursorCocoa: resizeUpDownCursorMany of the progress indicator cursors from Mac OS 9 are still supported in Mac OS X but youshould not use them for new development. Figure 11-1 shows cursors you shouldn’t use in MacOS X.Standard Cursors 125Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 1CursorsFigure 11-1Mac OS 9 cursors that you shouldn’t use in Mac OS XSpinningPlussignWristwatchCountingdownhandCountinguphandCountingup and downhandInstead of using a Mac OS 9 cursor, consider using a progress indicator. The use of anasynchronous progress indicator is shown in Figure 11-2. One benefit of this is that it can beseen whether the application is in the foreground or the background. You could also display aprogress bar. See “Progress Indicators” (page 240) for more information on using these controls.Figure 11-2Use of an asynchronous progress indicatorThe spinning wait cursor (see Figure 11-3) is displayed automatically by the window serverwhen an application cannot handle all of the events it receives. If an application does not respondfor longer than two seconds, the spinning wait cursor appears. You should try to avoid situationsin your application where the spinning wait cursor will be displayed. The Spin Control applicationprovided with Xcode can help you eliminate code that is causing this cursor.126 Standard CursorsPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 1CursorsFigure 11-3Spinning wait cursorCarbon: See Appearance.h for functions related to cursors.Cocoa: Use NSCursor methods to display cursors.Designing Your Own CursorsMac OS X supports 32-bit RGBA cursors in sizes up to 64 x 64 pixels. If you need a cursor largerthan that, you can implement it as a window that tracks with the cursor.Before you design your own cursor, ask yourself if it is going to add value to the user interface.Recognize that by doing so you are introducing a new, potentially confusing user interfaceelement. If you decide you really need a new cursor, keep the following in mind:■■■You need to indicate where the hot spot of the cursor is.Your cursors need to be able to work on older hardware that may not provide hardwarevideo acceleration.If you create a custom version of a standard cursor, you need to also create new versions ofrelated cursors. For example, if you create a larger arrow cursor you need to also createcustom cursors for copy, move, alias, poof, and so forth.Designing Your Own Cursors 127Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 1Cursors128 Designing Your Own CursorsPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 2MenusMenus present lists of items—commands, attributes, or states—from which the user can choose.Menus are based on the interface principle of see-and-point: People don’t have to remembercommand names because they can view all the available options at any time.Menus appear in several different forms in the Mac OS X interface. This chapter describespull-down menus in the menu bar, Dock menus, and contextual menus. These types of menusare illustrated in Figure 12-1.Figure 12-1Menu bar, Dock, and contextual menusMenu bar menu Dock menu Contextual menuMenus that are part of controls like pop-up menus, command pop-down menus, and the menusin pop-up icon buttons and bevel buttons are discussed in “Controls” (page 209).Menu BehaviorWhen people want to use menus, they usually select an object and then choose a menu item. Thisbehavior follows the see-and-point paradigm of identifying what the user wants to act on andthen specifying the action by choosing a menu item. To choose an item in a menu, the userpositions the pointer on the menu title and drags to the desired item. Each item is highlightedas it is selected. No action happens until the user releases the mouse button with the cursor overa menu item. (See “The Mouse and Other Pointing Devices” (page 73).) People can move thepointer off a menu before releasing the mouse button without initiating any action. They canopen and scan menus to find out what features are available, without having to actually performan action. When a menu item has been activated, it blinks briefly.Menu Behavior 129Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 2MenusA user can also open a menu with a click. The menu stays open without the user having tocontinue holding down the mouse button. The user can then move the pointer to an item to selectit or anywhere on the screen without losing sight of the menu. Once a menu is opened, it remainsopen until another action forces it to close. Such actions include:■■■■■Choosing a command from the menuMoving the pointer to another menu titleA click outside the menuA system-initiated alertA system-initiated application switch or quitIf all of the items in a menu or submenu are unavailable, the menu title is dimmed. The user canstill open the menu, but all of the items are dimmed indicating that these items are not availablein the present context. Figure 12-13 shows a dimmed menu in the open and closed state.If a menu contains more items than are visible onscreen, the menu can scroll to allow the useraccess to all of the menu items. A scrolling menu is shown in Figure 12-2.Figure 12-2Scrolling menuA downward-pointing indicator at the bottom of the scrolling menu indicates that there are moreitems. When the user starts to scroll down, an upward-pointing indicator appears at the top ofthe menu to show that some items are no longer visible in that direction. When the user dragspast the last visible item, the menu scrolls to show the additional items. When the last item isshown, the downward-pointing indicator disappears.If the user drags back up to the top, the menu scrolls back down in the same manner. The nexttime the menu is opened, it appears in its original state (with the indicator at the bottom).130 Menu BehaviorPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 2MenusDo not design your application with scrolling menus in their default state; they should exist onlywhen a user adds many items to a customizable menu or when the menus function cause it tohave items added to it (for example, the Finder’s Window menu).Designing the Elements of MenusMenu elements include words (and sometimes icons) to designate menu titles and menu items,and symbols to designate keyboard shortcuts, hierarchical menus, separators, and the state ofsome menu items. These elements are illustrated in Figure 12-3.Figure 12-3Menu elementsMenu titleMenu itemSubmenuSeparatorHierarchical menu (submenu) indicatorKeyboard equivalentEllipsis characterTitling MenusMenu (and submenu) titles should appropriately represent the items in the menu. For example,a Font menu could contain names of font families such as Helvetica and Geneva, but it shouldn’tinclude editing commands such as Cut and Paste. Avoid using icons for menu titles. Make menutitles as short as possible without losing clarity.Naming Menu ItemsMenu item names should be either actions performed on an object or attributes applied to anobject:■■Actions are verbs or verb phrases that declare the action that occurs when the user choosesthe item. For example, Save means save my file and Copy means copy the selected data. Youraction menu commands should fit into similar sentences.Attributes are adjectives or adjective phrases that describe the change the commandimplements. Adjectives in menus imply an action and should fit into the sentence “Changethe selected object to …” —for example, Bold or Italic.Designing the Elements of Menus 131Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 2MenusWhen a menu item is unavailable—because it doesn’t apply to the selected object or to the selectedobject in its current state, or because nothing is selected, for example—the item should appeardimmed (gray) in the menu and is not highlighted when the user moves the pointer over it.Use title style capitalization in your menus. See “Capitalization of <strong>Interface</strong> Elements” (page 106)for more information on this style.It may be appropriate in some cases to provide dynamic menu items—commands that changewhen the user presses a modifier key. For example, if the user opens the Window menu in theFinder and then presses the Option key, some of the menu items change as shown in Figure12-4. The system appropriately sizes the menu to hold the widest item, including Option-enabledcommands.Figure 12-4Dynamic menu itemsWithout modifier key pressedWith modifier key pressedCocoa: Use [NSMenuItem setKeyEquivalentModifierMask: [NSAlternateKeyMask]]Using Icons in MenusYou should use text, not icons, for your application menu titles. The operating system providestwo application menus that use icons instead of text for their titles: the <strong>Apple</strong> menu and the<strong>Apple</strong>Script menu, which is displayed if the application has scripts installed. The menu bar statusitems also are icons. Because these icons are always visible in the menu bar, no matter whatapplication is active, users learn what these symbols mean. These are unique uses of symbols asmenu titles.132 Designing the Elements of MenusPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 2MenusYou may use icons in menu items if the icon is something the user can learn to associate withspecific functionality in your application or if the icon represents something unique. For example,the Finder uses icons in the Go menu because users can associate them with the icons they seewith the same items in the sidebar as shown in Figure 12-5.Figure 12-5Icons in the Finder Go menuSafari also makes use of the standard icons displayed with some webpages to allow users tomake the connection between the webpage and the menu item for that webpage as shown inFigure 12-6.Figure 12-6Icons in the Safari History menuDesigning the Elements of Menus 133Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 2MenusUsing Symbols in MenusThere are a few standard symbols you can use to indicate additional information in menus. Theseare listed in Table 12-1 and discussed in the following text. Don’t use other, arbitrary symbolsin menus because they add visual clutter and may confuse people.Table 12-1Acceptable characters for use in menusCharacterMeaningThe active document in the Window menu; in other menus, a settingthat applies to the entire selection.A setting that applies to only part of the selection.A window with unsaved changes.In the Window menu, a document that is currently minimized inthe Dock.In the Window menu, a checkmark should appear next to the active document’s name.Checkmarks can also be used in other menus to indicate that the setting applies to the entireselection. You can use checkmarks for mutually exclusive attribute groups (the user can selectonly one item in the group, such as font size) or accumulating attribute groups (more than oneitem can be selected at once, such as Bold and Italic).Use a dash to indicate that an attribute applies to only part of the selection. For example, if selectedtext has two styles applied to it, put a dash next to each style name. When it’s appropriate, youcan combine checkmarks and dashes in the same menu. See “Toggled Menu Items” (page 135)for more information on how to use checkmarks and dashes in menus.Note: Include a menu command, such as Plain, for removing all formatting from mixed-statetext.Use a bullet next to a document with unsaved changes and a diamond for a document the userhas minimized into the Dock. A minimized document with unsaved changes should have adiamond only. If the active window has unsaved changes, the checkmark should override thebullet in the Window menu.An ellipsis character (…) after a menu item indicates to the user that additional information isrequired to complete a command. For information on when to use ellipsis in menu items, see“Using Ellipses” (page 105).Note: Generate the ellipses character with Option-; (semicolon).Carbon: In the standard Window menu, these symbols are managed automatically.Otherwise, use the SetItemMark function with a char parameter of kCheckCharCodefor the active document, kBulletCharCode for a document with unsaved changes, andkDiamondCharCode for a minimized document. These constants work only in theWindow menu.134 Designing the Elements of MenusPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 2MenusCocoa: These symbols are managed by the Cocoa framework.Figure 12-7 and Figure 12-8 show some examples of how to use and how not to use symbols inmenus.Figure 12-7Symbols in menusA bulletindicatesthe documenthas unsavedchanges.A checkmarkindicates theactive window.A diamondindicates thewindow hasbeen minimizedinto the Dock.Dashes are used toindicate that theselection representsa mixed state (bothbold and italic areused).Figure 12-8Don’t use arbitrary symbols in menusIf you have a Style menu, you may display menu items in the actual style so users can see whateffect the menu item will have. Don’t use text styles in menus other than a Style menu.Toggled Menu ItemsA toggled menu item changes between two states each time a user chooses it. There are threetypes of toggled menu items:■A set of two menu items that are opposite states; for example, Grid On and Grid Off. Thestate currently in effect has a checkmark next to it. If you have room in your menu, it’s a goodDesigning the Elements of Menus 135Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 2Menusidea to display both items (rather than changing the name depending on its state) so there’sless chance of confusion about each item’s effect.■One menu item whose name changes to reflect the current state; for example, Show Rulerand Hide Ruler. Use this type if your menu doesn’t have room to show both states.Use two verbs that express opposite actions. Make sure the command name is completelyunambiguous. For example, Turn Grid On and Turn Grid Off is unambiguous. Choosing thecommand Use Grid, however, could turn the grid on (it describes what happens as a resultof choosing the command) or off (it describes the current state).■A menu item that has a checkmark next to it when it is in effect; for example, a style attributesuch as Bold. Don’t use this kind of toggled item to indicate the presence or absence of afeature like a grid or ruler. It’s unclear whether the checkmark means that the feature is ineffect or whether choosing the command turns the feature on.Figure 12-9 shows correct and incorrect toggled menu items.Figure 12-9Avoid ambiguous toggled menu itemsUnambiguouscommandChoosing Use Gridcould result in eitherof two actions.136 Designing the Elements of MenusPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 2MenusGrouping Items in MenusLogically grouping menu items is the most important aspect of arranging your menus. Groupingitems in a menu makes it easier to quickly locate commands for related tasks.In general, place the most frequently used items at the top of the menu, but create groups ofrelated items rather than arranging them strictly by frequency of use. For example, although theFind Next or the Find Again command may be used infrequently, it should appear right belowthe Find command. In a menu that contains both actions and attributes, don’t put actions andattributes in the same group.Group interdependent attributes. They can be in a mutually exclusive attribute group (the usercan select only one item, such as font size) or an accumulating attribute group (the user canselect multiple items, such as Bold and Italic).If a menu repeats a term more than twice, consider dedicating a menu or hierarchical menu tothe term instead. For example, if you need commands like Show Info, Show Colors, Show Layers,Show Toolbox, and so on, you could create a Show menu or a submenu off of a Show item.How many separators to use is partly an aesthetic decision and partly a usability decision. Figure12-10 shows a menu that depicts the right balance of grouping, contrasted with two menusshowing insufficient grouping and too much grouping. Use this picture as a visual guide whentrying to decide how many separators to use in your menus.Figure 12-10Grouping items in menusAppropriate groupingToo many groupsNot enough groupsDesigning the Elements of Menus 137Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 2MenusHierarchical Menus (Submenus)You can use hierarchical menus to offer additional menu item choices without taking up morespace in the menu bar. When the user points to a menu item with a submenu indicator, a submenuappears. Submenus have all the features of menus, including keyboard shortcuts, status markers(such as checkmarks), and so on.Because submenus add complexity to the interface and are physically more difficult to use, youshould use them only when you have more menus than fit in the menu bar or for closely relatedcommands. Use only one level of submenus. If a submenu contains more than five items, considergiving it its own menu.When you use submenus, include them in a menu with a logical relationship to the choices theycontain; the submenu title should clearly represent the choices it contains. Hierarchical menuswork best for providing submenus of attributes (rather than actions).Figure 12-11A hierarchical menuIf all of a submenu’s commands are unavailable (dimmed) at the same time, dim the submenutitle.The Menu Bar and Its MenusThe menu bar extends across the top of the main screen and contains pull-down menus. Thereis only one menu bar at the top of the screen; don’t put menu bars in windows. The menu barreflects the principles of perceived stability and aesthetic integrity. It provides a stable locationfor people to look for commands. Each application, including the Finder, has its own menu barconsisting of a few standard menus, application-specific menus, and menu extras. The menu bar:■■Is always visible and available, except in circumstances such as a slideshow (see discussionbelow)Always has the <strong>Apple</strong> menu (provided by the operating system), the application menucontaining items that apply to the active application as a whole, and a Window menu138 The Menu Bar and Its MenusPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 2Menus■■Can also contain File, Edit, and Help menus, as well as application-specific menusMay contain menu extras as each individual user choosesFigure 12-12The menu bar displayed when the Finder is activeFinder specificmenu items<strong>Apple</strong> menuApplicationmenu itemsMenu barstatus itemsIf there is insufficient room to display all of an application’s menus, the menu bar status itemsare omitted. If there is still insufficient room to display all menus, the application’s menus maybe omitted, starting with the rightmost menu.If your application can display full-screen images (such as slideshows), you may allow users tohide the menu bar. If you implement this feature, provide a clearly visible way, such as a button,for the user to make the menu bar reappear. If there is no button visible, pressing the Escape keyor moving the mouse to the top of the screen should display the menu bar.If all of a menu’s commands are unavailable (dimmed) at the same time, dim the menu title.Users should still be able to open a dimmed menu to see its contents.Figure 12-13Dimmed menu title when all items are unavailableCarbon: The Menu Manager handles the dimming of menu items automatically if youset the kMenuAttrAutoDisable attribute with the ChangeMenuItemAttributefunction.See Menu Manager Reference, in Carbon User <strong>Interface</strong> Documentation.Cocoa: See Application Menus and Pop-Up Lists in Cocoa User Experience Documentation.The following sections discuss the individual menus in the menu bar. The sections are listed inthe order that the menus should appear in the menu bar. A checkmark ( ) next to a menu itemindicates that, unless your application cannot support the item’s action or attribute, you shouldThe Menu Bar and Its Menus 139Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 2Menusinclude that item in the menu. The unmarked commands are ones that are not appropriate forall applications, but if they are appropriate in yours, you should implement and label them asdiscussed.If there is an appropriate keyboard shortcut for a menu item, it is listed. Except for those itemswith a checkmark next to them, you should implement keyboard shortcuts only for thosecommands that will be frequently used. Unnecessary use of keyboard shortcuts can make yourapplication confusing. For more discussion on assigning keyboard shortcuts for pull-down menuitems, see “Keyboard Shortcuts” (page 82).The <strong>Apple</strong> MenuThe <strong>Apple</strong> menu provides items that are available to users at all times, regardless of whichapplication is active. The <strong>Apple</strong> menu’s contents are defined by the system and cannot be modifiedby users or developers.Figure 12-14The <strong>Apple</strong> menuThe Application MenuThe application menu contains items that apply to the application as a whole, rather than to aspecific document or other window.140 The Menu Bar and Its MenusPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 2MenusFigure 12-15The Mail application menuThe Application Menu TitleTo help users identify the active application, the application menu title is in boldface.In order to fit within the allotted menu bar space, the application menu title should be one word,if possible, and a maximum of 16 characters. Don’t include the application version number inthe name; version information belongs in the About window. If the application name is too long,provide a short name (16 characters or fewer) as part of the application package. The Hide, Quit,and About items should also use the short application name. If you don’t provide a short name,the application name is truncated from the end (and an ellipsis is added), if necessary.The Application Menu ContentsAbout ApplicationName. Opens your application’s About window, which contains copyrightinformation and version number. (For more information, see “The About Window” (page 182).If you’ve specified a short name (see “The Application Menu Title” (page 141)), use it in the Aboutmenu item; use the full application name in the About window.Preferences (Command-,). Invokes a preference window for your application. See“Implementing Preferences” (page 36) for more information on preferences in Mac OS X.In the application menu, put all commands that provide access to your application’s preferencedialogs first, followed by application-specific items. Put a menu separator between the Aboutcommand and the Preferences command. If your application provides document-specificpreferences, make them available in the File menu (see “The File Menu” (page 142)). Mostdocument-specific preferences should have a unique name, such as Page Setup, rather thanPreferences.Services. The Services submenu provides a way for one application to offer its capabilities toanother application. See “Application Services” (page 61) for more information on services.Hide ApplicationName (Command-H).Hides all of the windows of the currently runningapplication and brings the most recently used application to the foreground. If necessary, usethe short application title (see “The Application Menu Title” (page 141)).The Menu Bar and Its Menus 141Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 2MenusHide Others (Command-Option-H). Hides the windows of all the other applications currentlyrunning.Show All. Shows all windows of all of currently running applications.Quit ApplicationName (Command-Q). This last item in the application menu should be precededby a separator. When a user chooses Quit and there are unsaved documents, present the necessaryalerts (see “Dialogs for Saving, Closing, and Quitting” (page 196)). If necessary, use the shortapplication name (see “The Application Menu Title” (page 141)).You may include other application-specific menu items between the Preferences and Servicesmenu items.The File MenuIn general, each command in the File menu should apply to a single file (most commonly, auser-created document).Note that the Preferences and Quit commands, which apply to a whole application, are in theapplication menu. If your application provides document-specific preferences, make themavailable in the File menu, preferably right above printing commands. If an application is notdocument-based, you can rename the File menu to something more appropriate or eliminate it.Several items in the File menu—Save As, Print, and Page Setup, for example—should open sheets.For more information, see “Document-Modal Dialogs (Sheets)” (page 188).Figure 12-16The File menuStandard File menu commands include these:New (Command-N). Opens a new document named “untitled” (or “untitled 2,” and so on, asappropriate). If your application requires documents to be named upon creation, you can displaya Save dialog (see “Dialogs for Saving, Closing, and Quitting” (page 196)). For more informationabout naming new document windows, see “Opening Windows” (page 167).142 The Menu Bar and Its MenusPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 2MenusOpen (Command-O). Displays a dialog for choosing an existing document to open. For moreinformation, see “The Open Dialog” (page 194).Open Recent. The Open command should be followed by Open Recent, so people can openrecently opened documents without using the Open dialog. The Open Recent submenu displaysdocuments in the order in which they were opened, with the most recent item at the top.Carbon: You should add documents to this submenu when they are opened or saved.Cocoa: The Open Recent submenu is populated automatically.Close (Command-W). Closes the active window. When the user chooses this command andthe active document has been changed since last saved, display the Save Changes alert (see“Dialogs for Saving, Closing, and Quitting” (page 196)). When the user presses the Option key,Close changes to Close All. The keyboard shortcuts Command-W and Command-Option-Wshould implement the Close and Close All commands, respectively. The Close command andCommand-W should not close utility windows.Close File (Command-Shift-W). In a file-based application that supports multiple views of thesame file, you can include a Close File command below Close Window to close a file and all itsassociated windows. If possible, include the filename in the menu (for example, Close File “Jerry’sKids”).Save (Command-S). Saves the active document, leaves the document open, and providesfeedback indicating that the document is being (or has been) saved. If the document has notpreviously been saved, display a Save dialog (see “Save Dialogs” (page 196)).Save As (Command-Shift-S). Displays the Save dialog, which allows the user to save a copyof the active document with a new user-defined name, a new location, or both. The newly saveddocument remains open and active.Note: Avoid using Save a Copy or Save To commands. Users might not understand the distinctionbetween them and Save As.Save All. Saves changes to all open documents.Revert to Saved. Discards all changes made to the active document since the last time it wassaved or opened. When the user chooses Revert to Saved, display an alert that warns the userabout the potential data loss the operation will cause.Print (Command-P). Opens the standard print dialog that allows users to print to a printer, afax, or as a PDF file. For more information, see “The Printing Dialogs” (page 204).Page Setup (Command-Shift-P). Opens a dialog for specifying printing parameters such aspaper size and printing orientation. These parameters are saved with the document.The Menu Bar and Its Menus 143Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 2MenusThe Edit MenuThe Edit menu provides commands that allow people to change (edit) the contents of documentsand other text containers, such as fields. It also provides the commands that allow people to sharedata, within and between applications, via the Clipboard.The Clipboard stores whatever data is cut or copied from a document until the user replaces thecontents by cutting or copying new data. The Clipboard is available to all applications and itscontents don’t change when the user switches from one application to another. The Clipboardprovides excellent support for the exchange of different data types between applications. Yourapplication should maintain formatting when it copies text to the Clipboard.Figure 12-17The Edit menuYour application’s Edit menu should provide the following commands. Even if your applicationdoesn’t handle text editing within its documents, these commands should be available for usein dialogs and wherever users can edit text:Undo (Command-Z). The Undo command reverses the effect of the user’s previous operation.When the user chooses Undo, the command changes to Redo (Command-Shift-Z), which reversesthe effect of the last Undo command.Support the Undo command for■■■■operations that change the contents of a documentoperations that require a lot of effort to re-createmost menu itemsmost keyboard inputOperations that may not be undoable include■■selectingscrolling144 The Menu Bar and Its MenusPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 2Menus■■splitting a windowchanging a window’s size or locationAdd the name of the last operation to the Undo and Redo commands. When possible, repeat thepreviously chosen command. For example, if the user has just input some text, the commandcould read Undo Typing, as shown in Figure 12-17; if the user moves a file in the Finder, thecommand says Undo Move of Filename. If the last operation can’t be reversed, change the commandto Can’t Undo and display it dimmed to provide feedback about the current state.If a user attempts to perform an operation that could have a detrimental effect on data and thatcan’t be undone, warn the user. See “Alerts” (page 190).Cut (Command-X). Removes the selected data and stores it on the Clipboard, replacing theprevious contents of the Clipboard.Copy (Command-C). Makes a duplicate of the selected data, which is stored on the Clipboard.Paste (Command-V). Inserts the Clipboard contents at the insertion point. The Clipboardcontent remains unchanged, permitting the user to choose Paste multiple times.Delete. Removes selected data without storing the selection on the Clipboard. Choosing Deleteis the equivalent of pressing the Delete key or the Clear key. Use Delete as the menu command,rather than Clear.Select All (Command-A). Highlights every object in the document or window, or all charactersin a text field.Find (Command-F). Opens an interface for finding items. This command could be in the Filemenu instead if the object of the search is files—for example, if the application is finding a fileon the Internet. When appropriate, your application should also contain a Find/Replace command.“Find Window” (page 186) shows an example of a typical Find window for searching text.Find Again (Command-G). Performs the last Find function again. This item should be groupedwith the Find command in either the File or Edit menu.Special Characters. Displays the Special Characters window. This allows users to inputcharacters from any of Mac OS X’s supported character sets into text entry fields. This menu itemis automatically inserted at the bottom of the Edit menu.The Format MenuIf your application provides functions for formatting text, you can include a as a top-level menuor as a submenu of the Edit menu. Depending on your application it may be appropriate to groupsome items in the Format menu into submenus such as Font, Text, or Style.The Menu Bar and Its Menus 145Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 2MenusFigure 12-18A Format menuShow Fonts (Command-T). The first item in the Format menu should be Show Fonts, whichdisplays the Font window.Carbon: Use the FPShowHideFontPanel function. See the Fonts Window Services Reference.Cocoa: Use NSFontPanel.Show Colors (Command-Shift-C). Displays the Colors window.Carbon: Use the NPickColor function to implement a Colors window. See Color PickerManager Reference in Carbon Graphics & Imaging Documentation.Cocoa: Use the NSColorPanel class. See Using Color in Cocoa Graphics & ImagingDocumentation.Bold (Command-B). Boldfaces the selected text or toggles boldfaced text on and off. If used asa toggle, indicate when it is on with a checkmark next to the command in the menu.Italic (Command-I). Italicizes the selected text or toggles italic text on and off. If used as a toggle,indicate when it is on with a checkmark next to the command in the menu.Underline (Command-U). Underlines the selected text or toggles underlined text on and off. Ifused as a toggle, indicate when it is on with a checkmark next to the command in the menu.Bigger (Command-Shift-equal sign). Causes the selected item to increase in size in definedincrements.Smaller (Command-Shift-hyphen). Causes the selected item to decrease in size in definedincrements.Copy Style (Command-Option-C). Copies the style—font, color, and size for text—of the selecteditem. It may be appropriate to put this item in a Style submenu along with related items.Paste Style (Command-Option-V). Applies the style of one object to the selected object.Align Left (Command-{). Left-align a selection.Center (Command-|). Center-align a selection.146 The Menu Bar and Its MenusPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 2MenusJustify. Evenly spaces a selection.Align Right (Command-}). Right-aligns a selection.Show Ruler. Displays a formatting ruler.Copy Ruler (Command-Control-C). Copies formatting settings such as tabs and alignment fora selection to apply to a another selection and stores them on the Clipboard.Paste Ruler (Command-Control-V). Applies formatting settings that have been saved to theClipboard to the selected object.The View MenuThe View menu provides commands that affect what users see in a window. In the Finder, forexample, the View menu contains commands for displaying windows as columns, icons, or lists.Commands for showing, hiding, and customizing a toolbar belong in the View menu. Create aView menu for these commands even if your application doesn’t need to have other commandsin the View menu. Show/Hide Toolbar should appear right above Customize Toolbar.Avoid using the View menu to display utility windows (such as tool palettes); use the Windowmenu instead.Figure 12-19A View menuShow/Hide Toolbar (Command-Option-T). Shows or hides a toolbar. The Show/Hide Toolbarcommand is provided so that people using full keyboard access can implement these functionswith the keyboard. It should be a dynamic menu item that toggles based on the current visibilityof the toolbar. If the toolbar is currently visible, the menu item says Hide Toolbar. If the toolbaris not visible it says Show Toolbar.Customize Toolbar. Opens a window that allows the user to customize which items are present.Figure 12-20 shows the result of choosing this command in the Finder.The Menu Bar and Its Menus 147Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 2MenusFigure 12-20Finder toolbar customization windowApplication-Specific MenusYou can add your own application-specific menus as appropriate. These menus should be betweenthe View menu and the Window menu as illustrated in Figure 12-21.Figure 12-21Application-specific menus in SafariApplication-specific menuThe Window MenuThe Window menu contains commands for managing an application’s windows. The menushould list an application’s open document windows, including minimized windows, in theorder in which they were opened, with the most recently opened document first. If a documentcontains unsaved changes, a bullet should appear next to its name.148 The Menu Bar and Its MenusPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 2MenusFigure 12-22A Window menuMac OS X does not automatically add utility windows to the list in the Window menu. You canadd a command to the Window menu to show or hide utility windows in your application.The Minimize and Zoom commands are in the Window menu so that people using full keyboardaccess can implement these functions with the keyboard. Even if your application consists ofonly one window, include a Window menu for the Minimize and Zoom command.Window menu items should appear in this order: Minimize, Zoom, ,, , Bring All to Front (optional), ,. The Close command should appear in the File menu, below the Opencommand.Carbon: Use the function CreateStandardWindowMenu.Minimize (Command-M). Minimizes the active window to the Dock.Minimize All (Command-Option-M). Minimizes all the windows of the active application tothe Dock.Zoom. Toggles between a predefined size appropriate to the window’s content and the windowsize the user has set. This command should not expand the window to the full screen size. See“Resizing and Zooming Windows” (page 173).Bring All to Front. Brings forward all of an application’s open windows, maintaining theironscreen location, size, and layering order. This should happen whenever a user clicks theapplication icon in the Dock. See “Window Layering” (page 174).You can make this command an Option-enabled toggle with Arrange in Front.Arrange in Front. Brings forward all of the application’s windows in their current layering orderand changes their location and size so they are neatly tiled.The Help MenuIf your application provides onscreen help, the Help menu should be the rightmost menu of yourapplication’s menus. The first item is the name of the application and the word “Help” (MailHelp, for example). This item should open Help Viewer to the first page of your help content.It’s best to have only one item in the Help menu, but if you want to add additional items that aredistinct from your help content, such as tutorials, website links, registration information, releasenotes, or support information, they should appear below the Application Name Help item.The Menu Bar and Its Menus 149Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 2MenusAvoid adding multiple items to the Help menu that lead to the same place—your help book.Multiple entries that open Help Viewer can be confusing; differences between sections of yourhelp book may not be as obvious to users as you think they are. Navigating between sections ofa help book is typically best handled by providing links in the Help Viewer window.Figure 12-23A Help menuApplicationName Help (Command-?). Opens Help Viewer to your application’s help. Forinformation about creating help content, see Providing User Assistance in User Experience HelpTechnologies Documentation.Menu Bar ExtrasReserved for use by <strong>Apple</strong>, the right side of the menu bar may contain items that provide feedbackon and access to certain hardware or network settings. The icon for the battery strength indicator,for example, dynamically displays the current state of the battery for a portable computer; clickingthe icon displays a menu for changing common battery settings. Users can display or hide amenu bar extra in the appropriate preferences pane.ImportantDon’t create your own menu bar extras. Use the Dock menufunctions to open a menu from your application’s icon in theDock.If there is not enough room in the menu bar to display all menus, menu bar extras are removedfirst.Contextual MenusA contextual menu provides convenient access to often-used commands associated with an item.Contextual menus open when the user presses the Control key while clicking an appropriateinterface element or selection.A contextual menu behaves like a standard pull-down menu, except that moving the pointer offa contextual menu and onto a standard pull-down menu doesn’t activate the second menu; theuser must click once to close the contextual menu and again to open the second menu.Contextual menus that are too long to display fully use the scrolling indicator (adownward-pointing triangle) and scroll like standard menus.150 Contextual MenusPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 2MenusDon’t set a default item. If the user opens the menu and closes it without selecting anything, noaction should occur.You define the items in your application’s contextual menus. Include a small subset of the mostcommonly used commands in the appropriate context. For example, Edit menu commands shouldappear in the contextual menu for highlighted text, but not a Save or a Print command.Never provide a contextual menu command that is not also accessible through the menu bar.Commands with keyboard shortcuts should be noted in the menu bar menu but not in thecontextual menu. Use submenus with caution and keep them to one level.Figure 12-24A contextual menu for an icon in the finder and a text selection in a documentCarbon: See Menu Manager Reference in Carbon User Experience Documentation.Cocoa: See Application Menus and Pop-Up Lists in Cocoa User Experience Documentation.Contextual Menus 151Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 2MenusDock MenusWhen a user presses and holds the mouse button on your application’s tile in the Dock, a menuappears. The menu lists the application’s open windows and contains the Show In Finder, Hide,and Quit commands. The Show in Finder command displays a Finder window for the foldercontaining your application. The Hide and Quit commands function as documented in “TheApplication Menu” (page 140). If the user holds down the Option key while invoking this menu,Hide changes to Hide Others and Quit changes to Force Quit. If the tile has not been permanentlyadded to the Dock, the command Keep In Dock also appears.Figure 12-25The iTunes Dock menuYou can customize your application’s Dock menu by adding to the default items provided bythe Dock. These additional items appear in the Dock menu only when the application is open.Potential additional items include:■■■Common commands to initiate actions in your application when it is not frontmost.Commands that are applicable when there is no open document window.Status and informational text.For example, a mail application could provide commands to initiate a new message or to checkfor new messages.Any command you add to the Dock menu should also be available in your application’s pull-downmenus. Application-specific items appear above the standard Dock menu items.152 Dock MenusPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 2MenusCarbon: See Customizing Your Application Dock Tile in Carbon User ExperienceDocumentation.Cocoa: See NSApplication reference documentation for information on customizingthe Dock menu.Dock Menus 153Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 2Menus154 Dock MenusPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 3WindowsWindows provide a frame for viewing and interacting with applications and data.From a developer’s perspective, there are many types of windows in Mac OS X. Although a usermight see them all as windows, the distinctions in behavior among the various types of windowscontribute to the Macintosh user experience. It is important that you understand the differenttypes of windows available, general window behavior, and behavior specific to one type ofwindow.This chapter first introduces the different types of windows and then focuses on the appearanceand behavior of document, application, and utility windows. Dialogs and alert windows areunique types of windows with guidelines in addition to those for standard windows. They arediscussed in detail in “Dialogs” (page 187). Note that unless explicitly stated, dialogs shouldbehave like the windows discussed in this chapter.Types of WindowsAs a developer or a designer, you should be aware of four main types of windows. Althoughtheir behavior is generally the same, they have important differences.■■■Document windows contain file-based user data. They present a view into the content thatpeople create and store. If the document is larger than the window, the window shows aportion of the document’s contents and provides users with the ability to scroll to other areas.Application windows are the main windows of applications that are not document-based.These windows can use the standard Aqua window look and features or use the brushedmetal look.Utility windows float above other windows and provide tools or controls that users canwork with while documents are open.Utility windows are discussed in more detail in “Utility Windows” (page 180).■Dialogs and alerts require a response from the user. These are discussed in “Dialogs” (page187).Examples of all of these types of windows are shown in Figure 13-1.Types of Windows 155Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 3WindowsFigure 13-1Four types of windowsDocument windowUtiltiy windowApplication windowDialog windowCarbon: See Handling Carbon Windows and Controls in Carbon User ExperienceDocumentation.Window AppearanceEvery document, application, and utility window should have, at a minimum:156 Window AppearancePreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 3Windows■■A title bar. Even if the window does not have an actual title (a tools palette, for example), itshould have a title bar so that users can move the window.A close button, so that the user has a consistent way to dismiss it.In addition, a standard document window has the following attributes that an application orutility window might not have:■■■■■Scroll bars (if not all the window’s contents are visible)Minimize and zoom buttonsA proxy icon (after a document has been saved)The title of the documentA resize controlThese elements and additional optional elements are described in the following sections.Figure 13-2Standard window partsClose, minimize,and zoom buttons Proxy icon Window title Title barToolbar controlScroll barScrollerResize controlThe Title BarAll windows should have a title bar even if the window doesn’t have a title.Window Appearance 157Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 3WindowsThe Window TitleA document window should display the name of the document being viewed. Applicationwindows display the application name. Utility windows display a descriptive title appropriatefor that window. If the contents of the window can change, it might be appropriate to changethe title to reflect the current context. For example, in the Keynote inspector, the title of thewindow changes to reflect which pane has been selected.If you need to display more than one item in the title, separate the items with an em dash (—)with space on either side. For example, the main viewer window of Mail displays both thecurrently selected message mailbox and folder. Note that if a message is viewed in its ownwindow, the message title is displayed.Don’t display pathnames in window titles.Title Bar ButtonsDocument and application windows always display active close and minimize buttons. Includethe zoom button if the window can be adjusted in size. Information on how the minimize buttonworks is in “Resizing and Zooming Windows” (page 173).Utility windows always display an active close button, but never an active minimize button.If all three buttons are not active, they should at least all be present in an inactive state. Theexception is utility windows where it is acceptable to display only one button, the close button.Alerts and modal dialogs do not include any of these buttons.The title bar should include a toolbar control if a toolbar is available in the window (see“Toolbars” (page 162)).158 Window AppearancePreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 3WindowsFigure 13-3Title bar buttons for standard windowsDialogs onlyIndicating Changes With the Close ButtonWhen a document has unsaved changes, the close button should display a dot.Figure 13-4The close button in its unsaved changes stateThe dot indicatesthat this documenthas unsaved changes.Carbon: Display the dot with the SetWindowModified function.Cocoa: The dot appears automatically if the application is NSDocument-based;otherwise, use the setDocumentEdited: method of the NSWindow class.Window Appearance 159Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 3WindowsThe Proxy IconDocument windows include a proxy icon in the title bar after a document is saved for the firsttime. After pressing and holding the mouse button down on a proxy icon for a couple of seconds,users can manipulate it as if they were manipulating the corresponding file-system object. Forexample, you can attach a document to an email message by dragging its proxy icon into theemail message.Figure 13-5Proxy icon being dragged to another application1. User presses the proxy icon.2. Proxy icon changes to document icon.3. User drags the proxy icon to another application.4. Document copied to new application.160 Window AppearancePreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 3WindowsA proxy icon appears in its normal state as long as the state of the document and the file-systemobject are the same. When a document has unsaved changes, its proxy icon appears dimmed.Note the difference between the proxy icon in the document with unsaved changes versus thedocument with saved changes in Figure 13-6.Figure 13-6Proxy icons in documents with saved and unsaved changesDocument with saved changesDocument with unsaved changesCommand-clicking the title or the proxy icon displays a pop-up menu illustrating the documentpath.Figure 13-7Document path pop-up menu, opened by Command-clicking the proxy iconWindow Appearance 161Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 3WindowsToolbarsToolbars are useful for giving users immediate access to the most frequently used commands.Any item in a toolbar should also be available as a menu command. An application-wide toolbarin its own window is also called a tool palette; for more information, see “Utility Windows” (page180). This section describes toolbars that are part of a window with other content.The set of toolbar items you provide should fit in the default window size; users should be ableto customize which items appear in the toolbar and in what order. As the default, a toolbar shoulddisplay icons with text labels; users should be able to change the display to icons only or textonly. You can provide these options with a Customize Toolbar command in the View menu.When the user has selected an item in the toolbar, it should either maintain its pressed state toindicate that item is selected, or the icon itself should change to indicate the current state.If your application uses toolbars as part of a window with other content, include a control in thewindow’s title bar for showing and hiding the toolbar, as shown in Figure 13-8. You should alsoput commands for showing and hiding the toolbar in the View menu (see “The View Menu” (page147)).Figure 13-8The toolbar controlShow/hidetoolbar controlFor information about designing icons for toolbars, see “Toolbar Icons” (page 115).Carbon: Create a toolbar with the HIToolBarCreate function. See Using HIToolbar inCarbon User Experience Documentation for more information.Cocoa: Create a toolbar with the NSToolbar class.DrawersA drawer is a child window that slides out from a parent window and that the user can open orclose (show or hide) while the parent window is open. A drawer should contain frequentlyaccessed controls that don’t need to be visible at all times. A drawer’s contents should be closelyrelated to the contents of its parent window. A drawer automatically inherits the brushed metalappearance if its parent window is brushed metal (see “Brushed Metal Windows” (page 165).162 Window AppearancePreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 3WindowsFigure 13-9An open drawer next to its parent windowCarbon: Create a drawer using the CreateNewWindow function with thekDrawerWindowClass constant, and associate it with its parent window usingSetDrawerParent. The Carbon Window Manager also provides other drawer-relatedfunctions.Cocoa: Drawers support is available via the NSDrawer class.When to Use DrawersUse drawers only for controls that need to be accessed fairly frequently but that don’t need tobe visible all the time. (Contrast this criterion with a utility window, which should be visible andavailable whenever its main window is in the top layer.) Some examples of uses of drawersinclude access to favorites lists, the Mailbox drawer (in the Mail application), or browserbookmarks.Although a drawer is somewhat similar to a sheet in that it attaches to a window and slides out,the two elements are not interchangeable. Sheets are primarily intended to replace modal dialogs,as described in “When to Use Sheets” (page 189), whereas drawers provide additional functionality.When a sheet is open, it is the focus of the window and it obscures the window contents; whena drawer is open, the entire parent window is still visible and accessible.Some uses of a drawer may also be similar to how a source list is used. See “Source Lists” (page164) for information on when to use a source list.Drawer BehaviorThe user shows or hides a drawer, typically by clicking a button or choosing a command. If adrawer contains a valid drop target, you may also wish to open the drawer when the user dragsan appropriate object to where the drawer appears.Window Appearance 163Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 3WindowsWhen a drawer opens or closes, it appears to be sliding from behind its parent window, to theleft, right, or down. You should ensure that a parent window’s default position allows its drawerto open fully without disappearing off screen. If a user moves a parent window to the edge ofthe screen and then opens a drawer, it should open on the side of the window that has room. Ifthe user makes a window so big that there’s no room on either side, the drawer opens off thescreen.To support the illusion that a closed drawer is hidden behind its parent window, an open drawershould be smaller than its parent window. When the parent window is resized vertically, anopen drawer resizes if necessary to ensure that it does not exceed the height of the parent window.(A drawer can be shorter than its parent window.) The illusion is further reinforced by the factthat the inner border of a drawer is hidden by the parent window and that the parent window’sshadow is seen on the drawer when appropriate.The user can resize an open drawer by dragging its outside border. The degree to which a drawercan be resized is determined by the content of the drawer. If the user resizes a drawer to the pointwhere content is significantly obscured, the drawer should simply close. For example, if a drawercontains a scrolling list, the user should be able to resize the drawer to cover up the edge of thelist. But if the user makes the drawer so small that the items in the list are difficult to identify,the drawer should close. If the user sets a new size (if that is possible) for a drawer, the new sizeshould be used the next time the drawer is opened.A drawer should maintain its state (open or closed) when its parent window becomes inactive,or when the window is closed and then reopened. When a parent window with an open draweris minimized, the drawer should close; the drawer should reopen when the window is madeactive again.A drawer can contain any control that is appropriate to its intended use. Follow normal layoutguidelines, as stated in “Positioning Controls” (page 259).Consider a drawer part of the parent window; don’t dim a drawer’s controls when the parentwindow has focus, and vice versa. When full keyboard access is on, a drawer’s contents shouldbe included in the window components that the user can select by pressing Tab.Source ListsA source list is an area of window set off by a movable pane splitter to provide users a way tonavigate data. Use a source list when the data presented in it is a primary means of navigatingwithin the application, as in iTunes or the Finder. Users select objects in the source list that theyact on in the main part of the window.Source lists are normally used in application windows not in document windows. The iTunesplaylist, the iPhoto library, and the Finder sidebar are all examples of source lists.164 Window AppearancePreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 3WindowsFigure 13-10Finder sidebar as a source listDo not put controls in a source list other than contextual controls used to organize the data itself.You might include controls below the source list to add, remove, or get information about itemsin the source list. If you need to add other controls, consider using a drawer instead of a sourcelist.Brushed Metal WindowsWindows have two distinct looks in Mac OS X. There is the standard, default look of windowsas shown in the examples so far. There is also a brushed metal look available shown in Figure13-11. You can use a brushed metal window if your application:■■■Provides an interface for a digital peripheral, such as a camera, or an interface for managingdata shared with digital peripherals—iPhoto or iSync, for example.Strives to re-create a familiar physical device—Calculator or DVD Player, for example.Provides a source list to navigate information—for example, iTunes or the Finder.Don’t use the brushed metal look indiscriminately. Although it works well for some types ofapplications, some applications appear too heavy when using this look. For example, it workswell for the iSync application window (see Figure 13-11), but it does not work very well for theTextEdit document window (see Figure 13-12).Window Appearance 165Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 3WindowsFigure 13-11A brushed metal application windowFigure 13-12Metal and regular versions of a document windowUse brushed metal window look for the primary application window and other windows thatsupport the above criteria, for example the equalizer window in iTunes. Don’t use it for supportingwindows, such as preferences and other dialogs. It is acceptable to have a mix of standard Aquawindows and brushed metal windows within an application, as the Finder does.166 Window AppearancePreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 3WindowsFigure 13-13Mixing standard and brushed metal versions of windowsIf a brushed metal window has a drawer or a toolbar, it automatically inherits the brushed metallook.A brushed metal window has four rounded corners and the outer edges are all beveled. Thebeveled edge requires that elements such as lists and other view-type controls be inset at least10 pixels. Users can move these windows by dragging anywhere on the brushed metal surface(not just the title bar).Carbon: Use the new window type defined in MacWindows.h.Cocoa: Apply the NSTexturedBackgroundWindowMask to a titled window. Avoid usinga borderless window, which won’t assume rounded corners.Window BehaviorThis section discusses how you should open, position, resize and close windows and providesguidelines on how they should behave when a user interacts with them.Opening WindowsYour application should open a window when a user does any of the following:■Double-clicks the icon for a document handled by your application in the FinderWindow Behavior 167Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 3Windows■■■■■Double-clicks your application iconSelects a document in the Finder and chooses open from the File menu (or selects the documentand presses Command-O in the Finder)Chooses a file from within an Open dialogChooses the New command from the File menuClicks the application icon in the Dock and no windows are openWhen the user opens an existing document, make sure its title is the display name, which reflectsthe user’s preference for showing or hiding its filename extension. For more information, see“Using Filename Extensions” (page 55). Don’t display pathnames in document titles.New windows should be named as described in “Naming New Windows” (page 169).The content of some windows changes depending on the user’s selection. For example, whenthe user clicks one of the icons at the top of the Mail Preferences window, the display at thebottom of the window changes. Some windows, such as Displays in System Preferences, switchpanes using a tab control (see “Tab Views” (page 252)).Windows with changeable panes should reopen in their previous state as long as the applicationis open and return to their default views when the user quits. In a window with toolbars, if thetoolbar represents only a subset of multiple possible views (favorites), the default state shouldbe to show all of the options below the toolbar, not a particular pane. If the toolbar displays allof the possible selections, then the default state of the window should be to display whicheverpane the user last selected. For example, when System Preferences opens, all of the possibleselections are visible, but when Mail preferences opens, it displays the last pane selected by theuser.168 Window BehaviorPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 3WindowsFigure 13-14System Preferences in the default stateNaming New WindowsIf your application is not document-based, use the name of your application as the window title.If your application has a short name, use it as the title.Name a new document window “untitled”; leaving it lowercase makes it more obvious that thewindow doesn’t have a name and encourages people to save the document. If the user choosesNew again before saving the first untitled window, name the second window “untitled 2,” andso on. Add numbers to window titles only when there is more than one open untitled window.Don’t put a “1” on the first untitled window, even after the user opens other new windows.Window Behavior 169Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 3WindowsFigure 13-15Appropriate titles for a series of unnamed windowsIf the user dismisses all untitled windows by saving or closing them, then the next new documentshould start over as “untitled,” the next should be “untitled 2,” and so on.Figure 13-16Examples of correct and incorrect window titlesDo use “untitled” for the first new window.Do not capitalize “Untitled”.Do not add a number to the first new window.Do not use additional punctuation.Do not leave title blank.Positioning WindowsWhenever your application displays a window, you must decide where to put it and how big tomake it.New document windows should open horizontally centered, and should display as much of thedocument content as possible. The top of the document window should butt up against the menubar (or the application’s toolbar, if one is open and positioned below the menu bar). Subsequentwindows should open to the right 20 pixels and down 20 pixels. Make sure that no part of a newwindow overlaps with the Dock. (See “The Dock’s Onscreen Position” (page 50).)For nondocument windows, the preference is to open new windows horizontally centered asshown in Figure 13-17. The vertical position should be visually centered: The distance from thebottom of the window to the top of the Dock (if it’s at the bottom of the screen) should be170 Window BehaviorPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 3Windowsapproximately twice the distance as that from the bottom of the menu bar to the top of thewindow. Subsequent windows are moved to the right 20 pixels and down 20 pixels. Make surethat no part of a new window overlaps with the Dock.Figure 13-17“Visually centered” placement of new nondocument windowYXX2YHorizontallycenteredIf a user changes a window’s initial size or location, maintain the user’s choices the next time thewindow opens. If a user opens, moves, and closes a document window without making anyother changes, save the new window position but don’t modify the file’s date stamp.Before reopening a window, make sure that the size and state are reasonable for the user’s currentmonitor setup, which may not be the same as the last time the document was open. Try to maintainthe window’s previous location (the top-left corner of the window) and, if possible, its size. Ifyou can’t replicate both, maintain the location and reduce the window’s size. If that is not possible,try to keep the window on the same monitor, open the window so that as much of the contentas necessary is visible, and follow the guidelines for opening a new window, as describedpreviously.Window Behavior 171Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 3WindowsFor example, if a user opens a document to full size on a wide aspect-ratio display, then nextopens the file on an iMac, open the document in a window sized for the smaller monitor, ratherthan the saved size. For more information on appropriate window size, see “Resizing andZooming Windows” (page 173).On a computer with more than one monitor, display the first new window visually centered inthe screen containing the menu bar. If the user doesn’t move that first window, display eachadditional window below and to the right of its predecessor. If the user moves the window,display each additional window on the screen that contains the largest portion of the frontmostwindow, as shown in Figure 13-18. For example, if the user creates a window, drags it completelyto a second monitor, and then creates a new window, display the new window on the secondscreen. If there is sufficient room on the screen, display subsequent windows to the lower rightof the frontmost window. If there isn’t enough room on the screen, display subsequent windowsstarting in the original visually centered position, and then continue to display additional windowsslightly offset to the lower right.If the user moves a window so that it is entirely positioned on a second monitor, then opens thewindow on a single-monitor system, respect the window’s previous size, if possible.Figure 13-18Appropriate placement of a new window on a system with multiple monitors (the user movedthe first window to span the screens)If the user opens several windows on a multiple-monitor system, continue to place the windowson the screen where the user is working, each new one below and to the right of its predecessor.Don’t open a window so that it spans monitors; the initial position of a window should alwaysbe contained on a single screen.Moving WindowsThe user moves a window by dragging its title bar (or the border for brushed metal windows).As a user drags, the full window and its contents move.172 Window BehaviorPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 3WindowsPressing the Command key while dragging an inactive window moves the window but does notmake it active.Your application should never allow users to move a window to a position from which they can’treposition it.Resizing and Zooming WindowsYour application determines the minimum and maximum window size. Base these sizes on theresolution of the display and on the constraints of your interface. For document windows, try toshow as much of the content as possible, or a reasonable unit, such as a page.Your application also sets the values for the initial size and position of a window, called thestandard state. Don’t assume that the standard state should be as large as possible; some monitorsare much larger than the useful size for a window. Choose a standard state that is best suited forworking on the type of document your application creates and that shows as much of thedocument’s contents as possible.The user can’t change the standard size and location of a window, but your application canchange the standard state when appropriate. For example, a word processor might define thestandard size and location as wide enough to display a document whose width is specified inthe Page Setup dialog.The user changes a window’s size by dragging the size control in the lower-right corner. As auser drags, the amount of visible content in the window changes. The upper-left corner of thewindow remains in the same place. The actual window contents are displayed at all times.If the user changes a window’s size or location by at least 7 pixels, the new size and location isthe user state. The user can toggle between the standard state and the user state by clicking thezoom button. When the user clicks the zoom button of a window in the user state, first determinethe appropriate size of the standard state. Move the window as little as possible to make it thestandard size, and keep the entire window on the screen. The zoom button should not cause thewindow to fill the entire screen unless that was the last set user state.When a user with more than one monitor zooms a window, the standard state should be on themonitor containing the largest portion of the window, not necessarily the monitor with the menubar. This means that if the user moves a window between monitors, the window’s position inthe standard state could be on different monitors at different times. The standard state for anywindow must always be fully contained on a single monitor.When zooming a window, make sure it doesn’t overlap with the Dock. For more information,see “The Dock’s Onscreen Position” (page 50).Minimizing and Expanding WindowsWhen the user clicks the minimize button, double-clicks the title bar, or presses Command-M,the window minimizes into the Dock. The window’s icon remains in the Dock until the userclicks it or, if it is the application’s only open window, until the user clicks the application iconin the Dock. For more information, see “Clicking in the Dock” (page 51).Window Behavior 173Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 3WindowsClicking an application icon in the Dock should always result in a window—a document oranother appropriate window—becoming active. In a document-based application that is notopen when the user clicks the Dock icon, the application should open a new, untitled window.While an application is open, the Dock icon has a symbol below it. When a user clicks an openapplication’s icon in the Dock, the application becomes active and all open unminimized windowsare brought to the front; minimized document windows remain in the Dock. If there are nounminimized windows when the user clicks the Dock icon, the last minimized window shouldbe expanded and made active. If no documents are open, the application should open a newwindow. (If your application is not document based, display the application’s main window.)Closing WindowsUsers can close windows by:■■■Choosing Close from the File menuPressing Command-WClicking the close buttonWhen a user closes a document window, your application should:■■Decide what to do with unsaved data (see “Dialogs for Saving, Closing, and Quitting” (page196))Store the window’s onscreen position and size (so they can be used when the window isreopened)If you application is not document-based and does not perform any function without the mainwindow open, the application should quit when the user closes the main window. For example,Address Book quits when its main window is closed. iTunes though, since it can continue to playwithout having a window open, does not quit when its main window is closed.Window LayeringEach application and document window exists in its own layer, so documents from differentapplications can be interleaved. Clicking a window to bring it to the front doesn’t disturb thelayering order of any other window.A window’s depth in the layers is determined by when the window was last accessed. When auser clicks an inactive document or chooses it from the Window menu, only that document, andall open utility windows, should be brought to the front. Users can bring all windows of anapplication forward by clicking its icon in the Dock or by choosing Bring All to Front in theapplication’s Window menu. These actions should bring forward all of the application’s openwindows, maintaining their onscreen location, size, and layering order within the application.For more information, see “The Window Menu” (page 148) and “Clicking in the Dock” (page51).Utility windows are always in the same layer, the top layer. They are visible only when theirapplication is active.174 Window BehaviorPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 3WindowsUsers can cycle forward or backward through all open document windows using Command-‘(acute accent) and Command-Shift-‘ (acute accent). If full keyboard access is on, they can cyclethrough all windows with Control-F4 and Shift-Control-F4.Main, Key, and Inactive WindowsWindows have different looks based on how the user is interacting with them. The foremostdocument or application window that is the focus of the users attention is is referred to as themain window. The main window is often also the key window. The key window is the windowthat accepts user input, whether from the keyboard, mouse, or alternative input device.The main window is not always the key window though. There are times where a window otherthan the main window takes the focus of the input device, while the main window still remainsthe focus of the user’s attention. Common examples are the use of an inspector, a Find dialog,or the Fonts or Colors windows while editing text or graphics in a document.If the main and key window are different windows, they are distinguished from one another bythe look of their title bars.Main and key windows are both active windows and visually distinct from inactive windowsin that their controls have color while the controls in inactive windows do not have color. Inactivewindows are windows the user has open but are not in the foreground. Main and key windowsare always in the foreground and their controls always have color. Note the visual distinctionsbetween main, key, and inactive windows in Figure 13-19.Window Behavior 175Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 3WindowsFigure 13-19Main, key, and inactive windowsInactive windowMain windowKey windowClick-ThroughAn item that provides click-through is one that a user can activate on an inactive window withone click, rather than clicking first to make the window active and then clicking the item.Click-through provides greater efficiency in performing such tasks as closing or resizing inactivewindows, and copying or moving files. In many cases, however, click-through could confuse auser who clicks an item unintentionally.Click-through is not a property of a class of controls; any control could support click-through inmany contexts, but the same control could disable click-through when its use could be destructivein a particular context.In an inactive window, an item that provides click-through should have its text or glyph (suchas an arrow) in 100-percent black; if the item usually has color (such as a radio button), it shouldbe colorless in its click-through state. Items that do not provide click-through should appear intheir disabled state.176 Window BehaviorPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 3WindowsFigure 13-20An inactive window with controls that support click-throughAll the controls inthis window supportclick-through.Don’t provide click-through for items or actions that:■■Are potentially harmful (for example, the Delete button in Mail)Are difficult to recover from, such as:❏❏❏Actions that are difficult or impossible to cancel (the Send button in Mail)Dismissing a dialog without knowing what action was taken (for example, it’s not easyto “unsave” a document)Removing the user from the current context (selecting a new item in a column, for example,can change the target of the Finder window)Clicking in one of these situations should result in the window being brought forward but noaction being taken.Window Behavior 177Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 3WindowsFigure 13-21The Delete button on the inactive window does not support click-throughThis button does notsupport click-through.In general, you can implement click-through for an item that provides confirmation feedbackbefore taking place—in other words, the user can cancel the action—such as deleting a user inAccounts preferences. If you want to implement click-through for an item that doesn’t provideconfirmation feedback, consider how difficult it will be for the user to undo the action. Forexample, in Mail, it would be inadvisable to implement click-through for the Delete button, whichdeletes a message without providing feedback first, because its resulting action is harmful.Click-through for the New button is OK because its resulting action is not harmful and is easyto undo.Scrolling WindowsPeople use scroll bars to view areas of a document or a list that is larger than can fit in the currentwindow. Only active windows can be scrolled. A window can have a horizontal scroll bar, avertical scroll bar, both, or neither.178 Window BehaviorPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 3WindowsFigure 13-22The elements of a scroll barScroll barScrollerScroll trackScroll arrowThe scroller size reflects how much of the content is visible; the smaller the scroller, the less ofthe content the user can see at that time. The scroller represents the relative location, in the wholedocument, of the portion that can be seen in the window.If the entire contents of a document is visible in a window, the scroll bars do not contain scrollers.Scroll bars in inactive windows have an inactive appearance. See Figure 13-20 (page 177).The user can use scroll bars by doing the following:■■■Dragging the scroller: This method is usually the fastest way to move around a document.The window’s contents changes in “real time” as the user drags the scroller.Clicking a scroll arrow: This means, “Show me more of the document that’s hidden in thisdirection.” The scroller moves in the direction of the arrow. Each scroll arrow click movesthe content one unit; your application determines what one unit equals. For example, a wordprocessor would move a line of text per click, a spreadsheet could move one row or column.To ensure smooth scrolling effects, specify units of the same size throughout a document.Clicking or pressing in the scroll track: Clicking advances the document by a windowful (thedefault) or to the pointer’s hot spot, depending on the user’s choice in Appearance preferences.A “windowful” is the height or width of the window, minus at least one unit of overlap tomaintain the user’s context. This unit of overlap should be the same as one scroll arrow unit(for example, a line of text, a row of icons, or part of a picture). The Page Up and Page Downkeys also move the document view by a windowful.Pressing in the scroll track displays consecutive windowfuls of the document, until thelocation of the scroller catches up to the location of the pointer (or until the user releases themouse button).It’s best not to add controls to the scroll-bar area of a window. If you add more than one controlto this area, it’s hard for people to distinguish among controls and click the right one. Acceptableadditions to the scroll area include a splitter bar and a status bar that shows, for example, thecurrent page. To ensure that window controls are easy to use and understand, it’s best to placeWindow Behavior 179Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 3Windowsthe majority of your features in the menus as commands. If you really want to provide additionalaccess to features, consider creating a utility window such as a palette with buttons. Onlyfrequently accessed features that significantly benefit users’ productivity should be elevated tothe primary interface.Utility windows that coexist with other windows and need to use the least amount of screenspace possible may use small or mini scroll bars. If a window has small or mini scroll bars, allother controls within the window content area should also be the smaller version. For moreinformation, see “Using Small and Mini Versions of Controls” (page 269).Make sure you don’t use a scroll bar when you should really use a slider. Use sliders to changesettings; use scroll bars only for representing the relative position of the visible portion of adocument or list. For information about sliders, see “Slider Controls” (page 238).Automatic ScrollingMost of the time, the user should be in control of scrolling. Your application must performautomatic scrolling in these cases:■■When your application performs an operation that results in making a new selection ormoving the insertion point (for example, when the user searches for some text and yourapplication locates it), scroll the document to show the new selection.When the user enters information from the keyboard at a location not visible within thewindow (for example, the insertion point is on one page and the user has navigated to anotherpage), scroll the document automatically to incorporate and display the new information.Your application determines the distance to scroll.■■When the user moves the pointer past the edge of the window while holding down the mousebutton to make an extended selection, scroll the document in the direction the pointer moves.When the user selects something, scrolls to a new location, and then tries to perform anoperation on the selection, scroll so the selection is showing before your application performsthe operation.Whenever your application scrolls a document automatically, move the document only as muchas necessary. That is, if part of a selection is showing after the user performs an operation, don’tscroll at all. If your application can scroll in only one direction to reveal the selection, don’t scrollin both.When autoscrolling to a selection, try to show the selection in context. When the selection is toolarge to show in its entirety, it might be a good idea to show some context rather than having theselection fill the window.Utility WindowsUtility windows are either application-specific or systemwide. Application-specific utility windowsdisappear when the application is deactivated.Systemwide utility windows, such as the Colors window and the Fonts window, float above allopen windows.180 Utility WindowsPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 3WindowsYou can create a modeless utility window, such as a tools palette, to present controls or settingsthat affect the active document window. Utility windows are useful for keeping extremelyimportant controls or information accessible at all times in the context of a user task. Becauseutility windows take up screen space, however, don’t use them when you can meet the needwith a modeless dialog (the user changes settings and then closes the dialog) or by adding a fewappropriate controls to a window frame.A user can open several utility windows at a time; they float on top of document windows. Whena user makes a document active, all of the application’s utility windows should be brought tothe front, regardless of which document was active when the user opened the utility window.When your application is inactive, its utility windows should be hidden. Utility windows shouldnot be listed in the Window menu as documents, but you may put commands to show or hideutility windows in the Window menu.Figure 13-23Examples of utility windowsA utility window may have a title. An untitled utility window should nonetheless have a title-barregion for dragging the window.Utility windows cannot be minimized (the minimize button is always unavailable in utilitywindows). If you don’t want users to be able to use the zoom button, you could show only theclose button. Don’t hide only the zoom or only the minimize button; a utility window shouldhave either all three title-bar controls or only the close button, as shown in Figure 13-23.Carbon: Specify which of controls are visible with the ChangeWindowAttributesfunction.Utility Windows 181Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 3WindowsFigure 13-24Utility window controlsFor information about designing utility windows, see “Using Small and Mini Versions ofControls” (page 269).Carbon: Utility windows are available using kUtilityWindowClass.Cocoa: use NSNonactivatingPanelMaskThe About WindowThe About window, also called the About box, is a window that contains your application’sversion and copyright information. It should be modeless so the user can leave it open andperform other tasks in the application.You should include an About window and make it accessible from the application menu.At a minimum, your application’s About window should:■■■Have a title bar with no titleBe movableInclude the close button as the only active window control182 The About WindowPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 3Windows■■Display application brandingInclude the full application name and version numberIt is recommended to also provide text that briefly describes what the application does, as wellas copyright information, as shown in Figure 13-25.Figure 13-25Example of an About windowsApplication title14-point Lucida GrandeBoldApplication descriptionSmall system font11-point Lucida GrandeRegularApplication icon64 x 64 pixelsApplication versionLabel font10-point Lucida Grande RegularCopyright informationLabel font10-point Lucida Grande RegularThe About window (or the splash screen) is the appropriate place for product branding elements;avoid putting them in document windows and dialogs.Provide the relevant information in the Info.plist file.Preferences WindowsA preference window contains settings that the user changes infrequently. If you have severaldifferent groups of preferences, consider using a toolbar where each item in the toolbar changesthe content of the main window. For examples, note how some of the applications provided withMac OS X—such as the Finder, Safari, or Mail—implement preferences windows.Preferences Windows 183Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 3WindowsFigure 13-26Finder preferences windowYou don’t need to include a resize control or a zoom button. The preferences window shouldnot be a utility window and it should be modeless.If you have changeable panes in your preferences window, be sure to remember which pane theuser had selected the last time the window was open.The menu item to show your preferences window should be labeled Preferences and be in theapplication menu. If you feel it appropriate to designate a keyboard shortcut to invoke thePreferences window, use Command-comma.Inspectors and Info WindowsInspectors are utility windows that allow users to view the contents and attributes of a selection.The often also provide ways to modify these attributes. Xcode, Keynote, and the Finder all makeuse of inspectors. Inspectors should update dynamically when the user selects a different item.184 Inspectors and Info WindowsPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 3WindowsFigure 13-27Info windowFigure 13-28Inspector windowAn Info window functions like an inspector except that it does not update dynamically. It showsdetails or attributes of the item that was selected when the window was opened, even after thefocus has been changed to another item.It may be useful to provide both inspectors and Info windows in your application. Multipleinspector windows and Info windows can be open at once.Inspectors and Info Windows 185Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 3WindowsFind WindowA Find window opes in response to the Find command to provide an interface for specifyingitems to find. Its appearance can vary depending on the needs of your application, but if yourapplication handles text you might want to make your find window similar to the one illustratedin Figure 13-29 to provide a consistent user experience.Figure 13-29A Find windowCarbon: Not availableCocoa: Use the NSFindPanel class.Fonts Window and Colors WindowMac OS X includes standard windows for users to select fonts or colors. If you need a way forusers to set fonts or colors, use these standard windows instead of making your own so that usersdon’t have to learn a new way to accomplish a familiar task.By implementing these windows, you get the correct utility window behavior. These windowsare discussed in “Using Existing Technologies” (page 63).186 Find WindowPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 4DialogsA dialog is a window designed to elicit a response from the user. Many dialogs—the Print dialog,for example—permit the user to provide many responses at one time.Alerts are dialogs that appear when the system or an application needs to communicateinformation to the user. They provide messages about error conditions or warn users aboutpotentially hazardous situations or actions.For information about using the keyboard to interact with dialogs, see “Keyboard Focus andNavigation” (page 85).For specific design information on how to lay out dialogs, see “Layout Examples” (page 259).Carbon: For implementation information, see Handling Carbon Windows and Controlsin Carbon User Experience Documentation.Cocoa: See Dialogs and Special Panels and Windows and Panels in Cocoa User ExperienceDocumentation.Types of Dialogs and When to Use ThemMac OS X applications can use these types of dialogs:■■■Modeless. Enables users to change settings in a dialog while still interacting with documentwindows; the Find window in many word processors is an example of a modeless dialog.Modeless dialogs have title bar controls (close, minimize, and zoom buttons).Document modal. Prevents the user from doing anything else within a particular document.The user can switch to other documents in the application, and to other applications.Document-modal dialogs should be sheets, which are discussed in “Document-Modal Dialogs(Sheets)” (page 188).Application modal. Prevents the user from doing anything else within the owner application;the user can still switch applications. Most application-modal dialogs do not have the standardtitle bar controls (close, minimize, zoom); the user dismisses these dialogs by clicking a pushbutton, such as OK or Cancel. Application-modal dialogs that appear as the result of the userchoosing a command, such as the Open dialog in Figure 14-7 (page 195), should display atitle that matches the command.Types of Dialogs and When to Use Them 187Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 4DialogsAn alert can be nonmodal, document modal, or application modal. If the error condition ornotification applies to a single document, the alert should be document modal (a sheet). See theSave Changes alert in Figure 14-11 (page 200) for an example. If the alert applies to the state ofthe application as a whole, or to more than one document or window belonging to that application,the alert should be application modal. Both the Review Changes alert for multiple unsaveddocuments ( Figure 14-13 (page 201)) and the Save Changes alert for applications that are notdocument-based ( Figure 14-12 (page 201)) are application modal.Document-Modal Dialogs (Sheets)A sheet is a modal dialog attached to a particular document or window, ensuring that the usernever loses track of which window the dialog applies to. The ability to keep a dialog attached toits pertinent window helps users take full advantage of the Mac OS X window layering model(see “Window Layering” (page 174)). Sheets also allow users to perform other tasks beforedismissing the dialog, so there’s no longer the sense of the system being “hijacked” by theapplication.You lay out sheets like any other dialog in Mac OS X.Figure 14-1The Save Changes alert: An example of using a sheet to display a document-modal dialogCarbon: You are responsible for creating, showing, handling the events for, and closingsheets. Other sheet behavior, such as the animation when the sheet appears and isdismissed, is handled automatically by the Window Manager.Cocoa: You are responsible for loading, showing, and closing sheets. While a sheet itdisplayed, events are handled by the Application Kit just as for any other window.Other sheet behavior, such as the animation when the sheet appears and is dismissed,is handled automatically by the Application Kit.188 Types of Dialogs and When to Use ThemPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 4DialogsSheet BehaviorSheets are displayed as an animation that appears to emerge from the window’s title bar. Whena sheet opens on a window near the edge of the screen, and the sheet is wider than the windowit’s attached to, the sheet moves the window away from the edge; when the sheet is dismissed,the window returns to its previous position.Only one sheet may be open for a window at any one time. A sheet prevents any other operationon that window until the sheet is dismissed. If, when the user responds to a sheet, another sheetfor that document must open, the first sheet closes before the second one opens.A sheet on an active document window should cover (appear on top of) any active utility windows(if necessary). However, if the user leaves a sheet open and clicks another document in the sameapplication, the inactive window and its sheet should go behind any open utility windows.In an application that provides multiple windows for the same document (so that the user cansee different parts of a document simultaneously), a sheet is not appropriate. Use an applicationmodal dialog in this situation to make it clear that changes to one window affect other windowsin the application.When to Use SheetsUse sheets for dialogs specific to a document when the user interacts with the dialog and dismissesit before proceeding with work. Some examples of when to use sheets:■■■A modal dialog that is specific to a particular document, such as saving or printing.A modal dialog that is specific to a single-window application that does not create documents.A single-window utility program might use a sheet to request acceptance of a licensingagreement from the user, for example.Other window-specific dialogs typically dismissed by the user before proceeding. Use a sheetwhen a dialog benefits from being attached to the window as a modal dialog, even if youmight otherwise design the dialog as a modeless dialog.When Not to Use SheetsDon’t use sheets in the following situations:■■■■For dialogs that apply to several windows. Sheets are strictly intended to be used in situationswhen a particular dialog is associated only with the window to which it is attached.For modeless operations where the dialog should be left open to allow the user to observethe effects of changes applied. Such tasks (find and replace operations, for example) are bettersuited to modeless dialogs, utility windows, or drawers.On a window that doesn’t have a title bar. Sheets should emerge from a definite visual edge.When the user will need information in the window is essential to filling in requestedinformation in the sheet.Types of Dialogs and When to Use Them 189Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 4DialogsAlertsAlerts display messages to inform users of situations that are notable or potentially dangerous.Alerts are modal dialogs. When an alert applies to one document or in single window applications,an alert should be displayed as a sheet. See “When to Use Sheets” (page 189) for guidelines.Figure 14-2A standard alertMessage textNo titleInformative textApplication iconCancel buttonDefault buttonAlso see “Layout Examples” (page 259), especially Figure 16-2 (page 261), and “Writing GoodAlert Messages” (page 191).The Elements of an AlertAn alert should contain only the following elements:■Alert message text. This text, in emphasized (bold) system font, provides a short, simplesummary of the error or condition that summoned the alert. This should be a completesentence; often it is presented as a question. See “Writing Good Alert Messages” (page 191)for more information.■Informative text. This text appears in the small system font and provides a fuller descriptionof the situation, its consequences, and how to get out of it. For example, a warning that anaction cannot be undone is an appropriate use of informative text.ImportantDo not leave informative text out. What you think of as anintuitive alert message might be far from intuitive to your users.Use this text to reword and expand on the alert message text.■Buttons for addressing the alert. Button names should correspond to the action the userperforms when pressing the button—for example, Erase, Save, or Delete. The rightmostbutton in the dialog is the button that confirms the alert message text. The rightmost buttonis usually, but not always, the default button. Note that in Cocoa methods, the rightmostbuttons is always referred to as the default button even though it might not be. For moreinformation, see “The Default Button” (page 193).190 Types of Dialogs and When to Use ThemPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 4Dialogs■The application icon. Because of the Mac OS X window layering model (described in“Window Layering” (page 174)), an icon is necessary to make it clear to the user whichapplication is displaying the alert.In rare cases, you may want to display a caution icon in your alert, badged with the applicationicon as shown in Figure 14-3. A badged alert is appropriate only if the user is performing atask, such as installing software, and a possible side effect of that task would be the inadvertentdestruction of data. Don’t use a caution icon for tasks whose only purpose is to overwrite orremove data, such as Save or Empty Trash; too-frequent use of the caution icon dilutes itssignificance.ImportantThe note, caution, and stop alerts used in Mac OS 9 should notbe used in Mac OS X. Most alerts should simply show theapplication icon. very occasionally the Mac OS X caution icon isappropriate.Figure 14-3A customized alert showing the caution icon badged with an application iconCarbon: See the Dialog Manager Reference in Carbon User Experience Documentation.Cocoa: See the Dialogs and Special Panels in Cocoa User Experience Documentation.Writing Good Alert MessagesA good alert message states clearly what caused the alert to appear and what the user can doabout it. Express everything in the user’s vocabulary. Figure 14-4 shows an example of an alertmessage that provides little useful information.Types of Dialogs and When to Use Them 191Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 4DialogsFigure 14-4A poorly written alert messageYou could improve this message by describing the problem in the user’s vocabulary as shownin Figure 14-5.Figure 14-5An improved alert messageTo make the alert really useful, provide a suggestion about what the user can do to get out of thecurrent situation. Figure 14-6 shows the alert with additional information.Figure 14-6A well-written alert messageNote: The examples in these figures would probably be sheets in a real application.192 Types of Dialogs and When to Use ThemPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 4DialogsDialog BehaviorWhen appropriate, your application’s dialogs should display default values for controls and textfields so the user can verify information rather than generating it from scratch. Display a selectionor an insertion point in the first location—a text entry field or a list, for example—that acceptsuser input.When it provides an obvious user benefit, static text in a dialog should be selectable. For example,a user should be able to copy an error message or a serial number to paste elsewhere.In dialogs that display columns and are user resizable, such as the Open dialog, as the dialog ismade bigger, the columns grow and additional columns appear. All other elements remain thesame size and anchor to the right, center, or left side of the dialog.The Default ButtonThe default button should be the button that represents the action that the user is most likely toperform if that action isn’t potentially dangerous. A default button has color and pulses to letthe user know that it is the default. When the user presses the Enter key or the Return key, yourapplication should respond as if the user clicked the default button.Don’t use a default button if the most likely action is dangerous—for example, if it causes a lossof user data. When there is no default button, pressing Return or Enter has no effect; the usermust explicitly click a button. This guideline protects users from accidentally damaging theirwork by pressing Return or Enter. You can consider using a safe default button, such as Cancel.Don’t use a default button if you use the Return key in text entry boxes. Having two behaviorsfor one key can confuse users and make the interface less predictable.In addition to the action button or buttons, it’s a good idea to include a Cancel button. This buttonreturns the computer to the state it was in before the dialog appeared. It means “forget I mentionedit.” Always map the keyboard shortcut Command-period and the Esc (Escape) key to the Cancelbutton. These keyboard equivalents, along with Return and Enter, are accelerator keys and servethe purpose of letting the user respond quickly to a dialog or an alert. In general, it’s not a goodidea to assign other keyboard shortcuts to buttons. If you find it useful to assign keyboardshortcuts to some buttons that are used very often in your application, be sure to follow theguidelines in “Keyboard Shortcuts” (page 82).Accepting ChangesIn general, all changes a user makes in a dialog should appear to take effect immediately. Thereare three possible opportunities for data validation in a dialog:1. When the user types data2. When the user moves out of a data field (by pressing Tab, for example)3. When the user clicks a button to apply changesDialog Behavior 193Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 4DialogsIt is your responsibility to make the three states as clear as possible to the user. For example,checkboxes and radio buttons update immediately and display the appropriate results.You need to decide when your application does error checking of user input. Possible approaches:■■Evaluate the input and check for errors as the user tabs from one field to the next. Thedrawback is that it isn’t clear to the user that the changes are taking effect as he or she tabsamong items. The user doesn’t click a button, and so isn’t aware of completing an action.Save user input in a queue and apply it when the user clicks a button, closes the dialog, orswitches to another application. If your application waits to check user-input errors until theuser tries to dismiss the dialog, you may have to present an alert, thereby forcing the user torevisit the dialog. If you do error checking as the user enters input, it takes more time upfront, but you can warn the user immediately when invalid data is entered.In most cases, validating input after each keystroke is annoying and unnecessary. It’s better todesign your interface to automatically disallow invalid input. For example, your applicationcould automatically convert lowercase characters to uppercase when appropriate.In addition to error checking, you need to decide when to apply user input. In some cases, changescan take effect immediately—for example, View Options for Finder windows. In other cases, itmay be appropriate to wait until the user performs an action, such as clicking an Apply button.In a dialog that has multiple panes (selected by buttons or a pop-up menu), avoid validating datawhen a user switches from one pane to another.Finally, you need to determine whether your application should automatically perform anoperation based on user input or whether the user should initiate the operation, for example, byclicking a button. It’s acceptable to automatically perform an operation that completes quicklyand returns user control within a couple of seconds. For an operation that takes a longer time toexecute, it’s best to warn the user of the estimated time required and let the user initiate it.The Open DialogThe Open dialog appears when the user chooses the Open command or presses Command-O.The Open dialog is application modal (the user can switch to other applications).If you implement an Open command, you should also include an Open Recent command sousers can open recently opened documents without going through the dialog.194 The Open DialogPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 4DialogsFigure 14-7An Open dialogThe Open dialog contains these elements:■■■■■■■■A default title (“Open”); you should add your application’s name to the Open dialogtitle—”TextEdit: Open,” for example.Back and forward buttons to navigate back and forth between selections made in the list orcolumn view.A pop-up menu that contains common places a user might save things and Recent Places(the five most recent folders the user opened or saved documents to). Your applicationspecifies the default location, typically one of the predefined folders in the user’s home folder.(For recommended default locations, see “Where to Put Files” (page 52).) If the user selectsanother folder, the dialog should “remember” the user’s selection the next time the dialogappears.A sidebar that mirrors the one presented in the Finder.A column or list view for navigating the file system.A Cancel button and an Open (default) button.A resize control in the lower-right corner.Expert users can specify a pathname by pressing Command-Shift-G.You can extend the Open dialog as appropriate for your application as illustrated in Figure 14-8.You might, for example, include a pop-up menu allowing users to filter the type of files thatappear in the list. Items that do not meet the filtering criteria would appear dimmed. The systemcreates a list of native file types supported by the application to populate the menu. You cansupplement this list with custom types and specify the default to show when the dialog opens.You should include an All Applicable Files item, but it does not have to be the default.The Open Dialog 195Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 4DialogsFigure 14-8A customized Open dialogOpen dialogs should support document preview and can support multiple selection if yourapplication allows more than one document to be open at a time.Carbon: See Navigation Services for Carbon in Carbon User Experience Documentation.Cocoa: Open dialogs are NSOpenPanels. You typically display an Open dialog byinvoking the OpenPanel method. See Application File Management in Cocoa FileManagement Documentation.Dialogs for Saving, Closing, and QuittingThis section describes the standard dialogs that you use when a user is saving a document forthe first time, closing a document, or quitting an application.Save DialogsAn application that saves the contents of individual windows—which would be most text andgraphics applications—should use document-specific sheets for its Save dialogs. The Save dialoghas two states: minimal and expanded. Clicking the disclosure button toggles between thesestates. If the user changes the state, the next Save dialog should open in the selected state.196 Dialogs for Saving, Closing, and QuittingPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 4DialogsAs described in “Using Filename Extensions” (page 55), your application should pass in afilename extension as part of every filename. Users can control its visibility using the HideExtension checkbox in the expanded Save dialog; see “The Expanded Save Dialog” (page 198).Existing documents do not get extensions added to or removed from their filenames unless theuser chooses Save As and changes the setting in the Save dialog.The Minimal Save DialogIn the minimal Save dialog, users can save changes to an unnamed document, name or renamea document, and choose a frequently accessed location to store it.Figure 14-9The minimal (collapsed) Save dialogThe minimal Save dialog contains these elements:■Save As text field for the document name. (Expert users can enter pathnames by pressingCommand-Shift-G.)If the document has not been saved previously, your application should put the default name(such as “untitled”) in this field, and the filename should be selected. If the user has chosento make the filename extension visible, the extension is not selected.If the document has been saved previously and the user chooses Save As, the Save dialogshould open with the document name highlighted in the Save As field. The filename extension(if it is visible) is not selected.■Where pop-up menu, containing mounted volumes, the folders in the Finder sidebar, andRecent Places (the five most recent folders the user opened or saved documents to). Yourapplication specifies the default location, typically the predefined Documents folder in theuser’s home folder. (For recommended default locations, see “Where to Put Files” (page 52).)If the user selects another folder, the dialog should “remember” the user’s selection the nexttime the dialog appears.Dialogs for Saving, Closing, and Quitting 197Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 4Dialogs■■■A Save button (default).A Cancel button. Dismisses the dialog and returns to the application’s previous state.A disclosure button. Clicking it displays the expanded Save dialog.Any custom elements you add go between the Where pop-up menu and the buttons at the bottomof the dialog.The Expanded Save DialogWith the expanded Save dialog, users can save a document in a location not accessible in theWhere pop-up menu in the minimal Save dialog.Figure 14-10The expanded Save dialogClicking the disclosure button in the minimal Save dialog displays the following:■■■■■Back and forward buttons to navigate back and forth between selections made in the list orcolumn view.A sidebar that mirrors the one presented in the Finder.A column or list view for navigating the file system.A New Folder button, which displays an application-modal dialog that asks the user to namethe new folder, and then creates it.A Hide Extension checkbox, which allows the user to control whether or not the filename’sextension (.jpg, for example) is visible. The Hide Extension checkbox should be selected as198 Dialogs for Saving, Closing, and QuittingPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 4Dialogsthe default (that is, filename extensions should not appear in user-visible filenames unlessthe user requests them).If the user changes the state of the checkbox for a particular document, the next new documentshould match the last user-selected state, even after the user quits and reopens the application.The filename in the Save As field updates in real time as the checkbox is selected or deselected.Don’t provide your own options for handling filename extensions; use the standard Openand Save dialogs.Carbon: Set the PreserveSaveFileExtension flag when calling the Savedialog, and use NavCompleteSave to set the flag to hide the filenameextension.If you want to add a Format pop-up menu so that users can specify a document’s file format,place it between the Save As text field and the Where pop-up menu (not labeled in the expandedstate). The system creates a list of native file types supported by the application to populate themenu. You can supplement this list with custom types and specify the default format to showwhen the dialog opens. When a user changes a document’s type with the Format menu, thefilename extension (visible or hidden) should change accordingly.If you add other elements to customize the expanded Save dialog, they should appear above theCancel and Save buttons. When the dialog is expanded, custom elements should appear betweenthe file system browser and the push buttons.In default keyboard navigation mode, pressing Tab in the expanded Save dialog shifts thekeyboard focus from the Save As text field to the sidebar, to the visible columns, and then backto the text field.Closing a Document With Unsaved ChangesWhen the user attempts to close a document that has unsaved changes, present a Save Changesalert. An application that saves the contents of individual windows—like most text and graphicsapplications—should use document-specific sheets, like the one shown in Figure 14-11, for itsSave Changes alert. In an application that can display multiple views of the same file, if the userchooses the Close File command (instead of Close Window; see “The File Menu” (page 142)),open the sheet on the frontmost window and change the alert message text from “document” to“file”; after the user clicks Save or Don’t Save, close all open views of the file.Dialogs for Saving, Closing, and Quitting 199Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 4DialogsFigure 14-11A Save Changes alert for a document-based applicationWhen a Save Changes sheet is open, the document’s close button and the Close command in theFile menu are unavailable; the user can’t close the document until the Save Changes sheet isaddressed.As described in “Sheet Behavior” (page 189), if an application provides multiple views of thesame document, the sheet should open on the active window and prevent the user from interactingwith other open views of the file.Saving Documents During a Quit OperationUsers can interrupt a quit operation with documents still unsaved. For example, if a user choosesQuit and a save alert (a sheet) opens for a document, the user can work on other documents orswitch to another application without addressing the save alert.When a user quits an application in which all open documents have been saved, all documentsclose immediately and the application quits.Quitting an Application That Is Not Document-BasedWhen a user attempts to quit an application that is not document-based where contents of manywindows are saved simultaneously, present an application-modal Save Changes alert, such asthe one shown in Figure 14-12.200 Dialogs for Saving, Closing, and QuittingPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 4DialogsFigure 14-12A Save Changes alert for an application that is not document-basedQuitting an Application With Multiple Unsaved Documents OpenWhen a user attempts to quit a document-based application and there is more than one documentwith unsaved changes open, present an application-modal Review Changes alert, such as theone shown in Figure 14-13.Figure 14-13The Review Changes alert (application modal) that appears when the user quits with morethan one unsaved document openThe appropriate action for each button is as follows:■■■Discard Changes. Closes all documents without saving changes and quits the application.Cancel. Cancels the Quit command.Review Changes. All open documents (including those minimized in the Dock) come forward,with the unsaved documents on top. The active document presents the Save Before Quittingalert. If the user clicks Save, the Save dialog appears (if the document has not previously beensaved). If the user clicks Don’t Save, the next unsaved document comes forward with its SaveBefore Quitting alert. If the user dismisses the last Save Before Quitting alert with Save orDon’t Save, all documents close and the application quits.During the review, if the user activates another unsaved document, it should come forwardwith its Save Before Quitting sheet open. Already-opened Save Before Quitting sheets onother documents remain open. During the review, if the user activates a saved document,the review process continues when the next unsaved document becomes active.Dialogs for Saving, Closing, and Quitting 201Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 4DialogsIf, in the midst of a quit operation, the user clicks the application icon in the Dock or choosesBring All to Front from the Window menu, documents should appear in this order: documentswith open sheets on top, unsaved documents next, and then saved documents.At any time during the review process, the user can click Cancel to stop the quit operation.If the user initiates a Quit command while in the review state, the process begins again withthe application-modal alert shown in Figure 14-14.Saving a Document With the Same Name as an Existing DocumentIf the user types the name of a document that already exists in the same location into the SaveAs field of a Save dialog, and then clicks Save, present an application-modal alert in which theuser can confirm whether or not to replace the previous document.Figure 14-14Alert for confirming replacing a fileThe Choose DialogA Choose dialog lets a user select an item as the target of a task. For example, when a user attemptsto open a broken alias, the Fix Alias dialog lets the user choose another item for the alias to open.An application can have more than one Choose dialog, but only one can be open at a time. Insome situations, it may be appropriate for a Choose dialog to be a sheet.202 The Choose DialogPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 4DialogsFigure 14-15A Choose dialogA Choose dialog:■■■■■Can be opened by various commandsCan support multiple selectionSupports document previewCan be resized with the resize control in the lower-right cornerCan include a Show pop-up menu, which allows the user to filter the type of files that appearin the list. Items that do not meet the filtering criteria appear dimmed. The system creates alist of native file types supported by the application to populate the menu. You can supplementthis list with custom types and specify the default to show when the dialog opens. You shouldinclude an All Applicable Files item, but it does not have to be the default.The dialog’s default title is “Choose,” but you should change it to include the name of the task.For example, if the command that brings up the dialog is Choose Picture, the dialog should betitled “Choose Picture.” Also include some instructional text at the top, such as “Choose a pictureto display in the background of the folder ‘Documents.’” If it’s helpful, also change the Choosebutton to something more specific.The default location is the user’s home folder. If the dialog is targeted to only volumes, the defaultlocation is the user’s directory. Files and folders not appropriate for the target selection shouldbe dimmed.Note: Recent Places (in the Where pop-up menu of a Save dialog) does not record folders selectedin Choose dialogs.CarbonThe Choose Dialog 203Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 4DialogsThe Choose dialog is available through Navigation Services. For more information,see the documentation for Navigation Services in Carbon User ExperienceDocumentation.CocoaUse a variation of the Open dialog (NSOpenPanel class).The Printing DialogsPrinting dialogs include the Print dialog, the Fax dialog, and the Page Setup dialog.Print DialogIn the Print dialog, user options are provided via the features pop-up menu, which display panesdrawn and controlled by printing dialog extensions (PDEs). PDEs are provided by the operatingsystem, printer modules, and applications. <strong>Apple</strong> provides a number of printing panes. Thestandard Print dialog is shown in Figure 14-16.Figure 14-16A Print dialog (a sheet attached to a document window)FeaturesmenuOptions for choosing paper type and print quality are displayed through the features pop-upmenu. You can create custom print panes following the interface guidelines provided throughoutthis document and the layout guidelines described in “Positioning Controls” (page 259). Hereare some specific guidelines to keep in mind if you implement custom printing features.■Choose a menu item name that doesn’t conflict with menu items already in the featurespop-up menu.204 The Printing DialogsPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 4Dialogs■■■■■■The menu item (the pane name) should help users easily determine the options the panecontains.Make sure the features you implement are appropriate for your application. For example,an option to print in reverse order should be provided by the operating system, not yourapplication. (Implementing this feature requires the application to know the hardware’scapabilities.)Make interdependencies among options clear to users. For example, if a user selectsdouble-sided printing, the option to print on transparencies should become unavailable.Separate more advanced features from frequently used features. When the user chooses todisplay the advanced features, there should be an “advanced options” title above the advancedcontrols.Provide visual feedback (such as the preview in the Layout pane of the Print dialog) whenappropriate. A thumbnail showing the effect of changing a tone control, for example, helpsusers determine desired settings.Save a user’s printing preferences for a document, at least while the document is open. Providea way for users to save custom settings.Carbon: You can write a PDE to customize panes in the Page Setup or Print dialogs.For more information, see Extending Printing Dialogs in Printing Documentation.Cocoa: You can implement an accessory view by using NSPageLayout andNSPrintPanel, both Application Kit classes.Page Setup DialogThe Page Setup dialog provides a way for users to set the scaling and orientation options for adocument based on the intended output paper size and the printer. Save the settings in this dialogwith the document.The Printing Dialogs 205Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 4DialogsFigure 14-17The Page Setup dialogFax DialogThe Fax dialog allows a user to specify how to send a fax. Options include cover page settingsand dialing options. When the user types a name that’s in the user’s address book, the Fax dialogchecks to see if there’s a fax number in the record and fills it in if there is.206 The Printing DialogsPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 4DialogsFigure 14-18The Fax dialogThe Printing Dialogs 207Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 4Dialogs208 The Printing DialogsPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 5ControlsControls are graphic objects that cause instant actions or visible results when the user manipulatesthem with the mouse. Standard controls include push buttons, scroll bars, radio buttons,checkboxes, sliders, and pop-up menus.In Carbon, the Control Manager determines the overall appearance of many controls. Controlsintroduced in Mac OS X version 10.2 and later are implemented using the HIView model. InCocoa, the overall appearance of interface elements is provided by the Application Kit. You areresponsible for positioning the controls within your windows, according to the guidelines givenin this chapter and in “Layout Examples” (page 259).This chapter discusses the behavior and appearance of the standard controls available in MacOS X. Follow the metrics provided in this chapter to get the correct spacing between controls inyour windows.Many controls have a small version and a mini version for use when space is very limited. Thischapter gives specifications for these as well as the full size version. See “Using Small and MiniVersions of Controls” (page 269) for more information on using small and mini versions of controls.Carbon: See Control Manager Reference, Handling Carbon Windows and Controls, andIntroducing HIView for more information about creating and handling controls.Cocoa: See the various documents on controls available from the Cocoa User ExperienceDocumentation.ButtonsButtons initiate an immediate action. If a button initiates an indeterminate process, the buttonshould be dimmed until the process is complete, or status feedback should be provided. Thereare a variety of buttons available to meet the needs of your interface; this section discusses theuse of each.Buttons 209Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 5ControlsPush ButtonsA push button is a rounded rectangle with a text label on it. Clicking a push button performs aninstantaneous action, such as saving a document, completing operations defined by a dialog, oracknowledging an error message.Use push buttons for dialog buttons with text. Push buttons should contain text only, not iconsor other images. The text should not have a shadow or any other effects on it. It should be in thesystem font appropriate for the button size (see the specification section).Button names should be verbs that describe the action performed—Save, Close, Print, Delete,and so on. If a button acts on a single setting, label the button as specifically as possible; “ChoosePicture…,” for example, is more helpful than “Choose…” Because most buttons initiate animmediate action, it shouldn’t be necessary to use “now” (“Scan Now,” for example) in the label.Don’t use push buttons to indicate a state such as On or Off.In some circumstances, it’s appropriate to implement an Apply button—for example, to permita user to see the effect of multiple text attributes before committing to them. In cases like these,clicking Cancel should undo any of the applied changes. Be cautious about using an Apply buttonfor operations that take a long time to implement or undo; it might not be obvious to users thatthey can interrupt or reverse the process.All push buttons should be clear except the default button—the button selected by pressing theReturn key—which should use the default color (in addition to pulsing). For example, in a dialogcontaining an OK button and a Cancel button where OK is the default, the Cancel button is clearand the OK button uses color and pulses. When the user presses a nondefault button such asCancel, the button acquires color and the default button loses its color. If you use standardcontrols, this behavior is automatic.For information about proper capitalization of button labels, see “Capitalization of <strong>Interface</strong>Elements” (page 106). For information about when it is appropriate to use ellipses in buttons, see“Using Ellipses” (page 105). For examples of using push buttons in dialogs see “Dialogs” (page187).Carbon: Push buttons are available in <strong>Interface</strong> Builder; to create one programatically,use CreatePushButtonControl.Cocoa: Push buttons are available in <strong>Interface</strong> Builder; to create one programatically,create an NSButtons of type NSMomentaryPushInButton or NSMomentaryLightButton.See Buttons in Cocoa User Experience Documentation.210 ButtonsPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 5ControlsPush Button SpecificationsFigure 15-1Push button heightFull-size button20Small push button17Mini push button15Figure 15-2Push button spacingFull-size push button12Small push button10Mini push button8■Height:❏❏Full size: 20 pixels, not including the shadow.Small: 17 pixelsButtons 211Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 5Controls❏Mini: 15 pixels■Width: Depends on button text. If you don’t specify a wide enough button, the end caps clipthe text. The standard width for OK and Cancel buttons is 68 pixels, as shown in Figure 15-3.Figure 15-3Full size push buttons used in dialogs1268 68■Text:❏❏❏Full size: System font. If you need to use a font larger than the system font, use a bevelbutton instead.Small: Small system fontMini: Mini system font■■Color: All push buttons are clear except the default button, which uses the default color (inaddition to pulsing).Spacing:❏❏❏Full size: Leave at least 12 pixels of space between buttons placed horizontally or stacked.Small: Leave at least 10 pixels.Mini: Leave at least 8 pixels.Metal ButtonsMetal button are for use in brushed metal windows.Metal buttons:■■Can contain icons, graphics, or text.May be grouped and used like radio buttons or checkboxes.Don’t use metal buttons in dialogs because dialogs should never use the brushed metal look.212 ButtonsPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 5ControlsFigure 15-4Metal buttonsFull-size textured buttonWith iconWith fontcharacterWith textSmall textured buttonWith iconWith fontcharacterWith textCarbon: Not availableCocoa: Use the NSButtonCell method setBezelStyle withNSTexturedSquareBezelStyle as the argument. See Buttons in Cocoa User ExperienceDocumentation.Metal Button SpecificationsFigure 15-5Metal button dimensionsFull-size textured button25 16Small textured button18 11■Height:❏❏Full size: 25 pixels minimum, 32 pixels maximumSmall: 18 pixels minimum, 24 pixels maximum■■Width: Depends on the buttons content.Size of image:❏Full size: No more than 18 pixels high for a 25 pixel high button. Leave at least two pixelsof space on each side.Buttons 213Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 5Controls❏Small: No more than 11 pixels high for a 16 pixel high button. Leave at least two pixelsof space on each side.■Text:❏❏Full size: System fontSmall: Small system font■Spacing:❏❏Full size: Leave at least 12 pixels of space between buttons placed horizontally or stacked.Small: Leave at least 8 pixels.Bevel ButtonsA bevel button has a beveled edge that gives the button a three-dimensional appearance.■■■■Bevel buttons can display text, icons, or other images.Bevel buttons can behave like standard push buttons or can be grouped and used like radiobuttons or checkboxes.Bevel buttons can have a menu attached, so the button behaves like a pop-up menu. See“Icon Buttons and Bevel Buttons With Pop-Up Menus” (page 225).They can have rounded or square corners. The square buttons work well for tiling togetherin groups, to be used as radio buttons, for example.214 ButtonsPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 5ControlsBevel Button SpecificationsFigure 15-6Bevel button examplesRounded corners32 x 32Leave at least 5 pixels between edge oficon and edge of button.Rounded corners with label below icon32 x 32Label58 x 57Square corners32 x 32■■■■Size of button: 20 x 20 pixels in a tool palette. If using an icon or text in the button, a borderof at least 5 pixels should be maintained on all sides.Size of icon: 32 x 32 pixels recommendedSpacing: For buttons with rounded corners that contain a 24 x 24 (or larger) icon, leave atleast 8 pixels between buttons, stacked vertically or aligned horizontally. Otherwise, buttonsshould butt up against each other.Text: Label font (10-point Lucida Grande Regular)If a bevel button has an icon and a label, you can put the text anywhere in relation to the icon.You can specify the location in <strong>Interface</strong> Builder or programmatically.In some situations—providing text-alignment options in a toolbar, for example—it is appropriateto use bevel buttons to graphically represent several mutually exclusive choices. You can alsouse bevel buttons for nonstandard push buttons.Buttons 215Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 5ControlsFigure 15-7Bevel buttons as radio buttons and push buttons2420Carbon: Both the rounded and square versions of the button are in <strong>Interface</strong> Builder.To create them programatically, use the CreateBevelButtonControl function or theAppearance Manager function DrawThemeButton with the kThemeBevelButton constant.Cocoa: Bevel buttons are available in <strong>Interface</strong> Builder. To create one programaticallyuse the NSButtonCell method setBezelStyle with NSRoundedBezelStyle as theargument. To make a square cornered bevel button in <strong>Interface</strong> Builder, use the bevelbutton widget (NSButton) from the Controls palette. Select the button and, in theAttributes inspector, change its type to Square Button. See Buttons in Cocoa UserExperience Documentation.Icon ButtonsAn icon button behaves like a bevel button, but does not have a rectangular edge around it; theentire button is clickable, not just the icon. Icon buttons are often used in toolbars (see“Toolbars” (page 162)).Icon buttons may have menus attached, see “Icon Buttons and Bevel Buttons With Pop-UpMenus” (page 225) for more information.Figure 15-8Icon buttons used in a toolbarCarbon: Icon buttons are not available in <strong>Interface</strong> Builder; create one programaticallywith the function CreateIconControl.Cocoa: To create an icon button in <strong>Interface</strong> Builder, use the bevel button widget(NSButton) from the Controls palette. Add the appropriate icon, then select the buttonand in the Attribute inspector, deselect Bordered. To create one programatically, usethe NSButtonCell method setBezelStyle with NSShadowlessSquareBezelStyle asthe argument. See Buttons in Cocoa User Experience Documentation.216 ButtonsPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 5ControlsIcon Button SpecificationsFigure 15-9Icon button dimensions53 x 53 Hit target■■Size of icon: 32 x 32 pixels recommendedSpacing: For buttons with a 24 x 24 (or larger) icon, leave at least 8 pixels between buttons,stacked vertically or aligned horizontally.■ Text: Small system font. It should be below the icon as shown in Figure 15-9.Round ButtonsRound buttons may contain images but not text. Use them where you need a simple button toinitiate an action. They are especially useful as navigation buttons. They should not be used asradio buttons or for making selections.Figure 15-10Examples of round buttonsCarbon: Round buttons are available in <strong>Interface</strong> Builder. To create one programatically,use CreateRoundButtonControl.Cocoa: Round buttons are available in <strong>Interface</strong> Builder. To create on programatically,use the NSButtonCell method setBezelStyle with NSCircularBezelStyle as theargument. See Buttons in Cocoa User Experience Documentation.Buttons 217Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 5ControlsRound Button SpecificationsFigure 15-11Round button dimensionsFull-size round button25Small round button20■Diameter:❏❏Full size: 25 x 25 pixelsSmall: 20 x 20 pixels■■Text: Do not use text in round buttons. A single letter may be appropriate but should betreated as an icon.Spacing: 12 pixels between buttons or from other interface elementsThe Help ButtonThe Help button opens Help Viewer to a specific help page appropriate for the context of thebutton. Don’t create a custom button; use the standard Help button.Figure 15-12Help button in the print dialog218 ButtonsPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 5ControlsFor information on using help in your application, see “Providing User Assistance” (page 63).Carbon: The Help button is available in the Enhanced Controls palette of <strong>Interface</strong>Builder. You can create it programatically by using the round button and specifyingthe kHelpIcon from Icon Services. (See Icons.h in the HIServices framework.)Cocoa: The Help button is available in the Controls palette of <strong>Interface</strong> Builder. Tocreate a Help button programatically, use the NSButtonCell method setBezelStylewith NSHelpButtonBezelStyle as the argument. See Buttons in Cocoa User ExperienceDocumentation.Help Button SpecificationsFigure 15-13Help button dimensions20■■Size: 20 x 20 pixelsSpacing: 12 pixels between buttons or from other interface elementsSelection ControlsThe controls in the following sections provide ways for users to make selections from multipleitems.Radio ButtonsUse radio buttons for a set of mutually exclusive, but related, choices. A set of radio buttonsshould contain at least two items and a maximum of about five. (For more than five items, considerusing a pop-up menu.) A set of radio buttons is never dynamic (changing contents dependingon the context). A radio button should never initiate an action.Carbon: Radio buttons are available in <strong>Interface</strong> Builder. To create one programaticallyuse the function CreateRadioButtonControl.Cocoa: Radio buttons are available in <strong>Interface</strong> Builder. Radio buttons have buttontype of NSRadioButton. See Buttons in Cocoa User Experience documentation.Selection Controls 219Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 5ControlsRadio Button SpecificationsFigure 15-14Radio button dimensionsFull-size radio button876Small radio button676Mini radio button566Align the baselines of the labeland the first button’s text.■Size:❏❏❏Full size: 18 x 18 pixels, including the shadowSmall: 14 x 15 pixelsMini: 10 x 11 pixels■Spacing:❏❏❏Full size: 6 pixels between controls when stacked. 8 pixels from label (colon) to control.Small: 6 pixels between controls when stacked. 6 pixels from label (colon) to control.Mini: 6 pixels between controls when stacked. 5 pixels from label (colon) to control.■Text:❏❏❏Full size: System font for both the label and control textSmall: Small system font for both the label and control textMini: Mini system font for both the label and control text220 Selection ControlsPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 5Controls■Positioning: Typically stacked vertically to clearly show relationships among button states.CheckboxesUse checkboxes to indicate one or more options that must be either on or off. Each checkboxlabel should clearly imply two opposite states so it’s clear what happens when the box is checkedor unchecked. If you can’t find an unambiguous label, consider using radio buttons so you canclarify the states with two different labels.When a user selection comprises more than one state, use a dash in the appropriate checkboxes.This symbol is consistent with the mixed-state indicator in menus, as described in “Using Symbolsin Menus” (page 134).Carbon: Checkboxes are available in <strong>Interface</strong> Builder. Create them programaticallywith the function CreateCheckboxControl.Cocoa: Checkboxes are NSSwitchButtons. See Buttons in Cocoa User Experiencedocumentation.Selection Controls 221Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 5ControlsCheckbox SpecificationsFigure 15-15Checkbox spacingFull-size checkbox865Small checkbox665Mini checkbox555Align the baselines of the labeland the first checkbox’s text.■Size:❏❏❏Full size: 18 x 18 pixels, including the shadowSmall: 14 x 16 pixelsMini: 15 x 15 pixels■Spacing:❏❏❏Full size: 5 pixels between controls when stacked. 8 pixels from label (colon) to control.Small: 5 pixels between controls when stacked. 6 pixels from label (colon) to control.Mini: 5 pixels between controls when stacked. 5 pixels from label (colon) to control.■Text:❏❏Full size: System font for both the label and control text.Small: Small system font for both the label and control text.222 Selection ControlsPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 5Controls❏Mini: Mini system font for both label and control text.■Positioning: Typically stacked vertically to clearly show relationships among button states.Segmented ControlA segmented control looks similar to a push button, but it’s divided into two or more segments.It is used to change a mode or a view within a window.■■■■A segmented control may contain icons or text but not both.When the control contains icons, there may be a text label below it.They may be used in regular or brushed metal windows.Like a push button, the segment control should initiate an immediate action. When the userpresses one of the segments, they should see something happen.Carbon: The segmented control is not available in <strong>Interface</strong> Builder. Create itprogramatically with the function HISegmentedViewCreate.Cocoa: The segmented control is not available in <strong>Interface</strong> Builder; use theNSSegmentedControl class.Selection Controls 223Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 5ControlsSegmented Control SpecificationsFigure 15-16Segmented controller dimensionsFull-size segmented control for brushed metal windows.2517 x 15Full-size segmented control2017 x 15Small segmented control1714 x 13Mini segmented control1512 x 11■Height:❏❏❏Full size: 25 pixels for brushed metal windows, 20 pixels otherwiseSmall: 17 pixelsMini: 15 pixels■Text:❏❏❏Full size: System font for both the label and control textSmall: Small system font for both the label and control textMini: Mini system font for both the label and control text224 Selection ControlsPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 5ControlsIcon Buttons and Bevel Buttons With Pop-Up MenusAn bevel button or a icon button containing a pop-up menu has a single downward-pointingarrow. The button can behave like a standard pop-up menu, in which the image on the buttonis the current selection, or the button can represent the menu title and always display the sameimage.See “Bevel Buttons” (page 214) and “Icon Buttons” (page 216) for specifications for the buttonsthemselves.Carbon: Create this in <strong>Interface</strong> Builder by selecting a Bevel Button and selecting theHas Menu option in the Attributes pane of the inspector.Cocoa: Select the NSPopUpButton widget in <strong>Interface</strong> Builder. In the inspector, changeits type to PullDown. Change the Style to Square or Shadowless Square for a Roundedor Square Bevel Button, respectively. For an icon button, it doesn’t matter which oneyou choose, just deselect the Bordered checkbox. Then resize the button as appropriate.Figure 15-17Pop-up icon button32 x 32Selection Controls 225Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 5ControlsFigure 15-18Pop-up bevel button with square corners32 x 32Figure 15-19Pop-up bevel button with rounded corners32 x 32Pop-Up MenusUse pop-up menus to present a list of mutually exclusive choices in a dialog or window. Pop-upmenus are used as a means of selecting one choice from a list of many. If you have a dialog withsix or more radio buttons in one section, consider using a pop-up menu instead.A pop-up menu:■■Usually has a label to the left (in left-to-right scripts) unless it is used as the title for a groupboxHas a double-triangle indicator226 Selection ControlsPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 5Controls■■Contains nouns (things) or adjectives (states or attributes), but not verbs (commands); usepull-down menus for commandsHas a checkmark beside the current value when openA pop-up menu behaves like other menus: Users drag to choose an item—which then flashesbriefly and appears as the current choice—or move outside the menu to leave the current valueactive. An exploratory press in the menu to see what’s available doesn’t select a new value.In special cases, you may want to include a command that affects the contents of the pop-upmenu itself. For example, in the Print dialog, the Printer pop-up menu contains Edit Printer List,so users can add a printer to the menu; the new printer becomes the menu’s default selection.Put such commands at the bottom of a pop-up menu, below a separator.In some circumstances it may be appropriate to use pop-up menus to complete sentences thatdescribe advanced operations. For example, the Find window in the Finder and the Rules windowin Mail Preferences both use pop-up menus in this way.Use pop-up menus to present up to 12 mutually exclusive choices that the user doesn’t need tosee all the time.Don’t use pop-up menus:■■■For more than 12 items; use a scrolling list unless space is restrictedWhen the number of items in the list can changeWhen more than one selection is appropriate, such as text styles (in which you can selectbold and italic, for example); use checkboxes or a pull-down menu in which checkmarksappearDon’t use submenus with pop-up menus. Doing so hides choices too deeply and is physicallydifficult to use.Bevel buttons and icon buttons can also be pop-up menus. See “Icon Buttons and Bevel ButtonsWith Pop-Up Menus” (page 225).Figure 15-20An open pop-up menuLabelThe arrows indicate thatthis is a pop-up menu.Carbon: Available in <strong>Interface</strong> Builder. To create one programatically, use the functionCreatePopUpButtonControl.Cocoa: A pop-up menu is an NSPopUpButton. See Application Menus and Pop-up Listsin Cocoa User Experience Documentation.Selection Controls 227Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 5ControlsPop-Up Menu SpecificationsFigure 15-21Pop-up menu dimensionsFull-size pop-up menu99208Small pop-up menu7 7176Mini pop-up menu5 5155228 Selection ControlsPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 5ControlsFigure 15-22Pop-up menu spacingFull-size pop-up menu12Small pop-up menu10Mini pop-up menu8■Height:❏❏❏Full size: 20 pixelsSmall: 17 pixelsMini: 15 pixels■■Width: Wide enough to accommodate the longest menu item.Spacing:❏❏❏Full size: Leave at least 12 pixels of space between stacked controls.Small: At least 10 pixelsMini: At least 8 pixels■Text on control❏❏❏Full size: System font, 9 pixels from left edge and at least 9 pixels from the double-trianglesectionSmall: Small system font, 7 pixels from left edge and at least 7 pixels of space on the rightMini: Mini system font, 5 pixels from left edge and at least 5 pixels of space on the right■Menu label text:Selection Controls 229Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 5Controls❏❏❏Full size: Emphasized system font, 8 pixels from text (colon) to left edge of menuSmall: Emphasized small system font, 6 pixels from text (colon) to left edge of menuMini: Emphasized mini system font, 5 pixels from text (colon) to left edge of menuCommand Pop-Down MenusA command pop-down menu is similar to a pull-down menu, but it appears in a window ratherthan in the menu bar. Use of this control is limited to cases where the window is shared amongmultiple applications and the menu contains commands that affect the window’s contents. Forexample, the Colors window, which can be used in any application, contains a List menu withcommands that can be used to change the contents of the Colors window itself. Each applicationthat uses the Colors window doesn’t have to populate a menu with these commands.Figure 15-23A command pop-down menuCommand pop-down menus should contain between 3 and 12 commands. A closed commandmenu always displays the same text, which acts as the menu title.Carbon: Mimic the appearance and behavior with a bevel button.Cocoa: Use the NSPopUpButton widget in <strong>Interface</strong> Builder and change its type toPullDown.Command Pop-Down Menu SpecificationsNote that the specifications for command pop-down menus are the same as those for pop-upmenus.230 Selection ControlsPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 5ControlsFigure 15-24Command pop-down menu dimensionsFull-size pop-down menu99208Small pop-down menu77176Mini pop-down menu55155■Height:❏❏❏Full size: 20 pixelsSmall: 17 pixelsMini: 15 pixels■■Width: Wide enough to accommodate the longest menu itemSpacing:❏❏❏Full size: Leave at least 12 pixels of space between stacked controls.Small: Leave at least 10 pixels.Mini: Leave at least 8 pixels.■Menu item text:❏❏❏Full size: System font, 9 pixels from left edge and at least 9 pixels from the double-trianglesection.Small: Small system font, 7 pixels from left edge and at least 7 pixels of space on the right.Mini: Mini system font, 5 pixels from left edge and at least 5 pixels of space on the right.■Menu label text:Selection Controls 231Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 5Controls❏❏❏Full size: Emphasized system font, 8 pixels from text (colon) to left edge of menu.Small: Emphasized small system font, 6 pixels from text (colon) to left edge of menu.Mini: Emphasized mini system font, 5 pixels from text (colon) to left edge of menu.Combination BoxesA combination box (or combo box) is a text entry field combined with a drop-down scrollinglist. Combo boxes are useful for displaying a list of likely choices while still allowing the user totype in an item not in the list.The user can type any appropriate characters into the text field. If the user types in an item alreadyin the list, or types in a few characters that match the first characters of an item in the list, theitem is highlighted when the user opens the list. A user-typed item does not get added to thepermanent list.The user opens the list by pressing or clicking the arrow to the right of the text field. The list isa window that descends from the text field; the window is the same width as the text field plusthe arrow box and has a drop shadow. Don’t extend the right edge of the list beyond the rightedge of the arrow box; if an item is too long, it gets truncated.When the user selects an item in the list, the item replaces whatever is in the text entry field andthe list closes. If the list was opened by pressing the arrow, the user selects an item in the list bydragging to it. If the list was opened by clicking the arrow, the user selects an item by clicking itor by pressing the Up Arrow or Down Arrow keys. The user can accept an item by pressing theSpace bar, Enter, or Return.If the list is open and the user clicks outside it, including within the text entry field, the list closes.Figure 15-25A combo box with the scrolling list openThe default state of the combo box is closed, with the text field empty or displaying a defaultselection. The default selection (not necessarily the first item in the list) should provide ameaningful clue to the hidden choices. The combo box should also have a useful label.Carbon: Combo boxes are available in <strong>Interface</strong> Builder. To create them programaticallyuse the HIComboBoxCreate function or DrawThemeButton with the appropriate constant.232 Selection ControlsPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 5ControlsCocoa: Use the NSComboBox class. See Combo Boxes in Cocoa User ExperienceDocumentation.Combo Box SpecificationsFigure 15-26Combo box dimensionsFull-size combo box208Small combo box176Mini combo box155■Height:❏❏❏Full size: 20 pixelsSmall: 17 pixelsMini: 15 pixels■■Width: Wide enough to accommodate the longest menu item.Spacing:❏❏❏Full size: Leave at least 12 pixels of space between stacked controls.Small: Leave at least 10 pixels.Mini: Leave at least 8 pixels.■Menu item text:❏Full size: System fontSelection Controls 233Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 5Controls❏❏Small: Small system fontMini: Mini system font■Menu label text:❏❏❏Full size: Emphasized system font, 8 pixels from text (colon) to left edge of menu.Small: Emphasized small system font, 6 pixels from text (colon) to left edge of menu.Mini: Emphasized mini system font, 5 pixels from text (colon) to left edge of menu.PlacardsA placard is a small section at the bottom of a window used to display information, such as thecurrent page number. You can also use a placard to create the striped background behind controls.Typically placards are used in document windows as a way to quickly modify the view of thecontents—for example, to change the current page or the magnification. The most familiar useof the placard is as a pop-up menu placed at the bottom of a window to the left of the horizontalscroll bar.Figure 15-27A placard with a pop-up menuPlacards are 15 pixels high and use either the small system font or the label font for text.Carbon: Use the Control Manager CreatePlacardControl function or the functionDrawThemePlacard in the Appearance Manager.Cocoa: Not available.Color WellsA color well is a small, rectangular control that indicates the current color for a particular settingand, when clicked, displays a Color window. Use the Colors window whenever you want toallow users to change a color setting. Multiple color wells can appear in a window.234 Selection ControlsPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 5ControlsFigure 15-28Color wells in a preferences windowCarbon: Color wells are not available as a standard control. See the ColorSwatchViewsample application in /Developer/Examples/Carbon for an example of how you canimplement them.Cocoa: Available in <strong>Interface</strong> Builder. A color well is an NSColorWell. See Using Colorin Cocoa Graphics & Imaging Documentation.Image WellsUse an image well as a drag-and-drop target for an icon or picture. You could use a set of imagewells to manage thumbnails in a clip-art catalog, for example. Don’t use image wells in place ofpush buttons or bevel buttons.Figure 15-29Image wellsNormal Selected Selected plusdroppedDrop targetSome image wells (the user picture in the Picture pane of Accounts preferences, for example)must always contain an image. If the user can clear an image well (leaving it empty) in yourapplication, provide standard Edit menu commands and Clipboard support.Carbon: Image wells are available in <strong>Interface</strong> Builder. To create it programatically useCreateImageWellControl.Selection Controls 235Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 5ControlsCocoa: Image wells are available in <strong>Interface</strong> Builder. An image well is an NSImageView.Adjustment ControlsThis section discusses controls that allow users to graphically adjust settings or parameters.Stepper Control (Little Arrows )The stepper control allows users to increment or decrement values. The control is usually usedin conjunction with a text field to indicate the current value. The text field may or may not beeditable.Carbon: The stepper control is available in <strong>Interface</strong> Builder. You can create itprogramatically with CreateLittleArrowsControl.Cocoa: The stepper control is an NSStepper. See Steppers in Cocoa User ExperienceDocumentation.236 Adjustment ControlsPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 5ControlsStepper Control SpecificationsFigure 15-30Stepper control dimensionsFull-size stepper control1322 212Small stepper control1119182Mini stepper control1115151■Size of control:❏❏❏Full size: 13 x 21 pixelsSmall: 11 x 18 pixelsMini: 11 x 15 pixels■Height of field control modifies:❏❏❏Full size: 22 pixelsSmall: 19 pixelsMini: 15 pixels■Spacing between control and field it modifies:❏❏Full size: 2 pixelsSmall: 2 pixelsAdjustment Controls 237Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 5Controls❏Mini: 1 pixelSlider ControlsA slider control lets users choose from a continuous range of allowable values.■■■■Slider controls can be horizontal or vertical. In deciding whether a slider should be horizontalor vertical, try to meet users’ expectations of similar real-world controls.Slider controls can display labeled tick marks to represent increments you specify.The slider itself (the thumb) can be directional or round.Slider controls support live feedback (live dragging), so users can see the effect of movingthe slider as it is dragged. Dock preferences, for example, shows the effect of moving theDock Size slider.Carbon: Sliders are available in <strong>Interface</strong> Builder. You can create them programaticallywith the function CreateSliderControl.Cocoa: Sliders area available in <strong>Interface</strong> Builder. To create one programatically usethe NSSlider class. See Sliders in Cocoa User Experience documentation.Slider Control SpecificationsFigure 15-31Full-size slider control dimensions24 15 18251519238 Adjustment ControlsPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 5ControlsFigure 15-32Small slider control dimensions19 11 14191214Figure 15-33Mini slider control dimensions171011171011■Control size:❏❏❏Full size: 19 pixels for directional sliders (25 with tick marks), 15 for round sliders. Whenplaced vertically the directional slider has a width of 18 and the directional has a widthof 24.Small: 14 pixels for directional sliders (19 with tick marks), 12 for round sliders. Whenplaced vertically, the round slider has a width or 11.Mini:11 pixels for directional sliders (17 with graduation markings), 10 for round sliders.■Label text size:❏❏❏Full size: 10 pointSmall: 10 pointMini: 9 point■Spacing:❏❏❏Full size: 12 pixels of space between controlsSmall: 10 pixels of space between controlsMini: 8 pixels of space between controlsAdjustment Controls 239Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 5ControlsIndicatorsIndicators are controls that show users the status of something.Progress IndicatorsProgress indicators inform users about the status of lengthy operations. (For guidelines on whento provide such information, see “Feedback and Communication” (page 24)). There are threetypes of progress indicators:■■■Determinate progress bar: Use when the full length of an operation can be determined andyou can tell the user how much of the process has been completed. You could use adeterminate progress indicator to show the progress of a file conversion, for example. SeeFigure 15-34.Indeterminate progress bar: Use when the duration of a process can’t be determined. Youmight use an indeterminate progress indicator to let the user know that the application isattempting a dialup communication connection, for example, when there’s no way toaccurately determine how long it will take to complete. If an indeterminate process reachesa point where its duration can be determined, switch to a determinate progress indicator.See Figure 15-34.Asynchronous progress indicator: Used when space is very constrained. They are best usedfor asynchronous events that take place in the background, such as retrieving messages froma server. Don’t use the asynchronous progress indicator in operations that start outindeterminate but could become determinate. See Figure 15-35.In a determinate progress bar, the “fill” moves from left to right, and should fill in completelybefore it is dismissed. An indeterminate progress bar displays a spinning striped cylinder toindicate an ongoing process.Determinate progress bars should associate progress with time. A progress bar that becomes90-percent complete in 5 seconds but takes 5 minutes for the remaining 10 percent, for example,would be annoying and lead users to think that something is wrong.Progress bars typically appear within a progress dialog. When the process being performed canbe interrupted, the progress dialog should contain a Cancel button (and support the Escape key).If interrupting the process will result in possible side effects, the button should say Stop insteadof Cancel.The asynchronous progress indicator often appears in the main application window or a documentwindow in addition to dialogs. It usually is not visible when inactive.240 IndicatorsPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 5ControlsFigure 15-34Progress barsFull-size progress bar16Determinate progress barActive fillIndeterminate progress barActive fillInactive fillInactive fillSmall progress bar10Determinate progress barActive fillIndeterminate progress barActive fillInactive fillInactive fillFigure 15-35Asynchronous progress indicator16Carbon: All progress indicators are available in <strong>Interface</strong> Builder. You can createprogress bars programatically with the function CreateProgressBarControl andasynchronous progress indicators with CreateChasingArrowsControl.Cocoa: All progress indicators are available in <strong>Interface</strong> Builder. All progress indicatorscan be displayed with the NSProgressIndicator class. See Progress Indicators in CocoaUser Experience Documentation.Relevance IndicatorsUse the relevance indicator to display the relevance of search results as shown in Figure 15-36.Relevance indicators should be a part of a list view.Indicators 241Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 5ControlsFigure 15-36Relevance indicatorCarbon: Relevance indicators are available in the Controls palette of <strong>Interface</strong> BuilderUse the CreateRelevanceBarControl in the Control Manager or DrawThemeTrack inthe Appearance Manager.Cocoa: Relevance indicators are not available as a standard control.Relevance Indicator SpecificationsFigure 15-37■Height: X-height of the font in the list of which the indicator is a partText ControlsThis section describes controls that either display text or take it as input. The combination box,which includes a text input field, is not covered in this section. See “Combination Boxes” (page232) for information on this control.242 Text ControlsPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 5ControlsStatic TextUse a static text field for informational text in a dialog (text not intended to be modified by users).Static text fields have two states: active and dimmed.When it provides an obvious user benefit, static text should be selectable. For example, a usershould be able to copy an error message or a serial number to paste elsewhere.Carbon: Static text fields in various standard fonts are available in <strong>Interface</strong> Builder.Create them programatically with CreateStaticTextControl.Cocoa: Static text fields in various standard fonts are available in <strong>Interface</strong> Builder. Tocreate programatically, use the NSTextField class. See Text Views in Cocoa UserExperience Documentation.Static Text Field Specifications■Size:❏❏❏Full size: System fontSmall: Small system fontMini: Mini system fontText Input FieldsA text input field, also called an editable text field, is a rectangular area in which the user enterstext or modifies existing text. The text input field can be active or disabled. It supports keyboardfocus and password entry.Your application’s text input fields should perform appropriate edit checks. For example, if theonly legitimate value for a field is a string of digits, the application issues an alert if the user typesnondigits. In most cases, the appropriate time to check the data in the field is when the user clicksoutside the field or presses the Return, Enter, or Tab key.Combination boxes have text input fields and also contain a menu or a list of choices. See“Combination Boxes” (page 232).Cocoa: Text input fields are available in <strong>Interface</strong> Builder. Create them programaticallywith CreateEditTextControl or CreateEditUnicodeTextControl.Cocoa: Text input fields are available in <strong>Interface</strong> Builder. Use the NSTextField classto create them programatically. See Text Views in Cocoa User Experience documentation.Text Controls 243Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 5ControlsText Input Field SpecificationsFigure 15-38Full-size text input field dimensions22Normal state with textand insertion pointWith focusWith selectionFigure 15-39Small text input field dimensions19Normal state with textand insertion pointWith focusWith selectionFigure 15-40Mini text input field dimensions15Normal state with textand insertion point.With focusWith selection■Height:❏❏❏Full size: 22 pixels (to accommodate the system font, which is 16 pixels high without linespacing)Small: 19 pixelsMini: 15 pixels■Spacing:❏❏❏Full size: Leave a minimum of 10 pixels between fields.Small: Leave a minimum of 8 pixels.Mini: Leave a minimum of 8 pixels.244 Text ControlsPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 5Controls■Text:❏❏❏Full size: System fontSmall: Small system fontMini: Mini System fontFor more information about highlighting selections in text fields, see “Keyboard Focus andNavigation” (page 85) and “Selections in Text” (page 90).Search FieldsA search field is a text field with rounded ends in which the user enters new text or modifiesexisting text that identifies items to search for.A search field can be active or disabled. It supports keyboard focus. If it is an integral part ofyour interface, provide the keyboard shortcut Command-Option-F for users to navigate to it.The field may initiate response as the user types, or the user may need to press Return or Enterto initiate a search.It may include a menu to allow users to choose different types of searches, to allow users to definethe context of their search, or to provide a history of recent searches. You can provide placeholdertext that indicates the current menu selection. Users are then able to see the current context ofthe search without having to open the menu.The search field may contain a clear icon. It’s appropriate to use a clear icon to the right of thesearch field if the user has to click a button or press a key to initiate the search, especially if there’sthe possibility of searches taking more than a second or two. If you use a clear icon, considerdisplaying a progress indicator for lengthy searches.It is preferable to have a single search field in a window with various contexts available from thepop-up menu rather than to provide multiple search fields.A search field does not need a label.Carbon: Search fields are available in <strong>Interface</strong> Builder. Programatically, they areavailable as an kControlKindHISearchField.Cocoa: Use the NSSearchField class. See Search Fields in Cocoa User ExperienceDocumentation.Text Controls 245Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 5ControlsSearch Field SpecificationsFigure 15-41Full-size search field dimensions22Normal state with textText starts at the 13th pixel.With iconsText starts at the 25th pixel.Icon area 22 x 22With icons and menuText starts at the 29th pixel.Figure 15-42Small search field dimensions19Normal state with textText starts at the 12th pixel.With iconText starts at the 24th pixel.Icon area 19 x 19With icons and menuText starts at the 27th pixel.246 Text ControlsPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 5ControlsFigure 15-43Mini search field dimensions15 Normal state with textText starts at the 11th pixel.With iconsText starts at the 21st pixel.Icon area 15 x 15With icons and menuText starts at the 24th pixel.■Height:❏❏❏Full size: 22 pixelsSmall: 19 pixelsMini: 15 pixels■Spacing:❏❏❏Full size: Leave at least 12 pixels between stacked controls.Small: Leave at least 10 pixels.Mini: Leave at least 8 pixels.■Text:❏❏❏Full size: System fontSmall: Small system fontMini: Mini system fontScrolling ListsA scrolling list is a list that uses scroll bars to reveal its contents. A scrolling list can contain asmany items as necessary. Users can scroll through the list without selecting anything, click anitem to select it, use Shift-click to select more than one contiguous item, or use Command-clickfor a discontinuous selection. Users can press the arrow keys to navigate through the list andcan quickly select an item by typing the first few characters.If an item is too long to fit in the list box, insert ellipses in the middle and preserve the beginningand end of the item. Users often add version numbers to the end of document names, so boththe beginning and end should be visible.Text Controls 247Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 5ControlsDon’t use scrolling lists to provide choices in a limited range. Because the full range may not bevisible all at once, it can be difficult for users to understand the scope of their choices. Use sliders,discussed in “Slider Controls” (page 238), instead.When you define dimensions, make sure that the list displays only the full height of lines of text(don’t cut text off horizontally), and make sure that the scrolling increment is one list element.Scrolling List SpecificationsFigure 15-44Scrolling list dimensions1 pixel12-pointfont19 pointsbaselineto baseline■■Text: 12 pointsFrame: 1 pixel wideView ControlsThe following controls allow users to modify how information is presented to them or selectwhich information to view.Disclosure TrianglesA disclosure triangle allows the display, or disclosure, of information that elaborates on theprimary information in a window. Disclosure triangles have two uses: in dialogs that have aminimal state and an expanded state and in hierarchical lists. See Figure 15-45 for an examplein a dialog and Figure 15-47 (page 250) for an example in a hierarchical list.248 View ControlsPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 5ControlsUse disclosure triangles when you want to provide a simple default view of something but needto allow the user to view more details at times.Disclosure triangles should be in the closed position, pointing to the right, by default. When theuser clicks one, it points down, and the additional information is displayed.Disclosure triangles in dialogs should have a label indicating what is disclosed or hidden. Anideal label changes depending on the position of the disclosure triangle. For example, whenclosed it might say, “Show advanced settings,” and when open, “Hide advanced settings.”Figure 15-45Disclosure triangles in a dialogCarbon: Disclosure triangles are available in <strong>Interface</strong> Builder. To create themprogramatically, you can use the Control Manager functionCreateDisclosureTriangleControl or the Appearance Manager DrawThemeButtonfunction.View Controls 249Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 5ControlsCocoa: Disclosure triangles are available in <strong>Interface</strong> Builder. A disclosure button is abutton with a bezelStyle of NSDisclosureBezelStyle. See Buttons in Cocoa UserExperience documentation.Disclosure Triangle SpecificationsFigure 15-46Disclosure triangles■Size: 13 x 13 pixelsList ViewsList views display ordered records in a table where users can resize, rearrange, and sometimesadd and subtract, columns representing attributes of the data.Sort the rows in the table by the selected column heading. You may implement sorting onsecondary attributes behind the scenes, but the user should see only one column selected at atime. If a user clicks an already selected column heading, change the direction of the sort.List views may contain disclosure triangles to reveal a list hierarchy, but only in one column.(See Figure 15-47.)Items may be editable depending on the purpose of your application. In the Finder, for example,items in the Name column are editable when in list view but nothing else is.Figure 15-47List view with disclosure triangles250 View ControlsPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 5ControlsCarbon: List views are available in the Browsers and Tab palette of <strong>Interface</strong> Builder.To create one programatically, use the list version of the data browser control.Cocoa: List views are available in the Data palette of <strong>Interface</strong> Builder. To create asimple list view programatically, use the NSTableView. NSOutlineView in columnformat gives you disclosure triangles.Column ViewsThe column view control provides a way for users to display and select items from an organizedhierarchy of data.■■The column view is useful when there is only one way the data can be sorted or when youwant to present only one way of sorting the data. It is also useful for deep hierarchies, suchas a filesystem, where users move back and forth among multiple levels frequently.If the column view represents a tree of information, the root is on the left side. As users selectitems, the focus moves to the right displaying either the possible choices at that branch, or ifthere are no more choices, the terminal object. When the user selects a terminal object, youmay display additional information about it in the rightmost column.Figure 15-48Column view display of filesCarbon: Column views are available in the Browsers and Tab palette of <strong>Interface</strong>Builder. To create one programatically, use the column version of the data browsercontrol.Cocoa: Column views are available in the Data palette of <strong>Interface</strong> Builder. To createone programatically, use the NSBrowser class or NSOutlineView in column format.View Controls 251Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 5ControlsTab ViewsThe tab view provides a convenient way to present information in a multipane format. Thecontrol displays horizontally centered across the top edge of a content area.The content area below the control is called a pane. You can use other controls, such as pushbuttons and text entry fields, in windows with the tab view too. The controls can beglobal—affecting the settings of all panes—or specific to an individual pane; make it clear throughlabeling and placement (within or outside of a pane’s boundary) whether a control affects onepane or all panes.A segmented control can provide a way to switch between panes. It looks similar to a tab viewbut it is not attached to the panes. See “Segmented Control” (page 223).Tab View SpecificationsFigure 15-49Full-size tab view dimensions1212 121220Figure 15-50Small tab view dimensions1010 101017252 View ControlsPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 5ControlsFigure 15-51Mini tab view dimensions888815■Text:❏❏❏Full size: System font, centered in tab with 12 pixels on each sideSmall: Small system font, centered in tab with 10 pixels on each sideMini: Mini system font, centered in tab with 8 pixels on each side■Tab height:❏❏❏Full size: 20 pixelsSmall: 17 pixelsMini: 15 pixelsPanes can extend from one edge of a window to the other, or they can be inset within a window.Figure 15-52 shows an example of panes that extend from one edge of a window to the other.Figure 15-52Tab panes edge to edge12 or 1410Spaces should beequal on both sides.2020View Controls 253Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 5ControlsFor inset tab panes, the recommended inset is 20 pixels on each side within a window, although16 is also allowed. You can define a window so space remains below the tab pane for globalcontrols such as push buttons. Figure 15-53 shows an example of tab panes inset within a window,with buttons below the panes.Figure 15-53Tab panes inset from edge of window2012or1410Spaces should beequal on both sides.122020Grouping ControlsSeparators and group boxes are used to group other controls within windows. For help in decidingwhether to use a group box or a separator and examples of layouts with them, see “GroupingControls” (page 265).SeparatorsSeparators are used to break a window into distinct visual parts. Separators may be placed eithervertically or horizontally. They should usually not span the entire width of a window but shouldalign with the edges of the controls in the window.A label may accompany the separator. The separator line should be at the base of the text of thelabel.Carbon: Separators are available in <strong>Interface</strong> Builder. Create them programaticallywith CreateVisualSeparatorControl.254 Grouping ControlsPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 5ControlsCocoa: Use NSBox. See “Using a Box Control to Create a Separator” in Boxes in CocoaUser Experience Documentation.Separator SpecificationsFigure 15-54Separators■Label text size:❏❏❏When other controls are full size: System fontWhen other controls are small: Small system fontWhen other controls are mini: Mini system font■Spacing: The label text should be 2 pixels from the line.Group BoxesGroup boxes, like separators, are used to break a window into distinct logical areas. A groupbox provides a more pronounced separation than a separator. Use a group box when you wanta set of controls to be perceived as a single element. Avoid putting too many controls in groupboxes so they don’t look cluttered. Group boxes can be untitled or titled. If titled, they may havetextual titles, checkbox titles, or pop-up menu titles. If the use a checkbox title, the items in thegroup box should only be active when the checkbox is checked.Grouping Controls 255Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 5ControlsFigure 15-55Types of group boxes14Group box with pop-up menuGroup box with labelGroup box with no labelGroup box with label20Carbon: Group boxes are available in <strong>Interface</strong> Builder. Create them programaticallywith CreateGroupBoxControl, CreateCheckGroupBoxControl, orCreatePopupGroupBoxControl.Cocoa: Group boxes are available in <strong>Interface</strong> Builder. Use the NSBox class. See Boxesin Cocoa User Experience documentation.Group Box SpecificationsFigure 15-56Group box with a textual title144256 Grouping ControlsPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 5ControlsFigure 15-57Group box with a checkbox title144Figure 15-58Group boxes with pop-up menu titlesThis distance should bethe same on both sides.14■Label text size:❏❏❏Full size: System fontSmall: Small system fontMini: Mini system font■Spacing:❏Leave at least 20 pixels from the edge of group box to the edge of the window.Grouping Controls 257Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 5Controls258 Grouping ControlsPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 6Layout ExamplesThis chapter provides some sample layouts of controls in dialogs and windows. These guidelinesuse many of the default control sizes defined in <strong>Interface</strong> Builder; any exceptions are noted. Tosimplify the process of resizing and repositioning existing dialogs and windows, most valuesare based on a multiple of 2 pixels. All user-visible text should use the standard fonts describedin “Fonts” (page 103).The Control Manager and HIView (Carbon) and Application Kit (Cocoa) include smaller versionsof the most commonly used controls, for use in utility windows when necessary. For layoutinformation, see “Using Small and Mini Versions of Controls” (page 269).Positioning ControlsKeep these guidelines in mind when designing your dialogs and windows:Unless specified otherwise, all measurements are in pixels.■■■■■In general, try for a centered approach to control layout. The centered approach does notmean to center align each element. Rather, your goal should be a center-equalized layoutwhere the left and right sides of a dialog balance each other. Figure 16-3 and Figure 16-4both illustrate a center equalized layout.Maintain at least a 20-pixel space between the left and right edge of the window and anycontrols. Keep 20 pixels of space between the bottom edge and any controls; this can includethe shadow of any push buttons in that area. Top spacing is determined by which controlsare placed closest to the top of the dialog. For example, Figure 16-3 uses a radio button asthe topmost control, so the spacing is 14 pixels. In contrast, Figure 16-4 uses a tab control asthe topmost element, so the spacing is set to 12 pixels.For windows that contain a mix of controls, set 16 pixels of vertical space between groups ofcontrols. Vertical spacing between controls is determined by the tallest control in the row.Groups of controls should be separated by 20 pixels of vertical spacing and subgroups ofcontrols within groups should be separated by 16 pixels.Within a group box, no control or label should be positioned within 16 pixels of the box’stop, bottom, left, or right borders.Positioning Controls 259Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 6Layout Examples■■■For most document windows that contain a single view (scrolling text or tables, for example),do not specify any space between the window edge and scroll bars (when using the ControlManager) or the frame of the view (in <strong>Interface</strong> Builder).The minimum screen resolution a dialog needs to accommodate is 800 x 600. (Support for640 x 480 is provided for games.)The buttons at the bottom right of a dialog all dismiss the dialog. A button that initiates anaction is in the lower-right corner. The Cancel button sits to the left of this action button.If there’s a third button for dismissing the dialog, it should go to the left of the Cancel button.If the third button could result in data loss—Don’t Save, for example—position it at least 24pixels away from the “safe” buttons (Cancel and Save, for example).Usually the rightmost button or the Cancel button is the default button. See “The DefaultButton” (page 193) for more information on determining the default button.Figure 16-1Position of buttons at the bottom of a dialog12A button that could resultin lost data should be at24 pixels away from“safe” buttons.■A button that affects the contents of the dialog itself, such as Reset, should have its left edgealigned with the main dialog text or if there is a Help button, 12 pixels to the right of it.260 Positioning ControlsPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 6Layout ExamplesSample LayoutsFigure 16-2A standard alert with dimensions24 16158102064 x 641224Sample Layouts 261Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 6Layout ExamplesFigure 16-3Sample application preferences window14891212121218202020 820262 Sample LayoutsPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 6Layout ExamplesFigure 16-4A window with changeable panes122151616161820182020 16 41 41 16 20Sample Layouts 263Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 6Layout ExamplesFigure 16-5A brushed metal application window9121291218181412 9 2812 1214264 Sample LayoutsPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 6Layout ExamplesGrouping ControlsGrouping related controls helps users to understand what particular controls do and helps themlocate the controls that affect the specific actions they want to apply. This section providesexamples of different ways to group controls.The first three examples show different ways to group the same set of controls within a changeablepane using three grouping elements:■ Separators, shown in Figure 16-6■ Empty space, shown in Figure 16-7■ Group boxes, shown in Figure 16-8Figure 16-9 illustrates another aspect of grouping controls—choosing which control to use toindicate changeable panes. Figure 16-9 shows the use of a tab view in a changeable pane window,while the previous examples all show the use of a group box with a pop-up menu.Note that none of these examples are inherently more or less correct than any other in the generalcase. The effectiveness of these different layouts in your application depends on the overall layoutof your other windows as well as your application’s workflow.Grouping Controls 265Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 6Layout ExamplesFigure 16-6Grouping with separators162012174108241010202020 16 1010 20266 Grouping ControlsPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 6Layout ExamplesFigure 16-7Grouping with empty space1820121778828410202020 18 20Grouping Controls 267Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 6Layout ExamplesFigure 16-8Grouping with group boxes within a group box16 11 20122111758111110202020 11 1620268 Grouping ControlsPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 6Layout ExamplesFigure 16-9Grouping with group boxes in a tabbed pane16 11 201221117598111110202020 11 1620Using Small and Mini Versions of ControlsUse smaller versions of controls when necessary, and use them sparingly. Your first choice indesigning for Aqua should always be to use the full-size controls.Using Small and Mini Versions of Controls 269Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 6Layout ExamplesYou can use the smaller versions of controls when space is at an premium, such as in tool palettesor other utility windows. Avoid mixing different sizes of controls in the same window. In awindow with a changeable pane, it is acceptable to use small or mini controls within the paneand standard controls outside the pane. However, all panes of a window should use controls ofthe same size.Figure 16-10 shows a sample utility window using small controls. Figure 16-11 shows a sampleutility window using mini controls.Figure 16-10Sample utility window using small controls238241011171717468812121071010270 Using Small and Mini Versions of ControlsPreliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 6Layout ExamplesFigure 16-11Sample utility window using mini controls2310888888881210Using Small and Mini Versions of Controls 271Preliminary © <strong>Apple</strong> Computer, Inc. 2003
C H A P T E R 1 6Layout Examples272 Using Small and Mini Versions of ControlsPreliminary © <strong>Apple</strong> Computer, Inc. 2003
A P P E N D I X AKeyboard Shortcuts Quick ReferenceTable A-1 lists all the keyboard shortcuts that are predefined for use by the operating system andthose recommend for use in applications. The table is organized by the key that is modified withvariations of modifier keys grouped together. References to explanations of how to use theseshortcuts are in the Action column.Some sequences have icons that provide additional information:■ indicates that something in the operating system uses that shortcut by default. Do notoverride these shortcuts.■indicates that these are suggested keyboard shortcuts. Unless your application does notimplement the functionality represented by the shortcut, you should provide these keyboardshortcuts.The unmarked keyboard shortcuts are suggested for the specified action if a keyboard shortcut isnecessary—just because a shortcut exists does not mean you need to use it. Try to avoid usingthese keyboard shortcuts for actions other than those indicated.For more information on keyboard shortcuts, including when to use them, see “KeyboardShortcuts” (page 82). This table lists only the combinations of two or more keys. For informationon how to use specific single keyboard keys, see “The Functions of Specific Keys” (page 75).Table A-1Primary keySpace barKeyboard sequenceCommand–Space barActionRotate through enabled scriptsystems.See “Key CombinationsReserved by the System” (page82).Shift–Command–Space bar<strong>Apple</strong> reservedPreliminary © <strong>Apple</strong> Computer, Inc. 2003273
A P P E N D I X AKeyboard Shortcuts Quick ReferencePrimary keyKeyboard sequenceOption–Command–Space barActionRotate through keyboardlayouts and input methodswithin a script.See “Key CombinationsReserved by the System” (page82).TabControl–Command-Space barShift-Tab<strong>Apple</strong> reserved.Navigates through controls ina reverse direction.See “Keyboard Focus andNavigation” (page 85).Command-TabCommand-Shift-TabControl-TabMove forward to the next mostrecently used application in alist of open applications.Move backward through a listof open applications (sorted byrecent use).Move focus to the nextgrouping of controls in a dialogor the next table (when Tabmoves to next cell).See “Full Keyboard AccessMode” (page 58).Shift-Control-TabMove focus to the previousgrouping of controls.See “Full Keyboard AccessMode” (page 58).EscapeEjectCommand-Option-EscapeCommand-Control-EjectOpen the Force Quit dialog.Quit all applications (aftergiving the user a chance to savechanges to open documents)and restart the computer.See “Key CombinationsReserved by the System” (page82).Command-Option-Control-EjectQuit all applications (aftergiving the user a chance to savechanges to open documents)and shut the computer down.274 Preliminary © <strong>Apple</strong> Computer, Inc. 2003
A P P E N D I X AKeyboard Shortcuts Quick ReferenceSee “Key CombinationsReserved by the System” (page82).Primary keyF1Keyboard sequenceControl-F1ActionToggle full keyboard access onor off.See “Full Keyboard AccessMode” (page 58).F2Control-F2Move focus to the menu bar.See “Full Keyboard AccessMode” (page 58).F3Control-F3Move focus to the Dock.See “Full Keyboard AccessMode” (page 58).F4Control-F4Move focus to the active (ornext) window.See “Full Keyboard AccessMode” (page 58).Shift-Control-F4Move focus to the previouslyactive window.See “Full Keyboard AccessMode” (page 58).F5Control-F5Move focus to the toolbar.See “Full Keyboard AccessMode” (page 58).F6Control-F6Move focus to the first (or next)utility window.See “Full Keyboard AccessMode” (page 58).Shift-Control-F6Move focus to the previousutility window.See “Full Keyboard AccessMode” (page 58).F7Control-F7Temporarily override thecurrent keyboard access modein windows and dialogs.See “Full Keyboard AccessMode” (page 58).Preliminary © <strong>Apple</strong> Computer, Inc. 2003275
A P P E N D I X AKeyboard Shortcuts Quick ReferencePrimary key`(acute accent)Keyboard sequenceCommand-`ActionActivate the next open windowin the frontmost application.See “Window Layering” (page174).Command-Shift-`Activate the previous openwindow in the frontmostapplication.See “Window Layering” (page174).- (hyphen)Command-Shift--Equivalent to the Smallercommand.See “The Format Menu” (page145)Command-Option--Zoom out (screen zooming).See “AssistiveTechnologies” (page 57).{ (left bracket)Command-{Equivalent to the Align Leftcommand.See “The Format Menu” (page145).} (right bracket)Command-}Equivalent to the Align Rightcommand.See “The Format Menu” (page145).| (pipe)Command-|Equivalent to the Align Centercommand.See “The Format Menu” (page145).: (colon)Command-:Equivalent to the Spellingcommand.See “The Edit Menu” (page 144).; (semi-colon)Command-;Equivalent to the CheckSpelling command.See “The Edit Menu” (page 144).276 Preliminary © <strong>Apple</strong> Computer, Inc. 2003
A P P E N D I X AKeyboard Shortcuts Quick ReferencePrimary key, (comma)Keyboard sequenceCommand-,ActionEquivalent to the Preferencescommand.See “The ApplicationMenu” (page 140).Command-Option-Control-,Decrease screen contrast.See “The ApplicationMenu” (page 140).. (period)Command-Option-Control-.Increase the screen contrast.See “AssistiveTechnologies” (page 57).? (question mark)Command-?Open help for the application.See “Providing UserAssistance” (page 63)./ (forward slash)= (equal sign)Command-Option-/Command-Shift-=Turn font smoothing on or off.Equivalent to the Biggercommand.See “The Format Menu” (page145)Command-Option-=Zoom in (screen zooming).See “AssistiveTechnologies” (page 57).348Command-Shift-3Command-Shift-Control3Command-Shift-4Command-Shift-Control-4Command-Option-8Capture screen to file.Capture screen to Clipboard.Capture selection to file.Capture selection to Clipboard.Turn screen zooming on or off.See “AssistiveTechnologies” (page 57).Command-Option-Control-8Invert the screen colors.See “AssistiveTechnologies” (page 57).ACommand-AEquivalent to the Select Allcommand.See “The Edit Menu” (page 144).Preliminary © <strong>Apple</strong> Computer, Inc. 2003277
A P P E N D I X AKeyboard Shortcuts Quick ReferencePrimary keyBKeyboard sequenceCommand-BActionEquivalent to the Boldcommand.See “The Edit Menu” (page 144).CCommand-CEquivalent to the Copycommand.See “The Edit Menu” (page 144).Command-Shift-CEquivalent to the Show Colorscommand.See “The Format Menu” (page145).Command-Option-CEquivalent to the Copy Stylecommand.See “The Edit Menu” (page 144).Command-Control-CEquivalent to the Copy Rulercommand.See “The Edit Menu” (page 144).DCommand-DCommand-DDon’t save (in a confirmationdialog)Equivalent to the Find Previouscommand.See “The Edit Menu” (page 144).Command-Option-DShow or hide the Dock.See “The Dock” (page 50).ECommand-EUse selection for find.See “Find Window” (page 186).FCommand-FEquivalent to the Findcommand.See “The Edit Menu” (page 144).Command-Option-FJump to the search field control.See “Search Fields” (page 245).GCommand-GEquivalent to the Find Nextcommand.See “The Edit Menu” (page 144).278 Preliminary © <strong>Apple</strong> Computer, Inc. 2003
A P P E N D I X AKeyboard Shortcuts Quick ReferencePrimary keyKeyboard sequenceCommand-Shift-GActionEquivalent to the Find Previouscommand.See “The Edit Menu” (page 144).HCommand-HEquivalent to the HideApplicationName command.See “The ApplicationMenu” (page 140).Command-Option-HEquivalent to the Hide Otherscommand.See “The ApplicationMenu” (page 140).ICommand-IEquivalent to the Italiccommand.See “The Edit Menu” (page 144).Command-Option-IEquivalent to the ShowInspector command.See “The File Menu” (page 142).JMCommand-JCommand-MScroll to selection.Equivalent to the Minimizecommand.See “The WindowMenu” (page 148).Command-Option-MEquivalent to the Minimize AllWindows command.See “The WindowMenu” (page 148).NCommand-NEquivalent to the Newcommand.See “The File Menu” (page 142).OCommand-OEquivalent to the Opencommand.See “The File Menu” (page 142).PCommand-PEquivalent to the Printcommand.See “The File Menu” (page 142).Preliminary © <strong>Apple</strong> Computer, Inc. 2003279
A P P E N D I X AKeyboard Shortcuts Quick ReferencePrimary keyKeyboard sequenceCommand-Shift-PActionEquivalent to the Page Setupcommand.See “The File Menu” (page 142).QCommand-QEquivalent to the Quitcommand.See “The <strong>Apple</strong> Menu” (page140).Command-Shift-QEquivalent to the Log Outcommand.See “The Always-OnEnvironment” (page 62).Command-Shift-Option-QLog out without confirmation.See “The Always-OnEnvironment” (page 62).SCommand-SEquivalent to the Savecommand.See “The File Menu” (page 142).Command-Shift-SEquivalent to the Save Ascommand.See “The File Menu” (page 142).TCommand-TEquivalent to the Show Fontscommand.See “The Edit Menu” (page 144).Command-Option-TEquivalent to the Show/HideToolbar command.See “The View Menu” (page147) and “Toolbars” (page 162).UCommand-UEquivalent to the Underlinecommand.See “The Edit Menu” (page 144).VCommand-VEquivalent to the Pastecommand.See “The File Menu” (page 142).Command-Option-VEquivalent to the Paste Stylecommand.See “The Edit Menu” (page 144).280 Preliminary © <strong>Apple</strong> Computer, Inc. 2003
A P P E N D I X AKeyboard Shortcuts Quick ReferencePrimary keyKeyboard sequenceCommand-Control-VActionEquivalent to the Paste Rulercommand.See “The Edit Menu” (page 144).WCommand-WEquivalent to the Closecommand.See “The File Menu” (page 142).Command-Shift-WEquivalent to the Close Filecommand.See “The File Menu” (page 142).Command-Option-WEquivalent to the Close AllWindows command.See “The File Menu” (page 142).XCommand-XEquivalent to the Cutcommand.See “The File Menu” (page 142).ZCommand-ZEquivalent to the Undocommand.See “The File Menu” (page 142).Command-Shift-ZEquivalent to the Redocommand.See “The File Menu” (page 142).Right ArrowCommand–Right ArrowChange keyboard layout tocurrent layout of Roman script.See “Key CombinationsReserved by the System” (page82).Command–Shift–Right ArrowExtends selection to the nextsemantic unit, typically the endof the current line.See “Key CombinationsReserved by the System” (page82).Shift–Right ArrowExtends selection one characterto the right.See “Key CombinationsReserved by the System” (page82).Preliminary © <strong>Apple</strong> Computer, Inc. 2003281
A P P E N D I X AKeyboard Shortcuts Quick ReferencePrimary keyKeyboard sequenceShift–Option–Right ArrowActionExtends selection to the end ofthe current word, then to theend of the next word.See “Key CombinationsReserved by the System” (page82).Control–Right Arrow keyMove focus to another value orcell within a control such as atable.See “Key CombinationsReserved by the System” (page82).Left ArrowCommand–Left ArrowChange keyboard layout tocurrent layout of system scriptSee “Key CombinationsReserved by the System” (page82).Command–Shift–Left ArrowExtend selection to the previoussemantic unit, typically thebeginning of the current line.See “Key CombinationsReserved by the System” (page82).Shift–Left ArrowExtend selection one characterto the left.See “Key CombinationsReserved by the System” (page82).Shift–Option–Left ArrowExtend selection to thebeginning of the current word,then to the beginning of theprevious word.See “Key CombinationsReserved by the System” (page82).Control–Left Arrow keyMove focus to another value orcell within a control such as atable.See “Key CombinationsReserved by the System” (page82).282 Preliminary © <strong>Apple</strong> Computer, Inc. 2003
A P P E N D I X AKeyboard Shortcuts Quick ReferencePrimary keyUp ArrowKeyboard sequenceCommand–Shift–Up ArrowActionExtend selection upward in thenext semantic unit, typically thebeginning of the document.See “Key CombinationsReserved by the System” (page82).Shift–Up ArrowExtend selection to the lineabove, to the nearest characterboundary at the samehorizontal location.See “Key CombinationsReserved by the System” (page82).Shift–Option–Up ArrowExtend selection to thebeginning of the currentparagraph, then to thebeginning of the nextparagraph.See “Key CombinationsReserved by the System” (page82).Control–Up Arrow keyMove focus to another value orcell within a control such as atable.See “Key CombinationsReserved by the System” (page82).Down ArrowCommand–Shift–Down ArrowExtend selection downward inthe next semantic unit, typicallythe end of the document.See “Key CombinationsReserved by the System” (page82).Shift–Down ArrowExtend selection to the linebelow, to the nearest characterboundary at the samehorizontal location.See “Key CombinationsReserved by the System” (page82).Shift–Option–Down ArrowExtend selection to the end ofthe current paragraph, then toPreliminary © <strong>Apple</strong> Computer, Inc. 2003283
A P P E N D I X AKeyboard Shortcuts Quick Referencethe end of the next paragraph(include the blank line betweenparagraphs in cut, copy, andpaste operations).See “Key CombinationsReserved by the System” (page82).Primary keyKeyboard sequenceControl–Right Arrow keyActionMove focus to another value orcell within a control such as atable.See “Key CombinationsReserved by the System” (page82).284 Preliminary © <strong>Apple</strong> Computer, Inc. 2003
A P P E N D I X BTab View Differences Between Mac OSX VersionsThe size of the tab views has changed between Mac OS X version 10.2 (Jaguar) and Mac OS Xversion 10.3 (Panther). This section discuses how that size difference may affect your applications.If you are supporting Mac OS X version 10.3 and forward only, then you do not need to doanything. Follow the guidelines in “Tab Views” (page 252).If you need to support Mac OS X version 10.2 (or earlier) in addition to Mac OS X version 10.3,then you need to consider the differences.The Mac OS X version 10.2 tabs were 29 pixels high from the top of the tab to the bottom of thebar under the tab. The Mac OS X version 10.3 tabs are only 20 pixels. This means that if you havedesigned your user interface elements for Mac OS X version 10.2, there will be a an additionalspace of 4 pixels under the tabs when viewed in Mac OS X version 10.3 and a space of 5 pixelsabove.Figure B-1Tab view differencesMac OS X 10.2 Mac OS X 10.31217Considering your users, you must decide whether to redesign your interface so that it does notuse tabs, or to just allow the new spacing and adhere to the Mac OS X version 10.2 specificationfor spacing around the tab views. If you decide not to use tabs, one option is to use a toolbar forswitching panes.Preliminary © <strong>Apple</strong> Computer, Inc. 2003285
A P P E N D I X BTab View Differences Between Mac OS X Versions286 Preliminary © <strong>Apple</strong> Computer, Inc. 2003
R E V I S I O N H I S T O R YDocument Revision HistoryThe table below describes revisions to <strong>Apple</strong> <strong>Human</strong> <strong>Interface</strong> <strong>Guidelines</strong>.Table RH-1Document revision historyDateNotesOctober 18, 2003June 11, 2002Updated for Mac OS X version 10.3 by updating artwork and including newcontrols. Divided the document into parts. Added all of content in Part II.Added Cursors chapter. Added a list of all keyboard shortcuts. Called outdifferences between Carbon and Cocoa where appropriate. ReorganizedWindows and Menus chapters. Added content and fixed various bugsthroughout.Updated for Mac OS X version 10.2. Deleted “What’s New in Aqua” sectionsfrom Chapter 1 and beginning of each chapter.Speech chapter added.New controls: command pop-down menus, toolbar control, spinning arrows,small image wells.Other additions/changes include: accessibility features, installers, metalwindows, new document window position, utility window controls, fontconstants.October 1, 2001Updated for Mac OS X version 10.1.Added information about filename extension hiding, Dock menus andnotification, setup assistants, new focus ring specifications, accessibilityguidelines, full keyboard access, customizing Print dialogs, window positioningon multiple monitors, proxy icons. Various other editorial changes throughout.May 21, 2001Updated for WWDC.Changes made to many illustrations.Slight engineering comments and changes throughout.Icons chapter expanded.Preliminary © <strong>Apple</strong> Computer, Inc. 2003287
R E V I S I O N H I S T O R YDocument Revision HistoryDateNotesFile Location chapter added.“What’s New in Aqua” chapter appended to Intro chapter.“Layout <strong>Guidelines</strong>” broken out from “Controls” chapter.Other additions include “Additional Considerations” section in principleschapter; windows with different panes.December 11, 2000Updated for Jan 2001 Macworld; now called Inside Mac OS X: Aqua <strong>Human</strong><strong>Interface</strong> <strong>Guidelines</strong>.Document divided into chapters. TOC added.Major content added to entire document. Added many screen shots.Added <strong>Human</strong> <strong>Interface</strong> principles chapter.Added Help chapter.Added Language chapter.Added Drag and Drop chapter.Added Checklist appendix.Added Mac OS X terminology appendix.Added index.Content revisions include click-through, icon creation process, combo boxes,sheets, Save-Close-Quit behavior, keyboard equivalents, About boxes, pop-upbevel buttons, and pop-up icon buttons.September 8, 2000Updated for Mac OS X Public Beta Release.Added section on working with the Appearance Manager.Added section on designing alerts.Added section on sheets.Added section on drawers.Added section on list and column view.Added material on small controls.Added examples of font usage.Clarified description of tab control usage.April 19, 2000Updated for Mac OS X Developer Preview 4 and retitled Adopting the Aqua<strong>Interface</strong>.Changed content and art to reflect new control metrics.Added section on icon design.288 Preliminary © <strong>Apple</strong> Computer, Inc. 2003
R E V I S I O N H I S T O R YDocument Revision HistoryDateNotesAdded section on window layering.Added section on menu layout.Added material on using ellipses in menus.January 20, 2000Document published as Aqua Layout <strong>Guidelines</strong>.Preliminary © <strong>Apple</strong> Computer, Inc. 2003289
R E V I S I O N H I S T O R YDocument Revision History290 Preliminary © <strong>Apple</strong> Computer, Inc. 2003
Change language