Page MenuHomePhabricator

Make refinements to mobile MVP to align it with UX requirements
Closed, ResolvedPublic

Description

NOTE: the scope of this task be finalized next week, the week of 5 June. [i]

This task involves making refinements to the first iteration of the Edit Check MVP (mobile) user experience prior to sharing it with volunteers to test and review.

Requirements

This section contains the adjustments we've agreed are in scope.

ItemDescriptionCurrent experienceDesired experienceStatus
1.New content is not always visible when the Add a reference card appears
Screenshot 2023-06-01 at 12.33.58 PM.png (758×1,340 px, 221 KB)
Done
2.People should be offered an opp. to contextualize why they've decided not to add a reference. Read: people should see a multiple choice form when they tap the No button in the "Add a reference" card.Currently, people who tap No are returned to the full-page editing experience and when they attempt to publish by tapping , they are repeatedly shown the "Add a reference" card Done
3.A button should appear within the Before publishing view
Screenshot 2023-06-01 at 12.39.54 PM.png (762×268 px, 40 KB)
Done
4.People should see where within the document the reference they just generated will be placed.
IMG_5A25CFDE79E6-1.jpeg (1,179×1,992 px, 887 KB)
Currently, the "Add a citation" card appears while the new content you've added is out of sight
Broken in iOS
5. A toast should appear within the save dialog that enables people to confirm they've successfully done what they were intending to do (add a reference)
IMG_F97BC08581E4-1.jpeg (1,179×1,972 px, 415 KB)
Currently, upon tapping Insert people are taken directly to the "Save your changes" view
Done
6.People should be able to navigate back to the "Add a reference" card from the "Add a citation" dialog.
IMG_44C134687F47-1.jpeg (1,179×1,961 px, 215 KB)
Currently, a X appears that, when tapped, drops them back into the full-page editing experience effectively causing them to abandon the progress they'd made
Done
7.Line break shown as added content
IMG_7830.jpg (716×1,305 px, 591 KB)
Done
8.Reduce white space present within "Add a reference" card
whitespace.png (1,170×1,980 px, 806 KB)
Done
9.Enlarge "Add a reference" font size so that it matches "Before publishing" font size
font size.png (1,179×1,974 px, 746 KB)
Done
10.Adjust appearance of "Add a reference" card so that it relates to in-document text highlight
color.png (1,171×1,974 px, 710 KB)
Currently, the "Add a reference" card background is blue, while the in-document highlight is a pink'ish color
Screen Shot 2023-06-06 at 20.12.24.png (1,126×1,644 px, 184 KB)
highlight + card background color: #FCE7FE. border color: #D02AAC
Done
11.Further constrain how much of the view is scrollableCurrently, browser's vertical scrollbar can appear "atop" the "Add a reference" edit card: https://youtube.com/shorts/QkhMjF2f55A?feature=shareBroken in iOS
12.Adjust appearance of text highlighting when inserting citation
EditCheck-insert.png (724×1,284 px, 90 KB)
Removing the border around the text highlight to emphasize the focus of the citation insertion (active state)
Broken in iOS

Open questions

  • 1. What – if any – revisions should be made to the appearance and/or behavior of the X button that currently appears within the "Add a citation" view. Currently, when people tap the X they are sent back to the activated editing interface and presented with the same Add a reference dialog when they tap the button to advance to publishing.
    • Replace X button with a button so people can return back to the place they arrived to this screen from and avoid losing the "progress" they've made. This adjustments is represented at "6." in the === Requirements section above.
  • 2. What should happen when people tap the < button within the "Save your changes" view. Currently, people are taken back to the full-page editor with the editing toolbar being the only interface elements visible shown on-screen.

i. By next week, I assume the Editing Team will have had time to converge on the set of improvements

Event Timeline

ppelberg moved this task from Backlog to Triaged on the EditCheck board.

The task description now reflects the adjustments @nayoub see as being worthwhile to implement prior to sharing the prototype with volunteers for feedback.

Next steps

  • @nayoub: to add designs (if they exist) for each of the "Desired experience" rows/items in the === Requirements section
  • @Esanders, @nayoub, and @ppelberg: to review the task description and define the final scope of adjustments

Some thoughts for discussion later:

  1. Done
  2. How critical is this for the MVP? Have we worked out how/where will will store the data?
  3. Done
  4. I can't reproduce this
  5. Going straight to the confirmation screen is how we have it in the final design iteration. Given the screen below shows the reference in position with the reference info, is there much value in adding another step?
  6. Agreed, but not sure if this is required for an MVP (might be less than trivial to implement).

Reduce white space present within "Add a reference" card

Done

Enlarge "Add a reference" font size so that it matches "Before publishing" font size

Done

People should be able to navigate back to the "Add a reference" card from the "Add a citation" dialog.

Done, although still with an X instead of a <

Below is a summary of what @Esanders, @nayoub, and I converged on when we meet earlier today. I've also updated the task description to reflect the below...

Requirements

  1. People should be offered an opp. to contextualize why they've decided not to add a reference. Read: people should see a multiple choice form when they tap the No button in the "Add a reference" card.

DECIDED: move forward with implementing the "No" workflow which, to start, will comprise the following:

  • Implementing the "Not adding a citation" view that contains a multiple choice question people can answer
  • Investigating effort required to pre-propulate edit summary dialogue based on what option people select from within the "Not adding a citation" view
  1. People should see where within the document the reference they just generated will be placed.

DECIDED: feasible to fix at this time

  1. People should see some visual indication that enables them to confirm they've successfully done what they were intending to do (add a reference)

DECIDED: for the MVP, after people tap Insert within the Adding a citation card, people will be automatically taken to the save dialog and a toast should appear that reads, Thank you for adding a citation!

  1. People should be able to navigate back to the "Add a reference" card from the "Add a citation" dialog.

DECIDED: we'll implement the above a caveat: X will remain in Add a citation dialog; however, when people tap X, they will be taken back to the Add a reference card.

Loose

Line break shown as added content

DECIDED: in scope; we'll fix

Reduce white space present within "Add a reference" card

DECIDED: in scope; we'll fix

Enlarge "Add a reference" font size so that it matches "Before publishing" font size

DECIDED: in scope; we'll fix

Adjust color of "Add a reference" card background so that it matches in-document text highlight

DECIDED: @nayoub to propose a solution; see: T338173.

Currently, browser's vertical scrollbar can appear "atop" the "Add a reference" edit card

DECIDED: we'll investigate; see task description for screen capture demonstrating issue.

ppelberg updated the task description. (Show Details)
ppelberg updated the task description. (Show Details)
ppelberg moved this task from To Triage to Triaged on the VisualEditor board.

Thanks @Esanders & @ppelberg, here are the latest requirements:

ItemDescriptionCurrent experienceDesired experienceNotes
1.New content is not always visible when the Add a reference card appears
patchdemo.wmflabs.org_wikis_11d2cc5162_wiki_Douglas_Adams_useformat=mobile(iPhone SE) (2).png (750×1,334 px, 225 KB)
On Safari (iOS) & Chrome (mac desktop), the text highlight is not visible above the card.
6.People should be able to navigate back to the "Add a reference" card from the "Add a citation" dialog.
patchdemo.wmflabs.org_wikis_11d2cc5162_wiki_Douglas_Adams_useformat=mobile(iPhone SE).png (750×1,334 px, 63 KB)
Currently, a X appears that, when tapped, drops them back into the full-page editing experience effectively causing them to abandon the progress they'd made
The "x" is still in the header and there's a new Scan ISBN barcode button that appeared (can we remove it for now before we see how to include in the UI?). Was keeping the "x" a factor of not changing Citoid?
13.New content is not always visible when the Insert citation card appears
patchdemo.wmflabs.org_wikis_11d2cc5162_wiki_Douglas_Adams_useformat=mobile(iPhone SE) (1).png (750×1,334 px, 213 KB)
On Safari (iOS) & Chrome (mac desktop), the text highlight is not visible above the card.

Per what @Esanders and I talked about offline today,:

  • Issues 1. and 13. need more investigation.
  • Issue 6. will remain as-is for now per T337992#8903717:

DECIDED: we'll implement the above a caveat: X will remain in Add a citation dialog; however, when people tap X, they will be taken back to the Add a reference card.


ItemDescriptionCurrent experienceDesired experienceNotes
1.New content is not always visible when the Add a reference card appears
patchdemo.wmflabs.org_wikis_11d2cc5162_wiki_Douglas_Adams_useformat=mobile(iPhone SE) (2).png (750×1,334 px, 225 KB)
On Safari (iOS) & Chrome (mac desktop), the text highlight is not visible above the card.
13.New content is not always visible when the Insert citation card appears
patchdemo.wmflabs.org_wikis_11d2cc5162_wiki_Douglas_Adams_useformat=mobile(iPhone SE) (1).png (750×1,334 px, 213 KB)
On Safari (iOS) & Chrome (mac desktop), the text highlight is not visible above the card.
nayoub renamed this task from Make refinements to MVP to align it with UX requirements to Make refinements to mobile MVP to align it with UX requirements.Jul 1 2023, 7:15 AM

hey @nayoub – I'm assigning this task over to you to review and verify the extent to which the changes we've specified have been made in ways that meet what you're expeting.

Once the above is done, please move this to Ready for sign off.

Looks great, thank you @Esanders & @ppelberg.
Moving to Ready for sign off.

(side note: this is the latest Patch Demo)

Ryasmeen subscribed.

On mobile, when Edit Check is getting triggered and I tap "Yes" to proceed, it takes me to the "Add a Citation" dialog. But when I tap on any of the options on that dialog to add a reference, it takes me straight to the save dialog, without giving an opportunity to add the citation. It even shows the toast "Thank you for adding a citation!".

A separate task has been created for this: T346405. We can close this one! :)

On mobile, when Edit Check is getting triggered and I tap "Yes" to proceed, it takes me to the "Add a Citation" dialog. But when I tap on any of the options on that dialog to add a reference, it takes me straight to the save dialog, without giving an opportunity to add the citation. It even shows the toast "Thank you for adding a citation!".