Helping Your Readers Read: The Two Things You Need to Know About Page Layout

SONY DSCBefore your readers see your words, they see your page and then make a decision about whether or not they’ll read your document at all. These two tools are simple enough that you can use them in an email …and are all you need to ensure that your readers will go on to read your actual words.

Which of the documents in the sketch on the right do you want to read? Does it help you make that decision if I tell you that looking for a set of step-by-step instructions on how to disarm a bomb? Or that you’re short on time?

Now let me ask you two different questions: Is there ever a time when you’re not ”short on time” and when you’re not looking for ”something important I need right now”? You know what? Everyone you send an email or a document to is in exactly the same position.

We’re always tempted to think that our readers will start at the beginning of our email or document and read every word until they get to the end of what we have to say. And that’s probably true if our document is short enough — under 250 words at the most (that’s about half a page). But, notice, I used the word ”probably,” I’ve had people tell me that a 250 word Facebook post was too long to read.

You know this from your own experience — you know that you skim most of the material that you read, looking for what’s actually valuable to you. You’re probably already thinking about doing that with this blog post (”When’s he going to get to the good stuff!?!”).

How Readers Actually Read

In real life, before they read your words, readers first break your page up into ”chunks.” Readers then take a guess at what’s in each chunk and then prioritize those chunks (what they’ll read first, second, and what they won’t bother with at all). To support that process you need to do two things:

  • Pre-process your page for your readers by breaking your content up into sections that represent the chunks of information that your readers are interested in
  • Make it easy for readers to identify the content in each chunk so they can prioritize the chunks

Which means that you have to think about page design. The good news is that you only need two tools to create a page design that will support your readers (and this all information that I’ve shamelessly taken from Robin Williams (not the actor), whose book The Non-Designer’s Design Book is the most sensible book on design that I’ve found).

Creating Chunks: Alignment

A chunk consists of a heading (which identifies a chunk’s content) and the content that make up the chunk (typically one or more paragraphs but also, potentially, lists and graphics). To create a visual chunk from these raw materials you need just two tools: alignment and whitespace.

Alignment means that the heading and the paragraphs should share an edge. The easiest alignment is the one you see in this column: Left-align and ragged right (i.e. the left side of the lines all line up but the right side does not). This includes the heading for your chunk: The left edge of your heading should line up with the left edge of the content it belongs to (to put it another way, you should not center your headings because that breaks up your chunk’s alignment).

Graphics should share some alignment with the rest of the chunk so that the graphic visually ”hangs together” with the chunk. If the graphic is to the left or right of the text, you can use top alignment where the top of the graphic aligns with the top of the heading; if the graphic is ’in-line’ with your chunk’s content, you can use left alignment where the left edge of the graphic aligns with the left side of the chunk’s content.

Lists, however, should be indented from the left alignment of the rest of the block. This allows readers to spot things for example, step-by-step instructions. Essentially, lists become ”mini-chunks” within a large chunk.

Creating Chunks: Whitespace

However, alignment is only the first step: You also need whitespace. The key issue here is that you should have more whitespace around your chunk than you have inside of it.

Essentially, this means that between the last line of one chunk and the heading that begins another chunk, you must have more space than you have inside the chunk. Coming from the other direction, this means that the space you have inside a chunk between paragraphs, between the heading and first paragraph, and around a list is less than the space between chunks.

There’s another benefit for reducing whitespace inside a chunk, while increasing the whitespace around the chunk. For most documents, once you take space out of the inside of a chunk, you’ll have removed more space than you’ll add around the chunk. The net effect is that you’ll still find you can put words on the page. From the reader’s point of view, your document get shorter even though the number of words hasn’t changed. And, because you’ve chunked out the page to support your readers, they’ll tell you that the document is actually easier to read.

The Content of a Chunk

One last note: Defining chunks (text + heading) shouldn’t be arbitrary. Your chunks should reflect one block of information that a reader will want to read in its entirety and that some readers will want to read independently of any other chunk. To put it another way, a chunk should represent a block of information that a reader will be looking for . The reader should be able to determine the content of a chunk from the heading and, based on the heading, decide whether to read the chunk or skip it.

Similarly, once a reader starts reading a chunk, you believe (based on your understanding of your readers’ needs) that the reader will probably want to read the whole chunk. From the readers’ point of view each chunk represents everything that the reader wants to know about the topic identified in the heading. If there is information in the chunk that some readers will not be interested in, stack that towards the end of the chunk so a reader can stop reading when they’ve got what they need (and, perhaps, go looking for the next chunk they need).

This still leaves one problem: How do you make sure that your headings stand out so that readers can find the chunks they want? For that I have to talk about fonts which will be the topic of my next post. And, don’t worry, it’s almost as simple as page layout.

Type to search

Do you mean "" ?

Sorry, no results were found for your query.

Please check your spelling and try your search again.