What is the Best Layout for Multiple-Column Web Pages?

Michael Bernard & Laurie Larsen

An important issue regarding the physical layout of a web page is the use of space or in this case, how the contents of a web page should be placed within the confines of a window. Web designers have dealt with this issue by using several different methods. The oldest method is to simply allow the contents of a web page fill the entire window. This method, which is known as a ‘fluid’ layout, has the flexibility to expand and contract along with the size of the window. It also is the simplest design to implement. However when reading its content, a fluid layout may have the drawback of forcing viewers to horizontally scan more than other types of layouts. Moreover, because this type of layout is associated with the first generation of websites, it is sometimes perceived as being a less-than-current design. Examples of this type of layout can be found at amazon.com and ubid.com (see Figure 1).

Another type of method is to position the content such that it is centered within the window at a particular fixed width, such as 640 pixels. This can promote easier scanning/reading of text, since the eyes usually do not have to horizontally travel as great of a distance when compared to fluid layouts. However, the benefit of this type of layout may be reduced if the information is presented within several columns—as seen with many informational sites—because at this narrowed width, the various passages may become very compressed. Also as a result of the narrowed width, this type of layout usually requires a greater amount of vertical scrolling. Examples of centered layouts where information is presented in multiple columns can be seen at newyorkpost.com and miamiherald.com (see Figure 2).

A third type of method is to left-justify the content at a fixed width, which is usually wider than the centered layouts at around 770 pixels. As with the fluid layout, it allows for the left-most navigational elements to be placed according to the average user’s mental model (Bernard, Winter/2001), as well as being less compact than the centered layout. However, at this width some information is not visible at certain window sizes or resolutions unless the user horizontally scrolls. Because of this, the area that is not visible at smaller window sizes or at lower resolutions is usually reserved for less ‘important’ content. Currently, this design seems to be a popular method of text presentation for the common, multi-column layout. Examples of multiple column, left-justified layouts can be seen at cnn.com and newyorktimes.com (see Figure 3).

As discussed above, each design has its strengths and weakness, often depending upon the window size and resolution of the monitor. Obviously, it is important to take into account different window sizes, since it is usually set along with the size of the monitor. The question raised here is which method is best for multi-column (in this case, three) layouts at both small and large window sizes?

This study investigated the three major methods of content presentation by empirically examining users’ objective and subjective performance for a typical multi-column website, newyorktimes.com, in both large and small window sizes.

METHODS

A Pentium II based PC computer, with a 60 Hz, 96dpi 17" monitor at a resolution setting of 1024 x 768 pixels was used. The participants’ performance was tracked by using ErgobrowserTM software with large (1006 pixels or 320 mm) and small (770 pixels or 240 mm) viewable browsing areas. The three layouts at both sizes are shown below.

alarge asmall

Figure 1. Fluid layout at both large and small window sizes

clarge csmall

Figure 2. Centered layout at both large and small window sizes

blargebsmall

Figure 3. Left-justified layout at both large and small window sizes

Participants

Twenty participants (7 males and 13 females) volunteered for this study. They ranged in age from 17 to 47, with a mean age of 26 (S.D. = 7 years). Sixty-five percent of the participants had three or more years of college and 70 percent reported to spend 2 to 6 hours or more on the Web per week.

Procedure

For each of the six layout/size conditions, participants were presented with a different New York Times web page news section. Participants were to search for specific information related to ten questions that pertained to that section (such as, "What did a Japanese researcher report in the New England Journal about the effects of tea?"). Each question had to be properly answered within five minutes to be considered correct. Approximately half of the questions pertained to information located on the initial section page, while the other half was located on a second, news article level with the same layout proportions. Participants could search until they found the correct information by using the Back button, or until the time expired. The layouts, size, web pages, and questions were counterbalanced by means of a Latin square design.

After finishing all the questions for each condition, participants answered a questionnaire. The questionnaire consisted of a 6-point Likert scale, with 1 = "Disagree" and 6 = "Agree" as anchors (the questionnaire items are presented below). After participants answered the respective questionnaires, they ranked the three layout conditions for general preference, considering both the small and large window sizes.

Results and Discussion

A within-subject ANOVA design was used to investigate differences in search accuracy, task completion time, search efficiency, and perceptions of search efficiency. The two screen sizes were examined individually and then together at each condition (most of the discussion will focus on the two sizes examined together, since designers should anticipate the use of both screen sizes in their layout). General preference was measured by means of a Friedman Χ2.

Accuracy

Examining the small and large screen sizes individually, as well as averaging their scores for each layout condition revealed no significant differences in the accuracy in finding information.

Task Completion Time

Examining the individual and averaged screen size scores revealed no significant differences in the time needed to complete the search tasks for the three layout conditions (see Table 1 for means and standard deviations for the scores of the averaged screen sizes).

Search Efficiency

Search efficiency was determined by accessing the number of ‘clicks’ on the scroll bar (both horizontal and vertical), and the use of the Back button in finding the correct task information. It is asserted here that a high number of clicks and use of the Back button should indicate a potentially inefficient layout.

Examining the individual and averaged screen-size scores revealed no differences in the mean number of clicks executed for the three layout conditions. This was also true in the use of the Back button (see Table 1 for means and standard deviations for the scores of the averaged screen sizes).

Table 1. Task Time and Efficiency Means (S.D.)

Averaged Screen Sizes Fluid Layout Left-justified Centered Layout
Task Completion Time (sec.) 278 (51) 270 (44) 270 (43)
Scroll bar ‘Clicks’ 55.8 (43.3) 58.9 (52.9) 60.5 (41.8)
Use of ‘Back’ Button 0.95 (0.52) 0.98 (0.64) 1.13 (0.89)

Layout is Suited for Reading

Examining the perceptions that a particular layout is well suited for reading revealed significance differences [F(2, 38) = 9.88, p <.001]. Further analysis revealed that participants perceived that the Fluid layout was significantly better suited for reading than either the Centered or the Left-justified layouts (see Table 2 below for means and standard deviations).

Layout Makes it Easy to Find Information

Analyzing the perceptions that a specific layout promoted the ability to find key information found a significant effect [F(2, 38) = 4.23, p <.05] in that participants perceived the Fluid layout as allowing them to find key information more than the Left-justified layout (see Table 2 below for means and standard deviations).

Spacing is Appropriate for the Screen Size

Analyzing participants’ perceptions that the spacing of the layout is appropriate for the screen size revealed a significant effect [F(2, 38) = 13.77, p <.001] in that participants significantly perceived the Fluid layout as more appropriate for the particular screen size than both the Left-justified and Centered layouts (see Table 2 below for means and standard deviations).

Layout Arrangement Looks Professional

Analyzing the perceptions that a specific layout looked more ‘professional’ revealed a significant difference [F(2, 38) = 9.08, p <.001] in that the Fluid layout looked significantly more professional than the Left-justified layout (see Table 2 below for means and standard deviations).

Table 2. Impressions of Layout – Means (S.D.)

Averaged Screen Sizes Fluid Layout Left-Justified Centered Layout
Layout suited for reading 4.80 (0.83) 3.70 (0.98) 4.58 (0.57)
Layout makes it easy to
find information
4.45 (0.83) 3.65 (1.04) 4.20 (0.68)
Spacing appropriate for
screen size
4.78 (0.80) 3.40 (1.04) 4.08 (0.80)
Looks professional 4.80 (0.66) 3.85 (1.03) 4.43 (0.80)

Link Arrangement Preference

Analysis of the participants’ mean preference choice for each layout arrangement revealed a significant difference in ranking [Χ2 (2, N = 20) = 11.7, p < .01] in that the Fluid layout was significantly preferred over the Left-justified layout. Overall, 65% of the participants chose the Fluid layout as their first choice (see Figure 1).

layoutpref

Figure 4. Percentage chosen as first preference choice.

CONCLUSIONS

Several observations can be made from this study. First, no significant differences between the layout conditions were detected in terms of search accuracy, time, or efficiency. However, significant subjective differences were found that favored the Fluid layout. Here, participants indicated they perceived this layout as being the best suited for reading and finding information, as well as having a layout that is most appropriate for the screen size (for both small and large screens). They also indicated that the Fluid layout looked the most professional, and consequently preferred it to the other layout conditions. Conversely, the Left-justified layout was consistently the least preferred condition.

The evidence we have so far suggests that Fluid layout is superior to the other multi-column layouts, since this layout is perceived as being more navigable and was preferred to the other layouts. However, future studies are needed in order to appropriately generalize these results to most layout conditions. For example, layouts should be examined in other sizes and resolutions (however for most screens, a lower resolution setting will typically have roughly the same amount of visible space as with the small screen size condition). For smaller screens at low resolutions it is suspected the Fluid layout would be even more favored to the fixed layouts, since they would require extensive horizontal scrolling). Future research should investigate the use of these layouts under other page designs (i.e., other than three-column formats).

References

Ergobrowser®, Ergosoft Laboratories © 2001

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: