No one creates web content with hopes that it will be ignored. But we as digitally focused writers and designers also know that people scan web pages instead of fully reading them. So how do you guarantee users won’t breeze through the text you worked so hard to research, compose, and deliver?
To ensure individuals view and process information on your post-click landing page, it’s essential to establish and follow an organized visual hierarchy. This increases the chances that readers find your webpage usable and worthwhile.
An F in Speed Scanning
An eye tracking study by the Nielsen Norman Group determined that the dominant reading pattern for web content is F-shaped. This means that the human eye tends to read content first in two fast, horizontal movements, and then in a vertical movement across the left side of content. Typically, the first horizontal movement spans a larger area than the second horizontal movement farther down the page. Additionally, the time spent scanning the left of the webpage varies in speed and thoroughness between users; but the overall F-shape is fairly consistent.
Familiarity with this dominant reading pattern has important implications for businesses and web designers, because an F-shaped template ensures that the most important content on a webpage is immediately visible to users if placed appropriately. Additionally, the F-shaped design makes websites feel more “intuitive” because customers get exactly what they want.
Taking Advantage of the F-Pattern Habit
If you know your users are likely to use an F-pattern scan for text-heavy pages, why fight it? There are ways to take advantage of what you know about users’ behavior in order to lay out your web pages to maximum advantage.
- Include the most important info on the first two paragraphs of the page.
- Use subheadings that stand out graphically from the body text.
- Begin headings with the words carrying the most important info about the following section.
- Visually group blocks of related content; use a background color or border.
- Bold important words and phrases.
- Use special formatting for links, as well as specific cueing verbiage.
- Call out items in a list or process with bullets or numbers.
- Edit brutally; cut any unnecessary content.
Add Zest with Z
The other most popular webpage layout follows a Z-shaped pattern. When a page features smaller amounts of text, users default to Z reading since most Western readers will scan a web page the same way they would scan a book: top to bottom, left to right. The Z-shaped format begins in the top left corner and scans to the top right, followed by scanning in a diagonal, leftward sweeping movement, and then continues with a second horizontal motion that reaches the bottom right corner.
Make the Z Pattern Work for You
With a less text-heavy page, the Z-pattern is a great option. Before you start designing and loading content, think about the following considerations:
- When a visitor lands on your page, what do you want them to notice?
- In what order do you want them to see the information?
- What do you want them to do?
If you know the answers to those three questions, then it’s simple to lay out a page that does what you want it to do. Important elements of the page should be placed along the Z-pattern layout. This ensures that users notice the important elements, in the right order, and then do what you want them to (a call to action or click through). Taking advantage of a Z-pattern hinges on placing important information where the user’s eye would naturally fall, then increasing its visual prominence. Prioritizing the information you’re communicating is essential to the success of this layout.
Success Stories
Interacting with a F-pattern layout will feel easy and natural — a “user-friendly” experience. CNN’s webpage is a good example of an intrinsically text-heavy enterprise made friendly in website form. The most important articles are listed across the top for scanning, and then the next most important news pieces listed down the lefthand side of the page. CNN’s logo appears on the top left of the page, fostering brand awareness in readers while they peruse the site. The site makes great use of grouping information via bullets, lists, and use of borders, thus allowing it to be more digestible.
Evernote’s landing page is a well-executed Z-shaped layout. It’s minimalist and doesn’t feature tons of text; it features the important elements clearly. Information includes what Evernote does for a user, what the interface looks like, and multiple buttons to sign up for a free account (or log in). Evernote’s logo is prominent and the page is styled in their signature green.
Which One Fits the Bill?
Choosing an F-shaped or Z-shaped layout depends on how much information you want to present and what you want your user to do with it. Lots of info and want to call out the top points? It’s a clear F. Just a few points of important information and a strong CTA? Z’s your best bet.
