Right arrow chevrons are inconsistently used

[joshkimux]

Bug Report

• [x] I’ve searched for any related issues and avoided creating a duplicate issue.

What happened

Right arrow chevrons are inconsistently used, which may impact material honesty

Right arrow chevrons are most commonly associated with links which navigate users to another page on VA.gov. See the following examples below:

This is generally consistent with many websites as well and is a good use of the icon to indicate direction.

Some components in the header use the right arrow chevron as a button as opposed to a link

However, the Veterans Crisis Line and responsive navigation use right arrow chevrons for buttons.

Due to the break in consistency, we encounter an issue related to material honesty. Namely, in the following scenarios where a user may mistake a button for a link (since it's using a right arrow chevron, see screenshots below):

• A user anticipating to be able to open what appears to be a link in a new tab
• A screen reader user receiving instructions from a family member or caregiver over the phone may not be able to find a "Veterans Crisis Line link" as it won't appear in their links list; compare this with if it didn't have a right arrow chevron, it may be more likely to be described as a button or not as a link.
• Keyboard controls may lead to confusion across the website. The space key works for buttons, but not for links. Should users associate the space key as working with items with the right arrow chevron (in the navigation), they may match that interaction pattern with other components that also use the right arrow chevron which will result in a page jump. Alternatively, if they misinterpret the items in the navigation that lack underlines as buttons, they may attempt to activate those using the space key only to jump down the page

https://user-images.githubusercontent.com/14154792/211613479-927e6bc2-b853-45c6-9f2a-f538e0467fb6.mov

What I expected to happen

This is a minor issue that lacks evidence from usability testing.

This isn't a major issue that requires prioritization. Rather, I'm documenting this ticket for the following pain points:

• We've never tested the responsive navigation or the VCL specifically for assistive technology users. Thus, while there isn't any evidence to prove this is an issue at all, we also haven't had the resources/time to put in the honest work to stress test it appropriately (arguably many of these scenarios are incredibly difficult to even test in a moderated session to begin with)
• We commonly experience friction in the collab cycle due to confusion over rules around consistency

I think the gut response to those points is to dismiss material honesty as irrelevant, but it's important to note that:

• As a general design tenet, material honesty reduces complexity over time
• Material honesty improves accessibility and usability, namely for voice recognition controls and other assistive technology
• Material honesty results in lighter and less complex code (consider the amount of utility classes needed to style the above components and force hidden underlines)
• Material honesty results in more consistent implementation, which leads to easier maintenance

Ideally we could...

• Have a design rule on when to / when not to use right arrow chevrons; this won't fix the issue immediately, but could (over time) create consistency in the experience and reduce visual clutter
• Possibly start by testing that rule within the header itself, which is universal on all pages

Urgency

How urgent is this request? Please select the approriate option below and/or provide details

• [ ] This bug is blocking work currently in progress
• [ ] This bug is affecting work currently in progress but we have a workaround
• [ ] This bug is blocking work planned within the next few sprints
• [x] This bug is not blocking any work
• [ ] Other

Details

This is heavily edited thanks to @GnatalieH 's feedback. I hope this ticket is a bit more explanatory with more helpful context as a result.

[GnatalieH]

I am wondering if this is an issue that user testing has uncovered, if Veterans are indeed struggling with this mobile header/nav. Because to me the metaphors are consistent:

• A down chevron in the the US Banner component reveals more content below. This is consistent with how we use the chevron in expandable components like Additional info and Alert - expandable.
• +/- icons are used in the mobile nav for sections that have sub-sections. We don't use these icons for the sections that do not have sub-sections. +/- is a common UI pattern that I believe users can easily recognize. It's also consistent with our Accordion interaction.
• It would look more confusing IMO to use a downward chevron (instead of +/- for the parent sections) in conjunction with right-facing chevrons (for the sub-sections) in the mobile nav.
• Right-facing chevrons in Active links and in sub-sections in the mobile nav always go to another view. The metaphor is consistent. I realize the sub-sections interaction is different in that it is more of a drill-down, but there are a lot of links to organize in the mega-menu, and expanding downward to reveal a third level would create a lot of scrolling and push nav items below the fold in the mobile viewport.

If user testing has revealed confusion about how to navigate our mobile header and nav, then we should pursue this. But I personally don't see any metaphor sheering happening with our chevrons. Just my $.02. Please correct me if I'm missing any points.

[joshkimux]

Thank you @GnatalieH for this thoughtful response. I want to apologize for writing a rushed bug ticket without much helpful context; reading back on the original ticket, it was largely unhelpful and didn't address any of the points you brought up.

To give some context, this emerged from a conversation around material honesty specifically around links and buttons, which this ticket danced around but never properly addressed.

I've updated the ticket to include a little more context. Please let me know if it's helpful and addresses your points. I agree on your points related to the +/- icons and downward chevrons; so I've reduced the scope to just right arrow chevrons.

Right-facing chevrons in Active links and in sub-sections in the mobile nav always go to another view. The metaphor is consistent. I realize the sub-sections interaction is different in that it is more of a drill-down, but there are a lot of links to organize in the mega-menu, and expanding downward to reveal a third level would create a lot of scrolling and push nav items below the fold in the mobile viewport.

Is there a possibility we could explore a more materially honest pattern similar to gov.uk for the mobile menu?. They've conducted research on it, and seems to be much more simple and robust than our current menu.

[GnatalieH]

Thank you, @joshkimux, the additional context definitely helps. I'm going to check out the links you shared.

[humancompanion-usds]

My take on this is that the crux of this issue is:

the Veterans Crisis Line and responsive navigation use right arrow chevrons for buttons.

There are two considerations here:

1. How to get these 2 components fixed.
2. What guidance should the Design System provide.

Get these 2 components to not use chevrons

Neither of those components are in the Design System. That might explain why they are aberrant. The most expedient way to get those fixed is to file individual bugs against those components in vets-website and get those components to drop the chevrons. I'm happy to chime in and support this effort.

While the header is coming into the Design System, it is doing so slowly.

Guidance Design System should provide

We could, and probably should, add guidance around use of icons as it relates to buttons and links on the icons page. However, there is some guidance in place already:

In Buttons:

Arrows are reserved. Arrow icons should only appear for “Back” and “Continue” buttons that appear in forms.

So if you need something in the DS to cite in those issues I'd point to that.