Star Ratings

Star ratings give users a visual representation of their peers' reviews of a product.

Also known as: Reviews

Example

See the Pen Star Ratings by SHC-FED (@SHC-FED) on CodePen.0

Design Specs

  1. Padding above and below the star ratings line is 14px. Padding between the star ratings icons and the reviews number is 10px.
  2. The star icon comes from the Sears Icon font library and are #005ccc, size 16px. The reviews number is Open Sans Regular, 13px and #666666 on Product Listing Pages. Review numbers are not shown on Product Detail Pages.
  3. If there are no reviews, no star ratings should be used.
Not Shown:
  • There is no on-click behavior for star ratings on product cards.
  • For display purposes, 16px is used for star ratings because the Icon Font renders the stars as 15px. This would be for top of PDP on .com only. Everywhere else on .com, 14px star ratings are used because they render at 13px. For mobile display purposes, 15px or 13px star ratings are used to have it match the 14px and 12 px standard sizing.


Note: Design specs are for reference only. Developers should implement patterns using the Enterprise Framework whenever possible - see the Example section on this page.

Production Examples

  • Sears
  • Kmart

Mobile

Star Ratings as seen on m.Sears PDP.

Star Ratings as seen on m.Sears PLP.

Desktop/Tablet

Star Ratings as seen on Sears PLP.

Star Ratings as seen on Sears ratings and reviews section, PDP.

Mobile

Star Ratings as seen on m.Kmart PDP.

Star Ratings as seen on m.Kmart PLP.

Desktop/Tablet

Star Ratings as seen on Kmart PLP.

Star Ratings as seen on Kmart ratings and reviews section, PDP.

When Do I Use This?

Star ratings are used best when displaying multiple products on a page (for instance, search results) as a means of comparison between products, or on individual pages so that users can see what their peers thought of a product.

Usage Guidelines

1. Unrated Items

When no ratings are available don't show the star ratings module. When showing "empty stars" users can be confused about the meaning of the stars. Users value stars as a comparison tool on product listing pages, and having empty stars can have a negative connotation.

Leave the area blank (preserve the spacing) for projects that haven't been rated yet.

Don't put empty stars, or text that says the product hasn't been rated.

ADA Compliance

Icons such as star ratings need to be simple, and they need to be easily understood. Our star ratings icons are well designed, easy-to-understand, and used consistently across platforms to ensure ADA compliance. In many cases, alt text may be necessary in addition to icons to assist with comprehension for visually disabled users. As with text, color must not be used as the sole means of conveying meaning or content.

Useful Links:

Rationale

SHC design rationale:
Qualitative research confirmed:

  • Users value stars as a comparison tool on product listing pages.
  • The prevous no ratings behavior to display empty stars was often a point of confusion, and led shoppers to ask "Why hasn't anyone rated this product? is it bad?"

Competitive analysis - All used a five star rating.
Quantitative A/B test results drove final design. Original testing on WCS product cards showed a smaller winner (than what is on Angular product cards); when we tried to test it back down, that size did not have a positive impact. (see below for full test results)
Colors are all ADA color contrast compliant: star color fill and outline for empty (or partially empty) stars follows link blue. Star size is 1px larger than primary text size to make it visually appear the same. Review tally allows the user to know the "weight" of the rating/score - it aligns to secondary font size. Review tally color: on PLP is grey because you can’t target stars directly anymore (whole card interaction). When a user could click the stars to jump directly to reviews, only 1% did...so, no need for link blue "(XX)" tally; on PDP is blue because it is targetable.

Development - Use of icon-font allows easy maintenance and syndication across the site

Research

Site test: Sears - Product Star Ratings - Consistent Presentation (TID198)

Test Scope: Product Card test on Product Listing Page. Results: The winner of the test is the small blue stars, displaying no star when there is no ratings associated with a product.

view full study

Kmart - PLP Star Ratings Color and Size (TID371)

Repeat of previous test, on the new PLP product cards with a smaller size differential (16px v 14px), testing only size & color. All new variants were flat or underperformed control. Analyst calls out negative impact to Bottom of funnel in blue variant, which may indicate inconsistency from PLP to PDP had impact. Recommend staying with control - red stars 16px.

view full study

State of Experience 2014

On mobile (prior to alignment to standard) - "Review Stars: Contrast between filled and empty stars is not high enough. Hard to determine the rating. In addition, on a page of all unrated items, users aren’t sure if the items are unrated or all have 5 stars because the gray is fairly saturated." See Page 44

view full study

Product Cards - Card Sort Study

General assumptions about what elements should be standard in a product card is confirmed by this study (i.e. Item Description, Item Image, & Item Price). Of the 13 elements, shoppers included an average of 9 elements in their ideal product cards. Certain elements were less preferred relative to the other elements. Ratings were ranked #7

view full study

Post a New Comment

Your feedback will help us improve this page. If you have a comment about the content of this page, use the form below, and the Patterns Team will get back to you within a business day.

For general questions or assistance, email the Patterns Team directly.