Moderator Tools/Content moderation on mobile web/Diff

Tracked in Phabricator
Task T312640

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.

This project is paused as of June 2023. We will consider re-prioritising it in 2024.

Background[edit]

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 on mobile?

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.

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?

Designs[edit]

We have some design explorations to share, which we need your feedback on! Take a look and let us know what you think on the talk page.

Is the layout of the page clear?
Is all the functionality and content that you expect on the Diff page present, or have we missed anything?
Do you think the elements of the page would be clear to a new user?
Which of the options do you prefer, and why?

In these designs we have only changed the page layout and information structure - the in-line diff styling has remained the same, as we do not plan to make changes to it right now. These designs only relate to the information around the diff.

Our goal with this redesign is to provide a comparable set of features and links on mobile as on desktop, and to improve the UI of the page so that it's friendlier and more understandable for a newer Wikipedia contributor.

We removed:

The grey "about the user" card in the footer
User edit count
Bytes added/removed

We added:

Links to the article history and talk page
The ability to (un)watchlist the page
Links to the user's talk page and contributions
'Card' UIs to hold the edit summary/timestamp and user information
An Undo button, in the tray alongside Thank
Rollback and Change Visibility buttons (admin only)
The ability to block the user (admin only)

Current version[edit]

For comparison, this is the current MobileDiff interface:

Non-admin version[edit]

This section contains designs for non-administrator users - they contain just the basic MediaWiki actions, and no administrator-only functionality.

These mocks show the overall design layout. In this version, the 'user details' button expands when pressed to show links for this user - Talk and Contributions. The user details expansion doesn't save much screen space, but it does reduce the number of visual elements presented to users by default. Our hypotheses about this design are that these links aren't needed as often as other elements on the page, and newer users might be confused by the large number of links and buttons on the page.

If those hypotheses aren't true (we plan to test them with data and user testing respectively) then we might consider simply always showing the user links.

To save on vertical screen space, we could also remove the 'Edit summary' heading. The hypothesis behind this decision is that it's usually obvious what this text is - editors should be adding descriptive summaries of what changed in this edit. New users may find the heading helpful, however, especially for ambiguous edit summaries.

This design simply combines the removal of the 'Edit summary' title with the 'User details' dropdown, for completeness.

Admin version[edit]

There are three additional actions we have included in our designs, which are typically limited to a project's administrators: Blocking a user, Rollback of the edit, and Changing visibility (revision deletion) of the edit. The same variation options as above exist; we've demonstrated the addition of these actions in a version where the user links are always visible:

We have added a Block button next to Talk and Contribs, as is common elsewhere in the MediaWiki interface. The Rollback and Change visibility buttons have been added to an additional menu in the bottom action tray.

Please let us know what you think about these designs on the talk page! We're very open to adjusting these designs further based on your feedback.

Tags and flags[edit]

The above designs did not consider the placement of Tags (e.g. "Mobile edit", "Reverted") and Flags (e.g. Minor edit, Bot).

This design proposal shows the 'minor' flag, placed bolded and italicised at the end of the edit summary:

Tags can be displayed by selecting the dropdown:

Long edit summaries would truncate after one line, and also be displayed via the same dropdown mechanism: