Replace Start over and Back to search buttons with page breadcrumbs

[ggeisler]

Part of #2314.

The Start over and Back to search buttons are fairly dominant, visually, on Blacklight pages. At Stanford we've often modified or eliminated them in our Blacklight-based apps. Furthermore, they don't provide the user with very clear orientation about where in the application they currently are:

Breadcrumbs can serve both purposes. Here's a mockup of a Blacklight search results page that replaces the Start over and Back to search buttons with breadcrumbs. The "Home" link effectively replaces the "Start over" button and the unlinked "Search results" portion tells the user where they currently are:

Here's a mockup of an item show page, where the "Home" link replaces the "Start over" button, the "Search results" link replaces the "Back to search" button, and the "Ghostly lighthouses.." portion tells the user where they currently are:

---

The home page doesn't need breadcrumbs. They might be good to add to the Bookmarks and History pages, for consistency, even though those pages don't use the Start over or Back to search buttons. I can create mockups for those pages if and when we decide to make this change.

[jcoyne]

I'm absolutely in favor of removing the "start over button". There is a convention in most sites that you can click the site icon in the top bar to start over or you can use the back button in your browser. This is not a feature that other search engines like amazon or google feel compelled to offer.

That said, I'm not a fan of breadcrumbs in this case. I think we have too many headers stacked up here. In this new design it's 4-5 layers of headers before we get to the content. I think modern web users can recognize a page of search results without being told that is what is here.

Bon Appetit, has a design pretty similar to blacklight but they have a simple "Clear All" link with a lot less weight than our button:

Another great feature is that this row doesn't appear until you select a filter, unlike Blacklight, where the search text appears as one of the filters to be removed. This is an unnecessary duplication of what is already visible in the search input field.

[ggeisler]

That said, I'm not a fan of breadcrumbs in this case. I think we have too many headers stacked up here. In this new design it's 4-5 layers of headers before we get to the content.

The new design adds one, relatively small height and visually clean, layer, the breadcrumb row.

Another great feature is that this row doesn't appear until you select a filter, unlike Blacklight, where the search text appears as one of the filters to be removed. This is an unnecessary duplication of what is already visible in the search input field.

Omitting display of search text as a visible filter seems like a separate decision. But if that decision was made the proposed design would work fine with it:

[jcoyne]

What does it look like on mobile? Should that breadcrumb still display? I've seen a few mobile apps use abbreviated breadcrumbs rather than the full page version. Is that something you've considered?

[ggeisler]

Yes, the breadcrumbs should display on mobile.

The breadcrumbs get a full-width row so you would need a long breadcrumb on the narrowest mobile viewport for your concern to be relevant, such as a show page or in an app like Spotlight a third-level page with a long title (Home > Browse > A long browse page title). Even then, it would very rarely be a problem if we truncate the third-level title. The breadcrumbs proposal here is exactly what we've been doing in Spotlight for years, so to see examples at mobile viewports just look through some of the exhibits at https://exhibits.stanford.edu

Also, the companion ticket to this, while focused on reorganizing the show page tools, includes mobile mockups of Blacklight that include breadcrumbs: #2316

For the rare case when a breadcrumb doesn't fit in one row in a mobile viewport, I'd just let it wrap, especially given this is somewhat of an edge case. A second breadcrumb line adds very little height to the viewport and enables the user to see the complete information. In addition, if an app has more than three levels of breadcrumbs, we could truncate the fourth-level as we currently do for show page titles in Spotlight to reduce chances of the breadcrumb row exceeding the viewport width.

I don't see how abbreviating "Home" or "Search results" would be preferable to that (and if you omit entirely a middle level like "Search results" you remove the opportunity for the user to use the breadcrumb to navigate to that page), but maybe you can provide some links to examples of abbreviated breadcrumbs so we can better understand the approach you're referring to.

[jcoyne]

This article points out a number of concerns I have: https://www.nngroup.com/articles/breadcrumbs/

1. we're duplicating the Home link in the breadcrumb and in the global nav immediately above it.
2. we only have 2 levels of hierarchy, I don't think there's much evidence that our users have trouble wayfinding without breadcumbs
3. Using up too much real-estate, especially on mobile. (They provide a good example of abbreviating)
4. This provides no guidance to someone who links in from an external page (not from a search they ran). "search results" is not a point in our IA hierarchy, it's unique to the users session.

[mejackreed]

Chiming in here with some additional background. We have implemented some sort of breadcrumb in two upstream Blacklight projects, ArcLight and Spotlight. Part of the reasoning of this work is technical consolidation now that we have multiple implementations and patterns. We would consider this path technical path here via configuration. Hopefully this would allow adopters and plugins and to opt in to this behavior and configure if for their own use.

[jvine]

Responding to some comments out of order:

This provides no guidance to someone who links in from an external page (not from a search they ran). "search results" is not a point in our IA hierarchy, it's unique to the users session.

It's true that "search results" is not part of the information architecture. It is a step in the pathway the user took to this item, and a breadcrumb is one means of exposing that pathway. The current "Start over" and "Back to results" buttons are related navigation elements and should IMO be visually represented as links, not as buttons.

A direct link to an item show page would not be expected to include "Search results" in the breadcrumb (except for the issue where Blacklight hangs on to the previous search context and attaches it to any directly-linked item - which is a problem that exists regardless of the affordance).

There is a convention in most sites that you can click the site icon in the top bar to start over or you can use the back button in your browser. This is not a feature that other search engines like amazon or google feel compelled to offer.

Despite this convention, some subset of users never discovers that clicking a branding element in the banner goes "home". And unlike Google, our library search environments rarely exist without the context of an organization, and relationships to other properties. We intend to add breadcrumbs to SearchWorks to help distinguish navigation from search manipulation, and catalog from articles+.

[cdmo]

I can't imagine that we'd want breadcrumbs for our catalog application fwiw. I think for our use case it would just add noise in an already crowded interface. At it's core Blackight is a search application for one search (Advanced search isn't even part of the core). We add a lot of stuff downstream and I could see some of the complications we add justifying breadcrumbs, but I just have a hard time seeing the value in breadcrumbs add at the core level of Blacklight. Just an idea: could this be something supplied by a separate gem?

[awead]

I prefer the breadcrumbs to the "Start Over" button. I don't know yet if we're going to use them in our upcoming Scholarsphere 4 application, and I'm not sure if we'd use Blacklight's breadcrumbs if they were provided. This is mainly because, in our case, we're only using Blacklight for the search part of the application. In any case, I 👍 the motion because it looks better.

[claireademarco]

Adding some screen shots of our BL customizations regarding the "start over" button on search results and the use of breadcrumbs on the pages related to "my account." As well as an item detail page from one of our Spotlight exhibits: