Open joshkimux opened 1 year ago
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:
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.
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.
Thank you, @joshkimux, the additional context definitely helps. I'm going to check out the links you shared.
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:
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.
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.
Bug Report
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):
space
key works for buttons, but not for links. Should users associate thespace
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 thespace
key only to jump down the pagehttps://user-images.githubusercontent.com/14154792/211613479-927e6bc2-b853-45c6-9f2a-f538e0467fb6.mov
What I expected to happen
This isn't a major issue that requires prioritization. Rather, I'm documenting this ticket for the following pain points:
I think the gut response to those points is to dismiss material honesty as irrelevant, but it's important to note that:
Ideally we could...
Urgency
How urgent is this request? Please select the approriate option below and/or provide details
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.