Guidelines for the rating control

Applies to Windows and Windows Phone

A sample of what a standard rating control looks like

Description

The rating control lets users rate something by clicking an icon that represents a rating. It can display three types of ratings: an average rating, a tentative rating, and the user's rating.

Rating controls displaying average, tentative, and user ratings

Note  The rating control is available only in HTML. There is no XAML rating control.

Example

A screenshot illustrating the standard rating control

Is this the right control?

Use the rating control to show the degree to which users like, appreciate, or are satisfied with an item or service. For example, use the rating control to let users rate a movie. Don't use it for other types of data that have a continuous range, such as screen brightness. (Use a slider for that).

Don't use the rating control as a filter control. For example, if you want to let users filter search results to show restaurants with five stars, don't implement the filter with a rating control. Using the ratings control could mislead users into thinking that they are giving a new rating to the restaurant. You could use a drop-down list instead.

Don't use a one-star rating control as a like/dislike control. You should use a check box instead. The rating control is not designed for a binary rating, for example, tapping on the control doesn't toggle the star on and off. For an example of how to use a check box as a like/dislike control in Windows Store apps using JavaScript, see the Common HTML controls and everyday widgets sample.

Dos and don'ts

  • Use tooltips to give users more context. You can customize the tooltip to show more meaningful words for each star, like "excellent, "very good," or "not bad," as shown here:

    A rating with a custom tooltip.

  • Disable the rating control when you want to prevent the user from adding or modifying the rating. A disabled rating control continues to display the rating (if one is set), but doesn't allow the user to add or modify it. Suppose you want to restrict ratings to logged-in users. You can disable the rating control, and when users tap the control, you can send them to a log-in page.

    If the control cannot be enabled (it is read-only for the life of the app), make it smaller than other rating controls by setting the class attribute of the control host element to "win-small". Making the control smaller helps distinguish it from the other controls and also discourages interaction.

    A disabled Rating and a permanently disabled Rating.

  • Show the average rating and user rating at the same time. After the user provides a rating, the rating control displays the user's rating instead of the average rating. Whenever it's meaningful to your users, show them the average user rating in addition to their rating. Here are two ways you can display average rating:

    • Display the average in an accompanying text string (such as "average: 3.5").
    • Use two rating controls together, one to show the user rating, and one that shows the average rating and doesn't allow user input.

    Displaying the user rating and the average rating

  • Don't change the default number of stars (the max rating) unless you must. By default, the rating control has 5 stars, with 1 being the lowest or worst rating and 5 being the highest or best. If your app follows this convention, it will be easy for users to interpret what the rating means.

  • Don't disable the "Clear your rating" feature unless you must prevent users from deleting their ratings.

Related topics

For designers
Guidelines for check boxes
Guidelines for sliders
For developers (HTML)
WinJS.UI.Rating object
Quickstart: Adding rating controls

 

 

Show:
© 2014 Microsoft