New top bar is coming to the Stack Exchange network

Question

Update:

• See: New top bar next steps and response to feedback

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

New top bar on Stackoverflow.com:

New top bar on webapps.stackexchange.com:

New top bar on gaming.stackexchange.com:

New top bar on a beta site with a long site name:

New top bar for high rep member:

New top bar for moderator:

Why change the top bar?

If this change is new to you, then check out the How Stack Overflow Redesigned the Top Navigation blog post and the meta post Has the top bar redesign met its goals? for more details.

Answer 1

status-completed

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.

Answer 2

Stealing from this excellent answer by canon.

Adding some text under the icon looks like a great idea:

There's a good reason the suggestion is highly upvoted.

In the interim, it lets people know what the symbols are.

Personally I kinda prefer "Achievements" and the bar chart over the participation trophy there.

I also suspect shifting the non mod/low rep user cluster we see here a little to the right, and nestling reviews and moderation in the space between that and the rep/badge cluster would be handy.

Kinda like this (I'm not an artist or a UX person, so pardon any roughness)

Answer 3

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

The number-one complaint I have with the current top bar is the fact that the review counter lights up even when there's nothing at all I can do to make it go away:

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.

Answer 4

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.

Answer 5

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 ;)

Update:

Yep, scaling alone is enough and the flag icon is gone...

Answer 6

status-completed

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:

And in my opinion (and in WCAG's opinion), that's much more readable.

Would it be possible to reconsider the color of the SE logo?

Answer 7

Your choice of hamburger

Right now, there are two versions of the SE logo on the top bar:

1. 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.

2. 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:

1. I can click the diamond to open the "mod messages" drop-down.
2. 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.

Answer 8

status-declined

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.

Answer 9

status-wont-fix (See Monica Cellio's answer and/or the followup MSE post.)

---

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?

Answer 10

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.

Answer 11

status-completed

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.

Answer 12

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

The user script is: Top-navigation choices.

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.

Answer 13

status-review

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.

Answer 14

The search bar looks out of place.

Take a look at the new topbar, and consider the height of each of the elements:

• All of the icons and text (green lines) are of the same height of each other. Good.
• The user icon (orange) is at just the right height needed to be visible without looking out of place. Good.
• However, the search bar (red) is unnaturally large and doesn't line up with any other elements. This makes it look out of place.

Suggestion

Design the search box so that it is the same height as the user icon, either by reducing it down to 24px or by scaling both to a new height altogether (e.g. 28px, pictured below).

That's certainly much better.

---

Another unrelated suggestion to make it look more natural: remove the shadow from the search button and make it visible at all times.

Answer 15

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.

Answer 16

status-completed

The Stack Exchange logo in the top bar doesn't link to anything although it's common for logos to link to some "home page." This should most likely link to Stack Exchange.

Answer 17

What about the crispness issue? This is what it looks like on my display:

Blurry, as if I wasn't wearing glasses.

Here's why:

Pixel snapping hasn't been taken care of (i.e. straight edges should coincide with pixel boundaries). Here are a couple of articles discussing what I mean:

• From Adobe

• From Microsoft

Answer 18

Highlight queues where reviews are available.

When the review icon lights up, I open it and take a look to see what's there:

Right now I look at each of the six numbers for whichever might not be a 0.

It would be useful to highlight them so I know immediately exactly which ones might need my attention:

There; it's that one and just that one and we already know it.

Answer 19

status-completed

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.

Answer 20

status-completed

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.

Answer 21

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.

Answer 22

bug status-completed The last item on the right of the top bar is truncated on the right if the width of my window is ≤1089. (Chrome 61, Linux.) This doesn't happen on SO.

Meta (no mod tools):

CS (mod tools):

SO:

---

ux design

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.

---

feature-request Back when the new top bar was introduced on SO, I raised a number of visual and UX annoyances. These annoyances haven't been fixed, or at least acknowledged.

Answer 23

Search icon

This is of course subjective, but I find the border and shadow on the search icon a bit too much (at leas on sites without their own design):

This is, in my opinion, cleaner:

(obtained by removing the box-shadow and border attributes.)

Answer 24

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

For your devs' convenience, here's a patch against partialjs\full-common\02_TopBar.js, as included in https://cdn-dev.sstatic.net/Js/full.en.js, that should fix this issue:

--- 02_TopBar.js    2017-09-14 16:01:25.701586401 +0300
+++ 02_TopBar.new.js    2017-09-14 16:09:29.708630692 +0300
@@ -1036,13 +1036,15 @@
             } else {
                 $header.removeClass('_scrolling');
             }
+
+            if ( $header.hasClass('_fixed') ) {
+                $header.css('left', -$(window).scrollLeft());
+            }
         }

         checkPosition();

-        $(window).scroll(function() {
-            checkPosition();
-        });
+        $(window).on('scroll resize', checkPosition);
     }

     // so we can iterate over the above klasses

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

Answer 25

TL;dr -- I agree with what Monica Cellio said, and what Catija said. Posting to add my screenshot and details.

Quoting it from the comments because I think it needs emphasizing:

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.

1. 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.

2. 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.

3. 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.

Answer 26

A moderator at Math.SE here (the new design just rolled out for me).

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

1. Where is the "mod" link? Couldn't find it in any menu. Ok, found it. "The Dashboard" is in the mod messages -menu.
2. 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.
3. 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.

I guess I will get used to this :-)

Answer 27

bug Notification counter badges are misaligned

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.

---

bug Text fades when unfocusing search box

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

---

feature-request Add additional quick-links to the mod inbox

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?

Answer 28

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.

Answer 29

status-completed

The top bar is broken on https://stackexchange.com currently. For example, if you click on the “Hot Network Questions” link on any site:

you are taken to https://stackexchange.com/questions?tab=hot whose top bar currently looks like this:

If you are logged in, click on "Inbox" or "Reputation and Badges" to have it take over your page. :-)

Answer 30

I think the following box is missing or dropped out for users with high reputation?

Notably are Tour and Help Center.

So, Are we going to drop these links since once can find it from bottom panel? I think they would be still useful and missing.

One suggestion: put link to https://stackexchange.com behind at the right most corner.