52

Update:

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 stackoverflow.com

New top bar on webapps.stackexchange.com: New top bar on webapps.stackexchange.com

New top bar on gaming.stackexchange.com: New top bar on gaming.stackexchange.com

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

New top bar for high rep member: New top bar for high rep member

New top bar for moderator: 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.

  • 41
    ...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 Gray Sep 13 '17 at 18:05
  • 186
    Can SO get a black bar back to at least keep the coloring consistent? – NathanOliver Sep 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 Gray Sep 13 '17 at 18:09
  • 9
    Are you going to deal with the achievements icon before rolling it out to other sites? – Andrew Myers Sep 13 '17 at 18:09
  • 105
    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 Gray Sep 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. – NathanOliver Sep 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? – Machavity Sep 13 '17 at 18:17
  • 13
    Obligatory. – ɥʇǝS Sep 13 '17 at 18:53
  • 11
    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 Miller Sep 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 – Icepickle Sep 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. – g00glen00b Sep 14 '17 at 9:35
  • 12
    @ChrisStratton Don't be ridiculous, people are using Stack Overflow just fine with the new top bar. – TylerH Sep 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 Gowers Sep 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. – Sklivvz Sep 21 '17 at 19:12

35 Answers 35

172

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:

new topbar for mods

(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:

current topbar for mods

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.

  • 91
    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
  • 4
    @Randal'Thor how boring the world would be, if we never had typos to provide entertainment. :-) (There are a couple more in the body of the post, including an unresolved tension that will be with you for the rest of the day.) – Monica Cellio Sep 14 '17 at 13:17
  • 6
    @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 Friend Sep 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. :) – Laura Sep 15 '17 at 14:42
  • 3
    So this didn't happen then :-( And the site-changer menu has changed ends too. – Andrew Leach Sep 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 Murphy Sep 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. – Makyen Sep 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
98

Stealing from this excellent answer by canon.

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

hybrid

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)

enter image description here

  • 7
    That's some awfully small text (and hence an accessibility concern). Don't tooltips already do much of the job anyways? – E.P. Sep 14 '17 at 16:21
  • 37
  • 10
    @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 CVn Sep 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. – Clonkex Sep 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. – Clonkex Sep 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'Thor Sep 15 '17 at 19:08
  • 1
    You can (somewhat) accomplish this with CSS, if you wanted it now: gist.github.com/tiesont/6854672997a6257f1bd9005bed738e15 – Tieson T. Sep 17 '17 at 2:17
  • 11
    @E.P. I don't really understand how anyone is "thrown under the bus" by adding a text to the icon. Is it that the icon becomes smaller this way? – Paŭlo Ebermann Sep 17 '17 at 18:36
  • 2
    @Randal'Thor: That's because /review is important! – Nathan Tuggy Sep 19 '17 at 19:28
  • 9
    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. – tchrist Sep 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. – terdon Sep 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
80

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.

  • 2
    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 Friend Sep 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
78

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.

  • 18
    +1  for restoring / retaining the little down arrow next to the site switcher. – Scott Sep 15 '17 at 4:18
  • 3
    My suggestion for the same met with little enthusiasm. Hopefully it being repeated here will lend the idea more weight. – Andrew Morton Sep 19 '17 at 18:03
  • 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.... – Wildcard Sep 26 '17 at 3:10
61

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.

SE Top Bar Scaled Browser

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.

how se uses the screen

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

How it scales the flags into Nirvana...

  • 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. – Helmar Sep 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 CVn Sep 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 CVn Sep 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 Maker Sep 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 Maker Sep 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 Henderson Sep 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. – Fox Sep 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. – Helmar Sep 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
59

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:

Image of the proposed new logo

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

Image of said logo failing at contrast 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:

results of the WCAG check, passes all on large text, gets AA but fails at AAA on normal text

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

The new top bar but with the old color 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?

  • 11
    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. – Ave Sep 14 '17 at 16:43
50

Your choice of hamburger

Top bar

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

Top bar again

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

Top bar yet again

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

Top that bar one more time

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

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

Tip-top bar

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:

bar top

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.

  • 11
    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 Duck Sep 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 Ostermiller Sep 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. – doppelgreener Sep 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. – ColleenV Sep 20 '17 at 21:01
47

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:

    enter image description here

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

    enter image description here

    enter image description here

    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.

  • 2
    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 Zam Sep 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 Duck Sep 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 Zam Sep 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??? – Ajean Sep 15 '17 at 0:42
  • 15
    So... why is this status-declined? – thesecretmaster Sep 20 '17 at 0:03
  • 13
    @joefriend Can we get a reason for the status declined? – NathanOliver Sep 21 '17 at 16:00
44

(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?

  • Duplicate of this mention/request... – Werner Sep 22 '17 at 16:46
  • 4
    This isn't a feature request, it's user feedback. – Josh Caswell Sep 22 '17 at 17:29
  • 1
    "Good" news: now you won't be sitting there saying "argh! load you stupid menu!". Did you know there was something worse? – Monica Cellio Oct 9 '17 at 15:32
37

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? – Stijn Sep 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. – Stijn Sep 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. – Stijn Sep 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
35

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

Help on MSE

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:

No Help on IPS

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.

  • 13
    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 Friend Sep 19 '17 at 4:11
  • @JoeFriend Maybe in addition to this: the privileges and badges links under the reputation icon (same behavior) (need a separate answer ?) – Tensibai Sep 19 '17 at 9:40
  • @JoeFriend I think, thanks to Kasra, this is actually status completed now :D Seems to be, at least. – Catija Sep 22 '17 at 20:34
  • @Joe it's weird you need to suggest an edit, why no diamond here? – ShaWiz Sep 22 '17 at 21:16
  • @ShaWizDowArd probably doesn't want to have to accept the mod agreement :P – Catija Sep 22 '17 at 21:17
  • @Catija lol but he accepted the PM agreement which is surely more strict... :D – ShaWiz Sep 22 '17 at 21:19
  • @ShaWizDowArd I don't want to be a mod everywhere, but I probably should just bite the bullet and be one here. – Joe Friend Sep 22 '17 at 22:19
  • @JoeFriend though, there's nothing wrong with getting some rep for making edits :P... provided people approve them. :/ – Catija Sep 22 '17 at 22:23
  • @Catija well, he did make a fortune here in this single "question". ;) – ShaWiz Sep 22 '17 at 22:30
  • I don't know... he's gotten a lot of DVs, too... @ShaWizDowArd – Catija Sep 22 '17 at 22:31
  • As you all know, I need all the rep I can get. – Joe Friend Sep 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_success Sep 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
32

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:

Default is this

Drop-down menu buttons can be centered:

Centered drop-down buttons and light theme

Here are the options in action:

Various options settings

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.

  • 6
    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 Gray Sep 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 Gray Sep 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. – Ajean Sep 20 '17 at 16:13
31

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 Gray Sep 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 Zam Sep 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 Thorpe Sep 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
28

The search bar looks out of place.

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

Topbar without annotations

Topbar with lines drawn across to show the relative heights of each item

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

Search box and user icons both 28px high

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.

27

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.

enter image description here

  • 20
    Strange that this is status-bydesign, since all sites have a clickable logo. It feels awkward without it being clickable, don't you think? – Werner Sep 19 '17 at 2:50
  • 12
    I don't understand what the cost is of letting that logo provide access to the site switcher. – Monica Cellio Sep 19 '17 at 18:08
  • 11
    The same SE logo is in two places. The one next to the text does nothing, the other one is a site switcher. Why not combine the two? The site switcher is quite confusing. – Joonas Ilmavirta Sep 19 '17 at 22:08
  • @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 Ilmavirta Sep 21 '17 at 4:38
  • 5
    Super awkward... – canon Sep 21 '17 at 13:10
  • 1
    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. – ShaWiz Sep 22 '17 at 19:20
26

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.

dark site

23

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

enter image description here

Blurry, as if I wasn't wearing glasses.

Here's why:

enter image description here

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:

  • 1
    funny that all of the icons are shifted exactly 0.5px :-) – yo' Sep 14 '17 at 8:27
  • What browser (and version) and system? – Paweł Sep 14 '17 at 9:38
  • @Paweł Good point! Firefox 52.3.0esr on Windows Vintage... Just checked and icons look great on Win7. False alarm! :) – Evgeni Sergeev Sep 14 '17 at 10:31
  • 9
    Windows Vintage? :) Anyway, thanks for letting me know. – Paweł Sep 14 '17 at 10:33
  • 5
    These should be SVG icons anyway... – TylerH Sep 14 '17 at 14:48
  • 6
    @TylerH These are SVG. – Paweł Sep 14 '17 at 16:30
  • 12
    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. – poke Sep 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 Sergeev Sep 27 '17 at 8:39
20

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.

IPS Queues list MSE Queues List

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

Rendering of Queues list with "tools" added

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.

  • Yeah, this is a good idea. Ans as a reminder, if this is added, then the help needs to reflect it too. – E.P. Sep 21 '17 at 12:23
  • 5
    Done! We've updated the review dropdown to have a link for "tools" right next to the "all queues" :) – Kasra Rahjerdi Sep 21 '17 at 19:14
  • @Kasra only to 10k rep users, I hope? (Can't test it, no sock with rep above 500 and below 10k) – ShaWiz Sep 21 '17 at 19:20
  • 1
    Nice! Great addition to the navigation. – Josh Caswell Sep 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 Gray Sep 22 '17 at 5:58
20

Highlight queues where reviews are available.

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

enter image description here

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:

enter image description here

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

  • 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 ;) – Izzy Oct 1 '17 at 21:55
20

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:

enter image description here

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.

  • 1
    Can't believe I upvote this, as in the beginning I opposed the stickiness of the top bar on SO. – ShaWiz Sep 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 Karonen Sep 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
17

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.

  • 9
    This being only applied to users under a certain rep or it being possible to be disabled would be nice. – Ave Sep 14 '17 at 12:26
16

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): meta

CS (mod tools): cs

SO: so


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.


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.

  • My Firefox window is currently 1312px wide and I'm getting the same clipping (Win7). – Monica Cellio Sep 18 '17 at 21:00
  • 5
    How'd you get 29K rep like that? Do you just never click the achievements button, ever? – Wildcard Sep 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. – Gilles Sep 19 '17 at 6:55
  • FWIW, I also see the hamburger half clipped off on SO itself using Firefox 55.0.3. – Ajean Sep 19 '17 at 22:00
  • I'm not seeing the clipping any more. Are you? I'm typing this from a Chrome window (Mac) that's 1085px wide. – Monica Cellio Sep 20 '17 at 0:56
  • @MonicaCellio I'm not seeing it anymore either today. – Gilles Sep 20 '17 at 8:59
  • Indeed, I can no longer reproduce this clipping either. Maybe they rolled out a fix :) – Ajean Sep 20 '17 at 15:52
  • The bite out of the Hamburger was reported here, and marked status-completed by Joe Friend. – Rob Sep 23 '18 at 20:00
15

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

enter image description here

This is, in my opinion, cleaner:

enter image description here

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

  • 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 Duck Sep 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. – Keelan Sep 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. – DavidPostill Sep 18 '17 at 20:42
13

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.

enter image description here

And then there's the invisible mod controls.

enter image description here

  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.

  • 1
    "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 Gray Sep 21 '17 at 10:10
12

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

  • I didn't see any statement from an employee about the new new black topbar being sticky or otherwise... did I miss it? – user315433 Sep 14 '17 at 14:55
  • 1
    @Michelle: That was mentioned in the comments. – Ilmari Karonen Sep 14 '17 at 15:23
  • I think Oded is replying to "@Oded and the review icon behavior will be the same as it's now on SO?" there. – user315433 Sep 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 Karonen Sep 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. – user315433 Sep 14 '17 at 18:13
  • +1 to what @Michelle said. – Paweł Sep 15 '17 at 10:07
  • 2
    Oded says the topbar will not be sticky outside of SO. – user315433 Sep 15 '17 at 14:31
11

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:

Comparison of badged inbox icon on MSE and SO

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.


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:

Sorry, no alt text. There's really no way to describe this in words.

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


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?

  • 1
    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. – angussidney Sep 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 Gray Sep 19 '17 at 10:19
10

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

  • 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
  • 2
    For referring noobs to relevant parts of TFM the magic links are very convenient: meta.stackexchange.com/questions/92060/… – janos Sep 19 '17 at 9:57
  • Thanks, @janos I will study that :-) – Jyrki Lahtonen Sep 19 '17 at 10:09
  • 1
    Likewise, the search engine isn't particularly useful on Japanese.SE. – snailboat Sep 19 '17 at 17:47
  • 2
    There is a help link in the footer but there certainly should be one in the top bar somewhere. – Joonas Ilmavirta Sep 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 Lahtonen Sep 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 Lahtonen Sep 20 '17 at 5:17
  • Totally agree about the help center. That is much more important than a little place in the footer. – Simon Forsberg Sep 20 '17 at 19:30
9

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:

launches SE home page in a new tab! oh noes!

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.

  • 1
    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 Caswell Oct 9 '17 at 12:26
7

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

enter image description here

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 enter image description here at the right most corner.

  • For users with less than 500 rep there is question mark icon instead of review, opening this exact menu: i.stack.imgur.com/BtOMq.png – ShaWiz Sep 19 '17 at 14:31
  • 8
    @ShaWizDowArd yeah but low rep users aren't the only people who access the help pages. – Catija Sep 19 '17 at 16:23
  • 1
    I agree that the question mark should be visible for all users. There is already a question asking for that on Meta Stack Overflow, but apparently they claim that there is not enough room in the top bar, which is wrong (here is an image that I made in Paint a few months ago to prove my point when responding to the MSO answer). – Donald Duck Sep 19 '17 at 17:22
  • 4
    @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 – Vincent Sep 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 Shine Sep 22 '17 at 9:28
  • It is now status-completed. We have both review icon and also a help center icon. – Nog Shine Jan 6 '18 at 6:50
6

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

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

top bar on stackexchange

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

  • Looking into it. Thanks for the report. – Joe Friend Sep 19 '17 at 1:05
  • @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? – ShreevatsaR Sep 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 Friend Sep 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

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .