Keywords

1 Introduction

A great deal of eye tracking studies on the web have investigated a myriad of factors that drive the way web viewers allocate their attention on web pages. These factors include page viewing order, individual differences, type of interaction task [19], task difficulty [16], target position [10], and use of images [3, 5]. Little, however, is known in respect to how layouts influence the distribution of visual attention patterns and search performance on websites. Furthermore, the existing findings about viewing behavior determinants are somewhat inconsistent. For example, Nielsen claims that users scan text websites following the F-shaped pattern [18], whilst Shrestha [26] found that this viewing pattern is less prominent in the grid layout where content is organized within a set of grids.

This paper reports on an eye tracking experiment conducted to compare the influence of two popular website layouts, mainly the three column layout and grid layout, on search behavior, user attention and perceived usability. In the three column layout, the content is organized into three equivalent columns, displayed side by side and running from the top to the bottom of the pages. In the grid layout, the content is organized within a number of blocks, of varying sizes, spanning across the entire web page. These blocks usually have a heading to describe the content. The results of this study are expected to yield a better understanding of users’ oculomotor behavior in informational websites.

The current research study makes the subsequent contributions:

  • Determine how viewers’ visual attention is affected by the organization of content within two common web layouts, i.e. column-based and grid-based layouts, whilst searching for information. In the context of this research, visual attention is measured using heat map densities, fixation count and fixation duration. The focus of this research is viewing patterns within real websites rather than search engine results pages (i.e. SERP).

  • Explore how predominant web layouts, i.e. column-based and grid-based, may influence the perceived usability and perceived aesthetics of websites.

The remainder of this paper is organized as follows. Section 2 reviews the major works of eye tracking in websites. Section 3 describes the experimental design of our study. Section 4 outlines the findings. Section 5 discusses the practical implications of the findings. Section 6 outlines the limitations and future directions of this research.

2 Web Eye Tracking Studies

Eye tracking is a modern technique that enables researchers and practitioners to capture and quantify the visual attention of users within graphical user interfaces [23]. In particular, eye tracking devices empower researchers to examine users’ ocular behavior with respect to the web elements they look at and the paths their eyes follow. This, in turn, helps identify usability issues arising from a particular interaction [6]. Eye tracking measurements enrich our understanding of locations of interest, duration of gaze, and viewing patterns within the visual field. As such visual attention, captured via eye tracking, has been explored in numerous research areas including web design [4], web search [2], search engine results [17], user experience and design guidelines [1].

Visual attention occurs through two general models, a bottom up model and a top down model [11]. The bottom up model argues that attention to various areas of the visual scene, e.g. an image or a web site, is unconscious and mainly driven by saliency. Saliency is calculated through the combination of several features, such as color and intensity. However, the top down model argues that attention is driven mainly by the goals and interests of the viewer and it is mostly evident when searching for targets. Other forms of attention allocation models are discussed in detail in [11].

Visual attention can be captured and quantified via eye tracking metrics ranging from fixation count, fixation duration, saccades, scan paths to heat maps. These metrics are based on one important concept called fixation. The fixation refers to the maintaining of the eyes on a single area of interest for a typical period of 200 to 300 ms [8]. Fixations signify the cognitive processing of a stimulus, particularly information acquisition. Fixation count is defined as the average number of fixations on a specific area within the page. However, fixation average duration is defined as the length of fixations, measured in milliseconds, on a specific area within the page. Saccades, on the other hand, are rapid shifts that occur between fixations from one area to another and typically last between 20 and 200 ms. However, Rayner [24] suggests that cognitive processing is inhibited throughout saccades. Scan paths encompass fixations and saccades to form the path users follow when exploring or searching for information. Heat maps refer to a thermal map of attention distribution and density across the web pages, with the red areas signifying the highest visual attention [1].

Web search is a popular activity on the web and has therefore received considerable research interest. Eye tracking is used to examine how web viewers browse search results and identify the cues that guide the search behavior [9]. Users’ viewing of search engine result pages (i.e. SERPs) follows the golden triangle pattern where reading is more detailed at the top of the triangle and less extensive at the bottom [7]. In search engine result pages, there is strong evidence that users prioritize their attention, and thus their clicking behavior, based on the ordering and relevance presented by the search engine [9].

Related studies assert that users scan text-concentrated websites that implement a list layout, using the F-shaped pattern [18, 27]. In these websites, users pay most of their attention to the top section of the page and read content following the F shape. However, Shrestha [26] and Siu and Chaparro [28] illustrated that the F-shaped reading pattern is less prominent in the SERP grid layout. Hence, the previous results are still inconclusive and more research efforts are required.

Other eye tracking studies investigated several important web aspects. For instance, Resnick and Albert [25] demonstrated that banner blindness is more evident when adverts are placed on the right hand side of e-commerce websites and when users are searching for a target. The use of eye tracking extended to show significant differences in visual attention between males and females when shopping online [12]. Females paid more visual attention to the shopping information parts than males. These aspects, however, are outside the scope of this research.

3 Experimental Design

3.1 Participants

The formal study involved a total of 16 student volunteers (mean age was 24) who had normal vision; 15 participants were male and 1 was female. The participants reported having very good experience searching for information on websites. Participants’ level of knowledge and interest about the content presented (i.e. smoking and cancer) within the two layouts were captured in a pre-test questionnaire. The statistical results showed no significant differences in users’ knowledge and interest between the tested topics. All participants had no prior encounter with eye tracking devices. In compensation for their time, participants were awarded an Amazon voucher.

3.2 Tasks and Procedure

The experiment utilized a 2 (web layouts) * 2 (task difficulty) within subject design. Specifically, the participants carried out two information search tasks of varying complexity (i.e., easy and difficult) on each web design (i.e., three column and grid layout). In both search tasks, participants were required to scan the contents of the sites to find the answers. In the easy task, the search target was placed on the home page and therefore no navigation was required between the pages. In the difficult task, the search target was placed within a secondary page of the site and would require navigation between pages. The position of the information target was systematically manipulated across the pages to eliminate guessing. Overall, each participant carried out 4 information search tasks, 2 on the column-based design and 2 on the grid-based design. The answers to the search tasks were of equal length in each task type (i.e. easy, difficult) across the layouts and were not guessable by the participants. In other words, the answers were not related to people’s general knowledge. The order of web layouts and search tasks were randomly assigned to the participants.

A pilot study including three students was initially performed to verify the experimental setup and search tasks. Minor changes were made to the description of the tasks. The content was reduced to eliminate cluttering from the websites.

During the actual experiment, a repeated measures design was adopted. The participants started by filling out a consent form, as well as an information background questionnaire to collect their knowledge and interest about the topics (i.e. smoking and cancer) being presented within the layouts and information search experience on the web. Next, participants’ eyes were calibrated to ensure accurate eye measurements would be captured by the Tobii eye tracker. After the calibration process, the websites were presented on the display, with the home page as the default page. The participants were then given the list of information search tasks and requested to find the answers to these tasks in the designated website. After viewing each layout, they completed perceived usability and aesthetics questionnaires, and ranked the web layouts in order of preference. The eye tracking experiment took approximately 45 to 60 min to be completed.

3.3 Websites and Apparatus

The website layouts under investigation mimicked real websites and contained a variety of content (e.g., menu, paragraphs, images, banner ads, headings). The two websites were systematically designed and developed to structure content within two differing layouts: a three column layout (Fig. 1) and a grid layout (Fig. 2). The content in the three column layout was organized into three equivalent columns, displayed side by side. In the grid layout, the content was organized within a number of blocks, of varying sizes, spanning across the entire web page. These blocks usually have a heading to describe the content.

Fig. 1.
figure 1

Three column website layout (Color figure online)

Full size image
Fig. 2.
figure 2

Grid website layout (Color figure online)

Full size image

The two websites contained the same level of complexity, with respect to the number of pages (4 pages on each layout), length of the pages, number of words, paragraphs and design elements used (e.g. large and small images, logo, banner ad, menus, headlines). Moreover, the sites used the same logo (Health & Well-Being) and hosted content of a similar nature, focusing on health-related topics (particularly smoking, cancer). Both websites used a similar navigational menu placed at the top of the pages. However, the two layouts used different color schemes. The column layout implemented light olive green, whereas the grid layout implemented lime green as a background color.

In essence, this study used eye tracking as a means to collect objective data about fixation patterns and search behaviors. The Tobii eye tracking device 1750 (50 Hz refresh rate), with a 17 in. mounted monitor set to a 1024 * 768 resolution, was used to present the experimental sites and capture the eye movement data, including the fixation count and duration. The viewing order of the two layouts was counter balanced to eliminate any order effects.

3.4 Measurements

Search Performance Metrics.

Participants were instructed to complete two information search tasks. Task completion time (in seconds) and task completion rate (%) were calculated and used to compare the information search performance of our participants across the two layouts.

Eye Movement Metrics.

The aim of this study is to find out how web users scan the column and grid layouts. To this end, the oculomotor behavior represented by three key eye tracking metrics were collected and analyzed, namely heat maps, average fixation count, and average fixation duration. Heat maps enable to observe the impact of design elements on ocular behavior and compare viewing patterns on different designs [4]. Average fixation count signifies the importance of the areas of interests and design elements being looked at. Average fixation duration signifies the difficulty of task at hand [24]. In this research, we looked for differences in the heat maps between the two layout designs, as well as variations in fixation count and duration.

Post-experiment Questionnaires.

Post experiment questionnaires were administered to measure users’ perceptions about the website layouts. Users were instructed to rate the perceived usability and aesthetics of the two designs following completion of the search tasks. The questionnaires were adopted from Tactinsky and Lavie [13]. The usability questionnaire focused on measuring ease of use, ease of navigation and orientation, whilst the aesthetics questionnaire focused on measuring the classical aesthetics and expressive aesthetics of the layouts. All questionnaire items used a 7-point Likert scale ranging from 1 = Strongly Disagree to 7 = Strongly Agree.

4 Results

The pages of the two experimental websites were divided into logical areas of interest (i.e. AOIS), represented within rectangles in Figs. 3 and 4. Each area of interest corresponded to a main web element comprising of a logo, menu, image, paragraph, header, or banner ad. The generated heat maps provide an overview of the group ocular behavior in respect to overall fixation density on specific design elements within each layout. Generally speaking areas with red color indicate intense fixations and therefore increased levels of interest from the users [3, 19]. Areas with yellow and green colors however, indicate lower levels of user interest.

Fig. 3.
figure 3

Fixation patterns (in the form of heat maps) on the home page (easy task) and secondary page (hard task) of the three column web layout (Color figure online)

Full size image
Fig. 4.
figure 4

Fixation patterns (in the form of heat maps) on the home page (easy task) and secondary page (hard task) of the grid web layout (Color figure online)

Full size image

The heat map analysis (Figs. 3 and 4) illustrated that the viewing patterns on the three column and grid layouts did not necessarily follow the F-shaped scanning pattern in both the easy and difficult task. In the easy task, where the target was placed within the home page, there were smaller fixation densities covering only a small portion of the areas of interest. These small densities were not always situated at the top left corner. The participants seem to also skip attending to large portions of the text within the home page. Fixations concentrated mainly on the top navigational menu, headings of paragraphs and some relevant paragraphs. These observations suggest that primarily a shallow scanning behavior of information across areas of interest is adopted when the search task is easy. We refer to this as the spotted scanning pattern where viewers read a small set of words deemed relevant to the search target and skip many other words.

In the difficult task, where the target was placed within a secondary page, bigger fixation densities were produced covering a large portion of the text-intense areas of interest. These fixation patterns suggest the adoption of an exhaustive reading behavior by the participants to find the target answer. We refer to this as the deep scanning pattern where viewers are highly motivated to read most of the text in the areas of interest. It is also apparent that the participants allocated less visual attention, in both tasks, to the figures including the logo, pictures and banner ads irrespective of their locations within the website. Therefore, users seem to deliberately ignore looking at pictorial information which created attention gaps within the web layouts. In general, the fixation patterns seem to be driven by the position of the text within the layouts, whilst the search behavior seems to be guided by the text cues.

Comparing visual attention between the two layouts shows that intense reading is more prominent in the three column layout covering most of the text areas of interest. Attention patterns are connected together forming larger blocks of fixations in the column layout such as the rightmost column (Fig. 3). In contrast, the grid layout generated more sparse attention densities across the pages than the column layout, especially as task complexity increased (Fig. 4).

In respect to information search performance, the results were inconclusive (as summarized in Tables 1 and 2). Participants took more time to locate the search target in the grid layout than the column layout when the task was easy (approx. 141 s and 104 s respectively). However, when the search task increased in difficulty no differences were detected in respect to task completion time between the two layouts (186 vs 216 s respectively). Overall, the participants spent more time looking for the search target in the difficult tasks than in the easy tasks (p < .05). However, task completion rate did not differ across the two layouts. Only one participant was unable to complete the difficult task in both layouts.

Table 1. Mean of fixation patterns for layout types during the easy task (*p < .05, **p < .001, repeated measures ANOVA, std = standard deviation)
Full size table
Table 2. Mean of fixation patterns for layout types during the difficult task (*p < .05, **p < .001, repeated measures ANOVA, std = standard deviation)
Full size table

To gain a deeper understanding of the influence of web layouts on fixation patterns, we analyzed the fixation count and fixation duration. The grid layout stimulated longer fixations than the column layout (50.33 vs 30.07 s respectively), during the easy task (p < 0.001, Table 1). On the other hand, the column layout generated a higher number of fixations than the grid layout (456 vs 314 respectively), during the difficult task which indicates that the column layout incites users to read the text (p < 0.001, Table 2). The participants also fixated on the content of the column layout for a longer time (average of 104 s per page), which may be an indication of complexity.

Overall, the fixation count, fixation duration and task completion time increased in both layouts, as the complexity of the search tasks increased (p < 0.001). In the easy task, there were fewer fixations and shorter fixation durations. In the difficult task, the number of fixations increased and took longer, indicating an intense reading behavior across the areas of interest within the pages, especially in the column layout. These results concur with the findings of Wang et al. [30] who demonstrated that complex search tasks increase the cognitive load of viewers.

Cronbach alpha showed high reliability of the usability and aesthetics scale items, which were used in our study to capture users’overall judgment about the two layouts. The perceived usability construct encompassed four items including ease to use, easy to navigate, easy orientation, and convenient [13]. The participants’ rating of the perceived usability showed that the three column layout was deemed as easier to use, easier to navigate, and has an easier orientation than the grid layout (p < 0.001, Table 3).

Table 3. Mean rating of perceived usability, perceived aesthetics and general preference (**p < .001, repeated measures ANOVA); All scale items were adopted from [13]; Ratings were given on a 7-point Likert scale.
Full size table

The perceived aesthetics of the two web layouts involved the rating of two dimensions, namely classical aesthetics and expressive aesthetics [13]. Lavie and Tractinsky [13] argue that the classical aesthetics measures the conformance of a website to conventional usability design guidelines, whilst the expressive aesthetics measures the originality and creativity of the web design. The classical aesthetics dimension included five items, namely pleasantness, cleanness, symmetry, clearness and aesthetics. The rating scores of the classical aesthetics showed that the users liked the three column layout over the grid layout despite the longer fixations (Fig. 5).

Fig. 5.
figure 5

Average rating of classical aesthetics dimension of the grid and three column layouts

Full size image

The expressive aesthetics dimension included five items, namely originality, sophistication, creativity, fascination and use of special effects. However, both web layouts were equally favored by the users in respect to the expressive dimensions (Fig. 6). Finally, when asked to rank their preference all participants chose the column layout as their favorite web design.

Fig. 6.
figure 6

Average rating of expressive aesthetics dimension of the grid and three column layouts

Full size image

5 Discussion

This study was conducted to examine the influence of two popular web layouts on users’ attention allocation and information search behavior using empirical websites. Contrary to the widespread assumption that web viewers allocate their attention to websites according to the F-shape [18] or golden triangle pattern [7], our heat maps showed that users’ fixation patterns were allocated in a different way. In the column layout, attention spread across each of the three columns starting at the top and moving towards the bottom areas of the pages. The column layout encourages users to read text in a detailed manner producing exhaustive attention maps. In the grid layout, attention areas were smaller and distributed across the grids that were placed in different areas of the website. The grid layout encourages partial text reading that involves skipping irrelevant words and sentences in the grid. This implies that attention allocation is not an artifact of a general or common shape but rather the product of the way content is organized within the web pages. The organization of web content is framed within a layout, which our study shows to be the main driving force for attention distribution. This finding confirms the attention model proposed by Sutcliffe and Namoun [29] where structure was identified as one of the key determinants of attention allocation.

Indeed, the F-shaped or triangle viewing pattern may be more applicable when users freely read content online with no particular goal in mind [18]. However, when a search task is assumed, viewing patterns do not necessarily produce an F-shaped attention heat map. In fact, the advocates of F-shaped reading pattern [21] revised their claim in a recent eye tracking study and confirmed that other common scanning patterns exist. Our results do not necessarily contradict the finding that information seekers’ scanpaths start at the top left hand corner and move towards the bottom of the page [31]. This study was concerned about the general attention pattern rather than the sequence of attention.

When users were instructed to search for information in the two layouts, they seemed to primarily focus on the top menu items, headings and parts of the paragraphs to find relevant text cues. This approach is well justified in the literature by the information foraging strategy that information seekers adopt to find answers [33]. When the task was varied in complexity users seemed to switch between two reading strategies. In the easy task, they fixated on some areas, which are deemed important and skipped others voluntarily as if they were trying to find some key words related to the designated task. We refer to this as the shallow (non-linear) scanning behavior. In the difficult task, users fixated on most of the text areas of interest exhibiting an extensive reading behavior of almost everything. This resulted in more and longer fixations in both web layouts. We refer to this as the deep (linear) scanning behavior. Moreover, our analysis affirmed that task complexity affects various search determinants such as fixations count, fixation duration, and completion time [16]. In both layouts, task complexity increased the task completion time and resulted in more attention efforts by the users. This indicates that more cognitive load and processing efforts are required by the viewers to find the target when the search task becomes more complex. However, our results are in stark contrast to the findings of Zhou’s [32] who found that task type do not have a significant impact on task completion time.

Users ignored looking extensively at the pictorial information, such as logo, banner ads, and figures, which could possibly be an artifact of the effects of top down factors during information search. Previous findings confirmed that top down factors inhibit the effects of saliency and involuntary capture during search tasks [14]. Our findings are consistent with Pfeiffer’s [22] who showed that goal-oriented search behavior generates a high number of fixation and refixations and users look at more details in this mode. Moreover, our results showed that users avoided looking at the banner adverts, located at the bottom and right hand side of the layouts. This is in line with the findings of Lee and Ahn [15] that users do not attend to banner ads even when they are animated.

The overall results tentatively suggest that whilst users’ goals seem to dominate attention sequence when searching for information, the page layout organizes attention concentration and viewing patterns. However, the organization and position of the content is really what constitutes a layout. The three column layout is found to promote extensive reading behavior and is overall preferred than the grid layout. Users perceived the column layout as more clear and clean than the grid layout.

6 Conclusion and Limitations

In this study, visual attention was measured and compared across column-based and grid-based web designs with the aim of identifying which of the two designs enables more efficient information search performance and attention allocation. Our investigation of eye tracking metrics of 16 participants revealed that information search is faster in the three column layout. This result, however, was significant only when the search task was easy. Users have a stronger preference for the column layout. Remarkably, the F shaped scanning pattern was not apparent across the columns and the grids. Instead, the shape of text areas of interest and position of text within the pages seemed to frame attention fixations. This confirms that the overall web layout has a strong impact on visual attention.

The practical findings of this study imply that designers of information providing websites, such as health and news, may use column based layouts to optimize the distribution of visual attention on their websites and thereby improve the reading performance of users. The three column layout incites readers to scan the web content extensively covering most of the pages. It is also anticipated that organizing content within three columns will create a positive user experience. However, the results show that dividing content into small blocks with headings (i.e. grids) did not improve reading performance. Moreover, when the purpose of the website is to provide information the use of pictures and banner ads may not be beneficial and could in fact be hindering the reading and information search processes.

The herein study recognizes a number of limitations. The two websites used in the experiment employed different color schemes, namely the three column design used light olive green (warm) whilst the grid design used lime green (cool). This color difference might have affected the perceived aesthetics and overall preference towards the two designs. For instance, Pavlas et al. [20] revealed that color tension might impact the perceived aesthetics of websites. Previous studies also showed gender differences in respect to visual attention and attitudes towards e-commerce websites [12]. However, the majority of the participants who were involved in this research were male. Participants’ individual traits such as cognitive style and emotions were not considered in our research. Results should therefore be generalized with caution. In the future, we plan to extend our research to investigate other relevant eye tracking metrics such as fixation percentages, saccades, gaze time and scanpaths and explore other popular web layouts.