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
1
vote
4answers
124 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
116 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 ...
0
votes
3answers
158 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
38 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....
5
votes
3answers
233 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
79 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 ...
1
vote
2answers
154 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 ...
2
votes
2answers
154 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 ...
1
vote
0answers
67 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 ...
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 ...
2
votes
1answer
78 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
337 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 "...
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 ...
2
votes
5answers
594 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] ↖⚙ - ...
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
1answer
102 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 ...
3
votes
1answer
166 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 ...
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 ...
2
votes
1answer
90 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
831 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/...
1
vote
1answer
182 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 ...
2
votes
1answer
189 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
153 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
846 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 ...
4
votes
2answers
389 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
269 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
570 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
669 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 ...
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 ...
4
votes
4answers
205 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 ...
14
votes
7answers
724 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?
1
vote
1answer
329 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, ...
6
votes
5answers
311 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 ...
170
votes
8answers
20k views

At what point does a user lose trust in a Busy Spinner?

The first scenario is an action that could take roughly 2–5 seconds to execute once the user has pressed a button. A Busy Spinner will be displayed in the button until the process has been ...
2
votes
3answers
779 views

Progress bar in a multi-page form in an app

We have an app wherein we need to ask a number of data from the user. We have split this into multiple pages and we put a progress bar on top. However, because of the screen estate, we can only ...
3
votes
1answer
422 views

Can I use the breadcrumb for the payment process like the progress bar design?

I wonder that whether the breadcrumb model can match to the steps of payment process like progress bar model. My design in the development process, I have delivered my files to developer who's doing ...
14
votes
1answer
963 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.
8
votes
4answers
3k 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
835 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
1k 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
58 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)...
5
votes
4answers
196 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 ...
2
votes
3answers
131 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 users ...
0
votes
1answer
92 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 ...
3
votes
4answers
216 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 ...