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

3
votes
1answer
201 views

Signing up for a site. Finishing progress after step 1 of 4. What/How to indicate?

EDIT: Screenshots will be added soon to better explain the problem I got a four step progress on a website signup page and have a 4 stepped progress bar to indicate where the user is currently at: ...
17
votes
4answers
2k 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 ...
5
votes
4answers
1k 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 ...
2
votes
4answers
695 views

What's the cleanest option for a loading indicator in a login dialog?

I have a login dialog for a desktop application, something like this: download bmml source – Wireframes created with Balsamiq Mockups When the user clicks on Login, the color of the ...
1
vote
4answers
764 views

How should I display a “please wait” animation?

I have to create a "please wait" page on our website. I would think you usually put the words "please wait" with some kind of spinning animation, but do I really need text? Doesn't an hourglass or ...
7
votes
4answers
392 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
2answers
852 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) - ...
8
votes
7answers
698 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 ...
14
votes
3answers
388 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 ...
63
votes
10answers
6k 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 ...
9
votes
2answers
950 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 ...
2
votes
3answers
174 views

How mixed percentage bars should be?

By mixed percentage bars, I mean something like the "likes bar" in youtube, with a left percentage bar, a right percentage bar, and maybe a separator: Should they be like: ...
1
vote
1answer
143 views

From which direction should a modal progress bar enter the scene?

I have a form to create a new Widget. After the user presses "Create," a modal progress bar appears and shows the user the status of the background process that saves the Widget. How should the modal ...
6
votes
2answers
719 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. ...
0
votes
2answers
299 views

Confirmation screen after e-mail verification part of multi step process or not?

I am designing a multistep proces that nicely shows the user which step he is in. Between the second to last and the last step the user needs to click on a confirmation link send via e-mail. My ...
1
vote
2answers
140 views

How do you treat overview and detail pages when displaying a progress bar?

I have a progress bar at the top of all pages in a signup process: Personal details > Contact details > Choose membership package > Buy > Finish The order of these steps is fixed but I ...
9
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 ...
17
votes
5answers
1k 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, ...
11
votes
6answers
635 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.
216
votes
4answers
16k 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 ...
-1
votes
2answers
6k views

Gallery of form Progress Tracker UIs for web apps? [closed]

I'm building web UI for a "wizard" workflow with 4 sequential steps-- users proceed in order from Step 1 through Step 4. I'd like to include a progress indicator showing the user where in the ...
0
votes
2answers
1k views

How can I display progress through a multi-step wise process to be carried out by user? (Smartphones / Tablets) [duplicate]

Possible Duplicate: How do you indicate progress to users in a multi-step form? What is the best way to display progress in a multi-step process (for e.g. linear filling various forms) on ...
4
votes
7answers
490 views

Progress Indicator suggestions for multithreaded operations?

In the old version of our application, the operations performed during loading were sequential. We indicated progress by updating a single-line text string with the component that was being loaded. ...
5
votes
3answers
868 views

Jumping progress bar or running process indicator?

I'm developing a process with a predefined number of steps to complete so while process is running I can know how far the process has gotten and how much is there still to be done. My process ...
22
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 ...
3
votes
2answers
381 views

What are some iPhone app examples that successfully use progress indicators [closed]

I am designing a iPhone app and the main function of the app is a 3 step process (steps most likely don't happen all at once (there could be a period of time between steps, unlike a signup flow). I ...
3
votes
4answers
208 views

How to show that a bar is loading?

I'm building a game. Each character has an energy bar. It's red when it's in the low, and green when it's full. I'd like to make it obvious for the user to see that the bar is progressing ( getting ...
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 ...
5
votes
2answers
689 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 ...
4
votes
4answers
178 views

Visualization of a resource with multiple competitors

In a game I am working on, the goal is to gather a specific percentage of some limited resource. Additionaly, players can shoot each other, resulting in a permanent loss of some amount of this ...
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 ...
12
votes
6answers
7k 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 ...
11
votes
4answers
1k 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 ...