Warning: actual maths included, please do not continue without consulting your doctor.
Whilst working on the new Playlist-Converter site, I decided to temporarily list it on the old site to get people’s feedback. And while analyzing the Hotjarrecordings, I noticed a common problem. (See if you can spot it here).
Although, it clearly says “Preparing your download …” and has a spinning icon to signify “Loading”, 99% of user keep clicking the Get link button to try and download!
But since the API still hasn’t responded with the files, clicking does nothing so the users usually give up and close the site.
This is a serious UX problem, but .. how can I solve it?
1st Idea: Add a please wait in BOLD… Nope it failed
2nd Idea: Change the button text from “Get Link” to “Please Wait” … still nope.
3rd Idea: What about progress bars? Yeah!! Progress bars, people love them but they are hard to implement with the way I was handling the downloads.
There was no way I could get the content-size using the Ajax requests I was making. So what do I do now? FAKE IT.
According to these answers on StackExchange, it’s not a bad thing:
Summary: Wait animations, such as percent-done bars and spinners, inform users of the current working state and make the process more tolerable to the user by reducing uncertainty. Users experience higher satisfaction with a site and are willing to wait longer when the site uses a dynamic progress indicator.
But what is a “fake” progress bar, you may ask? Well, the key behavior of this progress bar is the fact that it starts fast, then slows down, and never reaches the end.
How do we do this? Quick maths.
We’ll be using a sigmoid function (commonly employed in learning algorithms but that’s for another blog post). More specific, the inverse tangent function with a couple of changes.
When we look at the red line from left to right, we can see that it is going up fast from 0 to 1, and then the rise slows down. Around 2.5 it is almost straight, but not quite. The thing is that the line will keep going up forever, just very slowly. And it will never touch the “y = 1” line. Basically an asymptote.
Why do we need this? If we use this function and keep incrementing the x value the progress bar percentage will start rising BUT it will never hit 100%.
However, if we used the inverse tangent as it is, the result would be disappointing .(Forgot to take a screenshot)
It goes too fast and that doesn’t look very pretty. So with some simple if statements and arithmetics we can make it start fast, slow down around 70%-80% and continue slowly..
(Btw I’m using bootstrap progress bars hence the “progress-bar” class)