Reading Patterns: From F to Z

Marc Brophy

UX Designer

Time is precious and people want to be informed quickly. Websites need to be geared to be as captivating as possible, as it is unlikely any User will read all of the content but instead they will scan through it. In order to address this, eye-scanning patterns should be considered when designing a successful User Interface (UI).

Illustration of the Z-pattern

Finding a Pattern That Suits

The average human attention span has shrunk from 12 seconds in the year 2000 to 8 seconds in 2013 according to a study conducted by Microsoft on Canadian media consumption. With this in mind it is necessary to consider which scanning pattern best suits the UI you are designing. For the purposes of this article, I am going to examine the F-Pattern and the Z-Pattern.

F-Pattern

The F-pattern on different screens

One of the most important eye-scanning patterns is the F-Pattern. First identified by the Nielsen Norman Group in 2006, the F-shaped Pattern is named based on the scanning shape the eyes make when looking across a web page with a lot of content.

So where should it be used? This eye-scanning pattern is best suited for web pages with a large amount of textual content, such as blogs, news articles and detailed landing pages.

Important things to note with this pattern are that:

  • The first two sections of content on a page are the most important (along the F’s bars).
  • The first few words on the left of each line of text should contain enticing keywords (along the F’s stem).
  • Users will rarely read all of your content.
  • Use headings and sub-headings to convey the information of paragraphs below.
  • Cover only one idea per paragraph of text.
  • Use bullets and numbers to call out items in a list (much like this one).

One potential drawback with the F-Pattern is it may become boring and repetitive for Users when used on longer pages. Then it may be necessary to break the pattern with an element to keep the User engaged.

Z-Pattern

Illustration of the Z-pattern on different screens

The second most important eye-scanning pattern is the Z-Pattern. The Z-Pattern name is again based on the scanning shape the eyes make when looking across a website with more sparse content

So where should it be used? In contrast to the F-Pattern, this eye-scanning pattern is best suited for websites which are less content heavy. While F-Patterns are suited for large amounts of content as the focus, Z-Patterns are better suited for highlighting key call-to-action buttons as the focus.

Important things to note with this pattern are that:

  • The most important information should be ordered first, along with the next most important information secondly and so forth.
  • Create a flow with the Z-Pattern to lead the eye along the key points of the Z-shape
  • The first point is the prime location for the logo.
  • The second point should contain the secondary call-to-action button.
  • The last point is the prime location for the primary call-to-action button.
  • Between the first and last point useful information should be displayed to guide the User through these points.
  • The Z-Pattern can be extended to be a series of Z movements rather than one individual one. This is useful for text content moving down a landing page which alternates in a zig-zag pattern.

Conclusion

The F-Pattern and Z-Pattern are similar in terms of scanning with the key difference being, that with a F-Pattern, the scanning becomes quite vertical to the left-side of the content. However, with a Z-Pattern, each line of content may be read if there is less content available.

On a final note, these eye-tracking patterns are important to consider when designing User Interfaces, however these patterns are merely a guide and don’t necessarily need to be strictly implemented as rigid templates. At Graphic Mint we can help you with the Design of your next UI, following best practice and standards. Why not contact us today to start our journey together?