Jump to content

MoodBar/Design

From mediawiki.org

This document is a work in progress. Comments are appreciated but this is not a final draft.

The MoodBar activator
The notification that appears when MoodBar is first activated for a user
The MoodBar dialog, Step 1
The MoodBar dialog, Step 2
The MoodBar dialog, Step 3
The MoodBar dialog, Step 3, showing the expanded "what's this feature" section
The MoodBar dialog, Step 4
The MoodBar dialog, showing the error condition when the character limit has been reached.
The MoodBar dialog, Step 5 (the AJAX sharing state)
The MoodBar dialog, Step 6 (the "Thanks" message)
The MoodBar dialog, Step 6 (the "Error" message)
MoodBar dialog, "confused" rollover
MoodBar dialog, "happy" rollover
MoodBar dialog, "sad" rollover
MoodBar dialog, "confused" selected
MoodBar dialog, "happy" selected
MoodBar dialog, "sad" selected

This document describes the design and behavior of a feature designed to enable new users to quickly provide feedback to the various Wikimedia Foundation project communities and to provide a view to that feedback for the community members themselves.

Hypothesis

[edit]

Having a quick and easy way for new editors to give feedback on what is "making them happy" and/or "making them sad" will help increase awareness among more experienced editors of the issues new editors face.

Use Cases

[edit]
  • Novice: User encounters something that makes them happy, sad, confused, or is simply something they would like to provide feedback on.
  • Expert: User would like to see what issues new editors are having.

Note: the goal of this feedback tool is to surface community issues first and technical issues second. This feature is not designed to be used as a bug reporting mechanism.

Feature Requirements (Phase One)

[edit]

Required

  • Provide a simple feedback mechanism for users to indicate their "mood" about a particular item or about the project as a whole.
    • This mechanism must include the ability for the user to indicate positive mood, negative mood, or confusion
    • This mechanism must include the ability for the user to elaborate about their mood with a short text field
  • The mechanism must be able to handle A/B testing for language choice and position choice

Stretch

  • Provide a "dashboard" to allow community members to easily read and understand feedback.
    • This dashboard should provide a running feed of feedback comments
      • Feedback comments, if included, should be subject to Oversight (to prevent publication of phone numbers, real names, etc.)
    • This dashboard should provide various filtering and searching mechanisms
    • This dashboard should provide the ability to view high-level rollups of the data over time

(Stretch goals will comprise version 2 of this tool, should they not be met with version 1.)

User Experience (Feedback)

[edit]

The user will be given a new, top-level link to share feedback. The text of this link will be "$PROJECTNAME made me..." with a small icon. So, for Wikipedia, the text will be "Wikipedia made me..." and for Wiktionary the text will be "Wiktionary made me..." and so forth.

Note that the actual text of this link is subject to A/B testing; correct wording is key here. Options include:

  • "Using $PROJECTNAME..."
  • "$PROJECTNAME made me..."
  • "While editing $PROJECTNAME I..."
  • "Share your mood"

Clicking on the link will open a NON-modal, specially shaped dialog box. The dialog is hard set to its location and will scroll off the screen if the user chooses.

The dialog may be closed by clicking on the "close" link within the dialog. Further, clicking anywhere on the screen other than inside the dialog will cause it to close.

The dialog starts with showing three options to the user with a headline:

"Using Wikipedia made me..."

And the three options, with icons:

  • Happy
  • Sad
  • Confused

Rolling over any one of the icons will cause the icon to change color.

Upon selection of an icon, the following will happen:

  • The icon will become more "solid" in its color, indicating that it has been selected.
  • The dialog will resize to accommodate new elements;
  • Three new elements will appear:
    • Because... - a 140 character text feild entry box
    • Share Mood - a submit button

The "Because..." text field will indicate the maximum number of characters remaining for the user to input.

The "Share Mood" button will be disabled until the user has entered text into the "Because..." text field.

Above the text box will be a character counter that will show the user how many characters they have remaining. If the user reaches -1 or fewer characters remaining, the text will turn bold and red, indicating the overage. Further, the "submit" button will immediately become disabled again (and will remain so, until such time as the character count in the text area drops down to 140 or fewer characters).

Upon submission, the screen will be replaced with an activity spinner informing the user of the action.

When the server responds that the submission has been accepted, a "Thanks" screen will be displayed. This screen will remain visible until one of the following conditions are met:

  • The user clicks the "close" button; or
  • The user clicks outside of the dialog area; or
  • 10 seconds have elapsed (at which point the dialog will automatically close)

Upon submission, if an error is unrecoverable on the server side, instead of a "Thanks" screen an error screen will be displayed instead. This will direct the user to attempt their action at a later date.

The error screen will remain visible until:

  • The user clicks the "close" button; or
  • The user clicks outside of the dialog area;

(Error messages must be manually dismissed; they should not time-out.)

What is this Feature?

[edit]

Included in every "screen" of the dialog, at the bottom, will be a "What is this feature?" link. Clicking on the link will cause the screen to expand and a paragraph of text to be displayed that gives a short overview and a link to project home page.

Additionally, at the bottom of the revealed text will be a link that will allow the user to disable the Mood Bar. Clicking on this link will present the user with an alert ("Are you sure you wish to permanently disable this feature?"). If the user selects "yes", the Mood Bar will disappear.

Note that in version 1 there will be no way to cause the Mood Bar to return (it is not tied to a preference). This is okay for the initial pilot, though.

Feedback Text

[edit]

The user will be encouraged to include a short, free-form text block limited to 140 characters.

Upon submission, this text will be scrubbed and the following elements will be deleted:

  • External URLs (to prevent spamming)
  • Signatures
  • "Blue language" (simple regular expressions to filter offensive language)

The length of 140 characters has been chosen because it is about the length of two sentences and 140 is a common limitation (e.g., SMS blocks, Twitter, etc.).

Share Anonymously

[edit]

There will be a checkbox that will allow the user to decide whether or not to share their feedback anonymously (e.g., without their user name being displayed). The checkbox will default to "unchecked".

Duplication

[edit]

If the same user provides the same feedback element within an hour, any duplicates will be discarded.

Notifier

[edit]

In order to increase awareness of the feature, when it is first activated a small "notification" box shall appear, pointing to the MoodBar dialog activator. This activator will remain for 3-4 seconds before fading out and disappearing.

User Experience (Dashboard)

[edit]

See the design document for Feedback Dashboard.

Data Model

[edit]

Each feedback entry requires the following elements to be captured:

  • Type of Feedback - Praise, Issue, Confusion
  • Language - The language of the project.
  • Project - The name of the project (Wikipedia, Wikinews, etc.)
  • User Name - The user name of the person providing the feedback
  • Namespace - The namespace of the page (Main, User, User_talk, etc.)
  • Page Title - The title of the page
  • Feedback Text - A freeform text field, limited to 140 characters.
  • Anonymous Bit - Is this feedback anonymous or not?
  • Timestamp - A standard MediaWiki timestamp
  • Operating System - The user's operating system
  • Browser User Agent - The user agent of the browser.
  • Locale - The locale of the browser (not the language of the WMF project)
  • Is Editing - a bit to detect if the page was being edited.
  • Edit Count - the Edit count of the user at the time of submission.
  • Bucket - which A/B bucket the user was in at the time of submission
  • Is Own Talk - a bit that indicates if this was supplied off the user's own talk page