From Social Patterns
A user wants to quickly leave their opinion on an object, with minimal interruption to any other task flow they are involved in.
- A user wants to leave an opinion quickly.
- Use in combination with reviews for richer experience.
- Use to quickly tap into the existing "community" of a product.
- Ratings are collected together to present an average rating of an object from the collective user set.
- Show clickable items (most often used are stars) that light up on rollover to infer clickability.
- Initial state should be "empty" and show invitational text above to invite the user to rate the object (e.g. Rate It!).
- As the mouse cursor moves over the icons, indicate the level of rating (through a color change) and display a text description of the rating at each point (e.g. Excellent).
- Once the user has clicked the rating (5th star, 3rd star etc.) the rating should be saved and added to the Average Rating which should be displayed separately.
- The saved rating should be indicated with a change in final color of the items and a text indication that the rating is saved.
- An aggregate or average rating should also be displayed.* Users should be able to change their rating later if they change their mind.
- Consideration should be made about the call to action for a rating if a user is not logged in.
- Labels are important because they help the user decide which rating to select and how that compares to the average.
Rating an object provides a lightweight model for user engagement. Ratings are often tied with reviews to encourage richer user contributions and activity.
- Use DHTML and CSS for displaying the rollover states and for instant collection of the rating. In cases where this is not possible, a Save Rating button may be added to confirm the final selection of the rating.
As Seen On
Yahoo!s Platform design team, The Yahoo! Pattern Library