Ratings and Reviews Design: Two Thumbs Up for an Intuitive Layout

by Grace Miller | Ratings and Reviews, User Generated Content

We recently wrote about which questions and prompts to provide to your customers when they write Ratings and Reviews for your ecommerce site. Once you’ve decided what sort of information they should provide, you’ll need to consider how to display it all.

Because this is one of the social commerce products with the most content to sort out, designing an optimized Ratings & Reviews system can seem a bit overwhelming. Your customers likely have a lot to say about your products, and you must thoughtfully organize all their viewpoints, recommendations, pros and cons, and ratings.

Review Layout

Most review content is placed towards the bottom of a product page, below pictures of the item and a description of it. You can either place the reviews in-line, so all customers need to do is scroll down to read, or you can create a separate tab on which customers must click to see the reviews. Example one below shows an example of in-line reviews, while example two shows a tab structure.

Example one: Vionic Shoes’ website just lets users scroll down to see reviews.

Example two: Skis.com’s structure has users click a specific tab to view reviews. Notice in the image that the “Reviews” tab is white while “Overview,” “Specs,” “Q&A,” and “Videos” are grey.

Another point that may be obvious but is worth stating is to make the “Write a Review” button or link very visible. You should make the font bolder or the color darker or brighter than the surrounding text or graphics so customers don’t have to search around to write a review.

Stars and Symbols

Most ratings systems have a visual component – usually stars. Some websites have a themed symbol instead of stars, like coat hangers for an apparel website or tents for a camping supply site. However, most of our clients elect to keep it simple and just use stars. Stars are universally understood as a rating symbol, so using them avoids any possible confusion.

Once you’ve decided on the rating symbol, you’ll want to put it in multiple places. Our recommendation is to place stars underneath each thumbnail on the category pages in addition to placing them on the individual product pages. Search results pages are also a vital place to include this sort of shorthand rating system. Example three shows what this looks like. However, it’s not wise to place stars beneath products on your shopping cart page, because once customers have added a product to their carts you don’t want to encourage them to change their minds.

Review content with stars will display in search engine results, too. Rich snippets with ratings underneath can increase CTR by 10% to 20%.

Example three: Murad, a skincare brand, displays stars underneath product pictures on category and search pages.

Bells and Whistles

In terms of managing and navigating that content, think about:

A voting system to rate the helpfulness of each review. Simply ask readers to vote on whether or not a review was helpful to them. When Amazon.com started asking this one simple question, they generated an additional $2.7 billion! Users can sort reviews by helpfulness, allowing them to quickly get the most relevant and even-handed information. Amazon and Business Insider found that the most controversial reviews tended to get weeded out as the more positive and even-handed reviews rose to the top.

Example four: a thumbs up/down system for rating the helpfulness of reviews.

“Verified Buyer” badges or tags next to the usernames of reviewers who bought the product in question. There are multiple ways to track customers from purchase to review. Notifying prospective customers that these reviewers actually purchased and used your product adds authenticity and trust to the reviews and to your brand.

Example five: a “Verified Buyer” tag.

A search functionality within the reviews. Especially if your website has a high volume of reviews, you’ll want to make it easier for customers to find reviews that address their specific concerns.

Example six: a search bar specifically for reviews.

A category, filter, or “tag” feature. In addition to or in place of a search tool, you can allow readers to view reviews by contents, rating, or reviewer profile. This way others will easily and quickly know if a review has information about, for example, sizing, quality, price, or customer service. Some products will have reviews that vary by the reviewers’ demographics or other characteristics, so you should consider allowing filters for those as well.

Example seven: a filter option for sorting reviews.

An aggregate overview of pros and cons, so users can tell which positive and negative attributes are generally agreed upon.

Example eight: an aggregate list of pros and cons for a camera.

Ratings breakdowns. An overview that shows how many five, four, three, two, and one star reviews there are. This helps consumers easily understand the aggregate opinion of your past customers.

Example nine: a chart showing the distribution of ratings.

A sorting function that lets readers view reviews in order of rating, date, helpfulness, and other factors.

Example ten: various ways to sort reviews.

Remember, as with the content, don’t over-complicate navigation and design to the point of overwhelming your customers. When in doubt, keep it simple.

Once you’ve decided on these design elements, layout, and form options you’ll need to consider augmenting your Ratings and Reviews with other social commerce components, like Sharing and Referrals, Customer Loyalty and Visual Commerce. Then you’ll be ready to start soliciting your customers for reviews. Stay tuned to hear our advice about this next crucial step!