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.