Kuma: [UX] MDN Web Docs Navigation Redesign

[yakshaG]

Summary
MDN has the following elements for navigating around the site

1. Top Navigation Bar
2. Breadcrumbs
3. Left Pane

It is a bit confusing since it lacks consistency and is a bit overloaded. User research is summarised in the medium article (link below).

Rationale
It helps in improving usability of MDN, especially when there are lots of resources competing to provide trustworthy and authentic content on web technologies. Improves User satisfaction and makes them promote MDN more.

Audience
All users of MDN

Proposal
To reorient existing navigation elements, with minimum possible revamp.

Additional context
Medium article describing the entire case study: https://medium.com/@YakshaG/mdn-docs-left-right-nav-pane-redesign-a77dc45f42e1

Existing Navigation

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Strings

Proposed Navigation

Prototype Video

https://youtu.be/hV1sZjCUe7I

@malqinneh @kenrick95 @peterbe @atopal
https://github.com/mdn/kuma/issues/6101 https://github.com/mdn/kuma/issues/6102

[peterbe]

Thank you @yakshaG for taking the time.
In your blog post; who are the individuals who you get quotes from? Not their names, but their relation to MDN and to the article?

Also, keep in mind that a large majority of popular pages has an interactive example iframe (near top) and BCD table (near bottom) that expand into that right-hand column of whitespace where you're suggesting to put another menu.

Also, how is a user to know which side to look for related links. Now both left and right are related links. Just of different kinds.

[yakshaG]

Thank you @yakshaG for taking the time.
In your blog post; who are the individuals who you get quotes from? Not their names, but their relation to MDN and to the article?

Also, keep in mind that a large majority of popular pages has an interactive example iframe (near top) and BCD table (near bottom) that expand into that right-hand column of whitespace where you're suggesting to put another menu.

Also, how is a user to know which side to look for related links. Now both left and right are related links. Just of different kinds.

@peterbe The individuals are random users of MDN who passed on the feedback as a part of my user research.

I understand the way you have explained the usage of third pane. More like a reading pane, appearing on demand to accommodate examples, properties or anything more from the main area. I used this area it because mostly it was unused on MDN.

The left menu is purely for indicating the hierarchical navigation. It stays the same over the whole module, with the current page drop-down being highlighted. It offers a consistent pattern for the user. Adding "You are here" may be considered at the top of the left pane.

The right related items are the ones that are not exactly fitting into the hierarchy, but still qualify the relationship to be related to the current page. They can keep changing and still not confuse the user. The Proposed Navigation image can convey this better than my explanation I believe! It is done on a live page(Thanks for asking this. I fixed a copy paste typo on the first item in the drop-down of Related Topics).

[schalkneethling]

@yakshaG Thank you so much for your detailed proposal. At the moment the MDN Web Docs codebase is going through a substantial rewrite from the ground up. As part of this, we are also defining what will become the MDN Design System. As of right now, the intent is to formalize and standardize how MDN looks and functions at this point in time, and also clean up some aspects such as color, layout, typography, and other core components that have gotten a bit out of hand 😄

Once we have finished this initial phase we will definitely be looking at ways that we can further improve the overall user experience and usefulness of MDN Web Docs as a product, but also the reference and learning documentation specifically. At that stage, the information you have provided here is going to be invaluable.

So, while we will not immediately act on the information provided, please do know that we deeply appreciate it and will definitely use it to guide future design decisions. Keep an eye out for later in the year when we will post some more communication around all of this.

Thank you again 🎉