[Breadcrumb] Experimental design: Breadcrumb "home" segment label change

[mnorthuis]

Check the design system backlog and experimental design tab to see if your proposal has already been suggested.

What

Modification to the "home" link label in the standard breadcrumb from "Home" to "VA.gov home"

Why

Explain why you think this should be added to the VA.gov design system.

• Participants in early research on VAMC sites showed some confusion around where the "home" link in the breadcrumb would take them. The "home" link was confused with the health care system link in the breadcrumb. Because of this issue, the VAMC sites eliminated the "home" link from the breadcrumb, relying on the VA logo to return users to the home page of the site.
• The Vet Center mini sites added the "home" link back into the breadcrumb component, however they changed the language from "home" to "VA.gov home" so it would not be confused with the main Vet Center landing page.
• This issue is to formalize that this variation of the component is alread in production.
• The Facilities team is planning to gather some feedback on this change in an upcoming research effort.

Anything else

Next steps

You may present your work to the Design System Council at an upcoming meeting. If you do not or cannot attend the Design Council Meeting, you can opt to get an asynchronous approval.

Submit requests to join an upcoming Design System Council meeting in #vsp-design-system.

During the meeting, the Design System Council Working Group will evaluate the request and make a decision.

If your request is approved, you can add your component/pattern to the Experimental Design section of design.va.gov. If you have any questions on how to add your component/pattern to the Experimental section, please reach out to the Design System Team at #vsp-design-system.

[bkjohnson]

I'm just adding a bunch of context here for future discussion since this seems like an experimental use of an existing component rather than a proposal to create an experimental component. This seems like it could be accomplished by updating usage guidance based on the research results and then implementing that guidance across the site.

App code

In application code teams can already put "Va.gov home" as the first breadcrumb link if they want to - the "Home" text isn't hardcoded into the component. Here's an example with the react component:


And here's one with the new web component:


Here are some examples of teams using "Home" as the first item:

• vaos
• disability-benefits

Static content

In the content templates an update could be made here:

• src/site/includes/breadcrumbs.html

There's this other breadcrumbs template which is setting the text of the first item based on what's coming from the CMS. There's also an on override there which is how "VA.gov home" is getting added in the vet_center and vet_center_locations_list templates. There's not much to go off of in the original PR and its linked issue, but I don't think the customHomeCrumbText override would be necessary if content was updated.

[mnorthuis]

Oooo, I didn't think about new component vs variation of existing component. Could be good to discuss the right process if the experimental design process is not the right pathway.

My goal with this, was to document that there's a variation out there that the team is hoping to test. If that test goes well, discuss making this the standard and rolling it out across the site.

[caw310]

@mnorthuis , This is on the agenda for the DSC meeting tomorrow Feb 4.

[artsymartha68]

Is the current/proposed spelling "VA.gov home" or "Va.gov home"?

[mnorthuis]

@artsymartha68 will look for content to make the recommendation on that.

[artsymartha68]

Thanks @mnorthuis I have seen it both ways in this ticket so I was curious. I figured you'd be ON IT.

[bkjohnson]

I apologize for causing confusion - the current spelling is "VA.gov home".

[mnorthuis]

I believe it will be VA.gov, but the content team has enlightened me many times :-)

[artsymartha68]

We'll just need to make sure it sounds right read aloud. "V-A" instead of "vah".

[mnorthuis]

Exactly!

[caw310]

Action items from DSC meeting on 2/4

• Follow up on timing of study (Mikki)
• Make sure breadcrumb is read as VA.gov. 
• From engineering perspective, what ever solution, it should be a solution that is difficult to break so teams cannot change breadcrumb.

[humancompanion-usds]

@mnorthuis or @bkjohnson - We're trying to clean up our backlog of DSC requests. Can either of you update us on the status of this work? Thanks.

[mnorthuis]

The facilities test we were hoping to use to test this did not happen due to contract changes, and now is no longer planned. I will dig around to see if I can find either data to use for this, or if there's another usability test I can sneak a question into...

[humancompanion-usds]

@AndrewCoforma @PSIEBENLIST - Might we be able to incorporate this into our upcoming A/B Forms test? I'm fairly certain both designs have a breadcrumb back to home. We've been wanting to test this for some time.

[mnorthuis]

FWIW, we are moving in this direction on a few fronts and feel strongly this provides needed clarity in places where we have sort of mini experiences built into VA.gov (i.e. facility sites, MHV portal, etc). I will also look for additional opportunities to gain feedback in the MHV work.

[caw310]

Did this get tested?

[humancompanion-usds]

Mikki and I decided to go forth with this. It's already in place on Vet Center pages, and will be with MHV very soon. Thus I'd like us to update this in Figma and in the web-component.

[humancompanion-usds]

@caw310 - Please create a ticket for updating Breadcrumb home in Figma to VA.gov. Then let's use this ticket for the web-component update. Thanks!

[caw310]

Here is the ticket to update FIgma. https://github.com/department-of-veterans-affairs/vets-design-system-documentation/issues/2419

[caw310]

Hey team! Please add your planning poker estimate with Zenhub @Andrew565 @ataker @harshil1793 @it-harrison @jamigibbs @micahchiang @nickjg231 @powellkerry @rmessina1010 @rsmithadhoc

[caw310]

Moving this to sprint 48 as DST engineers are helping with CI issues on vets website. Will be a stretch so if someone has time in sprint 47, this will get picked up.

[jamigibbs]

Brooks mentioned in a comment above this:

In application code teams can already put "Va.gov home" as the first breadcrumb link if they want to - the "Home" text isn't hardcoded into the component.

So for the Design System Team, this update is just to add "VA.gov home" to our Storybook examples. I have a PR open here for that. But teams will still need to update their breadcrumbs implementations to use that label.

[mnorthuis]

"VA.gov home" should be the standard, not something that teams have to add. Ideally, in our benefit world, teams shouldn't be changing that text at all.

[jamigibbs]

Hi @mnorthuis I apologize I should have articulated further the complication by programmatically forcing that label.

I think the key issue is that we have concerns that the breadcrumb component could be used in two scenarios where we would not want to force this label:

1. a situation where the first link is not going back to the root of VA.gov
2. the component is not being used on VA.gov at all

An example of the first scenario in the secure messaging app:

I'm not sure the reason why this team is needing to use va-breadcrumbs in this way but it does exist at the moment.

cc @humancompanion-usds

[mnorthuis]

The secure messaging team shouldn't be using the breadcrumb component IMHO, they are working with a more customized back link or an experimental version of a smart breadcrumb.

Either way, I would assume that someone can choose to override it if it doesn't make sense, but in reality the first segment should always be VA.gov home and we should be working towards that consistency.

The other place that "home" is not used as the first link is in the facility experience, but this change is also being recommended in order to fix the reason they don't use it. So once this is in place, they will be able to move to the standard component.

[jamigibbs]

Thanks @mnorthuis. We have made "VA.gov home" default for the first label inside the component itself with the ability to override it using the prop home-veterans-affairs (boolean). Where teams need to override the default behavior, that can set that prop to false.

https://design.va.gov/storybook/?path=/docs/uswds-va-breadcrumbs--default