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).

learn more… | top users | synonyms

6
votes
1answer
150 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.
9
votes
4answers
499 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 ...
3
votes
2answers
57 views

Showing progress for a determinate task that changes unexpectedly

The standard pattern for the use of progress bars/status is usually divided into two different types: Determinate progress where the amount of time/tasks is known, and the user interface reflects/...
3
votes
2answers
74 views

Visualize a percentile rank by filling a shape

I am making a visual to show a user what percentile ranking they are at. I want to use some fill concept to encourage the user to want to fill the object, and thus increase their ranking. Currently, ...
0
votes
1answer
10 views

How to indicate proportion of tasks in each of several sequential stages?

I have many (thousands) of tasks, each currently in one of 5 sequential stages. (So every task goes through the exact same sequence, but concurrently, so that some are at a different stage from others)...
6
votes
4answers
171 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 ...
3
votes
2answers
114 views

Complex wizard - when to tell user they are obliterating progress

I'm designing for an app that helps companies generate complex legal documents. We generally use a wizard with progress noted at the top. The progress can branch quite dramatically. We're faced with ...
3
votes
3answers
98 views

How to communicate that new content has been loaded without a loader

We have just released a new version of our app and the feedback I have got is: Issue with the app loading too fast when user is takin an action Problem: The app is reloading so fast when ...
0
votes
1answer
58 views

Documented reasons for preferring horizontal or vertical wrapping of checkbox items?

Given a simple (non-tabular) long list of small items, have studies shown a strong reason to prefer vertical vs. horizontal flow/wrapping of those items when displayed in a single 'field'? I'm ...
0
votes
0answers
26 views

How to implement a tool for the user to indicate what steps they've completed elsewhere?

I have a request for a tool that has the sole purpose of receiving, storing, and displaying where a user is in the process. All actions under each step are completed outside of this application. The ...
4
votes
4answers
99 views

Progress Indicator for Slow Progress Process

I am designing a quick reference status indicator for a customer facing application. We would like to allow our users to check their status with our help desk, though that process only has three ...
2
votes
1answer
52 views

Best message to display when migrating data?

The use case is this: users who downloaded a new version of an app will need to go through a data migration process after log in (which may last up to 1 minute) during which user data from an old ...
11
votes
13answers
1k 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'...
52
votes
10answers
4k 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. ...
7
votes
1answer
1k 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 ...
17
votes
7answers
2k 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 ...
28
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 ...
7
votes
2answers
864 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 ...
3
votes
1answer
282 views

Progress bar with mixture of determinate and indeterminate steps

I'm building a progress bar which needs to show additional information on a complex automated process. You have a number of distinct steps in the process (5-12 expected but not necessarily). Some of ...
10
votes
2answers
1k 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 ...
35
votes
14answers
5k 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, ...
18
votes
5answers
3k 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 ...
3
votes
2answers
444 views

Mobile app form - Better Alternative to horizontal progress bar?

I am working on mobile app form. Form contains 5 steps, given below- This is for iphone 5 and will not be fit in as it is, because on portrait mode step 3 and 4 getting chopped. What is the better ...
5
votes
1answer
408 views

Are form progress bars when each section has multiple subsections a good idea?

I'm trying to redesign the progress bar of a long application process. It is currently designed with a "top level" progress bar with 6 steps. As the user goes through each step, a separate "sub-level" ...
7
votes
2answers
323 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 ...
3
votes
6answers
292 views

Display time left for strongly varying times (graphically)

I have an overview page, where a user can see how much time is left vor various tasks. I want to graphically display this, but the difference between the times left for one and another task, makes it ...
2
votes
1answer
170 views

Displaying Hierarchical Progress Feedback

I have an application which processes data within a set of AutoCAD drawing files. Basically, there are a few parent drawings and a few child drawings. My objective is to create an informative progress ...
69
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) ...
3
votes
6answers
1k views

What's the best button progressbar?

I've made a sketch of different button progressbars, but I need to know which is the best one and why based on a few key factors: Perceived speed (fastest). Noise/Distraction level (least noise/...
1
vote
3answers
343 views

How should we handle UI when app performs network call and waits for a response?

This is a question related to mobile apps UX, and particularly to iOS apps. So, the question is if the screen contains user input fields and does a call over the network when user clicks send button (...
9
votes
6answers
467 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 ...
0
votes
2answers
272 views

Fill the whole progress bar

Should we always show to the user that the progress bar reach the 100%? Should we always fill the whole bar? Or just jump to the end message, and say something like 'finished'. I'm asking this ...
1
vote
1answer
476 views

Should a progress bar reflect the current step if a user goes back to edit a step?

I have a simple 4 step process where a user goes into each step, chooses items and checks out at the last step. A fixed overview sits to the left of the page and tells users what their choices have ...
2
votes
5answers
79 views

Should a usage graph grow or shrink available data

I have been having arguments at work which divided the team on whether or not a data usage graph should start at 100% and decline to 0% showing whats available (option A). Or conversely, start at 0% ...
1
vote
4answers
353 views

Nonlinear Wizard Progress Tracking

I am designing the User Registration Wizard for a web application. Users register as part of a company, and sometimes that company is part of a larger network/group of companies. So there are various ...
23
votes
9answers
4k 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 ...
2
votes
1answer
134 views

Showing progress towards a two-step goal

I have a lightly interesting problem in that I need a system for awarding a t-shirt after two actions are taken. The two actions can happen anywhere within a 12 month span. It feels like overkill to ...
3
votes
3answers
219 views

Should a progress bar go backwards when reverting changes

Related to Should a progressbar go both ways? Assume a file copy dialog box with an option to stop and revert the current operation. If the user chooses to revert, would it be better to roll the ...
51
votes
14answers
6k 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 ...
7
votes
4answers
481 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 ...
14
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?
10
votes
3answers
3k 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 ...
3
votes
3answers
526 views

“Useful” progress bar for heuristic algorithms (i.e. whose running times can't be predicted)?

Let's say I have an algorithm whose running time is exponential in the worst case, but I'm using a very efficient heuristic for it that in practice seems to make it work in linear time. Basically, ...
1
vote
2answers
530 views

Dynamic Progress Indicator

I am currently working on a responsive web app and am having some issues designing a progress indicator that I am happy with. The app is a workflow based tool which works by displaying cards ...
2
votes
4answers
568 views

Progress bars over 100%

Does anyone have any advice or examples of what to do with a progress bar that exceeds 100%. I am working on a progress bar to indicate the status of an item. At 100% a deficiency is created for ...
229
votes
4answers
18k 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 ...
3
votes
1answer
523 views

How to present overdue items in a progress tracker

I'm working on a mobile app that helps users track the tasks they have planned for each project. The states (status) of the tasks are: Not Started, In Progress, Completed, and Overdue. I thought I ...
0
votes
2answers
983 views

How to represent, in a dot-progress-bar “Finished, Next, Future” items [duplicate]

I'm working on some educational software (for adults). Part of a lesson involves moving from one step to the next. So we have a next step button. I want to show the user: How many steps there are ...
1
vote
1answer
762 views

Animated striped progress bar?

Having animated stripes on a progress bar might be useful to indicate that the system is still running and the computer did not hang up. Should the stripes be on the entire progress bar (with semi-...
3
votes
2answers
499 views

Wait cursor and progress showing time for long running tasks

I have a long running tasks in my desktop application. Sometimes tasks complete in 1-2-3 seconds and it does not sense to display big progress bar to an user because of the showing progress panel time ...