When people visit your website, you have two seconds to grab their attention. You have an additional 10 seconds — at most — to entice them to click a link, sign up for your mailing list or buy into whatever you’re offering.
If you’re planning a website, you must strate
gically place each element with the goal of enticing visitors to hang around longer than 12 seconds. Eye tracking studies have determined that we scan web pages in an F-shaped pattern. Visualize a capital “F.” When we open a web page, our eyes zip horizontally across the upper part of the page, mimicking the top bar of an “F.”
Next, our eyes jump back to the top left corner of the “F” and scan vertically a short distance. Our eyes then make a second horizontal movement, swooping across the lower bar of the imaginary “F.” Finally, we scan the left side of the page in a vertical movement.
In addition, we pay far more attention to content “above the fold” than we do to content we must scroll down to view. We also spend nearly three-quarters of our time looking at the left side of a web page.
Knowing how readers naturally scan a page will help you position key content in the appropriate spots on your site. Let’s apply the F-pattern to specific elements that typically appear on a web page.
Top left. This is your first point of contact with your visitor. On most websites, it’s where you’ll see the company logo, a splashy header or a featured product.
Top bar of the F. The navigation bar usually holds the place of honor here. Give your navigation tabs simple titles such as “About,” “News,” “Services,” “Clients” and “Contact.” People need to know at a glance what they’re going to get on each page of your site.
The first vertical leap. After scanning your navigation tabs, the reader’s eyes will begin tracking down the left-hand side of the page. This is why many savvy businesses place a blog — or an excerpt from the most recent blog post — on their home page. An interesting article can instantly turn a stranger into a friend.
Other popular elements that live in this space include large product photos, a brief statement (often a company’s vision or mission statement) or a compelling call to action in large, headline-style fonts.
Lower bar of the F. This critical piece of real estate propels the reader’s eyes horizontally across the midsection of the page, all the way to the sidebar. The sidebar or right-hand area of the page often includes elements such as a mailing list signup form, a search field, customer testimonials, key contact information or a specific call to action.
Second vertical leap. The reader will take another quick pass at your page, scanning the bulk of the page’s content in a vertical motion. Rather than reading your content word-by-word, the reader will look for key words, phrases, bullet points and visuals.
Make it easy for the reader to absorb your content; highlight key phrases with bold subheads. Use bullet points or numbered lists. Write short sentences. Limit paragraphs to two to three sentences.
For easiest readability, left-align all text and don’t indent paragraphs. Create breathing space on the page by double spacing between paragraphs.
Explore the websites of the nation’s biggest brands: Coca-Cola, IBM, Microsoft, GE and McDonald’s. All of them employ the F-pattern. Does your website earn an “F”? It should.
Laura Christianson owns Blogging Bistro (bloggingbistro.com), a Snohomish-based company that serves a full menu of online marketing services, including website creation and consulting. Contact her at 425-244-4242 or laura@bloggingbistro.com.
Talk to us
> Give us your news tips.
> Send us a letter to the editor.
> More Herald contact information.
