204

I just noticed the new design for Top Questions at Home page.

I feel that the previous design was much better. The new question statistic is too small and it's not easy to see all relevant question information quickly.

40
  • 12
    There never were descriptions. web.archive.org/web/20220114014823/https://stackoverflow.com/…
    – Dharman Mod
    Commented Jan 24, 2022 at 22:30
  • 8
    I understand that by making the numbers smaller they made the titles bigger, but still this is a useless change that made things more worse than better.
    – Dharman Mod
    Commented Jan 24, 2022 at 22:35
  • 18
    @Dharman You are right. I don't know why I though that description was there. Probably because this new design has a lot of empty space, and on the first look on new design, it looked like something is missing.
    – NeNaD
    Commented Jan 24, 2022 at 22:41
  • 76
    it... has a lot of empty space, and is more cramped, at the same time.
    – Kevin B
    Commented Jan 24, 2022 at 22:46
  • 39
    If it ain’t broke, don’t fix it...
    – TGrif
    Commented Jan 24, 2022 at 23:10
  • 21
    Please forgive them. They only have old mobile screens to test it on.
    – Poul Bak
    Commented Jan 25, 2022 at 0:09
  • 14
    what are the bright (dark theme) Watched indicators and why are they on almost every question? is it really necessary to pull my eye to them that much? Commented Jan 25, 2022 at 1:00
  • 40
    The new top questions list looks horrible. It wastes screen real estate. Why on earth was this change made? "If it ain't broke -- DON'T FIX IT". Seriously this is not an improvement. Why wasn't this previewed before it was just dumped on the community? At least provide an option in "Settings" to go back to the old view. And, I checked -- It's not April 1st... Watched questions are not even highlighted anymore -- there is an unwanted yellow "Watched" box... Commented Jan 25, 2022 at 1:04
  • 38
    Every terrible redesign is a little push for another community-led Q&A site to take StackExchange's place.
    – qwr
    Commented Jan 25, 2022 at 1:32
  • 16
    There are only three certainties in life: death, taxes, and us giving Stack Exchange a hard time when they move our cheese. Commented Jan 25, 2022 at 1:36
  • 5
    I feel like I'm missing something here. When I go to stackoverflow.com it shows Top Questions which seems to be a selection of questions form topics I watch. As a result every question has this big watched badge (it's the most prominent feature). Why?…it's not really a useful tag if every question is tagged. Certainly not the most important thing.
    – Mark
    Commented Jan 25, 2022 at 4:03
  • 5
    Surprised to see so much negativity. Maybe it's just because I hardly ever go to that page but the new version looks great to me. It's really clean and easy to read.
    – Clonkex
    Commented Jan 25, 2022 at 4:38
  • 30
    Is there any reason why it can't look exactly the same as stackoverflow.com/questions? Too easy? Too consistent?
    – Lundin
    Commented Jan 25, 2022 at 11:52
  • 7
    Whatever happened to Responsive design? Responsive design is about using the available space in a matter that makes sense - and half the screen in white does not make sense.
    – Poul Bak
    Commented Jan 25, 2022 at 18:45
  • 5
    Omg the hideous yellow things are back AGAIN.
    – Boann
    Commented Jan 27, 2022 at 16:17

5 Answers 5

59

I have a few remarks regarding the details in the left-most column of the list-items.

The "Watched" marker is too prominent

That marker is big, bold, in full-text and in a yellow frame. That's way too much for something that, in regards to one question, is optional.

Also, it being there or not provides a different layout for the rest of the statistics. The statistics should be at a consistent place from question to question. When the "Watched" marker is absent, everything seems aligned from the top. When the "Watched" marker is present, the whole column on the left seems to be height-centered.

Also, its presence makes questions that can fit on one line take much, much more place, including useless whitespace.

In short, it makes two questions not identical visually, but not by a bit, but by a lot!

A better idea, is that given that "Watched" is linked to tags, put that info in the tags list, just like the collectives.

enter image description here

The number of answers

When there is at least one answer, my eye catch the information quite easily. When there are no answers, my eye doesn't see that information until very late. Why? It should be the opposite. If there are no answers, you should try to tell me that I should check that question so that I can check if I should answer it, or handle it in any way SO usually handles questions.

When there are no answer, show it in a similar way than when there is at least one. Not especially in green, if you don't want, but keep the same layout in yellow, in red, whatever.

9
  • 1
    Good point on Watched... and I must first question it usefulness. SO is not a news aggregator platforms, I can't find much value in knowing that a question is being "watched". Still if necessary it seems that on the various layouts there's horizontal space on the "tabs" line, so maybe it could be squished in there -- at the beginning of the list? Commented Jan 25, 2022 at 13:59
  • @MatthieuM. I don't question the usefulness of "Watched": I find it very useful as it's questions in a tag I watch. It helps me easily filter questions I can answer when they are asked. Commented Jan 25, 2022 at 14:04
  • My mistake, I thought it was a "popularity" indicator -- as in "this question is watched by many people, hot!" -- not something you'd set yourself. Commented Jan 25, 2022 at 15:00
  • Specific link for "Watched" tags. Commented Jan 25, 2022 at 16:08
  • 11
    This has been fixed. It's now closer to the old design by just coloring in the background.
    – MegaIng
    Commented Jan 26, 2022 at 10:37
  • Perhaps your "The number of answers" section should be another answer so that we can upvote that, now that the watched marker issue has been fixed. Commented Jan 26, 2022 at 14:23
  • @MegaIng for the time being. They've disabled it and re-enabled colouring while they investigate a bug and other options. Commented Jan 27, 2022 at 4:03
  • 2
    They seem to have changed it again, so now any tags under the question that are watched get the mustard treatment :-/ Commented Jan 27, 2022 at 17:02
  • @snakecharmerb yup, there's even more bright yellow than before now. it's like highbeams on the highway, burning away at your retina even when you're not looking at it. (thinking about it, it's just the wrong color for dark theme. it clearly must have a brightness value way beyond anything else on the entire page, except maybe the green for answers but that is used sparingly.) Commented Jan 27, 2022 at 17:25
53

I've created a userscript called LegacyQuestions that brings back the old design.

Here's what it looks like with the userscript:

Compared to without it:

8
  • 1
    good job, for now it's a good alternative to avoid the headache
    – Borja
    Commented Jan 25, 2022 at 16:14
  • 18
    I feel like we're going to have a growing list of userscripts to revert the website back to what it was. This is already #3 on my list. (#1 was the line-height reversion after they changed that. #2 is the removal of collectives userscript).
    – Blue
    Commented Jan 25, 2022 at 21:42
  • just combine them into an extension with a configuration menu
    – Kevin B
    Commented Jan 25, 2022 at 21:44
  • 3
    @ughStackExchange you forgot the font-change userscript :P
    – lucidbrot
    Commented Jan 26, 2022 at 13:00
  • 2
    Thanks for the userscript, Spectric (again). 100 reputation says there'll soon be LegacyActive, LegacyUsers, and LegacySE...
    – Ollie
    Commented Jan 27, 2022 at 0:00
  • 1
    The script was working nicely until an hour or two ago when it suddenly got weird for me. Now it looks like a hybrid of the old design and new design where the metrics appear in a grid like the old design but with the numbers next to the text like the new design. Could just be my browser?
    – Matt
    Commented Jan 27, 2022 at 16:30
  • @Matt This bug has been patched in v1.4. Thanks for the report!
    – Spectric
    Commented Jan 28, 2022 at 13:58
  • Whitespace seems to be back on Home > Top questions and Public > Questions. :-(
    – QHarr
    Commented Feb 7, 2023 at 3:56
16

I seem to be in the minority, but I personally think the new design is pretty nice. My only issue is that I find it a little confusing having the rep on the left side of the "asked" text.

It manages to read like "1 asked 41 mins ago", possibly because the spacing between the name and the rep is too large and the spacing between the rep and the "asked" text isn't large enough.

This problem would be exaggerated if you're new to the site and aren't familiar with rep.

enter image description here

4
  • 31
    One what? One question asked 41 min ago. As long as the number remains 1, it's probably true. :) Commented Jan 25, 2022 at 8:11
  • 10
    That is the reputation of the user.
    – Braiam
    Commented Jan 25, 2022 at 18:38
  • 13
    @Braiam Well I know that, but I'm just pointing out that even though I know it, it's confusing to read, and for people that don't know it it will be especially confusing.
    – Clonkex
    Commented Jan 26, 2022 at 10:50
  • 5
    You may know that, but others may not. I'm commenting for the others benefit.
    – Braiam
    Commented Jan 26, 2022 at 12:19
4

So now, there's the yellow background and yellow watched labels. The labels are just different:

new yellow badges

10
  • 2
    And, what do you think? Better or worse? Commented Jan 27, 2022 at 17:49
  • 5
    I find it better than the original yellow badges, but worse than just the original yellow background. The new badges are much more informative (I didn't get the meaning of "watched" at first), but they still really stand out and rivet way too much attention.
    – user17242583
    Commented Jan 27, 2022 at 17:52
  • 9
    it has the same distraction problem as when it was on the left, except it no longer contributes to the height. however, now it can occur multiple times per post and jumps around horizontally from question to question, potentially making it more distracting.
    – Kevin B
    Commented Jan 27, 2022 at 17:53
  • 2
    Maybe inverting the badge, i.e., outlined, would be better, attracting less attention. Kinda like they did to the Staff and Mod labels.
    – user17242583
    Commented Jan 27, 2022 at 17:53
  • 3
    Looks like Halloween on dark mode :). Commented Jan 27, 2022 at 17:56
  • 2
    Since tags are all lowercase, could we get a lowercase eyeball to match?
    – user673679
    Commented Jan 27, 2022 at 18:34
  • 7
    1) Yellow background 2) Dark yellow tag 3) Eye icon. Seems like they REALLY want everyone aware of the tags they're watching. Sigh
    – j08691
    Commented Jan 27, 2022 at 18:37
  • The watched tags shouldn't stand out that much. Just a very tiny difference is more than enough. It was fine as it was.
    – trincot
    Commented Jan 27, 2022 at 20:22
  • 1
    Just my 2 cents: Don't change the btn color, change the text color, if it's neccessary to highlight. Anyway, the update looks much better than it was initial. Commented Jan 27, 2022 at 20:33
  • it's way too bright on dark theme Commented Jan 28, 2022 at 8:28
1

In the same spirit as Legacy Questions userscript by Spectric, here are Stylus-based user styles for reverting the /questions/ list on Stack Overflow and Meta Stack Overflow back to the same look and feel as before, since that change recently landed in addition to the Top Questions page:

@-moz-document url("https://meta.stackoverflow.com/questions"), url-prefix("https://stackoverflow.com/questions") {
/* Fixing display of stuff on /questions/ pages */

/* restoring font to Arial */
#mainbar, #mainbar a {
    font-family: Arial, sans-serif !important;
}

/* remove the watched tag styles */
a.post-tag.s-tag__watched, a.post-tag.s-tag__watched:hover {
    background-color: var(--theme-tag-background-color);
    color: var(--theme-tag-color);
    display: inline-block;
    padding: .4em .5em;
}
a.post-tag.s-tag__watched::before {
    position: static;
    display: inline;
}

/* restoring the color and display of ignored posts so I don't feel colorblind when using Stack Overflow */
.s-post-summary__ignored .s-post-summary--meta, .s-post-summary__deleted .s-post-summary--meta { 
    filter: grayscale(0%) !important; 
}
.s-post-summary__ignored .s-post-summary--stats-item:not(.is-deleted), 
.s-post-summary__deleted .s-post-summary--stats-item:not(.is-deleted) {
    filter: grayscale(0%) !important;
}
.s-post-summary__ignored .s-post-summary--content-title a.s-link {
    color: var(--theme-question-title-color);
}
.s-post-summary__ignored .s-post-summary--content-title a.s-link:visited {
    color: var(--theme-question-title-color-visited);
}


/* fixing the display of the question entries on the questions pages */
.s-post-summary {
    margin-left: -24px;
    padding-right: 0px;
}
.s-post-summary .js-post-summary-stats {
    margin-right: 16px;
    width: 58px;
}
/* Fixing the 'votes' box */
.s-post-summary .js-post-summary-stats .s-post-summary--stats-item:first-child {
    width: 58px;
    display: block;
    white-space: normal;
    color: var(--black-500);
}

.s-post-summary .js-post-summary-stats .s-post-summary--stats-item:first-child span:first-child {
    display: block;
    font-size: 17px;    
    text-align: center;
    margin-right: 0px !important;
}
.s-post-summary .js-post-summary-stats .s-post-summary--stats-item:first-child span:last-child {
    display: block;
    font-size: 11px;
    text-align: center;
}
/* Fixing the '# of answers' box */
.s-post-summary .s-post-summary--stats-item:nth-child(2) {
    width: 58px;
    margin-bottom: 8px;
    display: block;
}
.s-post-summary .s-post-summary--stats-item:nth-child(2).has-accepted-answer svg {
    display:none; /* no one needs a checkmark here */
}
.s-post-summary .js-post-summary-stats .s-post-summary--stats-item:nth-child(2) .s-post-summary--stats-item-number {
    display: block !important;
    font-size: 17px;
    text-align: center;
    padding-bottom: 0;
    margin-right: 0px !important;
}
.s-post-summary .js-post-summary-stats .s-post-summary--stats-item:nth-child(2) .s-post-summary--stats-item-unit {
    display: block;
    font-size: 11px;
    padding-top: 0px;
    text-align: center;
}
.s-post-summary .js-post-summary-stats .s-post-summary--stats-item:nth-child(3) {
    font-size: 11px;
    text-align: center;
    margin: 0 auto;
    margin-top: 5px;
}

/* fixing the user cards that display at the bottom right */
.s-post-summary .s-user-card.s-user-card__minimal {
    display: grid;
    width: 185px;
}
.s-post-summary .s-post-summary--content .s-post-summary--meta .s-user-card time {
    display: flex;
    order: 1;
    height: 18px;
    align-items: center;
}
.s-post-summary .s-post-summary--content .s-post-summary--meta .s-user-card time span.relativetime {
    margin-left: 3px;
}
.s-post-summary .s-post-summary--content .s-post-summary--meta .s-user-card a {
    display: block;
    order: 2;
}
.s-post-summary .s-post-summary--content .s-post-summary--meta .s-user-card a.s-avatar {
    height: auto;
    width: auto;
}
.s-post-summary .s-post-summary--content .s-post-summary--meta .s-user-card a div img.s-avatar--image {
    width: 32px;
    height: 32px;
}

.s-post-summary .s-post-summary--content .s-post-summary--meta .s-user-card div.s-user-card--info {
    display: block;
    order: 3;
    width: calc(100% - 40px);
    margin-left: 8px;
    height: 32px;
}
.s-post-summary .s-post-summary--content .s-post-summary--meta .s-user-card div.s-user-card--info ul.s-user-card--awards { 
    height: 17px;    
}

/* fixing the user cards that display at the bottom right */
.s-post-summary .s-user-card.s-user-card__minimal {
    display: grid;
    width: 185px;
}
.s-post-summary .s-post-summary--content .s-post-summary--meta .s-user-card time {
    display: flex;
    order: 1;
    height: 18px;
    align-items: center;
}
.s-post-summary .s-post-summary--content .s-post-summary--meta .s-user-card time span.relativetime {
    margin-left: 3px;
}
.s-post-summary .s-post-summary--content .s-post-summary--meta .s-user-card a {
    display: block;
    order: 2;
}
.s-post-summary .s-post-summary--content .s-post-summary--meta .s-user-card a.s-avatar {
    height: auto;
    width: auto;
}
.s-post-summary .s-post-summary--content .s-post-summary--meta .s-user-card a div img.s-avatar--image {
    width: 32px;
    height: 32px;
}

.s-post-summary .s-post-summary--content .s-post-summary--meta .s-user-card div.s-user-card--info {
    display: block;
    order: 3;
    width: calc(100% - 40px);
    margin-left: 8px;
    height: 32px;
}
.s-post-summary .s-post-summary--content .s-post-summary--meta .s-user-card div.s-user-card--info ul.s-user-card--awards { 
    height: 17px;    
}
}

You must log in to answer this question.

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