What Problem Does This Solve?

A product or website needs to present ratings and reviews with a variety of informational elements.

When to Use This Pattern

• Use the architecture guidelines to help group related information and diffuse user confusion.
• Use to enable scanning and quick consumption of the rating and relevance to a user.

What's the Solution?

The elements inside a review should be grouped according to:

• Target Elements (T1-T5)
• Review Elements (R1-R9)
• Form Elements (F1-F3)

Target Elements (T1-T5)

This group displays the Target's information.

• T1 Target Name (link) Name of Target that links to the detailed target page.
• T2 Target Attribute List
  A list of Target's brief description.
• T3 Target Image
  A Target's picture with width of between 40-90px (standard: 70px) and a proportionate height.
• T4 Target's Review (link)
  A link to view all the reviews for the Target.
• T5 Target Class
  The category name of a Target.

Review Elements (R1-R9)

This group displays the author's input about the Target.

• R1 Review Title
  The full title created by the author.
• R2 Review Date Stamp
  The date of submission of the review.
• R3 Author Profile
  To identify the author.
  • R3.1 Graph (link set)
    Display the 360 relationship rating between the author and visitor. Use a ">" symbol to separate each person.
  • R3.2 Author's Reviews (link)
    Link to see all the reviews created by an author.
• R4 Helpfulness Ratio
  A ratio (e.g. N of N) voted by visitors on how helpful an review is.
• R5 Rating Attribute List
  The label of a rating value.
  • R5.1 Rating Value List
    The value of a rating (star- or bar-scale.)
• R6 Comment Attribute List
  First group of labels for a text review value.
  • R6.1 Comment Value List
    First group of value for a text review.
• R7 Comment Posting
  The body of comment.
• R8 Secondary Comment Attribute List
  Second group of labels for a text review value.
• R8.1 Secondary Comment Value List
  First group of value for a text review.
• R9 Disclosure options
  Toggle to show/hide the remaining R7 when R7 is restricted to display N amount of text.

Form Elements (F1-F3)

This group allows users to act on the review.

• F1 Helpfulness Input (link)
  Visitors can vote (e.g. Yes - No) on how helpful a review is.
• F2 Report Abuse (link)
  Allows users to report reviews that appear abusive, off-topic, or otherwise objectionable may violate Yahoo!'s Guidelines and/or Terms of Service. Currently, it is also used for author to edit/delete own reviews.
• F3 Call to Action (link)
  A property's action that would like the visitor to perform as the next step. E.g. Write your own review for $TargetTitle

This table also indicates whether an element should be displayed or omitted based on the type of displays.

A review should be displayed by following the generic visual architecture.

Generic visual architecture: