Comment by lelandbatey | Hacker News Reader

Comment by lelandbatey | Hacker News Reader

Parent Full thread

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 page would just sit there till you where re-directed to your finished gif.

The first bit of advice I got from anyone was "this is sooo slow, what's happening?" The problem was, I didn't actually have any way to understand how long/what was going on in the backend. So I decided to take the next best approach:

I fake it.

As soon as you click the "make a gif" button, the bar starts loading. However, that bar has no basis in reality. It takes exactly 40 seconds to fill up, no matter what's going on.

However, everyone loves it! All the comments I got said how much better it seemed to make the experience. Even though it's a fake loading bar.

I have an app that does some prediction based on values that a user enters. The prediction works pretty fast – unnoticably fast, like 50ms or so.

However, I had the idea to use a progress bar to achieve the opposite effect: To introduce an artifical waiting time together with a sense of progress (hence, progress bar). This should convey the feeling that the app is working hard to make Your Personal Prediction and since the app appears to be calculating a lot of stuff, the prediction Must Be Totally Accurate.

Surely, the target users are not necessarily sophisticated technical people.

I haven't implemented it but I definitely want to try it out.

We had this issue on our website - our "Browse" is essentially an SPA that fetches results from an API upon any action being taken; such as sorting, pagination, adding filters etc. We had the fetching and rendering happening in an average of 30-50ms, which meant most users didn't even realise the page had refreshed apart from what appeared to be a faint blink on the whole page.

We actually had to put in a setTimeout() for 500ms with a loading gif, followed by an scrollTo() to the top of the results just so users would know something actually happened.

I like to use an asymptotic function for fake progress like this:

t/(t+n)

With n set to a bit under half the average load time, if generally looks about right, too.

Yep, I use them pretty often now. What I would like to do is create a library for this. Features would include:

1. Choosing arbitrary time estimate to use as a target.

2. Providing distractions for if the estimate is much too low (show a secondary progress bar or spinner, maybe even misdirect so the primary bar can backtrack without the user noticing)

3. Calibration based on real results. A simple way would be to use linear regression to map the input guesses to real world results. Then the resulting equation should be easily available to plug into a persistence library or LocalStorage, so that you continue to get accurate results moving forward.

This is a fantastic hack: it's fake, but everyone still loves it. It makes the user experience better. Nice work.

Online tax software like TurboTax does this as well. It says crap like, "Loading your profile from last year..." or "Verifying your data is correct..." with a bar that takes 5 or 10 seconds to fill up before highlighting the Next Page button. But you can just click the Next button anyway and it'll go instantly.

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.

The iPhone SMS sending bar does the same thing.

Reply on news.ycombinator.com