Breadcrumb Navigation: Further Investigation of Usage

By Bonnie Lida Rogers and Barbara Chaparro

In our last issue of Usability News, we reported on the general usage of breadcrumb trails as a method of navigation on web sites (Lida, Hull & Pilcher, 2003). The term “breadcrumb” derives its name from the Grimm’s fairy tale, Hansel and Gretel. Hansel left a trail of breadcrumbs through the woods as a strategy to find his way back home. Since today’s internet user often has a need to navigate back through a website path, the cyber-version “breadcrumb trail” was named1.

There are three different types of breadcrumbs represented in websites – path, attribute, and location (Instone, 2003). Path breadcrumb trails are dynamic in that any given page will show a different breadcrumb trail based on how the user reached the page. Attribute breadcrumb trails display meta information showing many different trails representing several possible paths to reach the page. The location breadcrumb trail is a textual representation of a site’s structure, e.g. Home > Furniture > Chairs > Leather Chairs. This representation of information allows users to link to major categories of information along a continuum of sequential order. Regardless of how users arrive at Leather Chairs, the breadcrumb trail displayed is the same. This study investigated the use of “location” breadcrumbs.

In general, the breadcrumb trail serves two purposes: 1) it provides information to users as to where they are located within the site, and 2) it offers shortcut links for users to “jump” to previously viewed pages without using the Back button, other navigation bars, or typing in a keyword search. Breadcrumb trails give location information and links in a backward linear manner; whereas, navigation methods, such as search fields or horizontal/vertical navigation bars, serve to retrieve information for the user in a forward-seeking approach. As suggested by Marchionini (1995), systems that support navigation by both browsing and analytical strategies are most beneficial to users since tactics associated with both types of strategies are normally used. According to Steven Krug (2000), breadcrumb trails are most valuable as an accessory to a site’s navigational scheme and are optimally located at the top of a web page in a smaller font.

There has been speculation that a breadcrumb trail also aids the user’s “mental model” of the site’s layout to reduce disorientation within the site (Bernard, 2003); however, we have not found research to validate this assumption. It would seem logical, however, that a constant visualization of the path to the user’s current location would increase their awareness and knowledge of the site structure. Toms (2000) suggests that users need both a stable orienting device, such as a menu, to facilitate pathways through the site, as well as a system that supports scanning to smooth the progress of the search. Research has reported that breadcrumb navigation improves measures of site efficiency (Maldonado & Resnick, 2002; Bowler, Ng & Schwartz, 2001). Our earlier study, however, found limited use of breadcrumb trails as a navigational tool and no differences in site efficiency for two online sites, OfficeMax and Google Directory (Lida, et al. 2003).

The purpose of this study is to further investigate breadcrumb usage by evaluating the following research questions:

1. Do users choose to use breadcrumbs as a navigational tool?
2. Does breadcrumb usage improve navigational efficiency?
3. Does the location of the breadcrumb trail on a page effect usage?
4. Does a breadcrumb trail aid the user’s mental model of the site structure?


METHOD

Participants

Forty-five participants (20 male, 25 female) with an average age of 27 (range of 18 to 64) volunteered for the usability study. The sample consisted of 60% Caucasian, 11% African American, 7% Hispanic, 20% Asian/Pacific Islander, and 2% Native American. All participants were familiar with the web – 98% reported accessing the Internet at least once a week.

Materials/Procedure

In order to evaluate these differences, we constructed a site for gardening tools and products, The Garden Company, by adding content to a sample site in the Microsoft Frontpage tutorial. The site structure is shown in Figure 1.

Figure 1.  The Garden Company site structure

 

Figure 1. The Garden Company site structure

Participants were asked to complete 21 search tasks (e.g., What is a flowering tree that tolerates wet soil?) on The Garden Company site and record their answers. The tasks were developed to traverse each of the four levels of the site and structured so that efficiency was optimized through the use of the breadcrumb trail (see Figure 2).

Figure 2. Optimal navigation paths with and without breadcrumbs.

Figure 2. Optimal navigation paths with and without breadcrumbs.

Three variations of the site were created, each with identical content and structure, but different in terms of the presence and position of a breadcrumb trail. The first variation displayed a breadcrumb trail at the top of the page (Figure 3); the second variation displayed a breadcrumb path under the page title, approximately 30% from the top of the page (Figure 4); and the third variation had no breadcrumb path. Other options for site navigation included a left side navigation bar (Home, Products, Class Offerings, FAQs, Specials, and Contact Us), Back button, and a breadcrumb trail for the first and second variation. Participants were randomly assigned to one of the three sites and were given approximately 30 minutes to search for the information. Time, mouse clicks, user satisfaction, and user “mental model” of the site was collected.

Figure 3. Breadcrumb trail positioned at the top of the page.

Figure 3. Breadcrumb trail positioned at the top of the page.

Figure 4. Breadcrumb trail positioned under the title of the page.

Figure 4. Breadcrumb trail positioned under the title of the page.

Navigational efficiency was measured by the total number of pages. Methods of page navigation such as Back clicks, Forward clicks, breadcrumb clicks, navigation bar clicks, embedded link clicks were also collected. This data was gathered by the tracking program ErgobrowserTM. Pentium 4-based personal computers, with a 60 Hz, 96dpi 17“ monitor with a resolution setting of 1024 x 768 pixels on a campus network were used to access the sites.

After completing the tasks on each site, satisfaction with the site was measured by the Satisfaction User Survey (SUS) instrument, which was adapted for web usage and consisted of 10 satisfaction questions using a 1-5 Likert scale (with anchors of “Strongly disagree” and “Strongly agree”). (Brooke, 1986).

To assess the mental model of the site, participants were asked to choose a model (Figure 5) from a selection of four graphical representations or to draw their own representation. Demographic and usage information was also collected from participants via a background questionnaire.

1. Top-down site model.

2. Spider-web site model. 3. Left-right site model.

4. Hub-spoke site model.


Figure 5. Site models (1-4). Users were also given the option to draw their own model.

RESULTS

1. Do users choose to use breadcrumbs as a navigational tool?

Of the participants that were exposed to a site with a breadcrumb trail (n=30), 40% used the breadcrumb five or more times to navigate on the site (Range = 5 - 31, n=14). However, this accounted for only 6% of the navigation overall (see Figure 6). The Back button, the main Navigation bar, and embedded links were used the majority of the time. Figure 7 shows the navigation used by the participants using the no-breadcrumb site. Without the presence of the breadcrumb, it appears as though the use of the Navigation bar, embedded links, and the Back button are relatively equal.

Figure 6.  Navigation methods used by participants using the breadcrumb sites.

Figure 6. Navigation methods used by participants using the breadcrumb sites.

Figure 7. Navigation methods used by participants using the no-breadcrumb site.

Figure 7. Navigation methods used by participants using the no-breadcrumb site.

2. Does breadcrumb use increase the user’s navigational efficiency?

To see if there were efficiency differences among those who used the breadcrumb to navigate, we categorized participants into breadcrumb users (≥5 clicks) and non-breadcrumb users (<5 clicks). A significant difference was found between user groups for the number of Back clicks, in that the breadcrumb users used the Back button less (M= 20.00, SD = 18.86) than the non-breadcrumb users (M = 45.00, SD = 15.83), t(28) = 3.95, p = <.01. Although the breadcrumb users relied on the Back button less, there were no significant differences between the groups for total pages visited, embedded link clicks, navigation bar clicks, or time to complete the tasks.

3. Does the location of the breadcrumb within the site effect usage?

As shown in Table 1, breadcrumb usage did vary based on the location on the page. There were 199 total breadcrumb clicks by the 30 participants using one of the two breadcrumb sites; of those, 82% (163) were in the site with the breadcrumb positioned under the page title (See Figure 8), and more participants clicked on this breadcrumb (under title n=10, top of page n=4 ), χ2(1, N = 30) = 4.82, p = .03.

Table 1. Comparison of navigation data across conditions (n=15 per group)

  Top of page breadcrumb Under the title breadcrumb No breadcrumb
Breadcrumb clicks
2.33(4.59)
10.93(10.12)
N/A
Back clicks
38.93(15.33)
27.73(25.10)
36.60(13.65)
Navigation bar clicks
22.60(9.07)
24.67 (18.15)
30.60(14.38)
Embedded clicks
43.40(8.94)
43.60(8.60)
37.60(13.19)
Total pages
108.33(25.38)
107.93(35.98)
105.40(20.75)
Time (in sec.)
1159.4(370.1)
1383.2(644.8)
1250.3(624.0)


Figure 8. Number of breadcrumb clicks by location of the breadcrumb trail on the page.
Figure 8. Number of breadcrumb clicks by location of the breadcrumb trail on the page.

4. Does a breadcrumb path aid the user’s mental model of the site structure?

After completing the search tasks on the site, we asked participants to choose one of four models that best represented the site they just used (or to draw their own model). Two of the models were hierarchical, i.e., 1. Top-down, 3. Left-right; two of the models were non-hierarchical, i.e. 2. Spider-web, 4. Hub-spoke. None of the participants chose to draw their own model of the site. Results indicate that the participants that used a site with a breadcrumb trail (regardless of its location) were more likely to choose a hierarchical model than those that used the non-breadcrumb site, χ2(2, N = 45) = 8.08, p = .02 (See Figure 9).

Figure 9.  Type of model chosen by site

Figure 9. Type of model chosen by site

DISCUSSION

In this study, we designed the tasks such that navigational efficiency would be optimized through the use of a breadcrumb trail. Despite this, only 6% of the page clicks were accounted for by the breadcrumb. While 40% of the participants used the breadcrumb trail, usage was lower than that of other navigational means, such as the main navigation bar, the Back button, and embedded links.

Breadcrumb users were found to use the Back button less often than users who did not use the breadcrumb; however, no differences were found in the efficiency measures of total pages visited, navigation bar clicks, embedded link clicks, or time to complete the search tasks. It is not known if all participants understood the function of the breadcrumb as a navigational tool. Future studies should investigate whether a simple understanding of the purpose of the breadcrumb trail or minimal training impacts usage and/or efficiency.

Location of the breadcrumb trail did have an effect on usage. Breadcrumb trails positioned under the page title (at eye level and closer to other links on the page) were used more than breadcrumb trails positioned at the top of the page. It is recommended, therefore, that breadcrumb trails be positioned in this location rather than at the top of the page. The results also suggest that exposure to a breadcrumb trail in a site may contribute to the type of site model formed by the user. Participants that used a site with a breadcrumb trail were more likely to choose a hierarchical model than those that used the non-breadcrumb site. This assessment of the user’s mental model requires further study.

1 One could argue that the cyber-version “breadcrumb” name is a bit misleading in that the trail shown is not necessarily the exact path taken by the user.

REFERENCES

Bernard, M. (2003). What is the best way to arrange menus? Criteria for optimal web design (Designing for usability). http://www.optimalweb.org

Bowler, D., Ng, W., and Schwartz, P. (2001). Navigation bars for hierarchical websites. Retrieved 01/20/03 from University of Maryland, Student HCI Online Research http://www.otal.umd.edu/SHORE2001/navBar/index.html

Brooke, J. SUS: A Quick and Dirty Usability Scale. Retrieved 07/26/03 from http://www.usability.serco.com/trump/methods/satisfaction.htm

ErgobrowserTM, Ergosoft Laboratories 2001.

Instone, K. E. (2003). Three breadcrumbs overview. Retrieved 07/26/03 from http://user-experience.org/uefiles/breadcrumbs/KEI-3Breadcrumbs.pdf

Krug, S. (2000). Don’t make me think! Indianapolis: New Riders Publishing.

Lida, B., Hull, S. & Pilcher, K. (2003). Breadcrumb navigation: An exploratory study of usage. ../usabilitynews/51/breadcrumb.htm

Maldonado, C. A. & Resnick, M.L. (2002). Do common user interface design patterns improve navigation? Proceedings of the Human Factors and Ergonomics Society 46th Annual Meeting, 1315-1319.

Marchionini, G. (1995). Information seeking in electronic environments. Cambridge: Cambridge University Press.

Toms, E. G. (2000). Understanding and facilitating the browser of electronic text. International Journal of Human-Computer Studies, 52, 423-452.