Header Design feedback

[MichellanneLi]

This doesn't map to a specific WCAG criteria, but I believe that tweaking the design of the header will make it feel less dense and easier to understand at a glance. This will be helpful to users with cognitive disabilities while also presenting a more polished interface. Here are my recommendations:

• Increase top and bottom padding of header

• Increase vertical spacing between content within header, including dropdown. This make it easier to digest the content at a glance and also improve users' ability to tap on the intended target in mobile.

• I'm not sure that the tagline is necessary, but if you keep it, then I suggest moving it closer to the logo to cement the visual association. Right now, it feels as though it's floating.

• The use of a border to the left of the tagline and the second item in the meta nav is confusing because, at some screen sizes, it appears that the borders are actually group the tagline with the first meta nav item. (See Screenshot.) I like the border on the tagline, but why don't we use a middle dot (·) to separate meta nav items instead? Middle dots have been used as text dividers for hundreds of years, so they are a typographic choice with greater precedent.

• I suggest adjusting the breakpoints so that the meta nav and search wrap to a second line when the window is smaller than ~ 1300 px. Right now, the nav appears pretty squished at ~ 950 px and just feels really difficult to read. (See Screenshot.)

• Increase the left and right padding of the header in mobile to match that of the content below.

• In mobile, the meta nav becomes visually lost. I suggest left aligning the text.

• I realize there aren't guidelines around this, but I feel it would be difficult for users to tap on the meta nav links and/or the search field in mobile. Increasing vertical spacing will help with that, but why not also place each meta nav item on its own line and make the search field full width?

[yatil]

Hi @MichellanneLi! Thanks for your suggestions. A lot of what you are describing is on our roadmap for implementation before we go “live” with the site. (We had a Face-2-Face meeting last week where we brainstormed those.) Specifically, we were looking into spacing, increasing tab targets, and the navigation mechanism as a whole. Good to see thoughts aligning so nicely, it means we’re on the right track, I think :-)

[MichellanneLi]

@yatil Don't you just love it when that happens? Looking forward to seeing the live site.

[yatil]

Most of the points should be addressed with #34.

In mobile, the meta nav becomes visually lost. I suggest left aligning the text.

I agree, this needs to be better designed.

The use of a border to the left of the tagline and the second item in the meta nav is confusing because, at some screen sizes, it appears that the borders are actually group the tagline with the first meta nav item. (See Screenshot.) I like the border on the tagline, but why don't we use a middle dot (·) to separate meta nav items instead? Middle dots have been used as text dividers for hundreds of years, so they are a typographic choice with greater precedent.

I like that idea. I wonder what your perspective is, @slhenry.

I realize there aren't guidelines around this, but I feel it would be difficult for users to tap on the meta nav links and/or the search field in mobile. Increasing vertical spacing will help with that, but why not also place each meta nav item on its own line and make the search field full width?

I thinkered with that, but it made the main menu drop further down the page. It’s one of those things that seem easy in theory but hard to do right in practice. Another idea would be to have “about wai” and “get involved” underneath the menu on mobile, but I wonder if that’s too much of a change.

Thanks again, @MichellanneLi, for your feedback!

[MichellanneLi]

@yatil Thanks so much for following up on this feedback! I see your point about the meta nav items in mobile. That's a tricky situation, and I'm curious to see how you resolve it (since it comes up in my own work frequently, and I have yet to find a perfect solution.)

[shawna-slh]

+1 to closing this issue now that we've moved away from the drop-down/fly-out menu.

[yatil]

@slhenry Mind replying to the open part of the issue as highlighted in the comment above?

[shawna-slh]

I think we don't want to introduce another design element (middle dot). Since we're using separator lines elsewhere, I think best to use them there, too.

OK if they're close in some views. (and yatil says he'll make the tagline disappear sooner :-)