NProgress: slim, site-wide progress bars

I find these fake progress bars a borderline-dark pattern: in general, the goal is to deceive users into waiting for progress that isn't truly happening, with the goal of holding their eyeballs.

I worked, for a brief instance in time, at a roadside produce stand. At first I got really hung up on whether or not I could give a customer an accurate, precise answer to their question. With time, I realized that 19/20 customers didn't want the correct answer; they simply wanted a confident answer to allay their concerns.

To wit: a customer asked for a tomato with qualities A, B, and C (anyone who thinks that such a conceptually complex interest in tomatoes is unnecessary needs google 'heirloom tomatoes'). I recommended a Black Krim tomato which, to the best of my knowledge, I believed would meet all of her needs.

She happily purchased six Black Krim tomatoes and went along her merry way. I then asked my manager if there was a better recommendation.

He promptly told me that 1) I was diametrically incorrect in my choice for meeting her needs, and 2) it didn't matter, even in the least.

Sure enough, later that week the same customer came back and specifically thanked me for my excellent recommendation.

I've been reading the comments on various progress bar threads here and elsewhere in the past few days, and I think many of those who dismiss this UI pattern are missing the forest for the trees.

It's not about accurately representing the loading of elements in the page. It's not about accurately predicting and displaying when the page will finish loading. It's not about supplanting browser features for the sake of establishing a site-wide or web-wide standard.

---

It's about making the user feel like things that are out of their view and control are working properly.

---

When I look back on my childhood experiences with computers in the 80s and 90s I distinctly remember my litmus test for "is it frozen" was "can I hear those clicky noises from the hard drive".

Those noises told me nothing directly actionable nor did they accurately describe what had been done or what was left to be done. If, hypothetically, I ran an app caught in some bizarre infinite I/O hard drive loop those noises would have been misleading, and I eventually would have given up and hard-rebooted the computer

Spinning wheels generally act consistently; a loading bar such as this juts and pauses without any noticeable pattern. It gives us the impression that something is happening behind the scenes that we can't directly observe. If it acted uniformly we might just as easily believe that a dumb loop was living out its repetition.

Actual representation of reality is not the point. Perception is the point.

I'm sure that popularity could result in a harmful cliche-ification of this UI pattern, but I believe it has its place and its purpose. A browser cannot divine the amount of content that will be loaded on a dynamic site pre-execution.

At this point in time, at least, I don't mind encountering these loading bars. I can't really think of an example that irk me in any way. If I notice an in-site loading bar sticking around for a while there's probably something happening (or not happening) that would have pissed me off whether or not that loading bar were there.

Not to denigrate the work done here, but I find it hard to see the excitment over this new UI pattern as anything more than a fad, and anticipate that will go through a highly predictable cycle of 'why you need a progress bar' through 'progress bars considered harmful' etc. etc.

I suggest rereading this insightful article from last year when the Pinterest layout was flavor of the month. http://jfornear.co/the-pinterest-layout-will-not-save-you/

I work for Microsoft as a UX prototyper. One of the research studies we did was something similar to this a while back. One of the findings we had was that if there was any motion at all on the screen, the user felt something was happening. It didn't have to be prominent, just noticeable. If you're doing voice input on windows phone, the vu meter is just a series of very small dancing dots. To let the users know that they could speak, we'd blip one or two of those dots up - hardly anything at all, and indistinguishable from noise, but it let users know stuff was happening. Motion means that something hasn't gone wrong. It means that gears are still spinning.

That's also why windows phone has so many 3D transitions between screens. We use longer transitions for heavier load times, because it makes those load times seem faster. The transitions don't have to be prominent though, at least from the studies we did. They just need to be there.

We decided to open source our loader @ Arthrex today, very similar but a different feel.

http://jqueryajaxloadingbar.herokuapp.com/

https://github.com/arthrex/jquery.ajaxLoadingBar