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
12
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 optimize our user's journeys through our web forms. One such widget is the progress bar, but it raises a ...
0
votes
3answers
103 views

Status Bar with several Stage

I would like to have some opinion on the design, I made to represent the product process QTY. At each stage, i should show to the user, how many of his requested product has been proceed. If there are ...
0
votes
1answer
32 views

States and behaviour for progress bars embedded in tables

These days it is not uncommon for data tables to contain more complex UI elements (i.e. not just data), with things like pills (or tags), call-to-action buttons, icons, and even graphs & charts (e....
1
vote
2answers
64 views

Adding label or supporting text to a loading animation (spinner)

I have an interactive map container that requires some time to load. I placed an animated loading spinner while the map loads. Is the animated spinner sufficient visual feedback or should it be ...
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 ...
1
vote
1answer
41 views

Examples and suggested principles of designing dissipating usage tracking experiences?

I was wondering if anyone could assist, I'm not sure what the correct terminology for this is, and therefore struggling to find any research on it. I'm designing an experience where users have a ...
5
votes
3answers
228 views

Should progress bars accurately reflect how close the operation is to completion during long operations?

I'm creating a simple application. There's a certain operation that will take a long time to complete (~15 minutes), and I'm hoping to make a progress bar showing how close the operation is to ...
1
vote
2answers
153 views

How to show progress bar and value in a compact space?

I need to develop a kind of information dashboard, with a sizable number of widgets like this, to show progress on a bunch of things: I need to show the percentage value and the percentage complete, ...
1
vote
1answer
48 views

What is the best way to indicate both the exact and relative remaining portion of a resource in a single element?

In the game I'm building, characters have a resource called Speed that they are frequently spending and regaining each turn. Think something akin to Action Points if you're familiar with tactical ...
3
votes
1answer
88 views

How to display progress from one stop to the next stop on a continuous scale?

Which is more intuitive? Option #1 (top picture): Progress bar starts at 1,500 (previous privilege) and ends at 2,000 (next privilege) Option #2 (bottom picture): Progress bar starts at 1 (the ...
2
votes
2answers
147 views

Progress bar - single or multiple for multi-step process?

Is it better to switch status bars in-place when the next process occurs? Or do users prefer to see stacked bars for each step? I am developing a status page where the user submits data and the ...
4
votes
7answers
623 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. ...
2
votes
2answers
131 views

Distorting data on progress bars?

I am currently doing some research on how data is sometimes distorted during visualization on progress bars (showing 70% instead of 50% etc). The research is focused on expanding the thesis of Chris ...
1
vote
0answers
64 views

Website progress tracker [duplicate]

I’m working on an application that has multiple tasks that need to be completed in sequence (e.g. think placing your order with amazon). We have a progress bar at the top of the web page which shows ...
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 ...
2
votes
1answer
74 views

Nomenclature for all parts of a progressbar

I'm looking to get a name for all off the different parts of a progressbar. e.g. Loading [ =====> ] 1/20 (5%) done I want to know what name can be given to the following parts: "Loading" ...
2
votes
3answers
328 views

Is there a name for this type of progress bar at the top of screens?

Lots of applications and sites (particularly SPAs or sites with lots of data to load such as YouTube) have a progress bar that is displayed at the very top of the screen. Does this have a special ...
2
votes
1answer
50 views

Sequential representation of a parallel process? (skyscanner search progress) [closed]

When I search for flights on Skyscanner, it first shows a "Searching" screen with a spinner, then shows some results along with a progress bar and indicators stating "Searched 28/30 providers" and "...
2
votes
5answers
576 views

How to implement busy spinner with button

What should happen when a user clicks on a button that triggers an action that takes a short amount of time to complete, showing a busy spinner to indicate processing? [click]↖ => [click] ↖⚙ - ...
2
votes
1answer
98 views

What are the best UX practices to show that an autocomplete data for an input field in a form is loading?

I'm a developer working on a form, which fills an autocomplete input field with available choices. What would be the a good UX take to show that those suggestions are loading? I'm thinking on ...
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.
3
votes
1answer
164 views

Is showing temporary result immediately better ux than showing a loading indicator until a result is available?

Use case: There is a toggle button a user can click on it. After the user clicked on it, it should show a result, success or failure. It takes some process time to calculate the result. Unless error ...
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. ...
4
votes
8answers
3k 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 ...
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 ...
5
votes
4answers
2k 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 ...
1
vote
1answer
325 views

Matching events on timelines of different scales for a video scrub bar

Objective To show a video timeline scrub with associated events, visually correlated to the time at which the events occur. It's my belief that this will allow the user to, with minimal effort, ...
2
votes
1answer
89 views

Do loading bars freeze on purpose?

Many applications implement some sort of progress bar or spinning circle to indicate loading of significant size. In Windows 10 updates and some games, I've noticed that these loading elements ...
3
votes
3answers
771 views

iOS button morph to loading

In Android, the native button in material style has a "loading" state. This loading state can also be "disabled" state. It looks like this: HD Screencast - https://gfycat.com/...
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) - ...
1
vote
1answer
174 views

Data Visualization: Visualizing current year annual performance by juxtaposing last year total and year to date numbers

Working on a revenue piece where I have to show current YTD ( Year to date ) performance with last year’s YTD and the total revenue last year for a specific product. The below image shows the ...
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....
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 ...
2
votes
1answer
169 views

Fractions (“X out of Y complete”) in RTL Languages

We are working on RTL support in an application. One of the elements in our app is a progress bar that shows the number of slides of a deck that the users has completed, as well as a graphical ...
2
votes
3answers
149 views

How to represent small data on a progress bar?

Say I have a file scan and after it has complete we want to display the files infected vs non. How could I go about representing this without the data seeming so minuscule within large file quantities?...
3
votes
2answers
824 views

Skeleton screens with determinate progress?

I'd like to use skeleton screens to indicate when a page is loading. Usually, this is great—it makes the experience seem faster while still functioning as a progress indicator. The thing is, skeleton ...
6
votes
5answers
307 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 ...
4
votes
2answers
378 views

Progress bars to indicate user count & competition end date for mobile

This is my scenario. I have a promotion that ends at a particular time. Only if the number of entries reaches a particular threshold will the promotion take place. So to users I have to show ...
2
votes
4answers
255 views

what if there will be 7 steps to completed form (progress tracker)

I have come across many article, and i found this interesting. it said the best practice for completed process to fill form is 3-5 steps. My problem is i have 7-8 steps to completed form and want to ...
2
votes
2answers
546 views

Where to put a floating progress bar in a multi-step form

I am doing an interactive form that shows the progress related between filled and not filled inputs. As a result, I have a progress bar that shows how many steps did I filled and how many are missing. ...
0
votes
3answers
639 views

Progress Tracker with 2 levels

I'm currently designing a step-by-step wizard, where the interface tells the user which section of the wizard he/she is visiting, using Progress Trackers, like the image below. The user can navigate ...
4
votes
4answers
202 views

Updating progress bar when identifying extra work

I have a slim, single progress bar in my simple search engine. The 100% of the progress bar is all the sources in which the search engine can search in. Sometimes, more sources can be discovered ...
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 ...
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 ...
1
vote
0answers
70 views

How should I visualise 2 different estimated waiting times?

I am working on a feature for a screen which shows our clients a list of legal certificates they have ordered with us, but they are produced by external authorities. Our turnaround time is much faster ...
1
vote
1answer
77 views

Representation of progress, stated and delayed days of an activity

I'm trying to express the progress, the state and delayed days of an activity with this representation. My representation is a progress bar with a number next to it and below there is an icon that ...
0
votes
1answer
85 views

Why gmail upload progress bar goes fast at the very end? [closed]

If I am upload 20 MB File on gmail, on progress bar it will take some time to upload & at very last seconds, the progress bar goes fast. Why so?
3
votes
2answers
1k 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 ...
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 ...