Level Indicators

A level indicator graphically represents of a specific value within a range of numeric values. It’s similar to a slider (see Sliders) in purpose, but more visual and doesn’t contain a distinct control for selecting a value—clicking and dragging across the level indicator itself to select a value is supported, however. A level indicator can also include tick marks, making it easy for the user to pinpoint a specific value in the range. There are three different level indicator styles, each with a different appearance, for communicating capacity, rating level, and relevance.

Use a level indicator in a view, not a window frame. Level indicators aren’t intended for use within portions of window frames, such as in toolbars and status bars.

For developer guidance, see NSLevelIndicator.

Capacity Indicators

A capacity indicator illustrates the current level in relation to a finite capacity. Capacity indicators are often used when communicating factors like disk and battery usage. Mail, for example, uses a capacity indicator to show the percentage of data used in relation to an email account’s quota.

There are two styles of capacity indicator.

Continuous. A horizontal translucent track that fills with a colored bar to indicate the current value. Tick marks are often displayed to provide context.

Discrete. A horizontal row of separate, equally sized, rectangular segments. The number of segments matches the total capacity, and the segments fill completely—never partially—with color to indicate the current value.

Because capacity indicators provide a clear, easily understood picture of a current state, they’re especially useful in dialogs and preferences windows that users tend to view briefly.

Warning level appearance

Critical level appearance

Tiered level appearance

Change the fill color to alert the user to values of significance. The default fill color for both capacity indicator styles is green. If relevant in the context of your app, the fill color can be changed when the current value reaches certain levels. Yellow can be used to indicate a warning level, and red to indicate a critical level. For example, a battery level indicator could change from green to yellow at 20% capacity, and from yellow to red at 10% capacity. A tiered state is also supported, which shows multiple colors stacked in sequence.

Consider using the continuous style for large ranges. A large value range can make the segments of a discrete capacity indicator too small to be usable.

In general, only use tick marks with the continuous style. The quantity and width of the segments provided by the discrete style already provide context, making tick marks redundant and potentially confusing.

If you use tick marks, label at least the first and last tick marks. Even if you don’t label any other tick marks, labeling the minimum and maximum provides context.

For developer guidance, see the level indicator styles continuousCapacity and discreteCapacity.

Rating Indicators

A rating indicator uses a series of horizontally arranged graphical symbols to communicate a ranking level. The default symbol is a star. In iTunes, for example, you can assign star ratings to individual music and podcast tracks. These ratings may be referenced for the purposes of searching, sorting, and creating smart playlists.

A rating indicator doesn’t display partial symbols—its value is rounded in order to display complete symbols only. Within a rating indicator, symbols are always the same distance apart and do not expand or shrink to fit the control.

Facilitate efficient ranking adjustments. When presenting a list of ranked items, let the user adjust the rank of individual items inline without the need to navigate to a separate editing screen.

If you must replace the star with a custom symbol, ensure that its purpose is clear. The star is a very recognizable ranking symbol. Other symbols are not as easily associated with a rating scale.

For developer guidance, see the level indicator style rating.

Relevance Indicators

A relevance indicator communicates relevancy using a series of vertical bars. It often appears in a list of search results for reference when sorting and comparing multiple items. iTunes uses relevance indicators to denote the popularity of music and podcasts.

For developer guidance, see the level indicator style relevancy.