Page MenuHomePhabricator

Loading indicators / Progress indicators are inconsistent.
Open, MediumPublic

Description

There's a range of different loading indicators in our products.
Let's unify them.

Content translation - loading article (content).

Notifications - loading notifications (content)

Structured Discussion - loading more topics (content)

loading contents on infinite scroll

MobileFrontend - loading "nearby" articles (content)

VisualEditor - loading tool (tool)


Side notes:


Standard UI elements to use:

Related Objects

Event Timeline

KLans_WMF triaged this task as Medium priority.Dec 1 2014, 6:52 PM

@Pginer-WMF can you link to the indeterminate loaders that are being used in flow/CX please?

This doesn't make much sense as a task for mobile apps. For system controls like loading indicators, it's much important to use the platform's built-in controls rather than making our own arbitrary ones, because our app should be consistent with other apps in the platform.

For example, the Android platform has the Toolbar class (which we use for our toolbar) which has a built in progress bar; that's the standard paradigm on the platform, and we'd need a really good reason to intentionally make our apps incompatible with material design.

@Deskana, There are other other in-page loaders that you see occasionally, are these all inherited from mobile web? As far as inconsistency with Material Design or iOS guidelines, I feel we've already settled on a look and feel that is wikimedia, rather than being platform specific. I know that we've made subtle platform adjustments, but overall we've diverged pretty far from each platform's design in order to have something that is unique to the application.

@Deskana, There are other other in-page loaders that you see occasionally, are these all inherited from mobile web?

From the engineering perspective, we don't inherit anything about our UI from mobile web or desktop. It's nontrivial to inherit UI elements from mobile web for a variety of technological reasons. It's possible that they were designed the same way and therefore look very similar, however. You'd have to ask your designers about that. :-)

As far as inconsistency with Material Design or iOS guidelines, I feel we've already settled on a look and feel that is wikimedia, rather than being platform specific. I know that we've made subtle platform adjustments, but overall we've diverged pretty far from each platform's design in order to have something that is unique to the application.

Yes and no. We use material design icons in the Android app almost everywhere for things like search, table of contents, hamburger menu, etc. We also use an Android-spec progress bar for page load indication. For pretty routine operations like this, it means if someone's used another app on their phone then they reasonably know what to expect from ours. As mentioned, I would be reluctant to break that pattern.

In other places, we don't pay much attention to their guidelines (e.g. progressive action buttons in the editing workflow are not in line with Android). For editing I think that makes sense, because the editing workflow is so unique to our application.

But anyway, this is a pretty high level discussion. To figure out our next steps, could you say specifically what you're proposing we do in the iOS app and the Android app? Thanks!

sure, @Pginer-WMF has designs for an in-page indeterminate loading indicator, I'd like for us to consistently use this when we have in-page indeterminate loaders. On the app this could be… loading search results, long articles, large images, nearby lists, etc.

@Nirzar, didn't you at some point make prototypes of this indicator along with buttons? Is this same/related? Could you please add a link to that task?

brion added a subscriber: brion.Jul 9 2015, 8:28 PM
brion added a comment.Jul 9 2015, 9:35 PM

Over on T61699 I've got a hi-dpi update to jquery.spinner in MW core that doesn't change its design -- should I go ahead and try to land that as-is for now or wait on this design to replace it?

jm3 added a subscriber: jm3.Oct 20 2015, 3:53 PM
jm3 removed a subscriber: jm3.Dec 2 2015, 10:14 PM
violetto renamed this task from Polish : Indeterminate loading indicators are inconsistent. to Indeterminate loading indicators are inconsistent. .Dec 11 2015, 5:39 AM
violetto updated the task description. (Show Details)
violetto renamed this task from Indeterminate loading indicators are inconsistent. to Loading indicators are inconsistent. .Dec 11 2015, 6:10 AM

I changed from indeterminate to just a discussion of loading indicators so we can look at loading indicators as a whole. Documented here on MW: https://www.mediawiki.org/wiki/Wikimedia_User_Interface/Use_cases/Loading_Indicators

Pginer-WMF updated the task description. (Show Details)Dec 11 2015, 9:06 AM
Pginer-WMF updated the task description. (Show Details)
violetto updated the task description. (Show Details)Dec 11 2015, 6:47 PM
violetto updated the task description. (Show Details)Dec 17 2015, 5:29 AM
Restricted Application added a subscriber: TerraCodes. · View Herald TranscriptMay 6 2016, 8:11 PM
Restricted Application added a project: Design. · View Herald TranscriptJan 5 2017, 10:43 PM
RHo renamed this task from Loading indicators are inconsistent. to Loading indicators / Progress indicators are inconsistent. .Jan 16 2017, 11:02 PM

From a conversation in Contributors Design meeting this week, let's declare the 3 dots animation our in-view loading animation.
One small amendment that we should be making is increasing the contrast slightly, from @colorGray12 (#c8ccd1) currently to #54595d in order to ensure visibility.
We can still revisit this later for improvements or alternative animation proposals.

From a conversation in Contributors Design meeting this week, let's declare the 3 dots animation our in-view loading animation.
One small amendment that we should be making is increasing the contrast slightly, from @colorGray12 (#c8ccd1) currently to #54595d in order to ensure visibility.
We can still revisit this later for improvements or alternative animation proposals.

I'm ok in increasing the contrast, but using Base20 (#54595d) seems a bit too dark for a non-interactive element that we want to communicate background activity. I made examples for Base20, Base30 and Base50. I think that Base30 (#72777d) could be a good option if we want good-enough contrast without attracting too much attention.

Ok, I think Base30 is a good compromise as long as designers are aware of the context and consider upping contrast if indicator is used on a dark(er) background in order to stay well recognizable for affected users.

Volker_E edited subscribers, added: Jdlrobson; removed: violetto, Spage.

A follow-up note on mobile app discussion at T75972#845549
Apps should make use of the OS specific loading indicators if any possible.

Volker_E updated the task description. (Show Details)Jul 12 2018, 1:48 PM
Volker_E updated the task description. (Show Details)Jul 12 2018, 1:51 PM

CodePen now also includes small variant and variant with inverted colors for dark background usage.

Esanders updated the task description. (Show Details)Dec 17 2018, 6:18 PM
Volker_E updated the task description. (Show Details)Mar 11 2019, 5:42 PM
AnneT added a subscriber: AnneT.Oct 18 2019, 3:47 PM
Demian added a subscriber: Demian.Jun 17 2020, 1:40 PM