A level indicator displays rich visual information related to a specific numerical value within a range.
Avoid using a level indicator to perform the function of a slider. Although some styles support input by clicking and dragging to select a value, people don’t usually expect to be able to interact with a level indicator, and their appearance reflects this. For related guidance, see Sliders.
There are three different level indicator styles, each with a different appearance, for communicating capacity, rating, and relevance.
A capacity indicator illustrates the current level in relation to a finite capacity. The system often uses capacity indicators to communicate 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.
Because capacity indicators provide a clear picture of a current state, they’re especially useful in dialogs and settings windows that people tend to view briefly.
Change the fill color to inform people about significant values.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, you could change a battery level indicator 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 useful.
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. The system may reference these ratings 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 don't expand or shrink to fit the control.
Make it easy to change rankings. When presenting a list of ranked items, let people adjust the rank of individual items inline without navigating to a separate editing screen.
If you replace the star with a custom symbol, make sure that its purpose is clear. The star is a very recognizable ranking symbol. People don’t commonly associate other symbols with a rating scale.
For related guidance, see Ratings and reviews.
A relevance indicator communicates relevancy using a shaded horizontal bar. It often appears in a list of search results for reference when sorting and comparing multiple items.
No additional considerations for macOS. Not supported in iOS, iPadOS, tvOS, or watchOS.