Article feedback/Public Policy Pilot/Design



In order to 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

Ideally, the two sections will not be placed in close proximity on the page. However, several factors prevent this from occuring during the pilot (including but not limited to expected resistance from readers and editors to placing the Rating Display box in a more prominant 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:


 * 1) To divorce the display and entry elements into distinct, separate boxes
 * 2) To reinforce the singular identity of any one section by making them self-contained (e.g., both have full sets of labels).
 * 3) 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. It's 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 undo or unintended weight.

Feedback Link - this is the only interactive element in this section. The link will go to a short survey intended to gather data about the feature.

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.

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 his or her 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 his or her rating (e.g., from 4 to 3, in which case the stars will be red, red, red, blue, grey).

"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.

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.