Better hover/focus states for navigation bar buttons

I see this one is still left-over for %8.14

What about the following @cperessini ?

a simpel text-decoration: underline;

perhaps without the count badge:

@dimitrieh I was thinking about making the hover state look like a faded version of the selected tab. What do you think?

The secondary nav is not as accessible, as a simple color change might be missed by people with reduced vision. That could be fixed with the underlining you proposed, but I like that the tabs feel more like buttons than links, and I think the underline takes that away.

@cperessini agreed! although I would go for it with greys:

@dimitrieh Looks good! Just a couple of comments. If you hover over the currently selected tab I wouldn't turn the blue underline gray. That means there's no indication that you're hovering it, but I think the final stage should take precedence over a temporary one.

The other point is I think we should darken the text in the first level nav bar to #333 instead of #000 on hover . It's a small change, but it makes it look more like a hover state, not as intense.

We should decide whether we are doing to have a color change on hover here and then apply that rule to these hovers. It looks like we are applying a color change to the first navigation row but not the second. I think it should be consistent, so all text would have a color change on hover.

I really like your last suggestions. One comment, regarding the sub navigation, I would not expect an underline effect on hover. The sub nav GIF in @cperessini last comment makes sense since it connects hover and active state.

@tauriedavis I sort of agree, but I do think the tabs can be seen as special buttons... rather then just anchors.

the second row however is just an anchor atm

Yeah, I agree that they can be seen similar to buttons @dimitrieh . The difference, though, is that the background color changes on buttons. That doesn't happen here, so instead it feels like the text color should change - similar to text links.

@tauriedavis i see... it seems as a hybrid though.. as the border on hover.. seems like a special "text-decoration:underline;" What if we actually made them change background...

this is no end result be a long shot, but for inspiration purposes:

I think it might be weird to add a background color on hover since it's not self-contained like a button is. I actually really like adding the border-bottom that mimics a selected tab.

@cperessini's mockups here look pretty good to me https://gitlab.com/gitlab-org/gitlab-ce/issues/24149#note_18289683

Mentioned in merge request !7584 (merged)

I started an MR for this here: https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/7584

Can we vote whether there should be an underline on the subnav so we can get this in?

for underline
for color change
for underline and color change

cc @awhildy @pedroms @cperessini @dimitrieh @hazelyang

Reassigned to @tauriedavis

@tauriedavis Since we proposed in #24130 (moved) to change the color for all text links I think we should do underline + color change. I know we were just mentioning this is not exactly a text link, but the gif in the MR looks inconsistent to me.

@tauriedavis I voted for “underline and color change” but I also think that the first-level nav should have blue text on hover to be consistent with the subnav.

Thanks everyone!

This is what it looks like now, let me know your thoughts and if I should remove WIP from the MR @pedroms @awhildy @cperessini @hazelyang @dimitrieh

Thanks @tauriedavis! Quick question: is it intentional that the cursor is an arrow instead of a pointer like it is today?

I think that was just something weird with the gif recording I used. It does have the pointer in reality. Pretty weird. But thanks for noticing and asking!

Do you think tabs should have the same sort of hover treatment? I understand the nav is a special case, but visually these tabs do look quite similar to me, so I kind of expect a similar hover.

Yes! I think they should behave the same, I will add the treatment to those as well.

Also, I think the color of these hovers should match the color that we decide here: https://gitlab.com/gitlab-org/gitlab-ce/issues/24130 cc @cperessini

which gif recording app are you using @tauriedavis ? :)

Giving it another look, it still looks inconsistent :/ I think we can treat tabs and nav items differently and break the rule of blue color on hover. Why don't we make tabs, main nav and sub nav look and behave the same? We should either make them equal or make them different altogether, not something “in between”. We have dark gray/black color on hover for other elements in the header, why not be consistent with that?

Here, I made the navs and tabs look and behave the same. What do you think? Should we make them different?

For me, the sub nav style looks especially strange as it is right now.

@dimitrieh I used Recordit. I still need to get Gifox

@pedroms I agree that it still looks strange. I'm not sure the sub nav should be styled the same as the primary nav but I'd love to hear more opinions on it. I do like the grey hover instead of the blue, though. And you're right that it matches the hover for other elements in the top bar.

@tauriedavis grey hover instead of blue is pro as far as i am concerned!

subnav shouldn't be styled the same imo and looks better here: https://gitlab.com/gitlab-org/gitlab-ce/issues/24149#note_18820748

Repeating these same styles would be a set back in design as it reminds me a little of endless dropdowns for some reasons.. i can't really pinpoint it, but repetition in this case makes for worse design.... apart from that it becomes more bootstrappy.... which we want to avoid..

for this same reason I would like to let us avoid using this same style on the "open" "closed" "all"

Milestone changed to %8.15

@dimitrieh Yup, gray border on hover looks better. You are right in having different styles.

The thing that looks strange to me is having different colors for the active state in the main nav (black) and sub nav (blue). In my opinion, they should be similar in color. Also, because we don't have an active indicator (border-bottom) for the sub nav, I suggest we use something other than color to communicate its active state (such as font-weight). In this example, the active state has color: #555; font-weight: 600; and the badges inherit the color from the active and hover states:

The navigation needs some more love and attention, but I think these changes at least give it some consistency. What do you think?

———

Food for thought: why not make the header a bit more branded? On-premises, it is possible to replace the tanuki symbol with another image. So we can add an accent color to style the navigation links and the to-do badge:

Mentioned in issue #24304 (moved)

for this same reason I would like to let us avoid using this same style on the "open" "closed" "all"

I can see an argument regarding the secondary nav. However, the tabs resting state looks identical to the primary nav's resting state (minus the background color). Having a different hover treatment on that feels really bizarre to me. With the blue underline showing active, I'd expect the hover state to appear the same way.

@awhildy I agree with you that having the same active state in various navigation elements (tabs, main nav, sub nav) should mean that those elements behave equally on hover and so on.

I think what @dimitrieh was trying to say is that we should make an effort to avoid having the same style (normal, active and hover) for tabs and for the header navigations (main nav and sub nav). They should be visually distinct and not like my food-for-thought-mockup.

@pedroms ha! i like your thinking on branding, but it doesn't feel right.. these colors also have an emotional response.. and red for example doesn't seem to fit well with navigation. But these are just first thoughts on that.

I would be okay with the bolding, only if the it doesn't jump the navigation (makes the tab boxes wider).. also the "count" badge doesn't need the bolding imo ;)

I agree @awhildy however shouldn't we just have a separate UI at all for the main nav? in order for the sub nav to be consistent?

separate issue: we could consolidate the first nav bar and second as well.. just to give ideas:

more screen real estate!

I suggest we use something other than color to communicate its active state (such as font-weight)

Using font weight to indicate active state is a good change. If I remember correctly, we used to do that when we first switched to our current navigation system, but it got removed a few weeks later.

The thing that looks strange to me is having different colors for the active state in the main nav (black) and sub nav (blue)

About having a different font color for the sub-nav, now that @pedroms has pointed it out it does look a little bizarre to me. I always thought it was okay because it connected the subnav to the "active" meaning of blue without having to add an underline. Part of the problem is that the same color, #4a8bee, looks different when used as a font color and as un underline. Maybe using two different colors that visually looks the same could help here.

On the other hand, I don't think it would be a huge deal to simply remove the blue from the subnav. The drawbacks are that it looks a little more boring and it doesn't make use of color, which is more instantly recognizable.

we should make an effort to avoid having the same style (normal, active and hover) for tabs and for the header navigations

I think the tabs we use in Todos, Issues, MRs, etc. should have the same hover/active state as the main nav as long as they look the same. In my opinion, the only way to change that should involve having creating a third style of tab bar.

Food for thought: why not make the header a bit more branded?

The branding idea is interesting. I think we don't have a clear accent color in GitLab, even though we use blue a lot. If we had just one shade of blue that we applied everywhere (including buttons, anchors, etc.), kind of like in iOS apps, we could allow users to change that value and get their brand's color everywhere.

separate issue: we could consolidate the first nav bar and second as well..

@dimitrieh There are a lot of issues complaining about the height of the nav bars. We should compile them and see if we can implement something like what you proposed!

Yes, the custom accent color is just food for thought Thanks for your input. I don't want to “take over” this issue with this discussion, so maybe it's better if we talk about that separately.

Yup, I'd use a semibold weight to indicate the active item (the badge doesn't change weight, only color). I proposed this weight change only because of the sub-nav, which doesn't have any active indicator other than color change. Tabs and the main nav have the bottom border, but the sub nav doesn't.

Mentioned in issue #20303 (closed)

Updated MR with latest designs and unmarked WIP.

Added frontend and removed ~19492 labels

Status changed to closed by merge request !7584 (merged)

@tauriedavis I miss the blue color for the active subnav :O

mockup with bold font and color:

there is probably been thought about it.. but it just seems a little less bright/colourful/fun

@dimitrieh ha I said the same thing! https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/7584#note_19105263. Sounds like if there's more feedback we can change it back

Here are the comments regarding the active blue:

The thing that looks strange to me is having different colors for the active state in the main nav (black) and sub nav (blue)

--

About having a different font color for the sub-nav, now that @pedroms has pointed it out it does look a little bizarre to me. I always thought it was okay because it connected the subnav to the "active" meaning of blue without having to add an underline. Part of the problem is that the same color, #4a8bee, looks different when used as a font color and as un underline. Maybe using two different colors that visually looks the same could help here. On the other hand, I don't think it would be a huge deal to simply remove the blue from the subnav. The drawbacks are that it looks a little more boring and it doesn't make use of color, which is more instantly recognizable.

I agree that it does look more boring. I am fine either way but we can definitely change it to blue if there are more strong opinions.

What about another color? Purple or something? If we go back to using a color, is the bold still necessary? I think it looked a little cleaner with no bolding at all in the active nav links

I think another color would be wrong, as we use blue as the accent color for navigation everywhere. ;) also the emotional response towards blue in combination with navigation is the correct one currently.

even with those reasons, I do not think they weigh up against the boringness IMO

@cperessini what do you think? :)

I miss the color, too. It looked more fun and lively before and I think that can be enough of a reason to bring the text color back.

Just for the sake of discussion, maybe we can add some color without having to change the whole word?

Mentioned in merge request !7829 (merged)

I added the blue back here: https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/7829

I think the other shapes might be too much in addition to the underlines for the other tabs.

Mentioned in commit b021cc26

Yes, the blue does give it a nicer look. But we still need to solve this somehow, because blue text has a deep attachment to clickable links (not active). I don't have a particular suggestion right now, but this looks like an issue from not having a more branded header.

added ~1434245 label

mentioned in issue gitlab#6851

Better hover/focus states for navigation bar buttons

Default state

Hover state

Default and hover states

Default and hover states

Designs

Child items ...

Activity

Admin message

Admin message

Better hover/focus states for navigation bar buttons

Default state

Hover state

Default and hover states

Default and hover states

Activity