Reading/Features/Article lead image

This page suggests a proposal for an alternate mobile web view of Wikipedia articles on mobile. The idea focuses on providing quick and easy access to information for readers on mobile, while providing a legible display of media. Below is a description of a proposals where we want to integrate community suggestions, and accommodate community concerns into the idea as it develops.

Current Layout at the top of articles

As a casual reader, this is your first and most common experience on mobile Wikipedia:

• Title
• Icons for Edit and Watch
• What this article is not about (disambiguation links to other pages)
• Issues with the article (not enough citations, current event, etc.)
• Title again
• Image
• Long, unstructured infobox
• Start of article text

In other words, this is what everyone sees every time they come to Wikipedia on mobile web.

Problem: There is a lot of interface, and you must scroll very far before you can understand: am I in the right place? And then, where is the information that I want to know?

Redesign Proposal

On the left is the current mobile article layout. On the right is the proposed changes. Taken from the Nellie Bly article on English Wikipedia.

On the left is the current mobile article layout. On the right is the proposed changes. Taken from the 1989 Loma Prieta Earthquake article on English Wikipedia.

Goal

Allow the reader to see the most relevant, readable information about the subject quickly with less distraction, we are trying to achieve that by focusing on the image, title, first paragraph, and then the infobox. It shows a consistent layout of image and title together. This redesign will not change article content.

Summary of proposed changes

• Display lead image in a crop at the top of page
• Last edited banner moved to bottom
• Change icon alignment
• Display Wikidata description
• Restyle page issues
• Restyle disambiguation
• 1st paragraph moved above infobox

Lead images

The lead image will be displayed in a crop at the top of the page. It is the same image shown in search thumbnails. It helps the reader very quickly tell if they have the right article.

• Attribution is shown when you click on the image, the same as every other image on the page.
• Some crops may create issues with pictures of people - cropping into faces. We will work on using facial detection to show the best crop possible.
• We are working on a way for editors to change the lead image and the crop, see this phabricator task.

Last edited banner moved to bottom

Introducing the "Last edited by [username] 3 days ago" was an attempt to show the human side of Wikipedia, and help readers see that the article is continuously edited. After feedback, we want to rethink this so that the last editor doesn't seem more important than all editors. We also want to rethink other ways that readers can determine if this is a good article besides how recently its been updated. For the time being we will move this to the bottom of the article so that it doesn't distract from the lead section.

Wikidata Descriptions

The description for the Wikidata item will be shown below the title. The purpose is to provide a very quick description that also helps to disambiguate.

Page issues + Disambiguation

These currently take up a lot of space on mobile screens and look unstructured. Giving them a simple, structured styling will give users consistent access to them while de-cluttering the main reading experience.

Moving 1st paragraph above infobox

This allows the reader to quickly start reading the 1st sentences of the article. Both sentences and infobox are important and useful, but this will make the hierarchy more consistent with desktop. It will provide a more readable introduction to the article.

Try it out!

View the prototype. (View 3 different articles by clicking button in lower right corner.)

You can also view most of these features in progress on mobile web by tapping on the left menu, going to settings, and turning on Beta.

You can also view a very similar layout by downloading the Wikipedia app for iOS or android.

We're not done! Help us with feedback and research

Join the discussion on the talk page, voice concerns or alternate ideas. Let's talk more about this proposal to find the best way to implement a better visual display of media in article on mobile.