4 tips on prototyping breadcrumb navigation with Justinmind

How to design with breadcrumbs: Justinmind’s top tips on prototyping UI design patterns to improve the user experience

Breadcrumbs are the bread and butter of secondary UI navigation in web design. The importance of breadcrumb navigation is often overlooked, but actually it’s essential to a site’s usability and the overall user experience.

Strong breadcrumb design — such as Google’s navigation– can help users complete tasks faster and more efficiently because it takes the guesswork out of browsing sites. In fact, the breadcrumb trail can help to reduce bounce rates and boost site conversions. That’s what we at Justinmind like to call having your bread buttered on both sides!

Working with breadcrumbs early on in the design process will help you to build out a successful navigation flow. Not sure how to get started? You could try creating a low-fidelity prototype to simulate and test your website’s navigation in real-time. To get set up, download Justinmind and check out our 4 top tips below on making a fail-free UI design navigation pattern.

What is breadcrumb navigation in UI design?

Breadcrumbs make up the second level of a user interface’s navigation scheme and uncover the user’s location within the UI’s hierarchy.

There are three types of breadcrumbs:

• Location-based: these help to the user get their bearings within the website’s hierarchy
• Attribute-based: these display the attributes, such as page parents, of a particular page within a website
• Path-based: these show the user the steps they have taken to get to a particular page

Breadcrumbs that we are familiar with in web design originate from the fairy tale of Hansel and Gretel. The children’s wicked stepmother sends them off into the forest, abandoning them. Quick-witted Hansel leaves a trail of breadcrumbs so that the pair can find their way home.

In UI navigation, breadcrumbs aid the user journey by marking a path in a website in order to help orientate users.

Now let’s take a look at how to prototype breadcrumbs into our site’s navigation with Justinmind.

Download Justinmind now and start building your breadcrumb navigation now!

How to prototype breadcrumb navigation

We’re going to create a breadcrumb trail with 4 levels (Home>Audio>Speakers>Wireless) in our web prototype.

The first thing you’ll need to do is download Justinmind. Then, create a new web prototype. From the Basic widgets library on the left-hand side, drag a dynamic panel to the canvas. Create 3 additional panels by clicking on the plus, so that you have 4 in total. Rename them to match our example above.

To create the visual framework of each level, add image and text widgets to each panel. Tip: Use the Lines and shapes to help you build the outline level.

Next, place hotspot widgets on top of the UI elements in each panel. When you’re happy with the visuals of your breadcrumb trail, it’s time to add events to make it work. Start by adding an ‘On Click’ + ‘Set Active Panel’ event to the hotspot in Panel 1, and select that panel as the active panel.

Repeat this event for the other panels, changing the relevant panel each time. When the user clicks on Home, they will be taken there.

And you’re done! Click Simulate on the right to try out your breadcrumb navigation.

4 pro tips on prototyping breadcrumb navigation for UI design

1– Use breadcrumb navigation sparingly and consistently

Deciding whether to use breadcrumbs as a UI design pattern largely depends on the amount of content you want to display. Basically, you only need to use breadcrumbs if your navigation is deep enough. A site with only two levels of navigation doesn’t need a breadcrumb trail for instance. Remember, breadcrumbs serve as an optional aid to navigation alongside the primary navigation. Try pairing them with a drop down menu.

As Kissmetrics tells us, breadcrumbs give us an ‘at-a-glance understanding’ of the rest of the site. So if you do decide to use them, use them consistently and include them in every page on your website.

Use Justinmind’s linking events to connect your breadcrumbs with the corresponding locations in your website. Copy and paste the events to ensure accuracy with minimal effort.

2– Breadcrumbs should show site hierarchy, not user browsing history

For optimal usability, your breadcrumb path should show the hierarchy of your site’s content rather than your user’s history. As UX expert Jakob Nielsen has it, breadcrumbs should be used to visualize the page’s position within the website, so as not to create multiple entry points, or confusion among users.

Before creating your breadcrumb navigation, try mapping out the navigational flow of your web prototype using scenarios. In Justinmind, you can create and simulate your scenarios so that you can see things from the user’s perspective. With your navigation flow clear, it will be much easier to create your breadcrumbs and corresponding pages.

3– Make your breadcrumbs readable with the right styles

There is no absolute standard for indicating progression in the breadcrumb trail — though the ‘greater than’ symbol and forward dashes are popular. Regardless of which way you go, we maintain that the most important aspect of breadcrumb design is keeping things consistent and familiar — it’s what users look for in navigation according to SitePoint.

Making your breadcrumbs look familiar comes down to the aesthetics. Make sure that each level in your breadcrumb trail is labelled clearly. Appropriate use of the underline, italics and colors will help you show the user which items are clickable and which are not (i.e. the page they’re currently on shouldn’t be clickable).

With Justinmind, you’ve got tons of options for customizing your breadcrumbs. Simply select the UI element you wish to adjust and head to the Properties tab where you’ll find everything you need.

You can also change the style of your breadcrumb trail upon a user action with Change Style events. Remember to change the appearance of the current page (e.g. no underline) so that it’s clear where the user is.

To use breadcrumbs or not? Try them out in a web prototype and decide for yourself!

4– Adjust the size and position of your breadcrumbs for optimal navigation

You don’t want your breadcrumbs to dominate the page — they need to be seen but not be the focal point.

Consider how the size and positioning of your breadcrumb navigation will affect the overall user experience. A good rule of thumb is to keep breadcrumbs at the top of the page so as to make sure they are seen but not screen-hogging, as well as where the user would expect to find them.

A good example of breadcrumbs done right is Nestlé’s web design. The text in the trail is significantly smaller than that of the rest of the page

If you’re prototyping your breadcrumb navigation with Justinmind, check out our rulers, guides and grids that will help position UI elements in the perfect spot.

Breadcrumb design: the usability sweet spot

A big part of keeping users happy online is keeping them informed. If you’ve got lots of content, users could get lost. With breadcrumbs, you can avoid them getting lost in your site’s navigation. But that’s not all. Here are some more benefits of using a breadcrumb trail:

• It helps users visualize their current location and navigate to important areas of your website in order to compete tasks more efficiently — e.g. convert!
• It provides single-click access to high site levels. Use it wisely and it’s a powerful asset to business goals
• It eliminates unnecessary clicking, users can backtrack easily without having to click the ‘Back’ button
• It’s a streamlined UI navigation pattern and leaves plenty of space for site content
• It reduces bounce rates by encouraging first-time site visitors to browse on after arriving on the landing page
• It’s simple and easy to understand

So what are you waiting for? It’s time to start prototyping your breadcrumb trail now! Download Justinmind and get cooking!