META: Global and contextual navigation
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.
Create a feature toggle
new-navigationand allow users to enable this through rudimentary UI on
- 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
Top bar - global navigation
- #34021 (closed) (9.4) Move global navigation links to top bar
- #34022 (closed) (9.4) Change top bar style
- #34402 (closed) (9.4) Color palette for new navigation
Sidebar - contextual navigation
- #34023 (closed) (9.4) Move contextual navigation to sidebar
- #34024 (closed) (9.4) Add header with current context to sidebar
- #34026 (closed) (9.5) Add fly-out dropdown to contextual navigation
- #34027 (closed) (9.5) Add icons to contextual sidebar
- #34028 (closed) (9.5) Make contextual sidebar collapsible
- #34029 (closed) (9.4) Move breadcrumbs to content area
- #34030 (closed) (9.4) Add contextual breadcrumbs
- #34031 (closed) (9.4) Move project switcher to breadcrumbs in content area
- #34032 (closed) (9.5) Add group/project/user avatars to global breadcrumbs
- #34033 (closed) (9.5) Move action buttons to breadcrumbs bar
#34034 (closed) (9.4?) Change pagination on mobile top bar to arrows
- #34035 (closed) (9.4?) Make global links on top bar responsive
- #34036 (closed) (9.4?) Add contextual navigation on mobile
- #34037 (closed) (9.4) Add feature toggle to profile dropdown
- #34038 (closed) (9.4) Add feature toggle to settings
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.
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.
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
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.