How do you design columns, sections and spacing to force reading direction & usability?

Question

Instead of long, wide single column documents I've started using multiple columns to improve readability (mostly due shorter lines). However, in a document containing multiple columns and sections I'm having a hard time defining correctly spacing and lay-out to set up an obvious reading direction.

Please see the attached, below image for reference;

• On the left page I've made a layout on a per section base. The user should read column A, followed by column B, before heading to the next section.
• On the right page I've made the content follow each column. So they should read the whole first column before moving to the second column.

The problem
My issue is with the left lay-out I don't find it obvious which direction you/the user should read. My issue with the right page is that I just don't like the way of writing/reading this way. It doesn't feel organized, structured, unlike the left page. I could easily understand that with the first design a user still reads the whole first column before moving to the next, instead of on a per section basis, which is wrong.

The requested solution
I'm looking for some theory, perhaps a visual example, to better understand how to correctly set-up a multi-column layout which has an obvious reading direction, preferably on a per section base, like the first page.

Answer 1

There's is a lot of research around that explains the way a reader's eyes naturally flow when reading, so you may find some of that useful.

One of the things you're doing, based on your example image, is mixing your layout even within a page, and that can be quite disorienting for a reader.

Also, I would argue that the right page is the way it should be designed. And, I think you may instinctively already know this because when referring to your image, you state "My issue is with the left lay-out I don't find it obvious which direction you/the user should read." Yes, you also have a problem with the right layout, but that's more about personal preference, rather than confusion on behalf of readers. I could almost guarantee if you did a snap poll of 100 readers that most would opt for the right as being the one they'd prefer. As I said, there's a lot of research around this sort of thing.

However, if I were given your left page and told it had to stay as is, I would use lines as a guide for the reader. See below image:

Some comments on the above:

• It's only a quick edit of your mockup, so you'd have to make sure you chose the line weight, colour, length, placement etc carefully to complement the rest of your page layout
• You could do away with the vertical line down the bottom as both columns start with a clear header.

Further reading

• https://en.wikipedia.org/wiki/Page_layout
• http://infomotions.com/musings/waves/readability.html
• http://vanseodesign.com/web-design/3-design-layouts/

Answer 2

The first thing to get out of the way is: your reader will either be skimming and hopping through your document, or they will be actively fighting the urge to skim and hop. To successfully guide your audience through the page, you'll need to minimize these temptations, and make your intended approach more or less irresistible. Eyes can't be "Forced," and that shouldn't be your goal. Making the correct order the easiest way to read, that's how you'll get results.

I actually think the left mockup is closer to what you want, because this scheme will minimize any temptations for readers to hop across the page to glance at a section prematurely. The right layout is definitely what our left-right/top-down conventions would suggest, but it places big, colorful section headings directly next to long, boring content. This will distract readers more often than keep them on course.

The Right layout is hard to read in order. (Or, put another way, it's easier to read in an incorrect order than it is to read in the correct order.) Moving down Section A in the Right layout, your eyes get pulled by both Sections C and D. Later, while reading B, you the reader must jump the length of the page, past C+D again, to read the last two lines of B, without starting in on C or D. Comprehension of B becomes dodgy, and readers abandoning A for C/D is at least a possibility and distraction, if not a tendency. I am inclined to believe a page like this would get skimmed, fairly frequently.

Your Left scheme keeps these issues in check - your reader won't be distracted by nearby section headings that they shouldn't be reading yet. The temptation to skim and hop through the page is minimized, and the easiest way to navigate the whole page is the correct way.

Here's my edits on your Left layout.

Mainly, I added some guidelines to each section, and moved the headings to the left to sit atop the guideline and the contents. It makes the Headings "own" the text beneath quite strongly, and makes reading in the right column feel like you're anchored to the section guideline from the previous column. Because the right column text of Sections A and B don't have guidelines, they feel a bit naked, and want to hang on to something nearby. What they hang on to is... the preceding text!

I also made the gutter between A's columns a bit tighter, to enhance this effect, making the second column clearly grouped within A. The gutter of B is as is - notice how wide it feels, and how the second half of B is left floating, untethered. While reading the first half of B, the temptation to jump down to heading C is strong. Bringing the last half of B closer to the first half will encourage readers follow to the end of the text, rather than abandoning B for C at the end of the first column.

Other suggestions:

• Justifying all your text will make your Sections feel fuller, more solid, and more defined. As it is, the text risks becoming blobby and amorphous, and swallowed by uneven whiteness.
• I would also play with moving sections like D lower, so that it is clearly the "last" step of reading the page.
• Experiment with keeping the gutters between neighboring sections (as with C and D) about as wide as you have them, while thinning the gutters of same-section contents (as I did in A). The spacing you have between sections C and D feels natural, especially with the section header pushed to the left in my example.