Article feedback/Version 5/Feature Requirements/Mobile

This page describes new features under development for a mobile version of the Article Feedback Tool Version 5 (AFT V5), which we are experimenting for the Tech Days hackathon.

See also: desktop feature requirements page, as well as project overview page, useful links.

Overview
For today's hackathon, Matthias, Benny, Pau and I have picked mobile article feedback as our project.

As a first step, we are trying to get the article feedback form to work on mobile web browsers. We are having a hard time inserting the feedback form in the mobile view, but are making progress towards changing the CSS for the feedback page.

If anyone's interested, we could use some help on these points:
 * technical: how to inject the feedback form in the mobile view (or into the mobile extension)
 * design: create a user interface that supports the feedback workflow on mobile

The key components of the article feedback workflow include:
 * feedback form (see example)
 * feedback page (see example)
 * feedback APIs

(see our desktop feature requirements page for details)

Feedback Form
Our focus for today's hack is on the feedback form, which includes these modules, for gradual engagement:
 * 1) question: "Did you find what you were looking for?"
 * 2) comment: "Any suggestion for improvement?"
 * 3) call to action: "See what others are saying"

We will want to simplify that desktop UI for mobile, to show fewer elements, as proposed below. Note that future designs may be more appropriate for mobile, but this gets us started, for the purposes of this first hack.

Step 1: Question
Desktop version:



Mobile version:
 * Only show this question: "Did you find what you were looking for?"
 * Add happy / sad faces next to 'yes' or 'no' labels, to make them more fun and clickable
 * Remove "Help improve this page" (sounds overwhelming on mobile)
 * Replace "What's this?" with a small icon (to make it less prominent, e.g. question mark?)

Step 2: Comment
Desktop version:



Mobile version:
 * Only show this question: "Great. How could we improve this article?"
 * Show "Post your feedback" button right below text box
 * Remove "Write your suggestion here" (too much info for mobile)
 * Show a small 'more' label or down arrow icon to reveal the links to guidelines and legal disclaimer ("Please post helpful feedback. By posting, you agree to transparency").
 * Replace "What's this?" with a small icon (to make it less prominent, e.g. question mark?)

Step 3: Call to action (CTA)
Desktop version:



(note that we have many possible calls to action to chose from, but this one is the simplest CTA for the purposes of this first hack.)

Mobile version:
 * Show this confirmation: "Thanks! View your post on this "
 * Show "Help improve Wikipedia" prompt right below confirmation
 * Show "Learn more" button right below prompt (linking to Wikipedia tutorial)
 * Remove "This encyclopedia is created by people like you" (too much info for mobile)

Note that on the desktop, we show more complex calls to action most often, such as "Edit this page" -- but editing is not ideal for mobile.

However, if we can get the feedback page working on mobile, we could offer this CTA as an alternative:



Feedback form access
We could display the feedback form on mobile articles in one of two ways:
 * mobile web: add a 'Feedback' section at the end of the mobile article page (e.g. after 'external links' or 'references')
 * mobile app: add a feedback icon on mobile apps (e.g.: a cartoon bubble like the one we use on the talk page)

For the purposes of today's hack, we are focusing on mobile web, but could think about how feedback might appear on mobile apps later on.

Feedback Page
In the future, we will also want to discuss a mobile version of the feedback page, which now is hard to read and overwhelming on mobile web browsers, as shown in this preliminary screenshot below:

To be fleshed out next.