Breadcrumbs: OK to use on mobile site?

  • 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?

  • 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.

    I feel like this could usually go for non-mobile UX, as well.

    Actually, I respectfully disagree with your statement about rei not using a breadcrumb. If you use their menu to navigate on an iphone, (say, cords -> slings and webbing) - you'll see the top header contain the words : cords, slings and webbing. Now this isn't the best user experience, the comma separation. But I'd argue that a breadcrumb does one thing very well - tells a user the context of what they're seeing during a browse flow - specially on cramped screens such as those on a mobile phone.

    @viksit That's not a breadcrumb trail, it's simply a current category description for the page you are looking at - ie you are currently looking at *Cords, Slings and Webbing*.

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM