Live data from Hacker News

NProgress: slim, site-wide progress bars

ricostacruz.com

131–140 of 143 posts

Re: NProgress: slim, site-wide progress bars

#131
post #87

Earlier quoted context omitted.

> 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. This is why I hate talking to sales people in brick-and-mortar stores. Appearing confident rather than actually being correct is probably good for closing sales and for short-term customer happiness, but it's no good for the longer-term (ie, when you get home and realize you made…

> Appearing confident rather than actually being correct is probably good for closing sales and for short-term customer happiness, but it's no good for the longer-term Well, that depends--and that's where my metaphor breaks down. The customers went home satisfied and remained satisfied (at least, that's what their consistent repeat business and smiling faces would suggest). Tomatoes and website loading times matter t…

Yeah, it's definitely context-dependent. Buying the wrong kind of tomato may not matter if you're going to eat them for dinner that night. But if your plan is to grow tomatoes using the seeds from the ones you purchased, it suddenly becomes a bigger problem.

You can apply the same reasoning to this UI element. Sometimes - most of the time? - the user doesn't really care about the amount of progress made. They just need to know that something is happening. But at other times, they need to know how much time is actually left on the progress. If that's the case, you need to care about more than just perception.

Re: NProgress: slim, site-wide progress bars

#132
post #104

I don't see any license specified. Is there a plan to license this software?

README on the GitHub repository says MIT at the very bottom, but agreed that it would be nice if this was more prominent.

Thanks for pointing that out. I see it now and the full text has been since added to the repository. I was looking at the source and only saw copyright!

Re: NProgress: slim, site-wide progress bars

#133
post #104

Earlier quoted context omitted.

README on the GitHub repository says MIT at the very bottom, but agreed that it would be nice if this was more prominent.

Thanks for pointing that out. I see it now and the full text has been since added to the repository. I was looking at the source and only saw copyright!

Copyright forms the basis of F/OSS licenses; if you don't own the copyright, you can't put it under a F/OSS license in the first place.

Good to see that there's now a License.md file. (I would have called it LICENSE instead, but eh, bikeshedding.)

Re: NProgress: slim, site-wide progress bars

#134

Earlier quoted context omitted.

This is 100% true. I shared this story in another comment yesterday, but I'll share it again here: On one of my one-off side projects( http://gifmachine.xwl.me/ ), there's a rather silly example of the importance of loading bars. In the first version, the design was quite bare. There were a couple of textinputs and a "make gif" button. The way the code happens to work, when you press the "make gif" button the web pag…

I like your app, it's very cool. One thing though, make sure you add some validation on the fields. Right now when I click on "Make a gif" without anything populated, it loads to some point and throws an error.

Haha, yes it is a very unsafe/not well validated project. There are many things like that. For example, there is no limit to either the length of the gif, or it's size in pixels. As a result, some people have generated huge gifs, on the order of hundreds of mb in size.

Re: NProgress: slim, site-wide progress bars

#135
I just made something similar yesterday that shows a progress bar based on amount scrolled through targetted content: https://github.com/RyanNielson/jquery-progress

I whipped it up quickly so I'm sure there's room for improvement. Feel free to post any issues or enhancement ideas on Github.

Re: NProgress: slim, site-wide progress bars

#136

It looks great, but why should we start promoting this as a UI pattern? This seems like a step in the wrong direction, and just because Youtube does it doesn't mean that others should too. If you need a visual cue that something is loading on your page, throw up some kind of spinner or other animation that doesn't have a fixed beginning and end. Unless you think you know how to accurately measure the time that http r…

Compare the subjective wait for the spinner and progress ar in this demo: http://jsfiddle.net/gUkgX/1/embedded/result/ Notice how much longer you seem to wait with the spinner? Watching a progress bar fill up with a definite end feels way faster. I have often used progress bars that have no connection whatsoever with the process they're "measuring". Here's the technique I've found works well: 1. Estimate the time the…

> since it will take a while for the user's brain to adjust to the slower speed

Wait, what?

Re: NProgress: slim, site-wide progress bars

#137

Earlier quoted context omitted.

Compare the subjective wait for the spinner and progress ar in this demo: http://jsfiddle.net/gUkgX/1/embedded/result/ Notice how much longer you seem to wait with the spinner? Watching a progress bar fill up with a definite end feels way faster. I have often used progress bars that have no connection whatsoever with the process they're "measuring". Here's the technique I've found works well: 1. Estimate the time the…

> since it will take a while for the user's brain to adjust to the slower speed Wait, what?

Sorry, that could have used more explanation, especially since I'm really hypothesizing after the fact about why it works better to start fast and end slow, and that hypothesis involves a few steps of inference.

It's pretty clear that the human brain is good at simple integration over time to predict where an object will be in the future, or how long it will take to reach a destination. What it doesn't seem to be as adept at is estimating those things when something is changing speed. I would guess that the reason for this is a combination of the math being harder, the results being more noise-sensitive, and it being less crucial in our evolution to anticipate rapidly accelerating or decelerating targets.

So my first premise is that we estimate time-to-destination based on speed, and that we are slow to update the estimate when the object changes speed.

My second premise is that time perception is heavily influenced by expectation. If click something and then nothing happens for a moment, our wait-time expectation is essentially unbounded, since we aren't even reasonably sure that anything is happening.

If you add a spinner, we become more confident that the wait will end, but the time expectation is still high. If the spinner lingers for too long, our only way to update the expectation is something like "I will be waiting for some significant proportion of the amount of time I've been waiting so far". That's not good, because it actually causes your expectations to invert with respect to reality; as time goes on, you feel further from the end, not closer.

So the idea is that a progress bar feels faster because it gives a decreasing expectation of time left. If the progress bar is accurate, then once it has moved half way, you will expect to wait exactly as long as you have already waited.

Now, the trick with the decelerating progress bar is that it lets you beat accurate expectations by causing the user to underestimate how long they will be waiting.

For example, suppose you accurately estimate that it will take 6 seconds. In the first two seconds, the progress bar will fill, about linearly, to 40%. The user will therefore expect the bar to be full after 5 seconds. After 4.5 seconds, it will be 75% full. If the user were to estimate based on there entire time so far, they'd correctly expect to wait another 1.5 seconds. But that doesn't seem to be what happens. Instead, the user continues to expect less. And so on. In the final moments before the progress bar disappears, the user simply doesn't have time to adjust their expectations.

What seems to lend additional credence to this hypothesis is that you can get even better results by adding random slowdowns and speed ups (while maintaining an average fill curve of erf(erf^-1(estimate)*t/estimate)). When the bar passes the 75% mark where it slows down for good, the user still expects another jump. You can even confirm this expectation by filling the bar at the end it disappears, since at expected completion it will only be 87% full.

Re: NProgress: slim, site-wide progress bars

#140
post #113

Earlier quoted context omitted.

Is this also why Explorer's progress bar approaches the end asymptically, with no regards to the actual number of files processed? It drives me NUTS, to say the least.

I always knew there must be some solid UX reasoning behind those file copy dialogs.

It's not a file copy dialog, it's a file search dialog.

The file copy dialog was never like this.

In fact, the Windows 8 file copy dialog is not only good, but fantastic.

Post reply on HN