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

Screenshot of a capacity indicator that shows a 10% usage of the available data storage.

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.

Image of a continuous capacity indicator that uses the default green fill to indicate an amount of about two-thirds of the total capacity.

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

Image of a discrete capacity indicator that uses the default green fill to indicate an amount of three-quarters of the total capacity.

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.

Image of a continuous capacity indicator that uses a yellow fill to indicate a warning condition.
Image of a discrete capacity indicator that uses a yellow fill to indicate a warning condition.

Warning level appearance

Image of a continuous capacity indicator that uses a red fill to indicate a critical condition.
Image of a discrete capacity indicator that uses a red fill to indicate a critical condition.

Critical level appearance

Image of a continuous capacity indicator in which the leftmost one-sixth is red, the next three-sixths are yellow, the next sixth is green, and the last sixth is unfilled.
Image of a discrete capacity indicator divided into six sections. The leftmost section is red, the next three sections are yellow, the next section is green, and the last section is unfilled.

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 it makes sense in the context of your app, you can change the fill color when the current value reaches certain levels. For example, a battery level indicator could change from green to yellow at 20% capacity, and from yellow to red at 10% capacity. You can change the fill color of the entire indicator or you can use the tiered state to show a sequence of several colors in one indicator.

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.

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 values 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 songs and podcast episodes. These ratings may be referenced for the purposes of searching, sorting, and creating smart playlists.

Screenshot of a rating indicator with the leftmost three stars  out of five filled in.

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 don't 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 songs and podcast episodes.

Screenshot of a rating indicator in which approximately two-thirds of the leftmost vertical bars are filled in.

For developer guidance, see the level indicator style relevancy.