Article feedback/Public Policy Pilot/Design

In order to further avoid information cascade as much as possible, the feature has been broken into two discrete sections.

Your Feedback - the section where the user provides their own ratings, and
Article Rating - the section where the user can see the collected rating averages. By default, this section will not display actual numbers. The user must provide action to see them, either by making a rating or clicking the "show ratings" link.

Ideally, the two sections will not be placed in close proximity on the page. However, several factors prevent this from occurring during the pilot (including but not limited to expected resistance from readers and editors to placing the Rating Display box in a more prominent position).

Several decisions were made around the design of both sections in order to better emphasize (visually, functionally, and psychologically) that the two sections are distinct. While they are both concerned with article assessment, they serve different (near opposing) functions and have different motivations.

To this end, the following decisions were made:

To divorce the display and entry elements into distinct, separate boxes
To reinforce the singular identity of any one section by making them self-contained (e.g., both have full sets of labels).
To display the various axes differently in both sections (stars versus bars).

Article Rating Section

The Article Rating section is a (mostly) non-interactive page element. Its purpose is to surface the ratings obtained and display them in a non-intrusive manner.

Horizontal "thermometer" style bars were chosen to provide at-a-glance information. Numbers are also displayed for more accurate data understanding.

The grey colors were chosen so that the section felt like part of the page's "chrome" and no more or less important than any other element (this is especially important given its proximity to the "Your Feedback" section in the pilot program). A single shade was chosen for all bars so as not to give any one an undue or unintended weight.

Your Feedback Section

Unrated Behavior

This is the display of the star bars when the user has never rated the article in question. A light grey was chosen to indicate incompleteness or emptiness.

The submit button will be greyed out at this point, only becoming usable when a rating (on any axis) has been selected.

By default, the display of the aggregate ratings is hidden. "Blank" ratings are shown to indicate to the user that they exist. Clicking the "show" link will cause them to display.

Unrated Behavior with Visible Results

This is the display of the star bars when the user has never rated the article in question but they have chosen to see the results.

Star Bar Rollover Behavior

This shows the behavior of the control when a user is selecting a star for their rating. Hovering over the star bar will activate the color change; clicking on a specific star will freeze the individual bar.

Modified star bars will continue to display as red color until the user clicks the "submit" button (at which point they will turn dark blue - see below).

Rated Behavior

This is the display of the control after a user has provided ratings and the ratings provided have not become "stale". The dark blue was chosen because it is the same intensity as the dark grey, which then allows it to visually drop into the page's chrome: it does not require attention.

If the user chooses to change any of their ratings, the rollover behavior will show the red stars. It will be possible to have three colors of stars on the screen if a user lowers their rating (e.g., from 4 to 3, in which case the stars will be red, red, red, blue, grey).

The aggregate ratings are always visible at this point. The user has rated the article.

"Stale" Rating Behavior

This is the behavior of the control when the user has provided ratings but the ratings have been declared "stale" (too many revisions have occurred between now and when the user rated the article).

In this case, the stars representing the user's rating will change color to a lighter, paler blue and a small message will be included in the control. The pale blue color is of a higher intensity than the surrounding page elements which will then call attention to it. Since it is a blue color, it does not indicate an alert or error condition - merely that the section could use some attention.

A small message will be included explaining to the user that they may wish to re-rate the article. If possible this message should include the number of revisions that have occurred since the user provided their last rating.

The aggregate ratings are always visible at this point. The user has rated the article.

Results Behavior

This image shows how the control behaves after the user has submitted a rating. A message is simply displayed below. Note the border is 2px wide as opposed to 1.

Ideally, we could change the message based on whether or not this is a new rating or a re-rating. However, determining this may be difficult, so we will not worry about it for the pilot.

Help Behavior

This image shows how the control behaves in "help" mode. When the user hovers the mouse over a help icon, the icon will change color (from grey to blue) and a tooltip "help" will appear on the screen.

The "Help" here is actually going to be definitions of the individual labels, but the principle is the same.

Error Behavior

This image shows how the control behaves when an error condition occurs. A message is simply displayed below. Note the border is 2px wide as opposed to 1.