Best Practices in Designing Awesome Progress Bars
Make their waiting interesting and enjoyable by designing awesome progress bars.
Your users want progress bars when they are waiting for a file to download or a process to complete.
Source: Hongkiat
Waiting is boring. More so if you are staring at a static screen.
“How long will it take?”
“What’s next?”
“Looks like it’s not happening any soon.”
“Leave it. I will do this later.”
And gone.
We all have experienced this before while downloading a file, refreshing a page and filling a form. And we all have felt exasperated at some time, left the activity and moved on to other things.
Internet users are highly impatient. A few seconds delay and chuck it in. But, on some occasions, delay is inevitable. A large file will take a few seconds to download. Creating an account will take some time. Refreshing a page will take a few seconds. Ordering your groceries online will take a few steps.
“But wouldn’t it be great if I know how much longer do I have to wait?”
Progress bars are made for such time-taking actions. The thought behind it is, if a user knows the time a particular action will take, he will be prepared to wait for it. Or complete the activity in his free time. But he won’t be exasperated. Keeping the user experience intact.
So what are progress bars? And what to do to design awesome progress bars that boost user experience?
Progress bars are visual indicators that inform users-
- How long a particular activity will take?
- What’s the current status now?
- How close the user is to completing the task?
Users want progress bars
Humans love progress bars. A survey by Lightspeed Research and Kantar, on progress indicators reveals that people want a progress bars as it:
- Increases user satisfaction.
- Boosts respondent engagement.
When respondents in the no-progress-bar group were asked whether they prefer to have some indication of progress, 75 percent said yes.
Types of progress bars
- Determinate indicators: It is used for quantifiable activities and displays how long an operation will take.
- Indeterminate indicators: It is used for asynchronous background processes and visualizes an unspecified wait time.
While progress bars are of two types, you can go creative in designing your own progress bars like that of Microsoft’s spinning hourglass.
Where to use progress bars?
Progress bars need to be selectively used. They are helpful but not happy situations for users. So use progress bars-
- To inform users about activities that will take time.
- To inform users about the progress of a multi-step activity like filling a form, booking an order etc.
How to design awesome progress bars?
- Inform your users: Why they need to wait? What’s happening? Informing your users will make your users wait or else they may assume it as a bug and move onto other websites. Include a label with a progress bar to add context. Don’t use vague terms like ‘Loading’ and ‘Processing’. Use simple, meaningful sentences that inform users.
If the progress bar is for checkout or a survey then use labels with subheading informing your users about the steps.
Source: Smashing Magazine
- Make it a part of your overall design: Your progress bar must look distinctive. But nothing stops you from give it a flavor of your website or app. Use same colors or similar shades of it. If possible use your logo, mascot and branding style to design it.
- Keep it interesting: Remember waiting is boring. Don’t make it more painful with bland progress bars. Make it interesting. Use animations to make it playful. Bring in some activity that makes users enjoy while waiting for his task to complete.
- Give your progress bar good visibility: Use a progress bar in a view, not a window frame. Progress bars shouldn’t be used within portions of window frames, such as in toolbars and status bars. For progress bars displaying content downloading like refreshing timeline or news feed, put it at the top if the content is updating from the top and at the bottom if content is updating at the bottom.
- Allow people to pause or cancel, if possible: Users like control. Give them control to pause or stop the process midway if they wish to. If pausing or stopping the process has any side effects like loss of previously filled data then warn them with a message.
- Keep your progress bar moving or spinning: Keep your progress bar moving so users know something is happening. Making it stationary will indicate stalled process. And people like movements even if it is at small pace.
Source: UX Stack Exchange
- Make it look faster: While it will take its scheduled time to complete the activity, you can make it look faster. Use distractions to make your progress bar speedier. A bouncing spinning wheel. A linear bar that starts slowly but ends fast- all help to create perceptions of speed. Use some gamification so that make your users enjoy their wait.
Source: Pinterest
- Don’t misreport progress: Don’t report inaccurate progress information just to stop your users from leaving your website. An inaccurate progress indicator will mislead users causing further annoyance.
Source:HowtoGeek
Progress bars are highly useful from user experience point of view. Users want to complete their tasks fast. As fast as possible. But there will be processes and tasks that will check their patience. As a designer, you can help your users wait by designing good, meaningful progress bars. This will improve your site’s or app’s usability and user experience.
Did I miss any of the best practice you are using while designing progress bars? Tell us about your rules in the comments section.
Liked the article? Share it with your friends on Twitter and Facebook.
