Conventions

Separator Characters

Separator character as seen on Verizon.com

A separator, according to Instone (2002), is a character or graphic that separates a list of linked elements in a breadcrumb trail. There are many different separators in use on the Web, though some evidence points to the > (greater than) symbol as the most optimal.

In 2002, Colter et. al. investigated over 3,400 commercial websites and noted which included breadcrumbs, and of those sites, which separator character was used. Only 17% of the sites actually used breadcrumbs, however of those that did, over 47.10% used the greater than (>) separator. Other popular characters in use were the colon (:), 11.10%, the forward slash (/), 8.90%, the double greater than (>>), 6.80%, the arrow (->), 5.80%, and the pipe (|), 4.90%. No other character was found in more than 2% of the examples.

Krug (2000) advises designers to use the > symbol. His rationale is that the greater than symbol "seems to be the most satisfying and self-evident--probably because it visually suggests forward motion down through the levels."

Web usability guru Jakob Nielsen uses breadcrumbs on his UseIt.com website, and employs an arrow graphic separator. Nielsen explains that his original page design "used a simple colon to separate the levels, but some users thought that the colons indicated alternative choices on the same level (and not a progressively deeper nesting of options, as intended)." He goes on to explain that the arrows provide a clearer visual indication of moving deeper into the site.

Orientation & Location

In his 2002 poster presentation, Instone presents examples of different conventions for the placement and arrangement of breadcrumbs within sites. He uses eGreetings.com as an example of left-to-right horizontal breadcrumbs located underneath the title:

Home > Keep in Touch > Have a Nice Day

He then shows the WorldCom website as an example of right-to-left breadcrumbs in the following form:

Reviews < Cerfs Up < About the Company < Home

The WorldCom site has since folded into Verizon, which uses the more standard left-to-right orientation. It is not evident whether users experienced problems or confusion with the right-to-left format.

Instone finally uses the old BBC website for an example of vertical breadcrumbs. In this notation, linked elements appear top-to-bottom, aligned at the right side of the page, like the following example:

BBC Homepage
Homes
Antiques

He includes a comment from a BBC representative that the vertical breadcrumbs were not useful to people.

Rogers & Chaparro's 2003 study indicated that users are more likely to use breadcrumbs when they are located directly under the main page title, rather than above it.

Discussion

Based on these findings, it is evident that the most universally accepted convention for presenting breadcrumb navigation is to place it at the top of the page underneath the main title, align the items left-to-right horizontally, and use the > symbol to separate link elements. By using generally agreed-upon conventions, designers can help their users recognize and understand the purpose of the breadcrumb links. I will discuss both visibility and understanding further in the Visibility section of this site.