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.

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:

mockup

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:

mockup

download bmml source

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

share|improve this question
1  
On which devices (what size displays) will the content be viewed? –  CJ Franken Mar 18 '13 at 19:05
    
Assume a responsive web site where horizontal stack will become vertical if the viewport shrinks, so the question is targeted to the desktop environment where there is ample room. –  Charles Wesley Mar 18 '13 at 19:06
    
Are the content blocks completely self-contained, or do they lead/link to larger bodies of content on separate pages? Basically, do you show a summary in the box, and link to the full article? Or are these more like short reviews with one or two paragraphs per block? –  CJ Franken Mar 19 '13 at 11:54
    
It could be either, think col 1 could be "About Us" with a link to more information, col 2 could be some location/contact information that is self contained, col 3 could be a news blurb with a link or a pull quote with no link. The content is mutable depending on context. –  Charles Wesley Mar 19 '13 at 15:51

4 Answers 4

up vote 3 down vote accepted

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

share|improve this answer

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.

share|improve this answer
    
The content could be varied, or could be a mix of paragraph content and lists of links (think navigation elements). Re: "If you have enough space to accommodate multiple groups side-by-side while still maintaining readability, it would be great" do you have any research to back that up? –  Charles Wesley Mar 18 '13 at 17:47
    
Again, depending on the content, you can go for a multicolumn dashboardish approach. example: google.com/ig –  rk. Mar 18 '13 at 17:50

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.

share|improve this answer

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 Desktop Vertical Layout

CSS-Tricks Mobile Horizontal 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.

share|improve this answer
    
An important part of why this style is successful is that it offers a brief explanation of the article with a link to read more. If there was a large amount of text, a user would have to scroll through much more content to see the total amount of articles. –  Keiwes Mar 19 '13 at 14:12
    
Adding to @Keiwes depending of what type of content you have and your audience will be a deciding factor on how to present your content. I'd recommend Pattern Tap (patterntap.com) to find other example patterns of horizontal and vertical approaches other sites have used. It's a personal favorite of mine! –  Courtney Jordan Mar 19 '13 at 17:11

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.