After GitLab 8.5 was released, we looked for a way to improve the current user
interface for both new and experienced users. One of our biggest concerns was
that it was easy to get lost in the navigation hierarchy with what we currently
had. New users were quite confused by how the left sidebar constantly changes
with new links to different pages. At the same time, as an experienced user, I was
annoyed by the old navigation too.
So Andriy (our UX designer) and I decided to do something about it. It's been
almost 4 months now that we are working on it, and in this post I will guide you
through our journey. Feedback is welcome!
How it all started
One day, while on a call, Andriy and I both agreed that we were not satisfied
with the current UI. I even made a messy screenshot with the default project's
navigation to illustrate my confusion:
There were quite a few things we did not like:
- The current navigation is not well organized. There are places where it does
not follow logic or best practices.
- We cannot use muscle memory with the collapsed menu sidebar for fast click
on links because the menu has too many items with new ones added every once
in a while.
- It's hard to navigate when you come to GitLab via a link from another app
(like chat, for example) because of the lack of a logical hierarchy in our UI
A few days later, Andriy came up with a prototype where the project's menu was
displayed within the dashboard navigation. So when you visit the dashboard
page you see one level of links, and when you visit a project or group page
the dashboard links get collapsed to icons and the next level of navigation
UX is more important than you think
We were very excited with the new concept and proceeded with the implementation,
which was pretty straightforward: we made a merge request, got feedback and review,
and in the end we merged it. Then we waited for the next release candidate to
bring the new navigation to our community.
Then came the bad news. User testing and feedback during that release candidate
was far from what we expected. Instead of making things easier to understand and
use, we confused users even more! Our community feedback is invaluable to us,
so we made the decision to rollback the change. At that point we gave up for a
It wasn't until a few weeks later that we decided to take a different path.
A different approach
We split GitLab's layout of different areas by color, and tried to follow the
navigation hierarchy as close as we could.
Global navigation would now have a dark color in the left sidebar, and would be
static. No matter which page should you visit, you can always find GitLab's logo,
your profile picture, and the main links for your projects, issues and profile
The whole page, except for the left sidebar, is a dynamic area with its
corresponding navigation and content. If you visit a project's page, the context
menu will be on the top, and the content just below it. The same happens for
group and profile pages. So, when you visit any page from within GitLab or
from an external application, you'll always know that the left sidebar is the
same, and the header describes exactly where you are via name and navigation
When you visit a GitLab page several times a day, you scan the page from top to
bottom starting with page/group/project name, followed by the navigation, then
the content just below it.
You mostly ignore the left sidebar until you need to return to one of the main
pages, like "Projects" or "Groups". So after some time using the new UI, you
might consider collapsing the left sidebar as it's easier now to remember the
icons related to the links there.
First we tried it on the profile pages and later on the group ones. The feedback
we received was mostly positive, it passed the release candidate and got in the
Here's how the group page with the new navigation layout looks like:
Thanks to these changes, we were able to improve the mobile UI as well. We now
hide the left sidebar by default when on mobile and you can toggle it by clicking
the link on the top-left corner. This allowed us to save a lot of horizontal
space which is really valuable on mobile screens.
What's coming with GitLab 8.9
Our next milestone is GitLab 8.9 where we will strive to finish the navigation
redesign by touching the most-used page type: Projects. Probably this change
will bring a lot of feedback from the user's side. We have too many menu items
there, which is not good for the user experience.
So, besides actually applying the new navigation style, we also need to re-group
logically connected pages under fewer tabs. The old project navigation had up
to 15 menu items (!) which is too much for most screen sizes.
Here is a preview for 8.9:
We would love your feedback so don't hesitate to comment here or in the above
issue! Hopefully you'll find GitLab 8.9 much more easier to navigate.