Updating the navigation experience on docs.microsoft.com

This post was written by Den Delimarsky, Senior Program Manager on the docs.microsoft.com team.

Back in 2016, docs.microsoft.com started as a site focused on technical documentation. Since then, we grew and introduced new tools that allow our customers to learn more about various Microsoft technologies and services, including Microsoft Learn, the samples browser, Assessments and Q&A.

With the increased number of resources that we manage, we heard it loud and clear from our customers - we must do better when it comes to navigation. We decided to start with one of the first elements you see on the site - the header.

User experience

Previously, when you would jump between different articles on our site, you would see the header change significantly as well.

This was often jarring, and quite inconsistent. In some cases the header was customized for the product content, and in others you'd see the generic Docs one. This often caused confusion, where customers weren't sure whether they are still on docs.microsoft.com or on a completely different site.

To improve the state of things, we've made the decision to split the header into two levels - the site-wide one, and the one that is specific to the product covered by the content that the customer is reading. This allowed us to bring a level of consistency, where regardless of the content being consumed, the customer is still aware that they are on docs.microsoft.com, and have an easy way to jump to some of our key areas.

Notice that we now have a global header that remains static whenever you change the context you're in. Additionally, the user profile control is more discoverable as well, allowing you to jump to important account pages.

And of course, you now can access the most important product links in a convenient way - right from the header!

We're also ensuring that the experience on mobile devices is intuitive and fast - you can get all the goodness of all our resources by clicking on the hamburger button:

Feedback

Have thoughts on how we can make the site better? Simply open a new issue! And don't forget to follow our Twitter account for the latest updates.