status-completed - we implementd a content bubble that explains the network and a links to the SE.com front page. Something like Robotnik's idea.

I don't think linking the Stack Exchange logo in the top left to the stackexchange.com site is an improvement, it's worse than the old inactive version.

For a new user that has never seen the old site, the expectation for clicking on the site logo would likely be that it takes them to the homepage itself. This is not the case here, it takes them to an entirely different site they never saw before.

The SE network is complicated, but that complication is not something we should inflict on just anyone careless enough to click on the logo in the top left.

For established users, muscle memory alone will mean lots of users clicking on that icon expecting to open the site switcher. Changing the behavior of a UI element that existed for years at that specific place, and really looks the same is incredibly confusing. Making that UI element do nothing at all is terrible UX, but making it do something that is the wrong thing most of the time is even worse.

With the rate of updates stackexchange.com receives, I don't have the impression that SE cares all that much about it. So why would you want to lead a large number of users to a site that isn't all that useful to most users, and is not really maintained well anyway?

Consistency between SO and SE network sites

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.

So align SO with the rest of the network!

Review queue icon sucks

We are happy to change this icon to one that works better for everyone.

I took your survey, but it's missing an option for “they all suck”. I picked the ones that sucked marginally less (at least, it shows that you're capable on improving on the current icon), but I have a better proposal:

I'm fairly confident that most people will figure out what that button does pretty quickly.

Review queue false positives

The review queue shouldn't "light up" or have the red dot when there are no items to review. (…) We've squashed some bugs with the new design

This is not a design problem. We've had long discussions of how to improve the review counts. Why has the only response from SE been to remove numbers and expound on how it's infeasible to get the information to be correct all of the time, rather than explore solutions to make the information correct most of the time?

Add labels to icons

There is no room for legible labels in the current design.

You could remove the icons that don't look anything like what they do (the square bra, the scratch pad, the speech bubble). That would save room.

Search transition is confusing

This was needed on Stack Overflow

No, it isn't. Just give SO the same top bar as the rest of the network. Problem solved.

Clickable Stack Exchange logo

The Stack Exchange logo is useless. (…) Clicking on the Stack Exchange logo will open stackexchange.com in a new tab.

So instead of doing nothing, it does something nobody uses? What's the point?

Site switcher

we are confident that everyone can make this adjustment

Sure. But why change in the first place? Are you going to flip every couple of years?

I don't like many of the things about the new top-navigation. Thus, I wrote a userscript which allows you to adjust the top-navigation to the way that you want it.

The user script is: Top-navigation choices.

You can set preferences for how you want the new top-navigation to look. It works on all sites with the new navigation. There's:

• Move drop-down buttons (left, right, center)
• Adjust height
• Global sticky/not sticky top-nav
• Add a dark theme (top-nav) for SO/MSO
• Merge the site-switcher with the logo
• and more.

Everything's optional. You can have the top-nav look the way you want.

By default, on MSE it looks like:

Drop-down menu buttons can be centered:

Here are the options in action:

status-completed

Thank you very much for this followup. I know you have a near-thankless job, so here's some thanks to offset that.

On "Clickable Stack Exchange logo", you wrote:

Explanation: This has been fixed. Clicking on the Stack Exchange logo will open stackexchange.com in a new tab.

All of that sounds fine except the last four words. Opening the link in a new tab is inconsistent with almost everything else on SE. (We don't even open Hot Network Questions in a new tab, and that's about as "not this current site" as you can get.) A new tab for the logo is therefore surprising and ends up being pretty disruptive. I wrote more about this in this late answer to the earlier announcement (sorry, didn't know this update was coming or I'd've waited).

Please open the link in the current tab. It's what users expect on SE. People who want a new tab have an easy way to get one; people who don't have no easy way to avoid getting one.

status-declined — The site switcher, in its current iteration, has been on SO.com for 8 months or so and on all other sites for about a month. We will leave the icon, location and behavior as is for now. We will reconsider how it works in the context of the information architecture investigation mentions in the November TeamDAG update.

I risk repeating myself, but the site switcher symbol is confusing. I can (grudgingly) live with it being where it is now, but I still often mistake the symbol for chat. The drop down menu contains a chat link so I do eventually get what I expect, but I have hard time finding the site switcher. The tooltip helps, but I would recommend exploring new ideas for the symbol. I know symbols are hard, but could we at least see and discuss some options?

Comment to the status update: Thanks for the update! I am glad to see that this is being seriously considered instead of throwing in a thoughtless quick fix. However, I would prefer to have some sort of short term solution too, but I admit I have nothing up my sleeve to offer, apart from a community discussion of options.

RE: Clickable StackExchange Logo

status-completed - we implemented a content bubble that explains the network and a links to the SE.com front page. Something similar to your idea below.

I do like the new top bar and I think it's a net-positive change, but I feel like the experience when clicking the Stack Exchange button is a bit jarring. While I definitely like that this now does something, I think immediately jumping away from the current Q&A site to stackexchange.com might be a bit weird for all users involved:

• New/Inexperienced/Single-site users find it jarring to end up somewhere else other than the current site they're on.
• Experienced/Multi-site users that regularly used the old dropdown now click it and end up on a different site immediately, when this likely wasn't their intended action.

I think the addition of a simple dropdown that explains what the Stack Exchange network is (say, the Mission Statement from the Tour?), with links off to the website proper and the Tour itself would be helpful, and act as a 'buffer' to the navigation to help alleviate some confusion. So imagine this, in dropdown form:

Stack Exchange ▾

Stack Exchange is a network of 170 communities that are created and run by experts and enthusiasts like you who are passionate about a specific topic. We build libraries of high-quality questions and answers, focused on each community's area of expertise.

Visit Stack Exchange                                                                                                   Take the Tour

This is just a suggestion but I'd be interested in hearing some feedback - What do you think?

Updated with status tags to identify the various requests and which we are trying to address and those we aren't.

I thought I'd get used to the new top bar. I tried, really. But I was wrong. I can't get used to it.

It's worse than what we had before, in all aspects:

1. status-completed I keep clicking the SE logo to the left, close the new tab, sigh, and click the hamburger site switcher.
2. status-declined I still can't really tell which icon is what, until something lights up. If I want to see inbox or reputation changes I usually end up clicking the wrong icon, go arrgh and click the other one.
3. status-review I never see the review icon lights up here on MSE even when there are some items. I sometimes click it anyway, see some grey review queues and wonder why they won't cause the icon itself to indicate this.

I am well aware this will not be changed. It can't be fixed. This won't make me leave or rage quit, but it's just something annoying that is always there.

However, I'm afraid many long-time users will be even more annoyed and reduce their time on the sites or even quit. Stack Exchange will suffer a big hit. Not fatal, but losing many active users is very bad, especially on smaller sites.

status-declined For the sake of those users, and myself, can we please have the option to revert back to the "old" top bar? Like there is the option on Stack Overflow to switch between "new nav" and "old nav", there can be such option added to preferences on all sites. (Note: this isn't relevant for Stack Overflow, where the top bar is totally different.)

status-declined The primary CTA in this situation is "Join". We previously tested it in various locations and far right was the best. So we will keep the current order.

The switch switcher gets shunted aside by the "Join this community" button on sites I haven't joined:

It would make more sense to swap these two because:

1. The switch switcher is on the far right everywhere else, and
2. The "join this community" button would replace the other community-related icons (review, rep, etc.).

On another note, please don't hide the inbox on sites I haven't joined. I should be able to check notifications from sites I have joined whilst browsing sites I haven't joined.

For now I'm using these Stylish rules:

#custom-header, .-container .-main, .-ctas {
    /* Nuke the Ubuntu custom top bar, the SE logo and the "join" button */
    display: none;
}

#search {
    padding-left: 0;
}

.js-top-bar {
    /* Keep the top bar on top, force black for AU */
    width: 100%;
    position: sticky;
    background-color: black;

}

.top-bar~.container {
    /* Remove the extra padding for the site header */
    margin-top: 0;
}

.top-bar .my-profile .-rep {
    /* rep count needn't be bold */
    font-weight: normal;
}

The top bar is now, AFAICT, consistent across SE sites.

status-planned - We are working on making this change. It is a little involved, so give us some time to get it working. The plan is to do this for all of the drop downs.

moderation

Our link to the diamond moderator dashboard got shoved out of the way a bit, which is unfortunate: that link's inside a dropdown menu which, first, has to load before the link shows up.

In countries like Australia ping time can make loading take a few seconds. That's a bit of inconvenience we just didn't have before, so this becomes sort of a functional downgrade.

Either one of these things happening would be good:

• Make the dashboard link a static part of the page that doesn't have to load first. When I click the diamond menu, show that "mod messages" grey banner with the dashboard link straight away. By all means load the messages to show in there, but don't make me wait on those in order to access the dashboard.

• Move the dashboard link out of the diamond menu so it doesn't have to wait on that load time and so we can click it straight away. We were OK with that before when it was a "mod" link, it might not have been the prettiest thing but only a limited audience was going to see it anyway:

  

Disclaimer: I'm not a designer and I don't have any aspirations to be one. I'm also speaking as a user and not as an employee.

I wonder if there can be a compromise on labels:

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".)

So that we are all talking the same thing, here is the image:

On the topic, poke commented with a link to Myth #13: Icons enhance usability, which notes:

The Microsoft Outlook toolbar is a good example: the former icon-only toolbar had poor usability and changing the icons and their positioning didn’t help much. What did help was the introduction of text labels next to the icons. It immediately fixed the usability issues and people started to use the toolbar. In another study, the team of UIE observed that people remember a button’s position instead of the graphic interpretation of the function.

In other words:

1. labels are most important for new user discovery and
2. position is more important than the actual icon for experienced users.

By coincidence, our top bar accumulates more items as the user becomes more experienced. This suggests a compromise solution: use text labels when a new icon is added to a user's top bar and remove labels for icons a user already knows. Anonymous users would have the network and help icons labeled in addition to the "Log in" and Sign Up" links:

There's quite a bit of horizontal room at this stage. We really don't lose much room at the next stage:

My mockup is cramped and I used "awards", but there's a lot of room here to space out icons + labels. A competent designer would do a much better job—maybe good enough to look ok. (Also, I somehow got bigger and brighter lettering here. I'm not going to try to find out why, but I like my first mockup much better.)

By the time someone has access to the review queue, they will have a pretty good idea of where the inbox and achievement icons are. As long as we substitute the review icon for help without rearranging the old icons, it probably wouldn't hurt too much to remove some labels:

At this point, the items taking up space are reputation and badges. For a very small subset of users, there's also some moderator icons to be added. Obviously, it would be great to label everything. But the top bar is really crowded for mods:

I don't have a good solution to that, but maybe we can rely on moderators to have learned the position of icons over the years? If we can somehow guarantee they won't move around in the future (and yes, I anticipate the top bar will change again at some point) maybe that will suffice?

Notes on the mockup example:

• I'm a fan of small fonts, but it is a usability problem for others. I think bigger labels would be better.

• While "awards" != "achievements", I'm ok with that inconsistency. For that matter, I like awards as a term for the amalgamation of reputation gains, badge awards and new privileges. I'm not sure we are tied to achievements other than using that phrase in describing the top bar. It's not defined or used in the help center.

• I'm not sure it even makes sense to label achievements. Most of the time, it doesn't need to be clicked. Only when you have something new does it matter for most people. And when there's something new, it helpfully lights up. Same can be said of the inbox.

• The mockup was also cheated by including review twice for some reason. So there's more space available.

Counter-argument: "I don't know, dude. It looks weird to have some icons labeled and not others."

Yes, I agree. But that's why I call it a compromise. For the vast majority of users, it won't matter, however. Very few users get enough reputation to get a review icon. For new users, everything would be labeled to maximize discoverability (and presumably, engagement). Once people are used to the inbox and achievement icons, I don't think they need the labels. (Unless we redesign the top bar in an incompatible way, of course.)

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.

I am pretty sure that when the Coca-Cola Bottling company released New Coke they said almost exactly the same thing...

I urge you to reconsider.

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.

What's really confusing is that in the mobile skin it's still on the left. Since I use both mobile and desktop most days, that's really going to slow down my ability to adjust. Can we have some consistency?

Personally, I think this is NOT a good change. It's a bit sad to know that SE has a full UX community of specialists and SE has not asked for their opinion first.

For starters, this probably won't pass any heuristic usability tests (you can use the set of Nielsen heuristics, or Schneiderman's eight rules or Jill Gerhardt-Powal cognitive engineering principles for improving the performance of the human computer as known examples, or Weinschenk and Barker's evaluation checklist).

I'm not saying the old version would pass them, because it won't. But at least users had several years to get used to those problems. Making a UI change to keep the same issues makes one wonder why these changes are happening.

As for accessibility ... it's quite surprising to see this, specially considering that accessibility level AA will be enforced for most US sites and there are some trials already.

I did a quick AUTOMATED test, and it shows these (quite incredible) results:

and just in case you were wondering, most of the errors are in... the top bar:

and this is only for accessibility . There are other important usability issues as well, which added to the accessibility ones makes this quite problematic.

In short: it looks like this is a change for the sake of change; has not improved anything and has made many things worse. I can see in the answers that many users already found many errors and problems, although most of them refer to issues such as icons or positioning and may be considered subjective.

However, tests and heuristics are objective, and should have been used throughout the entire process of deploying this quite minor (yet important) element.

Particularly troublesome are the items marked as status-bydesign because in other words, it means you won't change it no matter what, so it seems you're decided to persist on error despite objective measures and even laws being against you. A bit stubborn if you ask me....

PS: I belong to several communities. If you want to maintain consistency ... should not you try using the versions that are much better than SO?

status-completed help icon now omnipresent

Why has the "help" icon on the top bar been eliminated? Now, the only way to as quickly reach "help" is by hovering over the rightmost icon to read "a list of all 171 SE sites", and know it has any relation to "help". One finds "help" only after clicking on the rightmost icon. Viola, there it is, accessible. Why would any designer assume that users, particularly new users, looking for help, would know to click on that rightmost icon?

status-completed help icon now omnipresent

Something that I've noticed is it seems like the help area is buried. I recently needed to grab the merge accounts link to give to a user and I really had to hunt around for it. It seems to me that help should be something easy to find. This is especially true since people never seem to look there when they have problems. Hiding the help link will surely only diminish its usage by people who really need it.

This could probably be a comment rather than an answer, but it surprises me that the inconsistency is status-bydesign. The How Stack Overflow redesigned the top navigation article states things like this:

We hypothesized that a lack of engagement with the nav was due to a combination of browsing habits, visual hierarchy, and the right-hand position of the layout. Based on research about F-shaped reading patterns and how readers’ eyes commonly move down the page, it made sense that our navigation was sub-optimal for most people.

And:

We also hypothesized that the focal point of the page (the logo) caused many users to skip over the small top bar. Plus the nav and top bar quickly scroll out of view when moving down the page.

But also some feedback like:

“Nav looks like tags — they might filter, but they don’t look like navigation. Makes you question what it is so I don’t click it and instead go back to Google that I’m familiar with.”

“Cleaner, more organized. Instead of jumbled stuff at top you have to read and decipher you can go to this.”

“More standardized position that you’re used to on other sites.”

“Looks really, really good. By far I like the new one — in the current one, you don’t notice the navigation at all, only the top bar. The (sub) tabs catch my eye before the current navigation.”

“In the old, it is weird to me that the two bars exist separately. This one feels more natural.”

“The new one is cleaner. Less wasted space. Things are more compact on the new one and account info is better grouped. Tabs across the top is preferable because a lot of sites have a similar flow. …much prefer the new one.”

The thing I'm trying to address is that one of the flaws of the old design, according to the article, was the shattered navigation, the questions/answers being on the right side, ... .

I'm concerned that this issue isn't being addressed with the new-new design, so I'm wondering how you think the new-new design tackles this issue.

I'm not sure what it is, but the new top bar just feels cramped.

The font is kind of thick, and that makes it look smaller. You're shoving more icons on there, half of which are more confusing than just a plain text label, so that's also more cramped.

The proportions just feel way wrong. The old bar felt a lot cleaner.

End review: =(

FWIW, I also am way less likely to go to review now, because it's smudged off right, and I have to think about which icon it is, and ugh.

The fact that the Area51 and stackexchange.com top bars are not changed is going to make this even harder to get used to.

To be honest, there are a few things with this new design that seem off to me. Most of them have been stated already, from the initial announcement on Stack Overflow to the announcement it was being released network-wide, so I won't restate them here.

However, consistency is a big problem. The main concern with this seems to be it would be too much work to get all the sites inline with SO. I don't understand the reasoning behind this, why can't you just get SO inline with the rest of the sites?

However, one small thing that seems to nag at me is the reputation number seems to stand out too much. I think it would make sense to unbold it at least and even have it be the same colour as the icons.

The reasoning behind not adding labels to the icons also seems odd. You yourself state "Icons are hard" then won't implement a simple change for them to make them clearer. Awards is shorter and conveys the same meaning as achievements so I don't see why it's "cheating" at all. It makes sense.

status-completed A possible bug with the icons is when you middle click them they just open up the same page you're on in a new tab. I would expect either nothing or to open a default page associated with the icon e.g. /help. This behaviour seems to be implemented for review.

I've just noticed that the StackExchange logo on the bar has also been updated, will this be changed on https://stackexchange.com/ too? Also, it is a darker colour on the main meta than other sites, not sure if this is intentional but it is confusing. Looking further it appears the SFF has the lighter colour and other sites like PPCG and Gaming have the main meta colour, is there any reasoning for this inconsistency? All meta's appear to use the orange colour though, though I'm not sure why this is... This appears to have been changed back again now, why though? Who knows. (Side note: it's hard to compile a list of bugs and feature-requests if you keep updating it...)

Another thing I've noticed since the new update is that I open multiple tabs before opening my inbox and rep dropdowns. On the old bar when I opened one on one tab the others would refresh and the counts would go away. Now I have to refresh the page myself for these to update. It is a bit annoying.

status-completed The rep popup on the achievements icon is not centred, I would expect it to be so.

Regarding the site switcher, you said

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

Are you planning on moving the site switcher to the right-hand side for all SE sites so that we can "get used to it" across the entire network instead of having to remember whether we're on SO or not?

status-completed

feature-request To see all inbox items one has to scroll all the way down through recent items. To be consistent with the achievements and reviews tabs, I suggest to put the link at the top:

bug This feature has disappeared:

Don't require a click to switch between sites, inbox, and Achievements on the new topbar

(You can still try it out at the main site and Area51.)

It used to be like this:

Now it's like this:

What's with the tiny unbalanced podium for the number?

(I'm using the top bar customizer, but even without it, the tiny podium is still there and it's just as crooked, except it's on the right)

Update: This isn't such a problem on SO apparently, and it even raises the bubble up to reveal most of the cup on hover:

So this is only a problem outside of SO.

You've made getting to the meta of a site when you're on the main site much more tedius now. I used to be able to click the top left thing (don't remember exactly what it looked like, it was pretty much automatic by the time you made the change), and easily get to meta.

After this change, I naturally did the same thing, and got some mess I had no interest in. I did some digging around and clicking, but never was able to get to meta. I finally got to meta by clicking on my user icon at top right of center, clicking meta user (or something like that), then eventually getting to where I could click questions to see the questions on meta.

Yucc!

STOP WITH THE GRATUITIOUS CHANGES!

status-completed

feature-request

Can we have a link to the meta review queues (either individually or as a link to the whole page) with the rest of the review icons?

Rationale

• In the old design, I could get to meta review with two clicks (review>meta review queues). Now it will be further away (site switcher>meta>review or review>all queues>meta review queues) and I will be much less likely to bother checking the queues
• I can glance at all the other review queues to see whether they need attention, but can't tell anything about meta
• Users new to review may not even know of the existence of meta review queues, since they have been neatly hidden away.

status-planned - We will be fixing a variety of issues that are related to the new review indicator on smaller sites (aka not Stack Overflow).

There's no red dot on the review icon on any site that I have a decent rep-count in, for example the Workplace, IPS, and Worldbuilding stacks.

All of them look like this:

We have to click on the button to see if there's anything in the review queues.

But at least I don't see a count for review queues that I can't see any more, so at least that's a thing.

status-completed See this post for details

feature-request

I am here to propose a feature request about the review icon in the top bar. feature-request. The proposal made in the Review queue false positives is not to light up the review icon when there are no actionable tasks. But currently, it is happening the other way round. The users have to check every time if there are pending posts. This is not user-friendly.

Borrowing image from the post: New top bar is coming to the Stack Exchange network

In the above image, the review icon is it up with a red color(or a variation) indicating pending items for review.

I am not sure whether this feature is not working or temporarily removed for time being The review bar becoming totally red is next to impossible on smaller sites with less traffic (particularly beta sites).

Currently, there is no indication of pending posts. We only know if we click on the icon and check the pending items manually.

The above image is a screenshot from Hinduism. We can see that there were two pending items eligible for review but there's no such indication on the top bar. There used to be a number beside review option in the old design to indicate pending posts.

I am asking for an indication (Probably a glow or similar thing based on the number of pending posts like we get when we receive a badge) on the review icon even if there are 3 or 4 actionable posts.

status-completed

There used to be a minor animation for the notifications. They're now gone:

However, it still works in the SO top bar:

As expected - there's a few comments on various chats about... folk knowing what they are. None on Super User, but I've posted a quick guide on it on Meta.SU.

I know the blog isn't used much for this (and I suppose a meta post would do), but an equivalent, official post showing the features of the new nav turning up on all the site side bars would probably help the transition a fair bit. Might also be a good chance to write about the process of working out what the 2017 top bar revision needed to be too.

Yes, the review icon is not that great. I prefer "review", but I'm now used to clicking on the strange edit symbol in a word balloon (#6 on the survey). I have a screenshot of the choices for the review icon below.

Please under no circumstances use the flag (#5). Flags mean one thing on the Internet - this thing is bad and clicking this button will do something to it.

Stack Exchange already has a flag icon in use for, guess what, flagging a comment.

I do not see anything good coming out of having a flag in the top bar. It just sounds like a bad idea. (Yes, I get the whole thing about flags ending up in the review, but no.)

I don't like anything with a clipboard (#1 and #4). Reason being that clipboards are associated with pasting CtrlV. Maybe this is finally where I can find the Stack Exchange notes section, or where I can store often-used comments...

That leaves just #2, #3 and the current icon.
Of the icons there #2 is by far the best.
It's some kind of list in a word balloon. Whatever, I'll middle-click on it and move on. At least this one makes sense for a review icon.

I don't care for the YouTube verified paragraph icon (#3). What does a review icon need a check mark for?

So please just go with #2.

It's not at all obvious which icons/buttons in the top bar will drop down on click vs. taking me to a new page.

They all change in the same way on hover (lighten the background), and aren't grouped by drop-down vs. not-drop-down so I would expect them all to do the same thing (there are no drop down arrows).

I would make all buttons drop down or differentiate them more clearly.