Layout Guidelines

The following sections are general guidelines that describe fundamental Mac layout principles of center equalization, text and control alignment, appropriate use of white space, and visual balance. Following these guidelines will help you create functional and aesthetically pleasing windows that are easy for Mac users to understand and use.

As you layout your window, remember to observe the principle of consistency in your decisions. If you have good reasons to break some layout guidelines, be sure to do it in a consistent way. Users tend to ignore symmetry and balance but will notice inconsistency.

Inconsistencies in a window can also lead users to conclude that the window was poorly designed and/or implemented. For example, users won’t notice if the margins inside your window edges are 18 points wide (instead of the recommended 20 points), but are likely to notice if the left margin is wider than the right one.

Table of Contents

Positioning Regular-Sized Controls

Although there are many ways to arrange controls in a given window, there are guidelines you should follow so that your application has the clean, balanced appearance of Aqua. This section provides examples of properly designed windows and dialogs that use regular-size controls.

A Simple Settings Window

The following example showcases a very simple Settings window. Note that more advanced Settings windows would use a window toolbar to access the various sections.

This window provides a good example of a center-equalized layout. Center Equalization means that the visual weight is balanced on the left and right side of the content area. It does not mean center justification. In macOS, content should always be center-equalized in windows and panes.

Although the right side has more objects, it is balanced by the categorization labels on the left. The final result is a visually balanced window.

When labels and controls are stacked in a group, they should line up with each other vertically. Note the right alignment of the colons for the main category labels and the left alignment of the checkboxes and radio buttons. The vertical alignment of the first control in each section is also first baseline aligned with the section title label.

The following are general specifications on how to arrange controls in relation to the window that contains them.

General margins and spacing

  • The section text labels are right-aligned and their stacked controls are left-aligned.
  • Controls not in a group box or a tab view should be 14 points from the titlebar or toolbar.
  • There should be a 20 point margin all along the left, right, and bottom sides.
  • Leave 6 points between the colons of the section labels and the stacked controls they represent.
  • If you include a Help button, it should always be placed on the left bottom corner.

Spacing between individual controls

  • Stacked, Regular-sized controls have at least 6 points of spacing between them.
  • Add an additional 12 points of space above and below separators (In addition to the 6 points mentioned).
  • For additional separation of controls within a group, add an additional 8 points (In addition to the 6 points mentioned). For example, maybe you want to have a checkbox below a Radio Button group. Adding additional spacing between the Checkbox button and the Radio Button Group visually separates them.
  • Leave 12 points of space between the bottom group of controls and the buttons (This would include buttons like a Help button shown above or push buttons like OK and Cancel).

Additional considerations

  • If one control depends on the state of another, place it below and visually indent it in such a way that the leading edge aligns with the text label of the control it depends on.
  • Including a Help button is recommended and it should open the Help Viewer to a page specific to the Settings window.

Special Topic: Optional Settings Descriptions

In some situations, the label for your checkbox, radio button, etc. may not provide a good enough description or context for the user to understand. In such cases, you may use a label below the control with additional information as to how it will alter the application’s behavior.

  • These labels are small-sized multi-line labels.
  • The text color for these labels is “secondary text color” so they appear more muted than the actual control itself.

For any labels you add, they're typically left aligned with the control they're describing. However, for controls such as Checkboxes and Radio Buttons, they must be left-aligned with the label (title) of the control. For these cases, it is required you left-indent to label at least 14 points (more or less depending on the size of the control) in order to align the description label to the title label.

Since the description label is vertically shorter, you must also adjust its vertical spacing to 4 points in order to make the description label appear as if it belongs to the control as well as for visual balance.

A Tabbed Window

In this tabbed window example, Center Equalization is again present. The overall effect of the window is a balance between visual weight of the controls on both sides of the invisible center axis. The controls are also collectively balanced within each group box so that the distance from the farthest control on each side is the same for both left and right sides.

Always center tab views within their window.

Pay extra attention to popup buttons, text fields, pickers, and combo boxes. They are taller than simpler settings controls such as checkboxes and radio buttons. Allow for extra spacing when stacking them to prevent a cluttered look. Additionally, be sure to first baseline align all elements of the same row. This will ensure the text of labels, popup buttons, combo boxes, etc. are all aligned in their row.

General margins and spacing

  • Leave 12 points of space from the top of the tab view to the bottom of the titlebar or toolbar.
  • There should be a 20-point margin all the left, bottom, and right side of the window.
  • Within group boxes, leave at least 16-point margin between controls and the edge of the group box.
  • Within the tab view, leave at least 16-point margin between controls or group boxes and the edge of the tab view.

Spacing between individual controls

  • The colons for stacked labels are right-aligned.
  • Stacked controls are left-aligned when appropriate.
  • Similar controls have consistent widths. For example, the widths of the Font popup buttons and the widths of the combo boxes are the same despite being in different group boxes.

Additional considerations

  • Including a Help button is recommended (not pictured). If your Settings window is driven by a tab view, the Help button should open the Help Viewer to a page specific to the selected tab.

Positioning Small and Mini Controls

Use smaller versions of controls only when necessary. Your first choice in designing for the Mac should always be to use the full-size controls.

You can use the smaller versions of controls when space is at a premium, such as tool palettes, toolbar accessory views, HUDs, inspector sidebars, and other utility windows. Avoid mixing different sizes of controls in the same window or pane.

Layout Example for Small Controls

To save space while creating distinct sections, this example uses a bold font for each label section instead of using horizontal separators or group boxes.

As with using regular-sized controls, you should use the center-equalized approach to laying out small controls.


General margins and spacing

  • The section text labels are right-aligned and their stacked controls are left-aligned.
  • Controls not in a group box or a tab view should be 14 points from the titlebar or toolbar.
  • There should be a 20 point margin all along the left, right, and bottom sides. Note that if you use group boxes in a panel with small controls, a narrower margin is more suitable (10 point margins all around).

Spacing between individual controls

  • Use 12-point spacing between sections (above subsequent section labels in bold).
  • Use 8-point spacing between the the section title (lable in bold) and the first control of that section.
  • When using sliders, use 4-point spacing between the section title and 4-point spacing between asscociated labels underneath.
  • Use 6-point spacing between controls like checkboxes or radio button groups.

Additional considerations

  • Similar stacked controls should have similar widths even if they're in different sections.

Layout Example for Mini Controls

When you lay out mini controls, continue to follow the principles of center equalization, text and control alignment, and visual balance.

  • Stacked controls are left-aligned.
  • Similar controls have the same width.
  • The layout is center-equalized and visually balanced.

To save space while creating distinct sections, this example uses a bold font for each label section instead of using horizontal separators or group boxes.

General margins and spacing

  • The window uses 10 point margins all the left, top, and right sides.
  • For visual balance, the bottom margin is 14 points.

Spacing between individual controls

  • Use 12-point spacing between the last control of a section and the title for the next section (bold labels)
  • Use 8-point spacing between the title for the section (bold labels) and the first control in its section.
  • Use 4-point spacing between related checkbox buttons or radio button groups.

Note: The example above has a few inconsistencies due to the mix of the combo boxes.

  • The checkbox row with the combo box has 6-point spacing (instead of 4 points) above and below as to allow more space for the combo box. This prevents a cluttered look.
  • The last section's title label (in bold) has a spacing of 8 points above it rather than the required 12 points. Since there is a lot of white space in the section above, reducing the spacing to 8 points (from 12 points) results in enhanced visual balance.

Grouping Controls in a Window

Grouping related controls helps users understand what particular controls do and helps them locate the controls that affect the specific actions they want to preform. This section provides three ways to group the same controls within a tabbed window using:

  • White space
  • Separators
  • Group boxes

Please note that no one way is more or less correct than the other. The effectiveness of a layout in your app depends on the overall aesthetic of your other windows and your app's workflow.

Grouping Using White Space

Grouping using white space is a great option when you are dealing with small groups of controls.

Notice that the “Background Colors” section has a 12 point space between it and the “Thumbnails” section above it. Any subsequent sections below “Background Colors” would also have a 12 point space between it and the group above it.

Depending on your layout, you may want to increase this value for white space, but keep it at a minimum of 12 points and no more than 24 points.

Grouping Using Separators

Grouping using separators is preferred and most useful when space is at a premium.

Use equal spacing above and below a separator. For Regular sized controls, use padding of 12 points above and below each separator. Decrease this spacing when using small or mini controls to be visually balanced with their smaller margins.

Grouping Using Group Boxes

Grouping using group boxes when you need to provide a strong visual indication of distinct groups. Keep in mind that using Group Boxes do require the most space.

First, notice that the title for the Group Box now takes the title of the previously named sections. This means that within each box, you will have to choose a different name as well as possibly needing to rename your controls to reduce or eliminate any redundancy.

Keep a 16 point margin at the top and bottom within a Group Box and at least a 16 point margin on the left and right of the Group Box.

Additionally, notice that even across Group Boxes, center equalization is still used and the right-alignment of the section titles persists. That is to say, the section titles of the first Group Box are aligned with the section titles of the second Group Box.

Bottom Buttons

There are special considerations for the buttons typically placed along the bottom of a window or modal/sheet view.

  • The Help button should always be left-aligned.
  • The confirmation button (OK button) should have the same width as the Cancel button but may be longer if necessary.
  • The confirmation button (OK button) should always be to the right of the Cancel button.
  • The confirmation button (OK button) should be able to be triggered using the Return key on the keyboard.

The margins for this row should always be 12 points at the top and 20 points all along the left, bottom, and right sides from its containing window.

Positioning Controls in Bottom Bars

A bottom bar is a part of the window frame that extends below the content in the window body. Controls in a bottom bar are frequently used but are not as frequently used as those found in the toolbar. Additionally, bottom bar controls are closely related to the content in the view directly above them.

There are two sizes to bottom bars:

  • Large: 32 points in height; if you plan to use regular-size controls in the bottom bar
  • Small: 22 points in height; if you plan to use smaller controls in the bottom bar

For buttons, use the Recessed button of type Momentary Push In. This gives it the same behavior as the buttons in a toolbar where they show a darkened background frame only when your cursor hovers over them.

The following metrics are for a large size bottom bar:

  • The height of the bottom bar is 32 points including the separator.
  • The button size is Regular.
  • The buttons have a width of 31 points; inherit height of 18 points.
  • The buttons have a leading or trailing space of 8 points if they're next to either edge.
  • The spacing between buttons is 1 point.
  • For labels, use the Small control size and a foreground color of Secondary Label Color.
  • All controls are vertically centered.



The following metrics are for a small size bottom bar:

  • The height of the bottom bar is 22 points including the separator.
  • The button style is Mini.
  • The buttons have a width of at least 25 points; inherit height of 14 points.
  • The buttons have a leading or trailing space of 6 points if they're next to either edge.
  • The spacing between buttons is 1 point.
  • For labels, use the Mini control size and a foreground color of Secondary Label Color.
  • All controls are vertically centered.
  • Since the controls are smaller, consider using the “fill” version for their symbol.

Have Suggestions?

Reach out via Mastodon if you have suggestions that would improve this article.

Mastodon

Mac, Macintosh, and macOS are registered trademarks of Apple Inc.
© 2019-2024 Mario A Guzman
Personal
Projects
Downloads