# New post summary designs on greatest hits now, everywhere else eventually

## 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:

## 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 on 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

• Shouldn't meta.stackexchange.com/questions/greatest-hits be added to meta.stackexchange.com/questions (under the "More" tab)? This announcement doesn't make it clear which webpage we would be on, and where we would click, to access meta.stackexchange.com/questions/greatest-hits (without using the URL in this announcement); I've been here a while, fairly certain I've not see the tabless "Greatest Hits" page before.
– Rob
Jan 12 at 19:17
• @Rob Honestly, no clue. I only found this page while I was looking for areas that needed migration to the new layout. Most of the people I showed this page to didn't even know it existed. I'll follow up internally about if we want to make additional changes to better surface this screen.
– Ben Kelly StaffMod
Jan 12 at 19:20
• @Rob it's an unlinked page Jan 12 at 19:23
• @bobble Announced 10 years ago: meta.stackexchange.com/q/103650/282094 and asked where to link to it from several years ago: meta.stackexchange.com/q/243010/282094 - apparently it is used to populate the Newsletter: meta.stackexchange.com/q/102786/282094
– Rob
Jan 12 at 19:49
• I wish more work went into improving the UX instead of the UI. Jan 12 at 22:34
• Cool! Think you could mark this report as status-completed then? Jan 13 at 1:16
• @LShaver Those screens are using the same component, but using the "minimal" view (which is basically the mobile/responsive view on desktop). The underlying implementation is different, but those screens are using the same CSS classes / markup.
– Ben Kelly StaffMod
Jan 13 at 19:04
• @BenKelly Is the removal of gold/silver/bronze badge count for non-CW posts an unintentional or intentional change in the new layout? I consider it a regression, personally, as it is a loss in somewhat interesting/useful data. Jan 13 at 20:03
• I think it's interesting that you refer to "score" (We generally assume 3 items of metadata: score, answers, and views.) when it's still labelled "votes". I'm going to be annoying and link the feature request about that so we don't forget about it :) Use "score" instead of "votes" in the list of questions. Jan 13 at 21:36
• 5 Users 48% Gnome made me laugh - but what does the 48% even refer to? The number of characters changed? Jan 14 at 10:37
• @TylerH Yes, that was by design. If that's something you feel strongly about, add a new discussion answer. I'd prefer it as an answer so any extended discussion happens off the main post's comment chain.
– Ben Kelly StaffMod
Jan 14 at 15:05
• @simonalexander2005 Yeah, that wording is not great. I think that percentage is measuring how much of the post is attributed to the top editor of that post. I hint at it in a comment on one of the answers below, but we plan on rewording that text more naturally, making it much clearer in the process.
– Ben Kelly StaffMod
Jan 14 at 15:10
• I think the means your favourite page 😁
– Journeyman Geek Mod
Jan 15 at 16:16
• No no. Literally a page on the site you like, and if you want it updated to responsive stuff, It'll happen when it happens ._..
– Journeyman Geek Mod
Jan 16 at 2:09
• @charlietfl it is meant to be a placeholder, an left to the imagination of the reader, a catch all for all the pages / dialogs / "components" that are yet to get their redesign. By using that phrase It tries to pre-emptively shortcut inquiries about the pet-peeve pages / screens /dialogs of readers of this question. Even with that in place I'm sure someone brings up that one feature request from 2011 that is still not fixed and will argue it should have gotten priority over post summary designs. That FR points out their FAVORITE_SCREEN ...
– rene
Jan 16 at 7:52

It's an old bug, but might be worth revisiting: the wording votes is wrong, it should be score.

The number that is displayed is not the number of votes on a post, but rather the score derived from number of upvotes and number of downvotes. Controversial posts can have a huge number of votes but still a score around 0.

• Also recently mentioned in New responsive Activity page. Jan 15 at 19:20
• I agree that it should probably be called score. However, I'm currently considering that beyond the scope of this change since the new layout is maintaining the status quo in regards to data shown / wording. My recommendation for passers by would be to support the linked meta post. In the meanwhile, I'll raise this suggestion internally to talk about our options. This may seem like a super easy change, but that's deceptive. We have to ensure the wording is consistent everywhere cross-site, which will in turn invalidate a lot of translations for our non-English Stack Overflows.
– Ben Kelly StaffMod
Jan 19 at 15:22

Not a new bug, but let me mention it here anyway for the record: the question summaries may get truncated at random places, including in the middle of MathJax expressions, resulting in broken markup:

What's the threshold for showing the 🔥 symbol before the number of views? From the screenshots, I guess it's 100k – is that a global constant or will it differ per site? On many smaller sites, it's rather hard to reach that amount of views.

• Yup, 100k views to reach "supernova" is correct. The thresholds for warm (1k), hot (10k) and supernova (100k) are preexisting and unfortunately hard coded, which means they can't be customized per site.
– Ben Kelly StaffMod
Jan 12 at 22:20
• I’m not a fan of these symbols. Older eye’s and small screens lead to me trying to figure out what that symbol says only to zoom in enough to realize it’s not something to be read, and then not clear why it is there at all.
– PatS
Jan 16 at 14:53
• @PatS Agreed. We'll just have to add another user script to surpress it, I guess.
– Mast
Jan 17 at 9:53

It appears that the view count is now more important than the vote count. Previously, score and answer count were larger numbers, with a font size equivalent to that of the question title.

Maybe this impression is just caused from greatest hits being, well, greatest hits by view count and thereby all questions in that list having the 🔥 "supernova" icon, but the orange highlight makes it stand out too much. Should a similar emphasis be put on questions with >10, >100 or >1000 votes?

• Yes please to increasing the font sizes on score and answer values to be more like current. Especially in search result lists. Context of the list matters. Jan 15 at 18:36
• This is a good point. In most of the preexisting post summary layouts, view count was deemphasized. The greatest hits page does somewhat exacerbate the problem, but (imo) it looks much better in normal circumstances. I'll bring this up internally, but for now I'm going to mark this as "by design".
– Ben Kelly StaffMod
Jan 19 at 15:30

Capitalization for "C/community wiki" is now inconsistent between list view and within the question:

The old view was consistent with lowercase-"c" used in both list and within a question. Is this change intended? Is there some reasoning for upper- or lower-case to be preferred here?

For what it's worth, another capitalization inconsistency is still present: "asked" is lowercase in list view and uppercase within the question.

• Nice catch! This is the intended behavior and will roll out everywhere as we get each different area migrated. Behind the scenes, we have a highly reusable PostSummary component that will unify all our different implementations. A sub-component of that is a UserCard component, which will also be used when e.g. showing a question. The goal is a single unified implementation used everywhere. Obligatory XKCD
– Ben Kelly StaffMod
Jan 12 at 19:10
• Oops, forgot the second question - Uppercase C is preferred here as it is being treated as a proper noun. "Community wiki" is the post owner / author / whatever in this case. As for the lowercase asked, I don't see where that one is uppercase. In that case, it is read like a sentence / sentence fragment depending on layout, so lowercase is the way to go.
– Ben Kelly StaffMod
Jan 12 at 19:14
• @BenKelly "Asked" is uppercase on the question page itself (like just below the question title and above the voting arrows on this page here). Jan 12 at 19:22
• @Randal'Thor Ahhh, I see it now. Not in the user card, but elsewhere. I hadn't considered that. I'll put this on the list of things to consider when we finally remove the mobile views for the question view.
– Ben Kelly StaffMod
Jan 12 at 19:24

The display of the author information for community wiki posts is not always on one line. Browser: Firefox 95.0.1 on Ubuntu, 100% zoom. For the first CW question the author line does not go below the tags (which is different from the screenshot in the announcement, where it does go below the tags). For some CW posts the line does go under the tags however.

For the posts with a normal author it seems to work fine.

I tested also in Chrome and there the bug is not reproduced.

Another one where there is clearly enough space next to the tags where Firefox wraps the line (and in Chrome it is a single line next to the tags):

• Yup, that one is a known issue. The markup for that link(s) is generated elsewhere and reused, so we opted for a suboptimal layout for now. This is next on our list of items to fix. The markup is the same across browsers, but FF isn't buying into our uh... "inventive" css we're using to collapse the rendered <br /> tag.
– Ben Kelly StaffMod
Jan 12 at 21:56
• @BenKelly It should break before the 'user percentage' so that it's consistent throughout. Currently: i.stack.imgur.com/YkNHK.png - Should be: Community wiki 16 revs, 7 users<br />37% Sonic the Anonymous Hedgehog --- So the 37 is under the 16.
– Rob
Jan 12 at 22:46
• @Rob We were trying to go the other way with it - not breaking at all, but FF was having none of our nonsense. We're planning on changing the (fairly confusing) text here to something much easier to read anyways, so this is just a stopgap fix/bug.
– Ben Kelly StaffMod
Jan 12 at 22:47

The removal of the badge count information next to a user's avatar and reputation was intentional. While that information was not of critical importance by any means, I did find it informative and interesting.

Can you speak to the reasoning behind removing it, since it doesn't seem to be a matter of needing that space for layout purposes (overflowing the width parameter there bumps that whole line down to a new line anyway)?

• The reasoning here is basically "less info > more space > less wrapping". In the majority of cases (for "normal" usage), the user cards as-is do not wrap to a new line, but adding the badges back would cause them to do so. From testing, the things that cause the line wrapping the most often are 1) many, long tags 2) adding Staff+Mod badges 3) long community wiki text. Using the MSE greatest hits page as our benchmark is a little misleading because all three of those things are very abundant here! Check out the Stack Overflow greatest hits page for more a more typical example.
– Ben Kelly StaffMod
Jan 14 at 15:40
• A very informal study: MSE greatest hits first page, ~50% wrap. SO greatest hits first page exactly 2 posts wrap. If I get some time later, I'll write up a quick (local) script to add badges to those pages and see how many more wrap.
– Ben Kelly StaffMod
Jan 14 at 15:41

I mainly visit Stack Overflow on a mobile device and my main entrypoints are the "newest tag questions" of various tags. I then read through the question titles, filter out the ones I do not know anything about and open the rest in a separate tab. In the old mobile view I can see 5 questions at a time, whereas in the current responsive tag view I can only see 2 at a time. In the responsive "home" I can see 4 questions and on the new "greatest hits" I see 3. So rolling the new post summary to the tag view would improve the information density for me, whereas rolling it out to home would decrease it. Also it's still worse than the good old mobile UI.

Now the main difference between the new UI and the current responsive "home" seems to be the question's body excerpt, which I won't read anyway as either the title catches my attention and I visit the question or I do not. Would it be possible to omit it somehow from the new tags view in favor of having more questions in view?

• It is definitely possible to remove the post excerpt - we'll be doing this on views that previously already did so (such as the home page). In the spirit of maintaining data compatibility, we are not currently planning on removing excerpts from screens that currently have them (and vice versa). This is always subject to change, but that's the current plan.
– Ben Kelly StaffMod
Jan 19 at 15:40
• In regards to data density, I just did an informal test locally. All tests were done on MSE, in the Chrome web tools, with the device viewport set to iPhone SE, with the view scrolled so the top of the first question is at the top of the page. On the old mobile views, I get ~6 posts on home and /questions/tagged/foo. On the responsive versions I get 4.5 and 2.75 posts respectively. On greatest hits I get 3 posts with excerpt and 4 posts without. The biggest vertical space takers are (in order) - Post excerpt, wrapping titles, wrapping badges, stats moved to the top (vs left), user info.
– Ben Kelly StaffMod
Jan 19 at 15:46

It might be worth mentioning in the context that above a certain resolution the title "1,000 questions" and the message below it are moved from the bottom of the page to the sidebar.

When that happens it squeezes the post summaries into narrowness leaving only an empty gutter below the message. I wonder if there could be a better solution for this and what it would be?

A larger resolution:

A smaller resolution:

• Maybe put the stuff that's already in the right sidebar for other pages (i.e. filters, tag watching widgets, hot network questions)? Jan 13 at 21:13
• When transitioning the post list to the new design, I did a few light touch changes to this page to give it a similar layout to the other pages under /questions (it already kinda did, but was broken). @CaveJohnson is on the right track, in that the other pages have more "stuff", so the gap isn't as apparent. I'll see how big a lift it is to add the rest of the sidebar to this page as well, but no promises if that would be a whole project in itself.
– Ben Kelly StaffMod
Jan 14 at 15:00

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.

• This might be better as a comment rather than an answer, since it doesn't really address the post. You could also edit it yourself if you feel so inclined! Jan 18 at 23:51
• I'll consider this on topic-ish since it is about greatest hits and I did change that wording as part of this change ;). I wrote the copy there and I agree that it could probably use a lookover from a copy editor. That sentence made sense to my developer brain since the check is boolean (large views OR large feedback). Believe it or not, the description now is better than what it used to be, which was most certainly written by a developer... I'll leave it at that.
– Ben Kelly StaffMod
Jan 19 at 15:53
• Btw my main gripe (such as it is), is about the ungainly phrasing "large amount of", usually better written as "much" or "many" etc. (In this case, because it's being applied to both a countable and an uncountable noun, that doesn't really work though...) Jan 19 at 21:52
• Yes. Large number of views [countable]; large amount of feedback [uncountable]. yesterday