Controls
Figure 14-3 Full-size push buttons used in dialogs 226 Figure 14-5 Metal button dimensions 227 Figure 14-6 Bevel buttons as radio buttons and push buttons 228 Figure 14-7 Bevel button examples 229 Figure 14-8 Icon buttons used in a toolbar 230 Figure 14-9 Icon button dimensions 230 Figure 14-10 Examples of round buttons 231 Figure 14-11 Round button dimensions 231 Figure 14-12 Help button in the Page Setup dialog 232 Figure 14-13 Help button dimensions 232 Figure 14-14 Radio button spacing 233...
Ease of Use
An easy-to-use program offers a compelling, intuitive experience for the user. It offers elegant solutions to complex problems and has a well thought out interface that uses familiar paradigms. It is easy to install and configure because it makes intelligent choices for the user, but it also gives the user the option to override those choices when needed. It presents the user with tools that are relevant in the current context, eliminating or disabling irrelevant tools. It also warns the user...
Layout Example for Mini Controls
Figure 15-16 shows a well designed utility window with mini controls. Figure 15-16 Example of a utility window with mini controls f Edit Data MSiiow Legend Pint Row vs Column iii Axis 1 Series 1 An amp Borders I k l T Minimum Mix mum Steps Number Format Like small controls, mini controls have specific spacing guidelines. In addition to the spacing guidelines in Controls page 223 the following guidelines are illustrated in Figure 15-17 Side borders should be 10 pixels. Bottom borders should be...
Checkbox Specifications
Figure 14-15 Checkbox spacing Full-size checkbox _J jnd t Checkoff g Check off Checkon Check on _Kmd J Check off g Zl Check off _ Checkoff 7 ''Checkoff Check On ' 0 Check On Align the baselines of the label , and the first checkbox's text. Full size 18 x 18 pixels, including the shadow 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...
Explicit and Implied Actions
Each Mac OS X operation involves the manipulation of an object using an action. In the first step of this manipulation, the user sees the desired object onscreen. In the second step, the user selects or designates that object. In the final step, the user performs an action, either using a menu command or by direct manipulation of the object with the mouse or other device. This leads to two paradigms for manipulating objects explicit and implied actions. Explicit actions clearly state the result...
Involving Users in the Design Process
The best way to make sure your product meets the needs of your target audience is to expose your designs to the scrutiny of your users. Doing this during every phase of the design process can help reveal which features of your product work well and which need improvement. When you give people an opportunity to use your product or a prototype of it you may uncover usability problems that you did not anticipate during your initial design phase. Finding and eliminating these problems early can...
Deleting Text
When 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. In 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 by immediately choosing Undo from the Edit menu. You can also implement the keyboard...
A Simple Preferences Dialog
Figure 15-1 shows a very simple preferences dialog. Note that a more advanced preferences dialog would use a toolbar to access the various sections. Figure 15-1 Preferences dialog example 0 O Imagetype Changer Preferences 0 O Imagetype Changer Preferences G n rai Editing Select existing image S Notify before CMYK to RCB conversion This dialog provides a good example of a center-equalized dialog. In Mac OS X, controls should always be center-equalized in windows. In other platforms, including...
Search Fields
A search field is a text field with rounded ends in which the user enters new text or modifies existing text that identifies items to search for. For information on ways to provide search capability in your application, see Searching page 61 . A search field can be active or disabled. It supports keyboard focus. If it is an integral part of your interface, provide the keyboard shortcut Command-Option-F for users to navigate to it without using the mouse. A search field does not need a label....
The Mouse and Other Pointing Devices
In the Macintosh interface, the standard pointing device is the mouse. Users can substitute other devices such as trackballs and stylus pens that maintain the behavior of direct manipulation of objects on screen. Moving the mouse without pressing the mouse button moves the cursor, or pointer. The onscreen cursor can assume different shapes according to the context of the application and the cursor's position. For example, in a word processor, the cursor takes the I-beam shape while it's over...
Relevance Indicators
Use a relevance indicator to display the relevance of search results as shown in Figure 14-38. Relevance indicators should be a part of a list view. Carbon Relevance indicators are available in the Controls palette of Interface Builder. To create them programmatically, use CreateRelevanceBarControl in the Control Manager, or DrawThemeTrack in the Appearance Manager. Cocoa Relevance indicators are available in Interface Builder in the Controls palette. Start with a discrete level indicator and...
Reflect the Users Mental Model
The user already has a mental model that describes the task your software is enabling. This model arises from a combination of real-world experiences, experience with other software, and with computers in general. For example, users have real-world experience writing and mailing letters and most users have used email applications to write and send email. Based on this, a user has a conceptual model of this task that includes certain expectations, such as the ability to create a new letter,...
Round Buttons
Round buttons may contain images but not text. Use them when you need a simple iconic push button to initiate an immediate action. They are commonly used as navigation controls. They should not be used as radio buttons or as checkboxes. Figure 14-9 Icon button dimensions 32 x 32 Figure 14-10 Examples of round buttons Carbon Round buttons are available in Interface Builder. To create one programmatically, use Cocoa Round buttons are available in Interface Builder. To create one programmatically,...
Reliability
A reliable program is one that earns the user's trust. Such a program presents information to the user in an expected and desired way. A reliable program maintains the integrity of the user's data and does everything possible to prevent data loss or corruption. It also has a certain amount of maturity to it and can handle complex situations without crashing. Reliability is important in all areas of software design, but especially in areas where a program may be running for an extended period of...
Metal Button Specifications
Figure 14-5 Metal button dimensions Full-size metal button Full size 25 pixels minimum, 32 pixels maximum Small 18 pixels minimum, 24 pixels maximum Width Depends on the button's content. Full size No more than 16 pixels high for a 25 pixel high button. Leave at least two pixels of space on each side. Small No more than 11 pixels high for a 18 pixel high button. Leave at least two pixels of space on each side. Full size Leave at least 12 pixels of space between buttons placed horizontally or...
High Performance
Performance is the perceived measure of how fast or efficient your software is and it is critical to the success of all software. If your software seems slow, users may be less inclined to buy it. Even software that uses the most optimal algorithms may seem slow if it spends more time processing data than responding to the user. Developers who have experience programming on other platforms including Mac OS 9 should take the time to learn about the factors that influence performance on Mac OS X....
Am C
The graphical style of the date-picker control displays a calendar and clock similar to those displayed in Date amp Time System Preferences. You can display either the calendar or the clock in your window or both together. The user selects a month by clicking the left or right arrows in the upper-left corner of the calendar display and selects a day by clicking its date in the month. A specific time is selected by dragging the hands of the clock. Figure 14-31 page 249 shows a graphical...
Date Pickers
Use a date picker to allow the user to select a specific date and time in a window. The date-picker control provides two styles of date and time selection A combination of a text field and stepper control A graphical calendar and clock The text field and stepper date picker can be modified to display various combinations of date format month, day, and year or month and year and time format hour, minute, and second or hour and minute . It can also display a text field and stepper for either the...
Checkboxes
Use checkboxes to indicate one or more options that must be either on or off. Each checkbox label should clearly imply two opposite states so it's clear what happens when the box is checked or unchecked. If you can't find an unambiguous label, consider using radio buttons so you can clarify 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...
Mobility
Designing for mobility has become increasingly important as laptop usage soars. A program that supports mobility doesn't waste battery power by polling the system or accessing peripherals unnecessarily, nor does it break when the user moves from place to place, changes monitor configurations, puts the computer to sleep, or wakes the computer up. To support mobility, programs need to be able to adjust to different system configurations, including network configuration changes. Many hardware...
Preferences
Preference settings are user-defined parameters that your software remembers from session to session. Preferences can be a way for your application to offer choices to users about how the application runs. Preferences often affect the behavior of the application or the default appearance of content created with the application. To reduce the complexity of your application, be picky about which features should have preferences and which should not. Avoid implementing all the preferences you can...
A Standard Alert
A standard alert dialog like the one provided by Carbon or Cocoa is shown in Figure 15-9. Figure 15-9 A standard alert example Although the standard alert dialogs provided by the Carbon and Cocoa take care of the general layout for you, there are a few details you are responsible for Make sure that the version of your application icon you use in the alert is 64 x 64 pixels. Make sure to include both the main message text and the informative text. An alert with only message text is not a...
Capitalization of Interface Elements
All interface element labels should be capitalized in either title style or sentence style. See Table 9-2 page 120 for examples of how to do this. Title style means that you capitalize every word except 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 a preposition of three or fewer...
PopUp Menus
Use pop-up menus to present a list of mutually exclusive choices in a dialog or window. Pop-up menus are used as a means of selecting one choice from a list of many. If you have a dialog with a set of six or more radio buttons, consider using a pop-up menu instead. Usually has a label to the left in left-to-right scripts unless the menu is used as the title for a group box Has a double-triangle indicator Contains nouns things or adjectives states or attributes , but not verbs commands use...
Standard Cursors
Table 11-1 shows the standard cursors and explains when to use each. The API information column gives the constants to implement them in Carbon or Cocoa. Table 11-1 Standard cursors in Mac OS X Table 11-1 Standard cursors in Mac OS X Menu bar, desktop, scroll bar, resize control, title bar, close button, zoom button, minimize button, other controls. Carbon kThemeArrowCursor Cocoa arrowCursor Indicates the user can open a contextual menu for an item. Shown when the user presses the Control key...
Designing Your Own Cursors
Mac OS X supports 32-bit RGBA cursors in sizes up to 64 x 64 pixels. If you need a cursor larger than 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 interface element. 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....
Tab Views
The tab view provides a convenient way to present information in a multipane format. The tab control displays horizontally centered across the top edge of a content area. The content area below the control is called a pane. In a window with a tab view, you can use other controls, such as push buttons and text entry fields.The controls can be global affecting the settings of all panes or specific to an individual pane make it clear through labeling and placement within or outside of a pane's...
Group Boxes
Group boxes, like separators, are used to break a window into distinct logical areas. A group box provides a more pronounced separation than a separator. Use a group box when you want a set of controls to be perceived as a single element. Avoid putting too many controls in group boxes so they don't look cluttered. Group boxes can be untitled or titled. If titled, they may have text-only titles, checkbox titles, or pop-up menu titles. If the group box uses a checkbox title, the items in the...
Radio Buttons
Use radio buttons for a set of mutually exclusive but related choices. A set of radio buttons should contain at least two items and a maximum of about five. For more than five items, consider using a pop-up menu. A set of radio buttons is never dynamic that is the contents shouldn't change depending on the context . A radio button should never initiate an action. Carbon Radio buttons are available in Interface Builder. To create one programmatically, use the function CreateRadioButtonControl....
The Stepper Control Little Arrows
The stepper control allows users to increment or decrement values. The control is usually used in conjunction with a text field to indicate the current value. The text field may or may not be editable. Carbon The stepper control is available in Interface Builder. You can create it programmatically with CreateLittleArrowsControl. Cocoa The stepper control is available in Interface Builder. The stepper control is an NSStepper. See Steppers in Cocoa User Experience Documentation. Figure 14-32...
Aesthetic Integrity
Aesthetic integrity means that information is well organized and consistent with principles of good visual design. Your product should look pleasant on the screen, even when viewed for a long time. Keep graphics simple, and use them only when they truly enhance usability. Don't overload windows and dialogs with dozens of icons or buttons. Don't use arbitrary symbols to represent concepts they may confuse or distract users. The overall layout of your windows and design of user interface elements...
Combo Box Specifications
Figure 14-26 Combo box dimensions Full-size combo box . i- l . gt n hin. ii. -i l gt - 20 8 in -i 15 Width Wide enough to accommodate the longest menu item Full size Leave at least 12 pixels of space between stacked controls. Small Leave at least 10 pixels. Mini Leave at least 8 pixels. Full size Emphasized system font, 8 pixels from text colon to left edge of menu 246 Selection Controls 2005-06-04 1992, 2001-2003, 2005 Apple Computer, Inc. All Rights Reserved. Small Emphasized small system...
Keyboard Focus and Navigation
In 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 navigate through windows and dialogs. This section discusses the default keyboard access mode. For information on the full keyboard access mode, see Accessibility Overview. When using the mouse is undesirable, difficult, or impossible, users can use the keyboard to move the onscreen focus highlight to text entry fields,...
Split Views
A split view groups together two or more other views, such as column or list views, and allows the user to adjust the relative width or height of those views. A split view includes a splitter bar between each of its subviews for example, a split view with five subviews would have four splitter bars. A split view can display its subviews either side-by-side with vertical splitter bars or stacked on top of each other with horizontal splitter bars . A single split view does not display a...
Printing
Mac OS X includes an advanced printing system. Because of all the options this system provides, it is important that you use the standard printing dialogs so that users understand the options that are available to them without getting lost in features. The printing architecture allows users to print digital paper documents that can be sent to a printer, faxed, or saved as a PDF file Figure 8-10 . These features are all available automatically when you use the Mac OS X printing system in your...
Slider Controls
A 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 horizontal or 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 either directional or round. Slider controls support live feedback live dragging so users can see the effect of moving the...
Push Buttons
A push button is a rounded rectangle with a text label on it. Clicking a push button performs an instantaneous action, such as saving a document, completing operations defined by a dialog, or acknowledging an error message. Use push buttons for buttons that contain text only. A button that has an icon or other image should be a bevel button. Push button text should not have a shadow or any other effects on it. It should be in the system font appropriate for the button size as described in the...
Brushed Metal Application Window Example
As discussed in Brushed Metal Windows page 179 , there are times when it is appropriate to use brushed metal windows for application windows. Brushed metal windows have slightly different spacing guidelines from those for standard Aqua windows as listed here and shown in Figure 15-11. Leave 9 pixels from the bottom of the window controls at the top of the window and the top any controls. Leave 12 pixels of space between the bottom of any toolbar controls and other controls. The side borders...
Text Input Fields
A text input field, also called an editable text field, is a rectangular area in which the user enters text or modifies existing text. The text input field can be active or disabled. It supports keyboard focus and password entry. Your application's text input fields should perform appropriate edit checks. For example, if the only legitimate value for a field is a string of digits, the application issues an alert if the user types nondigits. In most cases, the appropriate time to check the data...
Progress Indicators
Progress indicators inform users about the status of lengthy operations. For guidelines on when to provide such information, see Feedback and Communication page 34 . There are three types of progress indicators Determinate progress bar Use when the full length of an operation can be determined and you can tell the user how much of the process has been completed. You could use a determinate progress indicator to show the progress of a file conversion, for example. See Figure 14-36. Indeterminate...
Menu Behavior
When people use menus, they usually make a selection within their data and then choose a menu item. This behavior follows the see-and-point paradigm of identifying what needs to be acted on and then specifying the action by choosing a menu item. To choose an item in a menu, the user positions the pointer on the menu title and drags to the desired item. Each item is highlighted as it is selected. Figure 12-1 Menu bar, Dock, and contextual menus Figure 12-1 Menu bar, Dock, and contextual menus No...
Resizing and Zooming Windows
Your application determines the minimum and maximum window size. Base these sizes on the resolution of the display and on the constraints of your interface. For document windows, try to show 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 the standard state. Don't assume that the standard state should be as large as possible some monitors are much larger than the useful size for...
Window Behavior
This section discusses how you should open, position, resize, and close windows and provides guidelines on how they should behave when a user interacts with them. Your application should open a window when a user does any of the following Double-clicks the icon for a document supported by your application in the Finder Double-clicks your application icon Selects a document in the Finder and chooses open from the File menu or selects the document and presses Command-O in the Finder Chooses a...
The Menu Bar and Its Menus
The menu bar extends across the top of the main screen and contains pull-down menus. There is only one menu bar at the top of the screen don't put menu bars in windows. The menu bar provides a consistent location where people can look for commands. Each application, including the Finder, has its own menu bar consisting of a few standard menus, application-specific menus, and menu extras. Is always visible and available, except in circumstances such as during a slideshow see discussion below The...
Command PopDown Menus
A command pop-down menu is similar to a pull-down menu, but it appears within a window rather than in the menu bar. Use this control only when the window is shared among multiple applications and the menu contains commands that affect the window's contents. For example, the Colors window, which can be used in any application, contains a menu with commands that can be used to change the contents of the Colors window itself. If your application uses the Colors window, don't create your own menu...
Disclosure Buttons
A disclosure button expands a dialog or utility window to allow the user to perform optional tasks related to a specific control. This makes a disclosure button different from a disclosure triangle described in Disclosure Triangles page 265 , which displays additional information or functionality related to the window as a whole. An example of a dialog expanded by a disclosure button is the expanded Save dialog shown in Figure 13-40 page 213 which provides Finder capabilities search, New...
Disclosure Triangles
A disclosure triangle allows the display, or disclosure, of information or functionality associated with the primary information in a window. A disclosure triangle is not used to display additional settings associated with a specific control if you need to do this, use a disclosure button see Disclosure Buttons page 267 . Disclosure triangles have two uses in dialogs that have a minimal state and an expanded state and in hierarchical lists. See Figure 14-52 for an example in a dialog and Figure...
Combination Boxes
A combination box or combo box is a text entry field combined with a drop-down list. Combo boxes are useful for displaying a list of likely choices while still allowing the user to type 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 already in the list, or types in a few characters that match the first characters of an item in the list, the item is highlighted when the user opens the list. A user-typed item is not added...
Icon Buttons
An icon button behaves like a bevel button, but does not have a rectangular edge around it the entire button is clickable, not just the icon. Icon buttons may have pop-up menus attached. See Icon Buttons and Bevel Buttons With Pop-Up Menus page 238 for more information. Figure 14-8 Icon buttons used in a toolbar Show All Displays Sound Network Startup Disk Carbon Create icon buttons programmatically with the function CreatelconControl. Cocoa To create an icon button in Interface Builder, use...
Types of Windows
As a developer or a designer, you should be aware of four main types of windows. Although their behavior is generally the same, they have important differences. Document windows contain file-based user data. They present a view into the content that people create and store. If the document is larger than the window, the window shows a portion 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...