We have released left navigation bar, our new theming and a our initial responsive design work on Stack Overflow and Meta Stack Exchange (it's been live on MSO for a week). This work has been in progress and being discussed with the community for several months. The motivation for the work is covered in my post entitled Ch-ch-ch-changes: Left nav, responsive design, & themes, so check that out if you have any questions about why this work is important.

Left nav and theming

Check out the new left navigation and new theme (most relevant to MSE). This work creates greater experience consistency across the Q&A sites and will increase in the velocity of bug fixes, improvements and new features to all sites thanks to a fully unified code base.

Based on early feedback from our initial announcement we've added a preference to unpin the left nav so it doesn't take up space. Just head on down to your local preferences and check the box.


Navigation preferences


This is the biggest changes we made based on early feedback from the community. Check out the full list here: Left nav, responsive design, and theming next steps

Responsive design

Many of the most used pages on the site are now responsive to your window size. This benefits people who have lower resolution devices or like to have multiple windows in view. This functionality has been live for a few weeks for Stack Overflow for Teams users.

This is a work in progress and this step is a part of our effort to validate our significant changes to page layout code. Not all pages are responsive yet, asking a question and many moderator or review activities will not work in a smaller viewport and you'll need to expand the window. We are making improvements to this experience week by week, so it will just keep getting better.

We haven't fully optimized this for mobile devices, but click the "full site" option in the footer and you will get the responsive design on your phone. If for some reason you need access to the non-responsive version, we have a temporary feature for turning that on. Just click "Disable Responsive" option in the footer. This is a temporary feature that will go away once all the pages/features have been made responsive. The mobile optimized view will also remain in place until we finish making all the changes.

You can read more about the ins and outs in Responsive design is enabled for Teams users.

When is this coming to other sites?

After we gather feedback via this sneak peek on MSO/MSE we will be releasing this on other sites. Currently the plan is as follows:

  • Mid-June:
  • July: release to network sites with "stock" theme and 5-10 other sites
  • August - September: release to the remaining sites. As we have more details we will update individual communities in their local meta.

Feedback

If you encounter a bug or a usability problem feel free to post it on MSE. We are eager to make updates so that this rollout goes smoothly for all communities.

  • 342
    The new layout feels like facebook. I don't wanna be on facebook :/ – rafid059 Jun 12 at 17:42
  • 185
    Is there a reason the preference to hide it doesn't apply network-wide – Kevin B Jun 12 at 17:48
  • 285
    I don't like new layout. – Pankaj Kapare Jun 12 at 19:42
  • 83
    This menu makes me almost physically uncomfortable. Like walking around in wet shoes. Thanks for providing the setting to disable it. – toniedzwiedz Jun 12 at 20:45
  • 92
    For the next April 1st make sidebar take 50% of the screen and disable ability to hide it, please. – Alex L Jun 12 at 21:05
  • 224
    One comment on the new UI: The old one wasn't broken. – Mars Jun 12 at 21:36
  • 92
    I despise this new design. Questions and answers now get only about half the available browser window real-estate with the way I use my browser. – Omnifarious Jun 12 at 23:39
  • 102
    Thank God you can hide the left-nav. At least you remembered the most important rule in software development "A new feature is a BUG if it cannot be TURNED OFF". – David C. Rankin Jun 12 at 23:43
  • 80
    NO, the previous navbar (top one) was better. It had right amount of breathing space, usability and didn't take much of space too. This left navbar simply takes up quite unnecessary space (blank space when we scroll down) in the page. Also, with just 5 items in the menu, top navbar is a better choice than side navbar. And if a side navbar is unavoidable then give a toggle button (hamburger button type) to close the navbar when not needed. – HardikT Jun 13 at 5:57
  • 32
    Add me to the sad pile - while I hid the new left pane, Im actually just left now with a lot of empty space.. making it seem odd – BugFinder Jun 13 at 7:51
  • 27
    The left navigation bar makes it all uncomfortable for people like me who are used to eye track from the left and compulsively detest repetitive and static element on page (like sticky nav or desktop ribbon). My programmatic eye-balls spends most time tracking left-to-center and only selectively track center-to-right content when needed to. It gets annoying going back and forth between my left-oriented IDE and new center-oriented SO page. I can only hide the left nav. Great if I can also collapse it. – KMC Jun 13 at 8:18
  • 73
    Ugh just have an X button to hide it? Why make us go to our settings to hide it? Bad usability. – Mike Speed Jun 13 at 12:11
  • 61
    I personally feel it's ugly feature, even other devs in my company they were saying old stackoverflow was better (they are not registered), left nav occupies lot of space unnecessarily. Please remove this feature and revert to good old layout. So dowvoted (wish I was able to downvote multiple times to express dissatisfaction) :( – Pradeep Simha Jun 13 at 12:42
  • 31
    I'm glad it's possible to turn the left-nav off, that's great. However with it's turned off old links aren't available in the top page with Questions, Tags, Users, Badges, Unanswered. Where to find them then? – Mr Zak Jun 13 at 20:34
  • 22
    Is there a chance theoretically that we could get the previous design back? It was so much better. – Callum Watkins Jun 15 at 18:08

81 Answers 81

  1. Why is the search field so small?

    Meta SO:

    small search bar

    SO (aka old situation) for comparison:

    normal search bar

  2. Also I find it annoying that the menu isn't always in the screen anymore (while there is plenty of space).

Left nav is now sticky

Now you either have to scroll up or open the hamburger menu first:

It used to always be available on the top like this:

  1. Collapsing the menu doesn't really give you more space. I would expect the main part of the screen would use the space of the menu when it is collapsed.

  • 1
    Also on MSO (from me): meta.stackoverflow.com/questions/369072/… – MEE Jun 5 at 17:25
  • 123
    How on earth has this been released with issue number 2?! – Ashley Medway Jun 6 at 7:05
  • 3
    Just a thought, could we put a link back to main where the (Questions Developer Jobs etc.) links are for meta?. I find it annoyingly difficult having to dig in one of the many drop down menus to get back to main. – GiantCowFilms Jun 6 at 17:21
  • #2 appears to've been addressed. When I narrow the window a hamburger menu appears with the questions/etc options in it. – Dan Neely Jun 6 at 18:01
  • 3
    @AshleyMedway Well, I'd argue it hasn't been released, for any sensible definition of "released"... it's a beta precisely for catching these issues. – xDaizu Jun 8 at 9:33
  • 34
    @xDaizu Now it has been released, and it still doesn't scroll with the page!!! – Artemis Fowl Jun 12 at 17:37
  • indeed it look very bad with the empty left bar while hiding, I expect when hide the left bar, at least the content will occupy the empty space – Se0ng11 Jun 13 at 1:09
  • 3
    "Collapsing the menu doesn't really give you more space. I would expect the main part of the screen would use the space of the menu when it is collapsed" HELL NO. If you want that, ask for it as its own option! I do not want to have to choose between having a navbar or having a ridiculously wide page. – Clonkex Jun 13 at 3:43
  • 3
    It become really weird to have navigation at left side of screen and not following screen when it was being scroll down.. Fell that the content here become more smaller than ever. Prefer the old version theme which make the content bigger and always have the menu up there whenever i scroll it – Kasnady Jun 13 at 10:20
  • So much blank space to the left that I thought it might be full of ads I'm blocking. – villasv Jun 14 at 0:22
  • For now, both of these issues are fixed on the com branch of VisualCrumbs – GrumpyCrouton Jun 14 at 16:09
  • 1
    Another time, please put things like this into 3 different answers, unless the issues are very closely coupled, which these are not. Grouping them into one answer makes it confusing what people are voting for. With one issue per answer it makes it much more clear how people feel about each bug/feature request. – Makyen Jun 15 at 15:26
  • 1
    @JoeFriend Can you please explain why bug 3 is status-declined? – Masked Man Jun 17 at 2:19
  • @AndreKool, I generally search for tags, so search bar isn't a big problem with me. Further, I don't use the menu bar much often, not a problem, again. Finally, I have to ask, is there any way to reset the previous view? – Rahul Jun 17 at 16:23
  • @Thanos Bug 3 is not a bug, nor is the description accurate. At the max supported window size the left nav is added to the existing layout, thus when you take it away we don't expand the content. This is exactly how the site worked previously, we don't continue to expand the content area beyond a certain point to keep line lengths within a legible range. – Joe Friend Jun 18 at 15:05

(see Meta Stack Overflow)

My first impression of the left nav was pretty negative. All I saw there were links I didn't care about, and any time I went to a question list, the first thing I saw on every load was the navbar, and as I was reading through the questions, my focus kept switching to the new navbar on the left. I'm sure a lot of that was because it was new, but it kept happening, and it was frustrating. Disabling it made me feel better about it.

Now, however, after discussing it for a bit, testing it, messing around with it, I do think the only real problem I had with it was I felt like it was distracting me, pulling my attention away from what I was looking for. I found that one small change made all the difference for me, and that was giving the body of the page a background color. It didn't matter what color it was, as long as it put the primary content of the page into a separate box from the navbar on the left, it no longer distracted me. Here I just pulled the background from the header and added missing borders.

enter image description here

I can of course make this change myself later via a userscript if it doesn't go live, but that's my suggestion.

  • 46
    This would be nice... particularly if they integrate a way to minimize the left sidebar in the page directly rather than in a settings menu (which was, I think, the intention at some point)... I agree that the white background draws more attention when offset with the pale grey – Catija Jun 6 at 0:40
  • 3
    You don't use the questions menu? I do because it shows meta questions which have collected a few to a lot of downvotes. – Gimby Jun 6 at 9:11
  • 1
    yeah i prefer the home page on SO, so that’s where i go on meta – Kevin B Jun 6 at 12:53
  • 8
    Ooh, I kind of like that. Even a slight tone change makes it a lot more instant to parse the "sections" of the page. – Jaydles Jun 13 at 21:27
  • 1
    I also notice this “pull” you're describing. Comes to mind: In comic layout design, elements we want to draw attention to are supposed to stand out from the rest of the panel content. (Aaron Diaz describes this here, e.g. see this comic. Warning, other posts on that blog may be NSFW.) Our left menu sticks out distinctly the same way, esp. the active navigation item which has a highlight to it and is just a single rectangle poking out of the side of the content like a flag. – doppelgreener Jun 14 at 9:59
  • 4
    If anyone else wants to try this, here's the custom style I'm using (via Stylus): body { background-color: #fafafb } #content { border-right: 1px solid #d6d9dc } – Josh Jun 14 at 14:49
  • Wow, thanks, you made me realize that's exactly what was bothering me too. Changed the background color to #eee and now it's much easier on the eyes. – Grant Winney Jun 15 at 13:19
  • @Josh That makes a world of difference. – doppelgreener Jun 16 at 0:11
  • This should also be implemented on the right sidebar. There's sooo much content fighting for attention otherwise. – Andy Clifton Jun 18 at 8:17
  • Why isn't there a Refined StackOverflow like there is Refined GitHub, Twitter and Wikipedia? – tanmay Jun 18 at 11:23
  • Now if only we could lose the "Create Team+" and "Public" header on SO. Looks great everywhere else – Kevin B Jul 25 at 15:12

That menu has a lot of whitespace; I mean a lot.

left-nav

And yet even with my rather large browser window it pushes the content to the right slightly. I'm guessing it's so darn big to accommodate large team names; but this still feel really excessive.

I expected it to hug the actual side of the screen.

GIF of the content jumping when nav is introduced (fullscreen, 1920x1080, Edge):

enter image description here

  • 3
    What browser are you using? I can't replicate that. – Joe Friend Jun 5 at 19:15
  • 1
    @BradleyDotNET Still no repro. If I open the site in Edge I see the same amount of white space on both sides of the screen on a full width window. Can you see if you can repro in another browser? If you can't is it possible that something strange is conflicting (extensions or something)? – Joe Friend Jun 5 at 19:24
  • 8
    @JoeFriend There may well be the same amount of whitespace on both sides; the content definitely moves though when the left nav is turned on/off (even fullscreened) I have to move my mouse to toggle the checkbox again. I have no extensions installed (not even Adblock). My expectation is that the left nav would just "eat up" some of the existing whitespace rather than shove everything to the right. – BradleyDotNET Jun 5 at 19:29
  • 1
    @BradleyDotNET Somehow I'm not understanding your issue. Want to capture a gif of the interaction you're seeing? Sorry for being clueless. – Joe Friend Jun 5 at 20:45
  • 1
    @BradleyDotNET Thanks for the GIF. What exactly is the impact of the problem you're seeing. Obviously you're not going to be switching back and forth. So do you want to use pinned or unpinned left nav? And with the pref set for that how are you negatively impacted? Again, sorry for being slow. – Joe Friend Jun 5 at 20:57
  • 1
    @JoeFriend Mostly its just weird that everything I'm used to scanning at a particular spot on the page (votes, etc) is now shifted over. I'm sure I could get used to it over time, but :(. At the moment I'm leaving the left nav turned off due to this. Love the idea in general, just wish it was implemented a little differently. – BradleyDotNET Jun 5 at 20:58
  • 4
    If the page content is centered in the window, then reducing the width of the content wider will increase the margin on both sides. In other words, when you remove the sidebar, the left margin gets only half of its width - causing the apparent edge of the content to move left. The alternatives here would be always expanding to fill all available space (terrible for reading on wide windows) or always reserving an extra margin on the left when the sidebar isn't displayed (which would somewhat negate the purpose of having a hide option and make the page look stupid). – Shog9 Jun 5 at 21:08
  • 3
    @JoeFriend The left nav moves the main content of the site to the right, it's no longer centered. It takes away the balance of the site, without symmetrical balance things looks cluttered and feels uncomfortable. – Spencer Wieczorek Jun 5 at 23:34
  • 1
    It's definitely still centered, @Spencer; measure it if you don't believe me. – Shog9 Jun 6 at 0:02
  • 6
    Wait, that's the argument? That the left sidebar is narrower than the right? Yeah... that's probably not gonna change @Catija; already some folks are complaining that it takes up too much room (myself included). – Shog9 Jun 6 at 0:21
  • 2
    So, @SpencerWieczorek would you say that this is what you're talking about being "off center"? – Catija Jun 6 at 0:51
  • 8
    Screen Real-Estate is at a premium on laptops. Why fix what isn't broken and waste the whole left side of the browser window in the process. Even hidden the left-nav is a distraction and a whole additional vertical section of SO that is just ripe for future exploitation and distraction from the main purpose of SO. The top-nav is correct interface design, provides the needed functionality in a minimum amount of space, and doesn't provide empty-space to be taken up in the future by more cruft that distracts from the primary purpose of SO for the end user. – David C. Rankin Jun 9 at 8:09
  • 5
    I can replicate this on other browsers as well on 1920x1080. – Mast Jun 12 at 7:12
  • 3
    Can replicate on Chrome 67.0.3396.79 on MacOS 10.13.4 (1280x800 scaled) – NSNoob Jun 12 at 9:28
  • 3
    The content is much too small. What is the purpose of having a wide screen then? – Trilarion Jun 13 at 9:25

In my opinion, I think the highlight on the tabs should be on the left side. It flows better, because, like most other tab highlights in the UI, they flow top => down or left => right (at least for LTR languages)

Additionally, the highlight bar butting up against a single pixel gray vertical line is jarring and distracting depending on the content in the center panel.

When on the left, it still highlights the tab, doesn't look like a scrollbar (as per the comments), and doesn't clash with the vertical line content separator. The only difference is it pushes the text in the tab in by the width of the border, so the words don't exactly line up.

Current:

Highlight on right side

Tweaked:

Highlight on left side

  • 53
    I actually thought the orange highlight was a scrollbar at first – Kodos Johnson Jun 5 at 22:12
  • 4
    I actually like this idea. It does look like a scroll bar if it is on the right (as it currently is). If it were on the left I guess it would be a scroll bar if you were reading arabic pages? – JonH Jun 7 at 14:11
  • 1
    I like this suggestion a lot, went ahead and added it to my VisualCrumbs userscript. Thank you! – GrumpyCrouton Jun 14 at 17:14
  • I gave this my upvote already, but I feel like this point is well illustrated by the screenshots and well worth consideration by the devs! – PowerLuser 11 hours ago

Sacrificing more of my screen real estate for showing things I do not need is not an improvement.

Even with the left bar switched off (thanks for this option, as such) I now see 40% of my right margin occupied by things which were previously hidden away in the margin.

Here is the Stack Overflow start page as of today:

Stack Overflow start page

I mean ... seriously!?

Promoting navigation aids and advertising over actual content is not "responsive" at all in my book.

The left bar adds insult to injury by doing the same on the left-hand side. I can understand how menus make some things slightly less discoverable (and frankly, the menu design on this site is really not transparent, consistent, or logical) but putting trainer wheels on everyone's bikes just because there are some beginners who cannot yet ride without them is a terrible design.

I like Kevin B's proposal to move the left bar into the top bar; having the main content assaulted from both margins is a losing proposition, whereas having stuff tucked away at the top (and ideally scrollable out of sight ... though that too is now a tick box you have to discover in your preferences!) so you can get your designated window filled with the actual content you want to look at would work pretty well. If you have to make the top bar higher or more complex to accommodate proper menus, so be it.

  • 36
    There are now three hamburger menus: One on the left (if you click away the left bar), one with a checkmark on it (review queues) and one with a stem (the rightmost community icon). This really doesn't pass the laugh/cry test. – tripleee Jun 6 at 6:55
  • 5
    The review queues icon is not a hamburger... – Catija Jun 6 at 15:34
  • 14
    Oh, sorry, I was imprecise. There are three menus whose icons look vaguely like (Minecraft) hamburgers, but obviously only one of them is the hamburger. – tripleee Jun 6 at 15:48
  • @tripleee There are actually 5-6 menus in the top bar depending on if you have left nav pinned or not. Left nav, inbox, achievements, review queues, help, and site switcher. They generally look and work in the same way. – Joe Friend Jun 6 at 16:32
  • 9
    @JoeFriend The point I'm trying to make is that three of them are indistinguishable by quick glance. If you tell somebody "find the hamburger menu" and they look on the rigth, there are two of them there which look like good candidates, but aren't. I'm not a fan of tiny monochrome icons as menu items in the first place; there really isn't any way to guess what they contain. Maybe that's what's actually pushing you away from using proper menus in the first place? I know it's not web3.0 sexy but "review queue" and "site selector" would work a lot better than hamburgers with different handicaps. – tripleee Jun 6 at 17:10
  • 1
    Er... what browser, resolution, and zoom level is that screenshot taken with? Are you sure you don't have any scripts running and have not manually scrolled down and over to the right? – TylerH Jun 6 at 17:27
  • @tripleee Also, hovering over each of these icons (which I find easily distinguishable from one another and only one of them could possibly be confused with a hamburger menu - the Stack Exchange menu icon on the far right) will produce a tooltip with the long form description of what each icon links to. – TylerH Jun 6 at 17:29
  • @TylerH This is Chrome on Mac OS High Sierra MacBook Pro, 15" (I think) Retina display. No zoom and no horizontal scrolling, though obviously I have scrolled down to illustrate how the "hot posts" column is filled with white when you do that. – tripleee Jun 7 at 4:20
  • 1
    Having a tooltip when you hover is hardly sufficient to make it obvious what the icons represent. What I'm trying to say is that if usability testing revealed that new users cannot find stuff which is now in the left bar, perhaps fixing the menus so you could guess what they do would have been a less intrusive change. – tripleee Jun 7 at 4:24
  • Visiting in private mode looks slightly less annoying (only about 15% white with the same screen width); I guess this is worse for Teams members. – tripleee Jun 8 at 6:27
  • 7
    @Tyler: I've been using SO for years, and ever since the top bar re-design a year or so ago I still have no idea what most of the buttons do. The problem is that there are too many low-contrast icons that look fairly similar. Furthermore, it's not obvious that they're drop-down menus (I still expect them to bring me to a different page), and the only way to identify them is through the tooltip. Each button should be labeled and there should be some indication that a menu will open (down triangle, etc.). – user128216 Jun 12 at 3:57
  • @Makyen has a userscript for moving the left bar to the top bar: github.com/makyen/StackExchange-userscripts/blob/master/… – tripleee Jun 13 at 11:42
  • "Promoting navigation aids and advertising over actual content is not "responsive" at all in my book." This! A million times this! Putting more ads is fine with me, but don't justify it with flimsy excuses like "responsive". I see that @JoeFriend chose to respond to that criticism with ... ignoring it entirely! Why can't you just say, "we are introducing left nav bar so that more people will look at Teams, and we will get a bigger bonus"? Be sincere. – Masked Man Jun 17 at 2:26

YAWC (yet another whitespace complaint)

When viewing a Question page on mobile, it feels like there is too much whitespace under the voting buttons, and especially to the left of comments. Here is a screenshot to demonstrate:

New design

Compare this with the mobile theme, which has no whitespace since the voting buttons are positioned next to the question title:

Mobile theme

Would it be possible to move the voting buttons to be next to the question title when the viewport is at a mobile size?

  • Actually, yes. Right now posts end up being extremely long on my phone because there is so little horizontal spacing for the content... but I also think the question states that the mobile version is still in the works... "We haven't fully optimized this for mobile device" – Catija Jun 6 at 0:36
  • 15
    @Catija correct, we haven't fully optimized for mobile. That said, this is an excellent point for when we do. – Joe Friend Jun 6 at 1:49
  • 5
    If you think that's a lot of whitespace, look at how much more there is on my phone: i.stack.imgur.com/rDF0o.png – snailboat Jun 13 at 8:09
  • What about for answers? They don't really have a title, so eliminating the whitespace beside the question itself won't do much because it will still exist for answers – GrumpyCrouton Jun 14 at 17:27
  • @GrumpyCrouton You're right. The current mobile theme (not new design) also has this issue. However I think that there is even more whitespace than the mobile theme. It seems this is due to comments being double indented. First indent for being a sub-item of questions/answers and ANOTHER indent for upvote/flag button. OTOH, the mobile theme seems to only have one indent level for upvote/flag button. – Kodos Johnson Jun 14 at 17:58
  • 1
    @KodosJohnson If people could agree to have a little bit more vertical space, maybe above answers you could include information about the poster instead of at the bottom of the question (or something similar, anything really that will allow each answer to have it's own sort of "title" which you could then move the up/downvotes next to. Or perhaps the up/downvote buttons could be move to the bottom of the question where there is already a tiny bit of whitespace due to the share/edit/flag etc links – GrumpyCrouton Jun 14 at 18:03
  • @GrumpyCrouton I think that would be a good solution. – Kodos Johnson Jun 14 at 18:09

We considered this, but have some features coming that will need the space.

#1: I suggest that we shrink the navbar in width to about the width of the longest item ("Questions" in this case).

Shrunken sidebar(Click to enlarge)

I want it because the button I most frequently will be "Questions". Hence, I will only use 25% of the bar, so I want thing I will use rarely to take up as little space as possible. And I don't want to do 2 clicks to get there.

#2: Make sidebar position: fixed; for quicker access

Left nav is now sticky

Currently when we scroll to the bottom of the page and the horizontal bar is sticky I can "refresh" questions section by making a single click on "Questions" in navbar:

Topbar with fixed position

But the new sidebar gets hidden on scroll down and now we are no longer a single click away from the "Questions" section, but position: fixed can fix that:

Sidebar with fixed position

And when both changes above are applied, together with the suggestion about grey background from another answer, we get small, convenient sidebar:

Shrunken sidebar with fixed position

#3: Replace sidebar text with icons

We considered this approach but it is very hard to find icons that are easily identifiable to a large majority of people.

... or we could make such an option available to be toggled in user preferences.

Sidebar with icons

This will further improve allocation of space.


  • 2
    Why do you want that? – Peter Mortensen Jun 5 at 20:10
  • 1
    Remember that this sidebar is used for other things besides these four menu items, and some have longer names than "Questions." – Nathaniel Jun 5 at 20:14
  • 9
    @Nathaniel I assumed so. But I, personally, don't see those long-name items. It's possible to compute how wide sidebar can be based on what items are available. – Alex L Jun 5 at 20:16
  • 1
    Okay; I didn't realize you meant make it dynamic based on the elements in the bar; I understood it as fixed 80px. – Nathaniel Jun 5 at 20:33
  • @AlexL you don't have to, because the browser does it automatically when the text changes! :) – user1306322 Jun 6 at 11:36
  • 3
    #3 is basically what the sidebar needs IMO. It's less distracting and takes less space - the current one looks really bad on 1280x1024 screens, like my secondary one, it takes a lot of space, and margin on the left is too small, which is ugly. – Soaku Jun 12 at 17:50
  • 9
    Also, non-descriptive icons (Without a label) are long time considered a really bad approach to UX. – Roko C. Buljan Jun 12 at 18:41
  • 1
    Pictograms/icons would be awsome! – shiny-metal Jun 14 at 7:46
  • 2
    @RokoC.Buljan in which century? Icons or pictograms are much easier and faster to understand because you just recognize them instantly, you don't have to read all this stuff everytime. You look at it and you know what it is. I think you've learned UI design from the wrong books. I despise text, if it's not the actual content then it's always distracting taking much longer to find what I need than by seeing only pictures. – shiny-metal Jun 14 at 7:47
  • 1
    @shiny-metal It's a matter of trusting whether SE's design team will (or can) choose an "instantly recognizable" icon. We've had problems in the past... Additionally, that sidebar is meant to expand to accommodate all sorts of stuff for teams and other sites. – canon Jun 14 at 15:49
  • 3
    @shiny-metal, pictograms are faster to understand once you've learned them. If you haven't learned them (like about 90% of the site visitors), the meaning is completely opaque. Text has the advantage that it doesn't require learning. – Mark Jun 14 at 20:25
  • 1
    I like all the suggestions except the pictograms, which have historically been unsuccessful UX on SO and SE for various reasons and A/B testing proved it. – Patrick Roberts Jun 16 at 19:16
  • 2
    @Patrick Well, then maybe "get better at picking those icons" is the way to go as against "we failed at this, so let us never try it again". They could also post questions on User Experience if they want to improve their UX skills. – Masked Man Jun 18 at 4:57
  • 1
    @KyleMit then how do you explain traffic signs that work without labels or the many symbols in cars or everywhere else? Text is always distracting and this can be seen on the page you quoted which is all text! They took their text rules to heart. To understand text you have to read it and this costs you a lot of time. When you see images you just get it and you don't have to stop not even for a moment... but it doesn't apply when there is a text next to them because it draws your attention away from the symbol so it's pretty useless then. – shiny-metal Jun 19 at 6:27
  • 2
    @shiny-metal, I'd encourage you to share some of those observations in the UX thread as a way to further dialog about some of the pros / cons of icons / labels. Shortly, the symbols you mentioned work in isolation largely because of their universal adoption. Ask 10 different people to draw a "tags" symbol separately and you'll get a bunch of different designs. Ask 10 new people to deserialize it back into text and you might not land back in the same place. Ultimately, it's about cognitive load to parse, and people are different. Research can help determine what is best for most, not all. – KyleMit Jun 19 at 12:05

Instead of adding a "hide" option in user settings, have you considered making the sidebar toggleable with a button instead?

Example of a toggleable sidebar

Advantages of a togglable sidebar:

  • Site maintains a consistent look and feel between users.
  • More intuitive than searching through settings menus1.
  • Doesn't require changing site-specific preferences on each community.
  • Guests can hide/show the sidebar without needing to login.
  • Fewer preferences help keep the options menu simple.

1Currently, disabling the sidebar involves navigating through User Profile → Edit Profile & Settings → Preferences → Navigation → Hide left navigation.

  • 3
    But the features are available in the (new) hamburger menu in the upper left? – Peter Mortensen Jun 5 at 16:56
  • 3
    We considered this and other approaches. They all have various strengths and weaknesses. We decided on the pref approach best met the goals of the feature. – Joe Friend Jun 5 at 17:24
  • @JoeFriend What about it being a per-site feature rather than network wide? Is this just minor mistake due to lack of testing or a deliberate decision? Or is it worth opening a feedback answer for that? – Christian Rau Jun 5 at 17:32
  • @ChristianRau we don't have global prefs today. It would be work to add it. We've considered it in the past and never had enough to bother. Most people never change the pref. For those that do they set it in the handful of communities they actively participate in and never look at it again. Maybe this will be the tipping point? – Joe Friend Jun 5 at 17:36
  • 4
    Hmm, the hiding seems like something many people like, especially power users (i.e. multi-siters?). But once you consider making it sticky (as repeatedly proposed here), that would definitely be a tipping point. For now making the top-bar sticky only worked on SO, but once we could be able to sticky the sidebar, too (provided you consider that), it seems reasonable to consider making it a network-wide feature in the same go. A workaround could be having a button to copy the changes to every profile, like with the name changes. That should work even without explicit network-wide features. – Christian Rau Jun 5 at 17:39
  • 17
    +1 if for no other reason than because some option hidden in the settings somewhere seems more likely to conveniently disappear or stop working at some point in the future. – Dukeling Jun 5 at 20:34
  • 1
    Other reason to have it toggled. I am often use PC and iPad. Left nav is ok for PC, but not good for iPad( too much real estate taken). Keep changing preferences is not convenient. – Michael Freidgeim Jun 13 at 22:41
  • 2
    @JoeFriend, Preferences are not discoverable. I wanted just to collapse left nav, because it takes too much space on iPad, but instead of tap small “”toggle” button had to search meta until I find this discussion and point to preferences. It is not user friendly. – Michael Freidgeim Jun 13 at 22:46
  • If simply toggling it saves the setting globally, this might be inconvenient with tabbed browsing. If you like it off by default, then enable it, then forget to disable it, then open a bunch of tabs, all those tabs would have it on. We could somewhat solve that by making the toggle toggle it on all open tabs, but that doesn't sound like a good idea. So simply toggling it should probably not be a global change, but rather just for that tab, and then there's another option to toggle it globally (but then we're basically back to what we have now, except maybe it's not hidden in the settings). – Dukeling Jun 13 at 23:39
  • 3
    @JoeFriend I participate a number of communities (with a different frequency of'course) and visiting the maze of settings for each of them is not nice experience... – YakovL Jun 14 at 0:33
  • @JoeFriend Have you considered simply making the left navigation hamburgered (I hope I use the right word)? That is, not hide it, but rather collapse it into icons only. See OPEN vs CLOSED in a system I use elsewhere. – yo' Aug 16 at 16:47
  • @yo' We did think about that. It can be difficult to come up with icons, but that is still an approach that we are considering for the future. – Joe Friend Aug 16 at 17:19
  • @JoeFriend In that case I would like to kindly ask you to consider it as soon as possible, because if would allow for the main panel not to get so squeezed, and that would be a huge improvement. – yo' Aug 16 at 18:01
  • I will be yet another voice asking for at-the-least a toggle-option somewhere on the page and NOT hidden away on the options page. I had no idea this sidebar could even be toggled until I was perchance guided here by one of the 'featured on ..." boxes on the right sidebar navigation – PowerLuser 10 hours ago

Once again the design completely ignores people who use small screens or who use a window interface :(

This is the new MSO at 816px (on my system, YMMV), with the left sidebar disabled:

816 is the magic number

This is a bit too narrow for me though. I'd rather have a window that's half the width of my monitor, which on the machine I'm posting on right now is 1920. But widen the window to 817px and beyond, and it breaks down (or breaks up?):

817 is the number of the devil

WHY???

I'm not even sure whether the narrow-screen behavior is intended or not. I guess an accommodation for mobile devices? Please keep it! Please, please keep it!

And please make the right side-bar collapsible, like the left side-bar is**. This shouldn't be a preference, it should be a button that you click (with a discoverable keyboard shortcut, of course).

By the way, collapsing the left sidebar shouldn't be a user preference. Its desirability depends on the window width, so it should be possible to toggle it on a window by window basis. I think a decent compromise would be to make it a hidden preference that you can quickly toggle on the page, possibly a cookie-based rather than account-based preference since optimum window size tends to be device-dependent.

  • 1
    They could also increase the threshold that determines when the sidebar stacks. – Kodos Johnson Jun 8 at 0:59
  • 37
    How can you resist the temptation to not click that +3903 shiny green notif? – Frakcool Jun 12 at 20:45
  • 4
    @Frakcool I've never understood the appeal. I know intellectually that some people are obsessed with numbers and that Stack Exchange's philosophy is to pander to those people, but I have neither the time nor the inclination to watch every vote, badge and whatnot. I hide it with CSS most of the time. I only reset it every few weeks or so when I accidentally press the keyboard shortcut. – Gilles Jun 12 at 20:56
  • I see, interesting tho – Frakcool Jun 12 at 20:57
  • +3903 rep? wow... I can't resist when I get past 30... and sadly I don't think I've ever been passed 100 :-( – scunliffe Jun 12 at 21:26
  • 4
    @Gilles: I sometimes go have a look at old answers that are getting votes long after I posted them, and see if there's anything to tidy up. Many old answers dwell in obscurity, but some actually get a reasonable amount of search hits. Those are the ones I want to make sure are definitely giving advice I still think is correct. :P – Peter Cordes Jun 13 at 1:15
  • @Frakcool I choked on my coffee when I saw that. How could anyone resist clicking that? Holy crap that's a lot of unread rep notifications. – Clonkex Jun 13 at 3:55
  • @Clonkex If that had a badge. – Manoj Kumar Jun 13 at 6:48
  • 7
    @PeterCordes I guess it's a matter of scale. I don't have time for that. Now can everybody please stop commenting on an irrelevant detail?. – Gilles Jun 13 at 7:42
  • 6
    An xkcd link... yup that should redirect everyone's attention nicely :P – Peter Cordes Jun 13 at 8:05
  • I actually have the opposite experience. I like seeing the stuff on the right, but my default browser window size on my vertical monitor it is way at the bottom. I do like the idea of an easy collapse/expand for it. Open when I want to see related links, closed when I'm viewing answers. – Brian J Jun 14 at 15:00

see Left nav is now sticky

I wouldn't normally request a per-user feature as it's a lot of work, but as you already have the per-user options for navigation, can we have an option to make the new left nav fixed?

So it will always be there when scrolling (or not if preferred).

With the option already present to "disable top bar stickiness", this new requested feature will allow users to select their preferred menu to always be visible to be clicked. Or both if preferred.

  • 18
    I get content not scrolling with the page if theres a lot of team related content, but I've only got 4 items in the list. Why dont those items move down when I scroll? Whats the point of them having their own content box if 90% of the time that box is empty? – battery.cord Jun 5 at 17:25
  • In the mean time you can apply this yourself with Stylish or other User Style browser addon with the following styles: #left-sidebar nav[role="navigation"] { position: sticky; top: 75px; } on browsers that support position: sticky; – TylerH Jun 5 at 18:28
  • 1
    Don't forget that the current content of the left sidebar is not likely to stay what it is. From other posts it seems like there will eventually be much more content moved to or added to the left sidebar including favorite tags and custom searches. Fixing the left nav would require a secondary scroll bar depending on what is added to this space and how it's implemented. – Catija Jun 5 at 21:50
  • 9
    I kind of like how Read the Docs does this — the sidebar content scrolls with the main page, but it can also be scrolled separately and it won’t scroll out of view. – J F Jun 6 at 1:54
  • 2
    Having the left sidebar NOT fixed in place seems quite useless to me. The point of nav is to allow navigation, and if I have scroll back to the top to use it I'll just keep it in the header instead. This wasn't though out very well. – Ex Umbris Jun 12 at 17:47
  • @ExUmbris : If only that option existed... – Artemis Fowl Jun 25 at 16:55

The current behavior is a bit a of a hack that we need to clean up. I think the direction we will move is: * some things (possibly the asked/viewed/active meta data) will get integrated into the post itself * some things get moved to the bottom (related) * and some things get dropped altogether (hot posts)

You mentioned the site is now responsive. At first glance, I love that you hid the right sidebar at smaller resolutions and then I realized... nope, you just moved it to the bottom of the page:

right sidebar below the answer box

Is this really the intended design on smaller resolutions?

  • 13
    That's a bit a of a hack that we need to clean up. I think the direction we will move is: * some things (possibly the asked/viewed/active meta data) will get integrated into the post itself * some things get moved to the bottom (related) * and some things get dropped altogether (hot posts) – Joe Friend Jun 5 at 17:39
  • 27
    Hot posts is about 70% of the content I browse. Is there a replacement planned, or a meta post about this? – battery.cord Jun 5 at 17:52
  • 8
    @battery.cord you can get the full hot list (not just a selection from it) on a page of its own by clicking the "Hot Network Questions" header. That might be worth bookmarking for your browsing convenience; you can scan 50 questions at a time there. – Monica Cellio Jun 5 at 18:12
  • 3
    @JoeFriend that's good to hear. I hope that the community bulletin and (on sites where it exists) the professional disclaimer will continue to be prominent. – Monica Cellio Jun 5 at 18:14
  • 9
    +927392755 to no longer wasting space on every page with trending distractions. – Something Bad Happened Jun 5 at 19:00
  • 3
    This seems to be common behavior of sidebars for responsive sites – Kodos Johnson Jun 5 at 22:49
  • Why would you actively make a sidebar inaccessible? Pushing down is the right thing. – Nemo Jun 6 at 7:19
  • What do you mean by smaller resolutions? Screens with small resolution? – Nog Shine Jun 6 at 9:19
  • @NogShine So, I run my web browsers maximized (fullscreen) typically. My monitor resolution is 1920x1080. Not everyone uses 1920x1080; some people still run at 1024x768. And some people run at much smaller tablet-sized resolutions in browsers that don't shrink the pixels to accommodate "HD" resolutions on those devices. Aside from that, there is always the real possibility that many users simply won't run the browser window maximized. They may need to see a webpage and another application at the same time, side-by-side. This shrinks the browser viewport resolution. – TylerH Jun 6 at 13:30
  • 1
    @Nemo The sidebar is not required for the main function of the site. It is all "extra" flashy stuff. Announcements! Hot questions! Other networks! A lot of users aren't interested in that stuff one bit. Many others are only interested in the announcements. Even more only want to see "related questions". In my personal opinion, hiding it with the option to have it slide out at a fixed position w/ higher z-index on icon click (or something similar) is the ideal solution. No need to scroll down to see it or scroll side to side to see the full view of the page at smaller resolutions. – TylerH Jun 6 at 13:33
  • Oh! I understood what you meant. I too have an opinion that this is a design intended for 1280x1024, 1600x1200. You face problem due to large window and I face with smaller window. I still use 1024x768. The content looks sandwiched due to that. There are bugs too. – Nog Shine Jun 6 at 13:38
  • "That's a bit a of a hack" Understatement of the year. – Clonkex Jun 13 at 3:52

Please reduce the amount of space tags take at the top, and add clear indicators for different tags.

This:

enter image description here

is plain horrible. I've lost about 30% of the vertical space on my (small) second monitor purely on tags.

  • 3
    I cam here to post this! +1 – DavidG Jun 12 at 17:57
  • I have this tags (note: goo.gl shortened link because it could not fit in the comment) always open due to my interests, and I can't see questions without scrolling. I think showing this header is a good idea, but have some limits: if the header would take >50% of the screen, reduce the font, revert back to the side tags, make it collapsible showing only the channel, ... – Jofre Jun 13 at 18:34
  • Also, previously the total questions for a tag was shown on the right side of the page and it was bold and big. Easy to spot. That is information which is valuable to users. Now it's small and not-so-easy to spot – rafid059 Jun 14 at 17:34
  • It looks like this using the latest version of VisualCrumbs in the Com branch. @Jofre – GrumpyCrouton Jun 14 at 18:41
  • Related. – Ansgar Wiechers Jun 14 at 18:56
  • 1
    This is fixed – Brian Nickel Jun 28 at 19:54

You've changed the color of the 'Ask Question' button on the 'active' tab:

enter image description here

but not on the other tabs, like hot:

enter image description here

and the /questions page, as @rene noted on MSO.

  • The individual question pages also have the old button. – Kodos Johnson Jun 6 at 1:19
  • Now that it's live on Meta Stack Exchange, the Ask Question button is blue-on-white, but the same problem remains. – Glorfindel Jun 12 at 18:38
  • I guess due to effect of heat the div 's physical property is changed. :-D – Prateek Jun 14 at 0:20

See Hide Left nav everywhere with a global preference

Left nav pin/unpin should be a global, cross-site pref

I set the preference to collapse the left side bar (“Hide left navigation”) via Meta Stack Overflow, and it's working there. But on Stack Overflow and Meta Stack Exchange, the left side bar is not collapsed and the preference checkbox in my profile is unticked.

User interface preferences should obviously not depend on the site. I'm not going to edit my profile on over a hundred site!

Yes, I know this is an old bug, keyboard shortcuts have had the same problem for years. So please solve it already!

  • 4
    @JoeFriend “feature request”? Come on, that's petty. It is not reasonable to expect users to repeat an action over a hundred times. – Gilles Jun 12 at 19:45
  • 7
    For users that are active on more than one or two sites this limitation means that the preference essentially doesn't exist. It's not reasonable to manually set it on every single site (and meta site). – Mad Scientist Jun 12 at 20:01
  • 8
    @Gilles Seriously did not mean to be petty in any way. It isn't a bug, it is a feature. We need to plan for it and add significant code to support it. It was requested when we took the top bar network wide and we ended up not doing it due to cost. That said, I'm a supporter of the request. That is why I made the edit. It was in no way a dig or slight. – Joe Friend Jun 12 at 20:02
  • In Wikimedia it took 10 years to get seriously started on this feature from the moment global accounts were introduced. ^_^ meta.wikimedia.org/wiki/Community_Tech/Global_preferences – Nemo Jun 14 at 20:14
  • I'm pretty sure it was disabled on meta and stackoverflow when I checked the box yesterday, but a few hours later it came back on stackoverflow and I had to search for the stackoverflow preferences to disable it there too. – jcesar Jun 15 at 9:18

Add Help, Meta and Chat links into the sidebar.

site switcher: stack overflow, help, chat, log out, meta stack overflow.

The site switcher contains some pretty major site navigation features. I'd classify them as equally important as being able to navigate to users and tags, if not more important or more likely to be used.

What if we added these to the sidebar?

a screenshot of the left sidebar, with some new options added.

New: “Chat” and “Help” added at the bottom (the help link with its help icon to help users find it); "Meta Stack Overflow" added beneath the Stack Overflow link.

These weren't previously listed alongside Questions/Tags/Users/Jobs because that was a horizontal menu with limited space. Now we've got a vertical menu that doesn't have the same constraints.

Add My Communities as well

(I've just seen Monica Cellio also mentioned this as part of her feature request, but I think it makes sense to leave this here too whilst I'm talking about adding site switcher content to the sidebar.)

We could even move the My Communities section of the site switcher into the sidebar. It'll be appearing on every site, right? So now I can move around to other sites this way.

enter image description here

I'm not sure how I'd execute “More Stack Exchange communities” since we wouldn't want a list of all 200+ communities showing up in the sidebar, but if we added that section & functionality into the sidebar too, it would make the site switcher obsolete.

A valid counter-argument for this section is to consciously keep the sidebar limited to navigating locally within the one stack exchange site, and keep the site switcher for the task of navigating to other sites.

  • 2
    Looks like you understood what "primary navigation" means. ;) +1 to this. If this gets implemented, I will delete my answer below asking to hide the left navigation bar by default. I still don't see "Jobs" as anything more than a useless nuisance, but I agree with your overall answer, so I will ignore that. ;) – Masked Man Jun 18 at 14:53
  • 3
    I could do without the site-switcher, but the first suggestion looks AWESOME. Would also address: meta.stackoverflow.com/questions/369680/back-to-so-from-som – Shog9 Jun 18 at 17:41
  • 2
    +1, but one thing: in the mockup it sorta looks like tags/users/jobs/chat are nested under meta, by dint of the presence/absence of an icon. (Add to that the familiarity many might have with site metas "owning" users and tags pages....) I'm no UI sheep, though, so I've got no good suggestion for how to improve it =( – nitsua60 Jun 18 at 17:58
  • 1
    @nitsua60 List it last (after "Help") instead of first? – Catija Jun 19 at 0:45
  • @Catija That could work well! I guess I put it beneath the "Stack Overflow" link only because I'm used to seeing it located like that in the site switcher, but after help could make more sense in this vertical layout. Plus on other sites like Meta there isn't a link for the site name itself, so that'd make even more sense down the bottom under help on those. – doppelgreener Jun 21 at 16:33

- Make the horizontal scroll bar optional. In other words, option for enabling and disabling responsiveness.

There have been concerns from users with high resolution monitors this, this and this. My answer is from point of view from a low resolution.

Space taken by Q&A is reduced

In one of the previous posts, Ch-ch-ch-changes: Left nav, responsive design, & themes Joe Friend has explained this responsive design is a result of long requests from users having low resolution devices. There is also a statement in the question

This benefits people who have lower resolution devices or like to have multiple windows in view.

But in practice, it is not benefiting. There are some issues.

I use a device with low resolution (1024x768). This is how it looks to me.

Meta StackOverflow home page with nav bar enabled

The right side bar is squeezed into a single window which makes the content (Q&A) sandwiched between left navigation bar and right side bar. They take very less space. The new responsive design fits everything in a single window. This squeezed As a result, the space taken by the right side bar didn't change but the space occupied by Q&A on the screen has decreased.

In the current design, the main focus is on Q&A. We can scroll with the help of horizontal scroll bar the missed part in the right side bar. The space taken by Q&A is not affected at all. So, that should be continued. At least there should be an option to select it.

The look of the question is also damaged. If the question is edited by a user other than OP, the editor's avatar and OP's avatar shows in vertically rather than side by side.

question with left bar enabled

Only option we have to avoid this is to disable navigation bar. In a previous post entitled Left nav, responsive design, and theming next steps, you wrote,

We are committed to the left nav, but based on your feedback we'll be addressing some key concerns.

If the bar is always disabled, it is as good as not having it at all. If this left nav is only limited to users with high resolution devices, the goal of having a nav bar is not achieved. I hope having horizontal scroll bar will solve this problem.

More problems with right side bar:

When the left navigation bar is enabled, users are not be able to comment properly. "Add comment" overlaps with the Hot Network questions.

Bug showing comment dialogue box with left bar enabled

We all are humans (well, most of us), we make mistakes. If we click on any o Hot Network question mistakenly while clicking on "Add comment", it takes us to a different site. We should get back to the comment and write it again. It is a waste of time. Not only it's an issue of time management, it doesn't good.

Bug showing comment dialogue box without nav bar

This effect can be minimized to some extent if the navigation bar is disabled. But there is an overlap of "Add comment" with the Hot question bar. Add comment button touches the site icons in Hot Network Questions. It doesn't look good.

From 1024x768 resolution screen, Browser: Firefox updated version. Also reproduced with Google Chrome updated version OS: Windows 7

We still have a scroll bar in the profile page in the new responsive design just like the old design.

image with scroll bar on Meta StackOverflow

Some user reported it as a but that should not be removed. I request that sort of behavior for the devices with low resolution. Users with higher resolution do not see this scroll bar at all as the current design and responsive design fits within a single window. So, there would not be a problem for them. It will be helpful for us.

Regarding sticky Topbar, it is an excellent choice.

The left navigation bar is almost empty. It would be great if more options are added into it. Home and Questions are the ones many visit. Add more frequently visited options in the left navigation bar.

That's all from me at the moment.

  • #1 There is a temporary way to turn off responsiveness. (see post above). We will be removing that at some point, however we can consider adjusting the breakpoints where the right sidebar is removed, but will probably wait for a bit for more feedback. – Joe Friend Jun 6 at 16:50
  • #2 commenting problem is a bug and we will look into that one. – Joe Friend Jun 6 at 16:51
  • #3 lack of responsiveness on some pages is an acknowledged issue. This is a work in progress. Pages that are responsive will get better (like fixing the bug above. New pages will become responsive. – Joe Friend Jun 6 at 16:52
  • 2
    Wish I could upvote this 10 times! I use a window size of 900px most of the time, and I liked having the Hot Network Questions and such off the edge of the screen, leaving more space for the main content. When I wanted to see them, I'd just scroll over. – seaturtle Jun 13 at 14:58
  • @JoeFriend Both the requests are [status-completed]. I didn't understand why you only added that tag to bug report. I notice that this is completed for feature request too. – Nog Shine Jun 19 at 4:58

I don't like the enormous amount of space at the top of the Question list pages (home page and /questions).

old version

vs

new version

I use a 19" monitor for my normal browsing, and on that size, that's pushing the questions even further down the page.

I could see splitting it up like it is as the width of the page gets smaller, but at full width, that's a lot of unused space. The original mockup is below, but it's missing tabs.

original new left nav

  • 1
    I suspect this change had something to do with teams, but I can't see teams, so maybe i'm missing some information. – Kevin B Jun 6 at 0:08
  • FWIW Custom tag filter tabs are purported to be coming in mid-to-late June/Early July per Joe's latest post to the pinned TeamDAG MSE question. The layout here will likely change to accommodate that. – TylerH Jun 6 at 17:36
  • Needz more free hand red linez – Liam Jun 13 at 14:55

I use a vertical display for my browser (so 1080 px wide), see screenshot for the aspect of SO in my browser.

While wide margins are probably fine on wide displays, here the amount of margins on both sides really reduces (and vertically squeezes) any content, to the point that only about 30% of the screen is used - that feels like a waste. I'll definitely disable the left navigation, but if you want the website to be responsive, I'd recommend to start removing margins at wider displays than now.


user cards next to each other.

I think there is somewhat of a misconception around responsiveness. Just making things more vertical doesn't make necessarily make them better on a less wide screen. What you want is wider content, better use of space.

On the same screenshot, you can see that the editor usercard is now vertically stacked with the author usercard. This wastes even more space, even though there is more than enough space to fit them horizontally. And again, this is a copious waste of space.

SO on 1080x1920 display

  • 2
    Not only is it a waste of space — it's actively misleading. I keep thinking the editor is the author on first glance, and I theoretically know better by now. – mattdm Sep 4 at 17:18

There are some coming features that need the extra space, so we can't make it more narrow. Making adjustable is complex and we won't be doing that at this time.

Can we narrow the right column in smaller viewports without removing it entirely?

Below around 800px the right column moves to the bottom of the page, which is good for phones but loses some important information (question stats, professional disclaimer, community bulletin). As soon as the right column appears, though, it grabs something like 300-320px of width. If that kicks in at about 800 px, that's around 40% of the width, which is too large a proportion for a page that should be focused on the Q&A. I'm browsing at about 1100px right now and it still looks a little greedy. All of this is with the left nav already collapsed, to be clear.

Most of this content would fit just fine at a smaller width; mostly it's text and that can wrap. In fact, it worked fine at, if I recall correctly, 220px for years before being widened to accommodate standard ad sizes. On sites without this change, part of my right column is behind a scrollbar and that's fine; it's lower-priority content, after all. But responsive design means "make it all fit, no horizontal scrolling".

I don't begrudge the ads; in fact, I look at them (or, on sites that don't yet have this change, most of the width of them and I'll scroll if it's something I haven't seen before). But I'd like the right column to be less dominant on smaller viewports. Is there some way to meet both needs? Is there some place to put the ads so that they're fully visible without claiming that entire slice of vertical space? Do we have the option to change the width of the column partway down, so that after the ad we can shrink HNQ and give Q&A more space? I'm just brainstorming here, not proposing a specific solution.

  • 1
    I opened this question looking for an answer like this. I have a second monitor in vertical/portrait orientation for the express purpose of viewing long things like SO posts (and other web pages and docs). The addition of the left nav makes the width of the actual content comically small. – SOLO Jun 12 at 19:51
  • 1
    @JoeFriend, sorry to hear that (declined) -- I was really hoping we could do something to allow Q&A to have a larger slice of smaller screens. I was traveling last week with a tablet, and boy was that narrow. – Monica Cellio Jun 22 at 19:06
  • Speaking of wrong measures, the right column should be around 40 ens, and not adjustable at all except that it should disappear in super tiny viewports. Our measures (line lengths) are wrong nearly everywhere. See this answer, where I have taken your name but hopefully not in vain. :) – tchrist Sep 2 at 17:50

The new left navigation on Stack Overflow seems to be over-complicated due to Teams, despite not being a Teams user. The "Stack Overflow" link below "PUBLIC" actually takes you to /questions. Shouldn't it be called "All Questions" instead, otherwise you have two "Stack Overflow" links on the same page that take you to different pages?

Finally, I was informed in another MSE post that the SO link with the globe icon is actually at a higher indentation level than Tags, Users and Jobs. The globe icon makes them look to be at the same level of indentation. Is it necessary?

SO left nav

As a non-Teams user, I would love the simplified look of this example I have created:

SO left nav without Teams

Or even the following to keep the public/teams separation if absolutely necessary:

SO left nav simplified

When editing a question at certain viewport sizes, the textboxes for the title, edit summary, and tags extend into the sidebar. This also happens for the edit summary when editing answers. See screenshot below.

Editing a question

completed the fixed part of this, scrolling coming soon. Left nav is now sticky

I'm not a fan of the left nav, but I love the way that YouTube does it: http://youtube.com.

Two things that make it great:

  1. It actually hugs the extreme left side of the window, preserving space for content.
  2. The left nav is fixed and can be scrolled independently of the main content.

So if we got to have a left nav, might I suggest that you just straight-up copy YouTube's design? That would be great IMO.

One thing to note about YouTube's design is that if you resize the window, you will notice that the left nav collapses very easily. It allows for a LOT more space for content than the responsive design here. I think that is a complaint that many people have made so far.

It just feels too squished with the left nav AND right sidebar. I think the left nav should collapse BEFORE it even affects the old max-width. So you should really only see it if you have the whitespace there to accommodate it (for example, if you are on widescreen monitor and the window is maximized, which is fairly common). But if not, it should be collapsed.

On mobile (iOS Safari), the /review page is already responsive, but there's something wrong with the achievements dialog: Teams icons are not shown in the daily summary, and the spacing/padding/alignment of the items is off as well:

enter image description here

This is how it looks like on desktop:

enter image description here

  • What iOS / Safari version are you using? – balpha Jun 25 at 9:40
  • @balpha the newest (iOS 11.4 + built-in Safari) – Glorfindel Jun 25 at 9:41
  • Ok thanks, I'll have a look. – balpha Jun 25 at 9:42
  • I can't reproduce this, it looks like expected here. Two things: 1) Is it possible that this was a network hickup? Your screenshot looks roughly like I'd expect things to look if certain CSS files weren't loaded. 2) You're specifically calling out the /review page -- does that mean you're only seeing this on that particular page, or was that just the page you happen to notice it on? – balpha Jun 25 at 10:16
  • I can reproduce it on others pages as well, e.g. stackoverflow.com/help. I can't rule out that a CSS page has not been loaded, but I would not expect such an issue to persist for almost three weeks. I've already cleared the cache for stackexchange.com, stackoverflow.com, cloudflare.com, sstatic.net; should I try more? I'm using an iPhone 7 Plus, maybe that makes a difference? – Glorfindel Jun 25 at 13:24
  • So I've tried iOS 11 on iPad, iOS 10 on iPhone 7 plus, and iOS 11 on iPhone 6, and it looked like expected everywhere. I realize that that doesn't include your particular combination (I'm just going by what browserstack offers), but it seems unlikely that that would change anything. Sorry :( – balpha Jun 29 at 9:20
  • Yeah, weird. I've tried Safari remote debugging but that hides the top bar entirely, so I can't figure out what's wrong either. Thanks for your efforts. – Glorfindel Jun 29 at 9:43

The voting buttons on Meta Stack Exchange don't fit to the site design's individual colour palette. Whereas they previously were light blue, as fitting to MSE's colour palette, they now seem to use the orange from Stack Overflow's design:

enter image description here

I know their shape has been unified to the default arrow in an effort to standardize the sites' theming. However, the colour mismtach is rather unpleasant since it is in stark contrast to the rest of the site's visual impression.

This has been brought up in previous feedback iterations, but it had been hinted that at least the button's colour would be based on the sites' existing design and themes. So maybe this is just a .

  • 1
    The idea with the new themes is to make them all based around a "primary color", which on MSE is the header/button blue. I'm not sure if we were going to use it for the vote buttons or not off the top of my head... but I'll check once the designer is back from a conference he's at until tomorrow. – Adam Lear Jun 12 at 18:15
  • 3
    +1 for using a blue freehand circle to really drive the point home :) – Kodos Johnson Jun 14 at 6:33
  • This will be fixed in the next build (at least in browsers that support CSS filters, so IE11 keeps orange buttons). Eventually we want to move away from sprites in favor of SVGs for the voting arrows, in which case that's no longer an issue. – balpha Jul 5 at 12:49

Let me be brutally honest, I much rather the current site.

First, (I do not use SE on mobile, however) how is left-nav more mobile friendly?

Secondly, how is left-nav a better user experience? Even if the menu does not scroll?

I don't know much about history web design, or whether "responsive" is equivalent to "the user shouldn't have to scroll to the right or zoom out". But I don't like this change.

This (screenshot is at 30%) is readable on my phone held at a typical distance, being one to one and a half feet from my face:

show me the texts

But alas, that's the Desktop view of my mobile browser (Firefox), which has its own problems.

And I can't zoom out any further. On mobile it looks like this:

newline ALL the things

And I can't zoom out again. I can read this very clearly at, I kid you not, at one and a half meter (that's about five Freedom Units) distance from my phone.

The feature request: please don't do responsive like this. Let me zoom out to get more text on my screen.

  • You must have exceptionally good eyes (and a very high DPI screen) for the "readable on my phone" screenshot to be readable. – Nicol Bolas Jun 14 at 4:09
  • @Nicol thanks, I guess! I have a resolution of 1440x2960 on 5.8", which makes a DPI of 568. – CodeCaster Jun 14 at 7:40
  • 1
    They could just make the text size smaller for mobile. Is that all you are looking for? What you said earlier (asking if responsive design means the user shouldn't zoom out or scroll) is accurate. The whole idea is everything should be presented to you without having to zoom out or pan (like a mobile app). So they can't really not do responsive design like this since that is what responsive design is. So maybe you want to say: don't do responsive design at all? Also, they said in the post that they haven't fully optimized the design for mobile. – Kodos Johnson Jun 17 at 9:07

All of this is unnecessary. The white space reserved for the left nav keeps stealing screen real state long after the left nav is no longer in sight. Why? Why do you think that this is needed? SO has many problems but the UI it's not really one of them (until you go and change it and make it a problem).

Btw, "Hide navigation" it's not working for me.

  • Agree, the content part is far too small. It's hard to actually read questions even on large screens now. Most of the space is taken up by the side bars and pointless white space. – James Jun 12 at 18:47
  • 3
    @James "It's hard to actually read questions even on large screens now" - I wonder what version of SE you used before, seeing how the width of the main content didn't change at all. They basically just filled some of the white space that was already there with content. – Christian Rau Jun 12 at 19:01
  • It was definitely squashing it for me. Finally got the setting to work and it seems to have opened up some space. – James Jun 12 at 19:06
  • Try printing out an SO Q+A then.....this responsiveness design....even with the left navigation side-panel turned off....leaves a lot to be desired. – Colin Smith Jun 12 at 21:23

One thing not yet mentioned in the other answers is the inclusion of the + Create Team link.

new SO menu

As a user that has no intention of subscribing to the Teams feature, this is just noise.

If at some time I do decide to subscribe I would make a conscious effort to seek out the sign-up page. Having this displayed front and center on every page seems a bit desperate.

  • 7
    I doubt they are goin to remove it. This is the latest money-making machine. – Kodos Johnson Jun 15 at 15:28
  • You could always set up a custom filter on an add blocker to hide it. – Matt Aug 9 at 17:34

I visited Stack Overflow on my tablet for the first time, and was met with this:

Enter image description here

Not exactly the world's most welcoming landing page, is it? And yes, as others have noted, it's readable from a distance of about six feet on a seven-inch tablet.

  • 4
    yuck, I thought they got rid of that banner. – Kodos Johnson Jun 13 at 0:23
  • 1
    Yep. We are working on a fix. To reduce it's size on smaller viewports. Sorry for that. – Joe Friend Jun 13 at 0:25
  • 1
    Well, I suppose a banner that only takes up half the screen is better than one that takes up the entire screen, but there's still only room for two questions above the fold when I visit the site for the first time. – Mark Jun 14 at 0:47

The bottom of tag pages is a bit clunky on small viewports – the "legend" and the "tag synonym" links might benefit from a line break between them:

Legend vs. tag synonyms

  • 3
    Thanks for that. I'm sure there is quite a bit of "clunky" for us to clean up for small viewports. Keep pointing things out as you see them. – Joe Friend Jun 5 at 19:13
  • @JoeFriend so it's status-planned? – Shadow the Welcoming Wizard Jun 5 at 21:55
  • @ShadowWizard I guess, though I have no idea how/when we will actually change it. There is a long tail of clean up. – Joe Friend Jun 5 at 21:59
  • @ShadowWizard What URL can I go to for repro? – Joe Friend Jun 22 at 19:11
  • @JoeFriend For example, MSE tags with a window 640px. Shrink it more and it will eventually look like my screenshot. – Nathaniel Jun 22 at 19:16
  • @Nathaniel Got it. – Joe Friend Jun 22 at 19:24

You must log in to answer this question.

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