Technology July 21, 2016 Last updated September 18th, 2018 1,699 Reads share

Progress Indicators: A Nice Unexplored Territory to Raise the Mobile App UX ‘bar’

Image Credit:

Visibility of progress at different stages within an app is important to inform users how much time it will take to reach their desired screens. A progress bar or an indicator is pivotal to reduce user tension, and let them feel secured about loading in progress. Allowing users to guess around, raises doubts regarding indefinite results in their minds.

We did our part of analysis, and while doing this came across a wide variety of progress indicators or bars. What we came up with is a whole lot of creative ideas to consider, while introducing the same in your app. However, before that, let us have a brief on a good progress indicator.

Progress Indicators: A Nice Unexplored Territory to Raise the Mobile App UX ‘bar’

What kind of progress bar do users expect in an app?

Not necessarily, a user has an instant app response at every single point in an app. There are times when things take too much time to load. At this point, you need to keep hold of your users, for which you have these progress indicators coming into play. Delays can be due to issues with the latency, or loading times terribly slow. Keeping users informed at this stage, through a nice looking creative progress bar, enhances an app user experience (UX). Nevertheless, we can classify the progress status into three different stages,

• Past: What just happened before the start of the progress?
• Present: What is currently going on?
• Future: What will happen after the end of the progress?

Signs of an effective progress indicator

Efficient progress bars are well equipped with delivering an instant feedback. They not only communicate users that the process will take longer but also informs them about how much time it will take. They serve two very important purposes:

• Decrease any kind of uncertainty arising in user minds
• Offer a real strong reason for users to wait

Remember these points,

• A user activates waiting time, as soon as an action initiates. Hence, provide a prompt visual feedback, to handle their request.
• Provide a progress bar or indicator only for actions taking beyond 1 second. They serve no purpose for actions less than one second.

Types of progress bars or indicators to look for

#1. Determinate VS Indeterminate VS Hybrid VS Buffered

Determinate indicators will indicate the progress according to the operation time an action is taking. Based on the percentage completion, the indicator will move ahead progressively.

Indeterminate indicators will only indicate the action in progress, without actually indicating how much the action has completed. Herein, there is a constant movement from start to finish.

Hybrid indicators carry features of both determinate and indeterminate ones. First, there is an indeterminate indicator showing that the process is taking place, and then you have a determinate indicator showing where the progress has reached. This happens alternatively, and that too very fast.

Buffered indicators are ones where the progress accompanied by the amount of buffering that has taken place so far. Herein, there are two indicators running in parallel, a bright one, and a blurred one. The bright one moves constantly showing the progress, while the blurry one accompanies slowly displaying the amount of data buffered.

#2. Looped Animation

An animated graphic loop is a nice way to say that the system is working just fine. However, users do not have detailed information on how long the waiting time will be. Hence, it is wise to keep looped animations for actions taking 2-10 seconds normally. Simply staring at the bounce rate could result in an increased bounce rate. You can avoid this scenario by introducing loading text along with such looped animations, to keep users informed why they have to wait.

Again, you have two types – determinate and indeterminate. Determinate loop moves in parts, disappearing for a microsecond in between, telling users exactly that the process is still on. While indeterminate loop moves constantly, not informing users even if the process has hung.

#3. Customized Looped or System Animation

If you ever have a chance to look at the Facebook app, you will understand what we are going to discuss. Facebook has its own personalized looped animation in the form of a loop resembling like a sun, and even a system loop looking as if you have a chain of vertical rectangles. When rectangle based animation used in earlier days within the Facebook app, users started blaming the app for delay. However, with sun like looped animation in place, which is similar to that in iOS, people started blaming the OS and not the app.

#4. Linear Animation

It is a nice cleaner way to determine the progress. A determinate linear animation fills from 0% to 100%, and it will constantly move ahead, without decreasing in value. However, when many operations going in parallel, an indeterminate indicator works best, that constantly moves from start to finish, not telling users the exact amount of progress. This turns out to be helpful in avoiding users getting scared, seeing the percentage level taking too much time, moving from one digit to next one.

#5. Percentage Based Animation

Uncertain waits are much more killing as compared to finite waits. Percentage animations represented in creative format are best not just to kill time, but also grab user eyeballs until the process completes. However, such animations are only suitable for actions with duration in more than 10 seconds.

#6. Text Format Indication

Instead of showing any kind of animation, how about informing users in a text-based format, and encourage them to wait. A simple textual line having some creative words, and said to the point, is enough to keep users waiting for a while.

#7. Progressive Animation

Progressive bars work best when you want to show something different from what is actually happening behind the scene. When progressive animation introduced, users will assume that the process is taking faster. However, the reality is it is taking much slower than you could possibly imagine. Herein, delays in progress covered up with ease, by introducing faster indeterminate animations. Keeping it slower at the start, and increasing the speed gradually, will let users think that the process is happening at a brisk pace without any delays.

#8. Stepwise Animation

This is good when you want to tell users the exact number of stages to reach the goal. When stages indicated by steps, users know exactly where they are currently present, and regarding how many steps still to go. They can have an easy estimate of the stages they have completed, and ones that are still to complete.

#9. Skeletal Screens

This is probably the best way, we would personally recommend, indicating things in progress. Ensuring the waiting time to be as much pleasant as possible is the best way to have users waiting for long. Skeletal screen is a blank version of the original screen, with data loading taking place slowly and gradually.

Such screens have users keep their focus right on slowly loading data and content, rather than on the waiting time, they have to invest. Skeleton screen always has this element of surprise, which keeps users guessing on the kind of content getting loaded one by one. A blank version coming up instantly and the actual content coming later is a great way to keep enthusiasm alive among users.

Use dynamic ones instead of the static ones!

Static indicators as “Loading…” or “Please Wait” are of no use whatsoever, due to a high amount of uncertainty factor, not telling users where exactly they are and how much they have still to go. Since they do not offer any extra information, users are bound to get bored soon, ultimately leaving the app.

What we discussed above are all different types of dynamic progress indicators. They not just distract users from a tiresome waiting time, but add up an element of fun to the overall experience, letting them ignore waiting times with ease.

Delivering feedback is a fundamental principle not to ignore. A positive user experience reduces uncertainty, leveraging the opportunity to keep users waiting without any complaints.

Images: ” APPS concept with young man holding his smartphone outside in the park toward sunset   / Shutterstock.com

____________________________________________________________________________

Tweak Your Biz is a thought leader global publication and online business community. Today, it is part of the Small Biz Trends stable of websites and receives over 300,000 unique views per month. Would you like to write for us?

An outstanding title can increase tweets, Facebook Likes, and visitor traffic by 50% or more. Generate great titles for your articles and blog posts with the Tweak Your Biz Title Generator.

Jennifer Brown

Jennifer Brown

Read Full Bio