META: Global and contextual navigation

Resources

FE @annabeldunstone & @iamphill

Background

Navigation remains a problem in GitLab today, this has been pointed out to us many times in feedback, in issues when we changed the left menu into a dropdown/hamburger and in usability testing sessions.

This issue sets out a first step in the right direction and will be delivered over a series of 2-3 releases.

In 9.4 we will have a parallel navigation paradigm enabled by a feature toggle, mostly for internal and community testing and gather feedback. We will improve this in 9.5 based on our own experiences, usability testing and feedback and look to roll this out globally after 9.5 or 9.6 depending on the feedback.

Once we roll this out, there will be no option to go back to the old navigation as we can't maintain two sets of navigation in the code.

Proposal

  • Create a feature toggle new-navigation and allow users to enable this through rudimentary UI on /profile/features
  • When the toggle is enabled, the current top navigation header should be replaced by the designs below
  • When the toggle is enabled, the current second level navigation should no longer be displayed
  • When the toggle is enabled, the new contextual left navigation as per the designs below should appear

Design

navigation

Top bar - global navigation

Sidebar - contextual navigation

Breadcrumbs

Mobile

Feature toggle

Implementation notes

As discussed with @DouweM the frontend team can go ahead with this work behind a simple cookie check. Once the frontend work is completed, we can hand over to backend to wire in the Flipper feature toggle.

Collecting feedback

We will collect and collate feedback from the following sources

  • This issue
  • GitLab release post blog
  • Hackernews release announcement

Based on the feedback, we will look to make improvements in 9.5 and possibly 9.6. Depending on the nature of the feedback and how much more work we feel needs to be done we will look to activate the feature for everyone on GitLab.com and make it available as the default (and only) option for GitLab.

Future work

The following items are out of scope for 9.4 release, and will look to target in 9.6 and future releases:

  • New iconography
  • Improve mobile & responsiveness

Original issue

We have completed 2 rounds of UX testing on GitLab's navigation. The first observed users interacting with the current navigation. The second was conducted using the following prototypes:

Prototype A: https://framer.cloud/fyEvF/index.html

Prototype B: https://framer.cloud/jveno/index.html

After meeting as a team we have decided to look at what did work (and didn't) during the testing and identify the smallest possible change we can roll out that will improve the current navigation experience. We recognize that this small change may appear big so it is important to determine where the most benefit can be gained with the smallest effort.

Related Global vs. contextual navigation 1.3 UX Testing 1.2 UX Testing

Edited by Sarrah Vesselov