We’re rewarding the question askers & reputations are being recalculated! Read more.

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
0
votes
1answer
31 views

Auto-skipping steps on progress trackers

We are implementing a progress tracker for a 3 step task. However, step 2 ('review step 1') is not always applicable; it's only applicable if one validation check after the submission of step 1 fails. ...
0
votes
3answers
175 views

Progress tracking/Stepper UI/UX research

I'm currently working on an application where users complete a flow of tasks, divided over multiple pages. For this application, I'm considering using a progress tracking/stepper UI element. However, ...
0
votes
3answers
191 views

Why add a progress bar on the shopping cart?

10 years ago it was common to see a progress bar on the shopping cart. Nowadays is not so common. Why? Are we still needing to add progress bar on shopping carts? My new shopping cart template.
1
vote
1answer
48 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 ...
14
votes
2answers
1k 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.
1
vote
4answers
166 views

Compact way to represent a progress with many sub-operations?

I have the following way of representing a long-running operation, it is detailed in the sense that every sub-operation progress is shown: (it's currently shown in a text mode application but final ...
0
votes
3answers
137 views

Progress bar or text label for progress in a list view

I have a scenario like the one below: There's a mobile app screen with a list view and there is FAB to add items to list view. Think of the app as something like Jira. So let's say the list items in ...
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
167 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 ...
1
vote
1answer
40 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
116 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 ...
288
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 ...
5
votes
3answers
237 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
163 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
50 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
98 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
176 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
624 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
132 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
73 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
82 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
389 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
53 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
631 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
110 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
172 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. ...
5
votes
8answers
4k 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
341 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
92 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
953 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
206 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
195 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
160 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
875 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
319 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
408 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
280 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
618 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
738 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
210 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 ...