Design Mockups for Overlay to manage performance expectations
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	• iamjessklein
	Dec 10 2018, 3:04 PM

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 position	Disabled editing toolbar emerges from top of page	Article Opacity lowers	Un-selected section content and section editing buttons transparency lowers to zero	Section title shifts to align	Progress bar and microcopy progressively display	Progress bar and microcopy disappear	Article opacity raises and editable content appears	Disabled toolbar components become enabled

Changes to the Toolbar:

Related Objects
Search...

Status	Assigned	Task
Resolved	None	T210626 [EPIC: Focus] Loading screen improvements
Resolved	• iamjessklein	T210631 [Design EPIC]: Loading screen improvements
Resolved	• iamjessklein	T211595 Design Mockups for Overlay to manage performance expectations

Event Timeline

• iamjessklein created this task.Dec 10 2018, 3:04 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptDec 10 2018, 3:04 PM

• iamjessklein mentioned this in T210631: [Design EPIC]: Loading screen improvements.Dec 10 2018, 3:06 PM

• iamjessklein added a parent task: T210631: [Design EPIC]: Loading screen improvements.

• iamjessklein added a project: VisualEditor.Dec 10 2018, 3:21 PM

• iamjessklein moved this task from 📚 Backlog to 📐 Doing on the Editing Design board.Dec 10 2018, 3:58 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

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

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

JTannerWMF edited projects, added VisualEditor (Current work); removed VisualEditor.Dec 10 2018, 6:00 PM

JTannerWMF moved this task from Incoming to Needs Design/Design Doing on the VisualEditor (Current work) board.

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

• iamjessklein moved this task from 📐 Doing to ⚠️ Blocked on the Editing Design board.Dec 13 2018, 5:07 PM

• iamjessklein mentioned this in T209708: Catalogue where the MobileFrontend loading overlay is used.Dec 13 2018, 6:05 PM

• iamjessklein moved this task from ⚠️ Blocked to 📐 Doing on the Editing Design board.Dec 14 2018, 7:30 PM

• iamjessklein added a comment.Dec 14 2018, 7:41 PM

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 mentioned this in T211597: Create Loading Overlay user testing plan.Dec 17 2018, 6:12 PM

• iamjessklein updated the task description. (Show Details)

• iamjessklein added a subscriber: • alexhollender_WMF.

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

Jdlrobson subscribed.Dec 19 2018, 3:14 PM

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: