The Sweet Spot
Semi Permanent Sydney - recap
Diving into the digital deep end
A mobile paper prototype investigation
Scotts sign off
Getting into AngularJS
The stealing sh*t design workflow
Experiment - a new way of validating forms
New phones make my thumb feel inadequate
A front end playground
Growing your business from within
Gen-i to Spark Digital
Kelly's sign off
It’s kind of a big deal
Near miss for Frontend's Mascot
Responsive web - a light post
Great Scott Marty What Year Is It?
iPhone application design and the righteous retina
Making tastier breadcrumbs on websites
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
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.
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).
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.
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.
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.
Keep it toasty