Page MenuHomePhabricator

Re-design progress bar for OOUI
Closed, ResolvedPublic

Description

Create mockups of the proposed interaction design workflow.

Designer: @iamjessklein
Design Review: @Volker_E
Engineering Review: @Esanders
PM Review: @ppelberg @DannyH


Success Criteria:

  • Mockup sufficiently provides an update to the current progress bar
  • Solution considers mobile displays

Current Solution:

progressbar.gif (186×714 px, 8 KB)

Proposal

image.png (392×1 px, 33 KB)

Event Timeline

Esanders renamed this task from Design progress bar for OOUI to Re-design progress bar for OOUI.Jan 23 2019, 5:31 PM
Esanders added a subscriber: Esanders.

Maybe it would help to identify what is wrong with the current solution?

The current progress bar isn't consistent with the style guide and recent updates to OOUI (it appears outdated in both interface style and animation).

From my perspective there's also the point that the current progressbar seems inflexible in different use cases.
It needs a different visual treatment when put into an overlay like in T211595 versus an in-page loading animation underneath a toolbar (something similar to what mobile browsers offer underneath the address bar browser chrome) versus a use case on dark backgrounds (both the latter as combined visual attributes in MMV).

To extend @Esanders input, we should collect the different use cases (responsive canvas size) and give a closer to the weaknesses.

VE:

T214477 VE loading progress bar.png (739×1 px, 211 KB)

Issues, some technical, some design:

  • Not responsive,
  • never seems to load 100%, rarely above 50%,
  • doesn't provide more than visual feedback, tackled in T211595,
  • feels a bit lost in a big overlay as only element in the middle,
    • square? Might work better with rounded end parts, similar to tag items?

MMV:

T214477 - MMV progress bar - 1970 AMC Ambassador SST hardtop yellow-black K-t - Bumper (car) - Wikipedia 2019-01-25 18-32-45.png (1×2 px, 1 MB)

Issues:

  • Mixes indeterminate (rolling bars) and derminate looks,
  • doesn't provide more than visual feedback, although with the image loading, users are more used to such(?)

The current progress bar isn't consistent with the style guide and recent updates to OOUI (it appears outdated in both interface style and animation).

It is slightly unique within our current widgets, but it does generally follow the theme in colour/border radius.

What do you mean by "appears outdated in ... animation"?

  • Not responsive,

I think it is responsive, it just has a max width

  • never seems to load 100%, rarely above 50%,

That's an implementation detail of VE

  • doesn't provide more than visual feedback, tackled in T211595,

Again, an implementation detail, although we may want to standardise a label component in the widget (for either % progress or other messages)

  • feels a bit lost in a big overlay as only element in the middle,
    • square? Might work better with rounded end parts, similar to tag items?

It has the standard rounded corners (~2px?), not sure circular would look better.

Here is the task about inconsistent progress bars across the site: T75972, which includes an old but still fairly accurate audit of the different progress bars in use.

iamjessklein added a subscriber: Unknown Object (User).

After doing a bit of research and checking in with the other Foundation designers, here's the distilled use cases:

  • Search results
  • Article loading
  • Explore feed (apps, perhaps future on web)
  • Saving articles
  • Loading editing view
  • Loading preview
  • Loading results in a model (eg. template wizard)

I am going to work on some ideas and will post.

Here are some initial sketches that go from a simple update to thinking about this as an opportunity to give the user a pat on the back for being part of the Wikimedia community.

IMG_0274.JPG (1×1 px, 369 KB)

IMG_1519.JPG (1×2 px, 569 KB)

Should we de-couple this ticket from the general overlay feature update T210631? I think that we should consider doing this to avoid delaying the general functionality updates.
cc/ @ppelberg @JTannerWMF

I agree, @iamjessklein (provided @Volker_E is okay with the inconsistency in the interim).

Decoupling is fine but we should still reference the ticket in the Design Epic and reference our work in this one. Does that make sense?

@iamjessklein @ppelberg De-coupling seems fine to me. Let's make sure to aim for resolving this before eoq though!

Volker_E triaged this task as Medium priority.Mar 13 2019, 10:31 PM
matmarex moved this task from Incoming to Stalled/Waiting on the VisualEditor (Current work) board.
matmarex added a subscriber: matmarex.

I don't know what is to be done here, or if anything is to be done at all. I am not currently working on this.

Hopping on idea above to set it apart from most interaction widgets by using similar border-radius like on TagItemWidgets and consider if progress bars shouldn't be appear elevated by default and box-shadow should be removed when needed instead. See related task T247620.

With rounded borders and default dialog box shadow of WikimediaUI theme:

image.png (392×1 px, 33 KB)

Additionally, the VE progressbar got some special CSS rules, that are non-OOUI conforming and seem outdated:

.ve-init-mw-progressBarWidget {
	height: 0.75em;
	border: 1px solid #36c;
	background: #fff;
	border-radius: 2px;
	box-shadow: 0 0.1em 0 0 rgba( 0, 0, 0, 0.15 );
}

.ve-init-mw-progressBarWidget-bar {
	height: 0.75em;
	background: #36c;
}

The VE progress bar copies in the OOUI styles because it needs to be show before OOUI loads. If they are out of date they should be updated.

VE:

  • feels a bit lost in a big overlay as only element in the middle,

I agree in VE the progressbar feels lost, hanging in the middle of nowhere. @iamjessklein's hand-drawn mock (T214477#4943481) with a small dialog around the progressbar better communicates that the whole editor area is being loaded.

  • square? Might work better with rounded end parts, similar to tag items?

I'm not a Mac user, yet I find rounded progressbars very elegant and fitting for most use-cases. +1 for rounded in full width, not just the corners.

MMV:

  • Mixes indeterminate (rolling bars) and derminate looks,

One of the most unpleasant part of MMV is the rolling bar animation. It's overly distracting and noisy.
I have the same impression of the Echo popup's rolling loading animation, I think that's the same or very similar.
I've spent hours making a rolling gradient animation for Echo in my theme and it was worth the time. I'd suggest rethinking this rolling animation or just dropping it.

I'd also make the progressbar thinner for MMV, it feels overwhelming. But imo circular progress in the middle of the image would be the best.

  • square? Might work better with rounded end parts, similar to tag items?

I'm not a Mac user, yet I find rounded progressbars very elegant and fitting for most use-cases. +1 for rounded in full width, not just the corners.

What do you mean by “not just the corners”? Please expand.

What do you mean by “not just the corners”? Please expand.

border-radius: 2px; (rounded - 4 separate arcs in the corners) vs. border-radius: 1em; (circular - 2 separate arcs at the end of the bar)

I think the rounded corners are a nice touch and are in line with other rounded elements like the TagMultiselectWidget with fixed items.

Change 604144 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] WikimediaUI theme: Update ProgressbarWidget with new design

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

I generally prefer the rounded square corners we use for other widgets. The fully rounded corners are quite rare in our interface, but I won't object if that's what others prefer.

I vote for the ones in the proposal, they are the direction much of our UI is heading.

Change 604144 merged by jenkins-bot:
[oojs/ui@master] WikimediaUI theme: Update ProgressbarWidget with new design

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

Change 607443 had a related patch set uploaded (by Jforrester; owner: Jforrester):
[mediawiki/core@master] Update OOUI to v0.39.2

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

Change 607443 merged by jenkins-bot:
[mediawiki/core@master] Update OOUI to v0.39.2

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

Change 608511 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/VisualEditor@master] Use standard WikimediaUI theme styles

https://gerrit.wikimedia.org/r/c/mediawiki/extensions/VisualEditor/ /608511