Article feedback/Version 5/Feature Requirements/Mobile

This page describes new features for a mobile version of the Article Feedback Tool Version 5 (AFT V5), which we prototyped as a hack for Wikimedia's Tech Days hackathon on September 12, 2012.

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

Overview

For this WMF tech staff hackathon, Benny, Matthias, Pau and Fabrice picked mobile article feedback as our project, in consultation with Tomasz, Jon and Phil on the mobile team.

As a first step, we aimed to get article feedback to work on mobile web browsers and explore some first designs.

Here's what we accomplished:

• engineering: Matthias and Benny were able to insert the feedback form Javascript in the mobile view, by modifying the mobile extension. This also allowed us to change the CSS for the feedback page, which was broken earlier.
• design: Pau and Fabrice proposed two user interface approaches to support the feedback workflow on mobile -- a short-term simplification of the current desktop UI, and a longer-term redesign of the workflow for mobile use.

Below are preliminary feature requirements based on this experiment, for discussion purposes. These proposed directions are inspired by our discussions with other tech team members, and the mockups below are partly based on the first prototype that we built.

The key components of the article feedback workflow include:

• feedback form (see desktop example)
• feedback page (see desktop example)
• feedback APIs

For more details on our desktop version, see our feature requirements page.

First Design

In order to build a prototype in a day, we first aimed to simplify the current desktop UI for our first mobile prototype, by removing many functions, as well shortening the copy everywhere, as proposed below. From a development standpoint, it is the easiest design to implement, because it matches closely the current desktop workflow and functionality, without requiring major new code.

• 
• 
• 
• 
• 
• 

Second Design

Pau Giner prepared this alternative design for a user experience that is optimized for mobile, where users have limited time to write comments. With that in mind, this design would first show a few of the best short comments from other users, and invite readers to mark the ones they find most helpful -- or write their own comment, if they have time. This design combines the feedback page and the feedback form into one streamlined feedback section, skipping the initial question ("Did you find what you were looking for?"), to get users to see comments right away. The intent is to provide users with an interesting experience that doesn't force them to write feedback, but engages them with a simple curation task.

Here's a step-by-step breakdown of this new workflow idea:

See also Pau's full PDF file.

Feedback Form

The current feedback form workflow includes these three steps, to gradually engage the user towards more contributions:

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"

Below are screenshots of the current desktop UI for each of these steps, along with recommendations for how to adapt it for the current prototype.

Note that future workflow designs may be more appropriate for mobile (such as the one proposed by Pau above), but this gets us started, for the purposes of this first hack.

Question

Desktop version:

Mobile version: (see above)

• 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?)

Comment

Desktop version:

Mobile version: (see above)

• 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?)

Call to action (CTA)

Desktop version:

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

Mobile version: (see above)

• Show this confirmation: "Thanks! View your post on this <feedback page>"
• 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.

Here's another CTA that would be easy to implement on mobile, as an alternative to the first mobile CTA above.

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:

Here's what the feedback page looked like before we built the prototype. After we fixed the CSS at the start of prototype development, it still looked overwhelming, as shown on the left below. We then proceeded to simplify that busy user interface during prototype development. The mockup on the right shows what the feedback page can look like after we complete development:

The other mockups in the section above show other parts of the proposed workflow for the first design (based on the prototype, with more formatting tweaks).

A specification for the feedback page will be fleshed out next.