Foundation.mozilla.org: Design nav UI

[kristinashu]

Based on #1139

Focus on MVP, phased approach starting with top-level pages.

Remember that most visitors will find content via incoming links and google search. Nav doesn't need to be a sitemap to all the things, just the primary things.

To dos

• [x] Asses current nav (some context below)
• [x] Benchmark other navs (lightly consider mozilla.org)
• [x] Mockup proposed nav updates
  
  
  
  • based on IA from https://github.com/mozilla/foundation.mozilla.org/issues/1155
  
  
  • few things to consider: responsive states, hover and selected states, breadcrumbs...
  
  
• [ ] Write a requirement list for engineers
• [ ] Test it

Background

This alignment ticket has some background how we got to the main nav that we have.

For sub-pages we have two different styles:

1) Custom pages like Fellowships where the nav is on top and has a few different states.

Landing page

Other pages (this example has filters too)

Third level (with breadcrumb)

2) CMS pages like Web Literacy and Aadhaar where the nav is on the side (to accommodate long titles and longer lists):

Here's how it should look once engineers finish QA tickets.

cc @natalieworth @beccaklam

[kristinashu]

Any progress on this? I'm curious to see how it's coming along!

[beccaklam]

@kristinashu Nat and I should be showing some mock ups at crit today! cc: @natalieworth

[natalieworth]

I've added benchmarks to a doc here https://docs.google.com/presentation/d/198Sk4LZVe5MBBv0d4RcumiYN9EzusZVOFymJHMOZbcg/edit?usp=sharing . I'm updating my nav designs based on meeting with Becca about IA and nav function during meeting I missed while sick.

[kristinashu]

Interim design is being built in https://github.com/mozilla/foundation.mozilla.org/issues/1288 but we're still exploring designs for the future design.

[kristinashu]

@natalieworth @beccaklam please keep exploring nav/banner options! Jesse is keen to have a white nav (like mozilla.org) and probably a different style of Donate button.

He also shared a nav he did previously https://cashmusic.org/ It's a little odd how it has different functionality depending on if you're at the top of the page or scrolled down but would be nice to have one iteration with a better version of that.

Sketch file is in Abstract!

[kristinashu]

WIP comps in redpen https://redpen.io/p/px1f516ee3a2b87adc

@xmatthewx @taisdesouzalessa @sabrinang please add any thoughts, feedback and examples.

[natalieworth]

Added some more nav options to a redpen doc here https://redpen.io/p/xsf546746ceb717376 (with rough gif options for V1 and V2 functionality—so will need to view in Chrome 😫).

cc @kristinashu @xmatthewx @jessevondoom @taisdesouzalessa @sabrinang @beccaklam

[natalieworth]

Nav update:
There's consensus that V1 is the best option. I've updated that based on the redpen feedback:

• The 'return to top/ arrow' needs to be more prominent
• Users need some way to access the menu when the sub nav becomes sticky
• Since our pages won't be that long content-wise, when a menu item is clicked, it will redirect to that page instead of having the automatic scroll

These changes are in the Nav 1 (updated) version of the redpen along with another gif:
https://redpen.io/p/xsf546746ceb717376

cc @xmatthewx @jessevondoom @alanmoo @kristinashu

[natalieworth]

Nat update (Version 4 in the redpen) https://redpen.io/p/xsf546746ceb717376

• I got rid of the weird left menu and instead added a hamburger icon that appears when the subnav becomes sticky on scroll
• Hamburger reveals the top level nav. Top level nav is also accessible by scrolling back to top
• I eliminated the 'Return to top' (arrow) since our pages aren't that long (but I can add back if you think it's a necessary feature). I think with the hamburger we solve the issue of having to return to the top of the page to access the main menu.
• Is this technically viable now? @alanmoo (mobile will function different/ I will mock that up once the desktop is in a good spot)

cc @xmatthewx @jessevondoom @alanmoo @kristinashu @taisdesouzalessa @sabrinang @beccaklam

[alanmoo]

Two (minor?) technical concerns from me:

When clicking on an anchor link, the brower's default behavior is to scroll that target element to the top of the browser window. (Looking at what happens when clicking on the "participate" item in the nav.) It's possible to override this, but it potentially starts you down a bad path of breaking other default browser behaviors, especially when it comes to URL routing.

Secondly, having the later sections "push" the top nav out of the way might be tricky, though I'll let someone closer to the code (@gvn) comment on the feasibility of that.

My broader non-technical concern is that I'm unclear as to what pages this will be used on- do we have pages that have multiple sections like this? Is this for mini sites like the Aadhaar campaign?

[kristinashu]

@natalieworth would you have examples of other sites doing this sort of nav? It might be helpful to see it in action.

[natalieworth]

@kristinashu This site does it nice https://www.sfmoma.org/ (specific page here https://www.sfmoma.org/artists-artworks/ )
I think the thing I'm wondering is if being able to access the main menu is necessary. The SF one just allows you to return to the top to access the main menu again (which I feel is pretty normal ux).

[natalieworth]

@kristinashu @alanmoo I like the latest option if it's technically viable on our site though. I think it's still good to access the main menu :D

[kristinashu]

Awesome! Yeah Option 4 looks sweet!

[kristinashu]

Here's an audit of our current nav types and why we have them https://redpen.io/ym4ce635f63eee1ebb
As you work on the UI please keep these different cases in mind. How they look will change but we will probably need to keep the different types. But if you find ways to simply, please do!

[natalieworth]

@kristinashu I narrowed it down to 2 options that I think will work best for mobile nav in doc here (these are just the wireframe version) https://redpen.io/p/th17ea7bf1ea8e704b
Option 1 is my preference. Let me know if you need these mocked up as a gif too! I can defs do, but I thought they were easier to understand than the desktop nav.
cc @xmatthewx

[kristinashu]

So far our IA is more straightforward than we thought it would be. The only non-typical behavior will be on Initiatives pages where we will show a secondary nav that then disappears once a user clicks through to one of its "sub-page" (user can always click Back in their browser or click Initiatives in the main nav to return).

Sticking with the simpler versions of Nat's designs since I don't think we need to do anything too unique, here is the nav that most of us seem to be gravitating towards and have generally been using in our comps.

https://redpen.io/p/avd5fc0b3db14a7883

Please add in your final thoughts/feedback in Redpen.

I have one question about the functionality of the secondary nav on mobile. If anyone has benchmarks or dev feedback/constrains please add it as well.

[kristinashu]

One additional outstanding question is when a user scrolls down, should the secondary nav replace the main nav and stick to the top of the page?

[beccaklam]

Hmm, tough question, perhaps we can solve the problem by asking if we want the secondary nav to go sticky on mobile. If no, I don't think it needs to go sticky on desktop.
Another thought is that a sticky secondary nav is usually used for navigation on the same page. Since ours contains mostly external links that would be confusing. Also, the purpose of the secondary nav containing external links, as far as I understand it, is to show what is available to the user upon their arrival on the page. Once the user knows what's available on the page perhaps it's not necessary to constantly remind them but to have the main navigation available instead.

[kristinashu]

Okay here are the _final_ specs for all the nav updates https://redpen.io/vp5721a2a03e94bf21
Let me know if you have any _final_ feedback or concerns! Does actually seem like there are any big changes...

Note:

• Tackling the button style in a separate ticket since Nat is still experimenting with diff colors and things
• Keep the dropdown functionality as is (selected menu item disappears when open the dropdown - see bottom of comment above) until we have a better suggestion
• I'll put this into one implementation ticket and devs can split it up as they see fit

[kristinashu]

Opened implementation ticket https://github.com/mozilla/foundation.mozilla.org/issues/1721 and closing this one but ping me if you think it needs updates!