This is the message

Making tastier breadcrumbs on websites

James Ing
Friday 5 June 2015


It's June, and that means a change of seasons, hot cross buns, and warm toast on cooler mornings. My breakfast toast sessions always leave a trail of crumbs tracking my steps around the house (maybe I should just sit down and eat at the dining table). While on my hands and knees sweeping up my mess, I began thinking more about breadcrumbs on websites.
So you could say May > Cooler mornings > Toast > Breadcrumbs > This blog post.

Breadcrumbs provide a great navigational aid to users. They trace a user’s path to the current page and additionally provide an intrinsic overview of the site structure

breadcrumb example

One limiting thing about traditional breadcrumbs is they only provide the pathway to the current page being viewed. While this helps users figure out where in the site they are, it doesn't aid further exploration or encourage discovering more content.

So what could we implement to aid information discovery, while still providing all the benefits of breadcrumbs?

One thing I've been experimenting with is adding a dropdown menu to the last item in the breadcrumb. This would provide an easy way to reveal and access sibling pages. Visually there is a fine line trying to balance out making it look interactive without breaking the visual identity of a breadcrumb.

breadcrumb example 2The last item in the breadcrumb is now a dropdown

Pushing this idea further could implement a dropdown on the parent page as well. This would provide a way to not only navigate sibling pages, but also explore and easily access parent pages. We’ve purposefully used a hover interaction (a great suggestion by Dan) to alleviate the issue that you’ll need to include the existing parent page as a clickable link. (something that a standard dropdown doesn’t do, without repeating an option within the dropdown).

breadcrumb example 4The parent item now includes a dropdown as well

How could we push this idea further? Well we could introduce the ability to navigate through parent page options to other pages.

This in particular helps users explore and discover content more easily but may create a level of duplication with the main menu.

breadcrumb example 5In this example the parent item now offers full navigation into cousin pages

Results of the taste test:

I created some static mockups of the breadcrumb concepts and ran them past the Frontend team to gauge their reactions. The team actually found the first idea (revealing sibling pages) the best and potentially most useful.

The second was complicating a navigation issue where one didn't exist. The third iteration was found to simply duplicate the main menu functionality and offered no extended benefit. So keeping it simple and just extending out the last item to reveal the sibling pages seems the most beneficial as an extension of breadcrumbs.

Downfalls

The concept of the menu breadcrumbs also has several downfalls in general. The concept breaks down if there is a long list of sibling pages as it'll produce a long list of items to reveal. We can resolve this by returning a truncated list of items with a link to view the rest if necessary.

Another downfall of this approach is that it might fail on more complex IA or on a website where web pages are shared across multiple places in the IA. The solution would require the website to successfully track where the user has come from to provide the right breadcrumb structure or provide a preferred IA.

Dynamically-created pages could also potentially cause issues, but these could possibly be resolved with some smart caching handling.

Breadcrumbs offer a valuable tool for users to not only trace and retrace their path, but also gain an understanding of a site structure. My new improved proposed breadcrumbs additionally help to facilitate further exploration of sibling pages.

You can check out my sweet mockup using the improved breadcrumb spread 

 

Keep it toasty
James

Making tastier breadcrumbs on websites