Rating

Tagged as: , , ,
 

The Design Need:

Rating systems are commonly used to allow users’ to leave their opinion on a real product or a virtual object with a minimal interruption to any other task flow they are involved in.

Design Examples:

Design Solution:

Ratings done by an editor and/or the users, there are generally 2 types of ratings that may appear: a rating by an editor only (which cannot be modified by users) or one by the audience. If rating can be done by users themselves allow them to see the number of votes that have been cast and the average rating in order to give some sense of reliability. This helps to promote high-quality ‘content’, and thus improves the overall user experience of the application. In addition ‘rate it’-call to action (CTA) can be present to show users that they can share their thoughts about this particular object. Rating systems:

  • The most common rating system is a set of clickable icons (most often used are stars) because this allows users to easily rate and promote their preferred content.
  • Sometimes a classic pull-down list is used to allow direct user-interaction on a site.
  • In any case, avoid any textual input to enter the vote value since users have no idea of the scale used.

Rating in practice (in this case stars but the same ‘rules’ are applicable for any similar rating system):

  • The default items must be empty and additional text is shown above the object or on the right to invite the user to rate it.
  • Suggest clickability as a user moves over the icons with the mouse cursor (e.g. through a color change) and explain the scale with a text description (tooltip) of the rating at each point (e.g. 5 stars means excellent on 5 star scale). The additional text can be replaced by this ‘feedback’ message. These labels are important because they help the user decide which rating to select and how that compares to the average. The user has to be able to set his rating by pressing the left/right keys of the navigation pad (for non-touch interfaces) after selecting the icons or by directly touching the icon relative to his rating (for touch interfaces e.g. iPhone).
  • Applying, confirming and storing the rating:
    • Once the user has done a simple click on the star (e.g. for an average product clicking on the 3rd star) the rating should be saved and added to the average rating which should be displayed separately.
    • Sometimes a confirmation step is required (e.g. when a pull-down list is used or when a vote can be reviewed, it is needed to confirm this action by clicking on a confirmation button). In that case this must be clearly indicated to the user.
    • When no confirm step is done it is important to provide visual feedback that the vote has been cast.
    • The saved rating should be indicated with a change in final colour 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 at any time if they change their mind.

By any user or registered users only?

  • A user wants to leave an opinion quickly. Rating an object provides a lightweight model for this kind of user engagement but consideration should be made about the trustworthiness and value of the rating if a user is not logged in.
  • Very often it is required to login because this prevents multiple votes from one person. When ratings are combined with reviews for richer experience, rating is simply an element.
  • When users are logged in on your site you must show them their own ratings on the object they have voted already.
  • On mobile applications, when typing isn’t that easy as on a computer, it is not a good idea to force users to enter a review. Make in that case the submission of a textual review optional or combine the rating system with a small drop-down box for those users who want to explain their given score, but do not want to type a long comment.

Placement on the site?

  • If you want that a user can rate an object he knows something about, it is best to present a rating next to the product and the option to rate it.
  • On a product page, a rating should be placed just below or on the right of to the main product name or image.

The rating functionality is usually implemented within the detail view of a single content item (e.g. if looking for applications, restaurants, etc.), or in a separate tab or view linked from the item’s detail view. When implementing the rating in a separate view, the main details of the item to rate (which are the average rating and a CTA to rate) have to be clearly indicated in this other view.

When to use:

Ratings may be applicable on any site that has a social aspect on it allowing users to discuss, use or buy particular objects on it. Therefore you mostly see them on e-commerce sites selling consumer goods such as cameras, songs, hotels, etc. but also on community-based applications or sites that offer more virtual things such as news items, videos, pictures, tutorials, articles (e.g. blogs) and so on.

Why use this solution (rationale):

Ratings are useful where users want to be allowed to vote content and/or present an average rating of an object of collected together. Since this technique allows users to share their opinion with other users quickly, it creates a social effect that involves users and promotes application usage .

More info elsewhere:

• Categorized as Design Patterns