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

12
votes
6answers
1k views

Making a Streak Visualization More Intuitive

I'm currently working on a website for tracking habit change. On my report page, I have goal cards users interact with in order to record their progress: What the donut chart in this example is ...
3
votes
1answer
91 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 ...
32
votes
14answers
4k 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, ...
17
votes
5answers
2k 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 ...
2
votes
2answers
130 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 ...
3
votes
1answer
76 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
164 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 ...
2
votes
5answers
151 views

How do you visually represent “progress” on a negative 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 ...
3
votes
6answers
104 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 ...
1
vote
1answer
86 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 ...
66
votes
9answers
7k 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
852 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 ...
1
vote
3answers
131 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
297 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
125 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
111 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 ...
1
vote
5answers
63 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
220 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 ...
21
votes
9answers
3k 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
111 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
113 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 ...
49
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
377 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?
9
votes
3answers
2k 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
325 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
337 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
319 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 ...
214
votes
4answers
15k 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 ...
4
votes
1answer
575 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 ...
2
votes
1answer
256 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
323 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
440 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 ...
2
votes
2answers
298 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 ...
2
votes
2answers
328 views

Indicating current step in progress bars

We're planning on integrating some kind of progress bar in a multi-step process. Our developers figured it would make sense that on step 4 of 9, 3/9ths of the bar would be filled in to show how ...
2
votes
3answers
171 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: ...
2
votes
2answers
145 views

Progress of incoming bus

I am trying to design an app that shows the amount of time until buses arrive at a given stop. Originally I had something like this in mind: But I was wondering if something more graphical would ...
2
votes
2answers
538 views

Is there any public research on effectiveness of activity indicators, progress bars, and progressive loading?

Activity indicators (spinning wheel) and progress bars are very common across many applications. A new approach I have noticed is when an application shows the containers of the page or content ...
0
votes
3answers
190 views

Speed of loading panel

So, I've been wondering what would be the best technique when users are facing a loading panel. When we're not sure how long an action would take, it's common practice to use marquee progress bars or ...
1
vote
1answer
187 views

Notifications - static, dynamic and interactive in a single place?

I am developing a web application that, in a nutshell, does the following: it takes something from A, does an operation with it and place the output in B, just like a converter. This process can be ...
9
votes
7answers
726 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. ...
51
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 ...
4
votes
3answers
300 views

Long loading bar vs. short loading bar?

When I have thought of this, I would think a longer loading bar is more enjoyable to the user, because even though whatever the are downloading/loading isn't happening faster, it seems to be happening ...
21
votes
3answers
893 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 ...
2
votes
1answer
194 views

What is an effective way to present System Update Progress to a user that also lowers frustration?

I am working on an app that starts installing any pending updates when a user logs off the (Windows) workstation. The finished app will look like this (minus 'button1'): Our branding is in 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, ...
2
votes
4answers
652 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 ...
24
votes
7answers
2k 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). ...
6
votes
3answers
200 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 ...