From Social Patterns

Contents 1 Problem 2 Example 3 Use When 4 Solution 4.1 Considerations 5 Rationale 6 Accessibility 7 Related Patterns 8 As Seen On 9 Original Source

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

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

• Reviews
• Vote to Promote

As Seen On

• Amazon.com
• Yahoo! Local
• Yahoo! Shopping

Original Source

Yahoo!s Platform design team, The Yahoo! Pattern Library