Personal tools

Ratings

From Social Patterns

Jump to: navigation, search

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

Ratings widget
Rating widget on Yahoo! Local

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!s Platform design team, The Yahoo! Pattern Library