Page MenuHomePhabricator

Present people with multiple reference checks when warranted
Closed, ResolvedPublic

Description

In T332364, we decided the initial version of the reference Edit Check would only present people with ONE prompt to include a reference within the edit they are attempting to publish.

...even in cases when the edit someone is attempting to publish likely warrants multiple references. E.g. adding new sentences in separate sections.

This task involves the work of designing and implementing an experience that enables Edit Check to show people multiple reference prompts when the edit they are attempting to publish warrants them.

TODO (design)

Mobile

IDDescriptionScreenshotProposed path forwardStatus
1.What feedback will we provide when people act on a Check? Asked another way: what is the "success state" of a check? What is the "no" state? At present, when you act on a Check, the card disappears entirely with no trace of its existence and your action upon it.In the time between now and when we're ready to offer Checks mid-edit (e.g. T359107 and T365301), regardless of how you responded to the Reference Check (read: you completed the Yes or No workflow), show the existing success message/toast at the top of the viewport (beneath the toolbar) and clear the Check you just acted on (with now way to revisit). Note: in deciding this, we're also deciding that Edit Check will NOT re-check the state of the document during the proofreading moment in any case.🕵️ Ready for review
2.What happens when you tap < and > when the Checks you're navigating between are in close proximity to one another (e.g. in the same paragraph)?The text that is highlighted should always include the content that is relevant to the Check someone is being presented with. Regardless of how many Checks apply to a given piece of content, one layer of highlight should always be applied.🕵️ Ready for review
3.What happens mid-edit on mobile? We said the tag and highlight would only show for “high priority” checks while the other checks would be visible by minimizing the keyboard or tapping the (publish changes) button.No action needed. This question will become relevant when work on T359107 and T365301 begins.✅ Resolved

Desktop

IDDescriptionScreenshotProposed path forwardStatus
1.What do we want to happen when you tap Yes on the Reference Check from within the "right rail"? At present, Citoid is opened and the dialog is "cut-off" by the right rail.Design to propose path forward.
2.How might we make people aware of the transition into the "Proofreading moment" when they progress from "mid-edit" with ≥1 Check still needing to be addressed?Design to propose path forward.
3.What feedback will we provide when people act on a Check? Asked another way: what is the "success state" of a check? What is the "no" state? At present, when you act on a Check, the card disappears entirely with no trace of its existence and your action upon it.Same as "1." in "Mobile" above.🕵️ Ready for review

TODO (engineering)

Mobile

IDDescriptionScreenshotProposed path forwardStatus
1.In the "Proofreading" moment, all text outside of the paragraph Edit Checks are relevant to should be omitted and replaced with three vertical dots (similar to diff view)When a Check card is expanded, text NOT relevant to Check will be grayed out. When someone collapses/hides a Check by tapping the chevron, previously grayed out text will assume full opacity. Update: For now the expected behavior is when someone collapses/hides a Check by tapping the chevron, previously grayed out text will NOT assume full opacity until they leave the proofreading stage by tapping the back button🕵️ Review: Right now, tapping the chevron next to Review Changes hides the check but text not relevant to the Check still stays grayed out, it does assume full opacity after getting out of the proofreading stage by tapping the back button
2.The "Add a citation" card obfuscates/hides/appears "on top" of the text I added and the Check is relevant to🕵️ Review: I think this was happening on desktop? Not happening anymore after we moved the checks to the side rail
3.As you tap the < / > buttons within the Edit Check "card," the text area should move to show the area of the document relevant to the Check at-hand. At present, the text area does not move at all.See UI comparison in Figma🕵️ Ready for review

Desktop

IDDescriptionScreenshotProposed path forwardStatus
1.Missing: omnipresent "Review changes" section heading in the right-rail where Edit Checks are housed/surfaced✅ Resolved
2.The "Before publishing" text within the navigation bar (term?) at the top of the editing interface ought to be centered rather than left-aligned✅ Resolved
3.Unfocused Checks should be visually accented with vertical bar, rather than same treatment used to highlight Check that is currently in focusClarification: we are considering the vertical bar to simply mean at least one check is present within the text area it exists alongside. Said another way: the vertical bar is binary. It does not communicate the quantity of Checks present. Note: in the future, the vertical bar could evolve to also communicate priority/severity/type/etc.🕵️ Ready for review
4.The "Add a citation" card obfuscates/hides/appears "on top" of the text I added and the Check is relevant to🕵️ Review: Not happening anymore after we fixed the way scrolling works when a check is presented

Related Objects

StatusSubtypeAssignedTask
OpenNone
OpenNone
OpenNone
OpenNone
OpenNone
OpenNone
ResolvedDLynch
OpenNone
ResolvedEAkinloose
ResolvedDLynch
Stalledmedelius
OpenNone
OpenNone
Resolvedppelberg
ResolvedMNeisler
ResolvedQuiddity
Resolvednayoub
OpenNone
OpenNone

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

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

[mediawiki/extensions/VisualEditor@master] [WIP] EditCheck: multicheck in drawers

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

Test wiki created on Patch demo by DLynch (WMF) using patch(es) linked to this task:
https://patchdemo.wmcloud.org/wikis/3a6ef5a4b4/w

Test wiki created on Patch demo by DLynch (WMF) using patch(es) linked to this task:
https://patchdemo.wmcloud.org/wikis/648e6e7be2/w

Test wiki on Patch demo by DLynch (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmcloud.org/wikis/3a6ef5a4b4/w/

I realized I forgot to turn on editcheck by default in the first patchdemo, sorry.

ppelberg moved this task from Doing to Design Review on the Editing-team (Kanban Board) board.
ppelberg added a subscriber: DLynch.

Test wiki created on Patch demo by DLynch (WMF) using patch(es) linked to this task:
https://patchdemo.wmcloud.org/wikis/648e6e7be2/w

Below are notes for you from @nayoub and I about the prototype you shared above. I assume we'll talk through anything that's unclear/unexpected within the below offline.

So you're aware: the prototype revealed some areas of the UX that the static mockups did not specify. I will share the list of area Nico and I will be defining in a separate comment.

Mobile

IDDescriptionScreenshot
1.In the "Proofreading" moment, all text outside of the paragraph Edit Checks are relevant to should be omitted and replaced with three vertical dots (similar to diff view)TODO
2.The "Add a citation" card obfuscates/hides/appears "on top" of the text I added and the Check is relevant toTODO
3.As you tap the < / > buttons within the Edit Check "card," the text area should move to show the area of the document relevant to the Check at-hand. At present, the text area does not move at ll.See UI comparison in Figma

Desktop

IDDescriptionScreenshot
1.Missing: omnipresent "Review changes" section heading in the right-rail where Edit Checks are housed/surfacedTODO
2.The "Before publishing" text within the navigation bar (term?) at the top of the editing interface ought to be centered rather than left-alignedTODO
3.Unfocused Checks should be visually accented with vertical bar, rather than same treatment used to highlight Check that is currently in focusTODO

Update (7 August)

I've updated the task description to include the outcomes from today's (7 August) offline team meeting.

ppelberg updated the task description. (Show Details)

Update
I've updated the TODO (design) section of the task description with "Proposed paths forward" @nayoub and I converged on offline yesterday.

cc @DLynch

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

[mediawiki/extensions/VisualEditor@master] Edit check: center the text in the proofreading toolbar

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

Change #1064525 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Edit check: center the text in the proofreading toolbar

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

Talked with Nico about the current prototype, and we need to:

  • Further improve scrolling properly onto screen fully when moving between checks; mobile, particularly, isn't accounting for the drawer as well as it should be.
  • The buttons in the sidebar/drawer need minor design tweaks to match the mocks; they should be right-aligned and borderless
  • The citation inspector needs to respect the sidebar as not being space it can try to overlap, since it winds up being hidden under it
  • On mobile the check title background-color should be removed, and the whole box background should be interactive-subtle
  • Standardize the icons, rather than showing the per-check icon
  • On desktop add more spacing on the left of the sidebar, to match the spacing to the gutter-highlight.

Citation inspector issue:

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

Other fixes that weren't mentioned:

  • Bring the content all the way up to align with the check in the sidebar rather than just scrolling it into the viewport
  • Backing out of the citation dialog counted the check as completed
  • An overflowed toolbar due to page width could cause issues with alignment of the heading
  • Check buttons are disabled while in the check process

Test wiki on Patch demo by DLynch (WMF) using patch(es) linked to this task was deleted:

http://patchdemo.wmcloud.org/wikis/7bd15f6769/w/

Test wiki created on Patch demo by DLynch (WMF) using patch(es) linked to this task:
http://patchdemo.wmcloud.org/wikis/1535e86e64/wiki/Douglas Adams

I noticed something on this patch demo today. Sometimes at the proofreading stage, the cursor is appearing on top of the selected sentence at a random position or the highlight is appearing at the wrong place.

cursor.png (756×1 px, 248 KB)

highlight.png (860×2 px, 295 KB)

@Ryasmeen I think that one is fixed in updates to the patch made since that patchdemo was created, fortunately.

Test wiki created on Patch demo by PPelberg (WMF) using patch(es) linked to this task:
http://patchdemo.wmcloud.org/wikis/0ff7f547bf/w/

We're going to merge this, with a change to add some sort of config toggle for single-check mode, which will:

  1. only allow the add-reference check
  2. only allow the first check found
  3. hide the next/previous buttons
  4. maybe move the declined check survey into the sidebar? (I'm investigating whether this is trivial; if it isn't, we'll skip it)

We're also going to pull in the "hide the Vector 2022 right sidebar while the editor is open if edit check is enabled" patch from T379443.

The effect of the merge will thus just be to move the existing check experience into a sidebar, and change its colors to the standard "warning" set. All the multi-check stuff will be hidden behind the aforementioned config.

Patch now has a config setting called VisualEditorEditCheckSingleCheckMode. If true (the default) it will only allow an addReference check, and only the first one found.

ppelberg updated the task description. (Show Details)

Change #1056630 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] EditCheck: move checks to a sidebar

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

Ryasmeen updated the task description. (Show Details)

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

[mediawiki/extensions/VisualEditor@wmf/1.44.0-wmf.6] EditCheck: move checks to a sidebar

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

Change #1102885 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@wmf/1.44.0-wmf.6] EditCheck: move checks to a sidebar

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

Mentioned in SAL (#wikimedia-operations) [2024-12-12T21:45:43Z] <tgr@deploy2002> Started scap sync-world: Backport for [[gerrit:1102885|EditCheck: move checks to a sidebar (T341308 T379443)]]

Mentioned in SAL (#wikimedia-operations) [2024-12-12T22:02:16Z] <tgr@deploy2002> tgr, kemayo: Backport for [[gerrit:1102885|EditCheck: move checks to a sidebar (T341308 T379443)]] synced to the testservers (https://wikitech.wikimedia.org/wiki/Mwdebug)

Mentioned in SAL (#wikimedia-operations) [2024-12-12T22:14:56Z] <tgr@deploy2002> Finished scap sync-world: Backport for [[gerrit:1102885|EditCheck: move checks to a sidebar (T341308 T379443)]] (duration: 29m 12s)

Next steps

  • @ppelberg: tidy task description
  • @ppelberg: create sub-tasks for future work as we'd like to continue treating this ticket as the "umbrella" ticket for the work of showing people multiple Reference Checks within an edit session (when warranted)

Test wiki on Patch demo by DLynch (WMF) using patch(es) linked to this task was deleted:

http://patchdemo.wmcloud.org/wikis/3ab1a2a854/w/

Test wiki on Patch demo by DLynch (WMF) using patch(es) linked to this task was deleted:

http://patchdemo.wmcloud.org/wikis/1535e86e64/w/

Test wiki on Patch demo by DLynch (WMF) using patch(es) linked to this task was deleted:

http://patchdemo.wmcloud.org/wikis/7ebe13a367/w/

Test wiki on Patch demo by PPelberg (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmcloud.org/wikis/0ff7f547bf/w/

Test wiki on Patch demo by DLynch (WMF) using patch(es) linked to this task was deleted:

https://patchdemo-legacy.wmcloud.org/wikis/648e6e7be2/w/