Breadcrumbs

[davidhunter08]

Use this issue to discuss the breadcrumbs in the NHS digital service manual

[bencullimore]

What

Breadcrumbs are an important navigational element that supports wayfinding — making users aware of their current location within the hierarchical structure of a website. Breadcrumbs are a list of links representing the current page and its “ancestors” (parent page, grandparent page, and so on), typically going all the way back to the site homepage. https://www.nngroup.com/articles/breadcrumbs/

Why (problems with the current breadcrumbs)

We (information architecture team on the NHS website) found that the current iteration of breadcrumbs (https://service-manual.nhs.uk/design-system/components/breadcrumbs) in the white banner to be too detached from the page it relates to, especially in the context of; cookie banner, main nav banner, emergency banner, breadcrumb banner - 3 of these don't relate directly to the page, one does. There's a risk that users will experience 'banner blindness (https://www.nngroup.com/articles/banner-blindness-old-and-new-findings/)' and ignore one or all banners completely.

As breadcrumbs support wayfinding and making users aware of their current location (within the website)- they're difficult to test for effectiveness via traditional means. Clicks don't equal success - a user might not click them but a quick glance might help them understand where they are, where they can go.

Proposed solution

We've tested the current breadcrumb component in our first 2 usability labs and noted little to no usage or users noting their presence (again, it's hard to quantify their effectiveness).

We iterated the breadcrumb to support a wider IA navigational system, removing the white banner and bringing the breadcrumb link closer to the page heading, which it relates to, giving the heading context of where it sits within the site.

Research findings

Lab 4 analysis - People learn how the navigation system works and learn to trust it. They are confident to go back to options (hubs, A-Z) they trust to lead them to the next piece of information (whether by using the back button or breadcrumbs or top nav).

Confident using breadcrumbs. - P1

User 1: Successfully used the health a to z and pregnancy items in top nav as well as using the breadcrumb to go back.

Lab 5 analysis: We saw people successfully navigate using Breadcrumbsadad P1: General: scrolls through the page, then back up and reads breadcrumbs, select cancer [correct route] P6: CC1A: "This (the breadcrumb) is always handy, to go backwards and forwards about it." P2: CC2 Man: "You can click that arrow to get back." P3: Cancer (breadcrumbs) "went back to cancer" > reducing the risk of cancer > click straight through to the mcmillan website P3: Heart attack (breadcrumbs) > symptoms > shortness of breath P6: CC1A: "This (the breadcrumb) is always handy, to go backwards and forwards about it."

Lab 7 analysis: People were easily able to navigate and move around the hub. People were using breadcrumbs and sibling nav to move to different levels of hubs and go back to pages they had seen previously.

[RoseMunro]

Findings from Lab 1, Pregnancy and Baby Hub, MT2

Remote interviews, Oct 2020

Tested with 8 participants, 5 on desktop/laptop, 1 on tablet, 2 on mobile

Participants on desktop/laptop tended to use both breadcrumbs and the back button to navigate backwards. Mobile users ignored the breadcrumbs and stuck with the back button.

Because the breadcrumbs were used so frequently by desktop users this raised questions for us about linking to article pages from two locations – i.e. if someone clicks the breadcrumbs to get back to the page they were on and then gets lost as it may not necessarily be the page they were expecting. We intend to explore this further in testing.

[cameronross2]

Insights from a visually impaired user from usability testing

During testing on a Conditions page for Chickenpox, a user research participant noted that they expected the breadcrumb on the page to include the current page name (even though this is in the H1). The user was an expert user of screen reader software NVDA and was completely blind.

Tested breadcrumb: Home > Health A-Z

Expectation: Home > Health A-Z > Chickenpox

"What I would add in that breadcrumb is the section that I've gone into. Chickenpox [the page H1], keep that there, but after Health A-Z, put 'Chickenpox', not as a link but as standard text. If you imagine it [the breadcrumb] as a hierarchy, I've gone from Home to A-Z to Chickenpox. That's the one I'm looking at."

The Digital Scotland design system does include the current page in the breadcrumb, styled as text (although there is no specific research supporting this). https://designsystem.gov.scot/components/breadcrumbs/

[davidhunter08]

Reported issue in the frontend for the SVG icon not scaling when you increase the font size

[bencullimore]

Great insight @cameronross2 - thanks for sharing.

The rationale for removing the page you're on from the breadcrumbs was an exercise in reduction.

We know our content is the most important thing and we're mindful of not creating barriers or slowing down users from getting the content they need - especially users with actual/situational impairments.

A lot of our page headings are really long (for example https://www.nhs.uk/conditions/coronavirus-covid-19/social-distancing/) so by including it in the breadcrumb, in some cases you're essentially repeating a sentence in close proximity

Social distancing and changes to everyday life Social distancing and changes to everyday life

The result being an increase in cognitive and also audible (screen reader) load. This repetition coupled with a user making an info seeking journey through a number of pages can become quite tiresome.

Also taking into account the websites header - cookie banner and for the past year, the emergency banner - there's a lot for users to wade through before they reach the content.

NNGroup refers to the breadcrumb as One line of text shows a page's location in the site hierarchy.

The information architecture team ran an experiment; our hypothesis being - by moving the page heading closer to the breadcrumb, removing the repetition of the current page (from the breadcrumb) and visually making them look related, then from the heading they'll know where they are, in which area of the website (from the breadcrumb) and means to navigate 'up' (breadcrumb links).

We found in usability labs is that users understood what the page of information was about from the heading - and saw users either referring to or using the breadcrumbs to explore the wider topic area, navigate up. So heading + breadcrumbs meeting NNGroups definition of knowing the location and hierarchy of the page.

So far, we've tested the IA (inc. breadcrumbs) with over 88 people who've identified as having access needs - including users who require accessible technology (over 100 in total). The templates and components (including the breadcrumbs) have been peer-reviewed by accessible website specialists.

I see the Digital Scotland component you shared has a variant of the breadcrumb to remove the current page "where there may be issues with repetition or page titles are too long" - they have a similar problem to what I've described.

Through our many hours of user testing, we found consistency to be key in employing a successful information architecture sitewide. Inconsistent design patterns or components causes a user to be disorientated and leave the website. I'd argue Scot GOV's inconsistent application of breadcrumbs would cause more issues.

Hope this helps, sorry it's a long-winded explanation! Again, thanks again for sharing your findings, it's really helpful to hear any user insight.

[Asad-acc]

The experience for users navigating profiles on the NHS UK website is quite jarring. The leave a review page provides an entirely different navigation for users compared to the other links on the profile, as it's a transactional journey. Removing the breadcrumbs and the altered heading provides a different, more inconsistent experience to other links on profile pages. We assume this altered appearance and structure will confuse users and provide a lesser experience. It would make sense to keep the same heading and breadcrumbs for the "Leave a review" journey for consistency with other links; however, this would differ from the guidance in the service manual.

Additionally, without the breadcrumbs on the "Leave a review" page, it isn’t clear how you can return to the parent profile. The text next to the NHS logo currently takes you back to the profile page you’ve come from, but the title “Leave a review” doesn’t convey this. The service manual states that the service name should be listed in this space. This isn’t applicable in this situation.

The service manual also needs to be updated with the updated styling of the breadcrumbs (without the white background) and accompanying guidance.

[Tosin-Balogun]

Problem with breadcrumb update on the NHS design system

What

Since the NHS website updated its breadcrumb from white background to grey, all spacing around the breadcrumb and elements within its proximity has been removed.

This has been implemented in the service manual design system in the same way.

Issue

Because of the update, it means that any other interactive element closer to the top of the page is in collision with the breadcrumb.

The first example of this collision can be seen in the service manual itself where interactive links on the left hand is in collision with the breadcrumb

Service implications

There's many NHS service teams using and relying on the service manual design system and this has varying degree of impact for them, especially those services where the users are administrative.

Examples of services using the service manual design system

• NHSUK
• NHS App
• Screening technology
• NHS Jobs
• +More

Looking through user posts on the service manual slack channel shows the user group is wider than the list above

One of the contribution criteria for the service manual is:

Versatile The implementation is versatile enough to be used in a range of different services. For example, a versatile date input component could be set up to ask for:a year onlya month and year onlya precise dateany other combination The component or pattern has been tested and works with a range of browsers, assistive technologies and devices.

For context

We used to have padding at the onset of the page H1 to express where the content on the page began. I have included screenshot from other NHS products who still use the old breadcrumb for comparison + one from GOV (who we borrowed it from)

[Tosin-Balogun]

RE: Breadcrumb updates

I think this article has some considerations worth reading

Then a while later she relapsed and had to be given a very strong chemo treatment medicine. This medicine is so strong and so toxic that it requires pre-hydration and post-hydration for three days with I.V. fluid. However, after the medicine was administered, three nurses were attending to the charting software to enter in everything required of them and make the appropriate orders, missed a very critical piece of information. Jenny was supposed to be given 3 days of I.V. hydration. But the three nurses, with over 10 years experience, were too distracted trying to figure out the software they were using, they completely missed it.

https://medium.com/tragic-design/how-bad-ux-killed-jenny-ef915419879e#.q7s3u3eko

[bencullimore]

Hey @Tosin-Balogun - for historical context...

the breadcrumb update was an answer to a problem around low breadcrumb usage on the NHS website - the IA team dug into the issue during numerous user testing sessions and found, when users wanting to re-orient themselves in a space (move up a level) they couldn't. The hypothesis we tested (and proved) was the breadcrumbs being visually separate, in a white box resulted in them being missed/not associated with the context on the page.

So we took them out of the white box and moved them closer to the content (h1 heading) - and this proved to be successful in not only helping users orient themselves (knowing what section the page was in) but also allowing them to navigate away from the content to more relevant/more content, thus facilitating health information seeking journeys.

Now, the issue you're describing looks to be related to the context of use. The problem we were solving was on the NHS website and it was to support 'health information seeking' behaviours... the service manual is a completely different context with different users, different screen sizes, different navigation components and different information seeking behaviours.

Prior to leaving the NHS 😢, I was trying to champion 'NHS Website specific components' - components which made sense in the context of a health information website but not in every context... the universal component being the text size, colour, chevron element and the context specific variation being the placement (aligned with content on the NHS website, detached in a white box elsewhere)

Rather then reinventing the wheel and ditching lots of development/testing/implementation/user research time (and potentially breaking the NHS website navigation) - I'd recommend reinvestigating the specific context components vs universal components debate.

All the best!

[Tosin-Balogun]

Versatility issue example

On the recent Start for life rebrand, there are series of tabs located above the H1

current

if new breadcrumb implementation was used

If the current breadcrumb was added to it out of the box, it means there would be collision between the tabs and the breadcrumb

[mnorri-nhsd]

Thanks for this detailed analysis @Tosin-Balogun . As discussed with @sarawilcox and @pflynny, we’ve decided in the near-term at least to retain the existing breadcrumb page and component detail in the service manual, because:

1. As described above, the existing component has been proven to meet user need
2. We don’t have enough evidence to change the existing component or add alternative breadcrumb options to the NHS design system breadcrumb page, creating potential confusion over which option best meets user need
3. This feels part of the NHS.UK specific component repo problem framing work currently in progress
4. As detailed in this issue, there are alternatives to the NHS service manual that can inform decision making on how the breadcrumb can be styled to best meet user need, including:

• https://design-system.service.gov.uk/components/breadcrumbs/
• https://designsystem.gov.scot/components/breadcrumbs

[Tosin-Balogun]

Thanks for update @mnorri-nhsd

Happy for us to leave the new breadcrumb update based on the considerations you listed

It would be good when this is reconsidered to look at the service manual rules of adding new components to the design system, seen here https://service-manual.nhs.uk/community-and-contribution/contribution-criteria

Out of the box, the new breadcrumb does not meet this contribution criteria

Versatile The implementation is versatile enough to be used in a range of different services. For example, a versatile date input component could be set up to ask for:a year onlya month and year onlya precise dateany other combination The component or pattern has been tested and works with a range of browsers, assistive technologies and devices.

Part of that process also includes the design system working group reaching a consensus if the component meets the criteria listed in the contribution process.

It would be good to see the considerations the working group had.

The new breadcrumb component meets user needs for people using the NHS website, but there are other users across other NHS services, here's some examples below

• https://www.digitalregulations.innovation.nhs.uk/adopters-guidance/
• https://bridgewater.nhs.uk/ourservices/
• https://data.standards.nhs.uk/future-standards
• https://www.nhs.uk/start-for-life/pregnancy/week-by-week-guide-to-pregnancy/
• https://faq.nhsbsa.nhs.uk/knowledgebase/category/?articlecategory=Applicant&id=CAT-04838&parentid=
• https://learninghub.nhs.uk/
• More...

[Asad-acc]

Issue Title:

Redesigning Breadcrumb Component for NHS.uk Profiles

Issue Description:

The Profiles team is conducting an in-depth analysis of site analytics to gain insights into user navigation within profiles. A hub-style approach has been adopted for NHS.uk profiles, currently undergoing user testing. During this redesign, we have encountered challenges with the existing breadcrumb component, necessitating adaptations to align with the unique requirements of profiles. The objective is to gather empirical evidence through user research, subsequently subjecting the changes to live trials on the site. A collective organisational decision will determine whether these modifications should be integrated into the service manual for seamless adoption by other teams.

Summary:

After a thorough evaluation of the current breadcrumb pattern, the following issues and user behaviours have been identified:

1. Users display minimal engagement with breadcrumbs for navigation or orientation when viewing profiles.
2. The structure of profile pages necessitates numerous breadcrumb links, potentially increasing cognitive load for users.
3. Users tend to associate the 'home' link at the outset of the breadcrumbs with the 'profile home', rather than the NHS homepage.
4. Variations in breadcrumb designs and behaviours across different product teams within a single user journey can be disorienting for users.
5. On mobile devices, users lack clear indication that additional pages are available for viewing within a profile. The NHS breadcrumbs only display a single link to the parent page. Consequently, users may experience ambiguity regarding whether "Treatments and services" pertains to those of a pharmacy or GP practice, or those of the NHS website.

Current Behaviour:

The existing breadcrumb behaviour caters primarily to desktop users. On mobile, the breadcrumb adapts to display only a single link, which proves inadequate for pages like profiles, housing numerous child pages.

Proposed Behaviour:

We are piloting the implementation of collapsible Gov-style breadcrumbs on profiles to evaluate its clarity for users. This entails a potential shift in functionality and design to enhance orientation and navigation within profiles. The collapsible feature ensures visibility of all breadcrumbs on both mobile and desktop platforms, furnishing users with contextual information about their location within the NHS website.

Usability Findings:

We have found that users can effectively navigate the collapsed breadcrumbs. However, it has come to our attention that users find the 'Home' link and 'NHS services' potentially confusing. Some users click on them, assuming they are part of the profile, which inadvertently leads them away from the intended experience, removing all breadcrumb navigation options. To address this, we are now incorporating specific questions regarding the 'Home' and 'NHS services' links within the breadcrumbs to ascertain if they provide tangible value to users accessing profiles.

Testing:

Numerous usability sessions have been conducted, with ongoing sessions planned for further iteration. Initial feedback has been affirmative, indicating active usage of breadcrumbs for profile navigation.

Affected Component:

The proposed modification is envisaged as an optional implementation for designers and developers. It is not intended to serve as a direct replacement or successor to the existing breadcrumbs component, but rather as a supplementary option that can be integrated using helper classes.