Breadcrumbs: OK to use on mobile site?

Question

Wondering if anyone has thoughts on using breadcrumbs as a method of navigation on a mobile website (for a content site).

The breadcrumbs would show the heirarchy of the site as such:

Site > Category > Subcategory > Group > Item

My guess is that the breadcrumbs (if well-designed) would help the user quickly understand the site structure; at the same time, mobile users prefer large buttons and bars to links.

Is there a breadcrumb design that combines the best of breadcrumbs and buttons/bars/standard mobile UI components?

Answer 1

If you're on mobile and you feel you need traditional style breadcrumbs to navigate then something probably went wrong with designing your site for mobile use - ie it's too complex (too deeply nested) for the type of usage and environment that mobile provides.

Jared Spool wrote on ixda in response to a similar question

Can't speak specifically to mobile, but I'd suggest that you not think in terms of breadcrumbs. Instead, you should think of local "what would I like to get to next" navigation.

I believe that breadcrumbs only fix a symptom of a bigger problem (the user was in the wrong place to start with). I think you're better off focusing your energy on getting the user to the right place instead of coming up with a fix.

I wrote about this in an article called Design Copout #2: Breadcrumbs. (Design copout #1 is site maps.)

As Luke Wrobleski discusses in his book Mobile First, you only have half the attention from a mobile user - they only have "one eye and one thumb" on the situation.

Mobile users don't want to get entangled in your website, so if you are trying to get users to use a site which is complex enough that breadcrumbs are required in order to try and 'fix' the situation, please give another thought about how to make it less complex first, so that breadcrumbs aren't even on the cards.

Mobile UX:

For a more in depth look at considerations for the mobile user experience - especially when transitioning content from desktop to mobile, see my notes and slides on Mobile UX which underlines the need for simplicity in designing mobile content and navigation. The major example I cite is rei.com which has a rich hierarchy of content on desktop, but trims the fat for mobile ( m.rei.com ) while still presenting a full featured experience - and I might add - without the need for breadcrumbs on mobile.

Answer 2

I would say that it depends on the site. You could categorise mobile websites into two categories:

1. A bespoke mobile website / app that is a stripped-down version of the full site only offering the most appropriate content for mobile users
2. A responsive website, or a desktop site rendered in a separate mobile 'template'.

With the first type of site then if it needs breadcrumbs then you have probably built a far too complex website for a mobile user. As UXMatters.com stated:

breadcrumbs rarely appear on mobiles sites... the main factor is that the design of mobile sites prevents users from having to go too deep into a hierarchy to find what they are looking for.

For the second type of website - in particular an eCommerce site - then the breadcrumb may be more useful as the full navigation of products / categories etc will be more overwhelming than just the breadcrumb as a method of navigating around the results. Also, if the user has arrived at a product via search engines then the breadcrumb will give them a mental anchor as to where they are in the site.

They will potentially take up a lot of space though. The main mobile menu should be at the bottom of the page, but breadcrumbs are only really useful if they're obvious and therefore need to be higher up the page. I would suggest limiting the breadcrumb to three levels, any higher up the hierarchy can be navigated by returning to the homepage or using the main navigation menu.

So in summary; bespoke mobile websites shoudn't really have enough content to warrent a breadcrumb, but if you're converting an existing content-heavy site into a mobile version and require full navigation then a limited breadcrumb can be useful.

Some other useful reading on this:

Mobile-UI-and-Usability-Guide

Mobile homepage navigation

Answer 3

I would argue that breadcrumbs used on a mobile site could in fact provide better usability, and share a multi-purpose.

One of the things mostly seen today with responsive (mobile) sites is collapsing navigation that turns into a drawer/hamburger icon up top, once that navigation is hidden the only way to give a visual aid to the user of what page they are on is to include title headers on every page. That's when I decided to make these titles functional (aka breadcrumbs):

Home > My Account > Security Home > My Account > Notifications

So now the user can quickly identify which page they are viewing and also navigate back without having to use the collapsed mobile navigation.

I guess the best rule of thumb is, if you don't go any deeper than three it can improve usability but any more depth would ruin it's use for mobile.

Answer 4

I believe breadcrumbs are useful. There is reason for that: most of UX designer think that design should be simple and understandable, but... Do not forget that everyone likes to use pages randomly. They leave one page and go to another, then get back. These micro breaks are very frequent so after a while when we get back to certain page breadcrumbs (there may be other great solutions as well) are very useful. In project i work on we use cropped breadcrumbs.

Example: If we are in: Start > Cars > Audi > Audi A2 instead full path we just show: Audi > Audi A2. This is informative enough + allows users to get one level up.

Answer 5

Where are you planning on placing the breadcrumbs?

If somewhere near the top, then that would take up a lot of valuable screen real-estate, especially if you want to make them into buttons as you said.

You could, alternatively, redesign your navigation to be breadcrumb-like — but again, that would take up a lot of screen space above the fold for mobile users.

If the breadcrumbs are to be near the bottom, you'd be better served with a footer navigation as a ul with indents. A lot of sites have that, and people tend to either leave the page once they see it if they got everything they needed, or if they want to go somewhere further, they'd check it out (instead of scrolling back to the breadcrumbs/nav) at the top of the page.

If you're scaling up responsively, and you need breadcrumbs for wider viewports, I would simply include them in the HTML and hide them with CSS — it'll be loaded for even mobile users, but text isn't so bandwidth heavy. There's also room for JS solutions, but I'd stick to simpler CSS.