Apple Human Interface Guidelines
User Experience
2008-06-09
Apple Inc.
© 1992, 2001-2003, 2008 Apple Inc. All rights reserved.
No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, mechanical, electronic, photocopying, recording, or otherwise, without prior written permission of Apple Inc., with the following exceptions: Any person is hereby authorized to store documentation on a single computer for personal use only and to print copies of documentation for personal use provided that the documentation contains Apple’s copyright notice.
The Apple logo is a trademark of Apple Inc.
Use of the “keyboard” Apple logo (Option-Shift-K) for commercial purposes without the prior written consent of Apple may constitute trademark infringement and unfair competition in violation of federal and state laws.
No licenses, express or implied, are granted withrespecttoanyofthetechnologydescribed in this document. Apple retains all intellectual property rights associated with the technology described in this document. This document is intended to assist application developers to develop applications only for Apple-labeled computers.
Every effort has been made to ensure that the information in this document is accurate. Apple is not responsible for typographical errors.
Apple Inc.
1 Infinite Loop Cupertino, CA 95014 408-996-1010
.Mac is a registered service mark of Apple Inc.
Apple, the Apple logo, AppleScript, Aqua, Bonjour, Carbon, Chicago, Cocoa, Cover Flow, eMac, FireWire, Geneva, iBook, iCal, iChat, iPhoto, iPod, iTunes, Keychain, Keynote, Leopard, Logic, Mac, Mac OS, Macintosh, Objective-C, Pages, Quartz, QuickDraw, QuickTime, Safari, Tiger, Velocity Engine, and Xcode are trademarks of Apple Inc., registered in the United States and other countries.
Aperture, Finder, iWeb, Numbers, Spotlight, and Time Machine are trademarks of Apple Inc.
Helvetica is a registered trademark of Heidelberger Druckmaschinen AG, available from Linotype Library GmbH.
Intel and Intel Core are registered trademarks of Intel Corportation or its subsidiaries in the United States and other countries.
Java and all Java-based trademarks are trademarks or registered trademarks of Sun Microsystems, Inc. in the U.S. and other countries.
OpenGL is a registered trademark of Silicon Graphics, Inc.
PowerPC and and the PowerPC logo are trademarks of International Business Machines Corporation, used under license therefrom.
Simultaneously published in the United States and Canada.
Even though Apple has reviewed this document, APPLEMAKESNOWARRANTYORREPRESENTATION, EITHER EXPRESS OR IMPLIED, WITH RESPECT TO THIS DOCUMENT, ITS QUALITY, ACCURACY, MERCHANTABILITY,ORFITNESSFORAPARTICULAR PURPOSE. AS A RESULT, THIS DOCUMENT IS PROVIDED “AS IS,” AND YOU, THE READER, ARE ASSUMING THE ENTIRE RISK AS TO ITS QUALITY AND ACCURACY.
IN NO EVENT WILL APPLE BE LIABLE FOR DIRECT, INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIALDAMAGESRESULTINGFROMANY DEFECTORINACCURACYINTHISDOCUMENT,even if advised of the possibility of such damages.
THEWARRANTYANDREMEDIESSETFORTHABOVE AREEXCLUSIVEANDINLIEUOFALLOTHERS,ORAL OR WRITTEN, EXPRESS OR IMPLIED. No Apple dealer, agent, or employee is authorized to make any modification, extension, or addition to this warranty.
Somestatesdonotallowtheexclusionorlimitation of implied warranties or liability for incidental or consequential damages, so the above limitation or exclusionmaynotapplytoyou. Thiswarrantygives you specific legal rights, and you may also have other rights which vary from state to state.
Contents
Introduction |
Introduction to Apple Human Interface Guidelines 19 |
|||||
|
Who Should Read This Document? 20 |
|
||||
|
Organization of This Document |
20 |
|
|||
|
Conventions Used in This Document 20 |
|
||||
|
See Also 21 |
|
|
|
|
|
Part I |
Application Design Fundamentals |
23 |
||||
Chapter 1 |
The Design Process |
|
25 |
|
|
|
|
Involving Users in the Design Process 25 |
|
||||
|
Know Your Audience |
|
25 |
|
|
|
|
Analyze User Tasks 26 |
|
|
|
||
|
Build Prototypes 26 |
|
|
|
|
|
|
Observe Users 26 |
|
|
|
|
|
|
Guidelines for Conducting User Observations 27 |
|||||
|
Making Design Decisions |
28 |
|
|
|
|
|
Avoid Feature Cascade |
28 |
|
|
|
|
|
Apply the 80 Percent Solution |
29 |
|
|||
Chapter 2 |
Characteristics of Great Software |
31 |
||||
|
High Performance 31 |
|
|
|
|
|
|
Ease of Use 32 |
|
|
|
|
|
|
Attractive Appearance |
34 |
|
|
|
|
|
Reliability 34 |
|
|
|
|
|
|
Adaptability 35 |
|
|
|
|
|
|
Interoperability 36 |
|
|
|
|
|
|
Mobility 37 |
|
|
|
|
|
Chapter 3 |
Human Interface Design |
39 |
|
|||
|
Human Interface Design Principles |
39 |
|
|||
|
Metaphors 39 |
|
|
|
|
|
|
Reflect the User’s Mental Model |
39 |
|
|||
|
Explicit and Implied Actions |
41 |
|
|||
|
Direct Manipulation |
41 |
|
|
|
|
|
User Control 42 |
|
|
|
|
|
|
Feedback and Communication |
42 |
|
|||
|
Consistency 43 |
|
|
|
|
|
3
2008-06-09 | © 1992, 2001-2003, 2008 Apple Inc. All Rights Reserved.
C O N T E N T S
WYSIWYG (What You See Is What You Get) 44 |
||
Forgiveness |
44 |
|
Perceived Stability |
45 |
|
Aesthetic Integrity |
45 |
|
Modelessness |
46 |
|
|
Managing Complexity in Your Software 46 |
||
|
Keep Your Users in Mind |
47 |
|
|
Worldwide Compatibility 47 |
|
|
|
Universal Accessibility |
49 |
|
|
Extending the Interface |
51 |
|
|
Build on the Existing Interface |
51 |
|
|
Don’t Assign New Behaviors to Existing Objects 51 |
||
|
Create a New Interface Element Cautiously 51 |
||
Chapter 4 |
Prioritizing Design Decisions 53 |
||
|
Meet Minimum Requirements 53 |
|
|
|
Deliver the Features Users Expect |
55 |
|
|
Differentiate Your Application 56 |
|
|
Part II |
The Macintosh Experience |
59 |
|
Chapter 5 |
The Mac OS X Environment |
61 |
|
|
The Always-On Environment 61 |
|
|
|
Displays 61 |
|
|
|
The Dock |
62 |
|
|
|
|
|
Conveying Information in the Dock |
62 |
||||
|
Clicking in the Dock |
62 |
|
|||
|
The Finder |
63 |
|
|
|
|
|
File Formats and Filename Extensions |
63 |
||||
|
Internationalization |
64 |
|
|
||
|
Multiple User Issues |
64 |
|
|
||
|
Resource Management |
65 |
|
|||
|
Threads |
65 |
|
|
|
|
Chapter 6 |
Using Mac OS X Technologies |
67 |
||||
|
Address Book 67 |
|
|
|
||
|
Animation |
68 |
|
|
|
|
|
Automator |
70 |
|
|
|
|
|
Bonjour |
71 |
|
|
|
|
|
Colors |
71 |
|
|
|
|
|
Dashboard |
72 |
|
|
|
|
High-Level Design Guidelines for Widgets 72
4
2008-06-09 | © 1992, 2001-2003, 2008 Apple Inc. All Rights Reserved.
C O N T E N T S
|
User-Interface Design Guidelines for Widgets 73 |
||||||||||
|
Fonts 74 |
|
|
|
|
|
|
|
|
|
|
|
Preferences |
|
75 |
|
|
|
|
|
|
||
|
Printing |
76 |
|
|
|
|
|
|
|
|
|
|
Security |
76 |
|
|
|
|
|
|
|
|
|
|
Speech |
77 |
|
|
|
|
|
|
|
|
|
|
Spotlight |
77 |
|
|
|
|
|
|
|
||
|
User Assistance |
|
80 |
|
|
|
|
|
|||
|
Apple Help |
80 |
|
|
|
|
|
||||
|
Help Tags |
80 |
|
|
|
|
|
|
|||
Chapter 7 |
Software Installation and Software Updates 83 |
||||||||||
|
Packaging |
83 |
|
|
|
|
|
|
|
||
|
Identify System Requirements |
83 |
|||||||||
|
Bundle Your Software |
83 |
|
|
|||||||
|
Installation |
|
84 |
|
|
|
|
|
|
|
|
|
Use Internet-Enabled Disk Images 84 |
||||||||||
|
Drag-and-Drop Installation |
84 |
|
||||||||
|
Installation Packages |
85 |
|
|
|||||||
|
General Installer Guidelines |
85 |
|
||||||||
|
Setup Assistants |
86 |
|
|
|
|
|
||||
|
Updating Installed Applications |
88 |
|||||||||
Part III |
The Aqua Interface |
93 |
|
|
|||||||
Chapter 8 |
User Input |
95 |
|
|
|
|
|
||||
|
The Mouse and Other Pointing Devices 95 |
||||||||||
|
Clicking |
95 |
|
|
|
|
|
|
|
||
|
Double-Clicking |
95 |
|
|
|
|
|||||
|
Pressing and Holding |
96 |
|
|
|||||||
|
Dragging |
|
96 |
|
|
|
|
|
|
||
|
The Keyboard |
96 |
|
|
|
|
|
||||
|
The Functions of Specific Keys |
97 |
|||||||||
|
Keyboard Shortcuts |
103 |
|
|
|||||||
|
Keyboard Focus and Navigation |
107 |
|||||||||
|
Type-Ahead and Key-Repeat |
108 |
|||||||||
|
Selecting |
108 |
|
|
|
|
|
|
|
||
|
Selection Methods |
109 |
|
|
|||||||
|
Selections in Text |
111 |
|
|
|||||||
|
Selections in Spreadsheets |
113 |
|||||||||
|
Selections in Graphics |
113 |
|
|
|||||||
|
Editing Text |
|
114 |
|
|
|
|
|
|||
|
Inserting Text |
114 |
|
|
|
|
|||||
5
2008-06-09 | © 1992, 2001-2003, 2008 Apple Inc. All Rights Reserved.
C O N T E N T S
Deleting Text 114 |
|
Replacing a Selection 114 |
|
Intelligent Cut and Paste 115 |
|
Editing Text Fields |
115 |
Entering Passwords |
116 |
Chapter 9 |
Drag and Drop |
117 |
|
||||
|
Drag-and-Drop Overview |
117 |
|||||
|
Drag-and-Drop Semantics |
117 |
|||||
|
Move Versus Copy |
118 |
|
||||
|
When to Check the Option Key State 118 |
||||||
|
Selection Feedback |
118 |
|
||||
|
Single-Gesture Selection and Dragging 119 |
||||||
|
Background Selections |
119 |
|||||
|
Drag Feedback |
119 |
|
|
|
||
|
Destination Feedback |
119 |
|||||
|
Windows |
120 |
|
|
|
||
|
Text |
120 |
|
|
|
|
|
|
Lists |
120 |
|
|
|
|
|
|
Multiple Dragged Items |
121 |
|||||
|
Automatic Scrolling |
121 |
|||||
|
Using the Trash as a Destination 121 |
||||||
|
Drop Feedback |
121 |
|
|
|||
|
Finder Icons |
121 |
|
|
|||
|
Graphics |
122 |
|
|
|
||
|
Text |
122 |
|
|
|
|
|
|
Transferring a Selection |
122 |
|||||
|
Feedback for an Invalid Drop 122 |
||||||
|
Clippings 123 |
|
|
|
|
||
Chapter 10 |
Text |
125 |
|
Fonts |
125 |
|
Style |
126 |
Inserting Spaces Between Sentences 127 |
|
||
Using the Ellipsis Character |
127 |
|
|
Using the Colon Character 128 |
|
|
|
Labels for Interface Elements |
131 |
|
|
Capitalization of Interface Element Labels and Text |
131 |
||
Using Contractions in the Interface |
133 |
|
|
Using Abbreviations and Acronyms in the Interface |
133 |
||
Developer Terms and User Terms |
134 |
|
|
6
2008-06-09 | © 1992, 2001-2003, 2008 Apple Inc. All Rights Reserved.
C O N T E N T S
Chapter 11 |
Icons 135 |
|
Icon Genres and Families 135 |
|
Application Icons 136 |
User Application Icons 136 |
|
Viewer, Player, and Accessory Icons 138 |
|
Utility Icons |
138 |
Document Icons 138 |
|
Toolbar Icons |
139 |
Icons for Plug-ins, Hardware, and Removable Media 140 |
|
Icon Perspectives and Materials 141 |
|
Creating Icons |
143 |
|
Tips for Designing Icons |
143 |
|
|
|
|
|||
|
A Suggested Process for Creating Icons 143 |
|
|
|
|||||
|
Creating Icons for Mac OS X v10.5 and Later |
145 |
|
|
|||||
|
Scaling Your Artwork |
147 |
|
|
|
|
|||
|
Designing Toolbar Icons |
148 |
|
|
|
|
|||
|
Designing Icons for Icon Buttons |
149 |
|
|
|
||||
|
Designing Icons for Capsule-Style Toolbar Controls |
150 |
|
||||||
|
Designing Icons for Rectangular-Style Toolbar Controls |
150 |
|||||||
|
System-Provided Images |
151 |
|
|
|
|
|||
|
System-Provided Images for Use in Controls |
152 |
|
|
|||||
|
System-Provided Images for Use as Standalone Buttons |
153 |
|||||||
|
System-Provided Images for Use as Toolbar Items |
154 |
|
||||||
|
System-Provided Images that Indicate Privileges 156 |
|
|||||||
|
A System-Provided Drag Image |
156 |
|
|
|
||||
Chapter 12 |
Cursors |
157 |
|
|
|
|
|
|
|
|
Standard Cursors |
157 |
|
|
|
|
|
|
|
|
Designing Your Own Cursors |
159 |
|
|
|
|
|||
Chapter 13 |
Menus |
161 |
|
|
|
|
|
|
|
|
Menu Behavior |
161 |
|
|
|
|
|
|
|
|
Designing the Elements of Menus |
163 |
|
|
|
||||
|
Titling Menus |
163 |
|
|
|
|
|
|
|
|
Naming Menu Items |
163 |
|
|
|
|
|||
|
Using Icons in Menus |
165 |
|
|
|
|
|||
|
Using Symbols in Menus |
166 |
|
|
|
|
|||
|
Toggled Menu Items |
168 |
|
|
|
|
|||
|
Grouping Items in Menus |
169 |
|
|
|
|
|||
|
Hierarchical Menus (Submenus) |
170 |
|
|
|
||||
|
The Menu Bar and Its Menus |
171 |
|
|
|
|
|||
|
The Apple Menu 173 |
|
|
|
|
|
|
||
|
The Application Menu |
173 |
|
|
|
|
|||
7
2008-06-09 | © 1992, 2001-2003, 2008 Apple Inc. All Rights Reserved.
C O N T E N T S
|
The File Menu 175 |
|
|
|
||||
|
The Edit Menu |
177 |
|
|
|
|||
|
The Format Menu |
179 |
|
|
||||
|
The View Menu |
180 |
|
|
|
|||
|
Application-Specific Menus 181 |
|
|
|||||
|
The Window Menu |
182 |
|
|
||||
|
The Help Menu |
183 |
|
|
|
|||
|
Menu Bar Extras |
183 |
|
|
|
|||
|
Contextual Menus |
184 |
|
|
|
|||
|
Dock Menus |
185 |
|
|
|
|
|
|
Chapter 14 |
Windows |
187 |
|
|
|
|
|
|
|
Types of Windows |
187 |
|
|
|
|||
|
Window Appearance |
188 |
|
|
||||
|
Window Elements |
190 |
|
|
|
|||
|
The Title Bar |
193 |
|
|
|
|
||
|
Toolbars |
196 |
|
|
|
|
|
|
|
Scope Bars |
201 |
|
|
|
|
||
|
Source Lists |
203 |
|
|
|
|
||
|
Bottom Bars |
207 |
|
|
|
|
||
|
Drawers |
209 |
|
|
|
|
|
|
|
Window Behavior |
211 |
|
|
|
|||
|
Opening Windows |
211 |
|
|
||||
|
Naming New Windows |
212 |
|
|
||||
|
Positioning Windows |
213 |
|
|
||||
|
Moving Windows |
215 |
|
|
||||
|
Resizing and Zooming Windows |
215 |
|
|||||
|
Minimizing and Expanding Windows 216 |
|||||||
|
Closing Windows |
216 |
|
|
|
|||
|
Window Layering |
217 |
|
|
||||
|
Scrolling Windows |
220 |
|
|
||||
|
Panels 222 |
|
|
|
|
|
|
|
|
Inspector Windows |
224 |
|
|
||||
|
Transparent Panels |
225 |
|
|
||||
|
Fonts Window and Colors Window 229 |
|
||||||
|
About Windows |
229 |
|
|
|
|||
|
Dialogs 230 |
|
|
|
|
|
|
|
|
Types of Dialogs and When to Use Them |
230 |
||||||
|
Dialog Appearance and Behavior |
235 |
|
|||||
|
Find Windows |
238 |
|
|
|
|||
|
Preferences Windows |
238 |
|
|
||||
|
The Open Dialog 240 |
|
|
|
||||
|
Dialogs for Saving, Closing, and Quitting |
241 |
||||||
|
The Choose Dialog |
246 |
|
|
||||
|
The Print Dialog |
247 |
|
|
|
|||
8
2008-06-09 | © 1992, 2001-2003, 2008 Apple Inc. All Rights Reserved.
C O N T E N T S
Chapter 15 |
Controls |
249 |
|
|
|
|
|
||
|
Window-Frame Controls 249 |
|
|
||||||
|
Rectangular-Style Toolbar Controls |
250 |
|||||||
|
Capsule-Style Toolbar Controls |
254 |
|
||||||
|
Legacy Toolbar Controls 257 |
|
|
||||||
|
Buttons 258 |
|
|
|
|
|
|
||
|
Push Buttons |
258 |
|
|
|
||||
|
Icon Buttons |
261 |
|
|
|
||||
|
Scope Buttons |
263 |
|
|
|
||||
|
Gradient Buttons |
265 |
|
|
|||||
|
The Help Button |
268 |
|
|
|||||
|
Bevel Buttons |
269 |
|
|
|
||||
|
Round Buttons |
271 |
|
|
|
||||
|
Selection Controls |
272 |
|
|
|||||
|
Radio Buttons |
272 |
|
|
|
||||
|
Checkboxes |
275 |
|
|
|
||||
|
Segmented Controls |
277 |
|
|
|||||
|
Icon Buttons and Bevel Buttons with Pop-Up Menus 279 |
||||||||
|
Pop-Up Menus |
281 |
|
|
|
||||
|
Action Menus |
284 |
|
|
|
||||
|
Combination Boxes |
286 |
|
|
|||||
|
Path Controls |
289 |
|
|
|
||||
|
Color Wells |
291 |
|
|
|
|
|||
|
Image Wells |
291 |
|
|
|
||||
|
Date Pickers |
292 |
|
|
|
||||
|
Command Pop-Down Menus |
294 |
|
||||||
|
Sliders |
296 |
|
|
|
|
|
|
|
|
The Stepper Control (Little Arrows) |
300 |
|||||||
|
Placards |
|
301 |
|
|
|
|
|
|
|
Indicators |
302 |
|
|
|
|
|
|
|
|
Progress Indicators |
302 |
|
|
|||||
|
Level Indicators |
307 |
|
|
|||||
|
Text Controls |
312 |
|
|
|
|
|||
|
Static Text Fields |
312 |
|
|
|||||
|
Text Input Fields |
313 |
|
|
|||||
|
Token Fields |
316 |
|
|
|
||||
|
Search Fields |
317 |
|
|
|
||||
|
Scrolling Lists |
319 |
|
|
|
||||
|
View Controls |
320 |
|
|
|
|
|||
|
Disclosure Triangles |
320 |
|
|
|||||
|
Disclosure Buttons |
322 |
|
|
|||||
|
List Views |
324 |
|
|
|
|
|||
|
Column Views |
325 |
|
|
|
||||
|
Split Views |
327 |
|
|
|
|
|||
|
Tab Views |
329 |
|
|
|
|
|||
9
2008-06-09 | © 1992, 2001-2003, 2008 Apple Inc. All Rights Reserved.
C O N T E N T S
|
Grouping Controls 332 |
|
|
||
|
Separators |
332 |
|
|
|
|
Group Boxes |
334 |
|
|
|
Chapter 16 |
Layout Guidelines |
337 |
|
|
|
|
Positioning Regular-Size Controls in a Window Body 337 |
||||
|
A Simple Preferences Window 337 |
||||
|
A Tabbed Window |
340 |
|
|
|
|
A Standard Alert 343 |
|
|
||
|
Positioning Small and Mini Controls in a Window Body 344 |
||||
|
Layout Example for Small Controls |
344 |
|||
|
Layout Example for Mini Controls |
347 |
|||
|
Grouping Controls in a Window Body |
349 |
|||
|
Grouping with White Space |
349 |
|
||
|
Grouping with Separators |
350 |
|
||
|
Grouping with Group Boxes |
351 |
|
||
|
Positioning Text and Controls in a Bottom Bar |
353 |
Appendix A |
Keyboard Shortcuts Quick Reference |
355 |
|
Glossary 363 |
|
Document Revision History 371
Index 375
10
2008-06-09 | © 1992, 2001-2003, 2008 Apple Inc. All Rights Reserved.