Eye-Tracking Research & Patterns in Digital Reading
Why Other Agencies Don’t want you to know Patterns
Agencies use the below research to help improve the structure of your content and advertising dramatically, so your clients will take in the most critical and eye-catching sections. Hence, you engage them, keep them reading, and improve conversion rates dramatically, but you can do it for free.
What Eye-Tracking Research has Discovered
Eye-tracking research shows our minds scan content before correctly reading webpages and adverts in various patterns; understanding this is one of the most affected marketing tools and helps you layout content to draw the most attention from your community & clients.
Patterns Awareness
Eye-tracking research has identified multiple scanning patterns for web pages and content. In this article, we will go into detail on the below three patterns,
- F-pattern
— Spotted pattern
— Commitment pattern
Patterns we will touch on in the future include;
- Layer-cake pattern — Occurs when the eyes scan headings and subheadings and skip the standard text below. A gaze plot or heat map of this behaviour will show horizontal lines, reminiscent of a cake with alternating layers of cake and frosting
— Zigzag pattern — As the name suggests, the Z-shaped Pattern follows the shape of the letter Z. Readers will start in the top/left, move horizontally to the top/right and then diagonally to the bottom/right before finishing with another horizontal movement to the bottom/right.
— The Gutenberg Diagram Pattern — Used to show a user behaviour known as reading gravity, the western habit of reading left-to-right, top-to-bottom. It describes a general pattern the eyes move through when looking at evenly distributed, homogeneous information. As a result, this pattern most often applies to text-heavy content.
— Marking pattern — keeping the eyes focused in one place as the mouse scrolls or finger swipes the page, like a dancer fixates on an object to maintain balance as she twirls. Marking happens more on mobile than on desktop.
— Bypassing pattern -When people deliberately skip the first words of the line when multiple lines of text in a list start all with the same word(s).
The most discussed pattern is the F-Shaped reading pattern, which was discovered in 2006, but it’s not the only pattern found when researching eye tracking; now, 16 years on, is it still used and effective?
F-Pattern
You have correctly heralded the F-Pattern before; as shown in the simplified layout, the pattern shows that when an absence of subheadings and bullets (the most seen case of this in content is an image between the heading and first paragraph), users tend to be drawn in on the words at the start of lines and the top of the page.
This behaviour results in a pattern that resembles the capital letter F most times with an extra smaller horizontal line — and that’s why it’s called the F pattern.
Is your language right to left?
If your language is not a traditional left-to-right, Don’t panic. Research has also been done on the right to left languages, and this paten is mirrored, and all advice shown can be flipped in these instances when more focus is spent on the right side of the page, not the left.
Right-to-left languages such as Arabic favour a reversed F-pattern, like the one seen in this study participant’s gaze plot as he scanned a page on an Arabic website. (Each blue dot signifies a fixation. The lines between the dots represent saccades in which the user moves the eyes and is virtually blind. These lines help us to follow the sequence of fixations. Larger dots represent longer fixations, and the numbers denote their order.)Source: NNgroup.com
Design emails and websites for scanning
— Start new paragraphs and blocks of text With action or catching words.
— Keep it simple and to the point; covering more than one idea or purpose in each block of content is not a good idea; try using bullet points to make the content scannable.
Here is one great example of the F-shaped pattern in practice in an email campaign from Bloglovin:
The Bloglovin email uses a header to draw the readers’ eye to the start of each new content block. The reader can scan down the left side of the page to see which blog post is most relevant to them. Bloglovin repeated the F-shaped pattern several times in the email. Source: Wired Plus
Let’s take a look at a couple of major brands that use the F pattern in marketing:
Macdonalds
Paramount
After 16 years, it like like the f pattern is being used more than ever. Are you going to take advantage of the F-shaped pattern? Before you take off to rewrite your website, we have two more patterns to go over; next up is the spotted pattern.
Spotted Pattern
The spotted scanning pattern focuses on specific words or chunks of rumours spread throughout the page. The user chooses words because one of two reasons:
- They Stand Out — Differently coloured words, bolded words, bulleted links and lists
— Task-Based (for example, capital letters or state codes for an address, digits for a piece of numeric information like phone numbers or postcodes).
When using the spotted pattern technique, you have to rely on your designer or content creator to focus on naming links to draw attention and the positional use of bullets.
Caption: The heatmap shows an aggregate of six users who were using Wikipedia to learn about the dancer Mikhail Baryshnikov. The heatmap shows the F-pattern on the left and the spotted pattern on the right side of the page.
Caption: A zoomed portion of the previous heatmap shows that the users were highly focused on the information about Baryshnikov’s education, which was their task. The digit “1960” probably attracted attention since users were trying to learn when the dancer began his education.
Last but not least, in regards to consuming information, the commitment pattern users are every content writer’s dream consumer.
Commitment Pattern
The commitment pattern is the traditional reading style and does not involve scanning. For example, you are reading instructions, a student studying for the text, or someone interested in your content.
This leads the consumers of the content to have the best comprehension, but it is by far the most time-consuming of the four patterns. Remember, even when using this pattern, heading and subheading will improve the readability of the content, just because you know the customer will have to follow this pattern when viewing your content. Try to make it user-friendly, not a wall of plain text.
We said before that the commitment scanning pattern usually occurs when people are highly motivated to be on the page and learn. People are motivated when they:
- know and trust the source
— loyal to your brand
— Referrals from high authority people and websites.
The user was told she would be quizzed on the content in the article on nationalgeographic.com and thus read almost every word, as the gaze plot shows.
Tips for Better Scanning Results
The above research has found that you need to prioritise your content.
Arrange the different pieces of content on your page by prioritising the most important and least important parts. Place the essential elements in the critical locations in the pattern to increase visibility with the 7 points below.
- Important content Top Right or Top Left depending on the language
— Chunking Text
— Bullet Points
— Heading And Sub-Heading
— Use of Colours
— Bold and CAPS
— Placement of numbers and addresses near core information
I want to take the time to thank companies such as NNgroup.com, who have done some fantastic research on these topics. (find links below to their studies)
Happy scanning from www.CSNA.com.au
References:
- https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/
— https://www.nngroup.com/articles/text-scanning-patterns-eyetracking/
— https://www.wiredplus.com/blog/f-shaped-reading-pattern
— https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content-discovered/
