Reading/Web/Projects/Mobile Page Issues

Currently, details about issues with page content do not display on the mobile website, making readers unaware of the reliability of the pages they are reading. Restraining this information from users can be problematic, especially in cases of more severe issues, such as hoax articles or articles considered for deletion. We would like to improve the treatment of page issues on the mobile website to include a description of the nature of the issue itself, as well as the severity of the issue. Our hypothesis is that these changes will help users make better judgements on the reliability of the pages they are reading. Furthermore, we hypothesize that exposing the nature of these issues will make readers more curious about the inner workings of Wikimedia projects, potentially increasing the likelihood of their involvement as contributors

Introduction
When Wikipedia articles are hoaxes, considered for deletion, missing citations, or don’t meet Wikipedia standards, they often feature a large coloured box above the article notifying readers and editors of the issues at hand.



These notices are actually special templates that are inserted into the content of the article. Each notice in the article name-space has it’s own template, and each template is based on a meta-template called (Article message box) which in turn is based on a Lua module called Module:Message box. Other MediaWiki name-spaces (like categories and talk pages) have notices that are specific to their name-space as well.

These notices have existed for over a decade and have many conventions around their usage. Because these notices are maintained by editors, every Wikipedia language community is free to adopt or invent their own notices, specific to the needs of their Wikipedia or MediaWiki project (Commons for example, has a wide array of licensing notices, while Wiktionary uses entirely different notices altogether).

The broad range and diversity of these notices makes them hard to standardize (however, such an effort successfully in 2007).

This refresh occurred before the modern mobile web even existed, and despite later efforts by the WMF to bring these notices into the mobile web, they are still not very mobile friendly. As a starting point, this proposal will focus on improving notices in the article name-space, based on the template.

Current mobile treatment
Currently, instead of rendering the entire template, mobile Wikipedia shows a small grey link with the text "page issues" below the title of an article. When clicked, an overlay with a list of the issues appears. Some notices have text for a "compact" version of the template, If available, only text for the compact version is rendered.

Limitations
As pointed out in the Village pump proposal below, the small "page issues" link doesn't convey the importance of certain notices, such as the "hoax" notice, which is prominently visible on desktop.

Technically, the current implementation depends heavily on modifying the HTML generated by the templates. Even slight changes to the template HTML can break this feature on mobile. Also, because these templates differ across languages, the current implementation doesn't work on all wikis. French Wikipedia for example, refreshed their message boxes in 2016 and now uses entirely different templates than English Wikipedia ( Liste de bandeaux de maintenance d'articles). Because of this change, French alerts are not visible on mobile Wikipedia.

English Wikipedia Village Pump proposal
In September 2016, a proposal to expose page issues on the mobile website was approved with the clear consensus that some warning templates should be visible on mobile.""If an article is up for AfD and flagged as a possible hoax with insufficient medical sourcing, any reader visiting that article on a computer is greeted by three large red and orange boxes at the top of the page, one with a cautionary stop sign... If a reader instead visits the same hoax medical article on their phone... they just get two tiny grey words "Page issues" under the article title..."" Link to English Wikipedia Village Pump proposal

Objective
The goal of this project will be to change the visual styling of page issues on the mobile website to improve awareness of particular issues within an article. We will also be dedicating time to working with our communities to provide best practice guidelines for styling templates in a way that will result in the optimal formatting of issues on mobile site without changing the treatment on desktop site.

This goal maps to Program 2, Objective 1 of the annual plan for Readers: Enable readers to gauge the quality and reliability of an article during their reading experience

General
Mobile page issues will display the following:
 * Issue description
 * Short descriptions for the issue will be used where available
 * If no short description for the issue is available, we will display the beginning of the long-form issue description
 * Issue severity
 * Severity - severity will be set according to ambox type( https://en.wikipedia.org/wiki/Template:Ambox#type ) as follows:
 * Severe: type=speedy, type=delete
 * Medium: type=content
 * Low: type = style
 * Notice: type = notice, type = move, type = protection
 * All other templates will display with normal severity
 * Issues will appear at various positions across the page depending on severity

Workflow

 * 1) User goes to page with page issue
 * 2) User selects page issue
 * 3) User is navigated to page issue details

Single issue

 * For pages with single issues, issue severity will come from the template as defined above
 * Example: if template has level medium, the article https://en.wikipedia.org/wiki/Free_China_(Second_Sino-Japanese_War) will have a single page issue appear at medium level

Multiple issues

 * Issue level comes from individual template
 * If an article contains the template, the issue level of the article will be the highest issue level available
 * Example: if template has level high, the article https://en.wikipedia.org/wiki/Chinese_unification will have issues appear at high level
 * Each multiple issue level will receive unique copy and treatment (as noted below)

Feature Evaluation
To prove the success of these changes, we would like to consider the following questions:
 * Is there an increase in clickthrough based on the new issue treatments (from the article page to the issues modal, from the issues modal to details about issue type)?
 * Do edits increase with page issues as referrer?
 * Does the new issue treatment changes affect issue removal rates?
 * Does clickthrough depend on the severity of each issue?
 * What coverage do we have for specific issues over time - i.e. how many issue templates contain short descriptions, how many issues templates contain severity?

Technical challenges to improving Ambox “mobile friendliness”
The technical challenges of improving Ambox templates can be grouped into a few buckets (as described below), but they all boil down to inconsistency. The output of 's is inconsistent across languages, inconsistent across different types of templates, and inconsistently placed inside the article content, without a consistent machine-readable way of extracting the template content.

Areas of concern

 * Text length
 * The text of many Ambox messages is very long and not suitable for mobile devices.
 * Desktop specific HTML
 * The templates make heavy use of tables for layout, which doesn't work on mobile.
 * Language specific HTML
 * The  HTML output is different across languages, making it nearly impossible to consistently extract the message content and repurpose it for mobile.

Bold text== Proposed Technical Solutions ==

Use Page Content Service to display page issues
https://phabricator.wikimedia.org/T172002

Modify MobileFrontend/Minerva CSS to accomodate existing template markup
This solution would work within the existing template structure and probably only on English wikipedia.

Many templates contain a CSS class that marks text as. Using CSS, we could hide this extra text and only present users with the "summary" text. This is the same text that is currently presented in the page issues overlay. Many templates, notably deletion templates, do not have this CSS class, so the issue of text length would have to be address on a per template basis.

A demo of what modifying the CSS might look like is available here https://people.wikimedia.org/~jdrewniak/page_issues_css/index.html.

Add structured HTML attributes to Ambox templates
This solution requires modifying templates

As mentioned above, the HTML produced by the templates varies widely. It can change at any time and in any language. However, we shouldn't hinder these changes, but rather ensure that they can be adapted to new contexts, such as mobile. Adding semantic attributes to the HTML could provide us with the necessary "hooks" to extract the Ambox content and present it in an appropriate way on mobile. We could provide a standard set of attributes that template editors can insert into their templates, across any template or language. These attributes could be "machine readable" which means they could be consumed by parsers or extracted into APIs like the Page Content Service, for consumption by the mobile apps. These semantic attributes would be invisible to end-users, and would not effect the appearance of existing templates.

Semantic HTML attributes fall into the category of "microformats" which are considered part of the semantic web. The vision of the semantic web is to extend HTML with the ability to express very specific types of data, in a way that is machine readable. In this scenario, we could extend the Ambox HTML with attributes that would identify the templates as "message boxes" with various properties, like their priority, date, and actionable steps. This information could then be parsed by the mobile site or app and presented to end-users in a mobile friendly fashion.

We could invent our own standard for how to create these semantic attributes, but there already exists a W3C recommended specification called RDFa which standardizes on how to use attributes to add rich meta-data to HTML.

The RDFa spec defines rich data structures as "vocabularies" (sets of properties that define an data structure). We can define a custom vocabulary that describes the properties of a "message box", and use those properties in the HTML attributes.

As an example, RDFa uses HTML attributes such as            that can be added to templates in the following way: