36

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

20
  • 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
  • 10
    @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
  • 5
    @Rob it's an unlinked page
    – bobble
    Jan 12 at 19:23
  • 4
    @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
  • 5
    I wish more work went into improving the UX instead of the UI.
    – Travis J
    Jan 12 at 22:34
  • I'm on my phone so writing a full answer would be awkward, but I'd like to see the "answers" label right aligned with the "votes" and "views" text, rather than it being aligned based on the "answers" box's right border
    – Nick
    Jan 13 at 1:10
  • 2
    Cool! Think you could mark this report as status-completed then?
    – Ollie
    Jan 13 at 1:16
  • Under "Where we are currently using this design" -- the user activity bookmarks and questions views look much different (and worse) than the screenshots in this post. Am I missing something?
    – LShaver
    Jan 13 at 3:33
  • 1
    @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.
    – TylerH
    Jan 13 at 20:03
  • 6
    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.
    – ColleenV
    Jan 13 at 21:36
  • 1
    5 Users 48% Gnome made me laugh - but what does the 48% even refer to? The number of characters changed? 2 days ago
  • 2
    @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
    2 days ago
  • 1
    I think the means your favourite page 😁
    – Journeyman Geek Mod
    yesterday
  • 2
    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
    yesterday
18

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.

2
  • 3
    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
  • 2
    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
    16 hours ago
16

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:

screenshot

1
  • 13
    The new component is using the same body truncation function as the old code, so as you say, this is preexisting. Text truncation tends to be a much harder problem than it appears on the surface, so these types of issues are not uncommon. This issue is not something we plan to address as part of this work.
    – Ben Kelly StaffMod
    Jan 13 at 16:14
11

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.

enter image description here

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

enter image description here

3
  • 3
    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
  • 2
    @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
9

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

first "C" is uppercase for list view

first "c" is lowercase for flair within a 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.

4
  • 3
    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
  • 2
    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
  • 1
    @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
  • 2
    @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
6

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.

1
5

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:

screenshot greatest hits larger

A smaller resolution:

screenshot greatest hits smaller

2
  • 2
    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
  • 2
    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
    2 days ago
5

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)?

2
  • 2
    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
    2 days ago
  • 3
    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
    2 days ago
5

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?

1
  • 3
    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.
    – charlietfl
    yesterday
5

I mainly visit StackOverflow on a mobile device and my main entrypoint 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 anyways 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 question in view?

You must log in to answer this question.

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