MDN Guides navigation is quite confusing

[mb21]

Background

I love the MDN docs and recently contributed the first time to the guide. Usually I come to MDN via google and that works great for loooking up references for specific things (like a CSS property of a JS method). Now, I was recently looking to send a friend a JavaScript intro tutorial and was surprised to find that the best free one I could find was also on MDN. I had previously seen the "Guides" menu point in the top navigation but after clicking it I always got quickly lost so I assumed it just wasn't polished yet. But the actual content is actually really polished! It's just the navigation that's not working at all for me.

Confusing Navigation for Guides (and actually also Curriculum)

• Many menus:
  • There is the menu in the top navigation, which seems a reasonable starting point (except that I don't know whether I should go to Guide or Curriculum). But then also:
  • breadcrumbs
  • some kind of navigation on the left (this is the most confusing one, how does it relate to the breadcrumbs if at all? sometimes some stuff is red, which often is the current page but not always)
  • the in this article TOC on the right
• Lots of different pages names "guide", "start here", "introduction", "learning area" that are interlinked
• If I start with any guide (e.g. the HTML guide), there is no clear call to action where to go next. The page seems to act as a sort of table of contents itself, but if I read it all and am scrolled to the bottom, all I see is some "See also" links and "Help improve MDN". Am I supposed to now scroll all the way up now to "Getting started with HTML"?

Sorry for the brain-dump, but that's what it feels like.

I still don't understand what the whole site structure is actually. Is it a tree? Is there a linear path that newbies are best supposed to take through the Guides and if so what is it?

[Josh-Cena]

The top navigation is for navigating the major areas of MDN. The breadcrumbs are only for navigating to parent articles. The sidebar is for navigating related articles within each major area. The right TOC is for navigating headings within each page. The "red" highlights you talk about should be exclusively indicating the current page and I'd be surprised if it isn't.

I share your concern about there being too many "landing pages". I don't know if you've found out, but we have docs/Learn, docs/Web/Guide, docs/Web/Tutorial, and guides under each docs area (docs/Web/JavaScript/Guide for example). Many of them are purely just index pages to other areas and have no content. I proposed to remove them in mdn/content#34266, but it got reverted because the Mozilla people think it takes SEO juice away. At this rate, I have no idea if they are ever open to changing the organization and removing all this redundancy, because obviously the more pages we have the more SEO hits we get, even when these pages are all duplicates and just keyword pools.

[Rumyra]

Hi @mb21 - thanks for bringing this up. We're working on some updates to the top nav at the moment, which might help with some of the issues you are facing. The plan will be presented at the community call at the end of the month - see agenda and calendar link with joining instructions here

[mb21]

Thanks for the replies!

The "red" highlights you talk about should be exclusively indicating the current page and I'd be surprised if it isn't.

Maybe this is the only page that does that? But it kinda tripped me up:

the Mozilla people think it takes SEO juice away

I seee. As I don't completely understand all the content and how it's connected, I cannot really make a good proposal, but if I could do only two things, which seem to be easy to change, that would be:

• Add a big "Next page" or "Continue CSS Guide" or similar button at the bottom of each page, so that users at least have a clear call to action where to go next after having read a page.
• Improve the left navigation (which is actually causing the most confusion for me). Specifically: collapse more stuff in the left navigation: like if you're in an article in the CSS area, collapse all other sections (like JavaScript, Web forms, Accessibility, Performance, MathML, ...)