51

UPDATE: TeamDAG has reviewed all of the feedback below and updated with status. We are actively working on fixes as time allows. Thanks to everyone who contributed constructive feedback.

We released the new top bar for all users across all communities. The only exceptions are Area 51 and chat. They will be coming a little later.

I wanted to take this opportunity to respond to some of the key pieces of feedback we received after the initial post about the top bar coming to the network. I'll try to summarize these feedback points below, say whether we are/aren't addressing each, and give you a short explanation why or why not.

Consistency between SO and SE network sites

Concern: Navigation links (questions, tags, users, etc.) are not folded into the top bar on SE network sites. The color of the top bar is different.

Status:

Explanation:
Navigation - In order to integrate navigation (as it is on SO) we would need to revisit each of the site themes and we don't have the resources for that now. We may revisit this in the future. But this would likely require reducing the level of theming that we support. The team believes that the current compromise results in a coherent design that users can understand, even if it isn't completely consistent.

Color - The top bar needs to be black on network sites, since that works best with the many themes. The SO top bar color was a branding decision and won't be changed to black.

Review queue icon sucks

Concern: The review queue icon doesn't look anything like what I'd expect. It isn't recognizable. (note: this is actually a holdover from SO feedback).

Status:

Explanation: We are happy to change this icon to one that works better for everyone. We ran a survey for people to pick their top two favorite icons. Over 600 people participated. We are doing some additional design review on the top two candidates and will announce the results soon.

Review queue false positives

Concern: The review queue shouldn't "light up" or have the red dot when there are no items to review.

Status:

Explanation: We've squashed some bugs with the new design, but probably have a few more to deal with. We will continue on our bug stomping journey.

Add labels to icons

Concern: Still, the icons aren't as recognizable as they should be. But if you add labels below them they would be. Please add labels.

Status:

Explanation: There is no room for legible labels in the current design. The font would have to be so small that it is arguable if it would help many people. (The example posted to meta cheated a bit by changing "achievements" to the much shorter "awards".)

Stickiness global preference

Concern: SO top bar is sticky by default with a preference to unstick it. Network site top bar is not sticky by default and there is no way to make it so. Can we get a global preference for setting stickiness across all sites?

Status:

Explanation: We think this is a good thing to have, now we just need to figure out how to make it so. This could be a somewhat expensive setting since we currently don't have any global settings. That said, we are actively investigating it.

Moderator tools are difficult to see/access

Concern: Inserting the mod tools to the far right (after the site switcher) creates confusion and make them difficult to see/interact with. Move them.

Status:

Explanation: We have moved these items to the left of the profile. This has the benefit of keeping the site switcher in the same location at all times. The new location for these tools has higher visibility. Also, we are going to continue investigating additional improvements for moderators.

Search transition is confusing

Concern: When a user clicks into the search box it animates to expand. Stop it! It's annoying.

Status:

Explanation: This was needed on Stack Overflow where the search box can get very small due to space constraints. It isn't necessary on other sites and has been turned off.

Clickable Stack Exchange logo

Concern: The Stack Exchange logo is useless. Clicking on it should trigger the site switcher (see below) or it should lead to stackexchange.com.

Status:

Explanation: This has been fixed. Clicking on the Stack Exchange logo will display a brief popup about the Stack Exchange network, and a link to stackexchange.com.

Site switcher

Concern: Moving the site switcher from the left to the right is confusing. Move it back.

Status:

Explanation: We know that this will take some getting use to, but based on previous experience with changes like this we are confident that everyone can make this adjustment.

Inaccessible color choices

Concern: Some designs choices are inaccessible for people with low vision or color blindness (specifically the green achievements icon for people with deuteranopia).

Status:

Explanation: We are undergoing a general evaluation of our accessibility and will fix issues as a part of that process.

Where do we go from here

There are a number of other fixes that we made to address more minor issues or bugs in the top bar. So this list isn't exhaustive, but covers the biggest issues. Obviously there are some items that are still under work. We will continue working on them and listening for additional feedback on the new top bar.

  • 8
    somewhat related: If stickiness becomes a global setting (or an optionally global?) can we also move some other settings into global scope like keyboard shortcuts? – Vogel612's Shadow Oct 9 '17 at 22:25
  • 8
    What about putting the site logo and shortened site name in the topbar? – J F Oct 10 '17 at 0:01
  • 19
    It works well. Why bother changing it? Please put an option of reverting to the older version so that old dogs like me are happy. – NotAgain Oct 10 '17 at 0:19
  • 6
    By the looks of it, you've either missed or rejected my suggestion to shrink the search bar a little. Can this please be fixed? It's a glaring issue, especially due to the tiny SE logo right next to it. – angussidney Oct 10 '17 at 5:54
  • 11
    Thanks for posting the survey about the icon. There doesn't seem to be a way to specify "I only think one of these is a good choice, and want to abstain on a second vote", so I haven't completed it. – Josh Caswell Oct 10 '17 at 12:32
  • 69
    "SO top bar color was a branding decision" so the marketing department is now in charge of UX. Fine, I give up, I'll resort to userscripts to work around whatever they come up with. But reading stuff like that makes me cynical. – Stijn Oct 10 '17 at 13:54
  • 15
    As a mod please please do not make the review icon a flag button. – David Oct 10 '17 at 14:35
  • 25
    I hate this so much. I've clicked the left top icon a dozen times today. – Organic Marble Oct 10 '17 at 16:41
  • 6
    Could you comment on un-bolding the rep number? It's trivial to implement and mane people appear to agree it would be much less distracting. – Kevin Oct 10 '17 at 19:00
  • 42
    Also, please don't bury the review icon survey in a random place in a Meta post somewhere and only have it up "for a day or two". Make an announcement for the whole network, and tell them exactly how long it will remain open for. – TylerH Oct 10 '17 at 19:10
  • 10
    Personally, I don't see how losing the count of items awaiting review is helpful. To be perfectly clear it's a detriment. – Elder Geek Oct 11 '17 at 17:38
  • 13
    Noooooooooooooo!!!!!!! I don't like the new top bar!!!!!!!!!!!! – John Militer Oct 12 '17 at 5:08
  • 11
    About the position of site switcher, you say: "We know that this will take some getting use to, but based on previous experience with changes like this we are confident that everyone can make this adjustment": No, this adjustment is annoying also because in the Android app the site switcher is on the left, and one should continuously switch between the two positions. – Massimo Ortolano Oct 12 '17 at 6:07
  • 7
    @Bálint: That would be confusing; a magnifying glass is widely recognized as a symbol for search. As other comments on this page say, icons are really inferior to text labels in general, and I wonder if the minor save in space from using icons rather than text labels is really necessary now that the Stack Overflow top bar doesn't need to squeeze in a link to documentation. – sumelic Oct 12 '17 at 16:43
  • 9
    "There is no room for legible labels in the current design." One could just change the current design to make room for legible labels. – Trilarion Oct 19 '17 at 7:28

40 Answers 40

7

I have things to say about these:

⚑ Flag is obviously already used for flagged messages. It wouldn't make sense to use it for non-flagged items. My first thought if I saw that would be "Somehow I gained moderator privileges?"

✓ Check mark is obviously already used for accepted answer on the site. These are the top two symbols I have problems with you trying to use them for review queue. These just don't make any sense.

☰ Hamburger icon with a smaller bottom bun? It's for settings, everybody knows that thanks to modern GUI practices. Only in the second icon it resembles a bullet list. Hamburger with a check mark for "confirm settings"? List of questions with an accepted answer? Don't think so.

Dashboard icon in the left column conveys a meaning of a task productivity tool, like Trello. Dashboard with a check mark… something about accepted answers?

Comment icon means… "comment". Do you gotta leave comments in the review queue? Sure, sometimes, but not always. There's gotta be a better icon though.

Bottom right is a comment about a stapler.


Look how obvious the inbox icon is − there's no confusion. "Incoming messages" is exactly what it means. And the question mark icon for help. Such a great choice. And the cup with a star for awards!

Surely you can find better options for a review queue, something that says "review" with its symbol and doesn't cross over with already used symbols on the site.

The presented options are not quite as good at representing what they mean as the other icons. Please think of better options to choose from.


Why not just the word "review"?

  • 8
    "It's for settings, everybody knows that thanks to modern GUI practices" is not true. I thought it was for menus in general. For settings I would expect to see either a cog or a spanner. – Peter Taylor Oct 11 '17 at 17:55
  • That's why I said thanks to modern GUI practices, it's being used for both menus and settings interchangeably these days. In any case, neither conveys the meaning of "review" or "queue". – user1306322 Oct 11 '17 at 18:12
  • 10
    "Bottom right is a comment about a stapler." Haha! While I had not seen 'stapler' in that icon, now that's going to be the only thing I can see. Which of course is quite terrible for the review icon. – Ajean Oct 11 '17 at 20:30
  • 1
    "My first thought if I saw that would be 'Somehow I gained moderator privileges?'" Yes, exactly! You have! These sites are moderated by the community, and anyone with privileges to review posts does have moderator privileges. Most of what you're reviewing in the review queue are flagged posts. Some of them are flagged by the system, some of them are flagged by humans, but they're still being flagged and need your attention. Great icon, instantly recognizable. – Cody Gray Oct 12 '17 at 10:07
  • 4
    @CodyGray what I meant is "moderator privileges for reviewing flagged posts" which as the majority of users know, means something is very wrong with the post to the point where users are not capable of dealing with it. Flag = users can't fix this, call the police. Not the icon you want for to use something that concerns normal users. You've got 50k of rep man, you should know that's not right. – user1306322 Oct 12 '17 at 15:41
  • 3
    I very much disagree with that. There is only one type of flag that is reviewed exclusively by moderators, and that's the "requires moderator attention" flag (also commonly known as the "other" flag). The standard flag types are all reviewed by the community, using the review queues, so a flag seems like a completely appropriate mnemonic device for that. – Cody Gray Oct 13 '17 at 8:37
  • 1
    @CodyGray how did you learn that information? When I hover over the "flag" text, the tooltip says "flag this post for serious problems or moderator attention". To me "serious problems" means it's not something trivial that users can resolve without the help of higher ups. Otherwise there are close votes and editing, which is for most users. Perhaps the difference between how I and you view flags is a result of miscommunication on the site's part. – user1306322 Oct 13 '17 at 9:53
  • 2
    Serious problems doesn't mean they cannot be resolved by regular users. Trusted users have moderation privileges. That is a fundamental aspect of Stack Exchange's design. For example, "not an answer" and "very low quality" flags put a post into the "Low Quality Posts" review queue, where users with review privileges review them, deciding whether they look OK, need editing, or should be deleted. How did I learn this? I've been around here for, like, ever. 7+ years now. Maybe the UI could be clearer, but I don't think it's miscommunicating. It does say " or moderator attention". – Cody Gray Oct 13 '17 at 10:01
  • 3
    @CodyGray it's weird to me that you can achieve the same effects via both close votes and flags, after you've earned enough rep. One has the connotation you describe, but the other less so. Again, this feels like a problem in the site's communication language to me. – user1306322 Oct 13 '17 at 16:57
  • At low rep levels, all you can do is flag for closure. At higher rep levels, all you can do is vote to close. Flags to close are automatically converted into votes to close. The idea is not to break your original routine just because you passed a magic threshold. If you were flagging successfully before, we want you to keep up the good work at dispatching garbage. Yes, both close flags (from low-rep users) and close votes (from higher-rep users) put a post into the Close review queue. I see them all as flags, certainly in a metaphorical sense. – Cody Gray Oct 13 '17 at 17:04
  • Well, that's what I find wrong with this approach − if you pass a threshold, why should the name of the thing change then? Just keep calling it flags, no? Why suddenly rename it to "close vote" and divide between two differently connotated categories of review actions? I find it confusing. Flag icon to me only bears the extremely serious connotation, and I find using it for both trivial and not so serious issues wrong. – user1306322 Oct 13 '17 at 18:17
  • @user1306322: The name of the thing changes because the effect of a flag is not identical to the effect of a vote. One only calls for attention; the other also takes a definite step toward resolution. Mashing them together as the same concept would just be confusing. – Nathan Tuggy Oct 25 '17 at 19:37
  • @NathanTuggy ye that's kinda my point. – user1306322 Oct 26 '17 at 2:25
6

I wanted to add to the frustration about the site switcher being moved and the StackExchange icon becoming a simple link to a completely different site from the current stack.

Given that the search bar right next to that icon has the current stack name in it, the icon and top bar become part of the current site interface, so having that icon jump to another site is not intuitive.

Additionally moving the site switcher away to the other side adds to the confusion - especially given the iconography doesn't exactly scream "click here to go to another stack" as opposed to "hay maybe this goes to the chat" (not that I'd want it to).


The changes does of course lead to an unexpected but effective use case...

Site Switcher Animation

(Animated GIF - click to view - I figured it's less annoying to show a static image in the post)

6

What's with the super bright search input on black (all sites except SO)?

vs

What gives? whose bright idea was this?


Update: ok I was talking from the point of view of a user who knows where the search is and how to use it, which is apparently not very common, so I understand this design decision and can't really vote against that.


More important update:

As we've discussed in the comments, it seems like contrast helps with visibility and increases search usage, which is good for reducing duplicates and helping people find answers sooner.

But I'd like to ask the design team: why did you choose to not make the search bar as extremely noticeable on StackOverflow as on all the other SE sites? StackOverflow has most questions asked per day, and by far the most review activity than on any other SE site. How do you explain this decision?

  • 3
    Contrast. It's something that they learned after redesigning the top bar for SO. The original iteration of SO's top bar was stark white. There was no way to find the search box unless you had eagle-eyed vision and could discern the tiny grey border. The final version of the SO top bar is a light gray, but I could still stand to see more contrast there. The white-on-black is excellent design: it makes the search box stand out, which is exactly what we want to drive users towards. – Cody Gray Oct 13 '17 at 8:40
  • @CodyGray pfft... maybe if that search box kicked off a google site search. – canon Oct 13 '17 at 19:31
  • @CodyGray Ok, I get that. Then why, against this reasoning, is it so invisible on StackOverflow, where it would help the most? – user1306322 Oct 13 '17 at 22:27
  • 2
    @CodyGray It's strange, I do not have eagle eyesight, but I perfectly distinguish the white input field on a gray background. – Alex78191 Oct 14 '17 at 17:29
  • @Alex78191 Not that strange. It is obviously distinguishable now. As I said, the final version made the top bar background a light gray. The original version was white, as was the search field, so the only separation was a thin, light-gray border. That wasn't especially distinguishable, especially on imperfectly-calibrated monitors. The current design is much better than the original, but I still think it could use more contrast. As for "why, against this reasoning, is it so invisible on StackOverflow, where it would help the most?", I have no idea. You'd have to ask the design team. – Cody Gray Oct 15 '17 at 6:32
  • @CodyGray You should create two comments to answer two different people. – Alex78191 Oct 15 '17 at 8:45
  • @Alex78191 Why? The other person is the one who posted this answer, so they get notified anyway. Fewer comments are better. – Cody Gray Oct 15 '17 at 9:26
  • @CodyGray I thought that the other – Alex78191 Oct 15 '17 at 9:35
  • @Alex78191 don't worry I got the notification and I would like to forward my question to the design team but idk how. I'll update my answer to include that so it's more visible. Hope they're reading them. – user1306322 Oct 17 '17 at 2:48
  • Oops. Jumped the gun on this one. It should be completed by tomorrow 12/22. – Joe Friend Dec 21 '17 at 21:39
  • @JoeFriend I preferred the old look; there should be an option to change it back. – Sonic the Bracketed Hedgehog Dec 23 '17 at 0:37
  • I rather like it. Can't please everyone I guess? – Journeyman Geek Dec 23 '17 at 6:40
  • @JoeFriend so you make major design changes that affect millions of people based on +8/-3 request? I think that is a mistake. – Shadow The Curly Braced Wizard Dec 23 '17 at 23:10
  • @ShadowWizard we don't know that it was only because of voting here; I mean, much more popular things get declined all the time. The new top bar has been live for a couple months now, so they might have other data. (Besides, it's not like the previous state had any voting behind it; we had unobtrusive search, then in-your-face search, and now we have super-unobtrusive search.) – Monica Cellio Dec 24 '17 at 1:45
  • @MonicaCellio true. Still irritating though. – Shadow The Curly Braced Wizard Dec 24 '17 at 7:12
5

Well, I noticed this today:

That looks familiar.

Not sure what this means...I think Google made this change after the SO top bar redesign. Did they, um, "borrow" the icon from you?*


*Yes, I see the different corner radius and spacing between the top and bottom halves of the stapler. They're clearly the same design.

  • 2
    It seems that SE kind of "borrowed" the icon from Google. It's existed in the Material Design Icons set since May 12th 2015. It's called "rate review" in the set. But then they are licensed with the Apache 2.0 license, so SE can use them if they took 'em from over there. Maybe they changed the Google Docs logo to attract SE users? Heck, I should become a detective... – Zizouz212 Oct 25 '17 at 3:32
  • Good research, @Zizouz212. I wondered if it was an openly-available icon, but failed to track it down. – Josh Caswell Oct 25 '17 at 11:58
  • 1
    In retrospect, this probably should have been a question rather than a response to the announcement. – Josh Caswell Oct 25 '17 at 12:32
4

Site-specific feature requests

I can see you're already getting inundated here with feedback and requests for changes on the new top bar, and that's just for network-wide things. Some sites which have especially customised styles (Science Fiction & Fantasy and Photography) must be giving you particular headaches since there are assorted site-specific bugs and feature-requests relating to the top bar. To make things simpler than having to follow all the per-site metas, I'm going to try to collect these site-specific issues here.

Science Fiction & Fantasy

  1. Can we make our new top bar slightly transparent black, like our old one?
  2. Can we get our blag link back, please?
  3. Can we make our Top Bar sticky? (not sure how site-specific this one really is)

Ask Ubuntu

  1. Bug with new top bar
  2. Review queue false negatives on the new top bar
  3. New navbar bug review queues not operating as expected

Other sites?

I've looked on a dozen or so meta sites, but didn't see any others with topbar-related bugs or feature requests. If anyone knows of some, please edit them into this answer.

  • 2
    If they're anything like some of the guys on Workplace, they haven't been able to find the link to Meta yet (or are just protesting the change by purposely not finding it...) – Snow Oct 11 '17 at 14:04
  • We have fixed a few site-specific bugs and are happy to look at new ones as their identified. The sticky top bar request and the review queues issues aren't site-specific and are status-review. The color and blog link request are status-declined since we are trying to avoid too many site-specific overrides. – Joe Friend Oct 20 '17 at 17:54
  • @JoeFriend Thanks for the response! Could you or someone else on your team possibly add the status-declined tag and a quick explanation to the colour and blog questions? (As a mod on that site, I could add the tag, but for reasoning I'd just have to link to your comment here.) – Rand al'Thor Oct 20 '17 at 18:02
  • @JoeFriend - thanks for the response. Would a feature request to change the color of the bar network wide be better, instead of just for SFF? – Mithrandir Oct 30 '17 at 16:33
4

I'm ambivalent about what the site logo should do, and where you put the site switcher. I'll get used to it either way. But the new design is deliberately inconsistent:

  1. In the new design, the upper-left stackexchange logo does different things on different sites - on SE it opens the site switcher and on other sites it jumps to SE.

  2. The site switcher is in different places on different sites, left on SE and right on everything else.

Whatever you decide on for the new design, it would be least-surprising if the same elements did the same thing on all sites

  • 1
    this is an artifact of SE.com, chat and Area 51 not yet being updated with the new top bar. They will be soon. – Joe Friend Oct 19 '17 at 0:02
  • I thought that might be the case, but it was a bit confusing – Tyler Oct 19 '17 at 0:38
1

On my MBP, I usually Command-click a link as the equivalent of middle-clicking (opening in a new tab), since Ctrl-clicking is like right-clicking (open context menu). However, with the new review and site-switcher icons, Command-click behaves like a normal click (opens the corresponding drop-downs). On an Ubuntu VM running on the same MBP, Ctrl-clicking opens the dropdowns.

What happened to break Command-click open-in-new-tab for these two? This aggravates the slowness of these dropdowns.

1

The gap between "Log In" and "Sign Up" at the Stack Exchange homepage is too narrow.

BUG : MISSING SPACE BETWEEN "LOG IN" LINK AND "SIGN UP" BUTTON ON TOP BAR AT { STACKEXCHANGE.COM } WHEN NOT LOGGED IN!
BUGGED LAYOUT : Visit stackexchange.com in your browser's private mode to reproduce this.

BUG : Missing space between "Log In" link and "Sign Up" button on top bar at stackexchange.com when not logged in!

On the contrary, the top bar at Stack Overflow has proper spacing between the "Log In" link and the "Sign Up" button when not logged in!

ON THE CONTRARY, THE TOP BAR AT { STACKOVERFLOW.COM } HAS THE PROPER SPACING BETWEEN THE "LOG IN" LINK AND THE "SIGN UP" BUTTON WHEN NOT LOGGED IN!
CORRECT LAYOUT : Visit Stack Overflow in your browser's private mode to reproduce this.

-3

I like new top menu styles. enter image description here

but I have the new change to better height & colors in stylish:

.top-bar .searchbar input[type="text"].f-input {
    background-color: #363c42;
    color: #e5e6e7;
}

.top-bar._search-open .searchbar input[type="text"].f-input {
    background-color: #363c42;
}

.top-bar .searchbar input[type="text"].f-input:hover {
    box-shadow: none;
}

.top-bar .searchbar input[type="text"].f-input:focus {
    box-shadow: none;
}

.top-bar {
    height: 52px;
}

.top-bar~.container {
    margin-top: 52px;
}
-3

I find that the tool tip for the hamburger symbol is wrong. Please see screen shot below:

enter image description here

  • What would be a better wording for that tooltip then? – rene Oct 29 '17 at 16:06
  • 1
    @rene - The hamburger ICON does not give a full list of all Stack Exchange sites. Instead it gives a list of sites that I am a member of and which ones I have visited. So some wording that reflects the actual functionality would be more appropriate than what is shown above. – Michael Karas Oct 29 '17 at 16:15
  • 4
    What is wrong with that? If you scroll down the menu you'll see list of all the sites. (under "MORE STACK EXCHANGE COMMUNITIES") – Shadow The Curly Braced Wizard Oct 29 '17 at 16:19
  • 1
    @rene - A better text may simply be "Other Stack Exchange Sites". – Michael Karas Nov 28 '17 at 17:43

You must log in to answer this question.

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