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.
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.
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:
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.
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.
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.
- For designers
- Guidelines for check boxes
- Guidelines for sliders
- For developers (HTML)
- WinJS.UI.Rating object
- Quickstart: Adding rating controls