410

The redesign of this page is currently being discussed on Meta Stack Exchange. If you have a bug report about the design, post it as an answer there.


The SO profile page seems to have been updated within the past 24 hours with a new layout that conveys less information:

Before and after, side-by-side:

enter image description here

The "All actions" page also has a much-reduced information density: when I want to see my most recent comments it now takes 2-3 whole pages instead of the single condensed view we had before.

How is this an improvement?

62
  • 36
    This is currently being discussed here: New responsive Activity page. Commented Dec 8, 2021 at 0:44
  • 160
    The company appears to be trying to make it as hard as possible for moderators to do their job. I am not sure exactly what the motivation is for this.
    – Cody Gray Mod
    Commented Dec 8, 2021 at 0:51
  • 90
    the new design is ugly and can not be viewed at a single glance, instead you have to scroll up and down. can you please make such design changes so that the people can choose
    – nbk
    Commented Dec 8, 2021 at 0:52
  • 82
    The more I look at the new activity page, the less I like it. This is not good...
    – Dharman Mod
    Commented Dec 8, 2021 at 1:13
  • 38
    @nbk: I don't think it's ugly, but I certainly don't find it useful. To me, this is a critique of the functionality far more than the aesthetics. The dramatic reduction of information density makes this more difficult to the use cases I typically go to a profile for. Commented Dec 8, 2021 at 1:51
  • 42
    The reputation page is by far, the worst.
    – user17242583
    Commented Dec 8, 2021 at 4:31
  • 59
    Good grief. The new page is indeed a gigantic disimprovement. Commented Dec 8, 2021 at 4:47
  • 49
    The new layout is something I'd more expect on a phone. They call it the "new responsive activity page" but I don't think responsive design is supposed to mean "show mobile layout in all breakpoints."
    – tdy
    Commented Dec 8, 2021 at 7:42
  • 16
    "To improve is to change; to be perfect is to change often." Can we change back?
    – berend
    Commented Dec 8, 2021 at 8:44
  • 38
    It's really bad; why fix something that isn't broken?!
    – Paolo
    Commented Dec 8, 2021 at 9:22
  • 20
    Is this some kind of a half-done change? The Questions and Answers lists in the new page are in a hugely larger font, while at the same time, the side menu and the "Member for ..." etc. info under the username are in the same smaller font that was used in the old page. I'm not sure why such a huge font should need to be used (as I'm viewing on a laptop screen), it seems to make the biggest difference wrt. the suckier information density. And if it would be made smaller, you could put the Questions and Answers lists side-by-side...
    – ilkkachu
    Commented Dec 8, 2021 at 11:11
  • 45
    I genuinely thought I had inadvertently zoomed in my browser and was viewing the site in mobile mode. This is so confusing.
    – Maëlan
    Commented Dec 8, 2021 at 12:17
  • 16
    I now almost get the amount of information on my 27" QHD monitor as I do on my phone. Besides reduced functionality, the implementation is so bad it looks like my browser ran into errors while trying to load.
    – Matt M
    Commented Dec 8, 2021 at 15:39
  • 21
    @TheDIMMReaper it is objectively worse from the perspective of information density. It is objectively better if your objective for visiting the activity page is to look at the vastly enlarged profile image.
    – l4mpi
    Commented Dec 8, 2021 at 16:37
  • 10
    This new design feels like I'm using a cardboard baby book as opposed to a paper chapter book. I'm not a baby, nor am I using a cell phone, and for those who are vision-impaired, I've never heard of a browser that didn't have zooming and/or large text, etc. This feels cumbersome on my 15-inch screen, and there are quite a few people in the comments here who have much bigger screens than that. Commented Dec 8, 2021 at 21:35

6 Answers 6

213

Why? So they can maintain one layout that "scales" along with your device and make designers happy.

What people implementing "responsive web design" consistently seem to forget, is that not every site is a blog or a company information site, where the visitor wants to read one thing (like the company's address or a single blog post), have that on their screen immediately (barring a "hero image" requiring the visitor to scroll down an entire page to get the blog title in view), read it and then navigate away.

Stack Overflow is a web application, not merely an online portfolio. And my desktop computer screen is not a frigging tablet. I am not touching my screen with fingertips covering 5% or more of it, holding a six-ish inch display two feet from my face.

My monitor is a massive 24, 27 or 32 inch surface suspended right in front of my face, and I use a mouse cursor the size of a few pixels to navigate. I do not need buttons or clickable surfaces that are larger than the banana lying below my monitor. I can perfectly read letters that are 10-12px large. 15 is on the high side.

I've said it before on Spotify's forum. Spotify has unified their web, mobile and desktop apps into one, hoisting the same layout system (and changing the CSS classes with each release, the bastards, so Spicetify keeps breaking as well), angering more and more users:

Please, please, please stop this "responsive design" madness that has inhabited the web and now is creeping onto the desktop thanks to Electron, PWA, SPA, and whatnot. I have literally millions of pixels to spare on my 2560x1440 monitor, the Spotify Desktop app on Windows taking up half of that, a what do I get on my home screen?

TWELVE (12) tiles with shortened titles and ellipsised descriptions, because, well, responsive and margins and stuff.

This is a 27 inch monitor (not Patrick) that's capable of displaying a full page or over a hundred of lines of very readable text in my word processor, IDE and browser. This is a computer monitor, not a tablet or smartphone. This "responsive" scaling fad is unintuitive and ridiculous and needs to go away, fast.

I do not know a single person that likes this ten foot user interface design for the desktop web, nor do I know a single person that likes to get RSI because they have to scroll up and down all day to read information that used to perfectly fit on one page.

If you're a designer and you do, ask another person.

Update 2022-05-13: I hardly ever log in anymore, but when I did, I got surprised with this view:

Wide screen, small contents

There's no readable or actionable content in the entire center of the screen, which also appears to have been narrowed even more than before. Still not a fan.

19
  • 72
    And for the rare cases when I do view something like SO in my phone, I'm perfectly capable of zooming it at the part I'm interested in. Never bothered me much. What would bother me a lot is to use SO as intended from a phone, because typing a lot of text let alone source code on phones is a pain in the neck.
    – Lundin
    Commented Dec 8, 2021 at 13:33
  • 8
    @Lundin I do check SO on my phone a lot, especially when commuting on public transport or from the bathroom (you're an addict or you aren't, right). It works fine to vote and comment. But yeah zooming is better than scrolling.
    – CodeCaster
    Commented Dec 8, 2021 at 13:36
  • 15
    Yeah but at least I would never type out a reasonably detailed question or answer with tested code examples etc on a phone. So the most important target system for the site ought to be desktop PC environments.
    – Lundin
    Commented Dec 8, 2021 at 13:38
  • 36
    @Lundin given 10 millions visits a day one can reliably argue that most important target system for the site are folks searching and reading answers to their questions on the job. And it looks natural to expect them doing this from desktops and laptops with screen sizes 14'' to 40'', with physical keyboards and traditional pointing devices. As for recent changes, they maybe optimise for a new audience of few tens thousands homework cheaters dumping their tasks from their phones on a way to a college where they have to pass a completed assignment to the teacher
    – gnat
    Commented Dec 8, 2021 at 14:45
  • 8
    I wonder how much of that design is actually "responsive". I have a relative with heavy physical disability, and having to scroll vertically much more than before is... very tiresome.
    – Clockwork
    Commented Dec 8, 2021 at 15:51
  • 8
    The only thing broken about Stack Overflow design are the popups for editing duplicates that are shown off screen on mobile. The rest was easily accessible on Mobile, even more using the old layout than the current one.
    – Dharman Mod
    Commented Dec 8, 2021 at 16:07
  • 3
    It is also showing incorrect information - i.e. if I check the Answers in Summary, the reputation points are wrong.
    – akrun
    Commented Dec 8, 2021 at 18:17
  • 7
    @akrun I was confused by that too. In the answer summary it now shows the number of votes of the question on which you posted an answer and not the points of your actual answer. Only when you go to "view all ... answers" do you actually see the vote counts for your answers, which is clearly very unintuitive.
    – bas
    Commented Dec 8, 2021 at 19:45
  • 3
    @BasvanderLinden Yes, after going through it multiple times, I also felt like that. Anyway, it is not a user-friendly design. Summary page in essence should give a snapshot, instead it is becoming very difficult to understand what is going on.
    – akrun
    Commented Dec 8, 2021 at 19:49
  • 9
    Honestly I would just put your entire answer in a <h1> tag. Commented Dec 9, 2021 at 7:52
  • 23
    Agree. But isn't Responsive Web Design supposed to be about adapting the layout of the site to the browser's size? An early example was the Boston Globe which, around a decade ago, rewrote its web site to dynamically change format to one, two or three columns based on browser dimensions. The new Profile page seems to be the opposite of responsive -- its layout is fixed and doesn't respond to browser window size.
    – dbc
    Commented Dec 9, 2021 at 15:29
  • 2
    @dbc Parts of this design actually do respond to window size changes. Recent changes have turned some sections in the Summary into a two-column layout, which turns into a one-column layout when the width decreases. Other than that, you’re right, and this has also been mentioned in this comment (and probably several other places), to which I replied: “[This] is why most of us don’t consider this redesign to be responsive , but mobile-only .”. Commented Dec 9, 2021 at 15:39
  • 12
    I agree, there is a difference between responsive and mobile first. This appears to be the later.
    – Liam
    Commented Dec 9, 2021 at 16:29
  • 5
    @dbc Yes, 100%. What we have here is a failure to accommodate. Responsive design isn't always, in practice, one design to rule them all. Whoever they have designing is being driven by the wrong principles and obviously isn't a regular use of the pages they're redesigning on their PC (which, as this answer points out, has to be the most popular use case for SO, at any rate). /le sigh
    – ruffin
    Commented Dec 9, 2021 at 20:33
  • 2
    "Responsive"...? It can't be displayed at all on my Tamagotchi.
    – Mentalist
    Commented Dec 10, 2021 at 1:29
71

Here's my SO profile page. I don't use SO much (I'm mostly on Ask Ubuntu), so it's pretty empty. And tons of unused space. Wow. For reference, I'm using Microsoft Edge, default 100% scaling, on a 4k 27" display.

enter image description here

I've gone ahead and colored any unused space red. So... that's most of the page. Sorry Stack Exchange, but that's a big waste of space. enter image description here

But, I have some ideas...

  • Make the GitHub icon and my location on the same line as how long I've been a member and that. It doesn't need a separate line considering there is extra space above.
  • Make my reputation box smaller. It doesn't need to be that big. At all.
  • Make Edit profile and Profile in line with my username. They don't need a separate line
  • Make the Answers, Questions, and Tags boxes way smaller. They have a box that is way oversized considering how much text is in it.
  • Make information horizontal too (maybe?). Supporting wide displays would be nice.
18
  • 110
    Have you considered using a mobile device instead?
    – Kevin B
    Commented Dec 8, 2021 at 20:17
  • 9
    So what do you propose should be shown in the red areas? I think the way empty profiles look is the least of concerns.
    – idmean
    Commented Dec 8, 2021 at 21:11
  • 32
    My god, @KevinB ! I think you just made sarcasm work on the Internet. Uh... That was sarcasm, right? Commented Dec 8, 2021 at 21:36
  • 7
    On the one hand, I get your point. On the other, your example is pretty far from typical. Most desktop users aren't running 4K, most have actual content associated with their accounts, most have smaller than 27" monitors, etc. I agree, just think a more realistic example would be a stronger point.
    – TylerH
    Commented Dec 8, 2021 at 21:57
  • 3
    @idmean How about keep this new layout for mobile, and go back to the old one for non-mobile devices (laptops, desktops, etc.)
    – cocomac
    Commented Dec 9, 2021 at 1:23
  • 3
    We need to take the core audience into account here, SO is about code and code related issues... If you're posting, answering or moderating on SO and you don't own at least 1 x 27" screen, um... I'd safely assume you're in the minority Commented Dec 9, 2021 at 5:59
  • 8
    @ChrisSchaller Sure, a lot of devs have a nice big screen. But sometimes, especially when I'm on-the-go, I'll write code on a laptop, which is usually either 13" or 15", so I think a good responsive design should look great on all platforms: all the way from a mobile phone to a big ultrawide. That's kind of the entire point of responsive design. It's, well... responsive to it's platform. But this new design looks good on mobile, but not desktop, which is bad.
    – cocomac
    Commented Dec 9, 2021 at 6:10
  • 10
    @cocomac that's it I guess, I'm on board with the concept of a responsive design, but not responsive that means I get the same content that fits on a mobile to spread out or zoom on my desktop, which is what everyone seems to be doing, what I want is a layout that uses responsive techniques to hide or present content depending on the size of the screen, so collapse detailed areas into accordions or tabs for small screens. SO used to be a leader, now its becoming just another follower Commented Dec 9, 2021 at 6:17
  • 3
    @ChrisSchaller I have yet to see a 27" screen in a company setting... Maybe on my new job next month. I don't say they don't exist but I'll argue that 27" is not the mayority. Having 2 24" though is what I see more often.
    – Kami Kaze
    Commented Dec 9, 2021 at 8:22
  • 4
    @KevinB "Is this an out of season April fools joke?" - youtube.com/watch?v=MzKlmNLTkXM Commented Dec 9, 2021 at 9:48
  • 4
    Clearly the "solution" is the just use Stack Overflow on your Portrait orientated screen. Oh wait, that's really not any better...
    – Thom A
    Commented Dec 9, 2021 at 14:05
  • 3
    @AndrasDeak Atrociously spacious, but that's not a monitor thing, that's a gigantic margins thing; I don't think it even looks good on mobile.
    – zcoop98
    Commented Dec 9, 2021 at 21:33
  • 9
    This redesign is such a good case study of what not to do, that I'm actually learning a lot from reading the critiques. Thanks, SO design team!
    – Mentalist
    Commented Dec 10, 2021 at 1:22
  • 3
    The whole point of responsive design is to be responsive to the resolution the content is being viewed at. This design only works for 1080p, at larger resolutions it wastes space, ergo it is not responsive.
    – Ian Kemp
    Commented Dec 10, 2021 at 13:50
  • 4
    @IanKemp I've got a 1080p laptop screen, and half the page width is empty. I think this is completely off for anything with a landscape aspect ratio. Commented Dec 10, 2021 at 17:51
32

2015 was the "good old days" for the entire industry.

I interpret this particular case of bad UX as a symptom of an industry-wide problem. There are certain design principles that I would hesitate to say were ever widely followed. But ca. 2015, they were followed often enough for companies that do follow them to emerge as market leaders for nearly every category of site, app, or service. Examples of the kinds of principles I'm talking about include things like:

  • minimize the number of clicks required to perform an action
  • icons are more recognizable if they have a distinctive outline

Between 2015 and 2020, these kinds of principles went completely out the window industry wide, very noticeably for anyone who was aware of them and appreciated them. They were even abandoned in specific products that used to follow them. For example, making icon outlines distinctive used to be part of Google's excellent, well-researched UI guidelines for Android. Those guidelines were revised ca. 2018, and it's now actually prohibited to publish a new app with an icon that isn't round or square.

I attribute it to a dilution and/or discontinuity of talent. By dilution, I mean that demand has driven a massive influx of "new blood", so the industry is disproportionately inexperienced. By discontinuity, I mean that the industry grew so quickly that a significant number of developers who are now in mid-level or senior positions have never worked with a single person who was in the industry before the boom.

11
  • 12
    I would rather say this is what happens with any mature software product. A company makes some awesome program like Excel or Acrobat Reader. Then they keep improving it for as long as it needs improving, maybe 5-10 years or so. The product is even better, probably as good as it gets. But then the devs need something to keep them busy with. It starts with various peripheral features of diverse usefulness. Then over time it escalates into completely superfluous features or features that makes the product worse.The result: sw like Excel or Acrobat Reader is actually worse today than 10 years ago.
    – Lundin
    Commented Dec 10, 2021 at 7:26
  • 12
    One of my favourite quotes: Normal people believe that if it ain't broke, don't fix it. Engineers believe that if it ain't broke, it doesn't have enough features yet. - Scott Adams
    – Lundin
    Commented Dec 10, 2021 at 7:26
  • 7
    The opposite of minimizing the number of clicks is another design principle -- not presenting too much information at once -- a principle that the industry has failed to understand does not apply to frequently visited websites. A sensible hierarchy of information needs to be created. For sites that a user may only visit once or twice that means presenting only the most useful information up front... Commented Dec 10, 2021 at 8:12
  • 6
    ...But for frequently visited websites/applications such as SO, you want to optimize for making information readily available. We will subconsciously memorize how everything on the screen is laid out, and so being presented with lots of information up front no longer becomes a problem. Having to navigate through additional menus or do lots of scrolling is a problem. And you can't tell me that there are developers out there only using SO once or twice. Commented Dec 10, 2021 at 8:12
  • 7
    @Lundin "But then the devs need something to keep them busy with." Do you actually work in the software industry? Because developers aren't the ones who get to decide on new features, it is businesspeople who have that control. The problems start when a new businessperson hire comes in and decides to make their mark by agitating for change. That's how these completely unnecessary UI redesigns happen - not because of developers.
    – Ian Kemp
    Commented Dec 10, 2021 at 10:28
  • 2
    @IanKemp I would say that who makes the call to change things and how flexible they are to feedback from their hired devs depends a lot on national business culture. American companies for example are traditionally very much "top-down", allowing a single bad manager to ruin business by making a single bad call (or by prioritizing short term profits), typically investing tons of prestige into the decision and refusing to listen to criticism by those assigned to carry out the feature. But in my experience this manager might as well be the technical lead as some "businessperson", as you put it.
    – Lundin
    Commented Dec 10, 2021 at 10:37
  • @Lundin Bad managers exist at all levels, yes, but incredibly stupid ideas like responsive redesigns that aren't, rarely if ever come from development managers.
    – Ian Kemp
    Commented Dec 10, 2021 at 13:51
  • 2
    @IanKemp For SO specifically, the problem seems to be that new features are repeatedly pushed out by managers who have never used the site. Then it doesn't really matter what kind of background the manager got - the problem is that they don't know the product they are in charge of.
    – Lundin
    Commented Dec 10, 2021 at 14:39
  • 1
    I distinctly recall in 2012, (goodness was that almost 10 years ago, oh dear), the current fad of "metro" causing VS2012 to look terrible and almost unusable compared to its previous version. Commented Dec 10, 2021 at 23:07
  • 1
    I don't feel this is a 2015 vs. 2021 thing, and I don't thinks it's the engineers requesting more features either, it's rather management and sales who do this, and they are also often responsible to introduce anti-usability "dark patterns" to improve some metrics while sacrificing actual user satisfaction. I have experienced this myself as a developer, and I have heard similar stories by other developers. Commented Dec 20, 2021 at 15:55
  • 1
    @IngoSteinke It's so common that it's given rise to a conspiracy theory that users are being conditioned to accept constant abuse. Commented Dec 20, 2021 at 16:04
31

2022-02-24 v0.6 update: removed layout tweaks for the reputation page, they seem to have (kind of) fixed the layout so my userscript doesn't need to do anything there (or better, I have no time to waste improving the current design, assuming they are also going to continue tweaking it).


If anybody wants something more reasonable to look at while they (hopefully) address user feedback from the Meta SE thread, I've hacked together a userscript: GitHub gist, install link. Unfortunately it had to be a userscript instead of a userstyle since some stuff had to be moved around the DOM through JS, and other is just impossible to get a decent CSS selector for.

Note: tested only on SO dark theme, and the script only matches SO, though the style seems consistent among different SE sites so you could try adding some @matches if you want. Do not expect this to be stable since I see staff is updating the profile pages daily with small tweaks. It gives a fairly decent look to different profile tabs. It should be easily tweakable if you want to enable/disable it on some tabs, there's a regexp list at the bottom. I didn't bother with Questions/Following/Bounties as I don't use those pages that often.

Some before/after screenshots (click to enlarge):

one

two

four

6
  • 6
    Nice effort; I'm waiting personally until the dust settles to start an attempt because I know it will just be a waste of effort if I start right away and they make a couple dozen changes after I start...
    – TylerH
    Commented Dec 10, 2021 at 18:45
  • 8
    @TylerH it's just more fun when it's a cat and mouse game between me wanting to have a usable website and devs breaking it in front of my eyes :') Commented Dec 11, 2021 at 6:39
  • 4
    "SO-layout-whack-a-mole.user.js"
    – charlietfl
    Commented Dec 12, 2021 at 19:13
  • 3
    @charlietfl that's too good, done! Commented Dec 12, 2021 at 19:18
  • 2
    Good answer. I'm wondering: if this new design is supposed to be "responsive", how come it doesn't expand when I zoom out? That seems to make it even less useful than it already is. It forces us to use it without having a more efficient information density. Commented Dec 19, 2021 at 18:09
  • 1
    @SylvesterKruin you are not the only one wondering that... Commented Dec 19, 2021 at 18:56
16

Here's a starting point for a user style. I'm too lazy to fix everything right away, and it's unclear how to fix some of this, but it should be good enough to get the profile page to a somewhat usable state.

I can't believe not only how unusable the pages have become, but how horrible HTML code looks. It feels like I'm restyling a crazy table-inside-table-inside-table-inside-table-inside-table-inside-table layout which was typical back in 2001. The only difference is that <table> is <div class="d-flex"> now and every pretty HTML and CSS keyword was turned into single-letter cryptic p17 n7 a--bc fk4u 69mf fu1337 abbreviation.

Something went wrong. Something went terribly wrong if this is how code of Stack Overflow looks like now.

/* Fix profile page and shared stuрidity */
.s-card {
  border: none !important;
}
:is([id^="user-panel-"], [id^="user-tab-"]) > .ba,
:is([id^="user-panel-"], [id^="user-tab-"]) > .ba > :is([class^="bc-"], [class*=" bc-"]),
.s-card > :is([class^="bc-"], [class*=" bc-"]) {
  border: none !important;
}
:is([id^="user-panel-"], [id^="user-tab-"]) > .ba > :is([class^="p"], [class*=" p"]),
.s-card > :is([class^="p"], [class*=" p"]) {
  padding: 2px 0 !important;
}
:is([class^="gs"], [class*=" gs"]) > .s-card.flex--item {
  margin: 2px 0 !important;
}
#top-cards > .s-card {
  border: 1px solid var(--bc-medium) !important;
  margin: 6px !important;
}
#user-panel-votes > .ba {
  display: flex !important;
  flex-wrap: wrap !important;
}
#user-panel-votes > .ba > .d-flex {
  display: contents !important;
}
#user-panel-votes > .ba > .d-flex > .flex--item {
  flex-basis: auto !important;
}

/* Activity page: fix stuрid item order */
#user-tab-summary > div > .d-grid {
  grid-template-areas:
    "summary   summary   summary   votes"
    "answers   answers   questions questions"
    "bookmarks bookmarks followed  followed"
    "tags      tags      accounts  accounts"
    "badges    badges    badges    badges"
    !important;
  grid-template-columns: repeat(4, 1fr) !important;
  grid-template-rows: auto !important;
  gap: 16px 32px !important;
}
#user-tab-summary > div > .d-grid > .grid--item {
  grid-column: initial !important;
}
#user-tab-summary > div > .d-grid > .grid--item:nth-child(1) {
  grid-area: summary !important;
}
#user-tab-summary > div > .d-grid > /*.grid--item:nth-child(2)*/#user-panel-answers {
  grid-area: answers !important;
}
#user-tab-summary > div > .d-grid > /*.grid--item:nth-child(3)*/#user-panel-questions {
  grid-area: questions !important;
}
#user-tab-summary > div > .d-grid > .grid--item:nth-child(4) {
  grid-area: badges !important;
}
#user-tab-summary > div > .d-grid > .grid--item:nth-child(5) {
  grid-area: tags !important;
}
#user-tab-summary > div > .d-grid > .grid--item:nth-child(6) {
  grid-area: bookmarks !important;
}
#user-tab-summary > div > .d-grid > .grid--item:nth-child(7) {
  grid-area: followed !important;
}
#user-tab-summary > div > .d-grid > .grid--item:nth-child(8) {
  grid-area: accounts !important;
}
#user-tab-summary > div > .d-grid > .grid--item:nth-child(9) {
  grid-area: votes !important;
}

#user-panel-votes .d-flex,
#top-cards aside:nth-child(3) .flex--item .d-flex {
  gap: 0 8px !important;
}
#user-panel-votes .flex--item,
#top-cards aside:nth-child(3) .flex--item .flex--item {
  margin: 0 6px !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0 6px !important;
}
#user-panel-votes .fs-title {
  display: none !important;
}

/* Profile list pages: fix fat аss single column mobile stuрidity */
#user-tab-tags > .ba {
  columns: 3 !important;
}
#user-tab-badges > div > .d-flex {
  display: block !important;
  columns: 4 !important;
}
#user-tab-badges > div > .d-flex > .flex--item {
  flex: 0 !important;
}

Preview:

5
  • 5
    Can only agree on the code. Sooo many divs with random two letter classes, oh my! I also had a hard time making my userscript, trying to only use meaningful class names. Commented Dec 10, 2021 at 15:57
  • 1
    I mean, I can see why it seems excessive, but everything's got its own container, and the design system (and all the "two letter classes") is/ are fully public: they all come from Stacks.
    – zcoop98
    Commented Dec 10, 2021 at 16:05
  • 1
    @zcoop98 I had no idea it was public, interesting. Still despise those cryptic short classes but it makes more sense if they are using such a library. Commented Dec 10, 2021 at 16:31
  • 9
    @zcoop98 CSS was created based on the idea of separation between content and style. CSS was built around the idea of multiple alternative styles. CSS grids were created to make even base layout as separate from content as humanly possible. This "Stacks" thing completely disregards all CSS design goals, goes back several decades, merges CSS back into HTML and creates HTML 2.0 Tables On Steroids With Cryptic Names. Sorry, but "writing as little CSS & JavaScript as possible" is a terrible goal, no matter how pretty a page for the library looks on the latest iOS.
    – Athari
    Commented Dec 10, 2021 at 16:38
  • 1
    @Athari I just wanted to note that the docs are public. I don't see how this framework meaningfully differs from much larger, more common, and more respected ones that do much the same thing, like Bootstrap, which has plenty of cryptic and short classes of its own. Frankly, I use those every day and find them quite handy and useful.
    – zcoop98
    Commented Dec 10, 2021 at 16:45
-12

I feel like the reasoning behind this change is being missed by some of us.

The old layout was better for people who wanted information fast when they went to a profile page and were familiar enough with the site to know where to find it - the power user. In other words, the exact type of people that are going to be on Stack Overflow Meta.

The new layout is much easier to parse at a glance if you're not overly familiar with the page. It's not an information dump and it instantly makes sense to a new user. It's easier to find what you're looking for if you don't use the profile page often and have to reacquaint yourself with the layout every time you do. In other words, the new layout is better for new and casual users - the exact type of people that aren't going to be on Stack Overflow Meta, but probably the largest users of the site.

We aren't the intended audience for these changes, so it's no surprise we're upset because we've lost some utility we used to have and relied on.

There's an easy solution though. Many websites have an option in the top right corner that allows you to choose between a condensed view and an expanded view. Make the expanded view the default, add the option in the top right for a condensed view that will bring back the old layout, and have it save your choice so you never have to click it more than once. Both power users and casual users are now happy.

16
  • 7
    I get that among the people complaining on Meta SO/SE you will more likely find power users than new users. The layout of some profile tabs though is straight up nonsensical, sometimes there is even more whitespace than content. Usability is dramatically worse. Also "Many websites have an option in the top right corner that allows you to choose between a condensed view and an expanded view" - yeah, they could have done that too, but apparently did not. Commented Dec 10, 2021 at 15:33
  • 1
    Exactly why is my answer getting downvoted? There's nothing incorrect in my answer. It reminds me of when people downvote comments on Reddit. I understand not upvoting but downvoting seems childish - like you don't like the change so you're going to downvote any answer that even slightly defends it, even if it's factual.
    – dallin
    Commented Dec 10, 2021 at 19:10
  • 1
    I simply disagree with the proposal. Given this is a responsive design, they already have to test this particular group of pages at various screen widths, adding a toggleable view means double the testing. It's unlikely they'll opt for this kind of feature, given that they got rid of the sticky header toggle for the same reason. It's growing more and more common that they design for the avg user, and leave power users to fix things on their own through userscripts.
    – Kevin B
    Commented Dec 10, 2021 at 19:21
  • 5
    Not my downvotes, but that's how the Meta sites work and its mostly intentional. Upvotes/downvotes on Meta are just about expressing approval/disapproval, not factual accuracy. "new layout is much easier to parse at a glance" and "We aren't the intended audience" are opinions rather than facts anyway, so people are just expressing their approval/disapproval of those statements. Those opinions might be supported by evidence (e.g. research on page clarity, dev statements as to who the changes were for), but that isn't part of your answer and isn't necessarily required on Meta.
    – Tyberius
    Commented Dec 10, 2021 at 19:23
  • @MarcoBonelli Programmers are a bad source to ask about usability. You're confusing usability with efficiency, which are two VERY different concepts. The average internet user would find the new pages significantly more usable. This is not excessive whitespace - it looks like a million other popular websites - and for good reason. Whitespace is a fundamental concept to add usability to a site. Everyone is just upset because it's worse for them, but let's stop pretending this layout is abnormal, ugly, or lacks usability. You'd be hard pressed to find a UX expert that would agree with you.
    – dallin
    Commented Dec 10, 2021 at 19:25
  • 8
    Is this not a site, by programmers, for programmers?
    – Kevin B
    Commented Dec 10, 2021 at 19:26
  • 3
    You presented your take on the situation. Don't be upset when people disagree with you, regardless of how firmly you believe you are correct. That's all part of the process.
    – Kevin B
    Commented Dec 10, 2021 at 19:29
  • 2
    Where i think you are correct, is that they are designing the page for all of their audiences, not just SO where the majority of users are in fact programmers, in some capacity. They're designing it to support all of the other communities, and more importantly, their partners using SO for Teams who very well may be more likely to use it on mobile/tablets.
    – Kevin B
    Commented Dec 10, 2021 at 19:34
  • 3
    @KevinB I'm not frustrated because people disagreed with me. I'm frustrated because I felt like they don't actually disagree with me - I think they just don't want to hear an explanation because they're upset. I explained why they made the change and a possible solution, but felt like I got downvoted by an angry crowd that just doesn't want to hear it. I could be completely wrong and a moron here (wouldn't be the first time). That's just how I felt though.
    – dallin
    Commented Dec 10, 2021 at 19:47
  • 4
    I downvoted because I disagree with your conclusion and your reasoning. It may well be that more users are not familiar enough with the page layout yet (though I should think changing the layout harms familiarity...), but most page views - almost all, probably - are by your so-called power users, i.e. people who already know what information is where on that page, because the people who are familiar with the layout are the people who view the page most often. So the change causes harm on average per page view; the idea of optimising something for the people who use it least seems absurd.
    – kaya3
    Commented Dec 10, 2021 at 20:19
  • 4
    I actually agree that the old design was a bit overwhelming, and parts of it were somewhat deficient in whitespace. But the new layout goes too far in the opposite direction, IMHO. Eg, each comment in the All actions section starts with a line just containing the word "comment" and ends with a line just containing the datestamp. But it now only shows 2 lines of comment text, with no way of displaying the full content of longer comments (without clicking through to the Q&A page containing the comment).
    – PM 2Ring
    Commented Dec 10, 2021 at 22:02
  • 2
    (cont) So it's not simply an issue of using whitespace to improve the appearance, useful info has been lost. And it's even worse on a phone, where those 2 lines contain ~110 chars.
    – PM 2Ring
    Commented Dec 10, 2021 at 22:03
  • 1
    Having a page go from usable (as in: "I want to see what I did today") to "three shortened titles and a bunch of whitespace" is the opposite of user-friendly. Unless the only user you want is one who is really impressed by more information than three frigging lines of text on a full screen browser. We are on a website that by definition takes some time to get used to. Its culture, its usage, its rules and its UI. Crippling any of those is not an improvement for anyone.
    – CodeCaster
    Commented Dec 10, 2021 at 22:57
  • 5
    Three likely reasons people are downvoting: the implication that "the average internet user" is the target audience of this site, or even wanted here at all; the implication that design decisions should be simply democratic rather than weighted by strength of opinion and contributed value; and the cynical belief that dumbing things down for the masses is exactly why the masses are so dumb and keep getting dumber. Commented Dec 10, 2021 at 23:26
  • 2
    @PM2Ring I agree completely with your observation. The old page could have been improved, but they did go too far the opposite way. I think adding a bit of whitespace and modern design while keeping the multi-column layout and usefulness of the old design would have been a much better approach. People are saying they did it for mobile, but honestly any Web programmer will tell you that's not an excuse for using a single column on desktop. It's easy to do responsive design with HTML/CCS that is multi-column but collapses to a single column if the screen is narrow enough or the media is mobile.
    – dallin
    Commented Dec 13, 2021 at 19:35

You must log in to answer this question.

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