Styleguides: In which category do breadcrumb trail menus fall?

Question

I am designing a new style guide from an existing style guide. The breadcrumb menu is an essential part of the design. I am organizing the new style guide in categories such as Colors, Typography, Buttons and so on. Now there is confusion in which category I should put the Breadcrumb Menu? Anybody has some ideas?

Answer 1

I would put breadcrumbs as part of interactive UI design into category interaction, or even deeper into navigation. See explained rational and example outline below:

Taxonomy for elements

All elements that are contained within the style guide have their characteristics and purpose. Some are characterized by static properties like font and color. They serve a broad common purpose like corporate identity. Others are dynamic in nature and serve a dedicated use-case like navigating through menus or data input via forms.

They have a scope ranging from common applicability to specific use cases. Size and typography may be commonly used in specific elements like buttons and headings.

So a taxonomy or schematic separation into categories depends on important characteristics or usage scope that is unique to your context.

An Example Outline

• Visual styles: colors, fonts, sizes, spacing, logos, icons
• Content elements:
  • media (image, video, sound)
  • text (headings, body, footnotes)
• Interaction elements:
  • Navigation elements: menus, breadcrumbs, links
  • Input elements: forms, fields, buttons

These taxonomy can be interwoven, since content elements may use defined visual style (font, spacing), or buttons or links (to unfold, jump). On the other hand different styles may apply to interaction elements. For example a breadcrumb that does have less spacing or different shaped border than defined in general visual style.

Important to note: interactive elements are not only characterized by their visual style, but also by consistent behavior and changing visually depending on their state (e.g hover, clicked). This dynamic should also be covered by a style guide.

Structure Depends on Usage

There is not a golden rule how to outline or organize elements of UI within a style guide. Rather the structure depends on the targeted readers and their requirements for using it:

As stated within Toptal's post:

it’s important to understand that there isn’t a one-size-fits-all approach

This advice suggest to ask your users of the style guide for their tasks and needs. What do they look for? How do they expect to be guided? Which questions do they ask if it comes to style and UI design?

References

• Toptal: Creating a UI Style Guide for Better UX
• UX Magazine (2013): The Elements of a Style Guide

Answer 2

Some tips of how you can implement the breadcrumbs

• Assign a label to each of the individual pages within the hierarchy. These labels should preferably, match the title of the page so as to provide the context and help the users identify exactly where they will be taken with the site structure if they will select a particular breadcrumb.

• Arrange the breadcrumbs in the order they appear within the site hierarchy, with the first label as the furthest left and the user's current level on the right. As the user moves deeper into a site, allow the breadcrumb list to grow one line with every new page.

• As the user moves back through the breadcrumbs from a deeper level then the labels should no longer be present within the list, with the user's current position always represented as the last breadcrumb. Also, as breadcrumbs are used to track the user's current position in the application's or website’s hierarchy, they should not be present on the homepage or the highest point within the site hierarchy.

Example

If you have an eCommerce shop and a user is on a page for microwaves, then the breadcrumb trail structure will show the main categories leading to the page and back to the home page according to their proper order of page appearance. So, the users/viewers will find the breadcrumb something like

“Home / Electronics Devices / Home Appliances / Microwaves”

This trail is typically based on the specific folder structure in the backend system of the site. The user can go to any of the pages of the trail by clicking on the text.

For example, if you want to go to the Home Appliances then you can go directly there by clicking on the "Home Appliances" link on the breadcrumb trail. If you want to go to the homepage you can directly go there by clicking on the “home” link on the breadcrumb trail. etc..

In your case, write down all the site structure and then try to figure out the information architecture. This will help you a bit more to implement the breadcrumbs.

Answer 3

Normally breadcrumbs are either a text style or a button, so dependant on your design, Typography or Buttons.