Keyboard Shortcuts

Keyboard shortcuts are used throughout Mac OS X to provide quick ways for users to initiate certain actions. Many are provided by the operating system to meet both general usability needs and accessibility needs. The operating system therefore reserves certain keys and keyboard combinations for its use. These combinations, listed in Table 7-3 and Table 7-4, affect all applications and should not be used for any other function. Other keyboard shortcuts are used by the Universal Access features...

The Functions of Specific Keys

There are four kinds of keys character keys, modifier keys, arrow keys, and function keys. A character key sends a character to the computer. When the user holds down a modifier key, it alters 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 keyboards. Don't depend on a key as the only way for users to accomplish a task. You cannot assume anything about which keyboard (if any) is connected to a computer. Character...

Universal Accessibility

Millions of people have a disability or special need and computers hold tremendous promise for increasing the productivity of such users. Many countries, including the United States, have laws 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 process rather than add it at the end of your implementation cycle. When you think about designing for the wide range of abilities in...

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...

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...

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....

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,...

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...

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...

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...

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...

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

Splitter Bar

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...

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...

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 Pop Down 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

Combo Box Apple

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...

Setup Assistants

Assistant Icon

For products with complex setup procedures, a setup assistant can be helpful. A setup assistant is a small application that guides users through the setup options. You store setup assistants in a location where your application can find them, such as inside your application bundle. Your application should open a setup assistant automatically whenever appropriate when the system detects a new hardware device or the first time the user opens your application, for example. Ideally, the user should...

Bevel Button Specifications

Figure 14-7 Bevel button examples Rounded corners Leave at least 5 pixels between edge of icon and edge of button. Rounded corners with label below icon Figure 14-7 Bevel button examples Rounded corners Leave at least 5 pixels between edge of icon and edge of button. Size of button Variable 20 x 20 pixels is recommended size in a tool palette. If using an icon or text in the button, maintain a border of at least 5 pixels on all sides. Size of icon 32 x 32 pixels is the largest recommended icon...

Bevel Buttons

A bevel button has a beveled edge that gives the button a three-dimensional appearance. Bevel buttons are extremely versatile and can display text, icons, or other images. They can behave like standard push buttons or can be grouped and used like radio buttons or checkboxes. For example, bevel buttons could be used to graphically represent text-alignment options in a toolbar. Figure 14-6 Bevel buttons as radio buttons and push buttons Bevel buttons can have a menu attached, so the button...

Designing the Elements of Menus

Arbitrary Symbols

Menu 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 of some menu items. These elements are illustrated in Figure 16-3. e My Disk Other User s Disk... g Other User s Public Folder... e My Disk Other User s Disk... g Other User s Public Folder... Hierarchical menu submenu indicator Keyboard equivalent Menu and submenu titles should appropriately represent the items in...

Apple Close Button

Unsaved Changes Icon

Indicating Changes With the Close Button When a document has unsaved changes, the close button should display a dot. Figure 13-4 The close button in its unsaved changes state The dot indicates that this document The dot indicates that this document 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. Document windows include a proxy icon in the...

Level Indicators

Use a level indicator to provide information about the level or amount of something in a graphical manner. There are three types of level indicator Relevancy Use this style in a Cocoa application to display a relevance indicator. For more information on the use of this control, see Relevance Indicators page 255 . Use a capacity indicator to provide information about the level or amount of something that has well defined minimum and maximum values. For example, you might use a capacity indicator...