Knowing your 'Golden Triangle' will ensure your pages are read!

Did you know that even under the best of circumstances, your web visitors will read less than 20% of the writing on your web pages?
Remind yourself daily that most web visitors don’t like to read. In fact most visitors to your site will require mere seconds to form an opinion of the value of your content before abandoning your site forever. (You can measure this – look at your bounce rate for each page.)

The Golden Triangle
The Golden Triangle was first reported by Enquiro (www.enquiro.com) when they published a report analysing eye scan activity during first time scans of Google search results pages. Enquiro found that when Googling, most web users concentrate their attentions on a triangular area covering the first few search results. Then if they don’t find what they want they will usually start a new search.

How does this behaviour affect us as web owners? Badly, I am afraid. Because if our site does not appear in the first few lines, we as well not exist! That is why we as web owners need to spend so much time and effort improving our search rankings.

From Triangle to F-Shape
Subsequently Jakob Nielsen did more work on how the triangle works for the average web page. The results of this research are reported in his article F-Shaped Pattern For Reading Web Content.

He also used eye tracking technology to investigate HOW users scan a “normal” web page. (IE not a Google search results page). What he found was that most readers use an F pattern to scan a new web page for information of interest.

This has major implications to us as web owners! Because it means that if we don’t put interesting content in the first few lines – we are toast – and our web viewer will simply click away! So it behoves us to study the structure of the F-Shape and to apply the lessons of F-Shape wherever we can to each of our precious web pages.

Structure of the F-Shape
The F shape is structured as:

FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF (first scan)
F
FFFFFFFFFFFFFFFFFFFFFFFFFF (second scan)
F
F
F
F
F

The pattern forms a triangle if you trace its outer edges. The F-Shape formed by two horizontal lines across the page from left to right, with the top line being longer than the one below it. The vertical stripe connects the horizontal lines to complete the F-Shape. 

Text that looks interesting to the reader can extend the time spent examining info on the down stripe of the F. (This is usually menu items. Thus if you do have a sub-menu in this position - keep links short and make sure your links are arranged with the most important items at the top.) It is possible that at this stage a reader can branch out outwards in a third horizontal pass, if the info is appealing enough. 

Another important point is the readers do not follow the text linearly across each page. They flit to islands of text that interests them. This results in a blotchy, seemingly random reading pattern. Either way, know that they will seldom read your sentences from beginning to end, unless the information is really of interest.

What this means for your web content:
In general remember that people don’t read a lot. This is the most important content rule any web owner needs to know. So do spend time trying to REDUCE the text content of your pages. Less is always more when it comes to content.

Readability of your pages using the F-Pattern
Top of the F Shape is read first horizontally

1. Most important sentence and keywords need to be on the top line.
2. The first paragraph of writing is key and will be read the most – so work hard at keeping it short and full of valuable keywords.
3. The second paragraph will be read next but it will usually never be read completely.
4. Use bullets and sub headings in bold and make the first few words count.
   (Don’t expect readers to carrying on reading. Say your piece in the first sentence – if more is read, that is a bonus)

This article is part of a series on the basics of competent web design called Web Design 101. Additional articles are added to the series at irregular intervals.

Click here to view more articles in the Website 101 series 
References and further reading:

1. Enquiro 
   a. Enquiro defines Google Golden Triangle
   b. Eyetracking2-Sample
2. Jakob Nielsen - F-Shaped Pattern For Reading Web Content
3. Harald Weinreich, Hartmut Obendorf, Eelco Herder, and Matthias Mayer: "Not Quite the Average: An Empirical Study of Web Use," in the ACM Transactions on the Web, vol. 2, no. 1 (February 2008), article #5.