When use progress bar and spinner?

Thứ tư, ngày 07/12/2016 22:38 PM

​How would you feel if you asked someone at the store where an item was and they just stood there? You would probably get frustrated and move on. Users find themselves in this situation when same they see a spinner on their screen for a long time.

Spinners Are Not For Long Processes

Spinners don’t tell users how long the process will take to load. If you use it for long processes, they’ll end up wondering if something went wrong with the app. The lack of feedback creates uncertainty which makes users assume the worst.

They’ll assume that it’ll take a long time to load which discourages them from waiting. Impatience will set in and they may hit the back button or exit out of the app.

Spinner vs progress bar

4-Second Rule

If you want users to stay on your app, don’t use spinners for processes that take longer than 4 seconds to load. A research study has found that most users’ tolerable wait time is 4 seconds. This means that their behavioral intentions begin to change after 4 seconds.

When to Display a Spinner

Users expect an app’s response time to be immediate. An immediate response time is less than 1 second. If they don’t get any visual feedback after a second, they start to worry.

If you have a process that takes longer than a second, you should display a spinner. This lets users know that the app is loading which will ease their worries.

When use spinner

Progress Bars Make Long Processes Tolerable

If a process takes longer than 4 seconds to load, you should use a progress bar. Users are more willing to tolerate a long wait time if they see a progress bar.

Spinner and Progress bar

This is because it sets a clear expectation of the load time. The linear bar allows them to see that progress is being made which encourages them to wait. If they see a spinner, they can’t see any progress and don’t know if their action even processed. This gives them no incentive to wait.

How to Display a Progress Bar

A progress bar needs to show users how much progress is being made. Your bar should animate from left to right at a gradual and consistent pace. If the animation pauses for too long, users will think it’s stuck and won’t want to wait.

Display progress bar

You should also add a numeric estimation to your progress bar. If the process is under a minute, display the percent done or number of items loaded. Inform them what activity the app is doing as it loads.

If it’s over a minute, you should give them an estimated time remaining. This lets them know that they can expect a longer than usual wait time. Displaying the number of minutes allows them to leave and come back to their screen.

Don’t Go Spinner Crazy

Many designers have a habit of using spinners for all their processes. But when you use spinners for long processes, you create user frustration. Avoid this by using progress bars when needed.

Progress bars make longer processes tolerable. Users don’t mind waiting if they know the app is doing work for them. But if it’s taking longer than expected, they need visual feedback. Not knowing what they’re waiting for makes them impatient and leave.