[Blue Ocean] Design for "Loading Screens"

[Cliff Meyers]

I wanted to take an opportunity to share some work I've been doing around the user experience in Blue Ocean, specifically in the area of "progress and interstitial states", more commonly known as "loading screens."

We want to make sure that users understand when the application is busy loading data and we want the transition from "loading" to a rendered screen to be as smooth and aesthetically-pleasing as possible.

Under the hood, we want be able to realize this experience with a minimal amount of boilerplate code, and develop a toolkit that makes it easy for others to adopt the same design elements. To that end, I've produced a design document that discusses some of the challenges (and possible technical solutions) around all this:

https://docs.google.com/document/d/1DMuhbLlq7vJYOjory4AQWnSolhhK23Wu6DbExRDkgTY/edit#

The document also briefly touches on error states in a few places, as they are fairly closely related to progress states and could be handled similarly. The doc also links out to a branch in Github that illustrates how this could work in the context of the current Blue Ocean code base.

Please go ahead and share any thoughts you have here on the thread. Looking forward to your feedback!

-Cliff

[Michael Neale]

Some good ideas in there. 

One thing I am curious about is if people look for their "browser loading" as a sign of "things happening" (I am not actually sure myself, I think I ignore it) - which makes interstitials even more important (including some animation to show action). 

Facebook seems to do a good job at this, and now I think of it, I pay no mind to what my browser says, in fact, as I use chrome, it kind of hides it out of the way. I have to look right at the top at a tiny tab-spinner, or down the bottom left for very pale text telling me what assets it is loading. 

So yes, this is important!