Tag Info

Hot answers tagged

206

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


170

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


58

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:


37

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


34

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


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


19

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

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.


12

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


12

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


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


12

I can't recall the study, but it has been found that the perception of speed is heavily effected by the time to first action. So my suggestion is a 4th option: Load the bare minimum that is needed for your customers to see the app and decide what they want to do. Basically what you've described as option 2. Automatically put the other modules into a ...


12

You can display vertical graph to display bandwidth limit with usage. you can have multiple vertical lines/graph for each billing cycle. display green graph till the acceptable limit and red graph to display excess data usage. here is an example: Android already take this approach, so here is an example.


11

They are trying to include two separate statistics in the graph. The left to right is the % progress, and the graph shows transfer rate (with the black bar showing the average). For most people this is overkill, and for most situations a simple progress bar is fine. However this only shown when you ask for 'more details', and so that is what you are ...


11

You can overlay your progress bar with a transfer rate graph pegged to 100% width. The result is a constantly updating histogram that remains linear throughout the operation. This gives you a simple way to display both progress and transfer rate on the horizontal axis. An example: This is a rough visual example; to make it more readable you'd want to ...


11

There's plenty of research about this. Much of it is in the area of perceived performance -- how long it feels like an action takes. Steve Seow has an excellent book titled Designing and Engineering Time: The Psychology of Time Perception in Software. One of its major results is how we perceive response time: "instantaneous" (0.1 – 0.2 seconds) ...


11

I had a very similar problem recently, and did some user testing on it. The main thing that came out of it was that we should avoid colours that have a common meaning. So yellow was a bad option, and green represented 'good', not 'acceptable'. In the end we used grey as the neutral background colour, blue as the progress for 'expectation'; green as ...


10

Is it even neccessary to show how many children are left to be approved at all? How many administrators will be doing the approvals? If it is more than one then the task will probably be split up anyway (please correct me if I'm wrong) so instead of showing the progress bar you could do one of the following: on approval of one listing ask the admin if ...


10

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


10

I like the solution by @DesignerGuy which aim to give visual cue that something is wrong coupled with smaller textual footnote to describe the status. Websites like Kickstarter takes similar approach when it comes to indicate funding progress vs goal. Regardless of your choice, IMHO progress bar is not the best way to accurately depict ongoing process ...


9

The colour indicator is used as a priority status: Red = urgent. Orange = weak warning. Green = good. The priority depends on the application and the consequences of a low charge. For something like my kindle where the battery lasts for a month or more at a time, 10% isn't yet an urgent battery level. But for a backup UPS in a hospital, a charge level ...



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