Moderator Tools/Content moderation on mobile web/Diff

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 shared designs for a new mobile diff page.   Please share your thoughts on the talk page. '''

Diff
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
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
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
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
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
For comparison, this is the current MobileDiff interface:

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

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

Admin version
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
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:

Related links

 * T191706 - It's not possible to undo/rollback edits from diff on Mobile
 * Community Wishlist Survey 2019/Mobile and apps/Add an undo/revert button to diff view
 * Community Wishlist Survey 2021/Mobile and apps/Undo on mobile
 * User:FR30799386/undo