Personal tools

Ratings

From Social Patterns

(Difference between revisions)
Jump to: navigation, search
(As Seen On)
Line 44: Line 44:
* [http://local.yahoo.com/results;_ylt=Asdwv7CAFM8gFRPWAEvas5mGNcIF;_ylu=X3oDMTBtbGZ2dXFpBF9zAzk2NjEzNzY3BHNlYwNzZWFyY2g-?stx=pizza&csz=san+francisco&ulmdefault=Y Yahoo! Local]
* [http://local.yahoo.com/results;_ylt=Asdwv7CAFM8gFRPWAEvas5mGNcIF;_ylu=X3oDMTBtbGZ2dXFpBF9zAzk2NjEzNzY3BHNlYwNzZWFyY2g-?stx=pizza&csz=san+francisco&ulmdefault=Y Yahoo! Local]
*  [http://shopping.yahoo.com/p:Canon%20EOS%205D%20Digital%20Camera:1992669879;_ylt=Alw3DTez.QyG0JhVKkRIW6imjnUC;_ylu=X3oDMTBubWI1aDE3BF9zAzU3NjkwMzQzBGx0AzQEc2VjA3Ny?clink=dmss//ctx=sc:cdigicamera,c:cdigicamera,mid:59,pid:1992669879,pdid:59,pos:3 Yahoo! Shopping]
*  [http://shopping.yahoo.com/p:Canon%20EOS%205D%20Digital%20Camera:1992669879;_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

Contents

Problem

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


Example

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


Solution

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


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.


Rationale

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.


Related Patterns


As Seen On


Original Source

Yahoo! Pattern Library