F-Patterns and Hot-Spots on Web Pages

Where should I place content on a page for the most impact? We are going to look at F-patterns, Z-patterns, hot-spots, golden triangles, hooks and inverted pyramids and discover that we are talking about the same thing, put the important stuff up front!   How do most people read a website? In our discussion on content consumption we examined why people consume web content in a different manner to traditionally printed physical content. The factors, which include text being harder to read and the website visitors inbuilt opportunity to quickly move to other information (links and searching), results in most of us ‘scanning’ rather than reading web content. This is a great thing to know, however understanding the implications, and using them to your benefit as a publisher, is not always that simple. We still have to write for the detail reader (or visitor who prints the page), and at the same time, we want to ensure that the quick scanning reader also gets the key points. Where to place key content? (F-pattern studies) Jakob Nielsen and others have conducted quasi-scientific ‘eye-tracking studies’, where the eye movement and dwell times of a number of site visitors (in a controlled environment) are recorded. The result is a heat-map showing the most heavily consumed (time spent) areas of a web page. The image to the left is an example of what a heat-map may look like for one of the pages on this website (my best guess). If you would like to see some real heat-maps, visit Jacob Nielsen or Eyetools. These studies show where people’s eyes spend the most time and therefore infer the most heavily consumed content. Using the results and placing content. Once people have consumed the compelling images and strong colors on your page, discussed under the section on design, their consumption of text content tends towards two horizontal passes and a slow vertical pass (creating an F-shape as marked on the image to the left). Different color and dwell settings on eye-tracking equipment turn this ‘F’ shape into a triangle that points to the top-left corner of the page. Google (and others) call this the ‘golden triangle’. As a publisher, the best result is usually to place your key information and concepts within the space defined by either the golden triangle or F-pattern. Simply put, place you key message first. Z-patterns, inverted pyramid and the hook? Before we all get too carried away, eye-tracking only shows us where the eye spends the most time, not the actual path, not what was picked up in peripheral vision and certainly not a measure of the information that ‘stuck’ in the mind of our visitors. In fact if you follow the path of the eye, rather than the dwell, there is a rapid settling movement, followed by anchoring on some strong attention grabbing point and then, once ‘eye-grabbing’ graphic elements are consumed, the visitor’s scanning pattern is actually still pretty much the same Z-pattern that we all use to read printed text (at least English printed text). The difference is scanning speed and our short length of patience with the online media. Taking this Z-pattern and focusing on eye dwell combined with skipped content, as we discussed in content consumption leads to the creation of hot-spot maps and the F-pattern phenomenon. This is not new, Roman and Greek philosophers discussed the attention of audiences and the importance of emphasizing key messages as early as possible in a communication. Journalists and marketing professionals discuss the ‘hooks’ and how to place them effectively and how to use rhetorical arts of repetition — something we will discuss in the Message section of this site. Another way to think of this, is instead of the scientific and narrative manner of building a case and then coming to a conclusion (sometimes described as a logical pyramid), web, marketing, newspapers and other impact focussed content inverts this pyramid, bringing the conclusion and key points to the top and then following up with detail. This methodology gets the key content into the golden triangle, F-pattern, Z-pattern, hot-spots or whatever other name describes ‘giving people what they want’. With this in mind, we can have a look at what happens if you don’t give people what they want as we discuss cognitive dissonance.