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?
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.
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.
Imagine how unbalanced these progress views would be if the progressbar was presented vertically.
I'll do one example, just for kicks!
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.
. periodically to indicate work is still being done), and as more complex UIs evolved this tradition stuck.
Commented
Sep 7, 2012 at 14:42
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.
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.
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.
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;
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:
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:
Image from iLounge
Image from Daring Fireball
Once you open the door to look at web techniques, there are a few other interesting circular ones:
Image of Percentage Loader, a 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):
Image taken from Oracle's Application Development Framework components documentation
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.
I think it's really because of two things:
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.
