I'm the new product manager for the DAG team. I’m excited to announce that the top bar design that has been on Stack Overflow for several months is coming soon to the Stack Exchange network.

What took so long?

This was a big change and we really wanted to work out the kinks on Stack Overflow before we pushed to all sites in the network. For example, we recently released some changes to how the review queue menu works in order to address an overall drop in reviews since the new top bar shipped on SO (see When I look at the review icon, I see red for details). We also adjusted the location of some items, such as the help link, to address feedback.

To meet the needs of the network we needed to adjust some aspects of the design to work with the full range of sites. The design is coherent with the SO design, but isn’t exactly the same. The biggest difference is that site name and Questions/Tags/Users navigation remain below the top bar. This was needed in order to work with sites with long names and/or custom skins.

Most importantly, the site switcher and other key controls will be in the same location across the entire network

...oh. So, it's an adaptation of the new top bar that is rolling out to the other sites, not exactly the same thing, then. It's sticking with the color black, for one thing. But also, I see that the links haven't been moved into the top bar for the other sites. Why not?
– Cody GraySep 13 '17 at 18:05

186

Can SO get a black bar back to at least keep the coloring consistent?
– NathanOliverSep 13 '17 at 18:05

35

Yeah, I read that. I didn't really understand it. "Stack Overflow" is a pretty long name, too. Not that much different from "Web Applications", and on the other sites, you don't have to worry about "Developer Jobs" taking up a bunch of room. Custom skins seems like a strange argument; part and parcel of this new top bar on Stack Overflow was a "re-skin". If the design is really so much better, why aren't other sites getting it? Conversely, if the skins used on other sites are worth keeping, why wasn't Stack Overflow allowed to keep its original skin?
– Cody GraySep 13 '17 at 18:09

Basically, my concern is that this still doesn't achieve the network-wide consistency that I (and so many others) were eagerly awaiting. There will still be subtle UI differences to trip us up!
– Cody GraySep 13 '17 at 18:10

7

Along with cody why can't questions, users, and tags be moved into the top bar? Those names don't change, do they? Seems like a lot of wasted space in there.
– NathanOliverSep 13 '17 at 18:10

38

Does anyone else find it ironic that the screenshots omit the Review icon, despite the Review icon being the #1 gripe?
– MachavitySep 13 '17 at 18:17

The Stack Exchange branding and bubble logo is still on the left, but the site switcher menu gets moved to the right? I wonder how long it will be before I quit going left.
– Ben MillerSep 14 '17 at 0:00

11

I hate to be that guy but... which is the new review queue icon?
– Journeyman Geek♦Sep 14 '17 at 6:14

8

Oh finally, it's about time, since getting used to the new top bar on SO, not having it in other networks is simply put, annoying. Great work
– IcepickleSep 14 '17 at 8:12

18

It's not the same top bar as used on Stack Overflow and is more like a compromise between the old design and the one used on Stack Overflow. So it's not really consistent. Will Stack Overflow be updated to be more aligned with the new-new design? (eg. Questions/Tags/Users moved out of the new bar again). Also, isn't it too soon? You've done quite some things already to address issues with review, which I appreciate. However, last time I checked, problems weren't completely solved yet.
– g00glen00bSep 14 '17 at 9:35

12

@ChrisStratton Don't be ridiculous, people are using Stack Overflow just fine with the new top bar.
– TylerHSep 14 '17 at 14:45

17

I have to ask - now that Documentation is being sunsetted, is the new bar really necessary? I understand that one of its main purposes was to drive users towards Documentation.
– John GowersSep 14 '17 at 15:54

17

I don't understand the point of having the hamburger on the right, and disabling the logo on the left. This makes absolutely no sense from a UX standpoint. Just leave the SE logo be and remove the annoying new hamburger which is not consistent with the mobile app, previous behavior or any other site or app ever where the main menu is always top left.
– SklivvzSep 21 '17 at 19:12

35 Answers
35

Moderator-related issues

Thank you for this preview. I'm particularly glad to see that the links that are currently part of the site design (like tags and users) will continue to be part of the design instead of being jammed in there like on SO.

Some of these changes are going to really interfere with my ability to moderate. I realize that moderators are a very small portion of the user base, and visually-challenged moderators are a very small portion of the moderator base, but... having the mod-essential links in a jumble way over on the right and/or missing is a serious impediment. Please move those.

Here's an image that Oded provided for what the new design looks like for moderators:

(Aside: isn't it kind of weird for the SE hamburger to have other stuff after it?)

Here is an annotated screen shot from a site where I'm a moderator:

Some key points:

Things are clustered rather than all being jumbled up together. It's way easier to go to the diamond in the middle than to look for the second-from-right thing in a six-icon lineup. (I can't actually tell what most of the icons are without squinting -- it's just "blob blob red blob blob diamond optional blue blob".) With the current design I don't even need to be able to read things (mostly).

The important stuff is near the center where it's easy to see and access. The three most important things in the topbar for me as a moderator are the flag count (the blue indicator with a number), the diamond dropdown (next to it), and the "mod" link over by the review counter. And even though that review counter is always wrong, "left of orange thing" and "right of orange thing" are easily navigable.

For purposes of moderation, I can ignore the sides. (I don't need my gravatar/rep/badges to be in the center, but having it in the center does serve to "anchor" the mod diamond to the left and the mod menu to the right.

In the new design, I have to look all the way to the right -- the hardest place to casually view other than the bottom of a window, from what I've heard UX folks say -- and I have to disambiguate a jumble of stuff. Some of that stuff might get clipped, too, judging from my experience on SO.

The "mod" menu is gone. I understand that there's some mouse-wheel-driven way to get it in a new tab, but I don't always have a mouse wheel and I do always want it in my current tab. And somebody has to tell you; it's not discoverable in the UI.

On the other hand, the left ~70% of the new topbar is, err, under-utilized.

Request: please put all of: flag count, diamond menu, and "mod" link near the center. Either shrink the big search box or drop my badges to make room (gravatar and rep are enough to convey "me").

This isn't about aesthetics or moved cheese. This is about being able to moderate efficiently.

A userscript doesn't work on all platforms, though that's my fallback (if I can get someone to write it for me). That's a poor workaround, though. Please just fix this.

If there's some aesthetic consideration that makes putting those affordances where they can much more easily be accessed, I accept the consequences. If it's not as pretty but it works much better, that's good enough for me. Only a few hundred people will see it; don't invest effort making it shine. Just make it work please.

Even beyond that, moderators do not mod all sites on the network, so if you're used to the hamburger menu being in the far right corner on all sites you don't mod, having it shifted over to give way to the mod menu stuff on the site/s you do is... weird. These "extra" menus shouldn't displace existing ones.
– Catija♦Sep 13 '17 at 22:15

33

Hey, thanks for the feedback! Visually-challenged or not, we've observed a pretty significant reduction in activity for most of the stuff that's ended up on the right on Stack Overflow in the redesigned top-bar - so thinking about how that hinders folks who use the site, and what we can do to mitigate those hindrances, is never a waste of time. On SO, we've been preoccupied with review, since that's come to underpin a lot of seemingly-unrelated stuff on the site (read: random stuff breaks when reviews don't get done) - but it's worth keeping the rest in mind, particularly as we expand.
– Shog9♦Sep 14 '17 at 2:15

@MonicaCellio Thanks so much for your detailed feedback. We may not get to address all these issues before we launch, but the team takes them seriously and we are currently investigating.
– Joe FriendSep 14 '17 at 15:03

16

Thanks @JoeFriend; I'm glad to hear that. I realized in thinking about this more that the stuff in the topbar can be broken down into "me", "site", and "moderation", and maybe grouping things together along those lines, with space in between the groups, would help everybody who relies at least some on positional memory.
– Monica Cellio♦Sep 14 '17 at 15:12

14

I 100% agree with Monica's suggestion of grouping things visually by whether they're related to "me", "site", and "moderation", especially if it's all going to be on the far right side of the page. Even people who don't think they rely on positional memory will benefit from something like that. :)
– LauraSep 15 '17 at 14:42

3

So this didn't happen then :-( And the site-changer menu has changed ends too.
– Andrew LeachSep 18 '17 at 20:49

4

On my monitor, I have to scroll to see the entire screen. Anything in the right corner (like the mod stuff) is invisible to me unless I scroll.
– Jan MurphySep 19 '17 at 5:45

1

I've just released the user script Top-navigation choices. It should, as is, enable you to move the moderator tools into the center. However, it really needs some testing by a moderator (I'm not one on any SE site). If you're familiar with the browser's Dev Tools at all, I'm looking for the information described the Moderator tools section, here. I can also create a version that outputs that information to the console, or alerts it, if you're willing.
– MakyenSep 20 '17 at 5:37

2

@Makyen I don't know enough about user-scripting to properly interpret this, but this script moves the mod controls without doing anything else. Does that give you enough info to get the names? There are two mod items in the topbar, the diamond (which produces a drop-down menu, like the inbox) and flags (which links to a page of active flags). Update: I just tried your script and you got 'em! I see flags and the diamond, as expected.
– Monica Cellio♦Sep 20 '17 at 14:46

@E.P. Adding tooltips in addition to such texts is a possibility (and adding tooltips would arguably be a smaller change than adding these texts). However, I'd say that for most users, the font size used in the screenshot is actually fairly readable; and for those where it isn't, I don't think (aside from possibly a first time) it really reduces usability vs having nothing at all. Accessing a tooltip, even in the best of cases, takes time; reading it takes additional time. Especially in the case of the upper suggestion (I'm not too fond of the gray on black) the access time is eliminated.
– a CVnSep 14 '17 at 18:56

11

I freaking love @canon's design. The text makes it instantly clear what the ambiguous icons mean. You can see it got 341 upvotes and yet nothing was done. It's a bit ridiculous that the SE team hasn't even acknowledged it.
– ClonkexSep 15 '17 at 0:27

7

@E.P. At what point do we draw the line for accessibility? "Most users" simply has to be good enough. It's not possible to support all users. I also can't see how that detracts from someone's experience of the site just because they can't read the text.
– ClonkexSep 15 '17 at 0:33

5

@Clonkex There's no need to reinvent the wheel here ─ there are plenty of known solutions for deciding whether a given design element, or their combination as a whole design, is a barrier to accessibility or not. They stop short of "absolutely every user everywhere" but they're more than somebody saying "I reckon this is good enough for most users" by the seat of their pants. Where do you draw the line? where WCAG recommends, as a starting point.
– E.P.Sep 15 '17 at 9:36

10

There's a difference between "Accessible to as many as possible" and "inscrutable to anyone at all". There's probably reasonably good reasons for just having icons - like easier internationalisation but this option still feels better to me.
– Journeyman Geek♦Sep 15 '17 at 9:42

4

@AndriuZ I'm glad you're happy with your eyesight; just be aware that some people find that position to be discriminatory. Not everybody with imperfect vision can wear corrective glasses; on the lighter side, some people might be able to read the text but it will require sustained effort which makes using the site much more tiring. The only thing that's required here is a bit of thought and some empathy for people in different circumstances to yours.
– E.P.Sep 15 '17 at 18:59

5

That last image has two 'review's ...
– Rand al'ThorSep 15 '17 at 19:08

Having the text under the icons like that is a vast improvement. Pages with mystery hieroglyphics take longer to learn and they don't stick in your mind like words do. You've spent a lifetime scanning pages for words; the worst designs of all put tiny unlabelled GUI widgets in random parts of the page that look like some left-over sneeze mark or decorative flourish and so you never even realize that they're active widgets. I like words.
– tchristSep 21 '17 at 5:06

4

@E.P. adding text cannot remove accessibility. At worst, if the added text isn't easily visible to some users, they have gained nothing. But they also have lost nothing: the icons are still there. This is a win-win, or at worst, a win-not-lose situation. The whole position of SE seems to be that the text is not needed and that those obscure icons are enough. OK, if so, adding text that a small proportion of users can't read easily makes no difference. More to the point, there is absolutely no reason why the text should be hard to read. Not if its done carefully, I guess.
– terdonSep 22 '17 at 12:32

2

@terdon I disagree. If there is text that you can barely read, it still calls your attention and it still makes the page more tiring to look at. But as I said above, why not actually ask the people who do this for a living, or people who are potentially affected, instead of everyone proffering their opinions like they're a fact? All I said is that it's a concern to keep in mind and it needs to be handled appropriately.
– E.P.Sep 22 '17 at 13:01

If you want me to review, then don't light up the review icon if there are no actionable tasks

So, what's the main outcome of that feature? That I've learned to ignore that part of the top bar, and I review far less than I used to ─ and when I do, it has nothing to do with the status of that counter, because its information content is between minimal and null. I don't think I'm alone on that, either.

It appears you're redesigning that part of the top bar, but the thresholds mentioned in the accepted answer look unsuitable for anything other than Stack Overflow. I know it is tempting, for performance reasons, to make that annoying red dot light up even when there are no actionable tasks for the user that's seeing it; if that's the case, I know what I'm going to do: I will very soon selectively start ignoring that counter, because it carries essentially zero information.

I know you did A/B testing on that thing on Stack Overflow, but I would ask you not to take that test's word for granted when expanding to sites with a much lower review throughput, for which most review queues might sit at zero for a large fraction of the time. If you do want to keep unactionable light-up UIs around, then please A/B test them over an extended period of time (i.e. enough time for people to get tired of the null information content) in low-throughput sites. And if it still makes more people review, then I'll just have to accept that some people are weird (but please publish the results as you did with SO), but don't just take this for granted.

In general, the new "red dot" design shouldn't light up if there are no queues in danger. The triggers are adjustable per site by the community team. So, for low traffic sites we could put them significantly lower. As with any of these mechanisms there could be a window between the queues getting cleared and the indicator clearing. So there may be rare cases where it is wrong. If it is common, then it is a bug.
– Joe FriendSep 14 '17 at 15:12

3

@JoeFriend I take it "in danger" means "with an exceptionally large load"? What if there is a large load but you can no longer review that queue?
– E.P.Sep 14 '17 at 15:15

That's a perpetual problem on sites with only a few active reviewers, @E.P.; I've taken an initial stab at thresholds that should work for the larger sites (SU, SF, AU, Math) and sensible defaults for everything else - but chances are they'll still need to be tweaked for some sites that fall in the middle. For example: the threshold for suggested edits is currently 3 on Physics - that's aimed at getting edits reviewed quickly, but may cause annoyance.
– Shog9♦Sep 14 '17 at 17:06

@Shog9 Yeah, I'm aware that it's a problem ─ all we want are solutions that are not actively annoying ;-). That threshold sounds OK to me, so long as the caching is fast enough that it blinks out once the problem goes away. And ditto for queues where the user can't act (ran out of reviews or close-votes? an easy flag to set and it'll last all day).
– E.P.Sep 14 '17 at 17:10

11

@Shog9 Though maybe that underestimates the problem. Consider the case where there's four pending suggested-edits reviews, so it lights up and you go and review everything - except those still require a look-over from someone else. Does that make the red-dot blink down? How do I distinguish "there's a fifth review on that queue that I can help with" from "there's four edits that need other people's attention"? And, if I can't distinguish between the two, what good is the blinker?
– E.P.Sep 14 '17 at 17:19

3

The dot disappears for an hour after your last review (or the last time you clicked the button). If no one else has reviewed in that time, the indicator would reappear. This too may need to be adjusted for sites with, for example, reviewers who check in very occasionally.
– Shog9♦Sep 14 '17 at 17:22

1

@Shog9 I guess I'll need to see it in action to see whether the concern has been addressed or not - it sounds like a pretty different beast to the current incarnation.
– E.P.Sep 16 '17 at 23:09

A number of users have complained that the site switcher is in a confusing place.
I agree.

In addition, the site switcher symbol is confusing.
To try the new top bar, I went to SO (which I never use) and tried to look for the switcher.
It took me over a minute.
I tried clicking the logo in the top left like I'm used to do, and it turned out to be a link.
I did see the symbol in top right next to the help symbol.
It never crossed my mind that it might mean something other than chat.
In fact, I was happy to see a chat icon and was surprised that something entirely different happened.

I'm a fairly active user of the network (and a moderator on one site), but I did not recognize the symbol.
Yes, it's right there next to the name StackExchange in the current (old) top bar, but I had not paid any attention to it until today.

The new design seems to rely more on symbols than words.
I often find symbols confusing; words are faster to work with for me.
If you want to stick with symbols, can you please make the symbols (especially site switcher) less ambiguous?

Some symbols are useful.
The little down arrow next to the network name tells that it is a drop down list.
With that arrow gone, I have no idea where the StackExchange link will take me to.

Suggested solution:
Keep the site switcher as it was.
I would greatly appreciate it.

Actually, the absence of an arrow sort of makes sense when considered in juxtaposition with the help center drop down, the notifications drop down, and the achievements drop down. I still think the icon is extremely non-self-explanatory (I would have guessed it meant chat) but since none of the other drop downs have arrows...well....
– WildcardSep 26 '17 at 3:10

I'm mainly reiterating what Monica Cellio wrote already, but I wanted to include a picture of what would happen to those very sub-optimally placed mod elements. Unfortunately every screenshot in the question seems to assume the full screen usage of Stack Exchange. If not then at least an unobstructed SE browser window. Have a look at my only marginally scaled Chrome. The placement of the flag icon would put right a centimeter outside of my view. Not because I'm to lazy to look to the very top right, no I'd have to scroll right to see it.

This basically bars mods from resizing their browser windows — which includes features like using two browsers besides each other — or using Tor properly. And that's on top of all the ergonomic stuff Monica already distinctly pointed out.

The moderator flag icon is the most (one might argue only) time-sensitive button on the whole top bar. You really want the mods to see it and to handle those flags. It belongs smack in the middle, someplace where I can always see it when I use the SE browser window.

Addendum regarding stuff that goes first for overlapping and resized windows:

Not everyone always has the SE browser window front and center full size. As Paweł notes the new top bar resizes with the window. It also scrolls with the user, which is a major improvement. However, both only solve half the problem. Have a look at this image below. It shows how SE uses the screen. Whenever one keeps the site of a question (or the question list for that matter) open the most important stuff is in the middle. If one uses any sort of windows that are at least a bit overlapping everyone will not prioritize the auxiliary information on the right over the question. That would only be done when one doesn't look at the window at all in which case the discussion is moot.

So the stuff in the top bar you wan't to lose the attention for last should go exactly in the same horizontal orientation then where SE puts the other important things — questions and answers — and that's in the middle.

Otherwise I'll be the first to write that user script for Monica and myself ;)

New topbar will be kinda responsive – resizing window should not affect visibility of icons.
– PawełSep 14 '17 at 11:39

4

@Paweł even if it survives resizing the stuff on the edges is the first to go when windows overlap, I don' think it's a good place to put the flag indicator.
– HelmarSep 14 '17 at 11:53

4

Thanks but I honestly don't know how to answer. If you have browser and overlay it with another window (even partially), then well - we can't be responsible for what you can and can not see. It's like putting sunglasses on and saying it's too dark 😎
– PawełSep 14 '17 at 13:29

5

@Paweł Given two windows, one partially overlapping the other, unless the two fully overlap this situation will typically leave obscured either the center section of the window (where nominally the question and answers go on SE) or one or more of the edges.
– a CVnSep 14 '17 at 15:06

25

Having what is arguably one of the most important functional (as opposed to content) UI elements toward any of the edges thus increases the probability that it is obscured by another window. Since having said element at the top makes it more readily visible than if it were, say, at the page or viewport center, keeping it at the top makes sense. Since the edges are more likely to be obscured than the other parts of the window, keeping the most important parts away from the edges makes sense.
– a CVnSep 14 '17 at 15:06

10

@Paweł the right column is populated by stuff that's not (very, or at all) important when using the site. Quite aside from overlapping windows, it's just not where people are looking. Alerts shouldn't go there. And sometimes overlapping windows are necessary; it's not uncommon for me to have SE open in a browser, an editor open next to it, and they overlap because I can't make the windows fit at font sizes I can see -- but all I really have to see is the first, what, 800px from that browser window? And I can make that work.
– Monica Cellio♦Sep 14 '17 at 16:08

9

@Paweł To be clear, this issue doesn't effect me, but I completely disagree with your attitude. The job of the designer is to ensure that the user gets an experience that is effective, makes sense, and is fun to use. This includes accommodating for edge cases. If the header doesn't scale properly, that's not the users fault, that's the designer and the developer being lazy. This is a predictable issue, and has been solved elegantly in the past (just look at mobile UI's). There is no excuse for it not to be taken care of here. (I have tested SO's page responsiveness, it doesn't perform well)
– TARDIS MakerSep 14 '17 at 20:11

@TARDISMaker it's not about scaling window i.e. responsiveness (because this works and gonna work as expected), it's about directly overlapping browser window with another window.
– PawełSep 15 '17 at 7:10

4

@Pawel okay, this is something that I hadn't realized initially, but despite that, I stand by what I said. The responsiveness that I saw on SO was very poor. If you scale the browser down to a bit less than half the size of my screen (24in, 1900x1200) you start to loose elements of the header. But it's not done gracefully. Instead of collapsing them into separate menus, they get hidden on the other side of the horizontal scroll bar. At that point, they might as well not exist because no one will see them. In addition, some of the least important elements are the ones that dont get hidden.
– TARDIS MakerSep 15 '17 at 13:37

14

Any design that gives you a horizontal scroll bar when you resize the window narrower is not a responsive design.
– Dan HendersonSep 15 '17 at 19:24

@Paweł I have a browser window full-screen on a 1024x1280 monitor (portrait orientation). Without scrolling right, I can only see as far as "Ask Qu" in the big blue Meta header, and half of the search box in the upper right extends past my visible viewport. This will be fixed in the update, right? I don't so much mind that the Hot Network and Linked questions are cut in half, but having a completely-visible header feels important.
– FoxSep 17 '17 at 2:33

@Fox yes - black top bar will be responsive. but header (that includes "Ask Question" button) is separate thing that we're not updating right now, so its behaviour on smaller screens will remain the same as it is now.
– PawełSep 17 '17 at 6:36

@Paweł, at least for me that icon is barely visible and I just scaled the window down a bit.
– HelmarSep 18 '17 at 21:58

@Paweł I get only the faintest sliver of blue where my flag counter should be, in a window that's more than 1300px wide. Not all of my devices even have 1300px.
– Monica Cellio♦Sep 19 '17 at 3:07

1

@MonicaCellio thanks for letting me know. We've fixed clipping last icon in the meantime. And yes: flags box width increase when count gets to double digits. But we can make it a little bit wider for 1 digit counts too.
– PawełSep 19 '17 at 13:54

I am not sure if StackExchange follows Web Content Accessibility Guidelines (to be referred to as "WCAG"), but the StackExchange logo and text in the new logo:

fail at both WCAG AA and AAA, on both normal and large text requirements.

The guidance is mostly for text so I can't ramble much about the logo, but the text ("StackExchange") is, itself, failing to get a decent contrast ratio.

Old (current) logo's "Exchange" text (the only part that's blue and isn't a gradient) used a different, lighter color (#2f96e8), and when that color is combined with new background color of the top bar (#252729), it gets much better results:

and after some rough editing on gimp, this is close to how it'd look if it was applied to the logo:

we gonna use the same SE logo as we do now.. blue logo on Joe screenshot is clearly a bug.
– PawełSep 14 '17 at 13:30

2

@Paweł that's relieving, but in that case, I'd like to state that the old/current logo with the gradient etc isn't really fitting the flat design of the new top bar, and personally speaking, I'd much rather see the logo on Joe's posts (with a better color) than the current design of the logo.
– AveSep 14 '17 at 16:43

Your choice of hamburger

The one on the left is a quad-burger with the text 'StackExchange' after it. This is a very large area which could be clickable and formerly was.

The one on the right is a tri-burger, similar to the three-line UI element commonly used across applications and sites to open menus.

If we're going to have the hamburger at the left anyway, there's no reason to have the one at the right. The right side is cluttered with all sorts of stuff, has a much smaller clickable area, and is buried in the middle instead of being at the edge if you're a moderator.

Getting rid of the hamburger at the right and putting the menu back under the quad-burger would make the right side less cluttered, which is a good thing. The new setup just causes too much cognitive load and is unpleasant to use.

Optimizing for the uncommon task

I can perform two actions with this diamond:

I can click the diamond to open the "mod messages" drop-down.

Once the drop-down is open, I can click the "dashboard" link to open the mod dashboard.

I look at the mod dashboard all the time, but only look at the mod messages once in a while – basically, whenever it lights up to tell me there's a new message to be read.

Unfortunately, with this change, my common task is now two clicks, and I'm shown the mod messages drop-down all the time even though there's nothing new to read. This is annoying.

Moderator tools as an afterthought

It really looks like the top bar was designed without moderator tools in mind. Although the new hamburger is unnecessary and inferior to the original location for the site switcher, it does work okay when it's at the far right. Its natural position is at one edge or the other.

(That said, its clickable area is too small.)

But with the moderator tools added onto the end, it feels like a very unnatural position. It takes extra cognitive resources to click it each time, because my hamburger is sandwiched between two sets of icons.

Between the poor positioning and hiding the mod dashboard away, it really feels like the top bar was designed without the moderator tools in mind, and they were added as an afterthought.

The invisible line

Did you know there was a line here? I didn't. I can just barely see it, and I can guarantee you that a lot of people are completely incapable of seeing it.

Low-contrast dividers like this are popular lately but are poor design. If you want a divider there – and frankly, I have no idea why it's there in the first place – it should probably be visible to people with moderate-to-poor eyesight.

My suggestion: Get rid of it. It doesn't do anything useful, so we don't really need to see it.

My reputation is off-center

As you can see, the +1914 text is off to the left. Shouldn't it be centered?

What should we do?

Just give us back the old top bar.

.
.
.

What's that, you say? "No"? Well, I kinda figured you'd say that, so I lovingly crafted this mock-up of an alternate design in Microsoft Paint:

See, it's got stuff in different places. There's no tri-burger 'cause the quad-burger already does everything we need without taking up the extra real estate. I didn't really know what to do about the mod dashboard link, so I just wrote in the word "mod". Whatever you do, just don't hide it away in the mod message menu, please.

I also added a smiley face. I would have doodled a bit more, but I ran out of space, so you'll have to content yourselves with that.

I think this is really well explained and you make a lot of excellent points. Personally I'd rather have the mod tools on the other side of the user info but anything is better than where they are now...
– Catija♦Sep 19 '17 at 16:21

The tri-burger is there because it's the only place with the Stack Exchange logo on Stack Overflow (there is the Stack Overflow logo instead of the quad-burger on Stack Overflow). If the tri-burger is removed and the dropdown is moved to the quad-burger, I would like the same thing to be done on Stack Overflow (remove the Stack Overflow logo and replace it with the Stack Exchange logo).
– Donald DuckSep 19 '17 at 17:17

Removing the text "mod" from the top bar is the best improvement from my perspective. I always used to get confused on a user profile page when I wanted to destroy the user. There used to be two mod links and half the time I hit the wrong one ending up at the moderator dashboard. Now there is just one "mod" link on user profile pages and I am much less likely to hit the wrong thing.
– Stephen OstermillerSep 19 '17 at 17:48

Oh, another note, the numbers are still off center for me, even when they're only two-digits long and I'm guessing (looking at the inbox messages' positioning) that it's intentional that they're positioned where they are... but I think that because you can't really see as much of the trophy as you can of the inbox, this positioning doesn't make sense and should be centered properly.
– Catija♦Sep 19 '17 at 18:05

2

On SO, they could put the SO logo on the right so the SE log/site-switcher would be in the same place on all sites but SO would retain its logo too.
– Monica Cellio♦Sep 19 '17 at 18:13

7

+1 I don't want my mod dashboard hidden inside a mod notice menu which also first has to load. (In Australia, that's waiting a couple of seconds at least every time I want my dashboard.) The mod dashboard is the thing I use most often, and the diamond I only click when it lights up.
– doppelgreenerSep 20 '17 at 7:45

4

I especially agree that the mod dashboard should come up when you click the diamond instead of the inbox. I would change your mock-up to give moderators back the help center link. I go there all the time to dig out page links for new users, and consistency is good. The moderator interface should be added to what is already there, not change it. There's plenty of space if you do something smarter with the useless icon on the left and the unnecessarily large search box.
– ColleenVSep 20 '17 at 21:01

Please make the top bar the same on Stack Overflow and on other sites. I would like consistency between all Stack Exchange sites, including Stack Overflow. I've seen in comments (both comments to the question and to other answers) that there would be issues using the Stack Overflow top bar on all other Stack Exchange sites, so I suggest doing so that Stack Overflow either gets the same top bar as is currently suggested for other sites, or making a mix of both that would fit all sites. Here are some suggestions:

The simplest one: Make Stack Overflow have the same top bar as currently proposed for other sites:

I've used a screenshot of the old design to make this, but I have nothing against a newer design for Stack Overflow as long as it's consistent with the other sites.

Have the same buttons as the suggested top bar for other sites, but keep the colors of the top bar on Stack Overflow (this would apply to all sites):

Note that I changed the color of the line on the top in Web Applications from orange to gray to fit the site's theme.

Also, I don't know if this is already planned, but please make an option to have the top bar sticky on all Stack Exchange sites. I really like that feature on Stack Overflow and I would like it on the other sites too.

Or just move all the "Question", "Users", "Tags" tabs into the topbar like it is on SO. I like that the topbar on SO was condensed into one line instead of two and that it now takes up less screen space.
– Tot ZamSep 14 '17 at 20:42

@TotZam I thought of that too, but according to some comments to the original question, some sites have designs that do so that it wouldn't work so well to do that. I wouldn't have much against doing it that way (probably because I don't use the sites in question), but apparently the SE staff doesn't want it that way.
– Donald DuckSep 14 '17 at 21:03

One of the big highlights of the SO new bar design was that it took up less space. I saw those comments, but I personally don't think that is a valid reason not to add the same improvement to all other sites.
– Tot ZamSep 14 '17 at 21:09

@TotZam What you're talking about would require a lot of work by the design team to make work. Sites like Arqade (see example in question) would be dramatically changed by what you suggest.
– Catija♦Sep 14 '17 at 22:19

14

I agree with this! Somehow I thought that once the SO top bar had settled and had any issues dealt with then it would be rolled out to the rest of SE. It's strange that they want to somehow maintain two completely different bars. If the one designed for SO was so unfitting for the other sites, why did they design it that way to begin with so they have to have two???
– AjeanSep 15 '17 at 0:42

My cheese has been moved, and a holographic replica has been left in its place. There used to be a menu in this very spot that looked exactly like this:

And now this graphic does nothing. The new top bar on Stack Overflow moved the site switcher and put something with a completely different appearance in the spot it used to occupy, so while it took some getting used to, it was pretty obvious even to the lizard brain moving the pointer that something was different.

Here I have an element that looks exactly like the thing I wanted, in the place that I expect it, and it acts like a website that I have a bad connection to ("argh! load, you stupid menu"), until I remember three clicks later.

What, exactly, was the point of this slap in my UX face? Why is this graphic reused for a completely different functional purpose?

Back in February, in response to concerns about inconsistency between sites, Oded wrote:

[...] We are going to consolidate the design on other SE sites to match this new design.

Yet here we are with inconsistent designs across the network.

In response to one of many requests for a dark/black top bar, Pawel wrote:

Dark theme is not on our list for now. But we will for sure consider it if there's a need for dark theme.

The dark theme never came. Yet here we are with all other sites keeping a dark theme.

I also recall the team telling us that they'd ask for community feedback earlier in the process of introducing a new feature or change. Unfortunately I cannot find the post I had in mind, this recent post by Jon Ericson will have to do:

[...] However, after our experience with the Documentation Beta, we've learned to focus more of our efforts on pre-development research.

For instance, the Documentation team already decided the outline of the feature before coming to meta with the initial announcement. By contrast, our newly formed Developer Affinity & Growth team asked for help setting priorities based on themes and user stories. [...]

This announcement is in stark contrast the above quote. You've already decided on the design, and you're simply informing us that it'll go live within the next couple weeks.

I'm not sure I see the contrast between what I said and the current situation. Sometimes there are reasons for not doing what users ask or even doing the opposite. Indeed the gestation period from last February to the initial testing of the network top bar suggests we have been doing pre-development research. Could you help me connect the dots?
– Jon Ericson♦Sep 18 '17 at 22:40

13

@JonEricson what you have been testing on SO for the past 8 months is not what you are deploying on all other sites now. Or is the team of the opinion that these are insignificant differences?
– StijnSep 18 '17 at 22:55

I too am dismayed that the top bar will be different on different sites. But I don't see this as a situation where the team has ignored user feedback. In fact, the initial plan was to test the change here first and then roll it out to the network shortly afterward. But after moderator feedback we're letting them test it on other sites now. I'd be surprised if the top bar design isn't adjusted based on the feedback we're getting now.
– Jon Ericson♦Sep 18 '17 at 23:18

1

@JonEricson Perhaps the timeline in the question should be reworded then? As I read it, it'll go live as-is unless a major bug is discovered.
– StijnSep 18 '17 at 23:23

I'm not in charge of the timeline. (Joe is. ;-) I can think of a few reasons to roll the changes out to the network first and make adjustments later. In particular, we can get a lot of usage data to help us figure out how the top bar is used by the widest variety of users. In any case, I think we'll have a better idea of the timeline in the next day or two.
– Jon Ericson♦Sep 18 '17 at 23:42

Since you quoted me I feel obligated to explain you: my comment was under post related to SO new header. So what I said was not about rest of the network. Please, remember about the context when quoting.
– PawełSep 19 '17 at 7:22

7

@Paweł I'm well aware of that. My point is that you were unwilling to give So a dark theme, and you then proceed to give the rest of the network one. It's like telling one kid they can't have candy, and then you give candy to all their friends.
– StijnSep 19 '17 at 7:38

@JonEricson how will userscripts affect your data collection? If people have moved things around to put them where they're more accessible, are you going to see (say) "hey, reviews are still being clicked on -- we're good", or are you going to see "reviews in this portion of the topbar are being clicked on"? In other words, how will you know that your data is an accurate measure of the new topbar, as opposed to site functionality in general? Or is the number of script users considered to be statistical noise? (Might be -- I wouldn't know.)
– Monica Cellio♦Sep 20 '17 at 15:15

@MonicaCellio: It depends on what all the scripts are doing and how many people use them. My guess is that scripts that move things around on the page won't interrupt data collection and the number of people using scripts will be relatively small. As long as the script doesn't strip out HTML tag attributes for some reason, I think we'll get good data.
– Jon Ericson♦Sep 20 '17 at 17:04

On Stack Overflow and (now) on Meta Stack Exchange, there's a useful "Help" link in the SE Hamburger in the right corner.

Now, mods have early access to this on a site-specific basis but there's no "help" link on either of the sites I moderate:

Will the help link be added here on all sites when it's rolled out for everyone? Right now, having to scroll all the way to the bottom of the page to find the help link is onerous. Having the link more at hand would be helpful to all users, not only users with under 500 reputation.

As a moderator, I regularly visit the help pages to get links both for the on topic and privileges pages (among others), which are difficult to get to otherwise.

I access help frequently to guide new users. I really want it to be readily available to all users.
– Monica Cellio♦Sep 18 '17 at 21:03

@Joe I assume the status completed will actually be the case the next time the site builds? Cause right now I still don't have a "help" link. :D Also, I'm excited you're using the tags! I hope it helps people see what you have planned and what you're not going to be implementing!
– Catija♦Sep 19 '17 at 3:24

2

@catija Sorry updated with the wrong status. We will get this one fixed.
– Joe FriendSep 19 '17 at 4:11

As you all know, I need all the rep I can get.
– Joe FriendSep 22 '17 at 22:41

New users already ought to be reading the Help pages more before posting. The old top-bar had a relatively prominent help center link. No newbie is going to find the help link buried inside the hamburger menu in the top-right corner on their own.
– 200_successSep 28 '17 at 21:59

@200_success It's not buried for new users... users with less than 500 reputation have a help button just like the current one.... well, it's a question mark in a circle, not the word "help" but... you get my point.
– Catija♦Sep 28 '17 at 22:01

Many of the answers here are about having various drop-down buttons in other positions in the top-navigation. So, I wrote a user script that gives you the ability to move the drop-down menu buttons to different places in the top-nav. You can set preferences (on the normal SE user-preferences page) to have the drop-down menu buttons where you want them (at least more so than whats normally available).

You can set preferences for how you want the new top-navigation to look. Works on SO/MSO and MSE/etc. (should be any with new top-nav). There's: move drop-down buttons (left, right, center); adjust height; add a dark theme (top-nav) for SO/MSO; merge the site-switcher with the logo; global sticky/not; 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:

Moderator tools

By default, they should be placed in the center of the top-nav (the "other" category). However, I'm not a moderator on any SE site. Thus, I haven't been able to test it. If someone could do so, I would appreciate it. If possible, I'd like to get the information as to the classes used on the moderator tools buttons and drop-down menus.

On the drop-down buttons the important class should look like js-[something]-button. On the actual drop-down it should look something like [same something]-dialog. A somewhat more detailed description is in the Moderator tools section here. If it helps, I can make a version of the script which either outputs the information in the console, as an "alert", copies it to the clipboard, or otherwise makes it easily accessible.

Wow. I hacked together a quick and dirty little user-script over the last couple of days that does...some of this, and in a much less elegant way, with my very limited knowledge of JavaScript and CSS. Now I see that you've basically written a masterpiece and hidden it over here. I guess I should have suspected on the web programming wizards would swoop in with this, I just didn't expect it to be so soon, especially with the rollout largely limited to moderators. Anyway...I'll look into forking this and adding the mod tools support.
– Cody GraySep 20 '17 at 13:33

2

So...this is fantastic, and it's so fast. Most user-scripts I've ever seen have a visible delay as they manipulate the DOM. I don't see that here. Wonderful. The mod tools look fine in the topbar immediately after installing, but yeah, the drop-down isn't aligned. I was going to fix it myself, but your code is well written enough to be way over my head. I'll post the relevant information in an issue on GitLab.
– Cody GraySep 20 '17 at 14:17

@CodyGray thank you for taking the effort to make your script. Several people have been working on various pieces of the problem, so even if it all converges on somebody else's script, you still helped and I appreciate it. We haven't quite reached convergence yet, but we're close I think. (I filed an issue asking for a larger-font option.)
– Monica Cellio♦Sep 20 '17 at 15:20

1

Oh my, this is absolutely wonderful. Especially the option to make the height the same across sites! Having two different heights was going to drive me batty. I wish I could upvote a hundred times.
– AjeanSep 20 '17 at 16:13

Please make the stickiness persistent, at least from main to meta if not network-wide

I know that a network-wide flip for the stickiness is an, uh, sticky point, but I was pretty surprised to find the top-bar to stick to the top of the screen on meta.SO after I'd disabled that feature on SO itself. Add additional switches for meta if you want, but I think it's reasonable to assume that if a user has set the top bar as fixed on a given SE site, they also want it to stay put on the corresponding meta.

My understanding is that the top bar on SE sites is not going to be sticky at all. Are you saying that you want them to make it sticky?
– Cody GraySep 15 '17 at 7:01

As long as it's switchable, I'm not sure I care either way - whatever the A/B testing says works best network-wide, I guess. Just keep it consistent.
– E.P.Sep 15 '17 at 8:39

2

@CodyGray I know some users dislike the top bar stickness, but some users like myself do happen to like the sticky bar. I actually do want them to make all the top bars sticky.
– Tot ZamSep 18 '17 at 20:46

2

I'm with @TotZam - after using the sticky toolbar on SO since it became available, I really miss it on the other sites - this is the main thing I've been looking forward to on its roll out everywhere.
– James ThorpeSep 21 '17 at 11:50

@James Sure, but I don't see how that's relevant here.
– E.P.Sep 21 '17 at 11:53

@JoonasIlmavirta I'm going to sound pedantic but if you look closely, the site switcher only has three bars while the actual logo has four. Technically, though it has the little talk bubble thing, it's really a stylized hamburger menu.
– Catija♦Sep 20 '17 at 22:56

2

@Catija True, they are not identical. But I see them as slightly different variations of a single idea. I find it confusing to have two hamburgers in the top bar.
– Joonas IlmavirtaSep 21 '17 at 4:38

I do agree it's expected to lead to stackexchange.com, however since it used to open the site switcher, it would have caused tons of confusion for many old time users, myself included.
– Shadow WizardSep 22 '17 at 19:20

Please un-bold the rep number. The contrast of the bright blob on a dark background is unnecessarily distracting, especially on sites with a dark theme to begin with. It's cool that I have rep, but I know about how much it is, I don't need or want the exact number in my face constantly.

Firefox still has an open bug about this; if you don’t place SVG icons on precise pixels (which can happen very easily if you are using em margins/paddings for example), it will not manage to render them starting on full pixels, resulting in this unsharpness. You can “fix” this by adding transform: rotate(360deg) on the SVG element.
– pokeSep 15 '17 at 7:35

Looks like it's been fixed..! This is sort of remarkable, because I remember reporting far more serious issues to Microsoft (e.g. Hotmail user-defined filter rules stopped working) and the effect was like I had shouted into a vacuum.
– Evgeni SergeevSep 27 '17 at 8:39

Add a "Tools" link in the review dropdown for "10K" users and moderators.

The Tools are one of the most valuable set of data for moderators and sufficiently high-reputation users and I've long found it troublesome that I have to go to review first and then to the tools. With the dropdown, you choose which queue you go to, why not also let us go directly to the tools page?

Based on what I can see when comparing the review dropdown between MSE and the sites I mod, you're already only showing the queues for the reviews I can actually handle, so it seems like the logic is already there for deciding whether to add the "tools" link.

But even if it was just at the very bottom like this:

That would be quite nice.

On a slightly related note... why aren't the all of the queue list items on the two dropdowns in the same order? Because... if I'm going to get used to where they are, it makes sense that, when available, they're all in the same order. If we could get that, it'd be nice. At first I thought that it was just some additional ones injected at the top but, no... LQP list is in both but it's first of six on IPS and third of four on MSE.

Nice! Great addition to the navigation.
– Josh CaswellSep 21 '17 at 21:33

4

Oh, I've wanted this for so long. It used to be on the topbar, but we lost it a couple of revisions ago. I thought it was gone forever. I'm overjoyed that it is back now. Thanks for proposing this, and thanks to @Kasra for implementing it.
– Cody GraySep 22 '17 at 5:58

Apparently they're implementing something like this... they're putting a dot on the left side of the dropdown that lights up when there are reviews and they're removing the numbers. meta.stackoverflow.com/questions/355233/…
– Catija♦Sep 28 '17 at 22:06

Yeah, now we have the dot but lack the numbers. I'd prefer it like in the 2nd screenshot here – i.e. having both a clear indicator and the numbers ;)
– IzzyOct 1 '17 at 21:55

Please add an option for the top bar to be sticky. I hoped that this was planned for the new top bar, but when the new top bar came to Meta Stack Exchange, I was really disappointed to see that the top bar wasn't sticky and that there wasn't any setting to make the top bar sticky.

Personally I really like the top bar being sticky on Stack Overflow, since I can see new notifications and reputation changes and can easily access review even when I've scrolled down, and there are probably others who agree with me. But I'm aware that not everybody likes the stickiness, so I think that the way Stack Overflow does it is good. On Stack Overflow, the top bar stickiness can be enabled or disabled with a setting in Edit Profile & Settings > Preferences:

I hoped to find the same thing on Meta Stack Exchange after the new top bar was created, but there wasn't any such setting. I assume that it will be the same when the new top bar will come to the other sites.

Could we please get an option to make the top bar sticky like on Stack Overflow? If the problem is that some users don't want the top bar sticky, stickiness could be disabled by default.

Can't believe I upvote this, as in the beginning I opposed the stickiness of the top bar on SO.
– Shadow WizardSep 18 '17 at 19:24

FWIW, in the absence of an official implementation, this should be easy to hack with user CSS. Just .top-bar { position: fixed } ought to do it.
– Ilmari KaronenSep 18 '17 at 19:31

4

Agree with this - I was really hoping that at some point I could adjust to the position of the inbox on Stack Overflow because it'd be in the same place on all the other sites too. But if it's still off-screen most of the time, I'm back to having to remember to hit home / page-up periodically to check it; might as well just un-sticky it on SO too, since after 8 months I still haven't gotten used to it there.
– Shog9♦Sep 18 '17 at 19:43

7

In contrast to Shog, I got used to the sticky topbar really quickly and have been looking forward to this update so that I could stop being confused whenever I switch from one site to the other. I realize that I'm an extreme outlier when it comes to site usage (most users don't necessarily know that Stack Overflow has a network of other sites), but I do wish there were an option (even if off by default) to get the same UI everywhere. Unless this is implemented, I'm going to have to disable the SO stickiness to reduce the friction of switching sites.
– Jon Ericson♦Sep 18 '17 at 22:33

Since you're redesigning your new top bar, please consider adding a FAQ menu item, particularly for the benefit of those new to Stack Exchange. New members and visitors to English.SE often miss the FAQ items hidden behind the "help" link in the footer, resulting in numerous off-topic questions.

Why on earth is the top bar on non-SO sites so different from the one on SO?

“Questions”, “Tags”, “User” (and the SO-specific “Devloper Jobs”) appear on the top bar on SO, but not on other sites.

White background on SO, black background elsewhere.

Taller top bar on SO (yet it's still one line, without any taller item).

Different review indicator (red dot vs orange color). Or maybe those mean different things — who knows, since the meaning is not explained by the tooltip.

On SO the top bar moves when it receives or loses focus. (In a totally nonsensical way, since unfocusing the browser window counts as losing focus.) Animating what becomes focused is pointless (I'm already looking at it), animating what loses focus is counter-productive (I don't want to pay attention to it anymore), and both contribute to my visual fatigue. Please fix.

This was needed in order to work with sites with long names and/or custom skins.

This makes no sense. SO doesn't even include the site name anywhere for logged-in (high-rep?) users! And on other sites the name and logo are in a second row below the top bar. Why not use two rows everywhere? The same two rows, please.

How'd you get 29K rep like that? Do you just never click the achievements button, ever?
– WildcardSep 19 '17 at 4:20

2

@Wildcard No, I don't. I normally hide it with custom CSS, so the only way I click it is when I accidentally type the shortcut letter. Of course for the screenshots here I turned off all my customizations.
– GillesSep 19 '17 at 6:55

FWIW, I also see the hamburger half clipped off on SO itself using Firefox 55.0.3.
– AjeanSep 19 '17 at 22:00

The search icon is currently like it is on Stack Overflow. On Stack Overflow that's fine because all the other buttons there are like that, but on Meta, I agree that it's inconsistent with the rest of the theme. Maybe make the button look the same as all the other buttons on the current site.
– Donald DuckSep 18 '17 at 20:05

@DonaldDuck I agree, it looks much better on Stack Overflow, also because of the outline the whole search bar gets there.
– KeelanSep 18 '17 at 20:08

6

And while we are at it remove some of the height from the search box. It looks overly tall compared to other items in the top bar.
– DavidPostillSep 18 '17 at 20:42

I access help frequently to guide new users. I really want it to be readily available to all users. – Monica Cellio

It's hard enough already to get new users to read the help. Now it's broken, and after it has been fixed, it will be hidden. Why? Please fix this.

And then there's the invisible mod controls.

With my settings to use larger fonts, and a non-widescreen monitor, I can't see the entire site unless I scroll. Only half of the mod diamond is visible -- all the other mod stuff is buried in the corner.

Since my monitor is old and crappy, I can't see most of the things in the top bar unless I mouse over the bar. The stuff which is too bright and "in my face constantly" in this answer is the only stuff I can see without actively looking for it. You can probably see all the things in my screenshot. I see solid black to the right of my bronze badge count.

I used to compensate for not being able to see what was in the top bar by having the muscle memory of where everything was. With the new design, I have to memorize where stuff is all over again, and I have to scroll.

Why can't the mod stuff be in the blank space in between the search bar and the user's profile pic?

It's also a pain to have the site switcher on opposite sides of the screen, depending on whether you're on a site as a user or a mod.

"Why can't the mod stuff be in the blank space in between the search bar and the user's profile pic?" Because that blank space is actually reserved for increments in your reputation/badges that will cause it to take up more room. Things in the topbar don't seem to resize dynamically to fill the available space.
– Cody GraySep 21 '17 at 10:10

If the top bar will be sticky, please make it scroll horizontally with the page content

This has been requested before, but I feel it's important to fix this issue before the new sticky top bar is deployed on all SE sites. Currently, simply disabling the stickiness on SO (and meta.SO) is a sufficient work-around for this issue. If it's going to be deployed on all SE sites, though, this will become a lot more annoying since the setting is (at least currently) site-specific.

(Addendum: As noted in the comments below, it seems that the current plan is not to make the top bar sticky on any sites except SO. If so, this is much less of a pressing issue, although it would of course still be nice to see this fixed for SO at least.)

(The patch above in fact contains two separate changes. The first one fixes the top bar scrolling, while the second one makes the scroll event handler also react to window resize events. Those changes don't actually depend on each other, but I'd recommend you apply both.)

After applying the patch above, you should also remove the min-width: auto CSS property from the styles currently applied to the .so-header._fixed selector to avoid the top bar being truncated when scrolled to the right. (There may be other, possibly better ways to fix this secondary issue, but based on my testing, just removing this style should be sufficient and have few if any harmful side effects.)

Also, for completeness, you should add the line:

$('.js-so-header').css('left', choice ? 0 : -$(window).scrollLeft());

after the following existing line:

StackExchange.scrollPadding.setPaddingTop(padding, gap);

in the inline JS code on the user preferences page. This will ensure that the horizontal top bar position will be correctly updated when the user selects or deselects the "Disable stickiness" preferences option.

(And yes, the development branch of SOUP already includes a fix for this issue, implemented pretty much as described above. I think I'll wait until the new top bar has been deployed on Meta.SE before releasing the next stable SOUP version, so that I can properly test the fix outside SO first.)

I think Oded is replying to "@Oded and the review icon behavior will be the same as it's now on SO?" there.
– user315433Sep 14 '17 at 16:39

@Michelle: Hmm, good point, that's possible. Anyway, if they're not going to make the top bar sticky on other sites, then this doesn't matter so much. Although they should still fix it for SO anyway. But I don't really see why they'd make the top bar sticky on SO and not do the same for other sites too.
– Ilmari KaronenSep 14 '17 at 17:41

3

SO has "Developers Jobs" button, and it seems important for this button to be in the face of visitors who scroll down to read answers. (Hence the merge of main navigation with top bar). This doesn't apply to other sites.
– user315433Sep 14 '17 at 18:13

The alignment is incorrect for the "count" badges for all of the notification icons on the right side of the topbar. Instead of being positioned off to the upper-right corner, it covers up the icon. Compare:

As you can see, this affects only the SE version of the topbar, not the SO version. Although the screenshot shows only the badge on the inbox icon, the same thing happens for the achievements icon.

The screenshot was taken in Chrome 61, but I can reproduce this on other browsers, as well.

Please tweak the pixel-level positioning of this element.

As pointed out in the comments, this is probably due to the SE version of the topbar being vertically shorter than the SO version (a bug all in its own right), but the counter badge can still be moved up and to the right slightly to improve the appearance, even if it can't match the SO version exactly.

If that messes up the "raise on hover" effect, then consider changing the effect to lower on hover. That provides the same visual feedback, makes the normal state look better, and arguably makes even more sense—when hovering, a click will view the notifications, so it makes sense for the count to be front and center.

This is pretty hard to describe in words, but immediately obvious once you see it. Here's a little movie:

You'll notice that all text in the bar does a little fade effect, apparently losing the bold style, and then regaining it, when the search box loses the focus. You see this on the right-hand side of the bar, with the flags, reputation, and badge counts. (You can also make it out with the navigation links on the left, but this might be a normal part of the transition effect. The stuff on the right doesn't transition, so shouldn't have any effects.)

The movie shows SO's topbar, but I see the exact same thing on MSE.

To be fair, I took the movie in Safari on macOS. The effect is most visible on the Mac, because of how the system renders bold fonts (they are...bolder), but I also see it in Chrome on other platforms (Windows and Linux).

I really like that subsequent versions of the topbar have added a "dashboard" quick-link to the mod inbox dropdown. That's a real boon to moderators on sites with low volumes of flags.

On Stack Overflow, though, the page that links to takes a very long time to load. If you want to go to one of the other tabs on that page, it just wastes time when you just want to navigate immediately to one of the other tabs.

I'd like to see three quick-links up there:

"links" (goes to /admin/links)

"history" (goes to same page that the current "dashboard" link does, /admin, but with a more obvious name)

"flags" (goes to /admin/dashboard)

These are all commonly used, in my experience. We have the space, and moderators are expert users least likely to be confused by more links, so why not?

I'm assuming this was a design compromise due to the smaller topbar height compared to SO. Doesn't really bother me much, but I can understand if others feel differently.
– angussidneySep 19 '17 at 9:54

3

It's easily fixable, even with the smaller height. Just move the badges up a few pixels. Even if it isn't identical to the SO topbar, it could still look a lot better.
– Cody GraySep 19 '17 at 10:19

I guess I will get used to this, but there are a few points I want to raise:

Where is the "mod" link? Couldn't find it in any menu. Ok, found it. "The Dashboard" is in the mod messages -menu.

Where is the "Help Center" link? I need to find it quickly because I often need to refer newbies to relevant parts of TFM. Ok, Janos and Joonas gave me solutions.

Why did the Search box get such a prominent position? As long as the search engine cannot hack LaTeX it is underused in Math. I only ever use it when viewing a single tag. OTOH when I am viewing a single tag, the search window is better placed now. I just think that space could be used better. Ok, I realize that elsewhere in the SE network this layout may be more useful.

If you click on the diamond, there's a link to the dashboard in the upper right corner of the dropdown there. The missing help center link is a bug. My answer here points it out. If you look at MSE, there is a help link in the hamburger drop down. This isn't rolled out on the individual sites at the moment but should be.
– Catija♦Sep 18 '17 at 21:34

There is a help link in the footer but there certainly should be one in the top bar somewhere.
– Joonas IlmavirtaSep 19 '17 at 22:17

@snailplane LOL! I should spend more time outside Math.SE to realize that we are not alone with our specific problems.
– Jyrki LahtonenSep 20 '17 at 3:22

@Joonas Thanks. I can manage with that. It still might be good to have it in the top bar as well. On my 17 inch 9:16 display I would like to avoid having to scroll up and down unnecessarily.
– Jyrki LahtonenSep 20 '17 at 5:17

Totally agree about the help center. That is much more important than a little place in the footer.
– Simon ForsbergSep 20 '17 at 19:30

When this change was first rolled out, clicking on the Stack Exchange logo didn't do anything and people objected to that.

Now it does something, but it's not quite right:

The logo is now a link to the SE home page -- good, after we all get used to it 'cause we were expecting the site switcher -- but it launches that page in a new tab. That is almost never the correct response. I can see the argument for launching a new tab when the user is in the middle of doing something with unsaved work that would be disrupted (like a form submission), but this is the top-bar. People clicking on it are expecting something to happen.

New tabs are disruptive. Often times I don't notice that a site has moved me to a new tab until I try to use browser controls to go back to where I was -- which will be particularly common when people looking for the site-switcher get this by mistake, but also happens over longer periods of time. I sometimes find that I have a dozen or more tabs to the same site because of this -- I clicked, kept doing whatever I was doing, and didn't notice the problem until confronted with the browser mess.

Please don't do this to people. If it's important enough to link to in the first place, it's important enough to show in the current tab, like almost everything else on SE.

Yes. SE has generally had a policy of (repeatedly) declining requests to have links open in new tabs by default. So this is a pretty major departure from policy.
– Catija♦Oct 7 '17 at 18:09

2

These changes in combination are beyond bad; this is actually user-hostile. I would love to hear how this decision was made. "Hmm, people don't seem to like the fact that the seat warmer switch doesn't do anything. I know! We'll make it the ejector button!"
– Josh CaswellOct 9 '17 at 12:26

@DonaldDuck As I commented on that Q, some of the real estate was eaten by a (imho useless) Stack Exchange logo that lists all SE sites, a function that was fulfilled by the full logo top left. Which is now a dead link. drops mike
– VincentSep 20 '17 at 8:26

The help link is added in the sit switcher. See this image. Tour option should be retained. See this question.
– Nog ShineSep 22 '17 at 9:28

@JoeFriend Thanks: I see it's fixed now, in the sense that it looks as it did before (before the new top bar). Is this the final state, or will it gain a new appearance later?
– ShreevatsaRSep 19 '17 at 2:28

It will be updated to the new top bar when that goes live for all sites. It was a bug that there was any change today.
– Joe FriendSep 19 '17 at 2:33

3

@JoeFriend please consider what that's going to look like on a phone. I keep a tab open to my network profile and find that page a handy way to see if there are new notifications waiting. That'd be way off the screen with this design.
– Monica Cellio♦Sep 19 '17 at 3:15