Cleanup Header

[ericholscher]

This does a few things:

• Removes the Help menu from the header, since those links are all in the footer, and link off site
• Adds the Sign up button to the header, so it's available on every page
• Makes Signup the most visual button, since that's what we most want
• Gives random pages proper titles where they were missing
• Adds the Learn more in the Signup dropdown back, linking to the choosing page

Screenshot

[agjohnson]

Removes the Help menu from the header

This menu was kept here so that the application header and the website header were near identical. The plan has been to keep the header and the footer synced between the application and the website, so we have tried to keep the application in mind while structuring the website. I didn't yet port in the changes to reduce this item to an icon dropdown menu, but that would be a good change.

I would instead keep the help menu, but convert it to an icon button like in the application:

https://github.com/readthedocs/ext-theme/blob/main/readthedocsext/theme/templates/includes/header.html#L104-L106

This would preserve the structure and not make the headers competing. With this reduced to an icon menu, and the "Sign up" button a text link, there should be plenty of room in the header.

Eventually, this was going to be a menu in both the application and website, instead of just directly linking to the support page. I think it's helpful either way though. Other similar sites have various "Contact us" menus in the header, so this tracks:

Adds the Sign up button to the header, so it's available on every page Makes Signup the most visual button, since that's what we most want

I would copy the element structure from the application, so that the headers are identical:

https://beta.readthedocs.org/accounts/login/

I prefer the text link for the sign in button, instead of competing buttons. There is also already a primary button for sign up above the fold on the front page, so I wouldn't use a primary button in the header too -- it pulls away attention on all the other pages.

Adds the Learn more in the Signup dropdown back, linking to the choosing page

The mobile menu is a bit cluttered because of this I think:

At very least, we don't need the URLs on the second set of links, this is very redundant. Ideally, there shouldn't be competing links for log in and sign up though.

[ericholscher]

@agjohnson I pushed up the changes in the top nav:

I still don't love that the support page full takes you off the marketing website. I feel like it's really weird to have things in the header that are external links..

Overall I like this better (Signup goes to the modal, and having the login be more subtle).

I wasn't sure if you were asking for a Company/Contact us link in the header? I agree it could be good to link to the Company page there, as it feels pretty small to only have 2 links. I really dislike the pattern of external links there though, it feels like really bad UX.

[agjohnson]

I do want to do something more with the support dropdown as we go, it should be a collection of support resources. And I would like to move resources that make more sense as marketing content to our website.

But, I think linking out for support resources is totally fine UX here. If a user is looking for support or help, they are not going to be interested in reading our marketing copy. This is a dead end of sorts for our funnel anyways, so serving the user's needs here works better for both of us really.

I wasn't sure if you were asking for a Company/Contact us link in the header?

Ah no, just was poking around other sites and most similar sites have support/contact resources fairly prominent on their web pages.

[ericholscher]

@agjohnson Cool, should be ready for another review. I made it so:

• The ? button does the existing dropdown on desktop
• There's still a Help menu on mobile

Which I think makes the most sense. Though TBH I don't see many people engaging with the menu on mobile.

[agjohnson]

The structure here is still using a dropdown menu item, so looks a bit janky, like it's a button in a button:

It looks like there are some extra elements and classes added

[agjohnson]

A couple more tweaks for the mobile and tablet menu:

• The "Learn more" should maybe not have a divider above it at least, it's not clear what that link does. Grouping it with the other options might help? I think it's just an odd menu item though.
• The signup link in the mobile menu shouldn't be a button

Also there is a stray "-" in the login menu:

[ericholscher]

@agjohnson I fixed the stray -, but everything else feels very nitpicky? If you want to clean up the way you'd like it, that would be much quicker on my side, versus going back and forth on small UI changes. In particular the Learn more bit is the same between desktop & mobile, and splitting it out seems more annoying than having the divider? 🤷

[agjohnson]

@agjohnson I fixed the stray -, but everything else feels very nitpicky?

I get that this work is fiddly, but I'm not just picking things to change. The styles and patterns used in the navigation UI took time to establish and polish and I'm showing where we've regressed.

Being fluid around content changes on the site is far easier, especially copy and content, and I want be able to iterate quickly there.

But structural UI like this does need some patience and I probably would suggest planning and discussing changes beforehand in the future. This UI in particular had design constraints that we already worked through around content width, viewport width, and reuse of all of these patterns in the application UI. Planning up front is a good chance to discuss this, and figure out exactly what is changing and why.

If you want to clean up

I'm always happy to jump in or answer questions. I definitely don't expect everyone to know how to fix or polish up all these UI issues. But I will tell folks to let me know when they need to tap out or need some help.

[agjohnson]

With some of the changes to the menus:

Screencast from 2023-08-08 17-29-47.webm

[ericholscher]

I like the Choosing a platform language much better than Learn more. We should generally be making those Learn more buttons more explicit in most places. I also was trying to get the little carrot dropdown, but couldn't figure out how, so 💯 on that.