Inspector Guidelines

The following sections are general guidelines that describe fundamental Inspector design principles for Mac applications. Following these guidelines will help you create functional and consistent Inspector implementations that are easy for Mac users to understand and use.

PDX Transit with an Inspector Sidebar displaying metadata for both the selected transit stop and selected arrival.

Table of Contents

• Introduction
• Designing an Inspector
• Inspector Types
• Grouping Content
• HUD-style Panel
• Inspector Minimum and Maximum Widths
• Other Considerations
• Additional Reading

Introduction

Inspectors, whether panels or sidebars, help reduce the clutter of a user interface by placing auxiliary information or controls that can be shown or hidden by the user.

Inspector views are also contextual and dynamic. Depending on the context (what is currently selected or has focus), the content of the inspector is shown, enabled, or completely hidden. The inspector should update its content or what is enabled as soon as the selection or focus changes.

Designing an Inspector

Inspectors often display two types of content:

Inspector Panels showing informational metadata for a selected document and controls for a selected layer in an image editor application.

• Informational details and metadata
  QuickTime’s inspector displays metadata such as resolution, file size, video and audio format, data rate, audio channels, etc.
• Controls to edit or modify selected content
  Xcode has many inspectors in the Inspectors sidebar, including controls to change the attributes of controls in a Storyboard.

Inspector Types

Inspectors can be displayed in two ways:

Your application can display an Inspector as a sidebar or as a Panel.

• Panel Window
  A separate, floating panel window. While this becomes the key window, your application remains the main window. Closes on Esc.
• Sidebar
  The modern way of displaying an inspector. The inspector view slides in from the right side of the window in a sidebar and is part of the main application window.

Grouping Content

Inspector Panels displaying metadata organized in disclosure groups or tabs using a tab view.

Content should be organized into collapsible sections with disclosure buttons, grouped under tabs (using a tab view), or a mixture of both. Sensible organization allows users to easily remember how to get back to a control they may need.

Inspectors, especially those in panel windows, should use the small control size and be organized densely within their view. Inspector panel windows should not take up too much space.

For guidance on creating layouts for Mac apps, refer to the Layout Guidelines page.

HUD-style Panel

An Inspector panel using the HUD style on the left.

Use the HUD style for inspector panels that may obstruct media such as video or images in a photo-editing application. HUD panels are dark in appearance with a translucent background to minimize distraction.

Inspector Minimum and Maximum Widths

Whether your inspector is a panel or a sidebar, it needs sensible minimum and maximum width limits. A good starting point is 225-275 pts as a minimum width and 350-400 pts for a maximum width.

Other Considerations

• Inspectors must always include a menu item in your application's menu bar to open them; Sidebar inspectors must have a toggle to show/hide in the toolbar as well.
• If using a tab view in a panel window, the panel’s window title should be the name of the selected tab; Otherwise, the title should simply be “Inspector”.
• Disallow the user from minimizing the panel window by disabling the minimize window control.
• Do not use the word "panel" in your UI labels to show inspector. If it would add clarity, use the word "window" instead. "Show Inspector" or "Show Inspector Window" would suffice.

Additional Reading

• Layout Guidelines: Learn how to design layouts for your Inspector Sidebars or Panels that feel right at home on the Mac.
• Sidebar Guidelines: Since we've touched on sidebars, learn how to design standard navigational sidebars for your Mac app and all the considerations you should take.