Page MenuHomePhabricator

Present people with multiple reference checks when warranted
Open, Needs TriagePublic

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🕵️ Ready for review
2.The "Add a citation" card obfuscates/hides/appears "on top" of the text I added and the Check is relevant to🕵️ Ready for review
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

Related Objects

StatusSubtypeAssignedTask
OpenNone
OpenNone
OpenNone
OpenDLynch
OpenNone
OpenNone
DeclinedTrizek-WMF
ResolvedTrizek-WMF
OpenMNeisler
Openppelberg
OpenMNeisler
OpenNone
OpenNone
OpenNone
OpenNone
OpenNone
Resolvednayoub
DuplicateNone
Resolvedppelberg
Resolvedppelberg
Resolvedppelberg
OpenNone
OpenNone
OpenNone
OpenNone
OpenNone
OpenNone
OpenNone
OpenNone

Event Timeline

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/