Are Breadcrumbs Still Relevant in Modern-day Web Design?

When it comes to breadcrumbs in a web design company, they can either go one of two ways – they’re either an obtrusive element on a page’s design or a godsend in helping users find where they are within a website. I tend to lean towards the latter, but I can see where the prior is a perspective I can’t really get mad at either. Before we get into why I think breadcrumbs still work as one of the best tools for web designers, let’s discuss what breadcrumbs are for the uninitiated.

What are breadcrumbs?

Breadcrumbs (no Panko) are a reference to trail-based links that allows users to know where they are within the confines of a website. You’ve probably seen them in a large website and e-commerce sites with lots of categories, like the Amazons and Best Buys of the world. You’ve probably even used website breadcrumbs once or twice before without knowing what they’re called. Well, now that you do know what they’re called, it makes sense, right? If you’re familiar with the story of Hansel and Gretel, then you know that breadcrumbs were used to provide themselves with a trail to get back home. Same idea here when it comes to websites – clever huh?

Breadcrumbs come in a few different varieties as well:

• Location-based Breadcrumbs: Set of links that shows the user where they are based on the site’s structure. This method allows for easy indexing in the Search Engine Result Page.
• Attribute-based Breadcrumbs: Set of links that show specific attributes of the page the user is currently on. These are typically based on the metadata of a link, which can branch out into different paths, and is mostly incorporated in e-commerce sites.

Path-based Breadcrumbs: Set of links based on the user’s path to get to the page they’re currently on. Think of it as a set of back buttons.

Now that you know what breadcrumbs are, what they’re used for, and the variety in which they can be utilized, do we still need them in 2018?

Making the case for breadcrumbs in today’s web design

If breadcrumbs are such an “ingenious” element in web design, then what’s the case against them? For one, in modern web design they tend to become a fallback option for websites that have a less-than-optimal site navigation structure. This is particular for robust websites with lots of categories and lots of pages. However, if your site is well off in showing users how to get where they’re going without you holding their hand, then do you really need breadcrumbs in the first place? For instances where your website has a less-than-optimal navigational structure, it’s probably best if you spent your time and effort optimizing your site navigation rather than using breadcrumbs as a band-aid solution. An additional case against breadcrumbs would be regarding its position on a webpage. Although they typically don’t take up too much real estate on a page, they’re still typically placed in obtrusive areas that can compete with other conversion areas on a webpage, and even make your website look dated at times.

Despite these qualms, the reasons to use breadcrumbs and the benefits behind them outweigh the reasons you shouldn’t. Here are the reasons you should use breadcrumbs for your website:

• They’re convenient: They allow users to know exactly where they are within the navigational structure of your website.
• They enhance experience for the website visitor: This kind of goes with the previous point. Knowing where you are in a website, plus having the ability to go to a previous page or category only makes things easier for the user.
• They’re subtle: As mentioned before, they don’t take up a lot of space on your webpage. That’s definitely a positive, especially when you’re trying to get users to convert in critical areas.
• They don’t really cause issues: According to Nielsen Norman Group, breadcrumbs never misunderstand. Sure, they can go unnoticed by users, but users never have any issues using them.

Now sure, website breadcrumbs are proven to be useful and can even be considered by some to be a best practice, but knowing when and how to use them can be critical for your next web development project.

Tips for breadcrumb usage

Here are a few methods you can incorporate into your next breadcrumb design project if you want to use breadcrumbs as a secondary navigation structure:

• Know the depth of your website: Breadcrumbs are best put into practice for websites that have 3 or more levels.
• All breadcrumbs lead home: It’s important to always have the first level of your breadcrumb trail to be set to your homepage, since your homepage will typically be the hub for your site’s categories, contact, and about pages.
• Keep breadcrumbs for mobile: In order to maintain continuity across all devices, it’s best to keep breadcrumbs for mobile layouts as well. For longer trails, showing at least one step backward from the current page is a solid workaround to show users where they are in the site without having to expand the breadcrumb list to take up a lot of space on mobile.
• Consider smaller text in between the end crumbs: The space in between the home and last breadcrumbs is vital to ensuring a concise and straightforward breadcrumb trail. Consider setting up your site so that the category names are short, sweet, and straight to the point so users don’t get confused and that your breadcrumbs don’t get too drawn out.

Consider alternative placement: When thinking about a location based breadcrumb, if the typical placement at the top of the page becomes too obtrusive for users then think about putting them somewhere else. Apple does a great job of this by placing their breadcrumb links in the footer to maintain good SEO and UX practice, but also placing it somewhere it won’t be too distracting.

Conclusion

In the ever-so-fickle web design and development industry, breadcrumbs have become a mainstay, and for good reason. They offer value to users, allowing them to navigate a large website with ease. Try not to underestimate, or even overlook, these nuanced aspects of websites, as it’s likely that they’ll lead you to the right places.