Rating an Object

Best Practice · Last modified July 15, 2009

Label a row of clickable items (often stars) that light up on rollover with invitational text above to invite the user to rate the object (e.g., "Rate It!").

The initial state should be empty. As the mouse cursor moves over the icons, display a text description of the rating at each point (e.g., "Excellent").

The saved rating should be indicated with a change in final color of the items and a text indication that the rating is saved.


Delicious Bookmark this on Delicious

What Problem Does This Solve?

A user wants to quickly leave their opinion on an object, with minimal interruption to any other task flow they are involved in.

When to Use This Pattern

  • 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.

What's the Solution?

  • Show clickable items (most often used are stars) that light up on rollover to suggest 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.

Considerations

  • 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.

Why Use This Pattern?

  • Rating an object provides a lightweight model for user engagement
  • Ratings are often tied with reviews to encourage richer user contributions and activity.

Accessibility

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.