ideas worth stealingDesign Stories: The 5-star rating interface
Continuing what I did in the “Interface Surgery” sections in the book, I’ve decided to start a series of blog posts called “Design Stories”, about the thought process that goes into the design of interactions. I’ll post these whenever I work on something I think would make a good case study.
First up: the 5-star rating interface. This design pattern can be seen everywhere from Amazon to Yahoo! to Yelp, but the individual implementations are often done very differently.
For example, rating widgets are often split into two parts, shown in two different areas of a page. One part is the display version of the 5 stars, the one that tells users the current rating. The other part is the interactive piece, where users choose how they want to rate something, such as a book, CD, or the helpfulness of an article.
The interactive piece can be done very differently from one site to another. Some use text as the rollover for each star, to make it clear what each star means as a rating. Some require that you click a star and hit Save. Some only ask that you click a star. When all you do is click a star, however, there is no feedback, except that the star is now yellow (or some color other than the non-selected white).
So these are the issues that I had to consider as I designed the interaction.
Also in this case, I needed to combine the two elements into one. I needed a way to show the current rating and enable users to select a rating of their own.
To do this, I split the display piece and the interactive piece into two states. I started with a simple display of the 5 stars, coupled with a link to begin the rating interaction.
I thought that when the user clicked the link, the set of stars should go into an editable state. This is indicated by a change in color from yellow to white. Of course, the user also needs a way to save the rating and return to the view-state, so I changed the “Rate this widget” link to Save and Cancel links, which also helps indicate to the user that the widget is now editable.
To start the interaction, the user simply clicks the link, then clicks the star she’d like to use to rate the widget.
At this point, the user can click Save, Cancel, or another star. Let’s assume she chooses to save the rating.
Upon saving the selection, the current rating for the widget is updated and the new rating appears, again in a display-only state. This indicates to the user that the interaction is complete and her rating has been saved.
Later on, we decided to put a little text next to the “Rate this widget” link that showed how many users have rated the widget - something like “(Rated 7 times)”. This not only tells existing users how much stock they can put into the rating (a single rating isn’t a clear sign that something is good or bad), but also tells the user that her rating has been added.
Finally, we added some business logic to the interaction that prevents a single user from rating the same widget multiple times. As in, if she chooses a different rating on a future visit, the average is updated, but the number of reviewers does not change.
The result? A single design element that both displays the current rating and offers a way to save a new rating.
Posted by Robert on November 29th, 2006
12 comments
Nice solution, but it got me thinking about an alternative.
What about starting off with the current ratio in a light yellow.
When the user rolls over a star, stars from the first to the rolled one are colored in a heavy yellow.
The heavy yellow follows the uncertain mouse.
A click fixes the heavy yellow.
Rationale: I’m interested in the collective rating only BEFORE I make my own rating. (Perhaps it’s before I bring up more material, or I know the material and want to vote with the rating so far in mind). After that, I don’t care. If I visit the site again, I’m interested in MY rating. If it’s heavy yellow, I know it’s MY rating.
Advantage: no labels at all, one click. Even if you want to change the rating, that’s just two clicks.
Just bouncing off your helpful mini-study
Matt
I’ve seen ratings widgets like that before, so I definitely understand your instinct.
My thought was that, again, there is no real feedback when simply clicking a star except that the star is now selected. It just doesn’t seem to provide enough closure. So I wanted a way to really show users that the rating had been saved. Also, I wanted to show users that their ratings are having an effect, hence the full-circle nature of the interaction.
On an unrelated point, I love that phrase, “the uncertain mouse”. What a great way to express the little thought bubbles that pop up over people’s heads as they try to satisfice their way through an interaction. It would be a great name for a blog.
“Uncertain mouse”…that’s a bit of accidental poetry…I meant “wandering cursor”…wandering corsair?
I take your point about closure. But do people need that kind of closure after they start rating? Or just at first?
I suppose that’s the perpetual trade-off between caring for unoriented users AND caring for oriented users. One that usually leaves me dissatisfied, frankly. Perhaps I should crack open your book.
But how will user rate 3.5 and how will it be self explanatory?? ;) Something I never liked when I see that the rating shows 3.5 based on average voting, but never allows user to rate in fractions.
I like the explict nature of the labels. Out of curiousity, do you have an example screenshot of the widget in context?
I’m wondering how the text links look up against other elements of the page such as links (e.g. Read more.. or Purchase..) or other content.
For example, Netflix’s implementation allows them to cleanly place the stars, and accompanying description, on differing page layouts without having to put lots of space around the rating widget.
The application I designed this for hasn’t yet been released, so unfortunately, I can’t show full screenshots, but thanks for bringing this up. You’re definitely right - the context of the page and the site as a whole certainly influence the design of interactions like this.
I was with you, right up until the last screenshot (after clicking Save).
Let’s say I’m using this widget and rated it three stars, and clicked Save. If I saw the widget change to four stars, I’d assume that either I’d accidentally clicked the wrong number of stars (”Oops, I meant to give it 3, not 4″) and try again, or else I’d assume that the code was broken (”Dammit, I put in 3 but it’s showing 4″).
Or both, in that order.
The fact that the text changes back to “Rate this widget” after my input tends to reinforce my impression that somehow the code is just ignoring my input (”Rate this widget? But I just did!”)
I think this interface fails the “Mom test.”
Possible solution: While in “my” rating mode, show blue stars; while in “everyone’s” rating mode, show yellow.
Better (IMO) solution: Don’t combine the “everyone” rating with the “my” rating in the first place. They’re two different things. You don’t say, but I wonder: Why did your client want to combine them?
Kathy -
The “(Rated 7 times)” text would change to “(Rated 8 times)”, but you could certainly say something like, “Your rating has been saved” instead of going back to “Rate this widget”. That would be hepful, and is a nice idea. You could also label the widget using something like, “Average rating” to indicate what the display-only state means.
There are always ways to improve designs - these posts are meant as conversation starters, and I’m gald you joined in.
In this case, the My Rating and the Everyone Rating had to be combined into a single display (as I said in the post), but honestly, it was a while ago and I’m fuzzy on the details about why we did it this way. Eventually, we did split it into two pieces. One was the display-only state at the top of the screen and the other was the editable rating widget in a Write A Review section further down the page.
The rating widget is available at http://js-kit.com/ratints
You can customize it by supplying your own pictures.
The rating widget is available at http://js-kit.com/ratings
You can customize it by supplying your own pictures.
P.S. the earlier post had wrong url.
Rather than just an average numerical value, a sparkline could be used. For an average value of three, it might be of value to the user to know that it was five 1’s and five 5’s indicating love it or hate it or 10 3’s indicating consensus. The user’s current rating could be indicated by a different color from the other ratings on the sparkline.
Applying the principle of eliminate unnecessary words, “Your rating has been saved” could be just “Rating saved”.
I really liked the feature that revisiting the page shows the rating I gave in my previous visit.