264

Update: The new top navigation is now live. Please continue to post feature requests and bug reports as new posts and tag .


We’ve opened up the new Top Nav to our power users for testing and feedback. Big thanks for all the participation, bug reports, feature requests, and usability insights. It was super helpful for us to uncover things we missed.

As we continue working through bugs & tweaks, we want to keep you updated on our progress. We’re aiming to resolve all critical bugs before launch. Some changes will require more research and testing, which we’ll treat as incremental improvements post-launch.

Please continue to post any new bugs/issues you come across by tagging .

Also, keep an eye out for a blog post, explaining in much more detail, about how and why we decided to update the navigation.

Resolved:

  • Fixed header is now a preference 1, 2, 3, 4
  • Notifications colors are back 1, 2, 3
  • Dropdown hover interaction is fixed 1, 2
  • Review bar is no longer covered by the top bar 1, 2
  • Review icon now redirects to /review 1, 2
  • Added a keyboard shortcut to Help 1, 2
  • The Mod menu diamond and count have been decoupled 1, 2
  • Stack snippets can now be closed 1
  • Privileges link has been added to the Achievements dropdown 1
  • Location suggestions on Jobs no longer overlays the header 1
  • Increased the clickable region of the logo 1
  • Keyboard shortcut issues have been resolved 1
  • Reputation now updates automatically 1
  • Visual bug in the search box is fixed 1
  • Toast notifications are now showing up in the correct position 1
  • Tooltips are no longer obscured by new header 1
  • Improved drop down usability 1
  • Achievements icon doesn't highlight when there’s no badge 1
  • Ask A Question is now displayed on search result views 1
  • Left padding issue when the browser shrinks is fixed
  • Homepage link doesn’t change color on hover 1
  • Flickering search icon on Firefox is fixed 1
  • Header width for “unsticky” version was adjusted 1
  • Firefox dropdown input issues were resolved 1, 2, 3
  • Blurry icons edge case 1 - not reproducible

Open:

  • Review queue - while this redirects to /review now, we think the UX here needz moar research and improvement. We’ll keep looking at this. 1, 2, 3, 4, 5, 6, 7, 8, 9, 10
  • Nav Style - We're looking into adding more contrast. Any changes will require more testing because changes here could invalidate previous tests. But we promise, we are looking into this. 1
  • Access to Help - this is currently available in the nav for anonymous & low rep users. We’re not sure it’s necessary as a persistent nav item, but we are thinking about it. 1, 2, 3, 4
120
  • 78
    Awesome update. A lot of fixes in a very short time. Thanks!
    – Kobi
    Commented Feb 13, 2017 at 18:56
  • 31
    Yes, thanks for the detailed fix list and all the hard work!
    – Joe
    Commented Feb 13, 2017 at 19:04
  • 16
    "We’ve opened up the new Top Nav to our power users": Nitpicking: It was already available to power users, it is now enabled by default. "Open up" implies opt-in. I see no way to "Opt out".
    – Cerbrus
    Commented Feb 14, 2017 at 13:47
  • 18
    Is it change site top navigation month or something? Github updated theirs as well... Commented Feb 14, 2017 at 13:51
  • 98
    How can I get back the normal stack overflow? I don't like this nav, it's too big and distracting. Commented Feb 14, 2017 at 13:52
  • 52
    The change just hit me literally while browsing StackOverflow so I'm still getting used to the new menu. I just wanted to add that the "old minimal black topbar" felt iconic and was a huge part of the StackOverflow identity. Kudos for working on improving StackOverflow, but I'm never forgetting my old safe-haven little black topbar ;-) Commented Feb 14, 2017 at 13:54
  • 26
    @Des It really disaster. Now I forced to use Tampermonkey or UBlock to remove it. Fixed-positioned elements is distraction! When we read and write code and prose, we want to think about code and prose. We don't need see our badges and login options permanently.
    – john c. j.
    Commented Feb 14, 2017 at 14:06
  • 70
    I don't understand what problems does this oversized top bar solve. Commented Feb 14, 2017 at 14:26
  • 63
    @Pogrindis: minimalism? The new bar is twice the size of the old one.
    – Cerbrus
    Commented Feb 14, 2017 at 15:19
  • 26
    @Pogrindis those are very subjective... I don't like the bar being twice the size it needs to be. There's no practical reason for it being that high.
    – Cerbrus
    Commented Feb 14, 2017 at 16:02
  • 88
    Oh My Deity -- I HATE the new top nav bar!!! CHANGE IS BAD! It looks so weird and you're fixing something that wasn't broken. I hate it so much. Can you give an option to use the good version if we aren't up for this? I know, I know, most comments are positive and I'm sure the UX guys know what's best, but maybe I'm not ready for it.
    – Hack-R
    Commented Feb 14, 2017 at 16:30
  • 57
    Why do you people have to keep changing things that aren't broken? This is a Q&A site, not some web brogrammer muscle-flexing exposition.
    – helrich
    Commented Feb 14, 2017 at 18:28
  • 55
    I hate the new nav bar. I dunno if I'm just not used to it or if its actually bad. I kinda liked having my new notifications inbox not tucked away in the far right corner where I never look. It used to be the first thing to catch my eye. Also, meta is now harder to get to. The help menu seems to have disappeared. If your fixing the top bar meta should have been made easier to get to (clicking on the help menu was never intuitive for me, and a button to get to chat should have been added). I also seriously hope you fixed the terrible search before making it so prominent. Commented Feb 14, 2017 at 20:59
  • 61
    If it's not BROKEN don't FIX IT.... I'm glad some people have the time to "hypothesize[d] that a lack of engagement with the nav was due to a combination of browsing habits, ...", the problem is these designers with excess time on their hands usually get it wrong... Switching the inbox, points, etc. to the far-right of the bar is a visual train-wreck. While in the grand scheme of things, it doesn't really matter, this "let's dork with something that is working well for reasons we just dreamed up and that make sense to me" has been the downfall for some pretty good user interfaces. Commented Feb 15, 2017 at 1:43
  • 8
    The new top nav is not much satisfying. White white looks weird. Commented Feb 15, 2017 at 4:58

41 Answers 41

1
2
3

Search Input

enter image description here

I think the search input should be fix it is really hard to move to the left every time you want to search something, so fix it can be better and easy.

Consider you already tip something [java] and hit enter now, try to change java to something else! now you should to move the cursor to the left so you can edit it, did you find this practice? for me i think it is a pert of time to move every time to the left for that i suggest to make it fix for example like the previous version https://meta.stackexchange.com/ , plus i don't find any necessity to make it resized every time, i'm wrong?

Thank you.

4
  • "It should be fixed." is unclear if you don't clearly describe what's wrong.
    – Cerbrus
    Commented Feb 17, 2017 at 9:29
  • @Cerbrus Consider you already tip something [java] and hit enter now, try to change java to something else! now you should to move the cursor to the left so you can edit it, did you find this practice? for me i think it is a pert of time to move every time to the left for that i suggest to make it fix for example like the previous version meta.stackexchange.com , plus i don't find any necessity to make it resized every time, i'm wrong? Commented Feb 17, 2017 at 9:36
  • Yea, I don't see the problem. Just use your keyboard to clear the field ([Ctrl+A])
    – Cerbrus
    Commented Feb 17, 2017 at 9:38
  • @Cerbrus not every one know that, what if i want to change just a letter, whatever i hope this can be changed Commented Feb 17, 2017 at 9:40
3

This is also very confusing if you browse multiple sites since the other sites have the original top navbar. Each child site should have similar layout and navigation so the flow is the same on any site. Even sites that are along the same computer programming genre line (code review, software engineering)have the original navbar and for me it is confusing switching to a child site and having a completely unique navbar when the old one was fine.

If you are going to make the change on one site, it should happen across all the sites.

2
  • You may expect generalization in 6 to 8 weeks.
    – Tensibai
    Commented Feb 27, 2017 at 14:09
  • And this is confirmed here
    – Tensibai
    Commented Feb 28, 2017 at 9:49
2

Hamburger site selector not needed

If the site selector was done as a dropdown from the site icon in the way it currently is on the Stack Overflow dropdown, the hamburger menu could be done away with. That would yield enough space for, say, a Help menu.

enter image description here enter image description here

2
  • The difficulty here is that the top bar is split into two sides, to match the dual-column layout of the site. Your user-data and everything right of it is in the same column as the related questions and other side material. While the search bar and everything left of it is in the main text column. If you remove something from the right column, it won't free up space in the left column. Commented Feb 17, 2017 at 19:51
  • 1
    I see. But the idea is not totally burgered: the search box could be a little bit narrower, seeing as it expands to cover the links to the left of it when it is clicked. The dropdown triangle does not need to be as grossly sized as I crudely drew it. The help menu ("?"), which I read that many people would like to be able to see regardless of reputation points, would take the place of the burger. Commented Feb 17, 2017 at 23:55
2

Sorry to say this, but I loathe the new nav bar.

Would you mind making it switchable so I can choose the old one?

Key points of discontent:

  1. It's too big.

  2. It's not black so it doesn't stand out.

  3. Search should be on the right. Communication icons should be in the middle (where I naturally look).

  4. The old one was perfect, familiar and complemented natural human behaviour.

Looks like change for change's sake, without user consultation - never a good idea.

3
  • Whilst I agree with you on the whole I think all these points have been raised separately. I do prefer the old one but I've now got used to the new one. I'm lucky enough though to have a big enough monitor where it doesn't impact much.
    – Bugs
    Commented Mar 2, 2017 at 11:15
  • 1
    @Bugs I think we should keep raising it until it gets changed back. It's made the site unpleasant to use. Commented Mar 2, 2017 at 11:29
  • In total, the nav now takes up less vertical space than before. That gripe I don't understand at all.
    – Pekka
    Commented Mar 26, 2017 at 15:00
0

A "To Top" button would be nice as an addition in the header (IMHO).

Sidenote: My answer may be off-topic, so let me know if I should delete this and post it in meta as a feature request instead.

I.e.:

enter image description here

or as an arrow:

enter image description here

Or just like on http://php.net does, having an arrow show up on the bottom right soon as we start scrolling.

There is room for it, unless they're reserving that space for something else.

19
  • 1
    Bonus points if it is an up arrow icon rather than the words 'To Top' :-D
    – TylerH
    Commented Feb 14, 2017 at 16:23
  • @TylerH That's a good point. I'll make another screencap with arrows. Thanks. Commented Feb 14, 2017 at 16:24
  • What happened to captain jack sparrow?
    – user4639281
    Commented Feb 14, 2017 at 16:26
  • 4
    I assume this would only show up if the topbar is sticky? (Would be pretty pointless for the non-sticky one)
    – Floern
    Commented Feb 14, 2017 at 16:26
  • 1
    @TylerH added an arrow - not the best but it shows the idea. Commented Feb 14, 2017 at 16:27
  • @Floern either when the page is starting to scroll or always make it visible. It was a general idea. Or at the bottom right when it starts to scroll just like on php.net Commented Feb 14, 2017 at 16:28
  • It would be nice to hear from the downvoters as to why they think this isn't a good idea, or if I should have posted this on meta as a feature request. Commented Feb 14, 2017 at 16:31
  • @TinyGiant He took a break for a while since he couldn't find good tasting Swedish meatballs in his corner of the world. Commented Feb 14, 2017 at 16:33
  • 1
    I read "Or at the bottom right when it starts to scroll just like on php.net" as "Or at the bottom right when it starts to scroll just take them to php.net"
    – user4639281
    Commented Feb 14, 2017 at 16:34
  • @TinyGiant I wrote: "Or just like on php.net does, having an arrow show up on the bottom right soon as we start scrolling." - Meaning that when we start scrolling down the pages (here) that an (to top) arrow shows up, unless I didn't explain that properly. Commented Feb 14, 2017 at 16:36
  • 1
    No, you were perfectly eloquent. My brain just interpreted your comment to floern in a way that made me laugh.
    – user4639281
    Commented Feb 14, 2017 at 16:37
  • 3
    Press the Home button.
    – Ry- Mod
    Commented Feb 14, 2017 at 17:31
  • @Ryan I can't see mine anymore; it's been wiped off by hitting it so many times :p and I don't have a paintbrush that small to paint one on. Ah, some old skills of mine should be used if I can find one haha! Commented Feb 14, 2017 at 17:32
  • Actually @Ryan You should have gone through the comments under the question first before doing what you did. I posted one in there which I'm keeping as well as this answer. However, I will delete my answer if it starts getting too many downvotes. But I'm pretty sure the (other) mods/techs might have seen my answer and may take it into consideration. If you are part of the decision makers, then you let me know so I can stop making a fool of myself. Commented Feb 14, 2017 at 17:40
  • 1
    @TylerH especially not in Times New Roman.
    – user692942
    Commented Feb 15, 2017 at 0:10
0

Remarks on order and contents:

enter image description here

  • Search bar is too small and is wrong place. Search should always be at top right. It should be as wide as possible, so remaining goal is to reduce wasted space.

  • Space at top right is wasted. Logo should be all the way against the left margin.

  • I care what my rep is but not how many badges I have. Eliminate the badges display.

  • I care what notifications and new awarded rep I have, and that is of a totally different degree of importance from the review queue. Move my rep, notifications, and awards all the way to the left, immediately after the site logo.

So, my proposed order is:

  • Logo

  • My icon and rep (no badges)

  • My notifications and new awards

  • Questions, Jobs, Doc, Tags, Users [Okay, I'd like to eliminate the Documentation but I figure you won't go for that]

  • Review queue, hamburger

  • Search. No white space anywhere, so Search can now be much wider to fill what is left.

So, more like this (the Search is a little too big here, but this is just a sketch):

enter image description here

1
  • 2
    you... realize that on larger monitors that'd put the logo waaaay off to the left of the page content, right?
    – Kevin B
    Commented Feb 15, 2017 at 16:31
-1

edit: Found comment Top Navigation Update via duplicate request https://meta.stackoverflow.com/a/343818/324105 after reading Kevin B's comment.


Can the option to disable fixed (sticky) positioning please be global across the network, rather than per-site ?

I switched it off here in meta, and then found it was back on again when I visited the non-meta site, and I had to find the settings option all over again!

I don't think it makes any sense at all for that behaviour to vary on a per-site basis. Either users like it or they don't, and it's very annoying to switch it off, and then find it's "back on again" when you visit a different site on the network.

Switching it off once doesn't bother me at all. Having to switch it off over and over across a period of weeks or months is going to make me genuinely irritated.

1
  • 2
    it will be eventually.
    – Kevin B
    Commented Feb 15, 2017 at 22:11
-2

I agree that in general we should improve and innovate.

However, the dark Top Nav was a very distinctive element, and personally I would not have changed the color, at the most a lighter or darker gray. This is too light!

Am I okay for the rest, the new layout of the icons and other features fine, I like it.

However, I continue to be a firm supporter of the dark Top Nav.

The white nav gives me a feeling of emptiness and loss.

1
  • 4
    The white nav gives me a sense of openness and prosperity.
    – user4639281
    Commented Feb 15, 2017 at 20:52
-2

Please make the notification numbers go past the top of the icons when hovered. CSS:

.so-header .secondary-nav .-item._active .indicator-badge, .so-header .secondary-nav .-item .-link.topbar-icon-on .indicator-badge, .so-header .secondary-nav .-item .-link:hover .indicator-badge {
  top: 3px;
}
-2

Ask Question is not visible when scrolled down, shouldn't it be also available like the top bar all the time. Also Top Bar Icons are very confusing, Review queues icon is not good and same goes for message one. For message we could rather have the below specified change

enter image description here

-21

This is how it looks at me.

enter image description here

First I've thought there is some bug or unwaited interaction between my development or security extensions and your page. But not. You crapped something again.

I can't understand! I really can't understand!

You really don't have anything to fix, except trashing good, acknowledged, beautiful parts of your site?

Would you like to get a list of some year long bugs and missing (trivial) features from the meta SE? Why the ... you won't work on these, why are you working to crap what once worked?

No... you won't even read this post. So happens with every company growing too large. :-(

P.s. Any idea, what is that orange line on the top top to do? Hm???

P.s.2. Your previous remembered "unneeded thing fixed, needed thing crapped" change was as you "extended" the user pages on a way that you made the users description invisible. You really don't have any better to do? Really? For example:

  • Why the heck the post suggestions don't work on the meta sites?
  • When will all your sites work with https pretty well (correct keys, no http content reference if https was requested)?
  • When will be the docs SE finally ready, not a pre-stable beta?
  • When will we see the real size of the review queues on the main review page?
28
  • 6
    The orange line is a border, it doesn't "do" anything beyond providing visual separation between the content of the page and the UI of the browser bars. Other than that, there doesn't appear to be much constructive about this post, unfortunately.
    – TylerH
    Commented Feb 14, 2017 at 16:36
  • 4
    I agree -- they fixed something that wasn't broken and the fix is arguably worse
    – Hack-R
    Commented Feb 14, 2017 at 16:36
  • @TylerH My first idea was that there is some positioning bug and the top taskbar elements somehow jumped out of their border...
    – peterh
    Commented Feb 14, 2017 at 16:38
  • 1
    @peterh: Look, they've explained the reason for the floating top-bar many times these past few weeks. There are many threads on Meta where they've discussed this. Commented Feb 14, 2017 at 16:39
  • 1
    @NicolBolas It seems I have to implement an external css to make the SO usable again... I hope they don't plan to extend it to the other sites... :-(
    – peterh
    Commented Feb 14, 2017 at 16:41
  • 8
    @peterh: Or you could just use the option they provided to make it not float. And to say that the site is not usable even with a floating top bar is hyperbolic. Commented Feb 14, 2017 at 16:42
  • @NicolBolas It is LESS ergonomic, it is LESS beautiful (honestly... disgusting), it tries to fix some working, while the whole META SE is full with never-to-implement, longwanted feature requests!
    – peterh
    Commented Feb 14, 2017 at 16:45
  • 9
    @peterh: Well, I think it's just as ergonomic and beautiful as the old site. Unless you can back your opinion up with reasoning and facts, you can't expect reasonably expect others to take them seriously. Explain what about the site is "less ergonomic". Explain what is "less beautiful". And so forth. A reasonable explanation of why you feel this way is going to be far more useful than just declaring "this is bad and you're stupid for doing it!" Commented Feb 14, 2017 at 16:48
  • @NicolBolas It is... UGLY! Oh my god I never ever seen something killed on this way! They've made the search box auto growing on focus! So their around 1000px wide site is now essentially a vertical track in my 1920px wide browser, and this search box is autogrowing on the top of this track! I think, the idea of "fluid design" didn't arrive into the StackExchange in the last 15 years! Maybe in 2035!
    – peterh
    Commented Feb 14, 2017 at 17:00
  • 12
    tl;dr Change Bad! Hulk Smash!
    – Bart
    Commented Feb 14, 2017 at 17:01
  • 2
    @peterh: "So their around 1000px wide site is now essentially a vertical track in my 1920px wide browser, and this search box is autogrowing on the top of this track!" OK, that's a useful comment: the top bar, coupled with a 2x wide view of the site, causes problems. I'm not entirely sure how, since the right side of the search bar is always in the same place. But that's at least a comment which is actionable. Commented Feb 14, 2017 at 17:06
  • 1
    @peterh sorry but there's nothing else I can discuss about this; take it up on meta for discussion please. Commented Feb 14, 2017 at 17:52
  • 1
    @KonradRudolph: The blog post explains it. Commented Feb 14, 2017 at 18:06
  • 1
    @peterh: Yes, that's the point. By making it so that it is always there, it's also always available. And therefore, users who didn't know those things even existed will be able to find them and make use of them. Commented Feb 14, 2017 at 18:38
  • 6
    Peterh, you are entitled to an opinion, but you can't objectively say the new design is ugly, because ugly is an opinion. The main thing that SE cares about is the average user's behavior, as determined by their stats on user engagement. Since the new design is increasing user engagement, the new design is better from their perspective. It's unfortunate that you don't like the new design, but it has nothing to do with SE becoming a large company.
    – Kelderic
    Commented Feb 14, 2017 at 19:15
1
2

You must log in to answer this question.

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