Monday Mornings with Madison


Last week, we examined various studies done using eye-tracking software to determine what and where the human eye looks when ‘seeing’ a search results page. Researchers discovered a Google Golden Triangle or ‘hot zone’ — an area of the page where the eye focused most.

Since then, numerous studies have been done focusing on eye behavior when looking at other types of online pages such as:

  1. an article in the “About Us” section of a corporate website,
  2. a product page on an e-commerce site, and
  3. the home page of a news website.

Although all those pages are vastly different in how they are designed (such as where they put banners, how they design headlines, where they position text and photos, how they use numbers, etc.), the results of those studies all shared certain similarities and provide a few important insights for any company that has a website.

The F-Zone
The first universal truth is that regardless of the type of page, eyes move across web pages in a somewhat similar F-shaped pattern. Very similar to the upside-down right isosceles triangle we saw last week , eye movement on most other kinds of web pages follow a shape that resembles the letter “F”. What does that mean? Starting in the upper left part of the page, but below the header, eyes scan across most of the top of the page from left to right, then move back to the left again, scan down a bit, and then move across from left to right once again. This time, the eyes scan to about the middle of the page, move back to the left margin again, and then continue to scan down the left side of the page to the end of the fold, before scrolling is required. Thereafter, focus wanes. Information below the fold is looked at much less.

Why does this matter? A website is often the ‘first impression’ a person has about a company.  Based on what they see, a person may decide to do business or not do business with that company. Do this exercise. Examine your company’s website. Look at the home page. Look at other pages. Try to ‘see’ it the way most other people see it. Look at just the F-Zone.Would they ‘see’ what you want them to learn from the information in the F-Zone?

Business owners believe that if a website is beautiful and the copy or message is compelling, then people will read every word. Studies of eye movement behavior show this is just not true. Most people do not read every word of any given webpage. They scan, read a few words of the headlines, perhaps the first paragraph, and possibly a fraction of the second paragraph, before the fold. That’s it. Businesses that put a lot of information on each web page may be disappointed to realize that most of it is ignored.  Don’t take my word for it.  Slow-motion replay of users’ eye movements as they scan across a page says it all. 

Keep in mind that the F-zone pattern is not perfect.  It sometimes is more of an E-zone, and sometimes can be altered by using photos and graphic images. Embrace the truth to help get your message across.

9 Tips for Designing F-Friendly Webpages

1. Keep text short and get to the point. Users will not read text thoroughly in a word-by-word manner. Exhaustive reading is rare, especially when prospective customers are conducting initial research to identify a shortlist of vendors. Some people may read more, but most won’t.

2. Put your most important information in the first two paragraphs of text on a page. If you must have more than two paragraphs of text, put the key information first. Don’t save the most important information for the end.

3. Use powerful or information-carrying words in first 2-3 words of headlines, subheadings, and bullet points. Readers spend only about 1 second on a headline. Attention-grabbing words will draw and keep the eyes. But most will read the first two words more, and the third word on a line much less often.

4. Use bullet points and subheadings. Breaking up the information and using snippets is also more noticeable when scanning down the left side of the content in the final stem of the F-scan.

5. Use numbers whenever possible. While it does not follow the rules of grammar for print, numbers pop out from text and call more attention. They are also perceived as being ‘facts.’ It is better to write “4,356” than to write “over four thousand.” Exact numbers are looked at more and viewed as factual. But it is better to write “1 trillion” than “1,000,000,000,000.” After millions, people have trouble deciphering larger numbers.

6. Don’t use overly large fonts for headlines. They promote / encourage scanning. To promote reading rather than scanning, use smaller fonts. Of course, the font size must be readable. However, the thought that bigger is better is just plain wrong when it comes to web text.

7. Place navigation across the top of the page. The eye will find the nav bar at the top of the page more easily than on the left side. Never put navigation on the right side.

8. Use eye-catching photos. When it comes to photographs, bigger is better. Viewers are more likely to focus on a picture if it is much bigger than a postage stamp. Also, clean clear faces attract more eye fixations.

9. Use multi-media graphics to explain difficult or unfamiliar concepts. Audio and images work best.

“Choice of attention – to pay attention to this and ignore that – is to the inner life what choice of action is to the outer. In both cases, a man is responsible for his choice and must accept the consequences, whatever they may be.”  W. H. Auden

© 2011, Written by Keren Peters-Atkinson, CMO, Madison Commercial Real Estate Services. All rights reserved.

Leave a comment

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

WordPress Appliance - Powered by TurnKey Linux