An investigation of viewing patterns on the web

Project Report by Hilla Neske

Supervised by: Stephanie Wilson, 19 January 2009
City University, School of Informatics, Human-Centred Systems

Jakob Nielsen published a study of users' eye gaze patterns as they read web-pages and claimed that users read web pages in an 'F' pattern (Nielsen 2006). The page layouts used as part of his study were low in complexity and (with the exception of a few product images in one of the pages) all text based. This throws up the question whether the F-shaped pattern is perhaps inherent in the structure of the layouts he has chosen for his study from the beginning. In other words, is the F-shape viewing pattern observed by Nielsen, a result of the standard (and fairly simplistic) visual layout that we’ve come to learn from reading the web in the past? This question motivates the work reported here.

With an increase in monitor resolution, page layouts can benefit from greater screen estate for holding content (text and images). Simple and short text based pages are no longer the norm, as text increasingly competes with other formats of information on a page (video, audio, interactive flash features and so on). Today’s web page layouts have become more complex. This study aims to investigate the relationship between layout and eye-gaze pattern. Furthermore, users approach web sites with a number of different tasks and expectations, all of which can affect their viewing patterns. Nielsen briefly admits this fact saying that the dominant F-shape pattern can differ, ‘If users are looking for prices or other numbers’ (Nielsen 2006), but does not investigate this further. Therefore this study also aims to investigate the relationship between user tasks and eye-gaze patterns.

The contributions of my work show that the visual layout of a web page distinctly influences a user’s viewing pattern.

A layout-effect was evident in all tested eye tracking metrics in this study, notably the Number of Fixations on each Area of Interest (AOI) in a layout, the Number of Fixations on the Overall Display and the Time to First Fixation (TTFF), and was also evident in heatmaps. Heatmap patterns in this study largely reflected the underlying layout structure and specific page elements within this structure. The effect showed in regards to both of the tasks. The body of text received remarkably high fixation counts in the sensemaking task in both layouts indicating that this page element is vital clue for a sensemaker, irrespective of the visual structure of the page.

The busy layout showed the highest Number of Fixations Overall in both tasks suggesting that a more detailed and complex layout can have a negative impact on a user’s task performance (Goldberg and Kotval 1998), possibly caused by a lack of clarity and organisation in the layout’s design. Participants’ verbal reports confirm these findings. Layout also directly affects the order, in which elements were viewed on a page (with Russell 2005). If an element was placed below the page fold or placed outside the layout's central column it attracted peoples gaze only relatively late. However, positioning of elements did not adversely affect people’s sensemaking efforts. Heatmap analysis shows that sensemaking activity continues into the lower part of a layout and involves scrolling the page for useful clues.

Elements viewed early into a task, were the menu, the description and the page title, irrespective of the complexity of a layout. Notably, the page title was amongst the first five elements fixated on across both tasks and both layouts, indicating the great overall importance of this element for users irrespective of the specific situation. The study confirms findings by Shreshta and Lenz (2007) and Russell (2005), however contradicts those by Nielsen’s (2006).

Viewing behaviour is affected by a user’s task.

Task type had a noticeable impact on user’s viewing patterns, thereby confirming earlier research by Buswell (1935), Yarbus (1967), Rayner (1998) Pelz et al. (2000) and Yesilada (2008). When given two different task instructions on the same layout type, participants in this study attended to the same layout areas with noticeably different frequencies each time. Important elements in the sensemaking task were the main body of text (description) on the page and the (blog) comments located below them. If the layout was complex, users also referred to the logo and the page title in addition. In the search task user primarily attended to the search field and the body of text, if the layout was complex.

Results for TTFF suggest a less strong effect of task on the busy layout compared to the effect on the basic layout. The study also found that efficiency in sensemaking to be negatively affected by a complex layout.

Heatmap analysis yielded different viewing patterns for sensemaking and search on identical layouts. The patterns differed in size, spread, overall clarity of shape and colour intensity. Sensemaking resulted in a more dispersed pattern, search in a more refined, focused pattern, reflecting the nature of the specific activity. Overall the task effect showed more strongly in the busy layout than in the basic layout. This could indicate, that sensemaking is a less efficient and less directed activity compared to the straightforward activity that is (known-item) search.

Common viewing patterns on the web are rather unlikely.

The heatmaps in this study did not show any resemblances to those of previous studies by Nielsen (2006) or Eyetools (2008). Furthermore, none of the shapes could readily be described by means of a common shape. Viewing patterns from heatmaps varied greatly depending on the task type and layout complexity. In a single instance a small F-like shape appeared, local to the page suggesting that Nielsen’s F-shape rule might hold true with regards to a specific viewing situation, for example reading a paragraph of text inside a defined area of a layout (central column), assuming the paragraph follows a certain structure (e.g. bullet points).

Given the influence of the two factors, layout and task, on users’ viewing behaviour, it is problematic to define common rules on ‘how people read on the web’ and establish general design guidelines on this basis.

Sensemaking

When I started this project, there was little existing groundwork in the area of Sensemaking and viewing behaviour on the web. One of the main contributions of my research is that I have helped identify and define some aspects of sensemaking behaviour: A fundamental clue to user’s sensemaking of a site is the body of text. The importance of this element was confirmed by eye tracking results and supported by user’s own reporting.

When confronted with a basic layout (specifically a blog), users also heavily rely on the comments, and (to a slightly lesser degree) on the navigation menu in order to confirm their assumptions on the site. If comments are well organised understanding is facilitated. If the layout is relatively complex, the logo and the page title become additional important clues for sensemaking.

The complexity of a layout can affect the viewing order, however in both layouts, certain elements will always attract user’s attention early, irrespective of the layout’s complexity – the menu, the description and the page title – furthermore indicating how important these elements are in sensemaking.

The relevance of individual elements such as description, page title and logo was confirmed by people’s own reporting. People also claimed they had drawn meaning from the pictures and (in the complex layout) from the visitor reviews. The fact that eye tracking data failed to support these findings makes the use of this technology as a primary evaluation tool questionable.

Despite these common clues, sensemaking is to a degree a relatively individual activity, possibly depending on factors such as personality, experience and habits. Sensemaking is also a relatively exploratory in nature and easily affected by a disorganised layout. Page elements placed above the fold are most effective for sensemaking. However, the page fold is no longer considered an obstacle in viewing a website if users are looking for useful clues.

Sensemaking behaviour does not result in an F-shape viewing pattern, but is influenced by the structure of the visual layout. Heatmap patterns tend to be more fragmented and dispersed for busy layouts, and relatively focussed for basic layouts indicating that users attention can be distracted if the layout is complex, and perhaps not organized optimally to facilitate understanding.