Navigation - Reduce header height and redesign active/hover/dropdown styles

Resources

FE @annabeldunstone

Description

• Reduce header height: Having as much vertical screen space as possible is very important to users. Being a fixed element, always visible on the screen, the header can be further reduced.
• Show all global links by default and collapse them into a “More” dropdown as space gets tighter (per https://gitlab.com/gitlab-org/gitlab-ce/issues/35091)
• Reduce size of GitLab logo and font size of global navigation elements
• Redesign header active/hover/dropdown styles: The current active style in the header boldens the text, which moves the links when navigating from page to page
• Change the icon of the “New…” button to fa-plus-square and move it to the left of the search bar
• Place “Help” inside the user dropdown for logged in users and in the global navigation for anonymous users

Proposal

Check all design variations and specs (for implementation notes, spacing, sizes, colors and text copying)

Links / references

• Meta: https://gitlab.com/gitlab-org/gitlab-ce/issues/32794

changed title from Navigation - Add GitLab wordmark, reduce header height and redesign active/hover styles to Navigation - Add GitLab wordmark, reduce header height and redesign active/hover/dropdown styles

changed the description

@annabeldunstone I think you brought up the wordmark change, am I right?

@cperessini mentioning you since we've talked about most or all of these changes.

@tauriedavis in case you want to weigh in.

mentioned in commit gitlab-design@9966d7fe

The wordmark was added in https://gitlab.com/gitlab-org/gitlab-ce/issues/35236 :)

I built out the header at 48px with the new 8px grid. Is this one 40? Seems small but maybe I am just not used to it yet

The current active state for sub menu items seems more distinct. The change above is harder to notice with just the purple border. Thoughts?

Are we going to change all dropdowns to use the gray background hover state instead of blue?

I'm all in for reducing header height.
Maybe want to set a fixed height for header logo's as well? :)

Previous:

(Jep, same logo image)

View in a project:

@tauriedavis Yes, this one is 40px tall. It does seem small, but for a fixed element, I think it can be further reduced.

I agree that the current active state for sub menu items in the sidebar is more distinct. However, I think the proposed change keeps the active link clearly visible and reduces the visual complexity. Do you think having a gray background around all of the sub menu items is needed? I don't have a strong preference towards keeping that background, but I don't think it's really that needed. Maybe you have a different opinion?

About the dropdown menu items hover, I feel like blue is too strong for a hover state. Having a vivid color like blue for hover also limits our ability to highlight active options/items, because it is more akin to active than hover, which is something we already do in tabs, for example. Furthermore, it’s tricky to make blue (or any other vivid color) work with labels, colored icons and avatars (that’s one of the reasons I went with a neutral color, especially if you look at this mockup). But then again, I may be seeing this through a different lens and would really appreciate your input! @cperessini you might also want to chime in on this subject since you were involved in the issue/merge request filters redesign.

@jessereitsma thanks for bringing that up. That problem has been reported in https://gitlab.com/gitlab-org/gitlab-ce/issues/35439 and will be fixed with https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/13034.

Yes, this one is 40px tall. It does seem small, but for a fixed element, I think it can be further reduced.

Sounds good, It makes sense, esp if we keep it fixed.

Do you think having a gray background around all of the sub menu items is needed?

I think it helps visually group those elements. Its easier for me to navigate that area and find other sections of the sidebar more easily. For example, if Im on an issue, it is much easier for me to quickly navigate to MRs because there is a distinct separation between the two. Without the background, the list starts to look really long and is more difficult for me to scan.

But then again, I may be seeing this through a different lens and would really appreciate your input!

I think the grey background is fine as long as their is enough contrast! That was a problem with the light blue we still have in some places. I just wanted to make sure that if we change the hover color for the nav bar, we also plan to change it for the other dropdowns throughout the site :)

I have been using this top bar in my designs for the couple of days and I think it's a good move. The only thing I'd change is the size of the Tanuki and the GitLab wordmark, they look a little big to me compared to the rest of the elements. Same with the + button.

I think it helps visually group those elements. Its easier for me to navigate that area and find other sections of the sidebar more easily.

Agree with @tauriedavis here, it makes it easier to tell which elements are subsections. I don't think the purple bar alone does a sufficiently good job at grouping them at a glance.

I think the grey background is fine as long as their is enough contrast

Agree here too. I used the vivid blue hover state for the new search dropdowns because we were already using it in slash commands and I thought it looked better than the light blue we had been using. I liked that it was a vivid color because it made GitLab feel more lively. It is true, though, that it has given us problems with colored elements (#28921 (moved)), so going with a neutral grey for all the dropdowns in the app is a smart choice.

mentioned in issue #28921 (moved)

changed milestone to %10.0

@pedroms @tauriedavis we are definitely going with grey hover states throughout the app, right? We need to let @winh know so he can wrap up !12186 (closed) for 9.5.

I think so. @pedroms Can you confirm the color? It looks like #e5e5e5 to me but maybe we can use #ebebeb to match the grey of the sidebar?

@pedroms From the mockup in the description, it looks like the hover background has a 1px white border:

Is that intended?

The most recent dropdowns don't have that (yet):

@winh we can use #eee which currently maps to the $gray-darker variable.

@winh good eyes! Yes, I added a 1px padding so that there is some contrast, not only between the dropdown and what's under it, but also between the dropdown's own background and the hovered menu option. Does that make sense to you? I believe that these details matter for a more polished UI

mentioned in merge request !13106 (merged)

marked this issue as related to #34026 (closed)

mentioned in issue #34026 (closed)

mentioned in merge request !12938 (merged)

mentioned in merge request !13116 (merged)

mentioned in merge request !13127 (merged)

mentioned in merge request !13182 (merged)

mentioned in merge request !13183 (merged)

mentioned in merge request !13184 (merged)

mentioned in merge request !13193 (merged)

@pedroms i feel that the logo being still the same size, makes this feel a little cramped. I would love to keep it light feeling (as it is already quite heavy with colors )

I also just noticed the change to the search box, its a lot darker and almost blends into the header. What is the reason behind this change?

mentioned in merge request !13253 (merged)

mentioned in merge request !13274 (merged)

added Deliverable label

added UX and removed UX ready labels

added UX ready and removed UX labels

changed the description

assigned to @annabeldunstone

mentioned in merge request !13417 (closed)

mentioned in merge request !13421 (merged)

mentioned in merge request !13424 (merged)

mentioned in merge request !13426 (merged)

@pedroms is there a spec file for this? So I can get the colors/sizes etc down properly

mentioned in issue #35091 (closed)

mentioned in merge request !13455 (merged)

mentioned in merge request !13457 (merged)

mentioned in commit gitlab-design@251d4eef

changed title from Navigation - Add GitLab wordmark, reduce header height and redesign active/hover/dropdown styles to Navigation - Reduce header height and redesign active/hover/dropdown styles

changed the description

marked this issue as related to #32794 (closed)

@annabeldunstone updated the description with the SSOT, and link for design variations and specs. One thing worth having in mind is testing with a custom logo, which currently keeps the “GitLab” wordmark. Here's a quick example of what it should look like (with the AVG logo):

Normal/resting	Hover

Thanks @pedroms! A couple questions:

• What do these two icons mean?

• Now that every link is displayed in the top nav, do you think it looks a little cluttered? I didn't think Milestones/Snippets/Help was important enough to warrant always being one click away no matter where you are

One more idea- Could we put Help back in the user dropdown, instead of always displaying it on the main navbar?

cc @pedroms @sarrahvesselov

One more idea- Could we put Help back in the user dropdown, instead of always displaying it on the main navbar?

I 100% agree with this @annabeldunstone. @tauriedavis pointed out that guest users do not have a dropdown and this was the original reason for moving it out. I liked your suggestion to show it in the main toolbar if you are not logged in @annabeldunstone. Thoughts Pedro?

Now that every link is displayed in the top nav, do you think it looks a little cluttered?

There was quite a bit of feedback asking for this. The compromise we came up with was to show it only if there was sufficient space. The new icons that have been added do increase the clutter, what are those @pedroms?

@annabeldunstone the “wrench” is for the admin area, the “tachometer” is for the Sherlock Transactions, and the “incognito” is for the “stop impersonation” feature.

Bear in mind that it looks cluttered but that is the worst-case scenario. This is what a “regular” user would see:

The discussion for showing all of the items came from https://gitlab.com/gitlab-org/gitlab-ce/issues/35091.

“Help” must be visible if you're not registered/logged in, that's why it is outside. However, I do understand that it could be less “in your face”. I'll post a proposal.

We originally had the sidebar hover states be purple, so it went from an extreme light color to an extreme dark color and it was kind of distracting. We switched the hover from purple to white since then.

I am wondering if the same thing is going to come up with these new hover states here since they are going from extreme purple to extreme light color (white).

@tauriedavis maybe you meant the active states? Those are white, but the hover states are subtle, similar to the sidebar. Was I able to address your concerns?

mentioned in merge request !13473 (merged)

Oh yes, I think so! Thanks @pedroms - always on top of everything

mentioned in merge request !13476 (merged)

mentioned in merge request !13478 (merged)

mentioned in merge request !13479 (closed)

mentioned in merge request !13480 (merged)

changed the description

@annabeldunstone @sarrahvesselov @tauriedavis to solve the “Help” issue, let's place it inside the user dropdown for logged in users, and in the global navigation for anonymous users:

Anonymous	Logged in

I've updated the description and specs with this change.

mentioned in commit gitlab-design@bd639a49

mentioned in commit gitlab-design@6184c24f

mentioned in merge request !13530 (merged)

mentioned in merge request !13532 (merged)

mentioned in merge request !13534 (merged)

mentioned in merge request !13543 (merged)

mentioned in merge request !13544 (merged)

mentioned in merge request !13546 (merged)

@pedroms Should the border radius of these be 3 to match our buttons? Instead of 4

mentioned in merge request !13557 (closed)

mentioned in merge request !13562 (merged)

mentioned in merge request !13574 (merged)

mentioned in merge request !13577 (merged)

@pedroms I think we will update the icon as well in this version, so I provide the new icons of the navigation:

• New project
• Issues
• Merge requests
• Todos
• Arrow

mentioned in merge request !13584 (merged)

mentioned in merge request !13585 (merged)

mentioned in merge request !13587 (merged)

mentioned in merge request !13590 (merged)

mentioned in merge request !13592 (merged)

mentioned in merge request !13594 (merged)

mentioned in merge request !13595 (merged)

mentioned in merge request !13596 (merged)

mentioned in merge request !13599 (merged)

mentioned in merge request !13600 (merged)

@pedroms Should the border radius of these be 3 to match our buttons? Instead of 4

@tauriedavis eagle eyes! I think you're referring to the search input and dropdowns, so yes, let's keep their border radius in sync with the buttons. To be honest, I used 4px because it's a measure that stems from the 8px multiplier (2px felt too subtle), and maybe we should think if it makes sense to apply that to border radiuses (3px is “off” from that scale). I've mentioned this on #24310 (moved) so we can discuss it in context. Thanks

---

@hazelyang thank you so much for designing those icons! Two small notes:

• Plus button: I would prefer to have the plus button with a filled rounded square instead of hollow so that we can bring more attention to it. I think it's great that you made a hollow version so we can change it in the future if necessary, but in this particular case, filled works best
• Arrow/chevron: I feel the stroke width is too thin. The stroke width of the one we're using today (fa-chevron-down) looks more “legible” and balanced when paired with text, in input selects/dropdowns, etc. Can you please see if it would make sense to thicken the stroke?

mentioned in issue #24310 (moved)

That makes a lot of sense @pedroms! I only noticed because I was building out the new design for the library ;) Will comment on the other issue regarding the radius.

For the arrow/chevron, I used @hazelyang's arrow-down svg. It looks like this:

(note the plus icon is not correct).

I can change the chevron to the new icon, but it is a little thicker like @pedroms was mentioning so maybe it works? Let me know @hazelyang (Or just update it in the design library!)

@tauriedavis oh, that chevron icon design looks great! Perfect stroke width @hazelyang WDYT?

@pedroms I also just noticed that the padding you have for the tabs in the header uses 8px all around. The above image is set to 8px 16px to match the buttons. What are your thoughts on the padding? Should I change it to 8px on the sides or keep them the same as the buttons?

mentioned in merge request !13611 (merged)

mentioned in merge request !13615 (merged)

that chevron icon design looks great! Perfect stroke width @hazelyang WDYT?

@pedroms @tauriedavis Looks great for me as well! Thanks!

I also create another new icon which is thicker than the old one. If we need to change it in the future, we can use it.

Plus button: I would prefer to have the plus button with a filled rounded square instead of hollow so that we can bring more attention to it. I think it's great that you made a hollow version so we can change it in the future if necessary, but in this particular case, filled works best

@pedroms I pushed the filled one to my design repo. --> plus-square

mentioned in merge request !13623 (merged)

mentioned in merge request !13624 (merged)

mentioned in merge request !13626 (merged)

mentioned in merge request !13628 (merged)

mentioned in merge request !13630 (merged)

@tauriedavis padding-wise, I prefer to open an exception for this as there are a lot of links (we need to keep it compact) and also to be consistent with the padding for the icon links. So use 8px for these.

Regarding the 16px side padding for buttons, I thought we had settled on 12px as an exception (as it's outside of the scale) because they look more balanced and align better with inputs (also with 12px side padding). But maybe you found out a scenario where 16px is best?

@hazelyang great, thanks!

Regarding the 16px side padding for buttons, I thought we had settled on 12px as an exception (as it's outside of the scale) because they look more balanced and align better with inputs (also with 12px side padding).

I don't remember this Do you have an example of what input/button alignment you mean?

Here is an example of the buttons I have:

Here is an example of an input (dropdown in this case since the icon is present, would be the same without an icon):

Everything is in brand.ai now. I encourage everyone to check it out and provide feedback ASAP so we can finalize these basics. I will post in that issue directly so people can provide feedback there. https://gitlab.com/gitlab-org/gitlab-design/issues/26

@cperessini if you're able, can you please follow this issue as I'll be off? If not, let me know and I'll mention another UX Designer.

@pedroms Sure thing! Should we reassign since you'll be gone for 2 weeks?

assigned to @cperessini

mentioned in issue #37215 (closed)

mentioned in merge request !14049 (merged)

closed via merge request !13480 (merged)

mentioned in commit 340b46a2

mentioned in issue #34917 (closed)