Moderator Tools/Content moderation on mobile web/Diff

From mediawiki.org
Other languages:

Diffs are a fundamental component of navigation and content moderation on Wikimedia projects. The diff page in mobile web is missing core links and actions expected of this page, and we do not believe it helps newer editors understand how Wikimedia projects work.

This work is also responding to numerous community requests to add an Undo button to mobile diffs. In the mobile web interface, editors cannot - by default - easily access mechanisms for undoing edits. With Advanced Mobile Contributions (AMC) turned on, editors can access an Undo button on page histories only, which opens the desktop undo interface. Editors should be able to undo edits from a diff.

We have some open questions about how to approach this work. Please share your thoughts on the talk page.

Background[edit]

Special:MobileDiff on es.wiki.

Diff[edit]

Diffs on mobile web are generated by Special:MobileDiff, a mobile-only view which is substantially different from the desktop version. Differences include displaying changes in-line instead of through a two-column view, not including links to a page's edit history or to a user's contributions, and the lack of undo, change visibility, and other moderation actions. The only direct action a user can initiate on mobile web is to thank the user.

It's worth noting that there are also other kinds of diffs users can experience on mobile, such as the Visual diffs generated by the editor when previewing an edit. For this project we're focusing on the diffs users see from browsing page histories and user contributions, rather than those for previewing edits.

In-line diffs[edit]

In-line diffs show the difference between two revisions by displaying added and removed text within the same blocks of text. This saves vertical space compared to a two-column view, as content isn't repeated, but can lead to confusing diffs, especially in the case of edits which make a variety of updates to a paragraph, as opposed to adding or removing entire paragraphs of text.

Screen sizes have, on average, increased since the decision was made to use in-line diffs, and other tools (such as SWViewer), make good use of two-column diffs at mobile screen widths. We would like to explore options for providing editors with both diff styles on mobile web, or those who prefer the two-column view. While this would likely be a per-user preference, we would also need to decide which to display to new editors by default.

Questions: What do you like or dislike about in-line and two-column diff views? Do you just want to use one of these, or should users be able to toggle between them?

Links[edit]

We believe that page histories, user contributions, and diffs should all link directly to each other, to enable easy navigation between revisions on Wikimedia projects. Currently, mobile diff does not include any direct links to page history or user contributions.

Questions: What other pages do you think should be linked from diffs?

Undo[edit]

Mobile editors who do not have Advanced Mobile Contributions (AMC) turned on cannot access buttons for undoing edits from page histories or diffs. Enabling AMC adds Undo and Rollback buttons to page histories, along with revision deletion functionality, but does not add these to diffs. We think it's clear that the diff page should have an undo button.

When using Undo from mobile web, the desktop edit view is shown, enabling a partial revert, where edits are made to the page while the edit is undone. This interface is clearly not designed for mobile screen widths and results in users needing to scroll far down the page to confirm undoing the edit. When we carried out data analysis, we found that just 3% of undo actions are partial reverts, with the rest being full reverts. Given this, we might imagine building a way to fully undo an edit without needing to open the page editor.

Questions: What do you think of enabling editors to fully undo an edit more quickly, without needing to use the editor?

Wireframes[edit]

We have been exploring some very early design prototypes for what an updated diff page could look like. These designs are first attempts at remedying what we see as the major issues with the current design, and will likely change substantially before being implemented. We'd love to hear your feedback on what you think of them - what's an improvement, what's worse, and what's still missing?

This mockup shows a potential direction for the diff page on mobile. It includes:

  • A more compact header, which enables users to see the actual content change more easily, without needing to scroll down the page.
  • A collapsible (and collapsed by default) edit summary for long edit summaries.
  • Left and right buttons for navigating between revisions to the same page.
  • Yellow and blue highlighting of added/removed content, for accessibility reasons. This should likely have additional elements such as a strikethrough for removed content, so as not to rely solely on colour.
  • A pull-up action tray at the bottom of the screen, which displays Thanks and Undo by default. For users with additional rights, such as administrators, this tray could include links to other functionality such as Rollback and Change Visibility.

In this mockup we're exploring ways to make the Undo process more seamless. Since the vast majority of undo actions are full reverts, without making any intermediary edits, we think it could make sense to prioritise this workflow. Clicking Undo could open a confirmation dialog, with the usual edit summary field and other edit saving options. Confirming the undo would simply undo the edit, without needing to see the full editor, though an Edit button would still enable partial reverts.

Open questions[edit]

  • What do we need to know about diffs and undoing edits which isn't captured above?
  • Do you use any gadgets or user scripts which extend the functionality of the diff page or the process of undoing edits (on desktop or mobile)?
  • If you need to link to a diff in another venue, how do you get or generate the necessary link?

Related links[edit]