Tag Info

Hot answers tagged

221

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


191

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.


66

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


64

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


62

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


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

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:


38

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


35

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


33

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


32

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


29

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


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


23

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


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


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

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


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


14

You simply need to only show the wait indicator if the wait time exceeds a certain preset amount of time. I do the same thing in an application that I maintain, and I find that waiting 1 second before showing the indicator is a good amount of time and allows for quick processes to finish without flashing the indicator and making it look like a glitch.


14

If you know generally which steps take longer, then you can still use a progress bar, just make sure each of the steps has a section proportional to approximately how long the step will take. Dominos Pizza tracking app does a good job of showing which steps take longer than others, as you can clearly see, step five can be up to 1/3 of the total time. The ...


14

My honest opinion is that the time spent / total time label is enough, and that also adding the percentage is redundant information. So why do I think that, especially considering Khan Academy has both a Done / Total label + a percentage label? The answer is in what differentiates your two scenarios. In your design you have a progress bar which doesn't ...


13

I don’t know if progress indicators make a motivating or demotivating UI on average. I do know they make an informative and honest UI. The users can appraise the amount of work to do and decide for themselves if the benefits the form provides are worth the effort. If you find too few users think it’s worth the effort, then you need to either make the form ...


13

showing what the program is doing while working on a progress bar gives an additional indication of progress. There is also a nice way of doing this involving a details screen: This method doesn't just show the progress of the installation as a whole, it also shows what the current step is, what the previous steps is and sometimes even the progress of the ...


12

In addition to the perceived-speed reason offered by the other answers, this interior-pattern animation also makes sense at another logical/analogical level. The example progress bars are animating in two ways: (1) the area representing progress is widening, with its right-edge moving to the right; and (2) the colored pattern inside is shifting, ...



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