People’s eyes view print marketing pieces in a Z format and on-screen marketing content in an F. Why should you care? Because if your most important information – e.g. your call to action – isn’t strategically located on your page or screen, you will get less than optimal results from your marketing.
Years ago an ad agency guy told me about the “Z” scanning format for print pieces. We were implementing a marketing program for a software company that included print ads and a print newsletter. He explained that people first scan across the headline of an ad (“Is this relevant to me?”), scan diagonally through the middle (“Give me more info!”), and then scan the bottom of the ad (“Who sent it and are they important to me?”) This logic also explains how people read business letters and why the postscript is so important. He told me to always put my call to action in the lower right-hand corner of a marketing piece. The Z tip made it clear why a grabber headline is so important as well as scan-able (bulleted or bold, etc.) information in the middle of a piece such as an ad or one sheet.
Communications expert Jan Palmer (Jan is President of the Communication Excellence Institute) first told me that people look at web pages in an “F” format. I researched this further online and found Jakob Nielsen’s (Nielsen – Norman Group) helpful blog post, F-Shaped Pattern For Reading Web Content. The post references Nielsen’s eye-tracking study and shows some webpage heatmaps that show how visitors look at online content. Nielsen says people scan the top of the page and across the middle, and then they scan down the left side. He reinforces the importance of putting your most important information at the top and making your content very scan-able.
Another interesting post that I found is by Steven Bradley of Van SEO Design – 3 Design Layouts: Gutenberg Diagram, Z-Pattern, And F-Pattern. Bradley reviews the Z and F viewing patterns, referencing Nielsen as well, and explains the Gutenberg Diagram, which shows how readers view text-heavy pages such as newspapers or book pages.
Here are some questions for readers of this blog post – feel free to comment below.
Do you think that the F web page scanning format is a result of legacy websites first having menus on the left, then on the top?
What does the F scanning format mean for new, minimalist websites that are highly graphical?