Stack Exchange Network

Stack Exchange network consists of 174 Q&A communities including Stack Overflow, the largest, most trusted online community for developers to learn, share their knowledge, and build their careers.

Visit Stack Exchange

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).

1
vote
1answer
103 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
52 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
188 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
41 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 "...
0
votes
1answer
35 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
421 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] ↖⚙ - ...
1
vote
1answer
54 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 ...
0
votes
0answers
32 views

Pros and Cons of using Progress Bars on lengthy online applications?

I'm considering adding a progress bar to a 7-page online application form. 50% of users choose "Provide later" for uploading documents. This pushes most of their work to page 7. My options: • Don't ...
2
votes
1answer
70 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
150 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
86 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 ...
2
votes
3answers
332 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
122 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
109 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
138 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
727 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
317 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
202 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 ...
3
votes
2answers
460 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
476 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 ...
46
votes
7answers
10k 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 ...
5
votes
4answers
186 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 ...
15
votes
7answers
624 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
66 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
71 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
80 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
242 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
281 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 ...
169
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
724 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
352 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
869 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.
10
votes
4answers
2k 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
647 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
882 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)...
6
votes
4answers
195 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 ...
3
votes
3answers
129 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
87 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 ...
4
votes
4answers
190 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 ...
2
votes
1answer
76 views

Best message to display when migrating data?

The use case is this: users who downloaded a new version of an app will need to go through a data migration process after log in (which may last up to 1 minute) during which user data from an old ...
3
votes
2answers
171 views

Complex wizard - when to tell user they are obliterating progress

I'm designing for an app that helps companies generate complex legal documents. We generally use a wizard with progress noted at the top. The progress can branch quite dramatically. We're faced with ...
8
votes
2answers
1k views

Progress bar for credit card credit

I'm designing a graphical widget to show credit card credit but I'm not sure that the bar moves in the right direction. Currently, as the customer spends their credit, the bar moves from right to ...
34
votes
5answers
3k views

At what point should an application change the cursor to an hourglass or display a progress bar?

Our WPF desktop application will be executing various tasks. In general, the average length of time for each task will range from basically instant to a few seconds or longer (possibly minutes). We ...
17
votes
8answers
2k 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 ...
5
votes
1answer
724 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 ...
19
votes
5answers
4k 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 ...
37
votes
14answers
6k 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, ...
5
votes
1answer
920 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" ...