4

When I have thought of this, I would think a longer loading bar is more enjoyable to the user, because even though whatever the are downloading/loading isn't happening faster, it seems to be happening faster because more of the bar is filled up every percentage... Is this a crazy thought?

Example: Dropbox

Long loading bar appears to move faster... ?

Example: Facebook

Short loading bar appears to move slower... ?

These are both uploads of "example.jpg" which is 5mb. At the exact same internet speed, the Dropbox example seems to be uploading faster because the width is equal to 100%, so each percentage is bigger, making it seem like it fills up faster.

So here's my question: From a user's perspective, is a long (width) loading bar more "comforting" than a short loading bar?

1
  • Note that when a up/download stalls it's more obvious on a long load bar than it is on a short one.
    – aslum
    Commented Jun 26, 2013 at 14:00

3 Answers 3

4

I would say short is better. The main reason is that you want the entire progress bar to be 'in view' when the user is looking directly at it, as it is a single object communicating a single piece of information. This diagram demonstrates how you see words when reading. The words further in your peripheral vision are very 'blurry' and it is incredibly difficult to read them. In a similar way, it is incredibly difficult to 'read' the longer progress bar.

Acuity of words when eyes are fixed

Source: http://www.learning-systems.ch/multimedia/vis_e02.htm

To make sense of the first progress bar requires 1 eye saccade (~300ms). The longer bar requires perhaps 3 eye saccades, taking about 1,000ms.

4
  • 1
    This is a great answer. If one were to go with the 100% width, I would recommend increasing the vertical height of the bar and make the color brighter so that even on the peripheral the large, bright shape will be visible to the user. The current example is far too easy to miss Commented Jun 26, 2013 at 15:32
  • I'm not quite sure if this answer applies, people do not read progress bar, they scan it. I'd guess that the peripheral vision might be sufficient to understand a progress bar.
    – Lie Ryan
    Commented Jun 26, 2013 at 17:35
  • @LieRyan If you fix your eyes on the middle of the second progress bar, you will find it very difficult to sense the position of the progress bar. The further in the peripheral vision you go, the more difficult it is to identify shape and colour. I think the fact that people 'scan' progress bars is exactly the problem -- they shouldn't have to scan them. Why make a 'sentence' when you can summarise in a 'word'?
    – Brendon
    Commented Jun 26, 2013 at 18:23
  • While the science is good for text like titles and status messages, the user isn't "reading" the progress bar. It's an at-a-glance status indicator, like your car's spedometer (where you care only about the number at the tip of the needle). The problem with the Dropbox status bar is contrast, which hinders that at-a-glance nature. It also has text at opposite ends, so your eye does go to three places. Why not have the remaining time travel as the bar fills?
    – KeithS
    Commented Jun 26, 2013 at 22:57
2

If you are that concerned about perception, why not try to lessen the effect by quantifying what is going on by just showing the additional information, download speed and estimated time.

I would caution with the use of a large loading bar. If you are using 100% width of the browser window or something, it can turn out to be quite large to be seen in a single view (specially when the user is using a large monitor). Moving my view just to see the progress of download is not quite right in my opinion. It is a piece of information which should be glance-able and not something which should demand my focus.

Bottom line: It is a design choice to select which size you want. Test it with your users to be sure if your design works.

1

Short answer: It depends.

If you expect the user to upload smaller files and have higher connection speeds, there is no real difference.

If the opposite - a longer bar will be better, since it will be more satisfactory for the user to see the progress.

Personally, I would include the longest loading bar possible, combined with a indefinite, striped, moving background, to give the user a sense that things are continuing working, even when a connection lags temporarily or progress is slower.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.