Online shops have the advantage of giving you access to all types of products or services, without the restrictions of your location or local shop’s assortment. The downside of online shopping can be that you drown in the vastness of available choices. What you need so as to make confident decisions is an opinion you can rely on. That said, remember that opinions are like certain anatomical parts—everybody tends to have one; it’s no joke, however, that oceans of opinions flood websites, and finding anything meaningful can be like looking for sunken treasure. Naturally, you need some shortcut. Learn how to use the starred reviews design pattern to tackle this problem and create quick peace of mind for your users.
The Design Problem
When viewing products online, users would benefit from seeing the experiences of those who have previously bought and used these items, products, or services. However, they might not want to read through long reviews; so, what they need is a quick overview of the users’ experiences. For the sake of illustration, think of two products—for example, two higher-end (but not the two most expensive) juicing machines. One is a new release and the other an item that’s been on the market for a year or so. Now, imagine you’re after a juicer that packs the maximum punch in terms of benefits (e.g., it is durable and passes all the nutrients on from the fruits and vegetables you process) and options (e.g., you can set it to regular-, pulp- and smoothie-grade and collect the fiber in the exhaust bucket for sprinkling on pasta as a garnish), but one which doesn’t cost an arm, a leg and a torso. Looking on the new machine’s page on the merchant site, you want to find its strengths and any weaknesses while you’ve still got the same cup of coffee hot on the desk by your hand. The trouble is, although that juicer has only just been released, you might already have, say, six reviews to go through—yes, only six, but representing six very different writing styles that may or may not be helpful in giving you each customer’s overall opinion. You may find some pearls of wisdom in these... or you may encounter a torturously terse ‘write-up’ such as this: “It’s quite good.” As for the juicer that’s been around for a while, you would likely have to brace yourself to wade through (potentially) hundreds of reviews—some of which may be of questionable worth (e.g., “Yeah; does job.”) and some that may be the length of a short story. With the best will in the world, even a hardcore juicing enthusiast may lack the writing skills or insight to convey the reason as to why you should buy that item. Just because he thinks the machine’s great for helping him make cider and use the solid waste in sculptures and miniature models of cities, it doesn’t mean what he’s written might be quite the inspiration you’re looking for. In this regard, words can act like piles of rocks dumped on a highway—but what we all want is a clear road ahead, one that’s clearly signposted, too.
The Design Solution
People need a rating system to help them make an informed decision when searching for products or services and to feel safe and confident when following through with a purchase. The starred reviews design pattern provides this rating system in a visual way, by showing how many of the available stars other customers have awarded to the product or service on average. Providing this information in a visual way helps users to compare items very quickly and skim through the collection of available items without having to dive deeply into the review texts. To add to the comprehensibility of the starred reviews, the design pattern also includes an indication of the number of reviews so far used in coming up with the average rating.
Author/Copyright holder: TripAdvisor. Copyright terms and license: Fair Use.
You can find starred reviews on most websites that provide lists of products or services that can be purchased. The TripAdvisor web page shown here allows the user to filter search results based on the number of stars they receive on average. In the descriptions of the hotels on this particular page, the circles are used to give an average of the positive reviews from users. Both provide a quick overview of the perceived quality of the hotel by other users.
Why Choose a Starred Review Design Pattern?
Starred reviews provide a highly visual and instantly digestible way of conveying how previous users rate a product or service. A starred review rating system allows people to leave quick reviews to show how they feel about a product or service. Also, being prepared to show users what others have made of things you have for sale by providing a transparent review system increases the perceived trustworthiness of your website.
Best Practice: How to Implement Starred Reviews
First, determine the system. Most designs tend to use five-star ratings, as opposed to ten. A five-star system is usually sufficient to convey the overall buyer experience and conserves precious space on the page.
As star ratings represent the most instant means of conveying the average buyer experience, you should place them in the most prominent position within the region reserved for reviews. Typically, this will be just above the review (if you also allow users to leave more detailed reviews).
Clearly distinguish the stars from the rest of the display so the user's eye is instantly drawn to this informative yet concise review system.
Include a number average next to the stars to help the user immediately determine the overall score awarded from all reviewers. Also, show how many reviews are available as an indication of the trustworthiness of the overall score. If a product is rated with a one-star average, it is more likely to be a bad purchase when 88 users left a review than when one user did.
Author/Copyright holder: Google. Copyright terms and license: Fair Use.
When searching for a restaurant in Google, the search results automatically include starred reviews. The reviews are based on a five-star scale, which is the most common system. It is sufficient to convey customer experience without taking too much space on the screen.
To help you get started implementing starred reviews, you can download and print our “Starred Reviews” template:
Potential Problems with Starred Reviews
If the star rating system is arranged according to where the user looks first and the superficial aspects of the design support instant extraction of the star score, this design pattern should not cause problems for your users. However, ensure that the arrangement of stars does not obstruct the user when attempting to access and read the more detailed reviews; they should be visible as and when the user wants to see them, but they should not dominate the user interface.
“I am required to award stars to movies I review. This time, I refuse to do it. The star rating system is unsuited to this film. Is the movie good? Is it bad? Does it matter? It is what it is and occupies a world where the stars don’t shine.”
—Roger Ebert, Eminent American film critic
Starred reviews are a time-tested-and-proven way of seeing how others rank and rate goods, services, and virtually anything else that humans can cast judgment on. The universal standard is that five golden (or, at least, darker-than-white) stars means ‘the best’ while only one means ‘the worst’, and that a star will be partially filled if the average is not a whole number (so, 3.5 stars, or 70%, means the fourth star from the left is half-filled). Indeed, it’s not totally foolproof; on some sites such as Amazon, we can find cases where reviewers make one of two mistakes with this system—1) they review the wrong aspect of their experience (e.g., for a one-star review: “I got the wrong DVD delivered – so not impressed!”); or 2) they inadvertently (perhaps even drunkenly) select one star to mean they absolutely love what they bought. One safeguard against the latter case is the convention that—in line with the traditional star rating system for hotels—users should never be able to leave a no-star review (after all, five stars left blank might well still mean five stars to some mindsets!). A third peril is sabotage, where a person has an axe to grind with a company or a sick sense of ‘fun’. Luckily, real users tend not to do this; at any rate, companies like Amazon show if a reviewer is a real customer by indicating the review is based on a verified purchase.
Author/Copyright holder: IMDb. Copyright terms and license: Fair Use.
The IMDb web page focuses on the reviews of movies, but does not use the starred reviews design pattern to its full potential. Rather than showing the rating scale (one to ten) in a visual way, they use a numerical grade combined with a single star. This way, the strong visual overview is not achieved.
The Take Away
Starred reviews are the convention designers commonly use to allow previous users to rate a product or service. It is a design pattern that you can easily implement. All you need to do is determine the rating system, place the star ratings appropriately, and add numbers to show how many people have contributed to the average rating. Above all, a well-designed starred review system should afford at-a-glance guidance that considers the full scope of the context, including an instantly recognizable average. Keep in mind that the strength of this pattern lies in its speed, namely the quick visual overview a user will achieve, and you will be able to add to a positive user experience.
References & Where to Learn More
Jenifer Tidwell, Designing Interfaces: Patterns for Effective Interaction Design, 2010
Martijn van Welie, Pattern Library, 2008
Hero Image: Author/Copyright holder: Pexels. Copyright terms and license: CC0.
