Questions tagged [progress-bar]

An interface element that indicates the progress of process by filling a percentage of a shape (usually a rectangle or a bar) with a color. The percent of the bar that is filled reflects the progress (If the action is 25% complete, the progress bar will be 25% full).

Filter by
Sorted by
Tagged with
285
votes
6answers
26k views

Why do progress bars animate backwards?

Gmail's new loading bar drew my attention to this today: The colored pattern inside the bar animates from right to left. The Mac OS progress bars do the same: Is there a reason for this? If I was ...
170
votes
8answers
20k views

At what point does a user lose trust in a Busy Spinner?

The first scenario is an action that could take roughly 2–5 seconds to execute once the user has pressed a button. A Busy Spinner will be displayed in the button until the process has been ...
75
votes
9answers
8k views

Does user care about the details while loading?

I need to load some information on Android devices and showing a progress bar immediately came to my mind. Now here's the problem: The time it takes to get the content ready(download/decode/buffer) ...
73
votes
10answers
8k views

Why are progress bars horizontal?

Question sparked by this discussion. Why are progress bars almost always presented as horizontal lines that increase from left to right? Is this the best method of indicating progress (and why)? And ...
54
votes
14answers
8k views

Should a progressbar go both ways?

I'm developing a long-running algorithm and want to give my users an idea of what is the current state of the calculation. I thought of adding a progress bar indicating the percentage of all the ...
54
votes
10answers
5k views

How to make a progress-speed bar more understandable?

I've just installed Windows 8 and noticed the brand new File copying dialog. When expanded, it shows the progress and the current transfer speed in one graph. However, the graph confuses me greatly. ...
53
votes
8answers
3k views

Should I fill empty space in bars?

It's about bar-charts in a table. Every row has a bar, which visualises a value of the row. The biggest value of the whole table is the maximum of the bars and not necessarily on the same table-page....
45
votes
7answers
11k views

When do users understand that a wizard navigation bar is clickable?

In my web application, I use a wizard navigation bar like the one in the image: While getting feedback from a fellow designer, he asked me if the progress bar is clickable. In my mind, most wizard ...
37
votes
14answers
6k views

Slow down job for better progress animation

So, I am in a situation where I am developing an internal application that executes a list of many task items, some of which have multiple steps. For each task item, I also have a progress bar. Well, ...
34
votes
5answers
3k views

At what point should an application change the cursor to an hourglass or display a progress bar?

Our WPF desktop application will be executing various tasks. In general, the average length of time for each task will range from basically instant to a few seconds or longer (possibly minutes). We ...
31
votes
10answers
9k views

Progress Bars - Why are they never “useful”?

I'm sure many people have noticed this before and I can't be the only one to be annoyed by this, but progress bars (I'm referring typically to those that display the progress of the execution of ...
25
votes
7answers
3k views

Should progress bars show percentage

In the application I am designing we are currently just displaying a circle that rotates clockwise from gray to green. Inside the circle is a number indicating where in the process it is (20, 50, 90). ...
24
votes
3answers
7k views

Progress - When should I go from 100% to 0%, or vice versa?

I have a web app I'm building for my business which essentially tracks an employee's progress doing a pick in a warehouse. The interface has a progress bar that's colored in, and it's full, and as ...
22
votes
3answers
2k views

Is it a bad idea to have two progress bars in one dialog?

Discussing with my team-mates this morning but we're not sure which one is the best way. Scenario: When users select a single document to process, they will see a progress bar and text displaying its ...
21
votes
2answers
2k views

Do progress bars help completion rates?

I'm expanding on a question I posed in comments on How do you indicate progress to users in a multi-step form?. Roland made the comment "because everybody wants to reach 100% percent" when discussing ...
20
votes
5answers
2k views

Displaying wait indicator for a long running task — which sometimes completes quickly

In a web application I am working on there are some actions which usually take a few seconds or longer, depending on typical variables (connection speed, PC speed, amount of data involved, host load, ...
19
votes
5answers
4k views

How to display zero percent of progress?

I want users of my application to perform 5 exercises a day. I'd like to have a GUI element which shows their current progress, which can be 0,1,2,3,4 or 5. I thought about using something like a ...
19
votes
3answers
1k views

How to show progress towards goal?

On our intranet we display some numbers for our employees so they can keep track of their performance goals. Currently it's just a table. We'd like something more visual, and this was the first ...
18
votes
4answers
3k views

Showing progress for a long many-step process with a discrete progress bar?

I've got a desktop-focused web application where the user is going to be initiating tasks that take a long time. Sometimes, these tasks will take hours to complete (users don't have to do anything ...
17
votes
8answers
3k views

Making a Streak Visualization More Intuitive

I'm currently working on a website for tracking habit change. On the report page, I have goal cards users interact with in order to record their progress: The donut chart in this example is trying to ...
17
votes
6answers
14k views

How do you indicate progress to users in a multi-step form?

What do you think of the following form design which I've prepared? there's a progress bar in the top on the right side the steps are listed, and every time the current state is indicated by ...
16
votes
7answers
3k views

Which UI design pattern is this? (progress bar at the top of an article)

On this page there is a progress bar at the top which progresses as you scroll down. I’m really intrigued by this UI pattern. Does anyone know its name or its origin?
14
votes
4answers
2k views

Can a visual progress bar be used as a navigational element?

We're having a bit of a debate here among teammates as to what would be a better UX solution, so I was hoping you guys could help me settle this. We have a linear flow through a data-collection ...
14
votes
7answers
711 views

The rationale of progress indicators for online articles

The display of a non-interactive progress bar that reflects the amount of content that the user has read/scrolled through seems to be reflecting the trend that users want distinct visual indicators as ...
14
votes
3answers
623 views

A single, long load - or multiple short loads, which would provide a better experience?

I have a very large, modular web application. When it starts I can do things one of three ways: A moderately long load time (about 60 seconds) to fetch all of the modules from the server (presented ...
14
votes
1answer
955 views

What do the three bars in old installers mean?

Quite many old setups look kind of like this: I always wondered what the three bars in the bottom left-hand corner mean. I really have no clue.
13
votes
4answers
2k views

Is it bad UX to omit a progress indicator?

Background: Stack Exchange now lets you paste images from the clipboard into the image upload dialog. Unfortunately, there is no indication that an upload is going on. I am wondering if this is really ...
13
votes
3answers
2k views

What is the name for the technique used on Yammer, LinkedIn etc profile pages?

The technique I mean is where the profile page will say "You have completed 60% of your profile, fill in your x, y and z to get to 100%". I think this is a very powerful technique but I can't remember ...
13
votes
3answers
5k views

Indeterminate Progress Indicator Styles

When you have an operation that has too many factors to reliably give an estimate of actual progress towards task completion, you'll often find an indeterminate busy/progress indicator. Through the ...
12
votes
13answers
4k views

How do you visually represent “progress” on a negative (lower is better) goal?

I may have some terminology wrong but I think the idea is sound. There are a variety of ways to represent progress when you are increasing a number and trying to get to some set number. Usually you'...
11
votes
4answers
2k views

Using progress bars in long web forms: motivating or demotivating?

I've been going through the jQuery demos to determine which UI widgets could be used to help optimise our user's journeys through our web forms. One such widget is the progress bar, but it raises a ...
11
votes
7answers
1k views

What gives the impression of faster progress: progress bar or countdown?

Any thoughts on what would be a more effective progress indicator: a progress bar or a countdown? I've seen both used and get the feeling that with the countdown, time seems to pass faster.
10
votes
6answers
2k views

Show progress as percentage or as absolute numbers?

I'm making a simple progress bar based on the amount of minutes a user has spent, and the amount of minutes she's required to spend on a certain task. See below for an example. I'm considering 3 ...
9
votes
7answers
1k views

Showing excess usage in a progress bar

I am working on a web app and would like to display the amount of transfer (bandwidth) that the user has used for that billing period. They are given a certain amount of bandwidth per billing period. ...
9
votes
3answers
14k views

Battery - what percentage range to use for each color?

I need to display battery with 3 colors: green, orange (or yellow?) and red. This device's battery (like iPad, iPhone etc..) with a battery life of up to two days. What percentage range to use for ...
9
votes
2answers
2k views

How to deal with variable number of steps in discrete progress bar?

We have an application that various other departments will use to create questionnaires. These questionnaires can hide or show extra questions based on responses to previous questions. When creating ...
8
votes
2answers
1k views

Progress bar for credit card credit

I'm designing a graphical widget to show credit card credit but I'm not sure that the bar moves in the right direction. Currently, as the customer spends their credit, the bar moves from right to ...
8
votes
7answers
883 views

Conveying progress for a set of items each with 2 stages

I think I have an issue with the hierarchy of information in trying to convey progress to a user. On the dashboard of a non-profit dashboard I have the following option: The organisation deal with ...
8
votes
1answer
2k views

How to design a progress tracker for a mobile environment?

I currently have a web form that is designed for full screen desktop/laptop/tablet displays. As it is a multi-step form, there is a progress progress tracker at the top of the page, highly designed ...
8
votes
4answers
3k views

Is it a good idea to show progress indicator inside a button?

Typical examples: http://msurguy.github.io/ladda-bootstrap Crazier examples: http://tympanus.net/Development/ProgressButtonStyles This is for a desktop app if it matters. Consider that the target ...
7
votes
4answers
1k views

How to handle long processing task in UI?

We have a Desktop based WinForms application. Application performs some very complex logic in database and is bound to take long time. By long time i mean it will take anything from 1 min to 20 min ...
7
votes
3answers
3k views

Multipart progress / status bar colours

I am working on an application that needs to show users their currents status / progress in performing a task on a number of items. There are three states that each item can have: New (blue) - ...
7
votes
2answers
971 views

When shortening time expressions in progress dialogs, should they be rounded up or down?

When a user executes any prolonged task, including downloading large files or copying many files, an interface such as the one below is typically displayed to keep the user informed of the progress. ...
7
votes
2answers
627 views

Any good examples of how to show an overview of the status of multiple items moving through a process?

I'm working with a client on the design of a tool runs an analysis on school data and presents the user with reports that help them support their schools This is the process a user goes through: A ...
6
votes
4answers
502 views

Progress bar that allows to understand both current and maximum values

I need to design a health bar for a game, so that the player could guess at a glance not only its relative value (i.e. amount of remaining health compared to its maximum), but also to understand how ...
6
votes
4answers
3k views

Alternatives to the progress bar

I'm designing a website which elements that have a "progress" property, a bit like change.org or KickStarter. Both of these websites use the classic progress bar. We would like to innovate. What are ...
6
votes
5answers
306 views

How do I display a minimum requirement in a way that encourages the user to exceed it?

I'm designing a budget planning tool for sales reps. The reps must spread their budget across 5 different categories of spend, three of which have a minimum spend allocation. The organization would ...
6
votes
3answers
270 views

How should I alter my programs progress bar?

An application I have just been asked 'to take care of' has some interesting code features. One is that when it is loading up the login screen, it displays a 'splash' with a progress bar. This splash ...
6
votes
2answers
793 views

UI pattern for showing progress of concurrent tasks?

This is in the context of a desktop application. Typically if you fire off a request to some back end server then it is nice to be able to show some sort of progress indicator in say the status with ...
5
votes
4answers
196 views

How to distinguish between progress and consumption visually?

I am working on a product that shows how much time the user has consumed . To represent this visually I have used a reversed progress bar but it still feels like a progress bar , increasing. Are ...