If you’re ever lost in a large territory, the first thing you’d want to know is where you are. Once you know that you can figure out how far you are from your destination. This is why shopping malls offer wayfinding maps with “You are here” indicators.
Users want to know where they are when they’re lost deep in a site’s navigation. Knowing where they are will inform them on where they should go. You should offer them a wayfinding map in the form of a breadcrumb navigation. This will give them a “You are here” indicator in the site’s hierarchy.
3 Levels or More
All sites organize their content by a hierarchy. Some are shallow and some are deep depending on the amount of content. If your hierarchy contains 3 levels or more, you should use a breadcrumb navigation.
A site with only 2 levels doesn’t need breadcrumbs. This is because the user is navigating from the homepage to the next level which is shallow and not as easy to get lost in.
But when you have 3 levels, users are more likely to get lost. Users will navigate back and forth from main to subcategory a lot. It’s easy for them to confuse whether they’re on a main or subcategory page.
Home Page Is the First Level
All breadcrumbs need to start with the home page. The home page is the first level because it’s almost always the user’s starting point. It gives them a reference point to gauge how deep in the site they are. Displaying the home page first helps users recognize the hierarchy.
It’s not necessary to use the word “home” for the homepage link. You can use a home icon or a small site logo instead. This makes the base level more distinct and easier to spot. It’s like how elevators use a star icon and the letter ‘G’ to distinguish the ground level of a building.
Use Arrowheads, Not Slashes
You should use arrowheads as visual cues for breadcrumbs because they signal direction. It makes it look more like a trail of pages the user has navigated through. Avoid slashes because they only function as separators.
Don’t Link to the Page the User Is on
The last breadcrumb level is the page the user is on. Make that a text label, not a link. If you make it a link, you’ll confuse users when they click it. They’ll end up on the same page and wonder what changed. Use a text label to make it clear where the user is.
Differentiate Where the User Is
The text label for the page the user is on should look different than the preceding links. This allows users to spot where they are through appearance. A way to do this is to bold the text label and make it a darker or different color than the links.
Benefits of Breadcrumbs
Breadcrumbs aren’t an option, but a necessity if your site has 3 or more category levels of content. Testing shows that there are only benefits and no downsides to using breadcrumbs.
Users want to know where they are in relation to the rest of the site when they navigate. Not knowing can cause them to get lost and waste time. Make it easier for them to find their destination by leaving a trail of breadcrumbs behind.
Book
Affiliate
Thank you for this post, quick but interesting! I will always use arrows instead of slashes from now on!
I love this site with its brief yet very informative articles. Very digestible for the busy dev. Got yourself a new reader. IMO breadcrumbing can be a great visual queue for the user to id their location in a multi level UI. Personally i try to never go deeper than 4 levels as learned in university studying CS as it by design complicates location.
“Avoid slashes because they only function as separators.” For web interfaces, the slashes are also used for URL’s. So it doesn’t seems to be a bad idea to used this for website breadcrumbs.
I’m curious as to why breadcrumbs shouldn’t use slashes. As the poster above mentioned, URLs utilize slashes as a sort of breadcrumb. Also, Microsoft utilizes slashes as well in Explorer (the desktop program, not Internet Explorer). Has any testing been done to show that utilizing slashes in breadcrumbs misleads or confuses the user?
Great article, thanks. I’m doing a UX Audit at the moment for a client, their breadcrumbs are in an unexpected position. It would be great if you could expand your advice to include research on the best placement of a breadcrumb trail as well as it’s size, colour and so on relative to the content and branding.
The usual position is probably the best position – above the page title, but it would be nice to have some quantative evidence 🙂
Agree with Clément, slashes as a separator are quite acceptable.