Email Design

The F-Shaped Reading Pattern


Share this post

This article will walk you through the F-Shaped reading pattern. We will show you why it works for email marketing, along with how you can utilise it in your own email campaigns.

What is the F-Shaped reading pattern?

The F-Shaped reading pattern, or layout, explains the most common eye scanning pattern used by readers of blocks of content [Tweet This].

The layout was identified by the Nielsen Norman Group (NNG) during an eye-tracking study that recorded more than 200 users who looked at thousands of web pages.

It is made up of 3 individual components:

  1. The user reads in a horizontal movement, usually at the top of the content area. This makes up the top part of the letter F.
  2. They then move down the page a small amount and read in a second horizontal movement which is generally shorter in length that the first horizontal movement.
  3. Finally, they user reads down the left hand side of the content in a vertical movement, making up the final part of the letter F.

This isn’t a foolproof layout, as users are unique and sometimes may not follow this pattern. Over the course of the study though NNG found that this pattern is observed most of the time.

This makes it a useful pattern to adopt when creating blocks of content for web design and also for email campaigns.

Why is it important for email marketing?

The main reasons why the F-shaped pattern is important for email marketing are:

  • Email contacts aren’t likely to read all of your content.
    Attention spans are getting shorter, so you will find that contacts are more likely to only scan read your emails.
  • The first two text elements have to showcase the most important information.
    As people scan your email content, they are much more likely to read the first elements rather than the whole copy.
  • Use bullet points with information-carrying words that users will notice when scanning down the left side of your content. An interesting point that NNG noticed was that readers read the third word on a line much less often than the first two words.

The F-Shaped Reading Pattern looks something like this:

F-Shaped Reading Pattern

Adopting the F-shaped pattern when creating your email campaigns will make the content more scannable by your contacts. It allows them to see the importance of content in a “visual hierarchy” and for most Western readers it feels much more natural.  Readers in Western cultures have been reading this way all their lives.

How to use the F-shaped layout

The F-shaped pattern gives you control over your email campaign design, whilst optimising for interactions and engagement. Even if this doesn’t work for every segment that you will send emails to, at least try it out on every audience as a split test so that you know for sure.

Here are some tips on creating F-shaped patterns in your own email campaigns:

  • Prioritise your content
    Arrange the different pieces of content on your page by prioritising the most important and least important parts. Place the most important parts in the “hot-spots” of the pattern to increase interactions. Don’t forget that email content should always be concise!
  • Set expectations
    Contacts will read the first elements of content at the top of the email, so make sure that the first horizontal contains the important message that you are trying to get across.
  • Design for scanning
    Create your email content and designs with scanning in mind and put content on the F layout that contacts are most likely to be interested in.

When designing for contacts to easily scan your email campaigns consider these points:

  • Start new paragraphs and blocks of text with enticing words.
  • People will always look at the most dominant element in the email first. As a result, give more weight to the important elements; use bold formatting to highlight text, or consider using different colours to highlight CTAs/buttons.
  • Only cover one idea or purpose in each block of content and use bullet points to make the content scannable.

Here is one great example of the F-shaped pattern in practice in an email campaign from Bloglovin’:

Bloglovin' F-Shaped Reading Pattern

The Bloglovin‘ email uses a header to draw the readers’ eye at the start of each new content block.  The recipient can scan down the left hand edge of the page to see which blog post is most relevant to them.  Bloglovin’ have repeated the F-shaped reading pattern a number of times in this example due to it’s length.

Conclusion

So that is a brief introduction to the F-shaped reading pattern. You may not have noticed that you follow this reading pattern, although now that we’ve pointed it out you may notice it much more often.

Try using the layout in your next email campaigns, even if you just use them as a split test. You might be surprised how effective this simple layout can be.  Even if it isn’t successful during testing, at least you’ve given it a try and can rule it out.

If you see any examples of the pattern in your own inbox, let us know and share it below.

If you have enjoyed our post on the F-shaped reading pattern, why not download your free copy of The Complete Guide to Email Marketing here:

The Complete Guide to Email Marketing Download Banner


Share this post
Email Design
The worst email marketing campaign you will see
Email Design
How to Create a Festive Animated Email Header Using CSS Animation
Email Design
Email Design: The Inverted Pyramid