197
votes

EDIT Dec 4 - We're doing it live! Please post bugs or concerns as questions tagged [top-bar]

We have rolled out our 95% completed top bar for feedback.

Note:

  • We are still adding a few final features, so if you have a request for a feature that is not there you might hold off on that for a day or two
  • Yes, the bar is black1. Also give that a day or two to sink in.

I also want to specifically address the meta/main/chat links.

I'm very aware that many of you like having the links at the top of the page and that this new version is different.

The thought process behind moving these links is that the "site switcher" should be an automatic place to go when you are on a site and want to go to another one. If you haven't already developed the muscle memory for these links, getting between them required a bit of a cognitive load: You must first decide that you want to switch sites and then you have to decide which area to go to to switch.

Also, we find that less familiar users aren't entirely clear what a standalone link that says "main" or "meta" actually does... Not to mention that it hurts my UX sensibilities that we are dynamically changing links in an element that should be fixed.

It is true that we have added a click in the process, but we have also removed a lot of clicks for other common actions that are much more frequent than switching between main and meta.

All I ask is that you give it a few days and see if the new "switch sites at the top left" paradigm grows on you.

What do you think?

1. Jin points out that technically it's not quite black.

locked by Jeremy T Dec 4 '13 at 19:11

This question exists because it has historical significance, but it is not considered a good, on-topic question for this site, so please do not use it as evidence that you can ask similar questions here. This question and its answers are frozen and cannot be changed. More info: help center.

Read more about locked posts here.

  • 60
    Little bit of a shock initially :-). – ben is uǝq backwards Nov 14 '13 at 22:32
  • 25
    Where's the hot questions? – Mysticial Nov 14 '13 at 22:33
  • 13
    Inbox is missing a tooltip; I assume that's coming? – Monica Cellio Nov 14 '13 at 22:35
  • 15
    I.. I... I am in love with it. thank you – Adel Nov 14 '13 at 22:37
  • 17
    nvm, found it. Boy is that dark... it's like a shadow of a shadow. – Robert Harvey Nov 14 '13 at 22:40
  • 12
    That is an envelope? I thought it was a headset at first :P – Travis J Nov 14 '13 at 22:40
  • 11
    @TravisJ you're both wrong, it's actually a literal inbox in perspective. – David Fullerton Nov 14 '13 at 22:41
  • 24
    On a whole, this is awesome! Thanks, Jeremy/Jin/Laura! – Manishearth Nov 14 '13 at 22:48
  • 8
    It's pretty sleek but it would be nice if you could filter on achievement types, badges get drowned in rep – Mathias R. Jessen Nov 14 '13 at 22:55
  • 10
    Fix to the list of sites is good, but only 4 of them? I would like at least ten before it switches to the alphabetical order remainders. Or probably "everything over 200" like the rep graph does. – Kate Gregory Nov 14 '13 at 23:10
  • 33
    I'd prefer my username make a comeback and replace the teeny tiny gravatar. You can't really see the image very well anyway. – WendiKidd Nov 14 '13 at 23:19
  • 27
    Wait, will this be (off-)black on every site? Even established sites whose color schemes were carefully decided upon long ago and for which a black bar is quite jarring? – user206562 Nov 15 '13 at 0:06
  • 9
    I liked the older, cleaner one. – Abhimanyu Pallavi Sudhir Nov 15 '13 at 5:34
  • 14
    Can we make it a little less-black to match the overall theme of MSO? – SudoRahul Nov 15 '13 at 6:36
  • 14
    Is top bar color configurable ?? if not then please change its color to lighter side not this dark .. it is very hard to see the icons in the back color – Dhaval Nov 15 '13 at 8:56

64 Answers 64

-3
votes

Please add the name of the current site to the bar. I would suggest that it be added at the front of the bar, but it could also make sense after the StackExchange dropdown.

enter image description here

This is because moving to a meta site or a chat site is such a jarring experience.

I'm embarrassed to admit how long it took me to realize that the "meta" link changed to "main" in the current incarnation of the bar as a way to get back to the main site. For months I was hitting the back button 10 times or going to my bookmarks to get back to the main site. The same is true for chat for me. The logo for the main site is placed and sized differently enough that it took me a long time to figure out that it was clickable.

The Stack Exchange drop down is a vast improvement over the current implementation in this. At least you have to click in the same place to back out of meta as you did to get into it. But it doesn't seem to go quite far enough.

Having a consistent clickable logo icon for the site (main, meta, and chat) would make navigating within that site much smoother.

  • Three down votes and no comments? – Stephen Ostermiller Nov 20 '13 at 19:52
  • I think people are taking this as being a bit more "electiony" that a normal Q&A, but I was against this because (a) it looks kindof horrible and (b) it repeats information that is perhaps a centimetre below it – Richard Tingle Nov 20 '13 at 20:07
  • On the main site it would repeat the information, but not on meta and chat, which is where I would find that information most useful. As for looks, its just a mockup, I'm not a designer. – Stephen Ostermiller Nov 20 '13 at 20:15
  • Ah, I thought your meta vs main in your mockup was a mistake, I consider them to be seperate sites. So the functionality you want back is the main link back. I'm on the fence with putting "main/meta" back in but having 3 different site names (Meta Stack Overflow, Stack Overflow and Stack exchange) next to each other like that isn't a plesent solution – Richard Tingle Nov 20 '13 at 20:21
  • I almost want the "main" link back. Certainly from meta that is part of the intention. I really want meta and chat to be considered part of the main site and an easy and consistent way to get "home" to the main site from whatever part if it you are in. I have hated the "main" link in the current bar. It took me forever to realize it was even there. – Stephen Ostermiller Nov 20 '13 at 20:27
  • I think thats the thing though, the designers don't consider main/meta/chat/careers to be the same site. They consider them seperate sibling sites – Richard Tingle Nov 20 '13 at 20:29
-4
votes

Is there any reason for the empty space between the badges and review, and between help and the search bar?

??

I don't think the space is needed, specially since the rest is closely packed.

Notifications, inbox, and Stack Exchange button have a gap of just approximately four pixels between them.

  • 6
    They're seperate groupings on two levels (ThingsOnLeft || ThingsOnRight(Achievements||Links||Search)) – Richard Tingle Nov 16 '13 at 13:04
  • 1
    I find it a bit much - I don't actually think it's that bad an idea to reduce it slightly. – Qantas 94 Heavy Nov 17 '13 at 14:00
-8
votes

Add a shadow to avoid going from white to black in 0 pixels difference:

Enter image description here

  • 2
    Does it need a shadow? Is there anything wrong with it going from (almost but technically not) black to white immediately? (our text does that, our buttons do that on either side, the Questions / etc links at the top go from dark grey to white immediately, etc) – doppelgreener Nov 15 '13 at 0:04
  • 1
    it needs it more than it doesn't, just the bar, I am not a fan of dropping shadows everywhere. I wouldn't even add shadows to the current buttons (but someone did, and you don't hear me complaining about it) – ajax333221 Nov 15 '13 at 1:07
  • 1
    But why? For what reason should there be a shadow? – doppelgreener Nov 15 '13 at 1:24
  • hard to tell, but not harder than to tell why there shouldn't be one – ajax333221 Nov 15 '13 at 1:52
  • 1
    There shouldn't be one because it's unnecessary and unnecessary visual elements add clutter and noise to a layout. The same reason the top bar doesn't have much else in the way of stylistic elements. Necessary, useful visual elements are good, but they're only useful if there's a point to them existing. – doppelgreener Nov 15 '13 at 3:15
  • 18
    sorry, what can be asserted without reasoning can be dismissed without reasoning. – Jin Nov 15 '13 at 4:04
-10
votes

Since this is a new roll-out top bar... I would love if this bar survives scroll. Something like Google+ does.

Enter image description here

The main advantage here is I can access my new top bar even when I look at the last question.

  • 17
    No no no no no no! – Richard Tingle Nov 15 '13 at 16:29
  • 3
    It's hard to put into words but these always make me feel detached from the website, like I'm not in full control (also; they always seem to go wrong and have a second of flicker on old system, although im sure the competent people at stack exchange could avoid that) – Richard Tingle Nov 15 '13 at 16:32
  • 1
    @RichardTingle I like sticky toolbars. If the official one settles to being static, I will probably add a userstyle – John Dvorak Nov 15 '13 at 17:44
  • 4
    This is an old request: Should the top navigation be frozen? (see also the linked questions). And the answer's NO. – Josh Caswell Nov 15 '13 at 20:26
  • 2
    you can write your own user script in few lines to achieve that – ajax333221 Nov 17 '13 at 5:12
  • If you were to make a userscript for this, it could even have a "dock/"undock" toggle so that it would either stick or not. – Travis J Nov 18 '13 at 19:31
  • For example (top right dot is the toggle): $('.topbar').css({zIndex:10,position:"relative",top:0,left:0}); var ol = $("<div>"); ol.css({position:"fixed",zIndex:5,top:"10px",width:"7px",height:"7px",borderRadius:"5px",right:"2px",cursor:"pointer",paddingRight:"2.5px",backgroundColor:"black"}); $("body").append(ol); var pos = false; ol.click(function(){ pos = !pos; var t = $(this); if( pos ){ $('.topbar').css("position","fixed"); t.css({zIndex:15,backgroundColor:"#fff"}); }else{ $('.topbar').css("position","relative"); t.css({zIndex:5,backgroundColor:"#000"}); } }); – Travis J Nov 18 '13 at 20:33

You must log in to answer this question.

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