Discover how you can use HTML + CSS in your patterns.

Ratings

Also known as: Rating an Object, Star Rating

Tags: contextual tools, feedback, social

Rating is an easy way for users to voice their opinion about a certain object. These objects can be physical products, services, or virtual items such as images, videos and articles.

Users are invited to rate an object by showing a label (e.g., “Rate It!”) over clickable items (often stars) that light up when hovered over. The initial state should be empty.

When the mouse cursor moves over these items, a tooltip will describe the rating at each point (e.g., “Good”). This will help users to give more precise ratings.

When the rating is saved it should be indicated by text describing the final rating and preferably by changing the color of the items used for the rating.

Rate It All is a service where consumers can review and rate almost anything. In Rate It All a tool tip helps to describe different ratings. When a rating is selected it will be shown on the right side. After selection a new rating can be selected and the stars will be highlighted accordingly.
Source: http://www.rateitall.com/

Rate It All is a service where consumers can review and rate almost anything. In Rate It All a tool tip helps to describe different ratings. When a rating is selected it will be shown on the right side. After selection a new rating can be selected and the stars will be highlighted accordingly.

What problem does the pattern solve?

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

When to use it?

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

How to use it?

  • 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 to use it?

  • Rating an object is an easy way to create user engagement because it’s fast and effortless for the user.
  • Ratings are a good way to generate user created content which is important for community building.

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.

Sources

This pattern is based on the “Rating an Object” pattern from Yahoo! Design Pattern Library.

+ Add

Useful linksUseful links icon

+ Add

Code snippetsCode snippets icon

+ Add

Example Images (3 examples)

Comments

  • ankushkumar July 21, 2011 10:04

    very nice info about star rating usability...