After several rounds of UX research and taking into account the feedback received from the community, we believe we have a UX solution that greatly improves navigating GitLab. We are creating this issue to collect, track, and act upon feedback from the community.
Please add your comment as a discussion, that way we can track and respond to all feedback.
To make sure we understand the context of your feedback, please use the following template when commenting:
What do you like best about the new navigation?
What do you like least about the new navigation and why?
Which do you prefer: the new navigation or GitLab's existing navigation? Why?
Do you use GitLab mainly for hobby projects, work projects or a mixture of the two?
What do you like best about the new navigation?
I really like that the hamburger menu has been removed and it's most important entries are now always visible in the navigation bar.
What do you like least about the new navigation and why?
I prefer the fixed design, because it looks much more compact than the fluid one, especially on pages like the dashboard or the landing page of a project, which would otherwise be stretched to full window size.
That was fine with the old design. However, now that there is a new navigation sidebar the wiki seems a bit too small, because of its second sidebar on the right. It has a lot of white space between those sidebars, unlike the page of an issue. It would be nice if this white space could be adjusted to match issue pages, that have a lot less white space between the two sidebars.
Also, due to this difference in used white space the breadcrumb menu moves more to the right, since it's currently aligned with the content shown in the center. And menu's / overviews that move around are always a bit strange.
Which do you prefer: the new navigation or GitLab's existing navigation? Why?
The new navigation is definitely my preferred one, due to the removal of the hamburger menu. As soon as #34026 (closed) is added it will be even better to navigate in projects. And, hopefully the wiki will be adjusted, too.
Do you use GitLab mainly for hobby projects, work projects or a mixture of the two?
Currently, mostly for hobby projects (11) but also for a university project (1).
The sidebar of the project page looks really good and gives a better overview of the available subpages. It's also pretty intuitive. Replacing the hamburger naviation in the header with tabs looks also better and gives a better overview of the available options. Purple navigation also adds a nice touch to the otherwise mostly white/orange design of GitLab.
What do you like least about the new navigation and why?
Its inconsistency in some places. The Projects/groups/Activity/...-header has tabs, but I am in none of the tabs when viewing a project page. That's counter-intuitive.
I'd also put the search bar and New>Issue into the sidebar navigation, for better context: Sidebar is everything projectbound, top right corner is userbound.
Another thing I've noticed is that the sidebar simply appears/disappears depending on whether you are viewing a project or eg. the dashboard. I'd suggest to maybe also put a sidebar/something of the same size at the dashboard, because when clicking on a project, the focus area suddenly shifts by quite a bit to the right. It's not a big issue, but in my experience in UX things like that can really matter.
There are also still some bugs, like that when clicking on Settings>Members the page isn't displayed as a subpage of Settings in the navigation. The loads of whitespace remaining from the old design at Settings>General now also get a little annoying, because the real content basically only uses half the screenwidth (at least on my PC).
And one last thing: On my screen, there is still plenty of space for "Milestones", "Snippets" and "Help", yet they are still covered with an additional click behind "More". I think as long as there is space, these option should be displayed in line with the others.
Which do you prefer: the new navigation or GitLab's existing navigation? Why?
Right now? The old navigation. But that is only due to the things I covered above. The new navigation has a lot more potential, and with a bit of work on it, it will get way better than the old one.
Do you use GitLab mainly for hobby projects, work projects or a mixture of the two?
Hobby projects only at the moment, although I am planning on using it for professional purposes as well.
I agree with you, we have some work to do on how we distribute the whitespace. We are paying special attention to pages that also contain the right sidebar, we don't want to box you in.
Also, due to this difference in used white space the breadcrumb menu moves more to the right, since it's currently aligned with the content shown in the center. And menu's / overviews that move around are always a bit strange.
This is an issue that should be fixed in the next release.
Thanks for all the thoughtful feedback @Namnodorel.
Its inconsistency in some places. The Projects/groups/Activity/...-header has tabs, but I am in none of the tabs when viewing a project page. That's counter-intuitive.
I'd also put the search bar and New>Issue into the sidebar navigation, for better context: Sidebar is everything projectbound, top right corner is userbound.
This is a good point.
the focus area suddenly shifts by quite a bit to the right.
I have noticed this as well.
There are also still some bugs, like that when clicking on Settings>Members the page isn't displayed as a subpage of Settings in the navigation.
It's easier to find menu items compared to the hamburger menu.
Awesome color scheme!
What do you like least about the new navigation and why?
Please add a feature that allows users to toggle between having a sidebar on the left or right.
Adding CI to the sidebar to make it easier to spot.
Please add a feature that allows users to toggle between normal theme and a global dark theme. I've added a screenshot of how my YouTube looks like. In the screenshot, you can see the toggle switch in the top lefthand side of the screen left of the hamburger menu.
Which do you prefer: the new navigation or GitLab's existing navigation? Why?
I prefer the new navigation as IMO, it more aimed towards people who use desktops instead of mobile devices.
Do you use GitLab mainly for hobby projects, work projects or a mixture of the two?
I'm currently using Gitlab for school projects and hobbies as my current line of work has nothing to do with development.
The loads of whitespace remaining from the old design at Settings>General now also get a little annoying, because the real content basically only uses half the screenwidth (at least on my PC).
Yeah, I thought that too. But it only looks like this on the top half of the page. If you scroll down to Houskeeping, Export project, Remove project etc. the page feels much larger, due to the descriptions below the headlines on the left part.
Maybe it would be good to add a small description below the Project settings headline at the top or even split sections like Sharing & Permissions & Merge Requests into own segments with own headlines on the left, like this for example:
At least for me, something like this looks way better.
I would like to have the sidebar collapsable like the right sidebar.
It would make sense when reading issues to have more space for the content itself.
After trying out the new look for a bit, I have so far two notes about it:
It would be nice to have the full menu options on top on a high resolution display (to avoid the extra click: More > Menu item), so something like this:
It could be then contracted to how it is now (with the More drop-down menu) on a lower resolution/smaller sized window.
It would be cool to have the option to change the colour scheme (The purple colour is meh imo).
Could you please ensure in the new interface that the "Your Projects" tab is broadened to include internal projects. You might also consider folding the "Starred Projects" tab into the "My Projects" tab. You can then use icons and / or color to differentiate between projects "I" create, projects I am a part of (internal / private), and public projects I participate in (starred).
Issue: When I set up GitLab for our enterprise group all projects were set to Internal BUT anyone who logs in is greeted with an empty "My Projects" tab. This confused them. To combat this I either had to individually add each person into the project as an explicit member or create a static menu bar using the GitLab Message capability. I chose the latter...which works fine...but does point in my mind to a U.I. design gap. See #29095 (moved) and #29097 (moved) .
Keep up the excellent work though. This is a suggestion...not a complaint :-)
The fact that the hamburger menu is gone and all of the major pages are on top, and easily accessible. I also like the top navigation color scheme a lot!
What do you like least about the new navigation and why?
The sidebar AND how hovering over a menu item, changes the color Intensely! I really liked how these navigation links were aligned at the TOP like the old layout. (See screenshot below)
I'm not a fan of sidebars, and they just take up space..
Which do you prefer: the new navigation or GitLab's existing navigation? Why?
The old one. The new one has that ugly sidebar (and so do MANY admin panels out there). The old is more centered and more focused IMO. I like this layout better (See screenshot below)
Do you use GitLab mainly for hobby projects, work projects or a mixture of the two?
That it uses horizontal space and is more consistent than the previous design.
What do you like least about the new navigation and why?
That it still has a sticky / fixed header. In the age of ultra wide monitors, having as much vertical screen space as possible is very important to me.
Which do you prefer: the new navigation or GitLab's existing navigation? Why?
The new one, because I'm a fan of sidebars.
Do you use GitLab mainly for hobby projects, work projects or a mixture of the two?
1. What do you like best about the new navigation?
In navbar: colors
In sidebar: nothing
2. What do you like least about the new navigation and why?
Plz remove this sidebar from left of my screen, I want to see my repository on full screen width and this sidebar he is redundant here, or my repository should be in the middle of screen without any trash from left or right(sidebars). It's uncomfortable at now.
What the problem to move this sidebar with issues, MR s and wiki the same way as it done on github(if you cannot decide what to do with navigation)?
In a navbar:
projects
groups
activity
more
<<< this all - are redundant info, I'm no need to use this, I'm no need to see this
3. Which do you prefer: the new navigation or GitLab's existing navigation? Why?
I prefer GitLab's existing navigation, it's not ideal (Hamburger <- hi is redundant here), cuz there not exist sidebar which bothers me to use my repository, read code, issues, MR etc.
4. Do you use GitLab mainly for hobby projects, work projects or a mixture of the two?
(1) What do you like best about the new navigation?
Screen space is used in a much better way on desktop, i.e. the top bar is now better used, much like GitHub. Also love the sidebar
(2) What do you like least about the new navigation and why?
Breadcrumbs are distracting and make things dense… I can use the back button, thanks. Also, it looks like hitting that down arrow on mobile is downright impossible
The accent color, I think, is kind of distracting, again. I wish I could either choose a monochrome color – black/white/gray – or just a different color that doesn’t stand out as much.
Search bar is too small. Make it slightly larger and much larger upon clicking on it to type anything more than just 1 word.
Why are you hiding 3 buttons that could be displayed as is without a dropdown on the top bar?? Another extra useless click.
Also, lmao, this is a developer platform (at least for the most part). I don’t see a reason that there should be a help link anywhere, except maybe hidden after clicking on my profile picture on the top bar
There’s also one big issue with mobile. If I click the overflow menu, issue/MR/todo buttons are all scattered up top. I mean, jesus christ, can you move them down to the bottom so I don’t have to stretch my fingers up to the top?
(3) Which do you prefer: the new navigation or GitLab’s existing navigation? Why?
New nav because it actually uses screen space properly, and isn’t a mobile layout stretched out. Yuck.
(4) Do you use GitLab mainly for hobby projects, work projects or a mixture of the two??
Right now, hobby projects. But, I’ve had to use it for work/group projects and probably will use it again for such purposes.
What do you like least about the new navigation and why?
the heavy (colour) title bar, preferably provide a colour picker or use old lighter colour.
lack of ability to reduce/hide the left sidebar
when using fixed layout, it feels odd having some content full width vs other content centralised
using fixed layout feels pointless now, but i prefer it to fluid - I like my info in the centre
it feels a lot more 'busy' than competitors, all of gogs/gitea/github follow a similar format which feels cleaner.
Which do you prefer: the new navigation or GitLab's existing navigation? Why?
-the sidebar-, changed my mind, I agree with @lloeki's very clear description below.
Do you use GitLab mainly for hobby projects, work projects or a mixture of the two?
mixture
Any other comments?
While you're refactoring the UI, can you please consider merging the Project Home with the Repository Files page. They are almost identical. Preferably using the Files page layout, I don't like the wasted whitespace caused by an often unused centralised project icon.
Josh uses the right sidebar a lot, having both sidebars open makes the middle content squashed (agrees that this will be helped with the intro of the collapsable sidebar)
Would be better to be able to hover and have submenu appear without a click. OR click for the submenu without having it load the first menu item. Having to click a menu item you are not on and wait for the top sub-item to load is time consuming.
The submenu items appear to be in a smaller font, should be larger.
That's a feature they are already working on (#34028 (closed)). You can also have a look at #32794 (closed) for a overview of some other issues related to the global and contextual navigation.
I know this is beta/alpha, but is it possible to make the new navigation a true setting? What I mean to say is, if I log in on a different machine or my cookies are cleared, I have to go in and re-enable this. I go cookie-less a lot, but I'd still like to pilot this, provide feedback, and see it launch successfully, but I may not be able to as much as I'd like because of the "default off (even though you enabled it in your settings on a different machine)" policy.
Obviously probably one of the lower items on the list of priorities, but I thought I'd throw it out there.
I like that it is opt-in. The harmless experiment only for interested people. All big changes should be like this. It is a great way to test the big changes without letting people suffer.
What do you like least about the new navigation and why?
It is too messy and distracting. It is too much stuff there. The old navigation was much more subtle. When I'm reading issues, I don't need to see that there are thousands more issues and merge requests. I need to focus on the discussion. The old horizontal bar simply goes away.
The sidebar wastes too much space. Especially on Issue Board and similar wide pages. I have FullHD display, so I should have plenty of space, but the issue board is too small now.
I don't use global navigation. I have a tab in browser opened for each project I'm working on. In fact I have a separate web browser window on separate desktop for each project. One more click to navigate to another project is fine, but the useless menu is just a clutter. I also don't use the old hamburger menu. I just click the logo to get to home page (or group name to get to group page) and find the another project there.
It is hard to navigate to another project in the same group. Right now I'm scrolled on the bottom of the page and I would like to switch from Gitlab CE repository to Gitlab Runner repository. How I can do that? With old navigation I click group name in the header and then I select the desired project in the list. The new navigation now hides the group from me.
Which do you prefer: the new navigation or GitLab's existing navigation? Why?
I prefer the old navigation. The old navigation provides better focus on current project. I'm not using Gitlab, I'm working on a project. So it is good thing that Gitlab goes out of my way and lets me focus on the work.
Also the old navigation shows where I am. The new navigation always says "Gitlab". Then I have to find tha name of the project and look really hard to find breadcrumbs to figure out the group name.
The new navigation gives me a cluttered feel. It is too much of everything in front of me.
Do you use GitLab mainly for hobby projects, work projects or a mixture of the two?
Everything. Hobby projects, personal projects, school and research projects, work projects, ... about 50 projects on my private server.
I'm not using Gitlab, I'm working on a project. So it is good thing that Gitlab goes out of my way and lets me focus on the work.
This is a good thing for us to keep in mind, thank you.
The old navigation was much more subtle. When I'm reading issues, I don't need to see that there are thousands more issues and merge requests. I need to focus on the discussion.
...The sidebar wastes too much space.
We understand. The navigation will be collapsed in the next version, this should help reduce it's distraction level.
I don't use global navigation. I have a tab in browser opened for each project I'm working on. In fact I have a separate web browser window on separate desktop for each project. One more click to navigate to another project is fine, but the useless menu is just a clutter. I also don't use the old hamburger menu. I just click the logo to get to home page (or group name to get to group page) and find the another project there.
This is a unique workflow and does not necessarily reflect the majority of our users. We have to take all different types of users into consideration when solving these issues. This does not mean your opinion and thoughts don't matter! We appreciate getting this information and will do our best to find common ground to work from.
Let me start off by saying that I was a strong critic of the then-new design of GitLab 8.9. With some of the changes that happened since then, and some time to get used to it, I now like it.
1. What do you like best about the new navigation?
That you can switch it off and use the old navigation. No matter how good or bad the new one is, you should allow for at least 2-3 months/releases for people to get used to it or use what they are used to (for those moments where you simply need to get stuff done, now).
2. What do you like least about the new navigation and why?
It is awfully cluttered. Way too many "navigation" elements.
Now you always have a (decently designed) sidebar and the (unnecessary) top navigation and the (completely unnecessary) breadcrumbs.
3. Which do you prefer: the new navigation or GitLab's existing navigation? Why?
Either the existing or the old (v8.8) one.
Because I usually spend 100% of one day in one project. I do work on different projects, but I often work on one for a whole day. Therefore, I don't need a "global" and "project-local" navigation. I never used the sidebar a single time since the 8.9-redesign (even though I have used GitLab every single workday since then).
4. Do you use GitLab mainly for hobby projects, work projects or a mixture of the two?
Clearly work projects. But I start using it for hobby projects, too.
Conclusion
I mentioned this in many UI/UX-related issues here (mostly around the 8.9 release). Please consider the usecase where one mainly uses GitLab for a single project. The new navigation design is completely overkill and makes the UI so much more difficult to understand (in the one-project-scenario). The breadcrumbs are awful, unnecessary, and take up valuable space in a prominent location. I think the UX designers (and "researchers") greatly overestimate how often people switch projects in the course of a day! Would love to hear your thoughts on this @sarrahvesselov!
You bring up good points @pbr, I appreciate getting a different perspective on this. Your use case is not the most common, many of our users are managing multiple projects if not multiple groups.
The breadcrumbs are awful, unnecessary, and take up valuable space in a prominent location.
We are actively working on ways to reduce the imprint of the breadcrumbs without removing them as many do use them to navigate. They currently take up 40px of space (if you count the title as part of the breadcrumb).
Please consider the usecase where one mainly uses GitLab for a single project.
Absolutely, we will make it a point to maintain focus on the project you are in while allowing users to easily navigate elsewhere.
(sorry for the noise, deleting the old comment and making this a discussion)
What do you like best about the new navigation?
Screen real estate seem to be better used when maximising windows on big desktop displays. Sometimes easier/more obvious to get back "up a level" or for "lateral/sibling" navigation.
What do you like least about the new navigation and why?
the feeling of wasted space and busyness: global nav is always present and a click away, but I rarely need to move that quick to global stuff, plus there's a "More" thing that doesn't expand as room is made for Milestones and Snippets when resizing. Contextual nav looks busy but shows little info: a breadcrumb with dropdown-on-hover for sibling navigation would be more efficient. That top bar is fat heavy (feels like a blinder is falling, esp. on wide screen displays), and the size and structure of the sidebar creates two heavy blocks (one "full" and one "empty") atop one another, all of those items drawing attention from the content and driving me crazy when I'm reading an issue thread.
inconsistency within itself: sometimes there's a sidebar (in a project), sometimes not (on a project list). I understand the underlying approach but even then the perception of it is perceptually challenging when the structure of the page seems to change on a whim.
inconsistency with other products: this looks like Material Design's typical app layout so it raises some expectations about how it behaves but clashes hard with it: in MD the sidebar gives global/identity navigation, and here it is contextual. Massive cognitive dissonance for me here.
Which do you prefer: the new navigation or GitLab's existing navigation? Why?
While I can see the value and potential of the new one (especially for large screens/large windows), I vastly prefer the old one, which, for all its warts, felt so much more balanced, refined, and opinionated. The current one just isn't mature enough yet, feels like "people are lost? let's add a thousand direction signs all over the place!" (ok exaggerating a bit here ;). Anyway, the old one was much more accommodating to my preferences of placing small/medium sized windows around (on either my 21:9 2560x1080 screen when docked or my 13" Retina MBP screen when undocked) as well as my focus sensibilities. I for one loved the hamburger menu because of that (which was symmetric with the user menu). Again, there was so much of a balance and symmetry feeling to the old one. Because of this, I now tend to have to use bigger windows than usual for nary a gain, and I don't have leeway into having a similar experience as before.
Secret wish: bring on a fully responsive experience to that design, one that allows for a focused, balanced experience on smaller screens/windows (taking tabs at the old design) and a refined, expansive experience on bigger screens/windows (pursuing work on the new design).
Do you use GitLab mainly for hobby projects, work projects or a mixture of the two?
a "More" thing that doesn't expand as room is made for Milestones and Snippets when resizing.
This has been brought up several times and I agree that if there is room, it should be there. cc/ @pedroms@cperessini
That top bar is fat heavy (feels like a blinder is falling, esp. on wide screen displays), and the size and structure of the sidebar creates two heavy blocks (one "full" and one "empty") atop one another, all of those items drawing attention from the content and driving me crazy when I'm reading an issue thread.
We are working on making the header less 'heavy'. Do you think that making the sidebar collapsible (coming in 9.5) will reduce it's distraction for you?
the perception of it is perceptually challenging when the structure of the page seems to change on a whim.
This threw me as well, even though I understood the 'why'. I don't think the sidebar should always be there, that would only add to the cognitive overload. I do think a better transition on the content would help it not to be so 'jarring'.
This threw me as well, even though I understood the 'why'. I don't think the sidebar should always be there, that would only add to the cognitive overload. I do think a better transition on the content would help it not to be so 'jarring'.
My opinion is that if it's there it shouldn't go away and back again due to navigation: even with transitions it still makes for moving targets. Rather, since the sidebar is about context, there is still context to be had in those "global" pages: on the global Projects page, tabs like Your projects, Starred projects and Explore projects can move to the sidebar, as has been done for Settings navigation. Same for Groups and Activity. Also, Profile has tabs that can move to the sidebar. Overall it'll be more consistent, and with more room to play with you may find other global context items to put in there.
Again, all that sidebar stuff could be made to fold into something more like the old UI should the window size go below 1024~1280px.
During our testing sessions we saw that including a contextual bar for the global areas was not helping users. Even though it was more consistent, it wasn't clear to them that they were seeing a different sidebar every time the changed context, so it was more confusing than helpful.
That said, I have found in these past few weeks that I am also surprised when I arrive at a page that doesn't have a sidebar and feel like I've lost my bearings. I think we definitely have to improve on this.
@cperessini wow turns out I like this prototype a lot regarding the sidebar, except that for those global pages it just repeats the navbar, whereas I envision something much more contextual to the currently displayed page.
Regarding the breadcrumb, I feel the current design is too conservative. The page title is misplaced, plus it can be a breadcrumb itself in some cases, which stacks two breadcrumbs! Also, the project jumper somehow makes no sense with the hierarchy. See the screenshot below, and alternative mockup, plus some mockups about what I mean by lateral navigation (warning: leet photoshop skills).
Original:
IMHO, better:
Lateral navigation on breadcrumb when hovering the project level (clicking would be the same behaviour as today), showing siblings in the group:
Lateral navigation at the group level (the user namespace could reuse the user's avatar):
I believe that really good breadcrumbs with drop-down menus could completely replace global navigation and serve as <H1> too. The intermediate breadcrumb menus should navigate to similar pages between projects (Gitlab/group1/project1/issues → hover project1, select project2 → Gitlab/group1/project2/issues).
We also have a partially conflicting proposal in #35528 (closed) that would still use two lines in that section, but the second one would be a title for the page
Our plan up to this moment was to remove the current project switcher and to turn the Projects and Groups buttons in the top bar into dropdowns with quick links to recent projects and groups (#35010 (closed))
I think your proposal is really interesting, though, and we can include it in our next round of testing to see if it works better than our proposed approach.
Some feedback after a couple of days of heavy, continuous use where I imprinted myself with the new UI: I had to turn off the new UI due to some bugs and OMG I love the old one so much! The fact that there is mostly no sidebar (not even a "collapsed into icons" one as is planned) makes it feel so fresh and focused. Sure it may need a few minor improvements to get a better hold of where you are or how to go up/back at times, but only at times, and minor ones. The new one definitely feels like a regression to the 8.x days.
Additional bugs and issues:
boards cannot be made fullscreen anymore as it just glitches
if you thought issues were squeezed by both sidebars, wait until you're on a board. It's unusable as you constantly scroll left/right since you can see at most two and a half columns. A more general question: can the board column width be made responsive? It's a pain on a 13" screen when on the go.
The colored top navbar is an opportunity to add a little customisability with a user-pickable color. This is very useful when you're working on multiple GitLab instances (e.g self-hosted and gitlab.com) to easily distinguish between the instances.
I have uploaded a high resolution icon for my Gitlab instance, and turning on the new navigation doesn't scale this icon, making navigating impossible.
I have uploaded a high resolution icon for my Gitlab instance, and turning on the new navigation doesn't scale this icon, making navigating impossible.
I will open an issue for this if there is not one already. Thanks for letting us know!
The fact that you have started to improve the navigation.
What do you like least about the new navigation and why?
It's not really an improvement but rather only a change to change something (wasn't there a sidebar a few month ago that then vanished?). I dislike:
Instead of the hamburger menu i now have two distinct places, divided by a (for me to small) search input and i have to remember where each function is located.
Even worse: Lots of screen real estate is unused, forcing an unneeded second click to reveal functions. At least use the available space for a bigger (dynamic sized) search input ( see also https://gitlab.com/gitlab-org/gitlab-ce/issues/34917#note_35208232 above regarding an auto contracting more menu).
I can't see any advantage in rotating the toplevel menu 90 degrees left and changing nothing else. Using an accordion to reveal the submenu uses way more space then before and increases the distances one has to "mouse around". That's a step back, not forward.
This may be solved by gitlab-org/gitlab-ce#34026, but if you are researching flyout menus then you should maybe take a horizontal menu into consideration like Aha! is doing it:
On a related topic see gitlab-org/gitlab-ce#35500
Which do you prefer: the new navigation or GitLab's existing navigation? Why?
For now the old one. I'm heavily jumping around between projects in my daily work (the main reason for this are missing multi repository projects, see https://about.gitlab.com/direction/#multi-repository-projects ) and the new nav feels like a "mouse marathon" for that usage pattern. But i'll keep using the new one - maybe it's only unfamiliar.
Do you use GitLab mainly for hobby projects, work projects or a mixture of the two?
Instead of the hamburger menu i now have two distinct places, divided by a (for me to small) search input and i have to remember where each function is located.
Since I updated our instance to 9.4 today, I've pointed out to people that they can try the new UI out, and I've been asked like half a dozen times "where do I find my overall issues now?". Previously there was a dedicated entry in the hamburger menu. I always aimed for the badged icons on the left but it seems a lot of people went for the menu.
BTW, off-topic but this thread is a prime example of a use case we've been increasingly hit by locally: is there something planned to be able to turn comments into discussions?
I like new navigation and sidebar - I prefer direct access to things and navigation controls being in the same place top and left) and not mixed in with content as it was before. good high contrast colors are appreciated as well
You hide group name in breadcrumb with (...) while showing root Gitlab (home) - jumping to the group of the project I am currently in is the most useful feature of the breadcrumb please return it to be visible by default. hide the root if you need to
Please add ability to remember last visited project and open it on re-opening gitlab
Few not 100% related and somewhat subjective observations mainly re. pipeline/job screens:
For a pipleine Stages drop down could you show associated job numbers
On pipeliene there is lots of empty white space. could more of a commit message be shown (same applies to some other screens)
On Jobs screen, could commit message be shown
Feature: Allow build to provide a message to be saved with job (and pipeline?) and to be shown in the grid. It would be very useful for the build process to be able to pass something to gitlab to be shown in UI. Could be build number coming out of the build system used or any other input. Coul be achieved by build setting some environment variables to be picked up by CI and saved to gitlab
I think one mistake CI is making is thinking it is THE build system. As a build system it is very rudimentary to compare with Maven,Gradle etc. It is high level CI and should stay high level but it needs to be lot more dynamic in taking input from scripted steps (ex maven build invocation) and integrate better with established build and test systems. It is so static that it does not allow output of a scripted step (i.e maven build) to feed into subsequent yaml defined logic (even as simple as capturing artifact name from invoked build process) or issue any git integrated commands to tag a successful build etc. I can go on about CI but this is not a right place for it :-)
I really like the purple theme over the old monotone grey theme.
What do you like least about the new navigation and why?
I really don't like the new left side nav bar. I've been evaluating GitLab 9.3 for enterprise use and I was very happy the left hand nav bar had gone away not long ago. I'm sure my preference has a lot to do with GitHub muscle memory.
Which do you prefer: the new navigation or GitLab's existing navigation? Why?
I like elements of both. But overall, the old nav just because of how much I dislike that left hand nav.
Do you use GitLab mainly for hobby projects, work projects or a mixture of the two?
The color contrast makes it much easier to navigate, although sub-categories on the left are still a bit subtle.
The combination of always visible vertical + horizontal menu when designed properly is always the best. Kudos.
The new look allows for larger screen area available to the projects (the files, the graph, etc.)
Less hidden menus - better
What I don't like (still to be addressed)
I still have to make two clicks and wait for two page refreshes to go from the project to the graph. Please fix the navigation so that jumping around sub-categories is easier and faster! My most used navigation is between Files, Graphs and Pipelines-Jobs. Soooo many page load...
On the Graph page, the Label "You can move around the graph by using the arrow keys." can be moved up, just next to the "Switch branch/tag" drop-down menu. Why are you wasting a whole line for this?!?! I do need as large an area as possible for the Graph.
The Horizontal menu has Projects, Groups, Activity and More. While there is plenty of space to display the More contents (Milestones, Snippets, Help) on the same line before they reach the search box, this More menu is still fixed. It should be there only for smaller screen size, and only for items that don't fit on top. And it should accommodate the menu items that don't find ONLY.
Issues, ToDos and Merge Requests links when used, I lose track where I was (which project I came from, which page). I cannot just navigate back. I have to find my way again starting from Projects, etc. This is a lot of unnecessary page loads. Even the Search - when I search in the project, suddenly I am outside of the project scope. How do I just get back to the project I was searching in? Please, make some type of breadcrumb or whatever so that I can go back to where I was after working with my ToDos, etc.!
Which do I prefer
Well, the new one, of course. Because it is still a way forward towards better presentation/navigation than the old one.
My only main complaint so far is that I'd really like a way to change the primary colors on EE because it just looks funny having that purple nav bar - I liked the cleanliness of the white before and now throwing purple and orange in with our bright blue logo looks strange - I realize this may sound nitpicky but it definitely makes a difference to the eye.
that said I think the purple and orange look great with the orange Gitlab logo in place I just dont want to use the default nav because many of our devs have their own gitlab.com accounts and I dont want them to get confused when navigating it vs our hosted EE site
- If the layout width in your preferences is set to "fixed", then the breadcrumbs are indented to the same position as the rest of the content in the main panel. I guess this makes sense, but it looks a little weird; I'm used to breadcrumbs in other applications always being on the far left.- It would be nice if the color of the top bar was customizable so I could use it to tell different GitLab sites apart at a glance like I could with the old sidebar.- Having a "More" submenu in the top bar feels a little weird when there are only a few items under there and there is more than enough room in the top bar for all of them.
Hey there!
We just updated our Gitlab Instance and when selecting the New Nav i get a quite disturbing Issue:
I guess it is related to our Logo resolution, which is not scaled down due to it being shown at the start/login page and because we wanted it sharp ;-)
Gonna try to resolve this, but it might be a issue in gitlab itself.
What do you like least about the new navigation and why?
The new navigation uses up a lot of screen width, making it much harder to perform code reviews using side-by-side diffs. Our main use of GitLab is for code reviews, and we would like to be able to get as much code on the screen as possible.
Old theme:
New theme:
This was a major reason we chose GitLab EE over BitBucket - BitBucket's navigation takes up a huge amount of the screen and really hampers code reviews.
We would like to see the ability to at least hide the new navigation bar. As can be seen from the screenshots, the navigation bar uses a lot of pixels, and doesn't display very much at all. We would prefer the navigation bar to be automatically hidden when viewing diffs, or a preference to keep it minimised by default.
Which do you prefer: the new navigation or GitLab's existing navigation? Why?
The existing navigation, as our primary usage of GitLab's UI is for code review. Anything that makes reviewing code harder is bad.
Do you use GitLab mainly for hobby projects, work projects or a mixture of the two?
Mainly for work projects, but occasionally for hobby projects too.
In general i loved the new navigation , new layout and everything ut i have one complain . when i tried to open gitlab on mobile with the new navigation i couldn't find the link of issues . i dont know if it doesn't exist anymore or i missed it
So far so good with the new design, the side bar to top bar split seems a bit better considered than previously - though it is something that would definitely need control on as further GitLab features are added. The higher contrast is welcome too (though see my next paragraph).
I do have one suggestion, which is to do with the opacity of the highlight colour (currently purple, but due to be selectable I think [https://gitlab.com/gitlab-org/gitlab-ce/issues/35012#note_35255349]). It lends a very "heavy" look to the top of the page IMO. My first thought was that the opacity could be adjusted. But style is very subjective, so maybe an opacity slider along with the color selector would be good
I do concur with @tpage-alfresco that having the sidebar be collapsible in some manner would be welcome for those pages were a lot of windows space is required (e.g. boards)
I use GitLab entirely for work were we have an on-prem omnibus CE installation.
What do you like least about the new navigation and why?
It takes up way to much space, especially on vertical screens. While the right sidebar on issues is useful, showing participants, labels, etc, I don't really see what the left sidebar gives me. I couldn't figure out how to toggle it so I'm stuck with pages looking like this:
Also hotkeys don't seem to be working anymore for me with the new layout. shift+m to go to merge requests, etc.
Which do you prefer: the new navigation or GitLab's existing navigation? Why?
The old one because it let me use my screen space efficiently.
Do you use GitLab mainly for hobby projects, work projects or a mixture of the two?
It has amazing proper separation of importance: global navigation stands out most (top bar), page-relevant navigation to the left second-most, and all the other clutter (like "Files (10MB)" .. project detail buttons) are very unobtrusive inside the inner page content area.
Unlike the previous layout, all major panes are clearly separated and feel like they have a clear order of importance.
This also makes this the first design I actually prefer over what GitHub is doing right now!
Also, I like that you threw out the super-low-contrast madness in general, and used more bold colors and clearer separation lines again.
What do you like least about the new navigation and why?
When on a project an item is selected in the left navigation, e.g. "Issues", it makes it look a bit like it's a child of the item above it (e.g. Repository). This might be worth fixing to avoid user confusion.
I think the main problem is that the violet bar to the left indicating the current section kinda makes it feel like it's "lower" than other content, so the whole block feels like a subitem to whatever is above.
EDIT: maybe just using a brightened-up block instead of a darkened block might fix it too? Look at this cheapo edit to illustrate how it could look better and without seemingly being a child block of the item above:
(Cheapo edit to illustrate nav bar seems-like-a-child-block fix)
Which do you prefer: the new navigation or GitLab's existing navigation? Why?
Clearly the new one! (by a big margin)
Do you use GitLab mainly for hobby projects, work projects or a mixture of the two?
What do you like best about the new navigation?
It feels more organised and professional. The coloured header makes things feel contained and structured, I really like it. The previous navigation felt floaty, most because it was totally white and didn't have clear boundaries. I like how there's a clear distinction, the purple top bar is for global-level things, while the left sidebar is for context-based links.
What do you like least about the new navigation and why?
The breadcrumbs mostly. I'm not a fan of how they're split into two lines, it can sometimes distract from the page content as it feels like a wrong-sized title.
It's worse on the Wiki pages, as you end up with a Breadcrumb, Breadcrumb, Wiki Breadcrumb, Page Title which I find hard to follow (see my screenshots of our wiki pages).
Eg:
The wiki page structure gets a bit confusing (the last Yarn in that image is the h1 in the content of our page).
I think I'd prefer if the main site breadcrumbs are a single line and don't split into two. I already know the active project due to the sidebar in the corner.
Which do you prefer: the new navigation or GitLab's existing navigation? Why?
Definitely the new.
Do you use GitLab mainly for hobby projects, work projects or a mixture of the two?
Work, we exclusively use Gitlab-ee for our business development.
I support the remark regarding breadcrumbs. The two-line layout doesn't look very good and just doesn't give a natural feeling. It is a good approach but currently implementation doesn't seem to be 100% right, yet.
1. What do you like best about the new navigation?
The split up between the global scope at the top and the contextual scope on the left. I think that is much better to understand especially for newcomers that want or have to use GitLab.
2. What do you like least about the new navigation and why?
I would like to be able to access the submenu elements in the left menu from every page. I.e. when I am on the issues page I'd like to be able to directly access the page Repository->Graph. Maybe that can be achieved by toggling the Repository sub-menu-elements with some additional drop down element.
Also it would be good to be able to toggle the left main navigation similar to the navigation model in Gitlab 8.x version:
Another issue especially with wide screen resolution is that there are huge areas of unused space:
That needs some improvement.
3. Which do you prefer: the new navigation or GitLab's existing navigation? Why?
The new one. Because it's a huge improvement to navigate faster trough different projects compared to hamburger menu.
4. Do you use GitLab mainly for hobby projects, work projects or a mixture of the two?
100% @ work.
BTW:
Is it possible to globally apply the new navigation model on local GitLab instances for all users?
I recently discovered the new GitLab UI, and I love it! I thought the previous interface was subpar to what I was used to from GitHub and I kept trying to transition to GitLab despite that I thought the UI was cumbersome to navigate. The new interface is just fantastic, the best online version control interface I have interacted with, and an important contributor to me hosting more and more of my projects on GitLab (and convincing others to do the same)!
What do you like best about the new navigation?
The change of navigation items to the side bar. This makes navigation so much more intuitive and consistent in my opinion. The fact that the sidebar collapses and the UI's responsiveness to different window widths makes GitLab a joy to use in non-fullscreen windows, which is an important part of my workflow.
What do you like least about the new navigation and why?
I honestly think everything is better now compared to the old interface... One thing that I think is still a problem in the new interface, is that some pages are too wide in full screen mode. For example the issue page stretches almost the entire width of the window and could be made more narrow, which is easier to overview without having to change where I look.
Which do you prefer: the new navigation or GitLab's existing navigation? Why?
The new one by a landslide!
Do you use GitLab mainly for hobby projects, work projects or a mixture of the two?
Mostly hobby projects, but soon a mixture of the two.
I understand making the sidebar go on top is eventually unavoidable at some tiny width to make the site work. However, at this width it clearly shouldn't go on top yet and it just looks ugly and annoying to use.
The problem is that the sidebar apparently knows two modes:
sidebar is expanded by default
sidebar is collapsed by default and opening it will make it go on top.
To make the sidebar a better experience, I suggest three modes:
sidebar is expanded by default
sidebar is collapsed by default but opening it will move the side contents and NOT make it go on top (because let's face it, that's just incredibly annoying to look at)
sidebar is collapsed by default and opening it will make it go on top because the browser window is simply too thin
I understand making the sidebar go on top is eventually unavoidable at some tiny width to make the site work. However, at this width it clearly shouldn't go on top yet and it just looks ugly and annoying to use.
This is not intentional @TonasJ, thanks for reporting. We are looking into it.
@sarrahvesselov just to be clear, I did manually expand it. I'm also not objecting that it wasn't already expanded - I just think manually expanding it at this width should do something smarter than what it currently does.
@annabeldunstone what about pages where there is no right sidebar or when the right sidebar is currently collapsed? It would be nice if the site were a bit smarter about those cases.
Also, even on pages with a right sidebar present (like here viewing this issue) the point where the left bar is forced to collapse seems pretty early, and the issues sidebar to the right is wasting a lot of space for not much content. Suggestion: maybe make the right sidebar shrink at smaller widths, and allow the center content area to shrink some more before forcing a sidebar collapse.
IMHO having the content a bit more smartly compressed would be very desirable compared to introducing early forced overlaps as with the left sidebar right now which are visually very frustrating to deal with.
this was intentional. For pages where we also have a right sidebar (Issues & MRs), the main content would break immediately.
Thanks for the context @annabeldunstone. I understand the complexities and appreciate that this is the best we can do right now. Issues related to improving the content layout and the right sidebar will help us iteratively improve this.
I think I found a little bug (not sure if that needed a separate report or a comment here). When viewing a merge request long enough that you have to scroll down, the "Showing x changed files` header scrolls along - but it appears to be calibrated to the old header still:
Hmm, Im not sure how to reproduce this. It looks like the tabs are missing in the above screenshot. cc @annabeldunstone Can you reproduce? Its working as intended for me:
I opted in when the new navigation redesign blog post showed up. And I've been really, ridiculously happy using it. (Was going to send a personal email about it being the best design ever when @tauriedavis mentioned it in an unrelated issue a couple weeks ago.) However...
Sometime in the last day or so, the sidebar was changed to be collapsible and now it overlays the main page content when expanded, instead of being docked to the side. If this is supposed to be usable, I'm not seeing it:
Starting from RC5, I noticed bugs with the collasped navigation bar.
1 - Menu hovering is flickering, this gets this navbar almost unusable in this RC:
The overing menu a disapprearing once we move the cursor on them. It seems to happen when the cursor is too close the navbar, or when it goes in the alignement of the merge request icon (which seems to have a hovering it box way too large, see at the end of the capture).
2 - In the user settings, the text of the last icon (pipeline quota) is not hidden when navbar is collapsed:
3 - When changing page, the new one appears with an offset at left, like if the navbar were expanded. Once the page has load, it's resized and shift to the left:
It's not a big problem for usability, but a bit ugly.
Note: I think this was already happening before the RC5, but was less noticable.
4 - You can also notice in the offset on load capture that avatar icon for group and projet (in the navbar and in the breadcrumb) are white during the load, and only appears at the page ready.
1 - Menu hovering is flickering, this gets this navbar almost unusable in this RC: is not fixed, it's different now: the popout menu are not anymore show on the fly. And the icons are hard to hover and click (it works browsing the navbar from the bottom to the top, not from the top to the bottom):
2 - I confirm the 'pipeline quota' in the user settings navbar is fixed.
3 & 4 are still there.
I test and confirm this on 2 different computer (win7 at work with last FireFox, win10 at home with last Chrome and last Firefox).
The left sidebar is a great improvement, at last there is no need to scroll up to the top to navigate.
What do you like least about the new navigation and why?
One thing is annoying: after clicking on a project's settings (left sidebar), one has to go to the right side to «Expand» on item. The wider the screen, the more cumbersome it is. It would be nice to have a way to expand these elements («General project settings», «Sharing and permissions» etc.) without having to move the mouse pointer to the opposite side.
Possible solutions (non-exclusive ;))
Make the title "clickable" to expand/collapse,
Add an icon at the left of the titles to expand/collapse.
When the sidebar is collapsed, it is impossible to see sub-items.
For example if you click on the icon "Issues" (opening "Issues>List") then you have no way to see/select the other sub-items "Board", "Labels" and "Milestones" unless you expand the left sidebar (which requires moving the mouse to the bottom, to expand, then up to select the sub-item). This is even more annoying when you want to navigate back and forth between those sub-items, since the left sidebar is collapsed every time a (sub-)item is clicked.
When left sidebar is collapsed, it would be nice to show a sub-menu with the different sub-items when hovering the icons (as it is already the case when the left sidebar is expanded). Also, when a sub-item is clicked, open+expand the appropriate element (example: show settings with item "General" expanded if Settings>General is clicked)
When the left sidebar is expanded, clicking on an item in the sub-menu should also expand the corresponding item.
Which do you prefer: the new navigation or GitLab's existing navigation? Why?
The new one, definitely. I won't list all the "whys", it's probably enough to say that after choosing the new one, I feel like it is the right one. The above-mentioned remarks make it inconvenient to use for now, but I believe it will allow really quicker interactions with all features when it is finished & polished.
Though, that's already a really nice and promising work!
Do you use GitLab mainly for hobby projects, work projects or a mixture of the two?
Mainly (open-source) work projects; GitLab is also my only choice for personal projects.
After testing the new navigation for a while, here is my feedback so far.
1 - What do you like best about the new navigation?
I find it much more intuitive to use, things are in the place I'll naturally search for them.
It reduce the number of clics or time to access a sub-page (e.g. to access issue board, no need to clic the 'Issue' link and wait for the page to load before clicking on 'board': 'board' link is directly accessible via flyout menu
No need to scroll up to the top of the page to navigate through projet section
It allow in the future a feature to change the theme color (in instance administration settings for the default color, and overridable per user): this will help to make the difference between multiple Gitlab instances.
2 - What do you like least about the new navigation and why?
The default theme color will not be like by most of my users (for myself, it's ok).
The top main bar is a waste of space in wide-screen: why not display directly the content of "More" menu, and maybe extends the search field to use the remaining space? I think this could be dynamic using css (make the "More" menu appears only when there is not enough horizontal space).
Still some annoying bugs, you are working on them, so they should be soon past things.
There is a thing that bothers me every day at work with the existing navigation and that is not solved by the new one (but it's maybe a bit beyond frontend presentation): the admin view of Gitlab. At work, I am part time administrating et providing support for some of our Gitlab instances. The rest of the time, I am a developper using the Gitlabs for my projects.
As an administrator, my account allow me to access all project. On the pages that list projects, ou groups, on the search engine, all is displayed as if I was members of all projets/groups.
This is good for administrative/support duty as I can quickly access to things to help people in need.
But as a developer, MY projects are lost in all others (the global "Projects" page is totally usless, the search engine results are contaminated by all private forks of the project I'm searching).
Will it be possible to add a new button easy accesible for administrator (e.g. next to the button to access admin settings in the top bar) that we can used to quicky toggle between the adminitrator view, and the "normal user" view?
3 - Which do you prefer: the new navigation or GitLab's existing navigation? Why?
Definitly the new one. Since I enabled it, and despite some anoying bugs, I did not go back to the existing navigation, I did not feel the needs.
I also think that most of the people who need to use a product like Gitlab nowdays have wide screens, for which the new navigation is better.
4 - Do you use GitLab mainly for hobby projects, work projects or a mixture of the two?
Mixture of two. I'm using gitlab.com for hobby projects, and serveral private Gitlab CE instance every days long at work, as a developper and adminstrator of one of them. I found the new navigation is better too for Gitlab administration tasks.