Quantcast

Website Usability, Breadcrumbs and Left-Side Navigation

Get the WebProNews Newsletter:


[ Business]

The very basis of usability is the user. How can you make sure your website is designed with your user in mind? You must first consider the natural behavior of your user in order to understand how your user will experience your site. This month, we will talk in more detail about the psychology and behavior of the human Internet customer, particularly in reference to navigation. The popularity of the Internet may have only exploded over the last decade, but there have already been numerous studies into human behavior and preferences regarding website surfing.

There have been many questions about what is best in terms of usability. In particular there have been two issues: where should navigation bars be located? And what sort of navigation is best for retracing your steps? Guess what. Those answers are still up in the air, even after the studies we describe here.

It is popularly assumed that your page’s main navigational menu should be anchored on the left side of your website. A 2001 study (Nelson and Tahir) showed that fully one-third of high traffic websites have left-justified navigation, often with site identification or more navigation along the top of the screen, in what is known as “Inverted-L formation”. But though the “Inverted-L” is common, does that mean it is necessary?

A study in Razorfish, Germany examined the difference between right and left side navigation. Researchers asked: is one side better than the other? They tested two groups, and had one side use navigation that was on the left side of the screen, and the other use navigation on their right. The test subjects were timed in five tasks. The researchers hypothesized that those using right side navigation would finish faster, because so many users are right handed. In fact, there was no significant difference between the times of the two groups.

Practically, left-justified navigation assures that even if the web page is too large to be viewed all at once, the navigation will be seen. If it is on the right, there is a chance it may be cut off and the user would have to scroll over to find it. Also practically, Western users read from left to right, so the upper left hand corner would be the first thing they see.

The Razorfish study tested both left and right justified navigation, and in their tests made sure that the entire screen was always visible, eliminating the possibility that a user would have to scroll over. With this problem eliminated, they discovered that the mean of completion times for tasks on either side differed by less than four seconds. During their debriefing interviews, participants did not express any particular frustration with the right-side navigation. So the test concluded that there was no significant impact on website usability if the navigation was on the left or right hand side.

However, usability and user behavior are often enhanced by familiarity. Even if something is easy to use, if it is also familiar, it becomes even easier to use. In 1998, Norman’s study of “affordance” taught us that familiarity with an object’s purpose allows us to know what to do just by seeing it. We see a button, we know to push it. We see a ball, we know to throw it or kick it. For people who are familiar with the Internet, we see navigation, we know to click it. We know the affordance of a link- we know what it is for, and once we know that, whenever and wherever we see it, we will know how to use it.

Familiarity is also a large factor in users return visits. In 1997, Linda Tauscher and Saul Greenberg of the University of Calgary studied 6 weeks of Internet usage of 23 subjects. In those 6 weeks, 58% of the sites participants visited were revisits, and that users continuously added new pages to their repertoire, but visited them again and again. Their participants said they revisited pages because they want to further study the pages’ content, because the page serves a special purpose (search engine or homepage) or because the page has information that continuously changes. Tauscher and Greenberg concluded that because users so often return to previously viewed pages, browser interfaces should minimize the effort it takes for a user to return to them, certainly to make it take less time to return to a page than it did to find it originally.

Users revisit pages in a two-steps-forward-one-step-back pattern. As they move along, they may re-access the last few previously viewed pages and then move forward again, then step back again. Now designers are attempting to find the best way to cater to this manner of navigation. User habits and physical abilities are taken into consideration.

The movements we make when using our computer are precise, direct, and rapid. Click click click. In 1954, well before the advent of the personal computer, psychologist Paul Fitts developed what is known as Fitts’ Law. Fitts’ Law states that movement is logarithmically determined by the distance to be moved and the size of the target. Moving a cursor and clicking on a link demands little movement and precise aim. Fitts’ Law is often cited during website interface design, and it basically tell us what may seem obvious- the bigger and closer something is, the easier it is to click on it. The less you have to move your mouse around the screen, the better. Fitts’ Law is the law to live by when designing your website navigation.

As you know, navigation can be tricky and winding, easy for a user to get lost in. The user can be clicking along, going from page to page, when they decide they want to go back to something they saw 20 clicks ago. The user doesn’t necessarily want to have to open up his or her History and figure out which page it was, nor do they want to click back on their browser 20 times. Users wish they could just figure out how they got to where they are, and how to get back to where they were. The answer to this problem may be what is known as breadcrumb navigation, also known as selection list navigation.

The term comes from the story of Hansel and Gretel, who used a trail of breadcrumbs in order to be able to retrace their steps. Of course, if you know the story, the birds ate the breadcrumbs, destroying their path out of the woods. It was white pebbles that worked better for them.

But in any case, here breadcrumb navigation refers to the practice of leaving your visitors a trail for them to retrace their steps. There are 3 types: path, attribute, and location. The location breadcrumb is the one most commonly seen. It is a visual display or a page’s location within a site. For example, Yahoo! uses location breadcrumbs when it shows you that the page you are on is categorized:

Health>Children>Bed Wetting>Treatment>Cleaning Up

With this, users can see where the page they are on is located in the hierarchy of the site. A 2003 study by Rogers and Chaparro reported is Usability News asked the big question: does Breadcrumb navigation positively affect a user’s experience?

There has only been limited research on breadcrumb navigation. However, the studies that have been performed have shown that breadcrumb navigation makes site navigation simpler and more efficient (Bowler, et al. 2001; Maldaonado & Resnick, 2002). In 2003 Bonnie Lida, Spring Hull, and Katie Pilcher examined if study participants would use breadcrumb navigation when given the task of finding several items on a website. They also studied what other methods the subjects chose to use, such as the browser back button or search fields. They hypothesized that breadcrumb navigation was more useful for browsing than for searching for specific terms.

The researchers used three popular websites that feature breadcrumb navigation, the Directory at www.directory.google.com, and the office supply site www.officemax.com. The two sites offered various methods of navigation, searching, and browsing. Google offers a directory of main and subcategories, as well as a search field. Office Max includes a search field, a navigation bar across the top of the page, and a hierarchical navigational structure.

Participants were given ten tasks, and researchers recorded their number of clicks and searches, use of the back button, and the time it took them. When they had completed the tasks, participants were given an evaluation of their satisfaction via 12 questions answered on a 1-5 Likert scale. All participants had used the web before and were familiar with the process of finding information. At the Office Max site they were asked to find ten items and place them in their shopping cart. At Google they were asked ten questions and had to find the answers by Googling for them.

In the end, the participants’ usage of the breadcrumb navigation was low. And those that did use breadcrumbs were found to be comparably efficient to those who did not use breadcrumbs. Participants used all means of navigation, including breadcrumbs, but also search fields, back buttons, and navigation bars. The results of the study did not suggest that breadcrumb navigation was detrimental to a website’s usability, but it did not suggest that it significantly increased usability either.

However, another, earlier study suggested that breadcrumb navigation is indeed beneficial, but only if users are familiar with it, know how to use it, and choose to use it. The study by Lida, et al. showed that users often ignore that breadcrumb navigation in favor of more familiar search bars or menu navigations. A 2001 University of Maryland study by Bowler, Waieking, and Schwartz, studied the effectiveness of selection list navigation as compared to other standard forms of navigation, the control type, which simply had links back to the previous page, and the standard navigation bar. The test subjects were given a series if questions and timed to determine how long it took for them to answer and how many page loads they required. Their subjective preference of navigation bar treatments was also measured.

In the timed results, there was no major difference between the standard and list navigation styles. Neither style proved to be significantly faster than the other. In terms of page loads, however, there were significantly fewer for the list navigation style than for the other two. Page loads were fewer for the last questions of the experiment, as users had become more familiar with the method. At the end of the test, when participants were interviewed to determine their inclinations, there also seemed to be no major difference in preference.

Bowler, et al. concluded that with time and practice, users could benefit from breadcrumb navigation by being able to find information faster and more directly. However, their study also concluded that breadcrumb navigation bars do require more initial work to get used to them and be able to use them to your advantage. One has to take time to become familiar with how they work. Many users will probably prefer to use the standard navigation bar that they have experienced before. This study, and that of Lida et al., determined that while breadcrumb navigation can be beneficial, not all users will even use it, so website designers should offer both styles in order to please the most users.

The studies we have described here seemed to offer no black-and-white answers. But they did show us that practicality and logistics are just as important considerations as data and results. In all of these studies, we saw that familiarity and repetition was important to users. The standard left-side navigation makes more sense, even if it doesn’t have any significant impact on users. Breadcrumb navigation is still too new and uncommon for users to truly reap its benefits, but as they get used to it, it does increase speed and usability. But when it is used by people who know how to use it, it does help. So you may be asking, well, what news is this, really?

Basically this: Think in terms of the practical and familiar; think it terms of what makes sense, because we have also seen that users like what makes the most sense and what they are used to, regardless of how many minutes it may take off their completion time. It simply makes things more comfortable, and comfortable users are happy users. Fitts’ Law says as much. The easier it is, the better. So does Ackam’s Razor, the old adage that tells us that the simplest answer is probably the best. In terms of website navigation, the simplest, most familiar form is probably the best.

Main Sources:

Navigation Bars for Hierarchical Websites
Bowler, Waieking, and Schwartz: 2001.
http://www.otal.umd.edu/SHORE2001/navBar/index.html

Breadcrumb Navigation: Further Investigation of Usage
Lida, Hull, Pilcher: 2003.
http://psychology.wichita.edu/surl/usabilitynews/52/breadcrumb.htm

Web Page Layout: A Comparison Between Left and Right-Justified Site Navigation Menus
James Kalbach and Tim Bosenwick
http://jodi.ecs.soton.ac.uk/Articles/v04/i01/Kalbach/

Revisitation Patterns in World Wide Web Usage
Tauscher and Greenberg
http://www.acm.org/sigchi/chi97/proceedings/paper/sg.htm#U2

Meghan Whitmore is a professional copywriter and part of the Directory One, Inc., search engine optimization and website design team. For more information, please visit: http://www.directoryone.com.

Website Usability, Breadcrumbs and Left-Side Navigation
Top Rated White Papers and Resources
  • http://www.business-directory.com Business

    The website must always be built for the user.  That’s what we forget sometimes this is a solid piece that will always hold true.  Kudos to Meghan for a timeless article on usabillity.

  • Join for Access to Our Exclusive Web Tools
  • Sidebar Top
  • Sidebar Middle
  • Sign Up For The Free Newsletter
  • Sidebar Bottom