Page MenuHomePhabricator

Make existence "Revising" state of Tone Check card more obvious on mobile
Closed, ResolvedPublic

Assigned To
Authored By
ppelberg
Jul 31 2025, 6:04 PM
Referenced Files
F69946530: image.png
Nov 6 2025, 9:18 AM
F69946497: image.png
Nov 6 2025, 9:18 AM
F65834778: Captura de pantalla 2025-08-22 a las 11.12.51.png
Aug 22 2025, 9:13 AM
F65779374: ReviseTone-mobile.png
Aug 18 2025, 5:09 PM
F65779190: ReviseTone-mobile.png
Aug 18 2025, 4:29 PM
F65722491: image.png
Aug 7 2025, 5:37 PM
F65698353: image.png
Jul 31 2025, 7:32 PM
F65698167: image.png
Jul 31 2025, 6:04 PM

Description

In T397984, we converged on a new "Revise" experience for Tone Check.

This experience introduces a new card "state" that appears when people elect to Revise the text Tone Check is inviting them to reconsider (see Revising tone below):

image.png (1×5 px, 529 KB)

The arrival/presence of this card is clear on desktop. On mobile, not so much:

image.png (480×282 px, 57 KB)

Note that upon electing to Revise the tone of what you've written on mobile, the interface offers no indication that this new card "state" is available, and within it, guidance and actions meant to support you in revising what you've written to align with Wikipedia policies.

Desired experience

After receiving a Tone Check warning and selecting "Revise", the interface shifts to bring up the keyboard, emphasize the area to revise (i.e. blue bounding box) and a new complete button in the right rail.
Once the user has completed their changes, they would tap on the complete button (i.e. progressive check icon) and the system would recheck (i.e. re-evaluate the language with the BERT model).
If the changes do not contain tone issues, a success message would appear – otherwise Tone Check would be displayed again.
Flow:

Captura de pantalla 2025-08-22 a las 11.12.51.png (1×2 px, 399 KB)

Event Timeline

With the virtual keyboard, indicating why the card with the buttons can't stick around

image.png (696×409 px, 98 KB)

Note that "stick a tiny action-strip with just the buttons on top of the keyboard", despite being the obvious approach, is actually annoyingly difficult due to the APIs available to us for knowing where the keyboard actually is across different mobile platforms.

As mentioned in the standup meeting, we can implement this feature by making it so that clicking away from the text will automatically trigger the recheck action. Additionally, if we incorporate a "you haven't typed in 2 seconds" timer, it will capture instances where the user pauses and does not interact with the text.

An option to recheck by clicking on the button could also be available for those who prefer to use it. On mobile, this button could be placed next to the text in the place where the warning icon and rail are in previous steps.

image.png (1×1 px, 294 KB)

nayoub updated the task description. (Show Details)
nayoub subscribed.

Change #1180706 had a related patch set uploaded (by DLynch; author: DLynch):

[mediawiki/extensions/VisualEditor@master] Edit check: split out the gutter section widget into a proper class

https://gerrit.wikimedia.org/r/1180706

Change #1180707 had a related patch set uploaded (by DLynch; author: DLynch):

[mediawiki/extensions/VisualEditor@master] Tone check: when revising in mobile, show a quick-action in the gutter

https://gerrit.wikimedia.org/r/1180707

Change #1180876 had a related patch set uploaded (by DLynch; author: DLynch):

[mediawiki/extensions/VisualEditor@master] Edit check: pull knowledge of "revising" out of EditCheckAction

https://gerrit.wikimedia.org/r/1180876

Change #1181150 had a related patch set uploaded (by DLynch; author: DLynch):

[mediawiki/extensions/VisualEditor@master] Edit check: allow untagging of actions, add helpers on actions for tags

https://gerrit.wikimedia.org/r/1181150

Change #1180706 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Edit check: split out the gutter section widget into a proper class

https://gerrit.wikimedia.org/r/1180706

Change #1180876 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Edit check: pull knowledge of "revising" out of EditCheckAction

https://gerrit.wikimedia.org/r/1180876

Change #1181150 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Edit check: allow untagging of actions, add helpers on actions for tags

https://gerrit.wikimedia.org/r/1181150

Change #1180707 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Tone check: when revising in mobile, show a quick-action in the gutter

https://gerrit.wikimedia.org/r/1180707

EAkinloose edited projects, added Verified; removed Editing QA.
EAkinloose subscribed.

A minor thing I'll have to double check with the team is later is how the success message is diplayed.

What I see:

image.png (1×598 px, 57 KB)

What is shown in the desired experience screens:

image.png (790×358 px, 132 KB)