Personal tools


From Social Patterns

(Difference between revisions)
Jump to: navigation, search
(Original Source)
(As Seen On)
Line 41: Line 41:
===As Seen On===  
===As Seen On===  
* [[]]
* []
* [[;_ylt=Asdwv7CAFM8gFRPWAEvas5mGNcIF;_ylu=X3oDMTBtbGZ2dXFpBF9zAzk2NjEzNzY3BHNlYwNzZWFyY2g-?stx=pizza&csz=san+francisco&ulmdefault=Y Yahoo! Local]]
* [;_ylt=Asdwv7CAFM8gFRPWAEvas5mGNcIF;_ylu=X3oDMTBtbGZ2dXFpBF9zAzk2NjEzNzY3BHNlYwNzZWFyY2g-?stx=pizza&csz=san+francisco&ulmdefault=Y Yahoo! Local]
[[;_ylt=Alw3DTez.QyG0JhVKkRIW6imjnUC;_ylu=X3oDMTBubWI1aDE3BF9zAzU3NjkwMzQzBGx0AzQEc2VjA3Ny?clink=dmss//ctx=sc:cdigicamera,c:cdigicamera,mid:59,pid:1992669879,pdid:59,pos:3 Yahoo! Shopping]]
*  [;_ylt=Alw3DTez.QyG0JhVKkRIW6imjnUC;_ylu=X3oDMTBubWI1aDE3BF9zAzU3NjkwMzQzBGx0AzQEc2VjA3Ny?clink=dmss//ctx=sc:cdigicamera,c:cdigicamera,mid:59,pid:1992669879,pdid:59,pos:3 Yahoo! Shopping]
===Original Source===
===Original Source===

Revision as of 04:03, 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