Responsive breadcrumbs?

neoinsight commented 9 years ago

@thomasgohard @pcwsmith Was doing user needs research with Mariners last week - many say they use smartphones to check weather from the bridge. We looked at them there, and noticed that what they see highlights an issue with the breadcrumbs on Canada.ca as the site has grown deeper.

What's happening is that for example, on the local forecast pages, and on the Marine forecasts, the breadcrumbs and page title push everything else off the initial screen. Like this: phone weather forecast

So you have to scroll down to see this: gale warning

What we should think about for the future is responsive breadcrumbs - the convention is to use an elipse symbol - touch to expand to see the entire breadcrumb.

So the above breadcrumb could look like this, with only the last two crumbs displayed. Touching the elipse would expand to the full breadcrumb.

Home > ... >Atlantic - Labrador > Belle Isle Bank

Just an idea that I wanted to capture given that we've seen mobile usability participants bail from the first screen rather than scroll if it doesn't seem to show what they need.

LaurentGoderre commented 9 years ago

It also begs the question, does everything need to be in the breadcrumb.... For example, I think that in this case, Marine and Atlantic Labrador should not necessarily be part of the breadcrumb.

thomasgohard commented 9 years ago

Taking the name of the current page out of the breadcrumb could also be something to consider. As would be using a smaller font size, since the breadcrumb is not primary content.

@pcwsmith what about using the IA spec to identify pages where this would be a issue to get an idea of the scope of the problem?

neoinsight commented 9 years ago

Actually, @LaurentGoderre, Marine and Atlantic-Labrador are the most useful parts of the breadcrumb because they both lead to 'contiguous' tasks -like the forecast for the area your ship will head into, and the wave models etc. Sadly, they can't get to everything they need from the actual forecast page. Generally, it's the last and second-last items that are most frequently used in a breadcrumb.

@thomasgohard Agree that current page is really not useful in the breadcrumb and smaller font size is an idea too, although still need a touch target size. And yes, there's probably some depth at which this should happen, like when the breadcrumb goes past 3 or something.

LaurentGoderre commented 9 years ago

@neoinsight the weather information does not necessarily need to be divided into marine etc. Redesigning the content of this section could help streamline the breadcrumb and navigation as a whole.

LaurentGoderre commented 9 years ago

Also, the breadcrumb does not necessity need go back in the history in a granular way if navigating forward is easy. For example, if you can easily go to the Belle Isle Bank page from the Marine Forecast, why need the Atlantic Labrador page

neoinsight commented 9 years ago

@LaurentGoderre Totally agree that redesigning to meet people's needs (in this case, mariners) would make breadcrumbs and navigation much more streamlined! Would love to see that happen and am talking to some folks at Environment Canada about it, but in the meantime, I was just using it as an example of why we'll need responsive breadcrumbs as sites get deeper and deeper.

LaurentGoderre commented 9 years ago

Yeah I know, sorry for the side track. I would not mind the ellipsis personally

shawnthompson commented 9 years ago

I hate that I'm saying this but wouldn't details / summary be a good semantic option here?

LaurentGoderre commented 9 years ago

Not sure if it can be used because we still need to have part of it visible

neoinsight commented 9 years ago

@shawnthompson You're right, in theory this is an 'expand' function, but as Laurent says, we need part of the breadcrumb visible and individually clickable, which Details/Summary is not. When you click Details Summary, it just opens. But when I click on a breadcrumb item, I'm navigating. Plus the whole arrow thing just doesn't follow breadcrumb conventions. The elipse does..

pcwsmith commented 9 years ago

Sorry late to the party here - the admittedly massive Canada.ca Spec currently includes a couple of measures to limit breadcrumb length:

dropping the generic "all services" link as it doesnt really add any value
use of short forms for theme names (e.g. Business instead of Business and industry)- up to the Environment & NR theme lead to determine what their short from would be
elimination of duplication (which is really indicative of an IA problem anyhow, meaning the topic tree ought to be adjusted) - so in the example above, I see ... > Marine > Marine forecasts and wonder if there's not a simpler tree that can be designed.

That being said, we can probably go futher, esp in terms of:

adopting an ellipsis for small screens - likely b/w Home and the last couple of links?
removing the current page from the crumb trail in all screen sizes

Are we in agreement with these two changes? I still have a tiny window where I can easily update the documentation to reflect this, but it's closing fast!

pcwsmith commented 9 years ago

looping in @dk-tbs

neoinsight commented 9 years ago

@pcwsmith Agree except that I think the current page should only be removed from the crumb trail on small screens. I know it's redundant because the page title is right below, but it IS the convention, and its the convention because it helps the non-web-savvy understand exactly what the point of the breadcrumb is. But on small screens, the price for that redundancy is too high. On large screens, there's no price.

neoinsight commented 9 years ago

@pcwsmith On further reflection, I notice that gov.uk leaves the current page off the crumb trail on all screen sizes. And they've done whacks of testing. I've never really seen it make any difference either way, so ignore my previous comment. I'll just go with 'Agree'.

neoinsight commented 7 years ago

Closing this issue - addressed in latest Content and IA spec

wet-boew / wet-boew-styleguide

Responsive breadcrumbs? #238