Page MenuHomePhabricator

Design Mockups for Overlay to manage performance expectations
Closed, ResolvedPublic

Description

Create mockups of the proposed interaction design workflow.

Designer: @iamjessklein
Design Review: @alexhollender
Engineering Review: @matmarex
PM Review: @DannyH


Success Criteria:

  • Mockup sufficiently provides a solution to the problem of managing contributor expectations T210626
  • Engineering can use the mockups to implement the solution

Why are we doing this?
Currently during slow page loads a user only sees a spinning throbber on a white background. Several editors have reported that this is confusing and several aborted their edit.

User story

As an editor on the mobile web, with low bandwith conditions, I would like to be informed of the page load progress.

Mocks + Prototype
Click-through prototype: https://iamjessklein.github.io/wiki-overlayse/prototype.html

On tap article scrolls to correct positionDisabled editing toolbar emerges from top of pageArticle Opacity lowersUn-selected section content and section editing buttons transparency lowers to zeroSection title shifts to alignProgress bar and microcopy progressively displayProgress bar and microcopy disappearArticle opacity raises and editable content appearsDisabled toolbar components become enabled

Changes to the Toolbar:

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptDec 10 2018, 3:04 PM
iamjessklein added a comment.EditedDec 10 2018, 5:55 PM

I did a first draft for discussion. What's happening here is:

  • the user clicks the editing button
  • a “screenshot” of the users last action is taken and cached
  • the user is shown that screenshot sees the text on their screen masked with a gradient overlay and a progress bar
  • the target screen that the user was expecting eventually loads and is displayed

Please provide high level feedback here and specific comments on the design directly in Phabricator.

This looks fine.

a “screenshot” of the users last action is taken and cached

On a technical level this may be a little misleading because we won't be doing any screenshotting, just putting an translucent overlay over the page to make it non-interactive.

iamjessklein updated the task description. (Show Details)Dec 10 2018, 9:24 PM

Thanks @Esanders I tweaked the copy above to try to (hopefully) avoid any confusion.

Yeah, this looks good. A progress bar will be helpful, much better than the current throbber.

It sounds like we have general consensus in terms of the direction, so I am going to move into higher fidelity mockups.

cc/ @Esanders @Nirzar @Whatamidoing-WMF

Things that I taking into account in the next iteration include:

  • Surfacing the toolbar to the user
  • The effect of the progress bar with the browser progress bar
  • Supporting text (conditional communication)
  • OOUI progress bars
This comment was removed by iamjessklein.
iamjessklein updated the task description. (Show Details)Dec 17 2018, 5:28 PM
iamjessklein added a subscriber: matmarex.
iamjessklein added a subscriber: phuedx.EditedDec 18 2018, 1:47 PM

Here are the three flows that we are going to work through here (although we are only implementing the VE specific proposed changes) :

  • Lag in getting into VE mode
  • Lag accessing the Talk page
  • Lag in switching Watchlist Tabs

Note: the lag in switching Watchlist tabs is actually not visible, there doesn't appear to be any loading message - it just stalls on the page for a very, very long time.



cc/ @phuedx @alexhollender @matmarex

Although I am still working through the correcting timing, here's a work in progress version of the prototype: https://iamjessklein.github.io/wiki-overlayse/prototype.html

Here's a gif:

iamjessklein updated the task description. (Show Details)Jan 17 2019, 3:52 PM
iamjessklein updated the task description. (Show Details)Jan 17 2019, 3:54 PM
iamjessklein updated the task description. (Show Details)
iamjessklein updated the task description. (Show Details)Jan 17 2019, 4:24 PM
iamjessklein updated the task description. (Show Details)Jan 17 2019, 5:09 PM
DannyH updated the task description. (Show Details)Jan 17 2019, 6:36 PM
iamjessklein updated the task description. (Show Details)Jan 23 2019, 1:25 PM
iamjessklein updated the task description. (Show Details)
iamjessklein updated the task description. (Show Details)
iamjessklein updated the task description. (Show Details)Jan 23 2019, 1:38 PM
iamjessklein updated the task description. (Show Details)Jan 23 2019, 1:50 PM
iamjessklein updated the task description. (Show Details)Jan 23 2019, 1:55 PM
iamjessklein updated the task description. (Show Details)Jan 23 2019, 1:57 PM
iamjessklein updated the task description. (Show Details)Jan 23 2019, 2:01 PM
iamjessklein updated the task description. (Show Details)Jan 23 2019, 2:06 PM
iamjessklein updated the task description. (Show Details)Jan 23 2019, 2:09 PM
iamjessklein updated the task description. (Show Details)
iamjessklein updated the task description. (Show Details)Jan 23 2019, 2:13 PM
iamjessklein updated the task description. (Show Details)
iamjessklein updated the task description. (Show Details)Jan 23 2019, 2:16 PM
iamjessklein updated the task description. (Show Details)Jan 23 2019, 2:28 PM
iamjessklein updated the task description. (Show Details)
iamjessklein updated the task description. (Show Details)Jan 23 2019, 2:32 PM
iamjessklein updated the task description. (Show Details)Jan 23 2019, 2:34 PM
iamjessklein updated the task description. (Show Details)
iamjessklein updated the task description. (Show Details)Jan 23 2019, 2:40 PM

@matmarex I added the "stills" of the animation to the task description. This should help us to implement it.

(I started working on implementation, posting patches and other comments on T210630)

iamjessklein updated the task description. (Show Details)Jan 25 2019, 5:12 PM
iamjessklein updated the task description. (Show Details)

@alexhollender and @matmarex are we good to close this ticket? 👍or 👎please

iamjessklein updated the task description. (Show Details)Jan 25 2019, 6:09 PM
iamjessklein updated the task description. (Show Details)
iamjessklein updated the task description. (Show Details)Jan 25 2019, 6:12 PM
iamjessklein updated the task description. (Show Details)Jan 25 2019, 6:18 PM
iamjessklein updated the task description. (Show Details)Jan 25 2019, 6:23 PM
iamjessklein updated the task description. (Show Details)Jan 25 2019, 6:26 PM
iamjessklein updated the task description. (Show Details)Jan 25 2019, 6:33 PM
iamjessklein updated the task description. (Show Details)Jan 25 2019, 6:37 PM

Seems good, I like the last small tweaks.

iamjessklein closed this task as Resolved.Feb 11 2019, 3:56 PM

The mockups are in a good place and have been approved by the design team. I'm closing out this ticket as it is currently being implemented.