Tag Info

Hot answers tagged

223

Studies have shown it looks faster and in UX perception is everything ;) A study (PDF)[1] demonstrates that animations can increase the perceived speed of a download by up to 11% over a bar that is not animated. Having a reverse-animated background as in the Gmail loading bar, or having the background pulse faster as the bar nears completion, both create ...


199

This took forever to make using Image Ready. lol Going forward: Going backward: When the spiral is going against the bar direction, it does visually exagerate the speed of the bar movement. The bars are pretty close to each other, so hide one with your palm and look only one at time. :)


88

How about leaving out the second colour and instead put a border around each bar? That makes it obvious what the maximum value is, but it also keeps the clarity of the uncoloured negative space.


78

Root Level Progression I think a better approach if your sub tasks are completing very quickly would be moving the progress bar to the root elements. Or outside of the table completely (if it's an option) which also gives you the ability to use different icons if a sub task fails etc.


68

Showing details in a form not only developers understand is fine. If you are able to write your installation details in a more funny way than just "Checking Operating System Version" this might have two advantages: The user gets feedback about what's going on and that there's something going on at all. When installing e.g. a computer game you normally have ...


67

If it is possible to traverse the entire tree before beginning processing, I would display an indeterminate progress bar while you discover the branches and then switch to a traditional progress bar once you know the maximum value. If you cannot identify the total size of the tree before processing, then a progress bar may not be the best option. A ...


63

Because most people living in the western world read from left to right, and that's how they imagine how time passes. It's a good question wether top to bottom would benefit Japanese customers or right-to-left certain Arabic cultures, on the other hand, the cultural influences of western media and western software does change that. It can be easily ...


57

Remember 0.1, 1.0, and 10 seconds... You have about 1 second to show something whether that be the finished result or an indicator that the computer is working (usually some type of spinner) Not doing anything for 1 whole second after a user initiates an action can still make an application feel sluggish (as noted in the comments below) so I like to ...


54

I would hide the progress bar once a task is completed. Progress bars communicate to the user that something may take awhile so maybe you could hide the progress bar at 100% and even change the word to DONE. If all the tasks start out as DONE then awesome I have to tell all my friends how fast you are!


41

The main advantage of visualization is you are just showing the data and nothing else. Adding negative space just to show the ceiling sounds like Chartjunk. If you just want to show the maximum limit, show a thin line and write what it represents. download bmml source – Wireframes created with Balsamiq Mockups This is quite similar to what ...


39

One very possible reason for this is adaption and matching with the context in which the progress indicator is shown. Think about it, a progress indicator is usually displayed together with a descriptive text that explains what it is that is being processed. And what do we know about text.. well, for one thing it's written horizontally from left to right ...


38

If you are displaying a percentage, it's best to label it as a percentage. The % doesn't have to be the same size or as dark even as the main number, but is gives a lot more clarity at a low cost. In fact, any number without units is meaningless unless it actually has no units. Example:


36

This is an assumption, but it's likely because it makes the progress bar appear to fill more rapidly. This effect is achieved because the right edge of the bar, the consequential part, is moving in the opposite direction from the animation, thereby making the increments that bar edge moves appear larger than they do relative to the box containing the ...


35

Yes, always show your units. As my maths teacher used to say: Ninety what?...Elephants? The problem is that people are used to seeing the percentage symbol with percentages. Therefore, it is in fact conspicuous by it's absence. That makes people think and the point is to make a UI where people don't have to think - at least not where they really don't need ...


34

It can be useful for several reasons. One is that the user gets a feeling of that something is actually happening and not just a progress bar increasing. If the UI says "Checking OS Version" or "Initiating virtual processor" she gets a feeling that something good happens, even if she doesn't know the technicalities behind it. Second, if the process would ...


33

As an analogy, consider the mirrors universally installed in elevators. While these mirrors give the user a false sense of added space in the lift, they also serve as just mirrors; people tend to look at themselves and do not seem to notice how long the lift is taking to take them wherever they are going. But if they put in a countdown telling people 'xx ...


30

There could be a hardware related answer too. Before the GUI there was the DOS prompt/terminal interface. Progress bars here would have been rendered with characters, e.g. dots or filled squares. When coding it's far easier to show progress as growing from the left of the screen to the right because you can calculate the place the next character goes quite ...


28

As you've pointed out, forcing speed and progress into one fixed-length bar -- per the Microsoft example -- reveals the inherently non-linear relationship between time and progress :) But more importantly for your project: make sure you understand your user and determine your motivation before jumping in. What is the purpose of your progress bar in this ...


28

It can work well, but I wouldn't recommend the method that you are proposing. You can use breadcrumbs as a form of progress bar, which not only solves your navigation issue, but shows what still has to happen better than a pure progress bar. It is also common practice on some of the most used websites, so your users are likely to already be used to it. ...


28

No, don't slow down the job. There's nothing wrong with having something be instantly 100% done. Your app will actually seem better than if you slow things down so that the progress bar animation is visible. Users would love nothing more than to have everything happen instantly.


27

Displaying multiple progress bars is not a new concept. Your case is an ideal scenario in which usage is justified. One progress bar represents the overall progress and the other represents the current task's progress. If you want to use just one bar, then it makes sense to show just the overall progress rather than showing the current task's progress. A ...


25

A decent heuristic would be whether the negative space has meaning. If the bar represents something like speed or a metric of productivity, the blue part in your graph doesn't have an important meaning. In that case the bars are best left by themselves against the regular backgound. Just make sure that the user can distinguish between the value 0, and a ...


25

Are you performing a depth first traversal? When processing a node do you know how many children it has? If so then one approach is, for any given node assign equal weight to each of the children. An example: When examining the starting node we find it has two children: 100 / 2 = 50 so each of these is assigned 50% of the progress bar. When examining ...


24

Here you have 3 options. In the first sample, you have 2 states with "voids" that are filled as the tasks are completed The second sample is useful if your tasks are numbered in an amount sequence (x amount of tasks completed) and the order doesn't matter Finally, the easiest and most clear option: a big number with progress status. Straight and to the ...


23

You think that's bad? In some cases, progress bars aren't even tied to anything in the first place! They just display a scrolling animation to try and soothe the user. Why is this? Well, I don't know installer tools well, but from what I've seen, most off-the-peg progress indicators rely purely on the number of commands in an install script, and don't let ...


22

"Scroll Spy" generally refers to a top or side navigation that dynamically changes as the user scrolls down the page. I think scroll spy is specific to dynamic navigation, but maybe something like "Scrolling Progress Bar" is fine. Here is a fiddle that may give you some more insight with JS and CSS. http://jsfiddle.net/sarathsprakash/PvVdq/68/


20

A progress bar should be an indication of how far the process is. If someone sees a progress bar 50% complete, they are most likely going to assume that it is half way done. In your situation, that is not the case, so you should avoid using a progress bar, unless you have some way of pre calculating approximately how long each process will take. In that ...


20

Your graphic seems to require far too much information to describe what it means. Github does this through a table of Longest Streak next to Current Streak. It is easier to understand with just text. To keep it compact you could remove everything but the most important information: download bmml source – Wireframes created with Balsamiq ...


18

I have found a study on this topic, quite long actually: Matzat Snijders vdHorst accepted version And also have a Luke Wrobleski 'seminar' on this topic http://videos.visitmix.com/MIX09/C17F - and he has wrote about web form design as well And one more on scribd Rethinking-The-Progress-Bar - "This paper explores the impact of various progress bar ...


15

I find just using the colors as the demarkation a bit harder to understand. You can use a vertical rule to act as a placeholder for the goal, YTD or annual, depending on the day. Your focus should be the goal and how much over or under you are. What I mean is there is not enough value of showing the actual numbers when you are just bother to about the ...



Only top voted, non community-wiki answers of a minimum length are eligible