-230

This post is now locked due to a lot of off-topic or very tangentially related issues being posted here. It's so large that it is pretty hard to find/triage issues listed. If you have a concern related to left nav, theming and/or responsiveness, then I'd encourage you to post them as a question on MSE or on the meta of the specific site you're concerned with.

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.

105
  • 353
    The new layout feels like facebook. I don't wanna be on facebook :/
    – user311246
    Jun 12, 2018 at 17:42
  • 189
    Is there a reason the preference to hide it doesn't apply network-wide
    – Kevin B
    Jun 12, 2018 at 17:48
  • 296
    I don't like new layout. Jun 12, 2018 at 19:42
  • 88
    This menu makes me almost physically uncomfortable. Like walking around in wet shoes. Thanks for providing the setting to disable it. Jun 12, 2018 at 20:45
  • 100
    For the next April 1st make sidebar take 50% of the screen and disable ability to hide it, please. Jun 12, 2018 at 21:05
  • 237
    One comment on the new UI: The old one wasn't broken.
    – Mars
    Jun 12, 2018 at 21:36
  • 101
    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. Jun 12, 2018 at 23:39
  • 109
    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". Jun 12, 2018 at 23:43
  • 87
    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, 2018 at 5:57
  • 35
    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, 2018 at 7:51
  • 29
    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, 2018 at 8:18
  • 77
    Ugh just have an X button to hide it? Why make us go to our settings to hide it? Bad usability.
    – MSpeed
    Jun 13, 2018 at 12:11
  • 66
    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) :( Jun 13, 2018 at 12:42
  • 35
    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, 2018 at 20:34
  • 28
    Is there a chance theoretically that we could get the previous design back? It was so much better. Jun 15, 2018 at 18:08

86 Answers 86

13

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.

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

Can we please have the right widget collapsible? Not via a checkbox in preferences, but with a button near it (you know, splitter panel style).

I like to have 2 windows open on a FullHD monitor, snapped to half of the screen each, and the site looks bogus when you disable the left nav bar - a huge chunk of vertical space is eaten up by the right widget with hot questions and related posts. I'd like to be able to collapse it, and not rely on automatic windows width-based layout auto-adjustment logic.


Also, the profile page doesn't auto-adjust itself to fit the window at half-FullHD width. There's way too much horizontal scroll to take it seriously as it is now.

10
  • Responsiveness is a work in progress and is not working for all pages (profile pages are specifically called out in a previous post that is linked to above). We will continue to improve and add responsiveness in the coming months. There are a lot of pages. Up to this point we have focused on the 20% of pages that people access 80% of the time (percentages are product manager estimates and are not to be taken literally).
    – Joe Friend
    Jun 6, 2018 at 16:36
  • @JoeFriend So we can expect the other 80% of pages to be responsive in 6 to 8 weeks?
    – Luuklag
    Jun 14, 2018 at 13:42
  • Can we please have the right widget collapsible I like this idea a lot. The user should be in more control over how their space is used on their screen. As such, I've added the ability to do this via the Com branch (Which will be being pushed to master soon) in my VisualCrumbs userscript. With this userscript enabled, you'll get a button in the left nav-bar to toggle the right sidebar, which will persist across page loads until you retoggle it. Jun 14, 2018 at 19:42
  • @GrumpyCrouton idk about any other parts of that script but if you could make a separate collapsible toggle thingie script and post it on stackapps, that'd be the best Jun 14, 2018 at 23:44
  • @user1306322 Sure I can do that. I also plan on adding the ability to choose which features you want with VisualCrumbs. Give me a bit and I'll post up a sidebar toggler. Jun 15, 2018 at 12:55
  • @user1306322 Done. greasyfork.org/en/scripts/… Jun 15, 2018 at 13:04
  • @GrumpyCrouton oh so it adds a button-link to the left nav but if you have it disabled, does nothing? I thought you meant like a collapsible vertical bar on the right like in side panel controls/containers. I'm not planning on having the left nav bar enabled on any site ever, so as it is now this script does nothing for me I guess Jun 15, 2018 at 13:24
  • @user1306322 The button would to toggle the sidebar would be pretty trivial to move, I put it where I did for a couple of reasons. 1) I assume the sidebar is here to stay and will be the default and only option in the future, 2) I originally had the button right above the sidebar, but the way the page renders when the sidebar was hidden then that button would be moved to the very bottom of the page. I couldn't leave it at the top with the sidebar collapsed because it would really just hide the content of the sidebar and leave the whitespace the same. Jun 15, 2018 at 13:27
  • Alright, well, it's a script that works for the use case you've described. It's not just what I personally wanted, which is okay. If I need, I'll write one that I like :p You can post yours on StackApps.com to give it more visibility among SE/SO users if you wish. Jun 15, 2018 at 13:31
  • @user1306322 I've already got visualcrumbs on there. Jun 15, 2018 at 17:43
12

OK, this is just ridiculous. Can you lower the vertical space wastage? Or just remove it altogether? Nobody really needs >20% of their viewing height to be taken up by this:

Screenshot

You could e.g. literally cut it in half just by moving the bottom row into the middle of the top row.

6
  • 1
    There is content in that "blank" space in most question list views. (see example)
    – Joe Friend
    Jun 12, 2018 at 19:16
  • 3
    Content that used to exist in the right column instead
    – Kevin B
    Jun 12, 2018 at 19:19
  • @JoeFriend: Good point, but in all honesty while I realize you guys care about this, I (and I assume most users) couldn't care less how many questions there are with no answers. We answer what we can, and that's that. Also, you could definitely still shrink it even with that content with some more creativity. You could even also just move that additional text to the left column to avoid it taking up space altogether. Vertical space is far more scarce than horizontal.
    – user541686
    Jun 12, 2018 at 19:19
  • @JoeFriend: Actually you guys could probably remove that section altogether. You could put the Top Questions on the left nav, shrink the Search box a bit, and put the buttons on the top bar, or maybe utilize the right side somehow.
    – user541686
    Jun 12, 2018 at 19:26
  • 5
    White space does actually help make a page more readable. I think that the consistency of placement is more valuable than getting rid of a little white space.
    – Catija
    Jun 12, 2018 at 20:53
  • 1
    Move Ask Question to left bar, more space available for tightening the top part Jun 14, 2018 at 10:12
12

After checked the "Hide left navigation" option in the preferences, the Meta Stack Exchange site header container is not aligned with it's top and bottom div.

Can be the <img src add with some spacing to align with the top and bottom divs when hide the left navigation.

Current behavior:

Meta Stack Exchange site header container

Expected behavior:

Expected

1
12

I had to disable the left nav bar on both SO and this Meta.

Does this setting really need to be on a per-site basis? Can't it be that disabling the nav bar is a global setting accross the whole network?

3
12

Posting feature-request/bug from comment:

Can you please add the tabination to the about-tag-page?

On every other tag page you see this tabination:

enter image description here

On the about-tag-page is no tabination:

enter image description here

This means that you are basically trapped from the info page and unable to return to the question page unless you figure out to click on the tag itself. This is (in my opinion) kind of unintuitive


Oh and this behaviour is new. Picture from SO:

PHP

12

see Left nav is now sticky

Can we have an option to make the new sidebar sticky?

Not Sticky:

enter image description here

VS Sticky:

enter image description here

1
  • 1
    This is included in my userscript VisualCrumbs in the Com branch which I will be pushing to the master shortly. Jun 14, 2018 at 18:48
11

I understand that the new design may be good and necessary for some users, but it is really annoying for me, whatever my settings, to have to either press the menu button or to scroll to the top of the page before I can press of questions, tags or users.

Could we have a preference option to get back the old top bar, please?


Edit:

Shift+G brings up a list of keyboard shortcuts including ones to above-mentioned places, however, new users may not know this and it is not as convenient as the top bar:
The Shift+G list

9
  • "Home" is directly accessible via the logo, they're all accessible via shift+g+h, q, t, and u
    – Kevin B
    Jun 5, 2018 at 18:16
  • @KevinB Apart from home, those are still much less convenient than before, and new users won't know that (like me!).
    – Miriam
    Jun 5, 2018 at 18:18
  • 1
    I don't disagree, just pointing out shortcuts do exist. I particular like shift+g+m
    – Kevin B
    Jun 5, 2018 at 18:19
  • @KevinB What does that do?
    – Miriam
    Jun 5, 2018 at 18:20
  • 1
    It swaps back and forth between the main site and its meta.
    – Kevin B
    Jun 5, 2018 at 18:21
  • I posted this above, but you can use Stylish or other similar addons to add this style to MSO: #left-sidebar nav[role="navigation"] { position: sticky; top: 75px; } on browsers that support position: sticky;. It will cause the list of links (home, questions, tags, users) to scroll with you.
    – TylerH
    Jun 5, 2018 at 18:39
  • 1
    @ArtemisFowl We won't be supporting the left nav OR navigation in the top bar as a user setting. Navigation is moving to the left bar across the network. If you have an alternate proposal to address your concerns I'd be interested in hearing it..
    – Joe Friend
    Jun 5, 2018 at 20:52
  • 1
    @JoeFriend my next best option would be point 2 of Andre Kool's post, (status-deferred), which points out that you have to scroll up. (The menu should scroll with the page)
    – Miriam
    Jun 6, 2018 at 18:41
  • @ArtemisFowl This is status-completed, isn't it? Jul 23, 2018 at 6:34
11

The top icons - inbox, achievements, review, etc are overflowing. I have to side scroll to see them.

Screenshot:

This is on mobile. Samsung Galaxy Trend S-75whatever, Chrome, Android 4.2.2.

2
  • 1
    As mentioned above. We have not fully optimized for all mobile screens and doing so will take some time. It almost works on SO.com (depending on your device), but the SE logo needs changes for it to work on MSE. Feel free to continue to use the mobile skin until we get to this.
    – Joe Friend
    Jun 12, 2018 at 19:11
  • My answer written June 6th discusses the failings of mobile desktop view with TylerH, whom has looked into this.
    – Rob
    Jun 22, 2018 at 17:29
11

When not logged in, the banner here on MSE has z-index issues, it hides the popup menus:

(Easiest way to reproduce is browsing in private/guest mode)

1
  • 5
    This types of bug must be tested before push the update to live site. Specially from big companies like StackOverflow Jun 20, 2018 at 8:23
10

The ability to have "Disable top bar stickiness" unchecked and "Hide left navigation" checked is a wonderful feature. It keeps things similar to the way they are now.

With all the space freed up we have room to bring back the Rep to the top bar's avatar. This currently doesn't work for mobile devices with a high pixel density. On my Galaxy S9 with a reported resolution of 2768x1440, I see this in Firefox Mobile:

Screenshot of Firefox


A possible workaround for large tablets - probably not desirable for a mobile phone:

  • Go to Settings and set your Font size to huge.

  • Go to "Developer Options", or use the 'Search Bar' and type "minimum".

  • Set the "Minimum Width" to 980.

The result on a mobile phone is difficult to use; but the StackExchange site shows your Avatar, Reputation, and Badges (the same as a few months ago).

On a large tablet it might be OK (untested) but on a phone the keyboard is especially tiny (could probably adjust that in the APP) and other APPs may appear different.

The phone's UI doesn't expect this and things are tiny with incorrect spacing. Many things don't look very good, I set it back the way it was and will simply visit my SE Profile if I'm curious while we wait for this to be fixed. Probably not useful on a phone, someone whom is eagle eyed might prefer this.

I thought I'd mention this in case it helps someone.

Here's a screenshot of what it looks like, and the Setting screens:

Funky Fix

12
  • Reputation and badges are already visible next to the avatar in the top bar if the resolution is high enough. It disappears when your browser window is 980px wide or smaller.
    – TylerH
    Jun 6, 2018 at 17:32
  • 2
    Incorrect. It disappears on my 2960x1440 screen, it was visible on my screen a few months ago.
    – Rob
    Jun 6, 2018 at 19:43
  • 1
    I'm unable to reproduce that - on Firefox 60 in Windows it shows up just fine at 2960x1440 i.stack.imgur.com/FzlGN.png What browser are you using and are you sure you do not have any other userscripts? Can you provide a screenshot at that resolution with the reputation missing?
    – TylerH
    Jun 6, 2018 at 19:47
  • Using Android. I don't see it and had three UpVotes a minute ago ... Here are two browsers I've tested: Google Chrome: 67.0.3396.68, Firefox: 61.0b11 - adding cropped screenshot of the upper right to the answer.
    – Rob
    Jun 6, 2018 at 21:32
  • 1
    @Rob Using Android? What device are you using? A tablet of some kind? It's likely a poorly-formed media query detecting device type rather than screen-size. Based on that screenshot it looks like you are on a device with like, 400px, not 2960px, so it could be a problem between actual pixels and device pixels.
    – TylerH
    Jun 7, 2018 at 13:31
  • 1
    The CSS there appears to be from primary.css: @screen and (max-width: 980px) { .top-bar .my-profile .-rep { display: none; } } so your device is apparently reporting that it is 980px wide or less.
    – TylerH
    Jun 7, 2018 at 13:37
  • @TylerH - I have a Samsung Galaxy S9+ running Oreo. This webpage: web.basemark.com reports my screen size as: 1440x2768 -- many (I've been looking for a couple of hours) other websites, such as BrowserSpy, incorrectly report my screen size as: Width 360, Height 692, AvailHeight 692, AvailWidth 360 . (or other ridiculously small numbers) -- I'm attempting to locate a webpage with a 'Test Button' and code that just works and reports the correct value. The value at basemark is close enough but not exact.I'll report back later today with something?
    – Rob
    Jun 7, 2018 at 18:45
  • 1
    @Rob Yeah, the S9 goes up to 1440px wide and is supposed to be at least 1080px wide out of the box, so unless you have manually set your resolution to something lower, my guess is we are running into an issue where a pixel is not a pixel. See also (stackoverflow.com/questions/41863545/…).
    – TylerH
    Jun 7, 2018 at 21:11
  • 1
    See also vizdevices.yesviz.com/article.php - looks like your web browser viewport is effectively 740 "real" pixels as far as the media queries are designed. vizdevices.yesviz.com/devices/s9
    – TylerH
    Jun 7, 2018 at 21:11
  • 2
    @TylerH - Great links. The website: vizdevices.yesviz.com/mydevice.php reports: My Device - width (Visible Area) 360px, height (Visible Area) 668px, device-width (Viewport) 360px, device-height (Viewport) 692px, device-pixel-ratio 4, device-resolution-width 1440px, device-resolution-height 2768px - the last 2 values would be OK. The second link lists: Resolution 1440x2960 PX, Viewport Size 360x740 PX. XY Problem. Thanks for looking into this. PS: YouTube is another site that's 1440 for me.
    – Rob
    Jun 7, 2018 at 22:51
  • @TylerH - A minute ago this was partially fixed on Meta.SE, but now it's back to not fixed. I guess someone is testing. It only showed the Rep and not the badges.
    – Rob
    Jul 20, 2018 at 5:10
  • Another report (fixed) of screen size causing a problem with the rendering of the webpages.
    – Rob
    Aug 3, 2018 at 2:17
10

Now that this is live, and I can't turn it off, I'll repeat my earlier disappointments. The left nav bar takes up entirely too much real estate for mostly useless links. I thought hiding the bar would help things, and now that it's live, I can see some problems with the approach.

Most of the left nav links are infrequently used. The "Questions" link, however, is probably my MOST frequently used link, and making that a two step process is really annoying.

Also, the "opt-out" for hiding the menu, and turning it into a hamburger, is sort of a secret. How is a new user supposed to know about this?? Even if a new user figures it out, the links that live under the hamburger are a mystery!! There isn't even a drop down on mouseover that would give someone not in on how the page works a clue about what's under there. A user should not have to know how a web site works to figure out how to use it.

So, where does that leave us?? I feel like I'm working with a UI that's significantly less functional than that UI I used to have. I'm not a web person, so I can't even pretend to understand (or, frankly, care) why the change was necessary.

The amazing thing is that just about all of the flaws were pointed out after about two minutes of beta!! This stuff should have been dealt with, instead of simply badly patched. It demonstrates not just a difference of opinions, but poor process.

As a last note, I'll add that this is SE, and the people here have a reputation of knowing what they're doing. I can't help but feel that a backward step like this hurts the brand.

9

Due to Teams/Channels the left sidebar menu on Stack Overflow is already a little different from the rest of the sites (with Meta Stack Exchange currently being the only available example). But a significant difference that sticks out is that SO doesn't seem to have an "Unanswered" menu item, while MSE does:

enter image description here

This seems unrelated to Teams/Channels and thus seems to be an inconsistency in a UI overhaul that strives to largely unify the experience on the various SE sites.

1
  • 2
    This inconsistency was already in the design. We have plans to make it consistent, but it is dependent on changes we are working on around filters/sorts for question lists. Coming soon. ;)
    – Joe Friend
    Jun 12, 2018 at 19:06
9

The left pane adds very little to the functionality of the site, but it takes away much.

  • SO design thus far has had a airy, open design. This left nav (especially the border line running through the page top to bottom) makes for a claustrophobic feel, and content feels quite boxed in.
  • The Nav links were far functional at the top of the page. The teams could have very well been placed up there in the top nav as a dropdown.
  • Symmetry has taken a hit with the left panel being much different than the right panel

enter image description here

Two questions with regard to the Teams menu:

  1. Do you expect that users will have a long list of teams?
  2. Does a user keep looking at the list of teams always even though only one is maybe selected right now?
3
  • 2
    This made me think that teams should have been in the SE community menu. Jun 13, 2018 at 14:37
  • 1
    Not sure what is "taken away". Also, there are plans to add more functionality to the left sidebar such as saved searches or moving favorite tags. Right now it's not "finalized" so consider seeing the info posted here that talks about future plans for the left sidebar.
    – Catija
    Jun 13, 2018 at 19:36
  • 1st and 3rd points say what is taken away. The left border makes it boxy and restricted. Symmetry is gone because of the left border. And, atleast on the home page, there is no spacing on the left between the questions and the left nav. Also, the left nav is so thin... its gonna get horizontal scroll or ellipsis for some items for sure.
    – Teddy
    Jun 14, 2018 at 5:54
9

Minor styling bug that I don't think anyone mentioned:

enter image description here

This was taken at 1000px x 676px. On question pages that have the "x questions" text, the row of buttons overlaps the featured box if the window is nearly at the point where the responsive style switches, but not quite there.

9

On mobile, username and picture of editors shown before authors, making it easy to assume wrong author if you don't look closely.

Example:

screenshopt


If you just skim and don't carefully look for "edited" or "answered", it's easy to assume that the first person listed is the one primarily associated with the answer. This should probably go the other way around.

I keep making this mistake both on questions and answers. I think this is a significant usability problem. We already have some confusion over this with new users mistaking the editor for the author — now we're going to have that for everyone.

Simply swapping the two would be a big help, but I think it should go even further — maybe don't show the user pic for the editor, or make it smaller somehow.

1
  • 3
    Update: I've not grown used to it. I am still fooled constantly. Arghhhhghh!
    – mattdm
    Sep 14, 2018 at 1:19
9

Late to the party but now as the theme went live on my favorite site (Ask Ubuntu) there are issues beyond of what I feared.

Often I have to work on small screens (office computer, netbook) where not much space for content is left if we deduce all windows decorations, top bars, bottom bars, side bars, and whatnot from the visible are:

enter image description here

This was already an issue with the old design but it sadly could not be improved with the new theme. The left side menu is a great thing. I like it a lot but it needs to hold many more items than now. Much of the top bar items could reside there.

So here are my suggestions for great improvements that could be achieved with only very little changes to the overall site design:

  • Move the broad top bar with the site logo to the side menu to keep it sticky so that we still know on which site we are when scrolling down through questions.

  • Leave Beta on the non-sticky colored top bar which would move away on scrolling to have the site logo small enough to fit the side menu.

  • Newest, Featured, Frequent... go to a submenu on the "Questions" side menu entry. Even a dropdown could be considered there.

  • The Ask Question button moves to the side menu where it would be sticky too. A good place appears to be e.g. directly under the site logo. By this the Ask button is accessible from everywhere.

  • The question count goes to the title where All needs to be replaced by the display options we chose (e.g. Active, Newest, Unanswered)

To illustrate all this better here are screenshots from only few changes needed to the source:

enter image description here
Landing Page for Active Questions display

enter image description here
Same page scrolled down

An additional minor improvement was moving the search field a bit to the right to better align with the left side menu.

7

The "Ask Question" button now has a red border, red text and changes its background color to red when hovered over.

I find this a little irritating because I associate red buttons with actions I should be thinking over twice before executing them because they may have dangerous effects (which asking a question is not, in my opinion).

Is this on purpose so users think twice before they click this button? Or is there an other reason for the color change? I somehow liked the old black better and would like to know the reason for the change.

3
  • 6
    "I find this a little irritating because I associate red buttons with actions I should be thinking over twice before executing them" that's a good thing. If you just run around asking every question you come up with without doing proper research or providing proper information, etc, you can find yourself question banned rather quickly. Asking a question should be the last resort.
    – Kevin B
    Jun 6, 2018 at 19:14
  • 1
  • 2
    On a site that calls itself a question and answers site, asking questions is apparently enough of a problem that you need to think twice before doing so ... and this is apparently a good thing. Wow!
    – Masked Man
    Jun 17, 2018 at 8:21
7

Cross-posted from Arqade's theming rollout upon request:


Is the old mobile site slated to be replaced by the responsive design any time soon? Because there are a couple of things I noticed when switching from old mobile to the full responsive site that are concerning

1. There's too much going on in the top bar.

May just be a symptom of having mod tools, but there is no free space on the bar, no clear separation of areas. Could we maybe drop or combine some functionality here at mobile widths? For example:

  • Drop or combine the SE logo content box into the site switcher or left-nav dropdown, and/or
  • Combine the diamond and the blue flag notification, and/or
  • Combine everything into Left nav except search, main (red) notifications and the site switcher

Top bar


2. The tag page 'Learn More' etc links get squished:

Can this wrap to another line instead?

Tag Page on mobile


3. The question title text is too big on long questions

Potentially reduce the font size at mobile widths?

Long Question title

7

Measure for measure, we’re much too long

SUMMARY

We’re in flagrant violation of Bringhurst rule 2.1.2: Choose a comfortable measure.

ʀᴇʟᴀᴛᴇᴅ: Static, unchanging font size, leading, and measure incompatible with dynamics of responsive design


The desktop line measure is still much, much too long
for comfortable reading of continuous text in a variable-width
font. This is wrong on both serifed and sans sites alike.
We’re using lines 100 characters long, which is completely
unreadable except maybe in a fixed-width face.

        (And again, without manual correction.)

The desktop line measure is still much, much too long for comfortable reading of continuous text in a variable-width font. This is wrong on both serifed and sans sites alike. We’re using lines 100 characters long, which is completely unreadable except maybe in a fixed-width face.

        (And again, in constant-width.)

The desktop line measure is still much, much too long for comfortable reading of continuous text in a
variable-width font. This is wrong on both serifed and sans sites alike. We’re using lines 100 characters long,
which is completely unreadable except maybe in a fixed-width face.

Or for those of you who aren’t on the desktop site, that’s:

image of foregoing text for those stuck on a cell phonelet

Demonstrations of Badness

This demo from Monica’s answer here is a good example of
what happens with a bad measure:

Example 1 of way-too-long lines

example of overly long lines

Example 2 of way-too-long lines

This is no better on those rare sites with a bit
of serifed text, as demonstrated by this ELU answer:

Sven Yargs’ answer about "programing"

Thus Spake Bringhurst

In The Elements of Typographic Style, Robert Bringhurst writes:

2.1.2 Choose a comfortable measure.

Anything from 45 to 75 characters is widely regarded as a satis-
factory length of line for a single-column page set in a serifed
text face in a text size. The 66-character line (counting both
letters and spaces) is widely regarded as ideal. For multiple-
column work, a better average is 40 to 50 characters.
      If the type is well set and printed, lines of 85 or 90 charac-
ters will pose no problem in discontinuous tests, such as bibli-
ographies, or with generous leading, in footnotes. But even
with generous leading, a line that averages more than 76 or 80
characters is likely to be too long for continuous reading.

Or with serifs:

repeat of Bringhurst in a serif face

(Or course, you shouldn’t use hyphenation with a ragged margin,
but I’m trying to reproduce the book, which has a justified
right margin and thus some hyphenatinon.)

Demonstration of Goodness

For example, the New York Times uses a 66-character line:

plum-tart recipe description from the New York Times, 2018-09-01

Credit: “A Plum Tart That Keeps Its Charms Hidden”, Melissa Clark’s
regular “A Good Appetite” column from the August 31, 2018
print edition of The New York Times.

Let’s stop being so irresponsive

Notice how much easier the Times’ text is to read compared
with Monica’s or Sven’s? This is because we haven’t sized
the measure correctly. In other words, this is irresponsive
design, not the responsive design it’s purported to be.

The Times sets the font size and the measure in a way
that makes it easy to read no matter the viewport.

We don’t. We should.

5
  • One problem -- line length in characters is not constant even for the same viewport size, because some people zoom in or out. Part of why I find the right column too aggressive on my tablet is that, in fact, it makes the lines too short for the Q&A part, because I have to use some font zoom to be able to read comfortably at all. One size does not fit all, and one failure of responsive design is that it doesn't (and can't?) take client-side size settings into account. Sep 2, 2018 at 17:58
  • @MonicaCellio I know exactly what you mean. For whatever reason (meaning, I don't understand it), very few sites manage to use a reasonable size for running text. I feel like the Times is one of the few sites you aren't expected to zoom any longer to read. Certainly all the SE sites are horrible about this. I feel like something has changed since it was all set up, but I don't know what.
    – tchrist
    Sep 2, 2018 at 18:03
  • 3
    I currently use a combination of browser zoom (which is whole-page zoom, which means horizontal scrolling at some point) and a user style to change the font sizes in the places that matter most. It's a pain. It seems like responsive design would simplify that -- zoom would be enough and I could drop the style -- except that the right column is really aggressive in viewports that are sized for (my) comfortable reading (or hardware max, in the case of my tablets). Sep 2, 2018 at 18:06
  • 3
    I think 75 characters could be a good width for SE. But I wouldn't want images to have to be less wide than they are now. Not sure how those two could work together. Sep 2, 2018 at 22:04
  • Since you're using my post as an example, let me show you what I see. Looks to me like you need to adjust your font settings. :-) And this demonstrates my point that you cannot successfully hard-wire a pixel width to get a desired character count. Oct 15, 2018 at 15:36
6

When I hover over the other menu items there's a hover effect, making the background gray

showing hover in site selection

edit In the new menu there's only a very slight font color change, that I had to change my monitor settings for to be able to visually notice.

enter image description here

Could a hover effect be added?

Note, this is in the hamburger menu view.

Please make the hover effect consistent with the other hamburger menus by adding a background color change on hover.

4
  • I actually do have a hover effect, although it is very slight. The text of the hovered item goes bold.- imgur.com/DXHIiIP
    – GPPK
    Jun 6, 2018 at 10:13
  • 2
    @GPPK The text doesn't go bold. It changes color. To be exact, it goes from #535a60 to #0C0D0E, which is a very subtle change.
    – Erik A
    Jun 6, 2018 at 10:48
  • 1
    well on my monitor I don't even see that color change. Be consistent with the other menu's and add a colored background. Or remove the colored background with the other menus. Inconsistent behavior is messy. Jun 6, 2018 at 10:56
  • Fiddled a bit with the monitor settings, now I can see it however so slight. Jun 6, 2018 at 10:57
6

There's a lot of whitespace in the top part of the page. I first noticed this on MSO, and filed a bug there, and was prompted to check out this thread by André Kool's comment there.

Not sure what's the proper etiquette here, so I'm just linking to my original post instead of re-posting here.

6

The "unanswered" page of any tag, e.g. c#, doesn't contain the tag definition part.

Newest c# https://stackoverflow.com/questions/tagged/c%23?sort=newest&pageSize=50

Unanswered c# https://stackoverflow.com/unanswered/tagged/c%23

The tab changes from

info | newest | featured | frequent | votes | active | unanswered

to

(all Questions) | my tags | newest | votes | no answers | all questions

  • Why twice the "all questions"?
  • Why are "featured", "frequent" and "active" gone?
  • Why is only on unanswered the "my tags" visible?
  • Why did "unanswered" get renamed to "no answers"?

The number of questions isn't displayed consistently:

Newest (without tag)

Unanswered (without tag)

Newest c#

Unanswered c#

Why does https://stackoverflow.com/questions?sort=newest (and all other tabs, besides "unanswered") have two ways to go to "unanswered" the item in the tab and the separate button "Answer questions"?

Because of this (I assume) there is also a rather unpleasant jump when switching around the tabs since the "unanswered" page doesn't have that button.

4
  • 1
    The state of the "unanswered" pages is more or less a disaster and has been for a while. Thankfully, it's unrelated to the theming changes. :) Or at least it should be. The tag definition part is up in the search bar for some reason, but it's there.
    – Adam Lear StaffMod
    Jun 12, 2018 at 18:21
  • @AdamLear edited my "answer" - not sure what you mean with The tag definition part is up in the search bar for some reason, but it's there. - you mean invisible for the human eye? cant see it Jun 12, 2018 at 18:27
  • I mean this: i.stack.imgur.com/W07dN.png. It's not great. I agree we need to review the layout on those pages.
    – Adam Lear StaffMod
    Jun 12, 2018 at 21:22
  • @AdamLear - with tag definition I meant the following highlighted part i.stack.imgur.com/PLYEc.png - this whole part is missing on the unanswered page - the c# in the searchbox is visible on all pages (newest, featured and so on) - only the "tag definition" - C# (pronounced "C sharp") is a high level, ... is missing Jun 13, 2018 at 14:13
6

Is there some reason those links cannot simply be moved to the top, as in the case of other sites (such as Server Fault, in the below screenshot)?

Server Fault screenshot

Now about the Stack Overflow page:

Stack Overflow screenshot

Do you have any statistics on how many users actually use those links in the left bar? By "use", I mean spend a reasonable amount of time on the target page, and not "oops, misclicked that, go back".

  • If I had to take a guess, 99% users (and that's counting all users who access the site, not just users who log in) have no need to frequently visit "Tags", "Users", "Jobs".
  • 99.9% users have no use for the "Create Team" link since clicking on that leads to a paywall, which will almost always be followed by hitting the Back button (or equivalently, closing the tab/window).

You probably don't need to put that many links in the left bar to pages that aren't frequently accessed. Of course, you have access to statistical usage data that I don't, so I hope you have already taken that into account.

Also, there is absolutely no need for three links to Stack Overflow on the left bar. (Although one of those links leads to stackoverflow.com/questions, but that doesn't really make much difference.) You might consider fixing that as well.

Moreover, since those links are already found at the bottom of the page, the left bar is pretty much redundant. There's also a fourth link to Stack Overflow there for some reason.

7
  • Why downvote? What problem do you have with this?
    – Masked Man
    Jun 19, 2018 at 0:39
  • Another downvote! Can you please enlighten me why you need four links to StackOverflow on the StackOverflow page, and why you need so many rarely used links in the left nav bar? Also, why do you not want to move those links to the top as it is done for the other sites?
    – Masked Man
    Jun 19, 2018 at 3:44
  • 1
    Because as explained in the linked meta post, that won't work with teams.
    – Kevin B
    Jun 20, 2018 at 15:10
  • 1
    @KevinB So what about it? The majority of users don't need it.
    – Masked Man
    Jun 20, 2018 at 15:21
  • 2
    Doesn't really change the reasoning behind doing it.
    – Kevin B
    Jun 20, 2018 at 15:22
  • 1
    @KevinB So how does that "pay off technical debt"? Anyway, features which only 0.01% users need shouldn't feature so prominently in primary navigation. That is why I asked for statistical data to justify all those links in the left nav bar. If only 0.01% users use it, then that Teams is just noise and anyway it is already found at the bottom, so can be removed from left nav bar.
    – Masked Man
    Jun 20, 2018 at 15:27
  • 1
    I don't disagree, and they already have plans to fix that from what i've been told in chat, the "Teams" feature will be more "context-aware", which hopefully means it we'll get the left nav from meta rather than what we currently have on SO for users who don't use teams. They'll also be adding more features to the left menu.
    – Kevin B
    Jun 20, 2018 at 15:28
5

For me, when the left navigation bar is enabled, the content of the page is pushed off to the right, and a horizontal scrollbar appears. In other words, the width of the existing content to the right of the left navigation bar does not shrink in order to accommodate it.

I am using 64-bit Firefox 60.0.2 on Windows 10.

Without Left Navigation Bar With Left Navigation Bar-1 With Left Navigation Bar-2

3
  • 1
    Ah, Now I understand. Okay, so if you read the post above in detail you'll see that not all pages have been made responsive. We've done the 20% of the pages people access 80% of the time. Profiles is definitely on the list, but it need a major overhaul to make it responsive.
    – Joe Friend
    Jun 13, 2018 at 16:09
  • 1
    Cheers! Trust me to routinely use something most people don't. ;) I use my network profile as a "dashboard" from which to open up the various sites I follow . . . Jun 13, 2018 at 16:15
  • I actually think that is fairly common. We just haven't gotten around to those pages yet. As you probably well know, they are quite complex.
    – Joe Friend
    Jun 13, 2018 at 16:19
5

One more request about the tag questions page: can we have an option to collapse the tag excerpt and related links? I know the tag excerpt by heart now, I don't need to have it occupy 25% of the screen height.

Tag questions page

5

So, finally the Badges tab have been dropped? I earlier discussed Why do "Badges" have their own tab in the navigation?; now I don't find the tab for Badges in new navigation. Is it dropped due to redundancy or any other spacing issue or will be added later

enter image description here

1
  • 3
    The badges link is in the achievements dropdown.
    – Catija
    Jun 17, 2018 at 3:17
4

When you disable the left navigation menu, you see a menu icon at the left of the top bar. That icon has a right border that doesn't fit with the other elements in the top bar.

Could that border be removed?

With border:

With border

An example without border:

Without border

3
  • That's an extremely minor change. Is there a reason you particular want that?
    – Clonkex
    Jun 13, 2018 at 4:00
  • 1
    @Clonkex Because every time I open StackOverflow I can't help but focus on it, I find it distracting.
    – Pablo
    Jun 13, 2018 at 7:27
  • It has a border and it also does not align with page contents.
    – Reactgular
    Jun 14, 2018 at 21:03
4

Transformative left-nav

It would be transformative for regular users if the left-nav gave users customisation options such as by adding their own links etc., e.g. for meta, favourite chat rooms, the ability to pin questions by dragging them to there, the things they use most. Then it would become a joy to use.

Failing that it's at least be better the user has the ability to hide it, as it fills a lot of prime real estate with empty white space. But it should be clear on it, that it is, by some pin or x in the corner, rather than hidden elsewhere.

4

User's flags view on mobile stretches out too much

Which is probably related to responsive mobile still being worked on, but just in case.

Chrome 69.0.3497.100 from Google Play, phone running Android 5.1.

flags view stretches out

2
  • 1
    Thanks! We still have a lot of work to do, particularly when it comes to moderation pages like this.
    – Catija
    Oct 23, 2018 at 15:58
  • This isn't a mobile problem per se. It's a problem you'll see anywhere if your window is narrower than a certain amount. I'm seeing this on desktop.
    – Laurel
    Dec 9, 2018 at 20:05

You must log in to answer this question.

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