The Rating control lets users rate something by clicking an icon that represents a rating. It can display 3 types of ratings: an average rating, a tentative rating, and the user's rating. Use these guidelines when adding Rating controls to your Windows Store app.
Is this the right control?
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, you should use slider. Using the ratings control could mislead users into thinking that they are giving a new rating to the restaurant.
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.
Do's and don'ts
| Do | 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:
| |
| Don't | 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
Build date: 11/29/2012
