Rating an Object Pattern

By YUI TeamFebruary 13th, 2006

Problem Summary

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

Rating a restaurant on Yahoo! Local

One excellent design principle to follow is to allow the user to leave a light footprint. This means encouraging light-weight actions for engagement by providing invitations. Instead of the user having to go through several steps to rate a movie or a news article, invite them to simply click to rate. The Rating an Object pattern is an excellent example of this principle.

The pattern can be found at: Rating an Object.


  1. Any code samples? Or is this just for fun.

  2. Our intent is to populate every pattern possible with either links to underlying code that can create the pattern or to example code that shows how to go about implementing the pattern.

    It will take us a little time to catch up in this regard. We’ll try not to let you wait too long.

    Also, I am curious about providing code examples collated from the best places on the net (not just for our libraries). Interested in that?

  3. Good stuff, can’t wait to see the code! Thanks to Yahoo for encouraging openness on the cutting edge of web-apps.

  4. Justin Ashworth said:
    February 14, 2006 at 8:12 pm

    I would love to see code samples. Yahoo is doing a wonderful thing by opening up their APIs. This is truly a step in the right direction.

  5. I’ll definately be checking back soon to see some code, keep up the good work!

  6. I would love to see some code for this. To answer Bill’s question, I would be most interest in seeing code using yahoo’s api, but best examples around the net would also be nice.

  7. Code samples would indeed be interesting. But something more interesting imo would be to actually use the yahoo’s api at it’s full capability on this blog !

    Nobody can rate up or down this post or some comments.

    What a shame !!!

  8. We are still anxiously awaiting code…

  9. Anyone mention code?

  10. From where I can get the php source file to implement the rate this article in my website?

  11. Dotcompals!
    Let me repeat again for you. Here is the php and js sample.


    It’s very simple to apply at your own site.

  12. Marcus Engene said:
    July 5, 2006 at 12:43 am

    I wanted to save place, using the same stars for the user to select the grade. This was very easy with negative margin. It’s basically three divs with the following styles:

    z-index: 1; width: 90px; height: 18px; background-image: url(/v4icons/star_white18x18.gif); background-repeat: repeat-x;

    style=”z-index: 2; margin: -18px 0px; width: ‘ . $width . ‘px; height: 18px; background-image: url(/v4icons/star_red18x18.gif); background-repeat: repeat-x;

    style=”z-index: 3; margin: -18px 0px; width: 0px; height: 18px; background-image: url(/v4icons/star_yellow18x18.gif); background-repeat: repeat-x;

    Red is users grade. One star is 18px wide, a grade of 2.3 would require width of red stars div to be round(2.3*18)

    Callbacks set width of the yellow stars when user mouseovers etc.
    documents.getElementById(“idOfYellow”).style.width = stars_selected_times_18 + “px”;

    Obviously, the divs do best in a left aligned environment ;-)

  13. I looked around for some code of this and found that the main artcile about the rating pattern:

    Yahoo! ratings pattern page

    it has links on it for examples and this was the best one:

    Yahoo Tech

  14. I’d like to suggest an improvement. In the example animation, I think it’s confusing that a three-star review is called ‘Average’ (as opposed to Bad, or Excellent), but the same word is used to show the ‘Average Rating’ – so at a glance you might think that the item had been rated Average, rather than the average review rating it as good.

    You could cure this really simply by making a three-star review ‘Okay’ or something similar. (I’d change this rather than the other as there are more options.)