Personal tools


From Social Patterns

(Difference between revisions)
Jump to: navigation, search
Line 34: Line 34:
===Related Patterns
===Related Patterns===
* [[Reviews]]
* [[Reviews]]
* [[Vote to Promote]]
* [[Vote to Promote]]
===As Seen On===  
===As Seen On===  

Revision as of 03:58, 17 November 2008



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


[[Image: |Ratings widget]]

Use When

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

Related Patterns

As Seen On

Original Source

Yahoo! Pattern Library