New top bar is live

Question

UPDATE: TeamDAG has reviewed all of the feedback below and updated with status. We are actively working on fixes as time allows. Thanks to everyone who contributed constructive feedback.

We released the new top bar for all users across all communities. The only exceptions are Area 51 and chat. They will be coming a little later.

I wanted to take this opportunity to respond to some of the key pieces of feedback we received after the initial post about the top bar coming to the network. I'll try to summarize these feedback points below, say whether we are/aren't addressing each, and give you a short explanation why or why not.

Consistency between SO and SE network sites

Concern: Navigation links (questions, tags, users, etc.) are not folded into the top bar on SE network sites. The color of the top bar is different.

Status: status-bydesign

Explanation:
Navigation - In order to integrate navigation (as it is on SO) we would need to revisit each of the site themes and we don't have the resources for that now. We may revisit this in the future. But this would likely require reducing the level of theming that we support. The team believes that the current compromise results in a coherent design that users can understand, even if it isn't completely consistent.

Color - The top bar needs to be black on network sites, since that works best with the many themes. The SO top bar color was a branding decision and won't be changed to black.

Review queue icon sucks

Concern: The review queue icon doesn't look anything like what I'd expect. It isn't recognizable. (note: this is actually a holdover from SO feedback).

Status: status-completed

Explanation: We are happy to change this icon to one that works better for everyone. We ran a survey for people to pick their top two favorite icons. Over 600 people participated. We are doing some additional design review on the top two candidates and will announce the results soon.

Review queue false positives

Concern: The review queue shouldn't "light up" or have the red dot when there are no items to review.

Status: status-planned

Explanation: We've squashed some bugs with the new design, but probably have a few more to deal with. We will continue on our bug stomping journey.

Add labels to icons

Concern: Still, the icons aren't as recognizable as they should be. But if you add labels below them they would be. Please add labels.

Status: status-declined

Explanation: There is no room for legible labels in the current design. The font would have to be so small that it is arguable if it would help many people. (The example posted to meta cheated a bit by changing "achievements" to the much shorter "awards".)

Stickiness global preference

Concern: SO top bar is sticky by default with a preference to unstick it. Network site top bar is not sticky by default and there is no way to make it so. Can we get a global preference for setting stickiness across all sites?

Status: status-review

Explanation: We think this is a good thing to have, now we just need to figure out how to make it so. This could be a somewhat expensive setting since we currently don't have any global settings. That said, we are actively investigating it.

Moderator tools are difficult to see/access

Concern: Inserting the mod tools to the far right (after the site switcher) creates confusion and make them difficult to see/interact with. Move them.

Status: status-completed

Explanation: We have moved these items to the left of the profile. This has the benefit of keeping the site switcher in the same location at all times. The new location for these tools has higher visibility. Also, we are going to continue investigating additional improvements for moderators.

Search transition is confusing

Concern: When a user clicks into the search box it animates to expand. Stop it! It's annoying.

Status: status-completed

Explanation: This was needed on Stack Overflow where the search box can get very small due to space constraints. It isn't necessary on other sites and has been turned off.

Clickable Stack Exchange logo

Concern: The Stack Exchange logo is useless. Clicking on it should trigger the site switcher (see below) or it should lead to stackexchange.com.

Status: status-completed

Explanation: This has been fixed. Clicking on the Stack Exchange logo will display a brief popup about the Stack Exchange network, and a link to stackexchange.com.

Site switcher

Concern: Moving the site switcher from the left to the right is confusing. Move it back.

Status: status-bydesign

Explanation: We know that this will take some getting use to, but based on previous experience with changes like this we are confident that everyone can make this adjustment.

Inaccessible color choices

Concern: Some designs choices are inaccessible for people with low vision or color blindness (specifically the green achievements icon for people with deuteranopia).

Status: status-planned

Explanation: We are undergoing a general evaluation of our accessibility and will fix issues as a part of that process.

Where do we go from here

There are a number of other fixes that we made to address more minor issues or bugs in the top bar. So this list isn't exhaustive, but covers the biggest issues. Obviously there are some items that are still under work. We will continue working on them and listening for additional feedback on the new top bar.

Answer 1

I have things to say about these:

⚑ Flag is obviously already used for flagged messages. It wouldn't make sense to use it for non-flagged items. My first thought if I saw that would be "Somehow I gained moderator privileges?"

✓ Check mark is obviously already used for accepted answer on the site. These are the top two symbols I have problems with you trying to use them for review queue. These just don't make any sense.

☰ Hamburger icon with a smaller bottom bun? It's for settings, everybody knows that thanks to modern GUI practices. Only in the second icon it resembles a bullet list. Hamburger with a check mark for "confirm settings"? List of questions with an accepted answer? Don't think so.

Dashboard icon in the left column conveys a meaning of a task productivity tool, like Trello. Dashboard with a check mark… something about accepted answers?

Comment icon means… "comment". Do you gotta leave comments in the review queue? Sure, sometimes, but not always. There's gotta be a better icon though.

Bottom right is a comment about a stapler.

---

Look how obvious the inbox icon is − there's no confusion. "Incoming messages" is exactly what it means. And the question mark icon for help. Such a great choice. And the cup with a star for awards!

Surely you can find better options for a review queue, something that says "review" with its symbol and doesn't cross over with already used symbols on the site.

The presented options are not quite as good at representing what they mean as the other icons. Please think of better options to choose from.

---

Why not just the word "review"?

Answer 2

I wanted to add to the frustration about the site switcher being moved and the StackExchange icon becoming a simple link to a completely different site from the current stack.

Given that the search bar right next to that icon has the current stack name in it, the icon and top bar become part of the current site interface, so having that icon jump to another site is not intuitive.

Additionally moving the site switcher away to the other side adds to the confusion - especially given the iconography doesn't exactly scream "click here to go to another stack" as opposed to "hay maybe this goes to the chat" (not that I'd want it to).

---

The changes does of course lead to an unexpected but effective use case...

(Animated GIF - click to view - I figured it's less annoying to show a static image in the post)

Answer 3

Well, I noticed this today:

That looks familiar.

Not sure what this means...I think Google made this change after the SO top bar redesign. Did they, um, "borrow" the icon from you?*

---

*Yes, I see the different corner radius and spacing between the top and bottom halves of the stapler. They're clearly the same design.

Answer 4

Site-specific feature requests

I can see you're already getting inundated here with feedback and requests for changes on the new top bar, and that's just for network-wide things. Some sites which have especially customised styles (Science Fiction & Fantasy and Photography) must be giving you particular headaches since there are assorted site-specific bugs and feature-requests relating to the top bar. To make things simpler than having to follow all the per-site metas, I'm going to try to collect these site-specific issues here.

Science Fiction & Fantasy

1. Can we make our new top bar slightly transparent black, like our old one?
2. Can we get our blag link back, please?
3. Can we make our Top Bar sticky? (not sure how site-specific this one really is)

Ask Ubuntu

1. Bug with new top bar status-completed
2. Review queue false negatives on the new top bar status-bydesign
3. New navbar bug review queues not operating as expected

Other sites?

I've looked on a dozen or so meta sites, but didn't see any others with topbar-related bugs or feature requests. If anyone knows of some, please edit them into this answer.

Answer 5

I'm ambivalent about what the site logo should do, and where you put the site switcher. I'll get used to it either way. But the new design is deliberately inconsistent:

1. In the new design, the upper-left stackexchange logo does different things on different sites - on SE it opens the site switcher and on other sites it jumps to SE.

2. The site switcher is in different places on different sites, left on SE and right on everything else.

Whatever you decide on for the new design, it would be least-surprising if the same elements did the same thing on all sites

Answer 6

status-completed

What's with the super bright search input on black (all sites except SO)?

vs

What gives? _{whose bright idea was this?}

---

Update: ok I was talking from the point of view of a user who knows where the search is and how to use it, which is apparently not very common, so I understand this design decision and can't really vote against that.

---

More important update:

As we've discussed in the comments, it seems like contrast helps with visibility and increases search usage, which is good for reducing duplicates and helping people find answers sooner.

But I'd like to ask the design team: why did you choose to not make the search bar as extremely noticeable on StackOverflow as on all the other SE sites? StackOverflow has most questions asked per day, and by far the most review activity than on any other SE site. How do you explain this decision?

Answer 7

status-planned

On my MBP, I usually Command-click a link as the equivalent of middle-clicking (opening in a new tab), since Ctrl-clicking is like right-clicking (open context menu). However, with the new review and site-switcher icons, Command-click behaves like a normal click (opens the corresponding drop-downs). On an Ubuntu VM running on the same MBP, Ctrl-clicking opens the dropdowns.

What happened to break Command-click open-in-new-tab for these two? This aggravates the slowness of these dropdowns.

Answer 8

The gap between "Log In" and "Sign Up" at the Stack Exchange homepage is too narrow.

BUGGED LAYOUT : Visit stackexchange.com in your browser's private mode to reproduce this.

BUG : Missing space between "Log In" link and "Sign Up" button on top bar at stackexchange.com when not logged in!

On the contrary, the top bar at Stack Overflow has proper spacing between the "Log In" link and the "Sign Up" button when not logged in!

CORRECT LAYOUT : Visit Stack Overflow in your browser's private mode to reproduce this.

Answer 9

I like new top menu styles.

but I have the new change to better height & colors in stylish:

.top-bar .searchbar input[type="text"].f-input {
    background-color: #363c42;
    color: #e5e6e7;
}

.top-bar._search-open .searchbar input[type="text"].f-input {
    background-color: #363c42;
}

.top-bar .searchbar input[type="text"].f-input:hover {
    box-shadow: none;
}

.top-bar .searchbar input[type="text"].f-input:focus {
    box-shadow: none;
}

.top-bar {
    height: 52px;
}

.top-bar~.container {
    margin-top: 52px;
}

Answer 10

I find that the tool tip for the hamburger symbol is wrong. Please see screen shot below: