Sparkline Ratings

How do you make 0.8 of a star?

There isn’t an obvious solution.

Do you shade a section of the star to reflect 0.8?

Do you show a smaller star to represent the value?

Or do you not show a full star and list the number instead?

The use of stars for ratings is long established and works brilliantly for single items (i.e. showing how good a movie was) but for showing accumulative values is where it starts to break.  When introducing more refined ratings, the review becomes more informative and comprehensive for the user, but the star ratings doesn’t accurately reflective the nuances of this extra information.

Ratings example

Example: Best Buy trying to offer more greater product insights, but something seems off with the final rating compared to the breakdown.


A possible concept for a solution to this would be to use the dots to rate for refined ratings, replace starts with sparklines and combine with inline commenting.  All elements could be laid out within a grid to create a compact and new sparkline rating/commenting solution.

Using the same review in the example (mixed with a few others from the same site) below is some flat wireframe concepts focusing on the display of ratings showing of how this idea could function.


Using a 3 column layout (for this post’s width) titles and comments are displayed along with the rating breakdown presented as a sparkline with its overal rating figure.  Users can use the inline comment panel to submit comments, or scroll for more reviews.

When users interact with the sparkline the ratings figure is updated to display the rating for that feature about the product.  The number of ratings could be variable allowing for different features to be rated across different products.

The use of the sparkline bridges the disconnect between rating features and using stars for overal rating.  It might not have the ambiguity of the star rating, but across the grid can compare the feature ratings in more detail.

A different layout, but using the concept.  Using a stream to present the same information as the grid, with the same interaction, but allowing for greater comparison across reviews by laying them out below each other.

These concepts would still require refinement, testing etc, they are an attempt at a new way to approach ratings and commenting on the web.

Any thoughts welcome.