Rating

How to use ratings

Ratings can be used to quickly inform people about the overall feedback or quality of a product through reviews. This is a non-interactive component and is intended to just display ratings rather than accept user inputs.

When using ratings:

• Always accompany the rating with a visible label like a link, some supporting text or the quantity of reviews
• Make sure the accessible name associated with the rating component makes sense in the specific content you use it in
• Star ratings should always have 5 as the maximum and this number shouldn't be increased or decreased

Styles of rating

Ratings come in two sizes depending on the context they're being used.

Small rating

Use the smaller size of the component when the rating needs to be concise, such as on a product listing page with multiple uses of the component.

Large rating

Use the larger size of the component when there is the space to go into more detail, such as on a product detail page.

Types of rating

Ratings come in two different types, as a star rating or a bar rating.

Star rating

Use the star rating to quickly show the average rating of a product overall, across a wide range of criteria.

Bar rating

Use the bar rating to quickly show the average rating of a product on a specific type of criteria, such as the sound quality of a TV.

Rating schemes

The star rating comes in two different schemes for different contexts.

Monochrome

There is a monochrome version of the star rating, which is encouraged as it has higher colour contrast and is easier for users to read and distinguish.

Content guidelines

Ratings must always be accompanied by a visible label. This can be:

• The quantity of reviews or the number of the average rating
• Supporting text that gives further information about the rating of that product
• A link that takes the user to more information

If using a link, include a verb to give a strong sense of action and make sure the link label makes it clear what content the link goes to.

Was this page helpful?