
Redesigning GitLab's navigation - theoretick
https://about.gitlab.com/2017/07/17/redesigning-gitlabs-navigation/
======
wolfgang42
My first thought on seeing this headline was "what, again?"

Don't get me wrong, the new design looks great, but it feels like every six
months they switch between having side navigation and putting everything on
top. Every time they change there's a definite improvement, but you'd think
they'd be able to come up with a design that works for at least a few years.

~~~
StanAngeloff
My thoughts exactly. We've used GitLab since version 6 [1] and things have
always felt like they are in a state of flux ([2] [3] [4]). For an open source
project this is tolerable. I do wonder what enterprise users make of this
constant UI change? Now that the navigation is back on the left, we'll
probably see it collapsible in 9.5 and then morphed into a horizontal bar by
version 10, rinse and repeat.

[1]:
[https://about.gitlab.com/images/6_0/mr_on_fork.png](https://about.gitlab.com/images/6_0/mr_on_fork.png)
[2]:
[https://about.gitlab.com/images/8_0/ci_dash.png](https://about.gitlab.com/images/8_0/ci_dash.png)
[3]:
[https://about.gitlab.com/images/9_0/navigation.png](https://about.gitlab.com/images/9_0/navigation.png)
[4]: [https://about.gitlab.com/images/blogimages/redesigning-
gitla...](https://about.gitlab.com/images/blogimages/redesigning-gitlabs-
navigation/final.png)

~~~
Bromskloss
> For an open source project this is tolerable. I do wonder what enterprise
> users make of this constant UI change?

That's interesting to think about. What is the difference between the two
types of users? Is it that the open source project is in no hurry and can
accept a delay due to interface hassles? Is it that enterprise users are less
capable and need a stable environment to function?

~~~
StanAngeloff
From my exposure to enterprise users, they are usually the sort of environment
where hundreds, if not thousands, of employees work. Can you imagine how one
"angry" of UI changes person in a team of a dozen scales set against that?
With open-source users, it's more decentralised IMHO.

~~~
corobo
From my exposure to enterprise users their Gitlab updates will be wedged in
the middle of a 2 year change control process and will jump over many
iterations of design changes

~~~
TeMPOraL
If they were clever, they could structure the release schedule so that the
enterprise customers which started with top navigation will renew when the top
navigation is current again, and those who started with side navigation will
renew when side navigation is on the mainline... ;).

------
zanny
Since you are redesigning UI features, are there any plans for a site-native
dark theme? Seeing as there already multiple code themes available, it seems
within the context of the configurable UI part of the goal. There have been
Stylish themes for gitlab in the past but they break a lot because gitlab is a
very large website to try restyling from the outside.

Solarized-dark with a white frame can be quite grating on the eyes.

~~~
beefsack
All of my other code workflow (terminal and editor) is in a dark theme, having
to switch to GitLab to review an MR can actually be quite uncomfortable to do
because there's such a leap in contrast.

The dark theme I use is Dracula[1], it's a really beautiful theme and if there
was a way to view GitLab using it it'd be incredible.

[1]: [https://draculatheme.com/vim/](https://draculatheme.com/vim/)

~~~
sytse
Did you know GitLab has themes?
[https://www.dropbox.com/s/p6b8yupsw4opsuu/Screenshot%202017-...](https://www.dropbox.com/s/p6b8yupsw4opsuu/Screenshot%202017-07-18%2014.43.54.png?dl=0)

~~~
ferdbold
The point was that while the code frame has a dark theme, the webpage around
it still blasts you with light, which causes the strain. GitLab doesn't
support themes across the whole website (yet?)

------
vogt
GitLab are one of the only companies I really look up to as a UXer. You guys
just Do It Right. Thanks for being so transparent into your process and even
sharing InVision prototypes. More companies should do this.

~~~
sytse
Thanks for the kind words vogt, we really appreciate it.

------
melicerte
If anyone at Gitlab is reading this, please, please, please do something with
the wide blank space at the top of the home page of a project. The project
logo, name and short description are really side information that you don't
care when you are working everyday on the same projects.It is a waste of space
that distract the user and does not let him jump right into the code. Cheers
and thank you

~~~
svesselov
Thanks, this is a fair point! I made an issue to explore ways to make this
better: [https://gitlab.com/gitlab-org/gitlab-
ce/issues/35244](https://gitlab.com/gitlab-org/gitlab-ce/issues/35244)

------
faizmokhtar
Props to the Gitlab team for the release. Have enabled it for a few days now
and I really love it. I feel like it is much less confusing now.

~~~
svesselov
We are so glad to hear that!

~~~
scrollaway
I don't often use Gitlab, I just logged in this morning to update my 2FA and
saw the new nav in the profile. Enabled it and instantly felt a lot more
compelled to use the site.

I'm a big fan of your guys' work but using Github for a variety of reasons (UI
is a big reason why), so I really mean it when I say the improvement is
noticeable.

BTW, have you thought about talking to Zenhub to get a "Zenlab"? Given that
Gitlab implements a lot more than Github in terms of Zenhub features it might
be worth looking into.

~~~
sytse
We have not talked with them. I love the work of ZenHub. But our strategy
would be to add the features to GitLab itself instead of running it in another
application. Feel free to submit/upvote an issue for something you would love
to see.

~~~
scrollaway
Zenhub being separate from Github has actually been kind of a nice thing for
us. And I can imagine it's a good deal for github as well -- I think Github
adding all the features that Zenhub offers would be massive bloat. It being
separate and easily removed makes it much nicer.

------
btown
Is it really accepted best practice for UX testing to use a sample size of 12?
That sounds remarkably low to draw product conclusions.

~~~
TheCoreh
It's qualitative research: as long as you take sufficient precaution picking
the subjects to avoid obvious blind spots, it should be enough to get a rough
idea of glaring mistakes or problems and to get a good feel of how users
perceive and navigate the UI. It also allows you to individually observe
effects that would often be "averaged out" by a larger sample. It's being used
as a first step (before they conduct a broader quantitative research) so it
sounds pretty valid.

------
zebra9978
I really like the UI paradigm built by gitbucket -
[https://gitbucket.github.io/](https://gitbucket.github.io/). Its like they
took Bitbucket and made it better. On that note - I cant believe how unusable
Bitbucket is.

P.S. And obviously love the fact that it is a single jar file deploy.

~~~
neandrake
GitBucket's UI used to be a full rip of GitHub until they received a notice to
change it [0]. They then switched over to using a UI built with AdminLTE [1].
I'm not sure if the current UI is still based on it though.

[0] [http://gitbucket.github.io/gitbucket-
news/gitbucket/2016/03/...](http://gitbucket.github.io/gitbucket-
news/gitbucket/2016/03/20/change-user-interface.html)

[1] [http://gitbucket.github.io/gitbucket-
news/gitbucket/2016/07/...](http://gitbucket.github.io/gitbucket-
news/gitbucket/2016/07/02/gitbucket-4.2.html)

------
allan_s
Something I found missing is the missing shortcut to easily go the page of
"merged request assigned to me" (which is the link 'merge request' in the
global menu) as it's the single page I visit the most every day at work, to
see across all projects , the merge requests that i need to check.

~~~
svesselov
The third icon from the right is a quick link to "Merge Requests Assigned to
Me" and it is the same as in the old version of the menu. The quick link in
the hamburger menu was simply a duplicate place to find this action.

To see all "Merge Requests" in a project, you will find that option in the
sidebar now, as that is contextual to the Project you are in.

~~~
allan_s
Sorry , I meant "keyboard shortcurt" , I know the link on the left menu is to
go to this page, but at least in 9.2, if you have a long page, you need to
scroll up to the reach the top, which is inefficient, and for which a keyboard
shortcut would be extremely welcome. There's already one, but for only the
merge request of the current project.

------
Karunamon
Bloody hell, this looks like Bitbucket, but purple.

Compare:

Gitlab final prototype:
[https://about.gitlab.com/images/blogimages/redesigning-
gitla...](https://about.gitlab.com/images/blogimages/redesigning-gitlabs-
navigation/final.png)

Bitbucket server:
[https://confluence.atlassian.com/bitbucket/files/304578655/5...](https://confluence.atlassian.com/bitbucket/files/304578655/598940302/3/1404842084389/tutorial-
overview_initialcommit-sidexpand.png)

The resemblance is uncanny.

~~~
JonathonW
In practice, it comes across as something of a hybrid of Github and
Bitbucket's UI-- the top gobal navigation bar and sidebar navigation structure
are _very_ similar to Bitbucket's, but they take Github's "code first"
approach to displaying repositories (the first thing you see when opening a
repository in Gitlab or Github is the source tree; on Bitbucket the first
thing you see is the readme and a summary of bug reports).

It's probably also worth mentioning that Bitbucket's also in the process of a
massive navigation redesign; the "new" Bitbucket eliminates the top global
navigation bar, moving some of its elements to a new sidebar (beside the
context-specific sidebar) and eliminating much of the global navigation
elements completely from repository pages (want to go directly from a
repository page to a team or project page? You can't unless it happens to be
in the repository's breadcrumb bar.). This is about as much of an improvement
as it sounds like.

(Sorry, no screenshots of the new Bitbucket UI since I can't quickly produce
one that doesn't have private info in it.)

~~~
svesselov
" the top gobal navigation bar and sidebar navigation structure are very
similar to Bitbucket's, but they take Github's "code first" approach to
displaying repositories (the first thing you see when opening a repository in
Gitlab or Github is the source tree; on Bitbucket the first thing you see is
the readme and a summary of bug reports)."

Thanks for the feedback! Glad you spotted the differences between BitBucket's
Design and our own. While we would love to design with a blank slate, we are
not. Our users arrive with expectations and deeply implanted ideas of how
things should look, feel, and behave. We have to temper exploration with
practicality. The downside of that can be that the UI has a similar appearance
to other platforms.

------
leipert
This looks nice, but hopefully this is a "stable" release for a while, in the
last versions so much stuff moved around navigation wise. I especially like
that the three vertical navigations
([http://imgur.com/UN1TDkw](http://imgur.com/UN1TDkw)) in a repo are gone.

Thumbs up for creating such an awesome product and involving the community in
your thought process!

~~~
svesselov
Thanks! We would love to hear your feedback as you use the new navigation. Our
goal here is to get as much input from the community as possible to make
improvements over the next few weeks. You can leave thoughts on the issue
here: [https://gitlab.com/gitlab-org/gitlab-
ce/issues/34917](https://gitlab.com/gitlab-org/gitlab-ce/issues/34917)

------
kronos29296
My main gripe with gitlab navigation is I can't see the languages split up
(chart) quickly like in Github. Other than that since I am not a heavy user of
the website (more on time on git than on website) I find no other problems.
Also the redesign looks better than before. Hope they also introduce a dark
theme. (would love to have this one)

~~~
tauriedavis
Thanks for the feedback! In 9.5 we'll be introducing fly out dropdowns that
will allow users to easily access sub-menu items from the sidebar. This will
make it super fast and easy for you to reach the charts page from anywhere
within a project. Follow along in the issue here: [https://gitlab.com/gitlab-
org/gitlab-ce/issues/34026](https://gitlab.com/gitlab-org/gitlab-
ce/issues/34026)

------
luord
This is awesome. Probably the only gripe I have about GitLab is the navigation
and this is a great improvement.

------
pksadiq
Hope, the design would be good. The issue I have faced so far is that the
navigation (and several other features of GitLab site) doesn't work well when
javascript is turned off. The equivalent features in Github works without
javascript with no much issues.

Hope this will be fixed.

~~~
psimyn
Thanks for your feedback - I'd like to see some more things work without
javascript as well.

For the navigation, the links and buttons all work. For more complex
components like dropdowns and search we require JS. We have considered server
rendering for new things, but for now it is quite high effort for
comparatively low gain.

If there are specific actions that you are missing, please consider creating
issues - [https://gitlab.com/gitlab-org/gitlab-
ce/issues/new](https://gitlab.com/gitlab-org/gitlab-ce/issues/new)

Issue about what to render without JS: [https://gitlab.com/gitlab-org/gitlab-
ce/issues/32401](https://gitlab.com/gitlab-org/gitlab-ce/issues/32401)

And I've made an issue to clarify that we require javascript here:
[https://gitlab.com/gitlab-com/gitlab-
docs/issues/120](https://gitlab.com/gitlab-com/gitlab-docs/issues/120)

------
bau5
You can tell someone is copying someone else's work when they copy the bad
stuff. The search box on GitHub and now GitLab wastes space with "This
repository" spelled out. It's also odd that you get more space to type when
you're not searching inside of a repo, and that backspace is how you switch to
a more general search. Pity. I thought that GitLab had learned their lesson
and stopped copying GitHub.

Aside from that, it sounds like a well thought out feature, and it's good that
they're redoing it instead of just changing it bit by bit.

~~~
Sir_Substance
>You can tell someone is copying someone else's work when they copy the bad
stuff.

Once people learn a UI, they really hate deviations from it. It doesn't matter
whether githubs UI is good, and it doesn't matter whether gitlab's UI is
better. People are used to github, and the peanut gallery will bitch if things
are different. The trick for gitlab will be in finding the UI differences that
give the maximum improvement for the minimum change. That's what will give the
desired sensation of "clearly better than github". Overdo it, and it'll feel
alien and weird.

~~~
svesselov
"The trick for gitlab will be in finding the UI differences that give the
maximum improvement for the minimum change."

This is the holy grail of UI for sure. We are striving for this in all of the
decisions we make on the UX team. This change required a lot more change than
we would have liked but we are implementing it in a way that we hope will
bring maximum effectiveness and longevity.

------
drdaeman
Layout is nice, but the header color... uh... it's like a bike shed, but a
header ;)

GitLab should consider adding an option somewhere, that lets users override a
few primary theme colors to their liking. Not a full-fledged theme engine -
that would be awesome but would take a lot of time to implement - just a few
light CSS overrides that are persisted in the account settings, don't require
browser extensions and more tolerant to the layout changes.

~~~
tauriedavis
Thanks for your feedback! We will be adding color palette options for
differentiating instances in an upcoming release. You can follow along in the
issue here: [https://gitlab.com/gitlab-org/gitlab-
ce/issues/35012](https://gitlab.com/gitlab-org/gitlab-ce/issues/35012)

------
dorian-graph
> We knew from previous feedback and from our research that including the
> global navigation links on the top navigation bar was superior to hiding
> them in a hidden hamburger menu.

Is this not at odds with [https://gitlab.com/gitlab-org/gitlab-
ce/issues/29835](https://gitlab.com/gitlab-org/gitlab-ce/issues/29835)?
Regardless, thank goodness they're changing it.

------
supernintendo
I worked with Taurie at Househappy and learned a lot from her. She's an
incredibly talented designer. Kudos on the redesign!

------
chj
Updating...can't wait to see the new sidebar. But, gitlab team has spent quite
a lot of time in UI redesign.

~~~
chj
UPDATE: After apt-get update, now js assets are returning 404.... I should
have resisted and save a few hours of googling.

------
mundanevoice
Okay, so BitBucket style navigation.

------
prh8
Heads up for the Gitlab people here-- The user preferences link under try it
yourself 404s for me, both when logged in and out. Excited to try out these
changes though!

Edit: Appears to be the same path but with `about` subdomain

~~~
svesselov
Thanks for the heads up, we are investigating this now.

~~~
carussell
GitLab should make it so that anyone who reaches a 4xx or 5xx error page
should be able to trivially (as in one click from the error page) file a bug
about it on the GitLab tracker. Make sure to pre-populate the template with
URL, status code, and referer.

~~~
viraptor
You're assuming they're not doing that automatically in the background. I'd
rather assume that they're already getting at least all 5xx reports. (it would
be a big failure otherwise)

------
romanovcode
I think GitLab needs to hire more designers instead of programmers.

~~~
dirtylowprofile
They need more programmers because until now they still experience down times,
a lot!

~~~
jacobr
Do they really? We're considering switching from self hosted CE to Gitlab.com
EE. Reliability and speed is what we're concerned about regarding the switch.

------
inopinatus
Thank you for using text labels. I hate Bitbucket's icons. None of theirs are
intuitive to me, which limits usability and feature discovery.

------
mariocesar
That is why I'm getting a 404 on all my repos? How hard is to deploy frontend
changes without breaking the core backend?

~~~
cmatija
Sorry to hear you're experiencing issues. Are you still affected? Are you
logged in? If so, could you please open an issue in
[https://gitlab.com/gitlab-com/support-
forum/issues](https://gitlab.com/gitlab-com/support-forum/issues) with as much
info as possible?

