New post summary designs on site home pages and greatest hits now; everywhere else eventually

Question

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.

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.

Update 1 - 2022-01-25

Most of the reported bugs have been squashed. We're currently gathering together all the discussion and feature-request 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

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
• /questions/* (question list, list by tag, search, etc) - our “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:

• Many various places in Teams and Collectives
• Review queue tasks
• New user activity screens, such as bookmarks and questions

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

Answer 1

discussion

User avatars/profile pictures on question list add to visual noise

I couldn't find anyone else mentioning this - on such a cluttered view as the home-page it's really important to avoid making unimportant information very high contrast or colourful, where it fights for attention with what you're trying to read. In particular, I don't think there's much value in user profile pictures appearing in the top questions view, where they didn't previously appear and it definitely adds a piece of shiny clutter to the view, especially as the location of the profile picture bounces around so much from line to line. I find this combines with the "watched" tags and the higher contrast in the modified date to make the page feel a fair bit more grating than before.

I don't intend this to take a stance one way or another about other places that the new view is shown. Maybe in some of them the identity of the author is much more salient. This is about its use to show "top questions" in the home page.

Here are old and new examples from the "Top Questions: Interesting" view.

Answer 2

feature-request

Please take a look at this screenshot here from the Home page, bountied tab, and compare it with the bountied tab on the Questions page.

Home page:

Questions page

I made sure to make both screenshots exactly 700px high as for a fair comparison. The questions page is certainly far more information dense (hence preferable) then the Home page.

This basically has the following causes (which should be addressed IMHO):

1. Superfluous labels in the Home page

   There really is no need for the watched and ignored labels, the current implementation those have is perfectly fine as they are on the Questions page. I suggest you remove the labels (which frees up ton's of vertical space, as was already asked for in the answer by John Montgomery. Also the watched label is called superfluous in the answer by vitaliis.

2. The bounty label

   I understand the reasoning behind moving the bounty label to the left, and to group all "meta"data together. The implementation however is just done poorly. The post summary stats container has a width of 96px, and the bounty label at a value of +500 (is the plus sign really needed btw?), which is the value with the greatest width has a width of 40.1166 px. (Removing the + sign reduces the width to 32.55 px) This makes this badge small enough to be displayed on the same row as the views counter in most cases, saving tons of vertical space.

As it currently stands the amount of extra information I get from viewing the questions tab is just astonishingly. I get the first 2 rows of each question practically for free. You guys (and girls) really should do a better job at this. And concluding that the original design was good enough can also be a conclusion!

p.s. Don't even get me started on the mobile implementation of this, where meta data is crammed up in between titles, that just horribly in itself.

Answer 3

feature-request

There are aspects of this change that I like, but being unable to quickly see the score and the massive amount of extra space this design puts in is problematic.

What I'd suggest is:

1. Get rid of the threshold for vertical layout vs horizontal and only use horizontal
2. Re-implement the Score box on the left, removing score and views from the top (this should still be collapsible to the top left, giving the full width title space for mobile)
3. Add views somewhere else, such as bottom right, or bottom left, it doesn't belong in the top. It isn't as important as score and therefore doesn't need the big callout.
4. Add "Closed" as an additional status box that is shown along the top, similar to Watched/Answered etc. Even better, have it include the short close reason (Duplicate, Off Topic, Unclear, Not Focused) rather than saying "Closed" so that you can quickly see the close reason when looking at a list of closed questions.

The idea would be to make use of the available space while still accomplishing your goals of having an expandable stat list and a scalable design, and preserving the information that we users need to use the UI effectively.

Answer 4

bugstatus-review

Highlight/shade whole deleted item rather than use the delete label in the stats column

Update 2 from 2022-01-27 removed the "Watched" label but not the "Deleted" one.

What was wrong with the old system of shading the item background in red?

---

This also needs implementation in some of the profile activity lists! You removed that highlighting when the new design was implemented there as well

Answer 5

bugstatus-review

A title with a long word is not wrapped correctly (example):

When searching for it, it looks like this (ellipsis are added):

Answer 6

feature-request status-review

Tag(s) and answer(s) misalignment really bothers me...

Zoomed for clarity...

It may not seem like much, but it is constantly noticed here. It's unsettling and lacks balance.

To be frank, the more I see the new layout, the less I like it.

Answer 7

feature-request

Can we please get a setting that lets us choose between "Top Questions" and "All Questions" as the default view when we navigate to root? That for me at least would solve all of the problems.

If that's not feasible, at least a one-click option from root to show the questions view - not hidden behind a menu.

To be clear, it would help even if the /questions page is converted to a version of the new view - as long as it still has post summaries, anyway.

Answer 8

buglive-refreshstatus-completed

This answer was not implemented for the live refresh feature

That answer, which was about linking to the last activity, showing the last active user and timestamp, and showing the correct action was not implemented for questions loaded in when clicking "[x] question(s) with new activity". Such questions loaded in when clicking that still show the prior buggy view. Only after a page refresh is the fixed behavior visible.

Can that please be fixed for the live refresh?

Answer 9

feature-request duplicate

I can understand the general motivation for all these changes. In fact I might even agree that they are the right decisions.

That being said, the amount of added white-space seems egregious. For example:

Even a simple change like this (quickly mocked up with dev tools in my browser) would bring a welcome improvement:

• Decreased bottom margin of each of the 3 rows of information on the left hand side

• Decreased column width of information section on the left hand side

• Increase bottom padding of post title to align the tags with the bottom of "views"

• Increased post title font size slightly to increase readability

• Flipped background of "answer" box to highlight this more

Answer 10

bugstatus-completed

Latest Activity Link in private SO instances are missing the private part
.. and are therfore pointing to a completely different question on public SO

(1) Links to https://stackoverflow.com/c/{private-so}/questions/1234
(2) Links to https://stackoverflow.com/questions/1234/question-title?lastactivity

Answer 11

Even after the third update, the site doesn't looks as good as it used to look.

You have said this: "increased size of stats as a whole".

Take a look at this:

The bounty label is huge compared to the other important stats like votes.

Better increase the stats size more and decrease the size of the bounty label.

Answer 12

discussion

When the community members gave feedback about Changes to answer sorting menu: moving menu, "Newest" sort option, renaming sort options, the company went back to the drawing board and came up with this Revisiting changes to answer sorting menu: better use of space, moving menu into a dropdown, ascending/descending sort options, clearer descriptions. That's nice, right?

Why cannot something similar be done for the post summary design too?

Please do not be inconsiderate. I would like to quote Zanna:

The reasons people have for maintaining and contributing to a commons are quite simple; they derive some important benefit from it, and realise that without the participation of people like them, it will not exist. I believe this is a strong motivation, both emotional and rational. Not everyone will feel the need or have the skills/time/means to contribute, but if enough do, the commons will survive and thrive

I would like to emphasise about time. Our time is valuable and without us spending time with the communities, the communities will perish. Feature changes like this anger users, make them want to use the site less and less as they have to spend more time to get used to the changes (which they don't like) being forced upon them.

Please value our time. Please value the communities.

Answer 13

feature-request

If we can't revert, is there a way to make this change optional much like the color palette and other layout settings?

I'm not a fond of this change to be honest, but I can understand if someone likes it, otherwise I'm guessing you wouldn't have built it in the first place.

Answer 14

bugstatus-review

Looking at the states of the post summary design although this hasn't rolled out I noticed some of the icons aren't center aligned in the labels (for example for Deleted, Closed, Archived). Might as well mention it now before it roles out or just in case it's a mistake in the Stacks page.

Edit:

The deleted label is already visible in the migrated returned tabs of the 10k tools.

Answer 15

discussionduplicate

1. It's very inconvenient to use this horizontal scrollbar on phone. I am not sure if it was there before.

   Android, Samsung Galaxy S7 Resolution: FHD, 1920*1080

2. Watched label is much more convenient now and takes less space, but I think it's still too bright.

Answer 16

feature-request

Can we remove "views"?

With old design there was no problem in not noticing "views", as they were either smaller, or in a separate column.

Now they are distracting from the important information: the votes.

If you are not going to make votes stand out again, maybe as another solution, views removal can be done?

Answer 17

discussion

Longer question titles that wrap onto a second line push the tags and author information down. Similarly, the position of the author name and image moves around a lot depending on the length of the date. This makes it harder to glance over the page and see the relevant information, as the position of the information varies a lot:

Please consider the revising the layout to fix this.

Possible solutions might include some combination of:

• Clamping the tags and author line to the bottom of the question block.
• Splitting the author and date onto separate lines.
• Putting the author image to the right of the author name.
• Putting the author and date into a separate third column.

Answer 18

feature-request

I think the new listings are useful for the reasons Ben Kelly explained in the question. But I must say having larger green boxes on the accepted answers was just more attractive visually (even more so on Dark Theme). Is there any chance there can be more surface to the accepted answer? If not can the explanation be pinpointed why that was a problem (because I'm having a hard time following)?

I have to add: I just find the front page less enjoyable now. We just lost color and the empty space doesn't seem like a good trade-off.

Answer 19

discussion

Unread questions blend into the tags:

The (unvisited) link color is a visual match to the background of the tags; the height of the title text similarly matches the height of the tags themselves. Combined with the vertically cramped layout, the two elements blend into one indistinct mass that fails to stand out as an unread question.

Answer 20

support tag-watching duplicate

---

What is the difference between these "Watched" tags? The "eye" icon in the "Watched" tag refers to what?

Screenshot for reference:

Answer 21

bugstatus-review

Attempting to highlight the page with my mouse oddly skips various pieces of text. See image.

I'm using macOS 12.1 Monterey and Safari 15.2, both the latest.

I started this drag-highlight somewhere above the first title. Titles below that are not highlighted. Usernames are sometimes not highlighted.

Please make this work normally and as expected.

Answer 22

bug status-norepro

I only use custom filters to follow tags (I don't use the watch dialogue below it) and usually questions with tags that are in my custom filters had a yellow background in the listings but the highlight isn't showing now (and neither is the watch label which I imagine would be the replacement for it).

This is not the same as this post because it's specific to using custom filters and not just watched tags (I'm also not getting the watched labels).

Answer 23

discussion feature-request

This hasn't been mentioned yet and I only noticed it today.

On smaller sites I actually know the other users and when I'm scanning the question list I find myself more focused on the username on the right side of the listing than any other element. (This is rarely the case on Stack Overflow where the chance of coming across a user I've seen before is minute.)

So I noticed the username causes more eye strain than the other elements because altough it has 12px font size like the tags, the left side meta data and the timestamp, it does however vary frequently (maybe with each post) while the other elements have fixed text and only rarely do I need to focus on them. (On larger sites the main indicator might be reputation because it tends to have a strong correlation with the possible quality of a question/answer but it's easier to see because it's in bold - and on smaller sites that focus is shifted to the username.)

I'm aware of the wrapping issue (explained under TylerH's post) that having a longer right-side element can cause, however I think a slightly larger font size for the username might have advantages without the drawback of causing a lot of wrapping.

Lastly, I suppose this might be especially relevant for Teams assuming most communities there are small to medium sized and users will tend to know each other by name like on the smaller SE sites.

(I'm linking Karl Knechtel's excellent post here because it helps put this into perspective visually.)

Answer 24

discussion status-review

Possible off-topic here, but this wording could do with some copy-editing:

Questions that have a large amount of views or a large amount of feedback.

Suggest: Questions with a lot of views or feedback.

Answer 25

discussion

The alignment is bugging me: elements don't align.

Currently it's like this:

This would be better:

Top-aligning the two would make the title text more readable, instead of the statistics over-dominating -- if you make them equal, balanced, then the eye can read either.

To implement this (moving that left column down a bit), I reckon you'll also want to remove what's currently 6px of margin-bottom from the views.

Answer 26

The mobile view is irritating

The new post summary design on questions page just arrived to my most-used site, Code Golf and Coding Challenges.

Although my use is primarily from the computer, I occasionally check from my phone. I don't have access to my phone at the moment, but using the Device Emulation feature of the developer console shows the above view for a typical-sized phone. Indeed, this is the view that I was shown this morning when I checked Code Golf and Coding Challenges from my phone.

However, the mobile view that appeared prior to this change was a lot more pleasurable to use. Although the view above is great (comparably) on computers, it certainly is not on mobile, because it looks as though Stack Exchange has tried to cram as much information as possible into a small space. The old mobile view was a lot more simplistic and I found it intuitive.

Therefore, my request is to at least revert the mobile view. If you're not willing to remove the current desktop view (which I'm not fond of either), at least revert the mobile view.

Answer 27

bug status-bydesign

Inconsistent capitalisation post summary tooltip

The post summary tooltip (in which some are missing) have inconsistent capitalisation.

I'd expect every tooltip to start with a capital letter, as for example, the navigation menu already does.

---

Some tooltips regarding the UX change do not start with a capital letter:

Bounty

---

User reputation

Answer 28

bug status-bydesign

On iOS 14 Safari spaces separating user icons, names, reputation and last action suddenly disappeared and now everything looks glued together:

This seems like a regression considering that on Feb 7 (4 days ago) spaces were present: screenshot.

Answer 29

bug

Not a bug with visible consequences, but the reputation score <span> element doesn't have a proper class:

<span class="todo-no-class-here" title="reputation score " dir="ltr">2,783</span>

Answer 30

discussion

For those who are more interested in content but Meta: Tampermonkey is your friend.

// ==UserScript==
// @name         Stackoverflow: Clean Start Page
// @namespace    http://ceving/
// @version      0.1
// @description  Remove useless stuff.
// @author       ceving
// @match        https://stackoverflow.com/
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';
    GM_addStyle('.s-post-summary--stats { display: none; }');
    GM_addStyle('.s-post-summary { display: list-item; margin-left: 1.5em; padding: 0; border: none; }');
    GM_addStyle('.s-user-card.s-user-card__minimal { display: none; }');
    GM_addStyle('.s-post-summary--meta { display: none; }');
    GM_addStyle('.s-post-summary--content .s-post-summary--content-title { display: inline; margin-bottom: 0; padding-right: 0; }');
})();