Get into bed with breadcrumbs
Sunday 04 October 2009
TAGS: Usability | Web design
Overlooked by many, the humble breadcrumb can greatly enhance the usability of a website. John Ryder looks into the best practices that should be adopted to make them a real usability asset on your website.
First things first… Why are breadcrumbs important? With regards to usability, breadcrumbs can reduce the number of actions a user has to take to find a particular page. They’re a successful visual aid that specifies where the user is on a website. In a nutshell, they can improve the navigation of a website. They can even reduce bounce rates because they help to provide visitors with additional navigation options with specific context to the page they landed on.
When and where to use them
Usually, you’ll see breadcrumbs used on websites that have a large number of pages that are organized in a hierarchical structure. Don’t use breadcrumbs if your site operates at a single-level, and has no logical hierarchy or grouping.
More often than not, breadcrumbs are presented as horizontal text links that are broken up with arrows (>) that indicate level segmentation.
Like this…
Home > Blog > The advantages of providing multiple payment options
Breadcrumbs should not be considered as a substitute for conventional navigation menus. Think of them as a ‘convenience’ and an additional way to find the way around your website.
Types of Breadcrumbs
Path: path breadcrumbs are dynamic and show the path that the user has taken to arrive at a page.
Location: location breadcrumbs are static and show where the current page is located in relation to the website hierarchy. This is commonly used in eCommerce websites, such as the Topman site (below).
Attribute: attribute breadcrumbs give information that categorises the current page. This is another popular mode of breadcrumb for eCommerce sites.
Do’s and Don’ts
There are one or two best practice notions to consider when executing breadcrumbs for your website…
Only use them when you need to
If there is no benefit in using them, it’s best not to.
In the above example from Slicethepie, the visitor is being bombarded by navigation options.
Place them where you can see them
Display your breadcrumbs above the fold. It is commonplace to display them horizontally, just below the main navigation. Although users should be able to find them easily, there’s no need to make them an overpowering feature.
They’re not a substitute for conventional navigation
In the example below, mefeedia doesn’t provide conventional navigation menu for viewing videos.
Keep it simple
I’ve seen many elaborate methods of displaying breadcrumbs and in my opinion it’s a case of ‘less is more’. The commonly accepted symbol for separating hyperlinks in breadcrumb trails is >.
breadcrumbs > in summary
If you use breadcrumbs correctly they can be a real asset to your website. Although easy to implement, put some thought into the best way to use them as they are often overlooked.
John Ryder is the Commercial Director at Silverbean. If you have any questions or would like to discuss how Silverbean can help you achieve your marketing objectives through good usability; please contact our resident usability consultant using one of the following.
Post a comment