-650

Update 3 - 2022-02-01

We've rolled out another small set of changes + bugfixes. The largest change was that we removed the yellow from watched tags entirely, leaving just the new "watched" icon.

We've also added this answer where we lay out our next steps.

enter image description here

Update 2 - 2022-01-27

We've pushed some layout changes live. When reviewing the given feedback as a whole, we've identified a few major themes:

  • Stats are too hard to pick apart, "votes" in particular
  • New watched/ignored states are not bright enough/too bright (respectively) and cause too much trailing whitespace

We've made the following changes to alleviate these issues:

  • Bumped up the size of stats
  • Gave more visible weight to "votes"
  • Gave less visible weight to "supernova" view counts by removing the :fire: icon
  • Removed "watched" state label, restored the yellow background and adding highlighting/icon to the individual tags that are causing the watched status
  • Removed "ignored" state label, added icon to the individual tags that are causing the ignored state

This latest set of changes also includes a number of bug fixes. We're still discussing how to better improve this component. There is still some extra whitespace at the end when there is no body excerpt and a bounty exists on the post (though, this is generally still less trailing whitespace than the current design on /questions, which has a body excerpt). Thank you for your continued feedback.

enter image description here enter image description here enter image description here

Update 1 - 2022-01-25

Most of the reported bugs have been squashed. We're currently gathering together all the and feedback items to decide how we want to alter the design. Thank you everyone for your feedback.


Original Post

tl;dr

We’re starting a rollout of the new post summary design to many existing screens, starting with greatest hits. This will be a slow rollout, with only one set of related screens changing at a time.

What we’re shipping now

We’ve built a new component to replace the existing post summary implementation. We aimed for ~100% data compatibility with this implementation so that users are not losing any statistics or features. That being said, our desire to leave the existing data intact as much as possible has led to sub-optimal layouts in a few uncommon scenarios, particularly for the display of community wiki posts. Work on these experiences is ongoing and will improve over time.

For the initial announcement, we’ve migrated /questions/greatest-hits to use the new implementation. This way, users can have a tangible example they can use today, before we roll out the design to more and more screens. Why did we choose greatest hits to start with? It was an ideal screen for many reasons:

  • Entirely standalone - no dependencies on other screens/processes and not depended on
  • Low user impact - low traffic, infrequently referenced and not terribly well known (even among employees!)
  • Uses the exact same component code and layout as /questions - users can see this as a very close preview for what will be shipping there later on
  • In disrepair - the screen was already showing some signs of neglect and really needed some love <3

Before

post summary before

After

post summary after

What we’re shipping later

In addition to greatest hits, we’re aiming to roll this new design out site-wide. The areas we’re concentrating on first are the main areas of the site that still have mobile-only layouts. As we remove our final mobile views, we need to ensure that the remaining responsive views actually look good on smaller screens. More specifically, the following high traffic views are next on our list:

  • / (home / recent questions) - our “QuestionMini” layout questionmini layout
  • /questions/* (question list, list by tag, search, etc) - our “QuestionSummary” layout
    questionsummary layout

Work on these screens has progressed fairly far already due to most of the necessary work being in the creation and implementation of the underlying component. However, we’ve decided to hold off on the rollout until after the community has had an opportunity for processing the design changes and to offer us feedback.

Eventually, everything will be the new post-summary design, but it may be some time before the changes reach the long tail of our many different views.

Where we are currently using this design

Despite my claims above that this is a “new” design, we’ve been using it in a number of places across the site for quite some time. A (non-inclusive) list of places that are already using the post-summary design:

Why we’re making these changes

Our current designs have withstood the test of time, but they fall short in many areas:

  1. We generally assume 3 items of metadata: score, answers, and views. If we want to add new entries for e.g. bookmarks or revisions, it can be difficult to create a consistent layout in a list of questions.
  2. Inconsistencies in implementation have led to several different layouts across the site. When gathering requirements for a unified post summary component, we found at least 5 (five!) different layouts.
  3. Scaling the design is tricky, both in window size and adding features and functionality. We need to support all sorts of metadata on all sorts of devices.
  4. Our post summaries were only designed to support questions (and answers, kinda). We need to be able to display various content types in single lists. For example, in a list of notifications, we may want to present an article next to a question.
  5. We have no unified place to put an action menu.

Our new post-summary design solves these problems while supporting future features we’re exploring. Some features we’re looking forward to are:

  1. An arbitrary, scalable number of stats
  2. Multiple different content types
  3. A consistent location for post actions
  4. Scalable excerpts
  5. Responsive layouts
  6. A single consistent layout regardless of what data is included

How this component was designed

An early version of this component first appeared in Stack Overflow for Teams in a feature called For You. For You is a rich list of notifications that include questions, answers, and articles.

The existing designs were desirable for familiarity, but just weren’t well suited for the task. After the initial proposal and some iterations with our team of designers, the new post summary design was ready for user testing.

User testing was run with ~170 recently active users against 5 different versions of the post summary design (two of those being existing designs). The chosen design performed better than the existing designs in some metrics (including readability) and never worse on the remaining metrics (including familiarity, data absorption).

After this new design tested well, the design systems team gathered further requirements from across the organization and built it out as an official Stacks component. If you’re technically inclined, you can see some of the iterations in various open source pull requests.

If you’re familiar with the design tool Figma, feel free to check out some explorations prior to us moving into code.

FAQ

Q: What if I find a bug/regression?
A: Report it as an answer to this post - one bug per answer please. If you’re feeling charitable, add a [tag:bug] tag to the top of your post so we can more easily find it.

Q: What if I have constructive feedback, but it isn’t a bug?
A: We’d like to hear it! Add it as an answer on this post. As above, you can add a [tag:discussion] tag to the top of the post as well.

Q: When will FAVORITE_SCREEN be migrated to use this new design?
A: 6-8 weeks

162
  • 197
    I wish more work went into improving the UX instead of the UI.
    – Travis J
    Jan 12 at 22:34
  • 191
    I sure don't like it; much harder to see the metadata on the home page. Jan 24 at 21:58
  • 208
    This layout makes the desktop experience on the homepage worse, due to a lower information density displayed at once on the screen (# questions per screen), more difficult to parse and smaller statistics, too much padding between list items, misaligned tag and user bars with the bottom of the question block
    – illustro
    Jan 24 at 22:12
  • 162
    Is it just me or does anyone hates these changes to the feed and profile? I say "hate", because they're ruining the desktop experience. Jan 24 at 23:12
  • 61
    @BernardoDuarte the rapidly declining score on this post says "yes". As we've seen before though, score on announcements means nothing
    – Phil
    Jan 24 at 23:14
  • 138
    I honestly don't see how this can be considered an improvement. It's harder to find information from a glance and it looks incredibly unbalanced.
    – Ambo100
    Jan 24 at 23:42
  • 131
    It's horrible in nearly every way. Not a single improvement to my experience and several things which are worse.
    – takendarkk
    Jan 24 at 23:52
  • 84
    Why do UX changes always make things harder to read and digest sigh
    – deep64blue
    Jan 24 at 23:59
  • 75
    The change to add ignored tags with a black background, just to make questions you want to ignore stand out even more is ridiculous and bad UX design
    – illustro
    Jan 25 at 1:26
  • 73
    While it was great that you released this on the Greatest Hits page first for us to poke around with, there's a fundamental problem with that, and it's why so many people are upset now: no one uses the Greatest Hits page. It's not part of anyone's regular workflow, so it's harder for us to see how the new design will break our workflows. People aren't used to using it, so if information is a little awkward to acquire, or certain use-cases aren't served, it's difficult for us to see it. I don't have a solution, just wanted to point out why the pre-release didn't end up being that useful.
    – bobble
    Jan 25 at 1:37
  • 136
    While I appreciate the effort that's gone into this, it's really disappointing how consistently any UI changes to the site actually make the experience worse. It seems like every change is a net regression. Do the staff just think our consistent complaining is because people hate change? Because it's much more than that. Almost every change is a significant step backwards in some respects. This change seems to have a number of objective flaws. I feel like all the effort that's spent twiddling with a layout that's always been fine could be put to better use.
    – Michael
    Jan 25 at 2:03
  • 62
    I've created a userscript that brings back the old design.
    – Spectric
    Jan 25 at 3:50
  • 118
    In the name of everything that you hold sacred, please revert this!. My brain hurts trying to process this layout. There's way too much empty space and a tiny vote count is purely awful!
    – jojek
    Jan 25 at 9:27
  • 106
    As a Stack Overflow old-time developer. Don't come to the community with solutions. Come to the community with a problem statement and an idea and iterate. This way you'll get a better solution than this and you won't get massive downvotes. Remember: most people here are (a) better stack overflow experts than you or me and (b) better developers too. Give them a chance.
    – Sklivvz
    Jan 25 at 10:34
  • 76
    "While it was great that you released this on the Greatest Hits page first for us to poke around with, there's a fundamental problem with that, and it's why so many people are upset now: no one uses the Greatest Hits page." I have been around for over 11 years, and this meta.SE question is literally the first time I have ever heard about a "greatest hits" page. Staring at the current Stack Overflow interface, I have absolutely no clue how one is intended to navigate there, other than by manually entering the URL. So... no wonder nobody uses it. Jan 25 at 10:41

95 Answers 95

1 2 3
4
1

This time I'm not the only one seeing this because in screenshots from other users it's also visible. The icon isn't perfectly centered inside the tag, although the misalignment is subtle it's noticeable using normal resolution (for me it works as the saying goes:"once you notice it you can't take your eyes of it.")

(I have to wonder if this can actually be fixed, somehow, or if it's some kind of technological limitation... It happens with some icons but not with others, dunno...)

screenshot of watched icon inside tag

6
  • Seems to be bottom aligned. It may not be your preference but it's not like it's a random alignment
    – charlietfl
    Jan 27 at 21:54
  • 1
    @charlietfl I said it was inconsistent with the alignment of other icons which are usually perfectly centered inside the tags/labels. It doesn't make much sense having different alignments, or slight offsets in some cases does it?
    – bad_coder
    Jan 27 at 21:57
  • 2
    “This time I'm not the only one seeing this because in screenshots from other users it's also visible.” — Of course you’re not the only one. Is this Segoe, which has a lower baseline? (The dev tools will tell you.) For me, again, the text looks just fine, using Liberation Sans. The icon isn’t centered, just like for you, but it’s off by only one pixel, which is acceptable. Jan 28 at 2:17
  • @SebastianSimon in this post I focused only on the icon! Imagine that instead of programmers we were table waiters, would we be discussing if 1 fly in the soup is acceptable? This 1px issue reminds me of the unsymmetrical diamond it's worth mentioning because it catches the eye and hopefully staff will be able to fix it eventually (or someone will offer a detailed in depth explanation of the causes)... In the meanwhile, thank you for taking notice and confirming the 1px :)
    – bad_coder
    Jan 28 at 5:49
  • @bad_coder Oh, sorry, you didn’t actually mention the text; based on the other comments here, I assumed you referred to it, too. Jan 28 at 6:03
  • @SebastianSimon no problem, it made your comment even better because it was more complete!
    – bad_coder
    Jan 28 at 6:05
1

Other than the obvious "disapproval" of the new design, there seems to be an alignment issue as well.

Point 1 shows how the tags and username are aligned in one single line, but point 2 shows how that's being distorted if either of the text overflows the margin.

Might be a simple issue but definitely hurts the eye.

enter image description here

1
0

User profile icons are among the most colorful and varied elements on the homepage.

They draw attention to themselves but don't add value or readability.

I suggest showing user names without an icon.

1
  • 2
    The personalized avatars on the new page are tiny, just itty bitty dots of color. What evidence do you have that their owners/authors have an unfair advantage? Next, someone will be suggesting that we eliminate usernames and individuals be identified as a series of random numbers. If someone wants to be totally anonymous on Stack Exchange that's fine, they are free to be so but don't impose that on everyone. Feb 3 at 5:48
-6

Posts with negative scores have a pluralization bug in votes see the screenshot and compare with the post that has a positive score.

enter image description here

15
  • 1
    Which screen is this on?
    – Phil
    Jan 25 at 7:48
  • 1
    @Phil it was taken on the main page of Stack Overflow using a standard 1920x1080 but the browser window wasn't full screen so you're seeing the responsive design in action.
    – bad_coder
    Jan 25 at 7:51
  • 3
    This should be replaced by “score” anyway. Jan 25 at 8:49
  • 7
    This isn't a pluralisation bug. Jan 25 at 9:02
  • 1
    @Nick it's the usual definition of pluralization bug, why do you say it isn't?
    – bad_coder
    Jan 25 at 9:03
  • 17
    Because "negative one votes" is correct. English is silly, but it's still not a bug. Jan 25 at 9:03
  • @Nick no because the "positive one votes" has been discussed and it isn't correct. But find a reference on MSE to back up your claim.
    – bad_coder
    Jan 25 at 9:05
  • 2
    Related: Is negative one plural? Jan 25 at 9:07
  • 2
    @Nick the linked thread on English.SE has mixed opinions but the overall most voted answers (with references) disagree with your claim.
    – bad_coder
    Jan 25 at 9:13
  • 2
    @bad_coder That doesn't change the consensus on meta.SE Jan 25 at 9:15
  • @Zoethe1337Princess the +15 on that post isn't a consensus, it's 15 users who didn't downvote :P
    – bad_coder
    Jan 25 at 9:18
  • 4
    Just as the downvotes you're getting here don't mean you're wrong, it's just people that didn't upvote. The linked questions have a pretty clear conclusion indicating the plural version to be correct...
    – Cerbrus
    Jan 25 at 9:19
  • @Cerbrus exactly, needs moar upvotes!
    – bad_coder
    Jan 25 at 9:20
  • 4
    I actually think -1 [noun], noun should be singular for discretely countable nouns, such as 'vote'. The answer on the English SE actually uses non-discrete examples for where a plural is appropriate.
    – JeffUK
    Jan 26 at 18:00
  • @JeffUK glad I wasn't the only one to notice that...
    – bad_coder
    Jan 26 at 18:04
-8

Today, Jan 26, 2022, noon UTC, the two most lamented new features appear to have been improved: The votes are now on top of the information on the left, and the orange icon used to highlight questions matching my tags have been removed, reverting back to the light-salmon-colored background color for the entire entry.

I can live well with the current state now.

As a suggestion, I'd highlight questions that have been positively received, for example by using bold font for the vote count. That would make it easier to identify questions worth my time.

2
  • 15
    Tolerable and fully functional are not synonymous and we should not be expected to accept a regression in the UI which seems to be the recent standard
    – charlietfl
    Jan 26 at 13:37
  • 6
    @charlietfl Given that people (me included) typically resent any change I'm willing to give them some leeway without starting to whine. I'll probably have forgotten about it in a month. It is fully functional for me. Jan 26 at 14:12
1 2 3
4

You must log in to answer this question.

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