ArticlePDF Available

Authors:

## Figures

Content may be subject to copyright.
August 2003, Vol. 5 Issue 2
|
Volume 5 Issue 2 | Past Issues | A-Z List |
Usability News is a free web newsletter that is produced by the Software Usability Research
Laboratory (SURL) at Wichita State University. The SURL team specializes in software/website user
interface design, usability testing, and research in human-computer interaction.
Barbara S. Chaparro, Editor
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 named
1
.
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.
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:
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
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
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
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 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
collected. This data was gathered by the tracking program Ergobrowser
TM
. 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.
Figure 5. Site models (1-4). Users were also given the option to draw their own model.
RESULTS
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.
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
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
Under the title
Back clicks 38.93(15.33) 27.73(25.10) 36.60(13.65)
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.
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
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
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.
Unpublished document.
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
Ergobrowser
TM
, Ergosoft Laboratories
2001.
Instone, K. E. (2003). Three breadcrumbs overview. Retrieved 07/26/03 from
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.
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.
SUBSCRIBE to Usability News!
... Dynamic side-trees might enhance navigation for a number of reasons. They are incorporated into an existing navigation menu, with which users are already familiar and attentive 20 . More structural information is visible to the user and so they can navigate in fewer steps. ...
... More structural information is visible to the user and so they can navigate in fewer steps. Such advanced features can enable web users to accelerate habitual navigation actions like backtracking, a frequent behaviour when searching the WWW 12,20 . ...
... Because breadcrumbs were rarely used, they do not show as great a potential to improve navigation efficiency as dynamic side-trees. Our findings complement other studies that have found low breadcrumb use compared to other navigation tools such as the back button 12,20 . Despite low usage, breadcrumbs still offer a number of benefits and have recently shown some growth in their popularity 19 . ...
Article
Full-text available
... Principle 1: Perceivable Information and user interface components must be presentable to users in ways they can perceive(Table 6).Table 3 (continued)J 10 : Use Brown to signify to imply common sense.J 11 : Use Gray to create expectations. n 6 : Navigation J 0 : Use Visual Cluster to motivate learners.J 1 : Use concept-maps to provide accurate feedback(Lachner et al. 2018).J 2 : Use Breadcrumb Trail(Rogers and Chaparro 2003).J 3 : Use A-Z Indexes.J 4 : Use dimming fragment for fade out effect.J 5 : Hiding/Disabling/Removal of animation/graphic/hints utilized in feedback.J 6 : Use SVG to motivate learner.J 7 : Use Gallery Pages to provide overview of course structure.J 8 : Use Associative Navigation.J 9 : Use Structural Navigation comprising of Main Navigation and Local Navigation.J 10 : Use utility navigation to motivate leaner.J 11 : Use Persuasive labels speaking leaner needs and desire.J 12 : Use Call to Action labels such as BRegister Now to Avail discounts^.J 13 : Coordinate page title and navigation labels.d 6 : Don'ts d 0 : Avoid all caps in feedback (Williams 2004). ...
Article
Full-text available
AHIS\ Instruction=\frac{1}{a}\left(\frac{0.5\ast {Kcs}_{familiar}+{Kcs}_{new}}{Kcs_{known}+{Kcs}_{familar}+{Kcs}_{new}}+{\int}_{ilo=0}^6\left\{\sum \limits_{j=0}^n\frac{p_j.{m}_j.{e}_j.{n}_j}{c}-{d}_j\right\}\right)  AHIS equation describes a new model for instructional system design and develops a system based on Merrill’s Component Display Theory incorporating appropriate selection of Media, Ergonomics and Navigation Structures to produce learner engaging and effective learning outcome. A significant component of the proposed model is the integration of principles of Ergonomics having Graphic Aesthetic as one of the constituent. Graphic Aesthetic decides Unity, Proportion, Balance, Sequence, and Cohesion for interface design. Next component is selection of suitable Media as per the categorized learning content. Merrill Component Display Theory has been utilized to categorized learning content. Research shows that media effects are significant in teaching learning process. Third significant component of the model is selection of Navigation structures. Navigation structures decide learner concentration level (learner engagement), restrict them from getting disoriented in hyperspace and finally direct them to their learning objectives. Research in the field of Navigation structures reveals that it’s potential for accelerating learning, when employed with well designed interfaces. Hence, time demands development of instructional model which identifies categorized learning content(pj), principles of Ergonomics for Interface Design(ej), Media selection criteria (mj) and selection of appropriate Navigation structures(nj) and improved learner engagement by calculating learner’s prior knowledge level based on learner known concepts(kcsknown), familiar concepts (kcsfamiliar) and new concepts(kcsnew).
... The benefits of breadcrumbs have been studied within the web usability community. A 2003 lab study of navigation within a test website found that only 6% of users' total page clicks were on the breadcrumbs, and did not detect any significant efficiency gains from using the breadcrumb [9], although the breadcrumb trail did lead to more accurate mental models of website structure. ...
... It may be possible to improve the design of both the hoptree and breadcrumbs so that users more quickly recognize the affordances and utility of the navigation widgets. Prior research on breadcrumbs found that, in a website navigation task, only a small percentage of clicks were on the breadcrumb trail [9] while another study found that training in how to use the breadcrumb resulted in greatly improved performance [10]. We would like to investigate the effects of design changes, training, or increased familiarity. ...
Conference Paper
Designing software for exploring hierarchical data sets is challenging because users can easily become lost in large hierarchies. We present a novel interface, the hoptree, to assist users with navigating large hierarchies. The hoptree preserves navigational history and context and allows one-click navigation to recently-visited locations. We describe the design of hoptrees and an implementation that we created for a tree exploration application. We discuss the potential for hoptrees to be used in a wide variety of hierarchy navigation scenarios. Through a controlled experiment, we compared the effectiveness of hoptrees to a breadcrumb navigation interface. Study participants overwhelmingly preferred the hoptree, with improved time-on-task with no difference in error rates.
... One study by Hull in 2004 showed that test participants who used the breadcrumbs completed tasks much faster than those who did not (Hull [2004]). Another study conducted by Rogers and Chaparro in 2003 showed that there was no difference in task completion time between groups that used breadcrumbs and those that did not (Rogers and Chaparro [2003]). In this study, the pages that had breadcrumbs could be navigated to and from other pages very easily and quickly. ...
... One study by Hull in 2004 showed that test participants who used the breadcrumbs completed tasks much faster than those who did not (Hull [2004]). Another study conducted by Rogers and Chaparro in 2003 showed that there was no difference in task completion time between groups that used breadcrumbs and those that did not (Rogers and Chaparro [2003]). In this study, the pages that had breadcrumbs could be navigated to and from other pages very easily and quickly. ...
Book
Full-text available
User experience is one of the most prominent aspects of website quality today. Higher education institute has a need for an effective website to help with attracting new students as well as for serving the needs of current students and staff. In this book, several usability measurements are carried out in order to outline the features a university website should include for provision of relevant information and services to users. These features cover properties related to student and staff requirements and behaviours. Furthermore, an investigation for the design and content of eight university websites around the world has been able to identify the important features and necessary content that should be implemented and included in any university website. In addition, quality guidelines for academic websites, concerning usability, accessibility, functionality, internationalisation, reliability, content, layout and information architecture are included. Therefore, the primary readers of this book are the software designers and engineers interested in User Experience and usability, especially for those who are more interested in designing, and developing academic websites.
... Usabilitas adalah kualitas tak terlihat yang perlu diperhatikan agar produk dapat membantu pengguna menyelesaikan pekerjaan yang diinginkannya (Akesson, et al., 2005). Beberapa penelitian mengenai usabilitas dari situs versi mobile seperti yang dilakukan oleh Bharadvaj, et al. (1998), Ventakesh et al (2003), Rogers dan Chaparro (2003), Akesson et al. (2005), Eveland et al. (2007), Bila, et al. (2007) dan Liu, et al. (2010) telah menemukan bahwa ada beberapa hal yang perlu diperhatikan sebagai hasil studi usabilitas terhadap situs versi mobile. Hanya saja studi yang mengarah ke penelitian tentang usabilitas pada situs berita versi mobile masih belum ditemukan. ...
... A study by Rogers and Chapparo [35] indicates that users tend to get a better understanding of a website's structure if the site in question implements breadcrumbs. Instone [15] identifies three different types of breadcrumbs: ...
Chapter
Conference Paper
The World Wide Web Consortium provides software developers with guidelines for designing accessible, cross browser compatible websites. Currently however, there are no guidelines in this area specific to the features of an e-commerce website. This paper explores the current usability issues relevant to users with visual impairment and further proposes a framework that seeks to ensure the site is suitable for visually impaired users. This paper includes data analysis which compares current issues in web technologies suitable for e-commerce and proposes system adaptations which can be conducted to portray the improvements in overall user experience. To this extent, several validation tools and testing techniques have been used to identify the usability issues that visually impaired users currently face when shopping online.
Thesis
Full-text available
Este trabalho projecto consistiu no desenvolvimento de um novo website de uma revista online dos alunos da Faculdade de Ciências Sociais e Humanas da Universidade Nova de Lisboa: a Revista N. Esta revista online funciona como plataforma para expor os trabalhos que os alunos da Licenciatura em Ciências da Comunicação e dos Mestrados desta área realizam nas diversas disciplinas e seminários. O objectivo era criar um website com um design apropriado para um site de uma revista online, com um look profissional. O intuito é potencializar exposição de diferentes tipos de trabalhos jornalísticos (vídeos, clips de som, slides, etc.) produzidos pelos alunos e tirar o maior partido das condições que a web disponibiliza. O gestor de conteúdos escolhido foi o Wordpress, por ser de fácil utilização e assim permitir que sejam os próprios alunos a introduzir os seus trabalhos no site. Tendo em conta que alguns jornais e revistas online, como o USA Today e a Wired, escolheram como gestor de conteúdos o Wordpress, este pareceu ser uma boa opção também para a Revista N. O site foi desenvolvido recorrendo apenas a software livre, tendo sido utilizadas tecnologias como o PHP, HTML, CSS e MySQL.
Article
Full-text available
Usability does not exist in any absolute sense; it can only be defined with reference to particular contexts. This, in turn, means that there are no absolute measures of usability, since, if the usability of an artefact is defined by the context in which that artefact is used, measures of usability must of necessity be defined by that context too. Despite this, there is a need for broad general measures which can be used to compare usability across a range of contexts. In addition, there is a need for "quick and dirty" methods to allow low cost assessments of usability in industrial systems evaluation. This chapter describes the System Usability Scale (SUS) a reliable, low-cost usability scale that can be used for global assessments of systems usability.
Article
The Internet has become a growing channel for consumer purchases. Half of all U.S. consumers made at least one purchase on-line in 2001. However, many consumers report frustration with the lack of support for navigation within many Internet retailers' web sites. Several design patterns have been suggested to overcome these limitations, such as expanded hierarchies and breadcrumbs. This study investigated the effects of these design patterns on users' quantitative performance and subjective preference for ecommerce web sites. Expanded hierarchies, a design pattern that is commonly used by many retail web sites, degraded all of the performance metrics assessed in the study. Users required more time, made more errors, used more clicks, and had lower satisfaction scores for sites designed with expanded hierarchies. The results for breadcrumbs suggest that they may improve performance. The inclusion of breadcrumbs reduced the number of clicks required by users to complete the tasks, but other performance metrics did not reach statistical significance. The results indicate that design patterns that are believed to improve performance apriori may not yield the results expected.
Article