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
1.png (3×1 px, 1 MB)
1.png (3×1 px, 1 MB)
2.png (3×1 px, 1 MB)
3.png (3×1 px, 1 MB)
4.png (3×1 px, 1 MB)
5.png (3×1 px, 1 MB)
4.png (3×1 px, 1 MB)
8.png (3×1 px, 1 MB)
9.png (3×1 px, 1 MB)

Changes to the Toolbar:

toolbarstates.png (1×1 px, 124 KB)

Event Timeline

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

ve-loadingscreen.gif (641×519 px, 582 KB)

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.

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

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.

Screen Shot 2018-12-18 at 8.37.59 AM.png (922×1 px, 324 KB)

Screen Shot 2018-12-18 at 8.39.24 AM.png (1×2 px, 956 KB)

Screen Shot 2018-12-18 at 8.39.48 AM.png (1×2 px, 835 KB)

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:

se+overlay-prototype.gif (687×366 px, 539 KB)

iamjessklein updated the task description. (Show Details)
iamjessklein updated the task description. (Show Details)

@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)

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

Seems good, I like the last small tweaks.

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.