Does Color Impact How Users View a Portal Web Page?

Justin W. Owens & Sav Shrestha

Summary. This study investigated the eye movement patterns of users viewing a portal web page. Previous research has shown that web portal pages are scanned by row from top to bottom. In the current study, the color of one channel title was manipulated in two different page locations to see what impact it would have on scan patterns. Results indicate that users fixated on the top-center channel first, irrespective of study condition. Eye movements after the first few fixations appear to be impacted by the color of the channel title, but only when it was located on the left side of the page. Also, increased fixation counts on the channel title did not result in an increased number of fixations on the content of the respective channel. Implications of these results to portal web page design are discussed.

INTRODUCTION

Portals are becoming a very prevalent and efficient method of communicating information to individuals. There are primarily two types of portals: public and private. Public portals, such as iGoogle provide users with e-mail, weather, news, games, etc. In contrast, private portals serve the needs of an organization and act as the primary source of information and services that are used in operations. Portals are commonly divided into several distinct regions called channels, which, in turn provide information or a service. A channel in a public portal such as iGoogle would provide weather or stock prices, while a channel in a private portal may provide information such as health benefits, weekly sales goals, or budget information. Figure 1 provides an example of the iGoogle web portal.

Figure 1. An example of the iGoogle web portal.

Figure 1. An example of the iGoogle web portal.

Often, portal content managers struggle with how to position important information within a web portal. A handful of researchers have explored how web portal pages are viewed with eye-tracking. Goldberg and associates (2002) explored user preferences, inter-page navigation, and user patterns across Oracle portal pages with two columns of channels. They found that users typically fixated on the top-left channel, then the top-right channel. Overall, users scanned by row instead of by column. From these findings, the researchers recommended that important information be placed in the top-left channel.

A number of studies have posited a variety of element features that contribute to the saliency of an element and help guide attention. Wolfe and Horowitz (2004) found several attributes that help guide visual attention. These include elements such as size, motion, and color. Faraday (2000) proposed a hierarchy of element attributes which affect how web pages are viewed. In order from most to least efficacy, these include dynamic media (motion), element size, images, element color, text style, and position. Granka, Hembrooke, and Gay (2006) have also explored a few of these attributes. They found that as element size increased, the number of times and duration an element is viewed increases. Element size did not affect the order the elements were viewed, however, position did affect fixation order. Elements positioned in the center, top-left, and middle-left were fixated first.

In 2008, we studied scan patterns on 2 and 3-column portals. The findings in 2-column portals were similar to those of Goldberg et al. (2002). In 3-column portals, they found the top-center channel was fixated first, followed by top-left channel. For 2-column portals, the top-left channel was fixated first, followed by the top-right channel.

Purpose

This study is a continuation of the Owens et al. (2008) web portal study. The purpose of the study was to determine the effects that color and element position have on users’ scan patterns while viewing information in a web portal. Participant scan patterns were determined by the order in which channels were viewed. They were analyzed by comparing order and fixation counts across conditions.

METHOD

Participants

Forty-eight undergraduate students with a mean age of 22.3 (SD = 4.79) years were recruited to participate in the study. Approximately 96% of participants reported using their university portal more than once a week, mainly to access Blackboard or e-mail. All participants reported having experience using the internet.

Materials

The stimuli for this study consisted of three versions of a 3-column academic portal page. Nine channels were selected from the university portal. To standardize content style for all nine channels, graphics, bold styles, italics, and large text styles were removed. All content was turned into hyperlinks and placed into an unsorted list for each channel. The three versions of the portal page were identical with the exception of the channel title color. The color manipulation changed the channel title from black (sRGB #000000) to red (sRGB #FF0000). There was no manipulation in the control condition. In the left condition, the channel title of the left channel of the second row was manipulated. In the right condition, the same manipulation was conducted for the right channel of the second row. The row of channels with manipulated titles was located above the page fold. Stimuli for the control, left, and right conditions are found in Figures 2, 3, and 4, respectively.

Figure 2. Example of the web portal page (control condition).

Figure 2. Example of the web portal page (control condition).

Figure 3. Example of the web portal page (left condition).

Figure 3. Example of the web portal page (left condition).

Figure 4. Example of the web portal page (right condition).

Figure 4. Example of the web portal page (right condition).

Participants completed a short background questionnaire inquiring about their Internet usage habits. A Pentium Core2 Duo PC with 96 dpi 17" monitor running at a resolution of 1024 x 768 pixels was used. The monitor was integrated with the Tobii 1750 eye-tracking system running at 50Hz and ClearViewTM 2.7.1 software, which was used to detect and collect participant eye-gaze data.

Procedure

Participants were seated approximately 60 cm away from the monitor. They were randomly assigned to view one of the three portal pages. After calibration on the eye-tracker, they were instructed to view the page. To ensure they attended to the page, they were told that they might be asked questions regarding the content of the page. Participants were given 20 seconds to complete the task.

RESULTS

The primary purpose of the study was to determine how a simple manipulation of channel title color affected the scan patterns of participants viewing a web portal page. Scan patterns were examined by assigning rank to the order a participant viewed the channels on the page. Not all participants viewed each channel during their task. This was largely due to the undirected nature of the task. In all, 11 participants in the control condition and 8 in each experimental condition viewed all 6 channels above the page fold.

Differences in fixation of channel order were moderate and dependent upon condition. There was a high level of agreement in fixation order within each condition. Agreement was found to be highest in the control condition when compared to the left and right conditions, Kendall’s W(5) = .641, p < .001, Kendall’s W(5) = .484, p = .002, Kendall’s W(5) = .575, p < .001, respectively. Generally, participants viewed the top-center channel first, followed by the top-left channel, regardless of condition. The only significant difference between conditions was the rank for the channel with the manipulated title of the left condition, H=6.151, df = 2, p = 0.046 (see Figures 2 and 3). Particiants viewed channel 4 in the left manipulated condition earlier than in the control condition. Such differences were not found in the manipulated channel of the right condition. Mean rank order for each channel above the page fold across all three conditions is shown in Table 1. Rank order for the control, left, and right conditions are shown in Figures 5, 6, and 7, respectively.

Table 1. Mean rank order of channels above the page fold based upon first fixation for control, left, and right conditions. Channel 1, 2, and 3 correspond to the top row of channels (left to right) and Channel 4, 5, and 6 correspond to the second row of channels (left to right).

  Control Left Right
Channel 1 2.36 2.25 2.13
Channel 2 1.00 1.75 1.38
Channel 3 3.91 3.75 3.75
Channel 4 4.55 3.50 4.38
Channel 5 4.73 4.88 4.63
Channel 6 4.45 4.88 4.75

Figure 5. Mean rank orders above the page fold based upon fixations for participants that fixated on all six channels for the control condition.

Figure 5. Mean rank order above the page fold based upon fixations for participants that fixated on all six channels for the control condition.

Figure 6. Mean rank orders above the page fold based upon fixations for participants that fixated on all six channels for the left condition.

Figure 6. Mean rank order above the page fold based upon fixations for participants that fixated on all six channels for the left condition.

Figure 7. Mean rank orders above the page fold based upon fixations for participants that fixated on all six channels for the right condition.

Figure 7. Mean rank order above the page fold based upon fixations for participants that fixated on all six channels for the right condition.

To examine the differences in fixations across conditions, heatmaps were generated. Overall, the dispersion of fixations in the left and control conditions were similar with the only distinct difference located in the channel title of the left condition’s manipulated channel. The right condition’s heatmap varied in dispersion when compared to the control and left conditions. Heatmaps for the control, left, and right conditions are found in Figures 8, 9, and 10, respectively.

Figure 8. Heatmap of the channels above the page fold in the control condition of the web portal page. The white line represents the page fold.

Figure 8. Heatmap of the channels above the page fold in the control condition of the web portal page. The white line represents the page fold.

Figure 9. Heatmap of the channels above the page fold in the left condition of the web portal page. The white line represents the page fold.

Figure 9. Heatmap of the channels above the page fold in the left condition of the web portal page. The white line represents the page fold.

Figure 10. Heatmap of the channels above the page fold in the right condition of the web portal page. The white line represents the page fold.

Figure 10. Heatmap of the channels above the page fold in the right condition of the web portal page. The white line represents the page fold.

Comparing the number of fixations of the channel title and channel content between the manipulation and control conditions revealed interesting results. Results showed that the manipulated channel title of the left condition (M = 2.438) received significantly more fixations than the channel title of the control condition (M = .75), t(30) = -2.628, p =.013. See Figures 8 and 9. However, these differences did not transfer to the content. The number of fixations on the content area of the manipulated left channel (M = 4.563) did not differ from the fixations of the control condition channel content (M = 4.875). See Figures 8 and 10.

Similar to the left vs. control comparison, differences were noted between the channel titles, but not the content in the right vs. control comparisons. Participants fixated more on the title of the right condition (M = 2.686) than the control condition (M = .75), t(30) = -3.228, p = .003. There was no difference for fixation count for content between the right condition (M = 2.313) and the control condition (M = 3.25).

DISCUSSION

This study examined the effects of a simple and common manipulation that is used to increase the saliency and bring attention to important content within web portals. The manipulation of the color of the channel title did not affect the initial fixation point of the portal page as hypothesized. Owens et al., 2008 suggested that users enter into a portal page through the top-center channel and then proceed to fixate to the top-left channel of the portal page. The results of this study, regardless of condition, were consistent with this.

While the effects of the manipulated channel title were not noted in the initial fixation order, they did have a secondary impact on the number of fixations and the subsequent fixation order of the channels. This finding was moderated by channel location. In the left condition, the channel with the manipulated title was fixated earlier when compared with the control condition. This finding was not replicated in the right condition. Overall, participants fixated more on the manipulated channel titles, however, this did not result in increased fixations on the content of that channel.

Faraday (2000) previously attempted to model user behavior while viewing web pages. The suggested model concluded that element color should be a more important factor than other elements in determining how web pages are viewed. The results of this study contradict Faraday’s model. Conversely, the results of this study agree with the findings of Granka et al. (2006) where element location is an important factor in determining fixation order. Our findings show that while channel location was most influential, the effects of title color only become pronounced after the first few fixations in the channel region of the stimuli.

It is important for portal content managers to arrange key information in a web portal where users can locate it quickly. This study suggests that the top-center and top-left channels are likely the best locations to place important information. Using channel title color to influence participant behavior may have mixed results as it is appears to be dependent upon the location of the channel title. The color manipulation of the channel title appears to be more effective on the left side than on the right side of the portal page.

Future research in this area needs to be conducted to understand the effects of element size, animation, graphics, and color in portal pages.

Note: A paper based on this work can be found in the Proceedings of the Human Factors and Ergonomics Society’s 53rd (2009) Annual Meeting in San Antonio, TX.

REFERENCES

Faraday, P. (2000, June). Visually critiquing web pages. In Proceedings of the Sixth Conference on Human Factors & the Web, Austin, TX. Retrieved from http://facweb.cs.depaul.edu/cmiller/faraday/Faraday.htm.

Goldberg, J., Stimson, M., Lewenstein, M., Scott, N., & Wichansky, A. (2002). Eye tracking in web searchtasks: Design implications. In Proceedings of the 2002 Symposium of Eye Tracking Research & Applications (pp. 51-58). New Orleans, Louisiana: ACM Press.

Granka, L., Hembrooke, H., & Gay, G. (2006). Location location location:Viewing patterns on WWW pages. In ETRA 2006 (p. 43). San Diego, California: ACM Press.

Owens, J. W., Shrestha, S., & Chaparro, B. (2008). Eye-tracking patterns of multi-column web portals during browse tasks. In Proceedings of the 52nd Annual Human Factors and Ergonomics Society (pp.1594-1598). New York.

Wolfe, J. & Horowitz, T. (2004). What attributes guide the deployment of visual attention and how do they do it. Neuroscience, 5, 1-5.

Tagged with: , , , , , , ,
Posted in Usability News
Subscribe to SURL

Want to receive notifications when SURL has new articles? Please enter your name and email address to subscribe to our website.

Popular Topics in Usability News
Log in/Sign Up
%d bloggers like this: