Consumer viewing patterns
There are common patterns for eye tracking on both the printed and digital page. These patterns are based on the movements that our eyes tend to make when presented with something new. Understanding where the eyes will naturally look is key to a design's effectiveness, so it is highly beneficial to understand and analyse the scanning and gaze patterns of people. Eye tracking research offers useful insights into viewer behaviour, attention, and preferences, and by understanding where attention rests, a design can offer better interaction and message clarity.
The F-shape pattern of scanning is well known, but was popularised by NNGroup’s eye tracking study which recorded more than 200 users whom looked at thousands of web pages. The study found that users’ main reading behaviour was fairly consistent across many different sites and tasks. The above heat pattern of the people's eye tracking resembled an ‘F’ (sometimes 'E') shape and was formed from the following three components:-
1. Users first read in a horizontal movement—usually across the upper part of the content area. This initial element forms the F’s top bar.
2. Scanning then moves down in a vertical line, looking for points of interest in the paragraph’s initial sentences. Having found something interesting, this then moved across in a second horizontal movement, forming the F’s lower bar.
3. Finally, the users scanned the content’s left side in a vertical movement, thus completing the F.
In terms of application, the F-pattern can be used - particularly in text-heavy content - to boost visual hierarchy in the design. In cases where there is a lot of content, viewers will respond better to an F layout that is designed according to natural habits of scanning. So before arranging a design's elements, priority should be given to the most and least important ones. Once the designer has decided what they wish their viewers to see first, the key things can be placed at the pattern’s junctions or 'hotspots' to better ensure optimum viewer interaction. This would likely include vital elements such as CTAs, key typography & images, and would specifically be placed at the left and right sides of the F where the user begins and ends their horizontal scanning.
But the designer should also be aware of maintaining the viewer's engagement, as the main drawback to the F-system is its predisposition to monotony. Viewers may disengage from repetitive and similar content in rows, so the addition of a surprising element within the scanning area may help prevent this. This technique of “breaking the expectations” of the layout can be useful when there are long vertical spans of content which might become mundane.
The Z-shaped pattern is often observed when viewers are scanning content that follows a logical hierarchy or layout. People start at the top left corner and scan horizontally to the right (forming the top bar of the Z). Then, they move diagonally down to the left (forming the diagonal bar of the Z) and scan horizontally again.
Z-Pattern scanning occurs on designs that are not centered on the text. Therefore, this makes the Z-pattern a good solution for simple designs with minimal text and a few key elements that need to be seen. A design centering mostly around one or two main elements can implement the Z-pattern to make the procedure of scanning much easier for viewers.
The premise of the Z-layout is fairly obvious and similar to the strategy behind the F-layout: simply impose key targets onto junctions of the Z. The ideal goal is to get people to see the most important information right from the start and then the next most important information second. Thus, the key elements which are placed along this scanning path should present the viewers with the right information at the right time.
It is therefore essential in a Z layout to create rhythm in the design with a flow for the viewer's eye. This is about leading the eye from one place to another in the right direction on the Z, and can be maximised with a combination of visual weight and visual direction.
In webpages featuring carousels or image sliders, this scanning pattern is created by users tending to focus on the central area where the images are changing. They typically fixate on the central images while occasionally glancing at the navigation elements or call-to-action buttons around the carousel.
Use of this layout may have some success when you have one of the following: -
1. A large set of items to show, but want to let the user concentrate his or her attention only on a select few items at a time;
2. The designer wants to tease the user by letting him or her know that there are more items available than what is currently shown;
3. There is not have enough space to show all items at once;
4. There are highly visual items to display such as movie posters, album covers, products etc.
It is inadvisable to use if: -
1. The items are non-visual, such as links to text articles, PDF documents etc;
2. The content links cannot be immediately identified by an image.
Once an understanding is reached at how the human eye processes visual hierarchy, the designer is better able to arrange the elements more effectively. Content in any layout will follow a specific hierarchy: headers appear above body text and menus go at the top, bottom, left, or right of the page. Designers try to organize content so that they present the highest priority elements on any given design first. Then, they deliver the rest of the content from highest to lowest priority. Viewers will therefore test and prove the visual hierarchy of a design by looking at the first element which grabs the eye’s attention most; secondary elements follow after in hierarchical order.
This hierarchical viewing pattern is therefore determined by a designer's use of visual hierarchy, as when a design follows a clear visual hierarchy, viewers tend to focus on the most prominent elements first, such as large headings, images, or interactive elements. They then move to secondary elements, such as subheadings or bullet points, and continue to scan the page based on the hierarchy of the layout. The earlier section, Basic principles of design, covers hierarchy more thoroughly and how the other interrelated core principles draw viewers into a design and establish this pattern.
