-267

Update 2 - December 8, 2021: We’ve shipped a bunch of refinements over the last 24 hours or so. We’re going through the bugs and design requests and marking them with the proper tags. There’s a lot here, so it’ll take us a minute. We’ve done the following to address your design feedback in the near term:

  1. Switched to the smaller version of questions / answers from the Profile page, thus changing the font size.
  2. Reduced the padding on individual items while maintaining this newer aesthetic.
  3. Grouped questions, answers, tags, and reputation as columns again.
  4. Upstreamed a smaller font size to our design system’s post summary component.
  5. Various smaller visual refinements.

Update 1 - December 7, 2021: This was rolled out on Stack Overflow and all Stack Exchange network sites.

After receiving and incorporating feedback the community (thank you!) we’ve launched the responsive Activity page! The most common feedback we received was that we’re straying too far from a summary for the summary view. This feedback was not only valuable but also correct!

We reconsidered the value of information shown on post summaries and condensed them significantly from our initial redesign. We also made tons of little tweaks and fixes along the way. We’ll be triaging bug reports as they come and we know there’s still room for improvements, so suggestions are welcomed and encouraged! Thank you in advance!

Original post - November 19, 2021:

In our continued effort to deprecate our mobile views, we’ve turned our attention to the Activity page. We’re planning on shipping the changes next week sometime soon and wanted to show it off first.

Check out this 5 minute tour of the Activity page and let us know what you think. The feedback we’ve received so far has been invaluable, not only in identifying bugs, but also in helping us reflect and be thoughtful about the changes we’re making.

What’s new?

Horizontal navigation turns vertical

The navigation includes all the same items but is now placed vertically to the left of the column of sections to fix moments like this. It’ll allow us to add more functionality in the future without breaking the layout or introducing any wrapping.

horizontal navigation on the activity page

Two columns become one

The most obvious change might be the switch to a single column for Activity sections. All of the same (and a little additional) information is here, but now it’s within a single column that squishes comfortably all sorts of browser widths.

Post summaries

We’ve switched post summaries to use the post summary component in our design system. In the process, we’ve added more details about each post such as views, answer counts, tags, and an answer excerpt on answers. This component has been designed to be responsive and show information in a compact but digestible format.

new post summary component in wide browser window new post summary component in mobile-width browser window

Summary stays on “Summary”

Quick reference information will only be shown on the Summary page (which is the base Activity page). It made sense to show “Summary” on Summary and to not show it elsewhere. Less stuff to scroll past to get to the stuff you want to on other Activity pages.

activity answer page without summary section

A handful of other changes

In this process, a lot of little things were tweaked and polished. This includes empty states, improvements to the reputation changes view, accessibility improvements, and much more. No functionality has been lost so if you find anything broken, missing, or out of place, please let us know. We appreciate it!

redesigned activity page shown in both wide browser window and mobile-width

Improve this question
59
  • 218
    Somehow I missed this thread entirely until just now. With features like flexbox and grid solidly supported for a few years now, can you speak to why desktop users are forced into this one column layout now? It probably works great for mobile users, but it's a clear and huge regression for people with bigger screens, like laptop and desktop users. I mean, here is a comparison (granted, MSE vs SO, but still): i.stack.imgur.com/QNRcM.png On the old layout, I can see 6 full sections. On the new layout, I can see... 1 section and a little bit extra.
    – TylerH
    Dec 7, 2021 at 19:29
  • 34
    In addition to the tablet optimized size of objects which alone makes this a horrible experience, most of the summaries are now presented to the right on my desktop screen instead of in the middle. Why?
    – Ted Lyngmo
    Dec 7, 2021 at 22:18
  • 34
    I use the all actions view to look at the comments I've made so I can check questions that interested me and see if there was a resolution. This new view is much less usable for me than the old one. Everything is way too tall. Why does the time need it's own line? Put that next to the type of action. The votes view is also full of wasted space. I don't see a way to see individual flags I've raised either, just the number of helpful. Not a fan of this new layout.
    – Retired Ninja
    Dec 8, 2021 at 2:22
  • 119
    Man, I read this whole thread several times a few weeks back, and somehow it had never dawned on me that any of this would affect me on desktop. It was framed as improving something about mobile users, so I didn't worry about it too much. Now that it's been deployed to SO...yeah, I hate it. It feels big and clunky and mobile-like, even though I'm on a 4K monitor. So much less information :/
    – Steve Bennett
    Dec 8, 2021 at 5:38
  • 31
    The fonts, size, proportions, positions gives much strain on eyes. Is there any way to bring it back to normal? atleast to someone who opts to?
    – All Іѕ Vаиітy
    Dec 8, 2021 at 6:00
  • 84
    What is responsive on a page with the whole content in one column? WIde screen, narrow screen - all looks the same. The same unusable.
    – Neumann
    Dec 8, 2021 at 6:53
  • 92
    Late for the party, but I'll explain my downvote: you made awesome work with the view for mobiles and small screens, but in the process made it appear way worse than before on PC with big screen, which is what I happen to use. Enormous amounts of whitespace, and overall feeling it's a page designed only for mobile.
    – Shadow Wizard Love Zelda
    Dec 8, 2021 at 10:06
  • 65
    Everything is way too big, when I open a profile page I practically see nothing of interest to me because everything is big enough to read it from across the room, but nothing is really shown! This doesn't make anything more clear or less cluttered, it just adds to scroll wheel wear! (this is on a 1600x900 14" screen)
    – Skillmon
    Dec 8, 2021 at 10:34
  • 89
    I downvoted because: (1) The new design is, at first glance at least, terrible: vastly less information per unit area, to no apparent benefit. (2) The oblivious disconnect in tone between "We implemented this awesome new feature we're sure you'll love, isn't it great?" versus the nearly unanimous actual feedback the feature is receiving.
    – Steve Summit
    Dec 8, 2021 at 12:33
  • 59
    This design is perfect... for vertically oriented screens around 3 inches wide. The problem is the bulk of use on this site isn't on mobile devices, it's on desktop. People are asking questions and seeking help while coding. The old design was far better on desktop screens - this one takes up too much space, uses too large of fonts, and requires a lot of horizontal eye tracking and vertical scroll to read anything - not to mention much of what was on the page is lost, like seeing more than 5 tags or accounts.
    – Andrew
    Dec 8, 2021 at 19:43
  • 37
    Like others said, this is a major turn off. Horizontal goes vertical? But I am using a 16:9 screen. Exclusively. Horizontal is a desirable. And I thought responsive means roughly the same is easily configurable by the user.
    – Jyrki_Shog9Supporter
    Dec 8, 2021 at 20:21
  • 40
    As someone who typically spends hours a day in stackoverflow and a lot of time watching activity in my reputation page (609k reputation), the newest changes are way less usable. I work on a 36" screen and it feels like there's only about 1/3 the amount of information on my screen now and things always start out collapsed, causing more clicks to see less information. This is a worse UI in all regards on the desktop with a decent size screen than what we had before - please put it back. I actually thought some setting must have been accidentally changed, but no, I'm stuck with this.
    – jfriend00
    Dec 8, 2021 at 22:03
  • 43
    When this plan was first announced why was it not PROMINENTLY explained that it applies also to users others than those on mobile devices? I'm sure you would have gotten most of today's feedback in due time that way rather than having to face today's critical sh*#¤%storm. I feel bad about airing my displeasure in a non-constructive way, but I cannot help it. This update is simply awful on my laptop. Even before the update there was too much whitespace on the sides, and now it is much worse.
    – Jyrki_Shog9Supporter
    Dec 8, 2021 at 22:24
  • 37
    I have changed my upvote to a downvote. Initially, it looked like you were going to provide improvements, but after it went live and I saw how bad it looked like I change my vote. I think the majority agrees that more whitespace is a bad thing. We want to see as much information as quickly as possible. We don't want to scroll or press secondary buttons to load more content.
    – Dharman
    Dec 9, 2021 at 13:03
  • 45
    After years being on SO, I joined Meta SE today to request: please rollback. Please. I had no complaints about the old layout. While the new design looks nice, it's difficult to use. Great on phones, but consider, how many people are coding on their phones? So again, please rollback. Please. Thank you.
    – pylang
    Dec 9, 2021 at 22:26

217 Answers 217

Reset to default
1
…
4 5
6
7 8
5

In the All actions page all the tabs have the labels misaligned vertically with the icon and the title.

screenshot of Closure in All actions

Improve this answer
5

The rows between the Tags and Reputation sections are misaligned.

enter image description here

Improve this answer
5

The tag-badge settings cog has this pop-up on hovering:

enter image description here

Quite reasonably it seems to lead to the tag-badge dialogue.

On left clicking the cog, this pops up:

enter image description here

Which leads to all badges except the tag-ones.

Expected behaviour would be to lead to the tag-badges pop-up dialogue or display of progress.

Windows 10, Brave, latest.

Improve this answer
2
  • 1
    The same issue appears to have already been mentioned here and here. (Although this now appears to be fixed for me.)
    – MrWhite
    Dec 9, 2021 at 9:51
  • Ah, fair enough, they weren't listed in the community post though (as far as I could see). As long as they get to know anyhow. @MrWhite
    – W.O.
    Dec 9, 2021 at 9:56
5

The spacing between rows in Votes cast seems too much and out of place with the rest of the layout (no other section uses so much distance between rows).

Scrolling around the summary I get the impression it would integrate better visually if the two rows were closer together.

screenshot of comparison between sections

Improve this answer
5

The addition of a dangling, parenthesized number of "unhelpful" flags in the IMPACT box seems unnecessary (the number (15) below):

enter image description here

If some flags were "unhelpful," should one perhaps include "unhelpful edits" as well (for example, a count of posts that were rolled back)? No... More motivation for this being somewhat meaningless is the fact that the number only constitutes a portion of what a regular person might consider "unhelpful." The above 15 "unhelpful" flags are only those declined, not including those disputed, which seem like it may also be considered "unhelpful."

enter image description here

In short, I don't consider it adding much, if any, value.

Improve this answer
2
  • I see your point, but I don't see the value in removing that information.
    – user1271772
    Dec 17, 2021 at 8:10
  • I don't presently the number in parenthesis under the flags. (Maybe because I haven't raised unhelpful flags in a while?)
    – bad_coder
    Dec 21, 2021 at 3:29
5

Answers showing no text

BGSE

It shows the score and the date stamp of the answer, but it should still be showing the title of the question, some way to identify which answer is which. This also breaks linking to the answer, since the empty <div class="flex--item fl-grow1 pr12"></div> is what normally contained the a tag links.

SO

Confirmed an issue across multiple sites (BGSE and SO) and with different sorting (newest shown on BGSE, votes on SO). Using Chrome Version 96.0.4664.93 (Official Build) (64-bit)

Improve this answer
3
5

The badges icons are not perfectly aligned if one of the groups is empty. I don't dislike the current layout but it's noticeable and can be distracting. Perhaps it would be better to have them aligned?

enter image description here

Improve this answer
1
  • 1
    This triggers me more than it should. It's such an obviously basic test that just as obviously wasn't done.
    – Ian Kemp
    Dec 10, 2021 at 13:59
5

Android v.11 Galaxy XCover Pro, with Google app version 12.41.19.23.arm64

I've had a look at a number of different users on various sites and think this only affects my profile - not that I'm paranoid or anything!

My "Questions" box on both my Law and Meta SE Activity pages is misaligned.  It looks like it's got an extra line at the bottom which has pushed it up a few notches.

enter image description here EDIT on further examination following @Joundill's comment, it seems the misalignment is due the lack of:

View all n questions

Improve this answer
1
  • 1
    I've got the same thing. It's because the text "View all X answers" is there for your answers, but you don't have enough Questions for it to appear for your questions.
    – Joundill
    Dec 13, 2021 at 19:59
5

Missing space between bounty amount and opening parenthesis in the 'Bounties' tab in my profile's 'Activity' tab

In the 'Bounties' tab in my profile's 'Activity' tab on one of the SE sites, the bounty information displayed above the post title looks like this:

The part within the blue box reads:

+50(ends in 6 days)

That is, there is a space missing between the bounty amount, '+50', and the information about the duration of the bounty, '(ends in 6 days)'. It looks like this under both, the 'Active' tab as well as the 'Offered' tab.

Improve this answer
0
4

I'm not sure if this is a bug but the columns in Votes cast stop being vertically aligned if you go below a threshold of resolution.

Up until one resolution (also happens using zoom)

screenshot votes cast 150

On a lower resolution (also happens using zoom)

screenshot votes cast 170

Improve this answer
0
4

Not sure if this question is still followed by SO staff/developers, but please bring back the highlighting of the deleted posts in the "Following" tab.

Previously it was easy to unfollow the deleted posts, since they were highlighted with a pink-ish background, and we had quick access to the "Unfollow" functionality. The entry looked something like this: enter image description here

Please notice the pinkish background, and also how easy/intuitive I was able to un-follow the post. Now I have to click on the 3-dot menu to get a single option that reads "Unfollow", and no indication the post was deleted or not, which puts a great burden on my "following behaviour".

Can we have these two back?

  • highlighting of deleted posts
  • "Unfollow" link instead of one-item-menu

The menu might save space on smaller screens, but we can have both, depending on the screen size, with media queries.

Improve this answer
0
4

Deleted posts are no longer highlighted in the "Following" tab

This happens on the dark theme, didn't check if it reproduces on the other one too.

This was really helpful for cleaning up the following posts list, as the delete event doesn't bump up the post at the top of the list, even if sorting by activity.

Previously, deleted posts had a redish background, maybe that can be restored, or another indicator be added.

Improve this answer
3
3

Please show more number of badges when the mobile is in portrait orientation.

enter image description here

As we can see in the screenshot, the whitespace takes a lot of area and it can be used to show more badges when mobile is in portrait orientation.

Improve this answer
3

The reputation graph in the summary section disappears using a smaller display of responsive design (also if using zoom).

Until one level of narrowness

rep graph at 120% of 1920x1080

Beyond that level

rep graph at 120% of 1920x1080

Improve this answer
1
3

Answer with score 0 contains green background color but it's not marked as correct. enter image description here

If I go to the Answers page, it is not seen as correct: enter image description here

Another :

enter image description here

The date for this specific answer is outside the table view.

Improve this answer
2
3

Tooltip on view count missing in new layout.

Is this feature not implemented in new layout?

enter image description here

When I hover on the "5k views" nothing shows up in tooltip. Can this be a bug to be worked on?

enter image description here

Improve this answer
3

In Activity / Reputation changes of questions vs answer are not distinguished. So cannot distinguish question/answer rep in case if the question has self answer.

Activity / Reputation

Improve this answer
1
  • How did I miss this?
    – bad_coder
    Dec 25, 2021 at 21:32
3

On the Activity -> Summary page, Answer timestamps isn't getting word wrapped and gets hidden under the questions.

Overlap

Using the regular

Chrome Version

Here's the bigger picture:

Overlap bigger

Update

Seems it's not only the individual longer words, but at certain times the text wrappings doesn't happens at all.

overlap_again

Improve this answer
6
  • 1
    Appears the title won't wrap propperly because it's one word.
    – Luuklag
    Dec 21, 2021 at 9:37
  • @Luuklag Possibly you are right, I'm trying to look at the DOM, incase I can suggest something.
    – undetected Selenium
    Dec 21, 2021 at 9:38
  • 1
    @Luuklag I think to wrap the longer words instead of classname v-truncate1 we need another classname v-truncate2
    – undetected Selenium
    Dec 21, 2021 at 9:43
  • Using v-truncate2 will put it on two lines, but then the issue still persists for me, as the first word is too long for the answer box. So the size of the boxes should be set so that the timestamp takes prevalence over the title
    – Luuklag
    Dec 21, 2021 at 9:46
  • 1
    @Luuklag Added one more observation which is a generic case.
    – undetected Selenium
    Dec 23, 2021 at 11:52
  • Already reported.
    – Sebastian Simon
    Dec 24, 2021 at 7:03
3

Change "up votes" to "upvotes" and "down votes" to "downvotes" in Votes cast section of Summary tab.

Screenshot of Votes cast in Summary

Improve this answer
4
  • 3
    This should have some context. In the internet age the compound word "downvote" has become a proper noun and is lexicalized. Thus it can be written as you propose but it will cause strangeness to a number of readers and personally I have mixed feelings if I prefer it one way or the other. (Does the SE style guide mention this?)
    – bad_coder
    Dec 8, 2021 at 21:54
  • 4
    @bad_coder There’s Can we downvote "down-vote" and "up-vote" in the Help Center?, which suggests that “upvote” and “downvote” are the canonical spelling.
    – Sebastian Simon
    Dec 9, 2021 at 11:11
  • @SebastianSimon that post is about removing hyphens from tags. It doesn't make a canonical conclusion. (But excellent link, I had read that post.)
    – bad_coder
    Dec 9, 2021 at 11:21
  • 3
    The “Justification” section is about how the spellings “upvote” and “downvote” should be preferred over “up-vote”, “down-vote”, “up vote”, or “down vote”.
    – Sebastian Simon
    Dec 9, 2021 at 11:23
3

Tooltip for badges overflows the page width

Using Firefox for Android, the badges tooltip increases the page width beyond the screen resolution.

The tooltip:

Activity page showing badge tooltip cut off

Scrolled sideways to see the rest:

Activity page scrolled sideways to see the badge tooltip

Improve this answer
1
  • I caught a similar cropped tooltip when hovering over the trophy icon next to some usernames FYI, see i.stack.imgur.com/5oSqE.png (originally raised as a bug here).
    – sp00m
    Jan 28, 2022 at 17:46
3

Tooltip for tracking rep / privileges is too narrow.

Fix the many lines by having a larger tooltip, (or at least make them consistent by adding the missing newline between "and" and "a"!).

The tooltip in question, with nearly every word on a separate line

Improve this answer
0
2

There's a considerable amount of empty space below the User feed that serves no purpose and could be truncated to save scrolling.

screenshot of space below user feed

Improve this answer
1
2

There is a lot of white space if there is just one badge in Badges section in Summary tab.

Screenshot of silver page from Badges section in Summary tab

Please try to minimise the white space.

Improve this answer
6
  • So if this box is next to the bronze badge box and that box has three badges, how should this silver badge box look like? If the white space was removed, it would no longer line up with neighboring boxes at the bottom. What is your suggestion?
    – Sebastian Simon
    Dec 9, 2021 at 17:30
  • @SebastianSimon Maybe the size of the silver badge icon could be increased..
    – Random Person
    Dec 9, 2021 at 17:31
  • 3
    Maybe moving the badge to the top of the box (directly underneath the icon & heading) would feel more natural?
    – zcoop98
    Dec 9, 2021 at 17:33
  • 2
    @RandomPerson Varying icon size feels more inconsistent.
    – Sebastian Simon
    Dec 9, 2021 at 17:47
  • @SebastianSimon Maybe the badge could be at the centre...
    – Random Person
    Dec 9, 2021 at 18:02
  • 1
    The problem is there are 3 groups of badge class and the text of having no badge takes up that amount of space, you can see it in this screenshot. So there isn't really anything there to collapse because the 3 groups are always shown having the same height.
    – bad_coder
    Dec 9, 2021 at 19:57
2

On my profile: https://stackoverflow.com/users/5314940/micha%c5%82-lipok I can't click "hidden accounts"

enter image description here

Improve this answer
3
  • What would you expect to happen if it was clickable?
    – Robert Longson
    Dec 10, 2021 at 0:51
  • 1
    Want to know what is hidden. Then I will know why is hidden.
    – Michał Lipok
    Dec 10, 2021 at 3:18
  • 2
    Click on the View all 14 accounts link to the right.
    – Robert Longson
    Dec 10, 2021 at 7:25
2

I think it would be better in some instances to stretch the Badges section and shorten the Reputation section. Reason being the badges are visually more appealing because they have color and while the colored boxes currently look cramped the Reputation section looks overstretched.(Pictures taken on MSO.)

screenshot rep badges impact sections

Here's another interesting example

screenshot rep badges impact sections 2

Improve this answer
2

This might be related to the Windows Segoe font having a lower baseline, but I thought it might be worth mentioning since the recent reputation gain in the summary section now has seemingly two equal elements with different alignments. The overall reputation gain and the tag reputation gain are showing differently.

screenshot of recent rep gain in summary

Improve this answer
2

It's noticeable in the track Next tag badge the score and answers title counters above the progress bars don't have the same alignment. This is seen clearly when put side by side.

screenshot of track badge progress

Improve this answer
2

In the Navigation drop down list the descenders are cut off. This happens for the y in Summary; for the g in Badges, Tags and Following; and for the p in Responses and Reputation.

enter image description here

Improve this answer
2

Can we please have larger fonts in the "Select your next badge" dialogue? If the layout could be flexible starting at 3 columns it would also make it easier to get an overview of the badges.

screenshot of select your next badge dialogue

Improve this answer
2

In the Reputation page using the Graph tab the y-axis label has insufficient letter spacing. Some of the letters "literally" don't have any spacing between them causing reduced readability.

screenshot of reputation graph in reputation page

Improve this answer
1
…
4 5
6
7 8

You must log in to answer this question.

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