Web Page Layout: A Comparison Between Left- and Right-justified Site Navigation Menus

1 Introduction

Within the course of a decade, Web use has moved from an activity reserved for a small group of computer specialists to that of a widespread mass medium. Though millions of Web sites have already been created, we still know surprisingly little about users' online behavior and their interaction with Web sites. Studies are few and far between, though claims of Web design "standards" by self-proclaimed experts abound. As we move into what some refer to as the second-generation Web, however, more carefully determined and research-supported design practices need to be established.

An important aspect regarding the layout of a Web page is the location of the main navigation menu, which can be defined as the set of internal links of a site usually appearing consistently and persistently on every page. It is an index of options that serves as the central steering mechanism for the information space defined by a given Web site. The position of the main navigation on the page can greatly affect the user's interaction with the site's services and offerings. Indeed, the location of the site navigation menu is often one of the first issues a Web designer may face.

It is safe to say that popular current practice strongly recommends placing the main navigation menu on the left-hand side of the page. Cnet.com has been credited as the first site to make consequential use of this arrangement with the 1996 version of its Web site (Nielsen 2000). Since then, left-justified navigation has spread quickly across the Web. A recent usability analysis of 50 high-traffic Web sites shows that at least a third have a left-justified navigation menu (Nielsen and Tahir 2001). Frequently coupled with a left-justified navigation is an area at the top of the page that often includes site identity or additional navigation menus. Together these areas make up what is commonly referred to as an "inverted-L navigation" or "L-shaped navigation." The inverted-L navigation forms a kind of standard template used as a default layout for many Web designers.

There is a simple, practical aspect to the inverted-L navigation that has contributed to its popularity. Web pages can be, and often are, larger than the visible display area of a browser. If a Web page is longer than the user's viewable browsing area, a vertical scrollbar appears; if a page is wider, a horizontal scrollbar appears. The far upper-left corner of any Web page, however, is always visible. That is, a Web page unfolds starting in the upper left moving to the lower right. As the visible area of a Web page varies in size from user to user due to different browser sizes, variable amounts of the page layout are displayed. Thus, placing key page elements, such as the site logo and main navigation menu, in the upper and left portion of the page, as the inverted-L layout does, ensures that all users will be exposed to them without having to scroll. Users who do not know or wish to scroll will not miss any critical information about the site.

In redesigning the Audi Web sites (www.audi.comand www.audi.de), Razorfish Germany, which specializes in Web design, challenged the dominance of the inverted-L navigation. The main navigational elements were instead located on the far right of the page. A page construction technique was employed to keep the navigation visible at all times, thus avoiding the scrolling issue mentioned above.

A key motivation for this design decision was that a right-hand navigation better reflects core values of the Audi brand: innovation, progressiveness, and individuality. The design goals (creating a usable but unconventional layout) were therefore tied closely with the business goals (reinforcing brand values and distinguishing the site from competitors' sites).

The proposed page layout was tested extensively before relaunch of the Audi Web sites. This paper presents the results of an human performance test conducted by SirValUse, an independent user experience consulting firm specializing in usability testing, in collaboration with Razorfish Germany and Audi. This test directly compared a left-hand navigation to a right-hand navigation. Related literature is reviewed below, followed by the results of the tests. A conclusion discusses the implications and raises questions for future research.

2 Review of Related Literature

2.1 Conventional Layout: Left-Hand Navigation

A multitude of Web design guides and books have appeared in the last decade. Many either directly specify the use of a left-hand navigation layout or strongly suggest its use. There is an overwhelming agreement from the Web design community on this layout principle. Nielsen, perhaps the most popular and influential Web usability expert today, explicitly states that the main site navigation "has to be on the left side of the page" (Nielsen 1999). Not using a left-hand navigation constitutes bad design, in his opinion, and compliance with common practice is the most important design factor regarding Web usability. IBM's Web design guidelines: Visual layout and elements
(http://www-3.ibm.com/ibm/easy/eou_ext.nsf/Publish/602) also explicitly recommend displaying navigation and site identity in an inverted-L arrangement. Researchers at IBM speculate that users are comfortable and familiar with this arrangement and, according to their own studies, a left navigation performs well. Schaffer (2002) also claims not justifying navigation menus to the left "violates too many principles". Other popular Web design guides (e.g. Veen 2000) do not directly prescribe a left-hand navigation or inverted-L arrangement, but strongly imply their use.

Hofer and Zimmermann (2000) report results of a study conducted on four different navigation positions on a page: top, right, bottom, and left. Forty subjects were divided equally into four groups and assigned one of the four navigation arrangements. Task completion time was recorded with a stopwatch. Their results show that a left-hand navigation performed much better than any other position on the page by a factor of two. The right-hand test condition yielded the longest times for task completion. They speculate that the right brain hemisphere, which controls spatial interpretation, the processing of images, and the left field of vision, is better suited for handling the task of navigation through a Web site. The left hemisphere, the rational side controlling text, speech, and the decoding of information, corresponds to the right field of vision and is better for processing text and information. According to the authors, placing the navigation on the left and content on the right facilitates information processing in the human brain. No sources are cited to support this contention.

Recently, Bernard (2001) sought to uncover users' mental models, or "schema", of the location of common Web page elements, which he refers to as Web objects. A total of 346 participants were examined. Using an 8x7 square grid laid over the depiction of a browser, participants were asked to place cards representing various Web objects, such as a link back to the home page or external links, where they expected them to be located. The results showed remarkably similar expectations, and therefore similar schemas, for both novices and experts. The object "internal site links" (or site navigation for our purposes) is clearly expected on the left side of the page for both groups. Bernard (2001, p. 1163) concludes: "users quickly develop common schemas for these Web objects, which underscores the need to place them in their expected location".

2.2 Alternative Views

There are relatively few alternative views on the best location for the main navigation menu. Spool (1997) has found that navigation menus at the top and bottom of the page are more successful than sites with navigation down the side of the page. Recent surveys confirm that a top navigation is popular and commonly seen in about 30% of top Web sites (Nielsen and Tahir 2001). This type of navigation often consists of "tabs", or a row buttons, seen on many electronic commerce sites. This does not necessarily contradict Bernard (2001) or Nielsen (1999), but reinforces the dominance of the inverted-L arrangement for site navigation favored by most Web design specialists. Together the left and top navigation arrangements clearly dominate the current common practice of Web page layout.

Usability researchers for the National Cancer Institute (NCI), on the other hand, offer evidence for a right-hand navigation (Research-Based Web Design & Usability Guidelines: Navigation http://usability.gov/guidelines/navigation.html#four). Their research shows that users click on menu items in the right margin with much more efficiency than menu items placed on the left because they are located much closer to the scrollbar. This allows users to move the pointer quickly between the scrollbar and the navigation menus. The researchers also point out that these benefits are particularly strong for laptops. It is assumed they are referring to the use of a laptop with a mouse pad instead of a regular computer mouse.

Interestingly, Nielsen (1999) also theorizes that right-justified navigation areas should result in better user tasking and usability. He believes that placing the navigation menu next to the scrollbar will save users time. Additionally, he claims that a right-hand navigation and the main content area on the left should increase the priority of content. Nielsen abandons this logic, however, and goes on to dictate the use of a left-hand navigation: "If we were starting from scratch, we might improve the usability of a site by 1% or so by having a navigation rail on the right rather than on the left. But deviating from the standard would almost certainly impose a much bigger cost in terms of confusion and reduced ability to navigate smoothly" (Nielsen 1999). In other words, the vestigial behavior outweighs the actual efficiency of a right-hand navigation. Nielsen offers no proof of reduced usability with a right-hand navigation, however.

2.3 Item Justification in Dialogue Boxes

A recent investigation of scrollbar placement and item justification in dialogue boxes supports locating frequently used page elements and functions near each other. Kellener et al. (2001) show that the selection of items from a menu is faster when the scrollbar orientation is consistent with the justification of items in a list: left-oriented scrollbars perform best with left-justified content; right-oriented scrollbars perform best with right-justified content. This study concludes that in terms of scrollbar placement on the screen, users are ambidextrous.

2.4 Efficiency and Fitts' Law

The efficiency of locating and operating screen objects near each other - in this case the navigation menu and scrollbar - as observed by researchers at the NCI and theorized by Nielsen (1999), can be explained by Fitts' Law, a robust model of human psychomotor behavior developed by psychologist Paul M. Fitts. Essentially, movement time is affected by the distance moved and the precision demanded by the size of the target to which one is moving. Fitts' Law enables the prediction of human movement and human motion based on rapid, aimed movement, such as found in the use of a computer mouse. Fitts (1954) discovered that movement time is a logarithmic function of distance when target size was held constant, and that movement time is also a logarithmic function of target size when distance was held constant. The time to acquire a target is therefore a function of the distance to and size of the target.

Fitts' law has been frequently applied to computer interface design (Mackenzie 1992). For all intents and purposes, it simply means that the bigger and closer an item is, the easier it is to click. Position on the screen, then, is a key factor in "ease of click". In general, shorter mouse movements are better according to Fitts' law. Therefore, locating the main navigation menu next to the scrollbar on the right side of a Web page should indeed reduce the time required to alternate between the two.

3 Methods

Human performance tests were conducted to measure the effectiveness of a right-hand navigation menu for the relaunch of the Audi Web sites (www.audi.com and www.audi.de). The tests were conducted at the SirValUse testing facilities in Hamburg, Germany.

3.1 Participants

The recruiting of 64 participants (44 males, 20 female) was matched Audi's key target groups. Age distribution is shown in Table 1.

Table 1. Participant age distribution

All had experience using the Internet, but to varying degrees: 18 participants had been using the Internet less than one year, 36 for between one and three years, and 10 more than three years. Only three were left-handed, which had no significant effect on the test results.

None of the participants worked in the automotive, press and media, or Internet industries. Students and unemployed were also excluded. All owned a car.

3.2 Hypothesis

An experiment was designed to test the following hypothesis: based on literature and claims to date, the left-hand navigation should perform significantly faster than the right-hand navigation for routine Web use.

It was also believed that while the right-hand navigation would initially perform significantly slower, users would be able to operate it as well as the left-hand test condition after a few simple tasks. That is, in looking at the individual task completion times sequentially, there would be a tendency toward no significant difference between the two test conditions by the fifth task. Overall, the left-hand navigation should still prove faster for all tasks.

3.3 Experimental Design

Two clickable prototypes were constructed reflecting different page arrangements: one with the navigation on the left, one on the right. All other design elements, including labels, text, and images, were held constant. Each prototype had ten content pages plus one "under construction" page, which indicated a "dead end" should a participant go down a path that was not built out. Pages were constructed of screenshots (large images) with active navigation links.

a

b

Figure 1. Test prototypes: a, for the left-hand test condition; b, for the right-hand test condition

Two usability specialists from SirValUse were present at each test session. One led the session and guided the participants through the test protocol. The other took notes and acted as an observer from a separate room. The sessions were documented on video and all mouse movements were recorded using screen-capturing software for later analysis.

The participants were equally divided into two panels along same demographics noted above. Group 1 (N=32) was assigned to the prototype with the right navigation; Group 2 (N=32) was assigned to the prototype with the left navigation. Each was given the same tasks to complete:

1. Send an email to the company to complain about the service
2. Find the address of an Audi car dealer in Hamburg
3. Look for concrete information about the Audi A4 Avant
4. Find some information on how to finance your car
5. Find information about buying an onboard navigation device for your car
6. Configure a car online (build your own Audi)

Time to complete the tasks was recorded using a stopwatch. Any task not completed within 180 seconds was stopped and recorded as a "break-off".

Note that the prototypes had no working functionality. Therefore, the first task was stopped as soon as users arrived on the page where sending an email would be possible. Typing an email was not part of the recorded task.

Additionally, the last task was added at the request of the client. The solution to this task, however, was not located in the main navigation menu for either test condition, but directly in the middle of the page. Completion of this task therefore did not reflect user interaction with either the right- or left-hand navigation. For this reason it is not included in the analysis below.

A short debriefing took place at the end of the test to help gauge subjective response to the position of the navigation menu on the page. Participants were asked how they liked the arrangement of links on the page, if anything in particular bothered them, and if they had any suggestions for improvements.

4 Results

The hypothesis was not supported. Rather, there was no significant difference in completion times between the two test conditions for all tasks. Additionally, there was no significance for any individual task regardless of test condition. Below are the results of the study, excluding the sixth task.

4.1 Total Completion Times

An ANOVA for all tasks shows no significance between the two test conditions [F(1,274) = 0.783, p > 0.05; p (empirical) = 0.377].

By examining the time data in full (Table 2), it can be seen that the overall time for the left-navigation was on average 3.7 seconds shorter than the right-hand test condition.

Table 2. Mean times and standard deviations per task (in seconds) for each user group

4.2 Individual Task Completion Times

In the interest of comparing the individual task performance within the sequence of tasks, multiple t-tests for equality of means were conducted. This gives possible insight into how quickly or slowly users were able to learn one navigation scheme compared to the other navigation scheme. The results were calculated with a Bonferroni adjustment (1-alpha^(number of tests)) to correct the Alpha level downward to compensate for the increased probability of error with multiple tests on the same data. The results show that navigation type had no significant difference for any individual task.

Note that Figure 2 only includes times for completed tasks. Break-offs (shown in the following section) are not included for each task, thus explaining the varying sample sizes (N).

Figure 2. Means: Task completion times (in seconds)

The first two tasks reflect the expected orientation period with the right-hand navigation. Observations made during the tests and from the test protocols (text users verbalized, pointing with the mouse, leaning into the screen, head movements), however, suggest that Group 1 (right navigation) initially spent more time reading and scanning the main content on the page than Group 2, accounting for the longer completion times. This is logical assuming a typical left-to-right or even a center-left-right eye tracking pattern across the page (Schroeder 1998). The order of initial attention was apparently reversed: a looking pattern of "navigation first, content second" with a left-hand navigation becomes "content first, navigation second" with a right-hand navigation. Overall, Group 1 did not appear to be lost or confused; rather, they were busy scanning the main content area of the page first.

Each task started from the home page. After the first two tasks, participants in Group 1 already seemed to have  scanned most of the content on the page and apparently did not repeat this behavior. Isolating tasks one and two (Table 3), then, clearly accounts for the differences in the total average times shown in Table 2.

Table 3. Mean times, grouped by tasks 1-2 and tasks 3-5

Tasks one and two together were completed on average 16.8 seconds quicker with the left-hand navigation. Tasks three to five as a group, however, were completed on average 2.9 seconds quicker with the right-hand test condition.

4.3 Break-offs

There was no significant difference in break-offs between the two test conditions. The left navigation did result in more break-offs than the right, however. Again, based on our observations and protocols of the tests, Group 1 (right navigation) did not appear to be confused or frustrated any more or less than Group 2. These results support that observation.

Figure 3. Break-offs per task (in percent)

4.4 Debriefing

Debriefing interviews show that participants were not irritated or put off by a right-hand navigation. From the group that was shown the prototype with the right-justified navigation (Group 1), 22% (7 from 32) explicitly expressed their liking of the right-hand navigation when asked, while less than 6% of the participants (2 from 32) expressed a dislike for the right-hand navigation. Of the rest, 23 participants (72%) were indifferent and did not indicate a preference.

5 Discussion

This study compared the performance of right- and left-hand navigation schemes. The results show no significant difference in task completion time regardless of navigation type. There was also no significant difference in performance for any individual task and for task break-offs. When asked, participants did not appear to be disturbed or confused by a right-hand navigation.

It should also be noted that two other usability tests were conducted on this Web site, one prior to this study and one afterwards. Though focused on other aspects of the site, the results of these tests corroborate the findings presented here. Not only did the right-hand navigation objectively perform well in all of our tests, users appeared to be indifferent about the location of the navigation menu subjectively. Additionally, the design of this site is live in many countries where Audi is present (e.g. www.audi.co.uk, www.audi.es, www.audi.fr, www.audiusa.com, etc.). Sources of direct user feedback (questionnaires, log files, etc.) indicate no major problems with the right-hand navigation.

5.1 Effect of Navigation Position on Usability

Like Kellener et al. (2001), this research suggests that users are ambidextrous with regard to the position of the main navigation on the page. Users seemed comfortable using either the right- or the left-hand navigation. This questions the notion that a standard left-justified navigation necessarily increases usability significantly. Bernard (2001, p. 1161) clearly contends: "While style guides and intuition do serve a purpose, what is necessary is to understand where users typically expect Web objects to be located on a Web page. Obviously, constructing a site that places these objects in expected locations should aid in the site's usability". Nielsen (1999) also abandons his own logic that a right-hand navigation would perform better for the argument that following standards increases usability. Both, however, offer no evidence that user expectations correlate to usability regarding the location of the main navigation menu.

In practical terms, Spool (2002) shows that locating Web objects in their so-called "expected locations" had no effect on user success while interacting with e-commerce sites. In his tests, 44 users interacted with 13 sites in more than 1000 shopping expeditions. The researchers gave participants enough money to purchase items they previously indicated they wanted and directed them to online shopping sites where those items were available. Failure to purchase an item was therefore due to problems in the site's design. Using Bernard's schema to categorize the sites, Spool found no connection between those that comply with the schema and increased sales. "The sites that ignored the 'expected placement' of elements sold just as much products as those that matched it precisely".

5.2 Perception and Affordance

The human visual system naturally seeks structure in information, often within fractions of a second (Bruce and Green 1990; Wade and Swanston 1991). Perception research shows that such "pre-attentive" processing occurs in such a way that the interpretation of a display is given by the design itself rather than by the viewer's prior knowledge or expectations (Bruce and Green 1990; Wade and Swanston 1991). The relationships inferred at the pre-attentive level set the stage for subsequent active processing and interaction. The participants in this test seemed to be able to recognize the main navigation as such and generalize its use throughout their interaction with the prototype.

This directly recalls Norman's (1988) notion of "affordance", or the perceived properties of an object that indicate operation of or interaction with that object. "Plates are for pushing. Knobs are for turning. Slots are for inserting things into. Balls are for throwing or bouncing. When affordances are taken advantage of, the user knows what to do just by looking" (Norman 1988, p. 9). On the Audi sites, the "navigation is for clicking". The affordance of the navigation appears to be strong enough to overcome its unconventional placement.

5.3 Learnability

We believe consistency and learnability to be the most important factors affecting the usability of the navigation on the Audi Web sites. Constantine and Lockwood (2002, p. 19) confirm this notion from their research: "You can confidently make novel use of many standard, well-established controls, visual elements and interaction idioms provided that new functions and behaviors are consistent and logical extensions of the old…Significant improvements in the user experience often require creative departures from standards and accepted practice. However, useful innovation in visual and interaction design should not burden the new user with a long and frustrating learning process". On the Audi sites, navigation consistency and a clear visual presentation lead to a quick understanding of the navigation's function, apparently without extra frustration.

5.4 Advantages and Disadvantages

There may be additional advantages to a right-hand navigation menu as well:

• As Nielsen (1999) speculates, a right-hand navigation should direct user attention to the content of the page, which would then be on the left side of the page. This seemed to explain the longer actual completion times of Group 1 for tasks one and two in this study. Moreover, an extra focus on content could increase user interest and understanding of the topic of the page or site.
• Right-hand users, who make up a majority of the general population, may find a right-hand navigation more comfortable. Right-hand users are said to tend to pull the mouse towards the right of the page when not using it, thus coming to rest near the scrollbar and a right-hand navigation.
• Finally, printing from the Web can be facilitated with a right-hand navigation. If a Web page is wider than about 630-650 pixels at its smallest possible width, the printer will cut off the right margin. With a right-hand navigation, the risk of losing part of the text content is significantly diminished: only the navigation will not print.

A drawback to a right-justified navigation menu, however, is the interaction with the browser's back button. The back button is located in the upper left corner of most browsers. Obviously, this function would be closer to a left-justified navigation than to a right-justified navigation. A right-justified navigation, then, increases the distance and subsequently the interaction time between the navigation menu and the back button. Consequently, when implementing a page layout with a right-justified navigation, it is essential to include linking mechanisms that avoid user reliance on the browser's back button. This can include history back links or a clickable path of the user's location within the site's information structure, commonly referred to as a "breadcrumb trail".

Future tests will investigate these issues and other possible advantages and disadvantages of a right-justified navigation menu.

5.5 Limitations

This study has several limitations. First, it was limited to a specific site that had well balanced design elements to facilitate user interaction with a right-hand navigation. Other sites may not benefit from a right-hand navigation depending on the situation. Second, this study was conducted in Germany and the results cannot be generalized globally to all cultures. Finally, use of the mouse scroll wheel was not considered a major factor in the hypothesis or conclusions. Little is known about the general use of the scroll wheel and it has been ignored here. If users prefer a scroll wheel to the browser's scrollbar, for instance, the benefit of locating a right-hand navigation near the scrollbar may not be significant.

6 Conclusion

It is possible to make effective use of a right-justified navigation menu provided the visual layout clearly conveys the intended interaction with the menu. Though the initial interaction time may be greater with a right-hand navigation compared to a left-hand navigation, this should not be significant. Users are not likely to be more confused and break off their use of the site due to a right-hand navigation. They may even prefer a right-hand navigation subjectively.

Future studies will confirm or refute these findings, but clearly more research is needed. A closer examination of the performance of horizontal navigation menus might show that a top-aligned navigation menu performs best. Studies proving additional advantages of a right-justified navigation, such as stronger focus on page content, should be conducted to help Web site designers make informed decisions about the layout of a Web page.