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 Hotjar recordings, I noticed a common problem. (See if you can spot it here).
Although, it 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 site, clicking does nothing and they finally give up and close the site.
How can I solve this UX problem?
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 bar, 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 exactly 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.
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)
And once we fetch the data we can show the 100% Complete progress bar using this:
$(".progress-bar").css("width","100%").attr("aria-valuenow", 100).text("100% Complete");
clearInterval(interval); // Important to stop the progress bar from increasing
I hope you enjoyed this little trip to the world of mathematics and if you have any questions, let me know in the comments 😄
Before I forget, here are some recording with the new progress bar in action:
And don’t forget to check out the new playlist converter site: https://beta.playlist-converter.me
Also published on Medium.