Page MenuHomePhabricator

Toolbar in loading overlay should display sooner in sequencing
Closed, ResolvedPublic

Description

Designer: @iamjessklein
Engineer @matmarex
Design Review: @Volker_E
Product Review: @ppelberg
Engineering Review: @Esanders


Why are we doing this?

Based on the design review that @Volker_E did: T210630#5003426
The proposal increases the perceived performance enhancements

User story

As a mobile web editor, I would like to be able to quickly go from reading to editing content.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 6 2019, 4:32 PM

After looks already like a good step forward!
One user expectation comment: Could we show the toolbar a bit earlier while the progressbar is still visible, in order to further distract people from loading time and allow them to accomodate with the bar?

I don't think the title summarises the original request: It sounds like Volker is asking for the bar to be shown earlier, not animated quicker.

We can't build a real toolbar until the VE code is loaded, which is what causes the delay. The best we could do have a placeholder.

Esanders added a comment.EditedMar 6 2019, 4:45 PM

The best we could do have a placeholder.

The placeholder could be empty, or a generic version of the toolbar (although that would require manually duplicating a bunch of styles from VE and OOUI, which wouldn't be great).

What we could do is make this toolbar placeholder into the progress bar. W e already do something similar in VE source mode editor, as we had to move the progress bar out of the way of the surface as you can start editing the document VE code is ready:

(wouldn't have to be a progress bar, could be some sort of animated toolbar skeleton)

iamjessklein renamed this task from Speed up the animation of the toolbar in loading overlay to Toolbar in loading overlay should display sooner in sequencing.Mar 6 2019, 4:48 PM

Yes, a placeholder!1!

I'll mock up some treatment options for us to consider.

A few initial thoughts:

  • We could use the space as a place for copy and the loading indicator
  • We could use skeletons
  • We could have an exact image of the toolbar

I think the first two ideas might be worth exploring more because localization of an image isn't ideal.

I'm iterating in Freehand, here's the latest round of ideas:

cc/ @Esanders @Volker_E @matmarex

They all seem reasonable to me. I don't have a particular preference.

@iamjessklein Here's some feedback on each of them:

  1. Proposal 1
    1. Dark blue Accent10 is currently only used in interactive elements to signify an actively chosen state, like in a clicked button.
    2. We use three bouncing dots apart from indeterminate loading bar as second standard indicator, not a circular throbber
    3. Let me understand, why the close button (x) is so prominent, can we abandon loading now?
    4. “Loading …” – Wouldn't “Loading editor…” or “Loading Visual Editor…” be preferable, what are we loading exactly? I think a label could be helpful, but it should carry better description. Also, at least in German, there's no whitespace between word and ellipsis.
  1. Proposal 2
    1. I like that the W comes in, so you always know where you are
    2. Grey over blue as indicator color, is this part of T214477? What was your idea? I see design thought behind that, but still think that blue is guiding focus better than grey.
  1. Proposal 3
    1. Better than status quo, but seems more complex than for example #4 as we have to deal with different button length due to internationalization
    2. Also missing advantages of #2 or #4 of giving either a better orientation (“I'm on Wikipedia”) or a preview of the editing interface so that users can get accommodated
  2. The progress bar above the content signifies stronger that content is to be loaded, but it's not my personal preferred position compared to #1 and #2
  1. Proposal 4
    1. Similar feedback like #3, missing added textual loading label advantage

From my point of view based on the issues visible, when the close button question is resolved, I'd suggest to try going with

  • W and textual loading indicator while showing a dimmed “Publish” button and the indeterminate progress bar
    • either underneath the header or (my preference)
    • on top of the content

Thanks @Volker_E - I actually want to take a step back as I was not shooting for feedback on the visual design. The designs below are updated to reflect feedback from others (including @Esanders @matmarex @alexhollender @Nirzar ) The problem that we are solving here is actually about wayfinding so that the Editor stays focused on making her edit. I think that we should iterate on one of these two directions because they do not rely on the look or feel of the toolbar (which we know is going to change in the near future). I've updated the Freehand, and here's a screenshot:

Update: After doing a design review, it's clear that option A is the direction that we should take here because:

  • it focuses the user on the toolbar real estate, signaling a mode change
  • we won't know what the toolbar looks like, so with this solution we won't have to fake it
  • the indeterminate spinner will indicate that it's in progress
  • the textual messaging will also indicate what is loading

I will work on the visual design to share.

I'm done with the ux on this ticket. I will be iterating on the UI in T1181
Handing over for implementation.

cc/@matmarex

On proposal "B" you have "might compete with browser loader".

In my testing on Android and iOS, the only time the browser progress bar appears in when the initial page is loading, however in 99% of cases the user will be loading the editor dynamically from the read page, so this won't be an issue.

Change 510067 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/extensions/MobileFrontend@master] Mobile VE: Show fake toolbar while loading

https://gerrit.wikimedia.org/r/510067

Change 510068 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/extensions/VisualEditor@master] MobileArticleTarget: Update loading interface for new design

https://gerrit.wikimedia.org/r/510068

Change 511073 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/extensions/MobileFrontend@master] Mobile VE: Add localisation messages for fake toolbar

https://gerrit.wikimedia.org/r/511073

Change 511073 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Mobile VE: Add localisation messages for fake toolbar

https://gerrit.wikimedia.org/r/511073

Change 510067 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Mobile VE: Show fake toolbar while loading

https://gerrit.wikimedia.org/r/510067

Change 510068 merged by jenkins-bot:
[mediawiki/extensions/VisualEditor@master] MobileArticleTarget: Update loading interface for new design

https://gerrit.wikimedia.org/r/510068

ppelberg closed this task as Resolved.Jul 19 2019, 2:08 AM