The new top bar is out on meta. Consider it a beta

Question

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 black¹. 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.}

Answer 1

Please add back the profile-hover-quick-view thingy:

I actively use it to monitor the day/week/month rep, rep breakdown, and UTC time. The quick link to privileges is nice too, when I need to check/link to them.

Note: there is a "workaround" by manually navigating to http://[site]/users/profile-link-stats e.g. https://meta.stackoverflow.com/users/profile-link-stats but it's not formatted very nicely.

Answer 2

Can the sorting of the sites be by title first, then description?

When I start typing "Physics", I would expect Physics and Physical Fitness to top the list, not Astronomy. Most of us would search by site name, not description:

Sure, it takes a few extra seconds to type, but it could be improved :)

Update: This also completely excludes Ham.SE from the search if you type "Ham" and not "Amateur Radio".

Perhaps it should filter by site name and URL only? Or at least give sitename/URL matches priority?

Answer 3

I wish my face were a little bigger. (On my avatar, not in real life.)

It makes me happy to see it staring at me up there, but it looks squished, and like there's probably room to expand a few pixels in each direction?

Could it be embiggened?

Answer 4

Can you PLEASE put the "main" link back on top?

I always switch between "main" and "meta" using it, now I'm at a great loss.

OK, found it:

But still, I have to perform a full mouse click to reach it! :(

---

Edit by Undo: For the time being, I've created a nice little userscript to add the main link back in. It's available on GitHub here.

Answer 5

… but they look the same.

The top bar consists of three different kinds of "actions":

• drop-downs (staying on the same page)
• links (leading to a different page)
• input form (leading to a different page)

The StackExchange drop-down has this little triangular icon, which makes it obvious that it’s not a link but a drop-down. But such an indicator is missing for the two other drop-downs (inbox, recent reputation).

Possible solutions:

• add a triangular icon for the inbox and the recent reputation actions, too
• change the style (or at least the hover style) for the two links (user avatar, help), making it look more like links instead of drop-downs
• make the links drop-downs, too (e.g., quick user menu links for the avatar; help page links for the help)

Answer 6

The link to the list of sites, which I use very occasionally, is about 140 pixels wide and in a nice accessible location near the left margin (though for some reason not flush left).

The link to the inbox, which I use very often, is about 35 pixels wide and awkwardly located in a middling location.

The inbox also suffers from being an unrecognizable graphic (how about making this a mailbox? or an envelope?) when there are no unread messages, though I suppose users will quickly get used to its location.

This is backward. It's a major drop in usability from the former inbox access which had the inbox as a nice wide button and the first thing on the left (though for some reason not flush left either) whenever messages were pending.

Please make the inbox button wider. It really needs to be wider than the site list since it's more useful, at least when there are unread messages.

I'm unsure about the achievements button (which also has an unrecognizable graphic — is that a bar chart? What does this have to do with achievements?) since I don't know yet what use that list is.

On a similar note, the inbox has a worse contrast than the achievement list. I see the reputation thingy tick away with three characters (soon 4) in bright green that seems poised to assault me, while the inbox is usually a lonesome digit and is in a darkish shade of red that seems to try to stay lurking in its dark alley.

Answer 7

I miss the mouseover from the portrait that shows recent reputation activity. I know there is a dropdown that shows all of the reputation activity for the whole exchange, but it requires a click to open, and is a small area to target with my mouse.

Please bring back the mouseover popup that showed recent reputation when I hover over my portrait.

If at all possible, it would also be nice to see my user name again. I feel a little too anonymous.

So in that spirit, I would like to see my user name show up (user names in general) in this fashion

And hopefully with this user's support (he had the longest name I know of)

Please restore our names, everyone will be waffle endebted

---

edit

After using a script to show my user name next to the gravatar I can understand how both can seem to be clutter. Which would you rather have, a username or a gravatar? I am unsure, but I seem to prefer the username. Here is what that version looks like:

Answer 8

Add the 10k suggested-edits-pending indicator back in!

I just noticed that 10kers don't get the nice little pending suggested edit indicator anymore... can we have it back?

Some mockups, in order of what I think looks best first:

Answer 9

I like the new style, but I'm wondering whether the Hot Questions tab is gone for good.

I happened to like losing hours of my time wondering through interesting questions over the SE network!

Answer 10

It seemed odd to me that in the (awesome) new site switcher dropdown, you have to aim quite precisely to hit the correct link.

• On the left, the icon & name link to the actual site (http://pets.stackexchange.com).
• On the right, the reputation links to my profile.

As you can see, the pets element had it's hover state enabled while I took the above screenshot and the area marked by the freehand red circle is just dead space.

Could we please make the entire element clickable?

I don't mind having the reputation link to my profile (that's quite useful), but the rest of the element should be clickable as hinted to by the background's hover effect.

Answer 11

The Site Switcher was fixed to show our sites correctly - and that's great! Apparently it shows our top 5 sites by rep, plus the 'Main' for the site we're currently on.

However, it could be improved: The sites at the top of the Site Switcher should be the sites we use most often.

The sites I have high rep on are not necessarily the ones I'm using frequently. For instance, Board & Card Games is at position #8 on my sites sorted by rep. On UX, I have only 103 rep. They're being crowded out of the Site Switcher by Programmers, Arqade and Code Review - I might have a lot of rep in those sites, but I haven't used those in over a year or two, so there's no value in having a quick link to them.

Rather than listing the top 5 sites we have by rep, it should do one of the following:

• List our top X sites, sorted by how frequently we've visited them. (For me, this would show: Meta, RPG, B&CG and UX. Wonderful!)
• Let us pin and unpin sites from the longer list that we actually want quick links to. (I would pin the above)

Answer 12

Can you PLEASE put the chat link back on top?

I always go to it to get to chat easily.

Now it is an extra click to get to chat which seems like too much.

Related

Answer 13

Could we have a colour scheme that doesn't burn my eyes?

Pretty much anything that isn't black (or just off black)

(Edit to add by Benjol, my answer with this got deleted as a duplicate)

I could get used to the blackness here on meta, but I don't like the StackExchange in colour: and I can't help thinking it's going to clash on other sites.

And applying it across all sites? What about Programmers, where the top bar is part of the design? Surely you're not going to sacrifice that on the altar of uniformity? And on Photography - where it's already black, but nice and sleek and thin, not chunky and imposing like the new one.

Answer 14

There used to be direct link to https://stackexchange.com/ when opening the Stack Exchange™ MultiCollider SuperDropdown™:

Now I can't find direct link anywhere.

Can this please be added somewhere?

One option using the current design as-is is make the "Explore our sites" link to https://stackexchange.com/sites:

Answer 15

Is there any chance of making the Inbox/ Achievements models wider? It all looks quite cramped for me @ 375px, with so much more width available on the page. Many items flow onto multiple lines.

Below, for example, shows it @ 500 px.

Answer 16

As I wrote before, I find the number of votes I've cast today to be useful information, and I want to access it quickly as this is quickly-changing data. It was available before when hovering on the user name. Please restore it.

The number of favorites change would be good to have too. Where are favorite changes gone? I neither want them nor see them in the inbox, where they'd be clutter. I neither see them nor see them in the achievement list, where they'd be drowned in the mass.

On the other hand, the list of badges changes very slowly. It doesn't belong in the top bar, really. Removing that would be a nice way to make room for more useful information.

Answer 17

Feature-Request to the "Recent reputation & achievements" button in the topbar beta.

The reputation changes are awesome e.g. +25, +4, etc. with the corresponding question/answer post. But, for the badges there seems to be no such thing. The following pic will make this clear.

Notice the highlighted "You've earned the Civic Duty badge." line, we could show the badge colour of this achievement before it.

I would like to propose the showing of the corresponding badge colour in the left column (where the reputation changes +25, +4, etc go) for the respective badge earned.

Answer 18

Could we have reputation sums next to more items in the achievement list?

Currently, only today's reputation is summed. At the very least, yesterday's sum would be interesting to know:

Answer 19

I find the font used for the text, especially the numbers, is too difficult to see. Can it be thicker/bolder/have more contrast?

Answer 20

I want to know about votes on my answers/questions after reaching the rep-cap.

The achievements dropdown is simply fantastic. I really like the idea that you can see you rep changes network-wide. There has always been something that irritated me even with the old top bar; you cannot know about votes on your answers after hitting the rep-cap. You see, it's very nice, you hover over the old one and it used to tell you what answers got upvoted. But after hitting the rep-cap, you're left in the dark.

Probably something along the lines of:

Answer 21

I have a weird display error with the network drop down in Firefox. The width of both the header and the actual content box is bigger than the wrapper around which restricts the size and also makes the drop shadow. The header is actually even wider making it look very weird:

On the left you can see the box how it is currently displayed for me. The gray header is actually wider than the rest of the box. If you look at the drop shodow at the bottom, you can also see that the scroll bars are actually partially outside of the box. The screenshots are both cropped at the same position, so you can see the difference in width.

Removing the width: 100%; from both .topbar-dialog .header and .topbar-dialog .modal-content fixes this.

---

It looks like they missed the -moz- prefix for box-sizing: border-box;, that's why it looks good in Chrome, but not in Firefox.

.topbar-dialog .header {
    background-color: #f0f0f0;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box; /* Important bit */
    padding: 10px 10px 4px 10px;
    position: relative;
}

.topbar-dialog .modal-content {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box; /* Important bit */
    padding: 10px 7px;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 300px;
}

Answer 22

The box in Firefox on OS X is broken. Somehow it doesn't like that padding there.

(Newest Firefox, OS X 10.9 (Mavericks).)

Answer 23

The achievements dropdown is really confused a lot of the time when leaving a Meta page open.

The achievement box doesn't reload the drop-down after further achievements are gained. If you leave a page open, gained reputation, and opened the drop-down once, the next time you gain reputation the green rep counter shows your gained points, but clicking on the dropdown then shows old, now stale information.

Here I gained an accept:

but the dropdown shows old, stale info; I am at +260 by now really:

After closing the dropdown, the green label disappears, but after opening a new page, the count is back and opening the dropdown gives:

adding in the most recent two events (one of which I had not yet seen).

Note that the achievements counter didn't clear properly either. I opened a new page (or I could have reloaded the current page), and the same green reputation gained count showed up again, creating more confusion.

Can the achievement handling be updated to continue to work properly when one page (a questions list) remains open for a prolonged period of time? After gaining more reputation, the dropdown contents should be reloaded and the server updated that I have seen the reputation gain properly.

The same problem largely applies to the inbox as well. The unread messages number doesn't stick like the green reputation delta does, but the dropdown is not reloaded on new messages. This is rather irritating, having to open a new page just to read the message and have a click target. This was reported in a separate Meta post as well.

I've also seen it report the total reputation gained for the day so far, intermittently, showing a +230 after I had already opened the dropdown. I'm putting that down to a temporary glitch for now.

Answer 24

I'm just wondering how this will fit into Ask Ubuntu, they already have a top bar that needs to match up with a specific aesthetic.

Adding the all-new almost all-black top bar would seem wrong somehow. At the top it would interfere with the Ubuntu top bar and it would be equally bad (if not worse) where the old bar is right now considering it's black.

Answer 25

I really like this - although it will take some getting used to. Two feature request though, one related to one I asked some time ago:

• Can the order of sites in the drop down please be user configurable, perhaps with options for sort by rep, most recent visit, alphabetical or possibly drag to sort?
• And can we set how many sites we want before it goes to the general view. Most days I look at my top 12 sites, but also another couple that are of extra interest but that I still have low rep on. I'd like to have them all easily and quickly available through the drop down.

Answer 26

When registering on a new site and you receive the 100 reputation bonus, the 100 will be added in the reputation box, but no information on where or why you got the reputation is added to the list.

Answer 27

I keep clicking this text thinking it's going to bring me to the all sites page.

IMO, it's intuitive that it should. And I'd like it if it did, because I've grown accustomed to accessing certain sites by navigating first to the all sites page (if only because that page is pretty :-).

In any case though, can we at least add the CSS property cursor: default on it so the cursor doesn't change whilst hovering past that text? 95% of the time we toggle that dropdown, we're gonna have to cross that text to click on any of the links. No one will ever need to highlight that text.

Answer 28

When hovering over a site in the "Explore our sites" list, why not display the site links "chat", "blog", "meta"?

It wouldn’t "hurt" in any way. Everyone hovering over these site links either wants to visit the SE’s main site or wants to visit a sub-site (meta, chat, blog) of it, by clicking at the main site first, and then opening the StackExchange menu again and clicking at the sub-site link. So it would save 3 clicks and a site load.

A different solution would be to display a little icon (e.g., a triangle) right from the site name, which, when clicked at, opens a little menu with the sub-site links (similar to Google’s Cache link).

Answer 29

Can we have a little clicky drag thing (my brain isn't working tonight, I can't remember what they're called) to drag and change the height of the inbox? It's a minor thing, but I don't like that it goes so far down the page. This is my personal preference, so rather than changing it for everyone, it would be nice if we could drag to adjust the height ourselves (not the width, obviously, but the height.) And if it would remember what we'd done previously, that would be great :) Obviously this isn't a hugely important request.... My eyes can travel a bit further down the page if they must :) But it seems odd to me for a header element to go so far down the page, so it'd be a nice-to-have for me to be able to adjust the height to my own preference.

Answer 30

The 'activity' link seems to be gone. I use it quite often to keep track of posts I've voted, commented or answered on. Now I need to go to my profile first and then click on the tab.

Perhaps a menu in the style of 'Inbox' and 'Achievements' could be added?