How to Make Easy & Flexible Star Ratings

http://nerds.airbnb.com/quick-tip-making-star-ratings-with-one-image

by Airbnb-Nerds • 15 years ago

129 34 15 years ago

nerds.airbnb.com

This was a great, easy to read and understand tutorial.

mhartl• 15 years ago

This is a great discussion of the mechanics of rendering star ratings in a browser. I'd love to see a companion theory post on how to intelligently compute and rank such ratings. The arithmetic mean is notoriously sensitive to outliers, and the consequences are sometimes severe: I know a resort in Thailand that used to be ranked #1 on TripAdvisor on its island (Koh Phangan), only to fall to #17 after a 1-star review. (The tragedy is that, if you read the review, it's clearly positive—the reviewer evidently thought that 1-star was best. D'oh!) In addition, any sensible ranking should take into account statistical significance, so that (say) a 4.6 ranking consisting of 45 reviews (possibly) gets ranked above a 5-star ranking consisting of one review. How does Airbnb handle these cases, or does it just punt by calculating and sorting the arithmetic mean?

gwillen• 15 years ago

Use the algorithm given here:

http://www.evanmiller.org/how-not-to-sort-by-average-rating....

starwed• 15 years ago

Seems like a site with lots of heavily rated products could do a bit better -- you might be able to use your database of known distributions to inform your prior.

samstokes• 15 years ago

Also the response article at http://masanjin.net/blog/how-to-rank-products-based-on-user-... is interesting.

nkurz• 15 years ago

There's some good discussion of one approach here: http://news.ycombinator.com/item?id=3046785

nazar• 15 years ago

I am super surprised by your comment, because thats exactly the question I asked my friend yesterday. I am trying to implement a ranking system on my website, so I asked my more experienced friend about it and he recommended me one book: Programming Collective Intelligence Building Smart Web 2.0 Applications by Toby Segaran, O'Reilly

http://shop.oreilly.com/product/9780596529321.do

Robin_Message• 15 years ago

I just got that off my shelf, and page 25 says to use the arithmetic mean. I can't see anywhere where it talks about outliers or better averages.

ajtaylor2• 15 years ago

Thanks to the above comments for all the links! I'm about to start on a new project at $work, for which I think those postings will be very useful.

dfischer• 15 years ago

Great use of SASS. I approve!

smackfu• 15 years ago

It's interesting that the year 2000 way to do stars would be to have a full, empty, and half star GIF, and just to display however many stars you need by doing a loop.

So, when this article says "The goal is to avoid having a sprite that looks like this" where the sprite has all the values of stars in a line... why did people switch to doing it that way in the first place? Like the article says, it's a pain to maintain, has lots of pixels, and is not resizable.

funkah• 15 years ago

Well, if you do it that way you can change the whole rating by just changing the class name, after you set up all the background-position rules for all the different rating classes. I guess that's why?

michaeldhopkins2• 15 years ago

With a loop you only need to pass in the rating. Get the modulus and then the floor. Render as many full stars as the floor, a half star if modulus was more than zero, then render an empty star as far as the number of full stars + half stars rendered was less than the number of stars that should be displayed (e.g. 5.)

That's way less work than all that CSS.

kevindication• 15 years ago

It's also only one GET request for the image instead of three.

Aloisius2• 15 years ago

On a side note, if you have 6 different ratings on one page plus an overall rating, should they all be stars and all in the same color?

jwdunne• 15 years ago

I would do it another way. I'd have an on state and off state graphic as a sprite. There'd be two divisions, one laid on top of each other. The bottom layer would be the off state tiled horizontally statically at the width that is the number stars your ratings setup uses by the width of you on-off state graphic. The layer on top would be the on state with a width determined by an online style - CSS accepts percentage as a unit which can be worked out trivially. I find this is far more flexible that setting static widths in the CSS. You only haVe to set one width: the number of stars. Other things can be worked out programmatically and cached if needed.

v01• 15 years ago

One thing I would suggest to all you coders out there... PLEASE place a demo within the post in which you are writing the tutorial.

For example big demo button on CodDrops: http://tympanus.net/codrops/2011/10/12/flexible-slide-to-top...

llgrrl_• 15 years ago

This is the code that should go to the server side for calculating star ratings:

Star Ratings

I’ve been awfully busy programming lately. My Django-based side project is coming along well and I hope to have it ready for use in a few weeks. Please don’t ask more about it, that’s really all I can say for now. Anyways, I came across an interesting little math problem today and was hoping some skilled programmers out there could come up with a more elegant solution than mine.

Problem: Star Ratings

People can rate cheeseburgers on my website with a star rating of 0-5 stars (whole stars only), 5 being mighty tasty and 0 being disgusting. I would like to show the average of everyone’s ratings of a particular cheeseburger to the nearest half star. I have already calculated the average rating as a float (star_sum) and the total number of people that rated the particular cheeseburger (num_raters). The result should be stored as a float in a variable named “stars.”

My Solution (in Python):

  # round to one decimal place and
  # separate into whole and fractional parts
  parts = str(round(star_sum/num_raters, 1)).split('.')
  whole = int(parts[0])
  frac = int(parts[1])

  if frac < 3:
    ___frac = 0
  elif frac > 7:
    ___frac = 0
    ___whole += 1
  else:
    ___frac = 5

  # recombine for a star rating rounded to the half
  stars = float(str(whole)+’.'+str(frac))

Mmmm… In-N-Out Burgers… Please leave a comment if you’ve got a better solution.

teej• 15 years ago

Please don't do that. Here's a one liner:

    round( 2.0 * star_sum / num_raters) / 2.0

Aloisius2• 15 years ago

Can't you just internally multiple everything by 2, average the whole thing, round, then divide by 2 to get half point ratings?

  stars = round(star_sum * 2 / num_raters)/2

jeiting• 15 years ago

Have you tried a recursive solution?

def round_to_half(x): if ( x < 1) { if (x < 3) { return 0; else if (x > 7) { return 1.0; } else { return 0.5 } } else { return round_to_half(x/10); } }

x = star_sum/num_raters dec = round_to_half(x) x = floor(x/10) + dec

This way you look smarter for using recursion.

pothibo• 15 years ago

I liked how you guys present some of the stuff you create. However, I'm not a huge fan of star rating. I know it's in use everywhere but I feel that it's such a flawed rating system that we need to think twice before using star ratings.

I think that Facebook's like is a good concept that can replace stars rating (a like is a like, no negative feedbacks, and you know that you either like something or you didn't).

Star ratings is too complex, I mean, something I rate 4 star is very different than somebody else's 4 star rating.

Maybe this isn't the place to discuss this but I wanted to let the word out ;)

mikehearn• 15 years ago

This is touched on in some of the other posts, so I won't belabor the point, but the issue with only positive feedback is that there isn't a way to identify items that are popular but also controversial.

For example, an Airbnb venue with 5,000 likes would be considered 'better' than one with 500. But add in negative feedback, and consider if the same venue with 5,000 likes also had 4,500 dislikes, while the venue with 500 likes only had 50 dislikes.

Negative feedback helps us discern between if something is 'better' or simply 'popular' -- the latter can be gamed with marketing, while the former is much harder.

ajtaylor2• 15 years ago

That is a great point. At $work, we're about to revamp how we do ratings. The idea was to only consider positive feedback, but maybe we should figure out how to include negative feedback too. But that brings up the question of how to avoid the spammers, scammers and idiots that inevitably popup?

swah2• 15 years ago

I actually like 5 stars: 3 is average, then 4 above average, etc. I just don't like that you can't give 0 stars.

swah2• 15 years ago

"Its very easy but I won't put one of those on this page."

rhdoenges• 15 years ago

Why are the gists in a non-fixed width font?

ricardobeat2• 15 years ago

Pretty nice. It's missing the actual content though (the rating), so it's completely inaccessible to search engines, scrapers, screen readers and the like.

huxley• 15 years ago

A bit disappointed that the ratings don't degrade gracefully to a form with a dropdown menu or radio buttons.

Dylanfm• 15 years ago

The HTML5 meter element lends itself to star ratings perfectly. Using divs with classes seems a bit old-school for today, although the blog post does say how they don't want to use JS for this.

I wrote a Raphael powered polyfill for this http://dylanfm.github.com/jquery.ratemate/. Although it requires Raphael (and JS), at least it's a bit more semantic and has a non-JS fallback in browsers that have native support for the meter element. The plugin also provides a way for controlling star ratings on input type number or range elements. However, this really isn't worth using if you're not including Raphael already (fairly large library). I'm thinking about making a canvas alternative.

How to Make Easy & Flexible Star Ratings

Related Stories