Reading/Web/Settings

Mobile provides its own settings page - Special:MobileOptions. Unlike, Special:Preferences, it provides settings that work for anonymous users.

Background

The settings page on the mobile website, as well as many other special pages on the mobile website, did not previously have a consistent template or layout. In addition, the descriptions for many of the features which beta mode enabled were not displayed on the old settings page making users unaware of the impact in functionality that enabling beta mode entailed.

The reading web team decided to change the layout and presentation of the settings page and other special pages, and to improve the beta mode option to give users more information about beta features, as well as the opportunity to give feedback on individual features.

Improvements

Font changer - This is an accessibility feature to increase font size of articles to read. A lot of mobile browsers do not include this feature. Accessibility is important to our readers and the feature has been in Beta mode for a while. The team improved the way to change the font size and promoted it to stable. (T109363)
Expand sections by default - For avid readers and editors, opening up sections every time on articles can be taxing. Now there is a setting that will expand all sections by default. (T169257)
Showing what changes are applied if a user enables Beta mode - Beta mode on mobile did not communicate to users what changes were getting applied to their experience. (T67079) This was a transparency issue in what was happening to users experiences. It also helps to encourage more people sign up for beta features by reading which features are available to test. This will help us collect feedback from more people about our experiments.
Use of modern UI library - Use of modern UI library - Wikimedia Design has developed a style guide and UI library under the OOUI framework. MobileFrontend will use these components which are standard across other Wikimedia products. The components use accessible color palettes and UI states.

Changes to special pages

Overall changes to special pages templates will be tracked under this epic: https://phabricator.wikimedia.org/T169162.

Changes to beta mode

Previously, if a user enabled beta mode, the site would alter their experience by delivering beta features without giving information on any of the features which did not contain individual settings. This made it difficult for users to be able to distinguish the changes in their experience that were a results of beta mode enrollment. We changed the settings page by providing a list of beta features upon beta enrollment. We also added a feedback link to allow users to give feedback on individual features and/or the entire experience

Graduated features

As a part of these changes, we graduated two features previously in beta:

Font changer - selecting a font size from the font changer dropdown will allow the user to set that font for their reading experience.

Expand all sections - selecting this option will change the default state of articles to display all collapsible sections of a page as expanded.

Current beta features

As of January 2018, the following features are available as beta features.

Title descriptions - Provide a short description of the subject under the title of the article.
Lazy load references - Saves data usage by loading article references only when they appear on the screen
Categories - Displays the categories of pages
Jump to top - Provides a floating button that scrolls to the top of the current page
Send feedback link - A "Send feedback" link will appear on the bottom of the page. It will link to the talk page of this page. We are hoping to gather feedback on beta mode in general, as well as on the individual beta features.

Promoting beta usage

MobileFrontend allows us to promote beta by showing banners on all pages to users who are not in beta mode. It can be shown to a percentage of users via the following config (Example turns it on to 100%).

In the past, usage of this has been shown to increase the beta opt in rates.

$wgMFExperiments = [
    // Experiment to prompts users to opt into the beta experience of the skin.
    'betaoptin' => [
      'name' => 'betaoptin',
      'enabled' => true,
      'buckets' => [
        'control' => 0,
        'A' => 1,
      ],
    ],
];