Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Question sparked by this discussion.

Why are progress bars almost always presented as horizontal lines that increase from left to right? Is this the best method of indicating progress (and why)? And are there any significant examples of this trend being bucked?

share|improve this question
3  
    
The left to right matches start to finish in the western culture so the design is a natural heuristic solution. One notable exception is the battery charge progress "bar" on a powered-off android phone and similar. It's vertical and that matches the natural understanding of a container being empty and full. Makes sense to me. –  Itumac Sep 6 '12 at 23:55
11  
The coffee machine we use at work has vertical progress bars when the coffee cup is being filled... :) –  edgarator Sep 7 '12 at 1:33
1  
@Alendri. It's not only a japanese design thing. Remember win3.11 or win95 software installation screens? Those sometimes had a progress bar in the left lower corner, displaying the status of the current copying file, the overall installation process as well as the remaining space on the HDD. While the first two were filled up during the installation, the last one went down. –  Alexej Froehlich Sep 7 '12 at 10:41
1  
@Alendri and worms armageddon progress looked like a pie chart –  João Portela Sep 7 '12 at 18:15
show 5 more comments

10 Answers 10

up vote 59 down vote accepted

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 assumed, that based on their writing, they'd expect it to happen right-to-left, or top-to-bottom, but since their world is spread by iPhones and Androids and Windowses and Facebooks and whatever, they're used to that when it comes to computers, it does happen the opposite way.

Anyway, there are cultures where time traditionally passes from right-to-left. English isn't one of them, depends on your audience.

share|improve this answer

This post does not cite any references or sources. Please help improve this post by adding citations to reliable sources. Unsourced material may be challenged and removed.

1  
+1: Great point about cultural differences. I was thinking about this too. –  David Sep 6 '12 at 16:33
    
+1 Yet I wonder about the language issue: progress bars embedded in Chinese text (进度条) aren't vertical, for example. (Well, some are, but all the examples I found are English ;) –  msanford Sep 6 '12 at 22:38
7  
So I guess this is also the reason why circular progress indicators fill in a clockwise motion. –  Oliver Salzburg Sep 7 '12 at 18:37
    
This is The only correct and to the point answer. All of the others are barely speculation. +1 –  Robert Koritnik Sep 8 '12 at 9:36
1  
Yes, and most people have been taught plot the 'time axis' horizontally on a graph :) –  PhD Sep 9 '12 at 20:11
show 1 more comment

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 (I know traditional Chinese, Japanese and Arabic doesn't fall into this but I'm talking conventional UI language).

It seems very suitable to display the progress bar in a way that it's easily coupled with its surrounding text.

enter image description here

enter image description here

enter image description here

Imagine how unbalanced these progress views would be if the progressbar was presented vertically.

I'll do one example, just for kicks!

enter image description here

share|improve this answer
    
You could rotate the "Loading..." text 90 degrees to take up less space, but that would defeat the purpose. The text would become harder to read. Users would have to turn their heads or their devices. The only context where it might make sense is if the label text is very short (like "Disk space"). But there, it may less clear what the bar is expressing. ("Is this bar showing me how full my hard drive is or how close you are to being done?") –  David Sep 6 '12 at 16:51
    
yes, and the question was regarding the bar and not the entire progress view. starting to rotate the text to accommodate a vertical progress bar just feels silly, one could just stop the discussion altogether by asking: "why complicate things.." –  AndroidHustle Sep 6 '12 at 16:55
1  
Put Chinese vertical text beside your vertical progress bar and it will immediately make much more sense. All of their text is vertical so should be progress bars. –  Robert Koritnik Sep 8 '12 at 9:39
3  
@RobertKoritnik well no. I know for a fact that Chinese writing nowadays is primarily structured after the western standard, being from left to right. I know because I'm in a team that develops an application that amongst other nations is also sold to China. –  AndroidHustle Sep 8 '12 at 13:45
4  
Chinese text is not "all vertical". Modern Chinese writing is left-to-right, with similar punctuation marks as English. –  mehaase Sep 10 '12 at 1:01
show 3 more comments

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 simply, most likely by incrementing the address of the video memory to display the next 'progress character'.

Video memory starts from the top-left of the screen (say this is address zero) and continues out until ((screen_width * screen_height) - 1), so it's far faster (both in programmer's lines of code and CPU cycles) to draw in video memory a horizontal line than a vertical one. It would also save excessive vertical scrolling so the user could still see previous commands they had typed.

share|improve this answer
6  
Honestly, I think this is as close to the "real" answer as there can be. Modern computers were (by and large) invented within the English-speaking world, and that's why 0,0 is at top left. Also, I'm reasonably certain that the first "progress indicators" would have been implemented in text-mode (even things as simple as printing . periodically to indicate work is still being done), and as more complex UIs evolved this tradition stuck. –  Justin ᚅᚔᚈᚄᚒᚔ Sep 7 '12 at 14:42
1  
"so it's far faster (both in programmer's lines of code and CPU cycles) to draw in video memory a horizontal line than a vertical one", I feel positive this is not the line of thought. –  AndroidHustle Sep 8 '12 at 8:19
    
It is simply untrue that it's faster to draw a horizontal line than a vertical one in a raster graphics system. Additionally, any high-level drawing code is abstracted enough that the code is almost identical. You'd just swap coordinates in a call to a line function that takes x1, y1, x2, and y2 parameters. –  Brendan Berg Sep 8 '12 at 19:03
    
@BrendanBerg How is it untrue? On a 32-bit CPU for example, you could write 4 pixels in one instruction (in 256 colour mode) if you blit horizontally. If you go vertically each pixel has to be dealt with separately. Of course, on new machines with GPUs this is no longer an issue, however my post talked about the legacy reasons. –  James Sep 9 '12 at 0:59
1  
@BrendanBerg We're getting off-topic here, but Bresenham's algorithm is fast at calculating the pixels that make up the line segment. It has nothing to do with actually writing those pixels. –  James Sep 9 '12 at 17:32
show 4 more comments

It's been around since text-based "graphics" and it's tradition at this point. At the command line, left-to-right is the only way to go, so the earliest progress bars had to work that way. In HTML and JavaScript, tables have a width, but not a height that you can vary in real-time, so the technology dictated horizontal bars again.

I don't buy the bit about time flowing left-to-right. A traditional clock spins. An hourglass or water clock fills up from the bottom. If anything, the historical precedent would fill from the bottom up.

In any case, a progress bar that did anything but fill from left to right would just look wrong at this point. Unless you want to create a surreal and disorienting experience for your users, go left to right.

share|improve this answer
1  
In mathematics and physics time is usually charted on the horizontal axis... This is mainly to the fact that it gives the sense of progression and no going back... perhaps, it was taken from there... –  edgarator Sep 7 '12 at 1:35
1  
I think your answer has gotten way less credit than it deserves. You can come up with all kinds of reasons that left to right also happens to be intuitive, but history and precedent matter. Of course, this does mean that the left-to-right text explanation does have a kernel of truth: the reason that left-to-right progress bars are easy to make in a terminal is that the terminal was designed to display left-to-right text. –  Jefromi Sep 7 '12 at 23:56
add comment

Placement is one. If you have a line of text, you can underscore it with a progress bar. Makes sense to have it go the same direction as written text (in western culture)

Vertical bars exist, there's one in my car indicating fuel. And interestingly I don't think you'll find one where 25pc full shows as 25pc of the top filled in. We naturally assume the "fill" will gravitate to the bottom, like water in a glass.

Circular bars exist, invariably operating clockwise.

The key seems to be cultural fascimile and reference.

There is some interesting stuff available from Microsoft about what they discovered when doing things like the flying document animation on copy. I seem to remember also reading somewhere that the reason the green progress bars have a light pulse running along them is to reassure the user there is activity AND that it is going in the right direction.

I experiment with some of these accepted cues sometimes and it's funny the immediate frustration you can generate.

share|improve this answer
add comment

The mental model of things that are increasing or progressing through time generally seems to be of something moving from left to right or from bottom to top. In terms of the media player UI discussed in the other question, the horizontal bar seems like the best way of both indicating a position in a finite range while allowing a user to jump forward or backward to a point within that range. I guess it could work vertically but that would feel awkward. An alternative like a closed loop could work purely for indicating progress but would I think be awkward in situations where you need to interact with it.

share|improve this answer
add comment

Here's a validation tool that uses both horizontal and vertical progress bars. The vertical progress bar is always visible whereas the control panel containing the horizontal bar may be collapsed to the left-hand edge.

enter image description here

share|improve this answer
add comment

The progress bar is a "seen at a distance" way to communicate the status of a task.

It allows users to leave the close range of the monitor and still visually see the progress of a task without having to read small text.

Human eyes can have optical confusion when processing vertical lines. This is one of the reasons most languages are written horizontally. With the exception of Asian languages like in Japan, but even those languages can be written horizontally.

The other issue at hand is the aspect ratio of monitors. They are not square so the human brain can be easily confused by lines that divide up that space. The human brain will want to process vertical lines on a monitor to create square areas of interest. This is known as the Rabatment of a rectangle.

Most user interfaces consist of many horizontal lines and introducing a vertical progress bar will likely cause the user more confusion. You can easily create Optional Illusions inadvertently just by the layout of the user interface controls.

To demonstrate how easily horizontal and vertical lines don't mix well. Read about the Vertical-Horizontal Illusion trick, where the human brain sees the lengths of lines incorrectly.

So to answer the question "Why are progress bars horizontal" it's because they have to be. Otherwise it would be confusing and distracting to the user.

Acceptable alternatives to horizontal progress bars are;

  • Circle shape where the bar follows the circumference.
  • Large numeric text indicating the progress completed.
  • Large visual icons that represent the status (working, finished) of a task.
  • 2D animation representing the work being done for the task.
share|improve this answer
add comment

I think the other answers have adequately explained why progress bars generally flow horizontally, but I thought I would post a few interesting counter examples:

In some of Apple's desktop software (e.g. Xcode and older versions of Mail), progress is displayed through tiny pie charts:

The Xcode 3 build window with a pie chart indicating progress

Image from randomtruth on the Apple Support Communities forum. Sorry for the poor quality.

If you're interested in using that control in your own Cocoa applications, there's an open source implementation.

Apple have also used a similar technique in iTunes (on the web, the desktop and in iOS) when playing a preview:

A screenshot of the iTunes song preview control, which is a play/stop button with a circular progress bar around it

Image from iLounge

Screenshot of the iTunes app on iOS demonstrating previewing a song (which also uses the same circular progress bar

Image from Daring Fireball

Once you open the door to look at web techniques, there are a few other interesting circular ones:

A screenshot of "Percentage Loader", a jQuery plugin for circular progress that fills a gauge around a percentage indicator

Image of Percentage Loader, a jQuery plugin for this purpose

A screenshot of "Circular Progress"; another jQuery plugin for this purpose

Image of Circular Progress, another jQuery plugin for this purpose

Lastly, there's the "gauge"-style progress meter (although I'd probably argue that it's not really a progress meter; you don't necessarily work from one side to the other as you should be able to expect a progress meter to do):

Screenshot of an Oracle dashboard control indicating "units in stock" as a gauge with a needle

Image taken from Oracle's Application Development Framework components documentation

share|improve this answer
add comment

I think it's really because of two things:

  1. Screen real estate has to be considered. A horizontal progress bar is easy to see and doesn't take up a lot of vertical space, so more information such as instructions, estimated completion time, and what the machine is actually doing can fit cleanly above or below the bar.
  2. The human eye tends to look from left-to-right, top-to-bottom. (Here's one article mentioning it.)

Considering (2), diagonal progress bars may make some sense. But they could take a lot of screen real estate.

Why not vertical progress bars? Microsoft says, "Don't use vertical progress bars. Horizontal progress bars have a more natural mapping and better flow." The screenshot in that article showing Install_Messenger.exe illustrates this. It has "__ MB of __ MB completed" right below the (horizontal) progress bar's indicator of how far along the operation is. Here's a corresponding article from Apple, which doesn't address vertical progress bars directly but does have only horizontal ones in its examples.

share|improve this answer
3  
Microsoft used to use vertical progress bars. Installing software in Windows 3.1 used a dialog with three concurrent progress bars which filled bottom-to-top. I think it was Disk usage, total installation progress and current file progress. –  Andrew Leach Sep 6 '12 at 16:46
    
@AndrewLeach It wasn’t Microsoft. I remember these progress bars in third-party software, MSFT never distributed Acme (their installer technology at the time) to others. Might have been Installshield. –  kinokijuf Feb 10 at 16:23
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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