14

It is a common convention that webpages scroll up and down instead of right to left, but all printed material that's not written on rolls of toilet paper 'scrolls' horizontally. Why did the web break this ancient convention?

The main advantage seems to be the elimination of the vertical jumps that occur when we 'turn the page' as we have to move from one vertical column to the next. This is probably easier on our eyes, and it removes concerns that these jumps might occur at an inopportune place in the content (makes things more uniform). In addition, books probably scroll horizontally because it's easier to hold them open when the pages meet in a vertical line at the center rather than horizontally, so that probably outweighed any other UI concerns in the evolution of books.

Are there any other UX reasons why web pages and word processors almost always scroll predominantly vertically?

8
  • 4
    This probably relates somehow to why text is easier to read in narrower columns than wide columns (such as the case with newspapers). That or the design of the scroll wheel on the mouse - not sure which came first (scroll bars versus scroll wheel).
    – Anthony
    Jan 2, 2013 at 21:06
  • 2
    The Windows 8 UI trend might have some impact on this in the future. I'm starting to see more horizontal scrolling. Jan 2, 2013 at 22:02
  • 3
    Books (side-by-side print) arrive late in printed/written text. Most text went on scrolls that rolled-up. The text began at the top and continued to the bottom. You might consider that the Web "returned" to an old style instead of "break this ancient convention..."
    – mawcsco
    Jan 2, 2013 at 22:32
  • 3
    all print 'scrolls' vertically. It maybe PAGES horiztonally, but doesn't scroll that way.
    – DA01
    Jan 2, 2013 at 22:46
  • 1
    @mawcsco: not as true as you might think. Scrolls were usualy laid out in a horizontal format, not vertical (they unrolled at one side and rolled up at the other side) and were split into columns of text much like pages in a book. Try looking up images of the Torah or the dead sea scrolls.
    – Tims
    Jan 6, 2013 at 13:13

10 Answers 10

20

I believe this was simply done because we read from top to bottom. The choice was made pretty early on, and was probably influenced a lot by technical limitations.

Because text is encoded linearly, most text editors (not necessarily word processors) had a limit in the number of columns and rows they could display. If you go far back this was typically along the lines of 80 columns and 25-40 rows (80x25 in VGA). When the screen filled it was common to scroll one page or one line at a time. If you scrolled a whole page, without keeping any of the preceding lines, this would be similar to reading a book. However, if you scrolled less, there was no room to display the text scrolling horizontally. So it was natural to scroll vertically. It is also easier to restrict scrolling and rendering in a single direction programmatically, so this may have affected graphical applications displaying text early on.

I believe, but cannot say for sure, that this carried over to more complex displays because programmers were used to the older vertically scrolling tools of command lines. This in turn has affected what people are used to today. A lot of early software wasn't grounded in user experience studies, but based on what programmers decided themselves. Often even without the help of designers.

Note that modern websites sometimes break this convention and use horizontal page scrolling, especially HTML5 sites that use graphical libraries like jQuery.

If someone else knows of studies on the experience of reading vertically scrolling versus horizontally scrolling text, I would love to hear of those, though.

3
  • 3
    An interesting side note, though, is that earlier output was done on ticker tape, which is typically horizontally oriented. This was prior to screens being common, though.
    – Sardtok
    Jan 2, 2013 at 21:26
  • If so we would expect predominantly vertical languages to use more horizontal scrolling. I'm not sure if that's the case in practice.
    – Kit Grose
    Jan 6, 2013 at 5:02
  • Horizontal writing is more common than vertical writing, and many Asian languages that were traditionally written vertically have switched to horizontal writing due to Western influences (maybe even because of computers). It could be that some early software on Japanese and Chinese computers used horizontal scrolling, but I couldn't really say, as the only times I've seen vertical writing in old software, is a few Japanese NES games which displayed pages instead of scrolling lines.
    – Sardtok
    Jan 6, 2013 at 10:06
11

According to Microsoft's User Experience Interaction Guidelines:

"People read in a left-to-right, top-to-bottom order (in Western cultures)
There are two modes of reading: immersive reading and scanning. The goal of immersive reading is comprehension. ...the goal of scanning is to locate things. "

"Users tend to skip over large blocks of text and navigation panes when they scan. All things being equal, users first look in the upper left corner of a window, scan across the page, and end their scan in the lower right corner. They tend to ignore the lower left corner."

I didn't believe it until I consciously tried it for myself. Sure enough, 10/10 times my eyes naturally scanned left to right while dropping down into the bottom-right corner. If pages scrolled horizontally 45% of a pages content would be missed.

Well worth a read: http://msdn.microsoft.com/en-us/library/windows/desktop/aa511279.aspx#placement

0
5

When consuming text, scrolling down allows to reveal the text more gradually than a horizontal scroll. If you just want to see another line you don't need to flip the whole page. Since we read top to down, as one of the commentators mentions, vertical scroll matches better how we "consume the lines". For languages where users read top to bottom horizontal scroll could make more sense.

5

Humans read more than one word at a time, we perceive words and letters in their context.

Whcih why is you can raed tihs.

Scrolling vertically presents a whole set of context (a new line of text), scrolling horizontally presents only single characters or words at a time without enough context to understand.

It isn't about established conventions, those conventions exist for this same reason. If printed text ran across pages, it would be difficult to understand. Our brains understand text better with context, so having it organized to be easier to understand is the paramount purpose.

2

I want to say that it is because early implementations of scrolling favored vertical scrolling. Once a precedent is set, it tends to dominate.

Scrollbar history

According to this info-graphic, scroll bars have been around for awhile. I then found some more information about the Appla Lisa:

The Lisa team decided to optimize their display for horizontal resolution, in order to be able to display 80 columns of text in an attractive font. The vertical resolution wasn't as important, because vertical scrolling works much better for text than horizontal scrolling. The designers decided to endow Lisa with twice as much horizontal resolution as vertical, using a 720 by 360 pixel display, with pixels that were twice as high as they were wide. This was great for text oriented applications like the word processor, but it made things somewhat awkward for the more graphical applications.

1
  • 1
    Strangely similar to analog television, which had (in the USA) 525 lines vertically, but the horizontal dimension was an analog signal, which doesn't actually have 'pixels' at all. So the horizontal dimension has unspecified resolution and the vertical one has discernible lines.
    – user67695
    Feb 8, 2017 at 19:17
2

I guess there are two reasons:

  1. We read from top to bottom and wide columns make it harder to read, because halfway through, you will scratch your nose and forget where your line was. So, with scrolling horizontally, you would require two columns per page, so that it is also easier to read some sentence you read before you scrolled horizontally.

If you had only a single column, you would also waste a lot of time when scrolling horizontally, because you would have to scroll until the new column fit the screen, before you were able to read the new content, while when scrolling vertically, you can begin reading the new content while still scrolling.

I guess those are the reasons why scrolling vertically became the norm in the 70s, 80s and 90s.

After that, there was also reason 2.

  1. Try to imagine a scroll wheel that scrolled horizontally...

My middle finger begins to hurt from the thought of it.

Yes, the motion of vertical scrolling with a mousewheel is much easier to do than a horizontal motion - mice with two scrollwheels, one vertical and one horizontal, have failed in the market, mice that feature the ability to tilt the scrollwheel to the sides to scroll horizontally haven't exactly been that successful either, because those are jittery, there's a high chance that you'll tilt the wheel when you just wanted to scroll vertically.

With current mice, there's imho no way that horizontal scrolling will become more common, because it's a pain in the ...^^

With touchscreens/tablets, scrolling horizontally is much easier, but still problems that are mentioned in 1. still exist on those.

2
  • Scrolling came before the mouse wheel, but I still definitely agree with you.
    – Dave
    Jan 3, 2013 at 15:48
  • Yeah, of course - but now that mousewheels are widespread, they have become another reason why you should implement vertical scrolling instead of horizontal scrolling. Before mousewheels, you had to drag some small element (always too small^^) around the screen or use the cursor keys. With mousewheels, scrolling has become much easier for the average person (if they are of the type that even uses scrolling, we all know that quite a lot don't) and mousewheels dictate vertical scrolling. Jan 4, 2013 at 17:01
2

Writing systems with left-to-right top-to-bottom writing direction are more easily facilitated with real or virtual paper of limited width and (practically) unlimited height. This limited width/unlimited height (or vertical roll of paper) model, applied to computer screens or rolls of real paper, is both easier to implement and easier to use than most any other model (a sequence of fixed sized pages model, as supported by many document processors, is more complex and more difficult to use than a vertical roll of paper model, while text of unlimited line length is difficult to read and edit).

So the web, which was originally comprised of marked up text documents, followed the established conventions of text document presentation on a computer screen. Of course with todays technology it's not difficult to implement paged models that scroll horizontally or vertically, or have some other page transition mechanism, but they are not as simple to use as good ol' vertical roll of paper style systems.

2

Because it is more efficient.

If you have to scroll horizontal, you have to scroll for each line of text to the end, go back for the beginning of the next line, scroll for the end of that line, go back for the beginning of the next line etc.

If you scroll vertical, you can read the complete text on the screen, then make a scroll of more than one line (maybe the complete screen) and read the new text.

2

Assuming you are designing exclusively for a language that tracks horizontally:

Your line breaking on word-wrapped text must be completely arbitrary

If you have a block of text, and you're willing to scroll horizontally, when should you decide that enough is enough and add a line break? Even if you're going to attempt to line-break intelligently, you will need to first know the contents of the page so that you can render it, with would mean an always changing user experience, and it would eliminate the opportunity for dynamically loaded content.

You could eliminate the line breaking problem by creating fixed width columns, but that's bad for media-rich documents

I actually really like the idea of reading columns and scrolling horizontally because it would simulate a book-like reading experience, but it's not ideal for documents that have media in them, because you will have to make formatting decisions that are constrained by the dimensions of the media. This means that your site could be perfect on the first design, but if it ever needed to be updated, there would be media constraints which would demand a redesign or (more likely) the media would just never be allowed to be submitted. Furthermore it could not accept user submissions without unnecessary constraints.

0

I would suggest looking at some history, typography and HCI.

Historically scrolls date back to ancient Egypt and were used for record keeping, then by the Israelites (first use of scrolls for the recording of literature) and were used up to and after the first century AD when the codex or bound book was invented. It is interesting to note that these scrolls were in a horizontal format, not vertical (they unrolled at one side and rolled up at the other side) and were split into columns of text much like pages in a book.

In the medieval and early modern period shorter documents called rolls were used primarily for administrative purposes such as accounting, legal agreements, inventories, etc. It is important to note that unlike scrolls, rolls are written in a vertical format (like a vertically scrolling web page) and are often wider. [wikipedia 1] [wikipedia 2]

Scrolls and rolls are linear, sequential items. You start at the start and literally scroll through the entire content until you get to what you want to read. Conversely books (or codex) can be browsed, dipped into, flipped back and forth and generally used in a much less linear fashion. This would seem to be much more accessible and user friendly.

From a typographic perspective there are a number of considerations, mainly to do with the readability of text. The main item to point out here is line length. Optimal line length is considered to be 50-75 characters, including spaces. Too short and you break the readers rythm and add stress to the reading experience. Too long and you make it hard to skip from the end of one line to the correct next line. [“Typographie” - E. Ruder] I am not aware of any recommendations for number of lines per page.

These usability considerations of course follow through to HCI.

  • It dosn't matter how big your screen is, you should still not go over the optimal line length.
  • You should be able to dip into content and skip back and forth easily. This is particularly relevant to very long scrolling web pages and is how most people use the web.

However, with scrolling pages there are some more considerations that naturally come up:

  • It is (or should be) quite easy to get to any part of the page you wish, either through navigation such as a page index (like a faq page), through search or other means.
  • Vertical scrolling allows you to scroll any amount at a time, be it 1 line or 10 pages (or screens) whereas horizontal scrolling limits you to 1 page at a time.
  • How do you horizontally scroll columns of text? Do you allow people to stop with half the column off the screen? If not then horizontal scrolling becomes not so much a scroll as a page flip.
  • Scanning through a lot of text is much easier when scrolling vertically rather than horizontally as there is not the break in continuity that separate pages produce.

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.