Is it better to have groups of content stacked vertically or horizontally?

Question

I have groups of content and I can stack them vertically in 100% width rows or horizontally (even-width columns).

Since the user for English language web sites will read left-to-right and the and users don't mind scrolling, one could argue that having vertically stacked content is easier to use:

^{download bmml source – Wireframes created with Balsamiq Mockups}

However, if one were to stack them horizontally, the user could scan the header text without scrolling in one continuous left to right motion:

^{download bmml source}

Is there compelling evidence that says one approach is better than the other?

Answer 1

You mention reading, so I assume this is a site with content meant to be read. The following studies examined the effect of line length on reading speed and on desirability. Dyson and Kipping conclude that for reading from a computer screen, reading speed increased with line length. Readers preferred the shortest and longest lines. Their study did not examine margins.

Youngman and Scharff tested similar conditions, but studied the effect of margins. They concluded that line length does not independently affect reading speed, but that line length and margin width interact significantly. Readers were fastest with 8-inch lines with 0 margin, but hated it. They strongly preferred 4-inch lines with 0.5- to 1.5-inch margins, and read nearly as fast as with 8-inch lines.

Youngman and Scharff (1998). Text width and margin width influences on Readability of GUIs. SWPA 1998: http://www.lieb.com/Readings/Width.pdf

Dyson, M.C. & Kipping, G.J. (1998). The effects of line length and method of movement on patterns of reading from screen. Visible Language, 32, 150-181. http://psychology.wichita.edu/surl/usabilitynews/72/LineLength.asp

Answer 2

How much content is there in the groups? Is it equal across the groups or varied?

Vertical vs Horizontal: If you have enough space to accommodate multiple groups side-by-side while still maintaining readability, it would be great. Conversely, if the line is too short it is not good for a pleasurable experience.
http://baymard.com/blog/line-length-readability

You can use an accordion (vertical) menu if you want the headings to be visible all the time.

Answer 3

For this width VS height issue, you will find that the rules of reading comfort keeps changing with amount of content, number of columns and height of rows. Given the amount of text you have provided, I would go with 1 column approach.

Answer 4

Evidence i've found that supports the horizontal approach over the vertical approach can be found within The Journal of Vision - "Comparing reading speed for horizontal and vertical English text". In the past this article was used to help grasp how customers look at our website content to help provide a better reading experience. However when designed properly you can use a vertical approach.

Chris Coyier's CSS-Tricks is a good example of a mixed layout using vertical and horizontal layouts. The vertical layout for Desktop and horizontal when viewed on mobile devices. The vertical layout works for this sites desktop view as each content container has enough breathing room to allow users to focus on the blurb of text they choose to read.

CSS-Tricks Desktop Vertical Layout

CSS-Tricks Mobile Horizontal Layout

When using Mobile the horizontal approach is best due to mobile devices limited screen resolutions. Desktop has a higher screen resolution which provides more real-estate on the page which can support both horizontal and vertical approaches.

Answer 5

What about placing an expand/collapse button on every article? (Pardon the very quick and dirty mockups.)

Or, less preview is more compact: