-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.sstatic.net/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
    Commented 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
    Commented 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
    Commented 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
    Commented 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
    Commented 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
    Commented 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
    Commented 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
    Commented 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
    Commented 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
    Commented 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
    Commented 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
    Commented 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
    Commented 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
    Commented 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
    Commented Dec 9, 2021 at 22:26

217 Answers 217

Reset to default
1
…
4 5 6
7
8
2

The scrollbar in the "Select next badge dialogue" doesn't have a margin separating it from the badges.

screenshot of scrollbar in select next badge dialogue

Improve this answer
2

When viewing deleted questions, the votes aren't vertically aligned with the answers and view count:

enter image description here

Improve this answer
1
  • Fun fact, all three boxes surrounding these numbers have different heights in pixels for me. 50 for votes, 49.3833 for answers and 52 for views
    – Luuklag
    Commented Jan 12, 2022 at 15:37
2

There seems to be a JavaScript bug. To reproduce:

  1. First choose a different tag badge by clicking the cog in Track tag badge in the REPUTATION section.

  2. Then try to choose another badge in the Next badge of the BADGES section. The second dialogue in the Next badge won't accept your choice and after a few clicks errors out with the message:

The requested tag does not exist.

Notice the error message seems to imply it's referring to the choice in dialogue 1 but gets thrown when you're clicking in the other dialogue 2 (in that order).

screenshot of summary section

(I can't test this better because after a few clicks in both the badge choice dialogues I was IP banned for too many requests today. I wasn't using any userscripts so just a few clicks with vanilla browsing was enough to trigger the ban.)

Improve this answer
2

Building on the Stacks color indicators I think the negative question record cross mark in the BADGES box of the Summary section should be red.

screenshot negative question record

Related issue for the positive question record check mark. I'm following Ben Kelly's advice to keep each item separate since these may be fixed at different times and dividing the reports makes it easier to mark them with a status change.

Improve this answer
2

In the REPUTATION box of the Summary section the Top tag and Next privilege progress bar aren't aligned on smaller resolutions. It ends up looking misaligned for no apparent reason.

screenshot top tag and next privilege

Improve this answer
2

I think the on hover background of the blue expand arrow of posts has insufficient contrast in the All actions tabs like Revisions and Posts. It would be more visible with a darker shade of blue.

screenshot of blue expand arrow

Improve this answer
2

The tooltip for Unfollow has too much margin both in the Summary and the Following pages.

screenshot of unfollow tooltip

Improve this answer
2

The reputation change indicator on your activity page does not include reputation restored from deleted posts, causing it to show an inaccurate number.

For example, the screenshot of my reputation page below shows -3, from 3 posts I downvoted since I last visited. However, I also gained 8 reputation from posts getting deleted, each of which I had downvoted at some point. This means that since I last visited my rep change is really +5, not -3.

Please fix this incorrect number:

Screenshot with annotations highlighting the rep change indicator, what its value should actually be, and delineating each line change of reputation on the page so viewers can check my math, so to speak

Improve this answer
1

The dot on badge tags aka "the bling" in the Badges page appears cut on the sides (using responsive design and using zoom) in Firefox. This has the noteworthy property of only affecting bronze badges on the left-most column and silver badges in the middle column (can you believe it!?). (The elusive little dot does it again.)

screenshot of badges

Improve this answer
0
1

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

The wording in the "Tracking" cog's pop-up is inconsistent.

Regardless of what is being tracked, the pop-up always gives the option to either:

Track my next privilege

Track a tag badge instead

enter image description here

Q: Shouldn't "instead" be on the privilege option if one is already tracking the tag badge - as in my screenshot? (Or, in my opinion, deleted entirely as the highlight and tick make it obvious what the alternative is.)

Improve this answer
1
  • 1
    Nice catch, this been pointed out once before on MSO.
    – bad_coder
    Commented Dec 13, 2021 at 1:26
1

In the impact section the locked icons aren't aligned with the other items on the same line.

screenshot of impact section

Improve this answer
1
  • More technical term: the baselines are misaligned.
    – Sebastian Simon
    Commented Dec 21, 2021 at 3:13
1

In the badges section the Newest title is slightly misaligned with the Next Badge titles. I don't know if this is on purpose and both elements are supposed to have different sizes but it adds a visual awkwardness.

screenshot badges section

Improve this answer
1
  • Related to this post since it reported a previous misalignment.
    – bad_coder
    Commented Jan 4, 2022 at 18:02
1

In the badges section of the summary page the badge names are too low within the badge. This was a change made after December 12th.

screenshot of badge name

Improve this answer
1

The first line in the reputation mini graph has a smaller background than the other lines. It makes the fonts overflow the line compared with the others.

screenshot rep mini graph

Improve this answer
1

Help text overflows the dialog box on Activity -> Summary page for the icon Choose between choosing your next privilege and a tag badge

tag_badge

Improve this answer
1
1

I don't know if this is browser specific but, in Firefox tab separators cab be slightly thicker at times when you're clicking through them although there's no clear pattern to it.

screenshot tab separators

Improve this answer
1

The scores and the button text have different alignments when comparing the "Next privilege" modal in the Summary section and the "Next badge" in the Badges section.

screenshot modals next privilege and next badge

Improve this answer
1

The "View all activity pages" has a small margin that becomes blurred by the outline after selecting the drop down list. This is also inconsistent with how the margins are spaced in the remaining sections.

screenshot navigation drop down list and title

Improve this answer
1

Tooltips in the impact section currently have different levels of alignment.

screenshot of impact section tooltips

Improve this answer
1

In the summary section, currently the distance between the first cog and the label when tracking "Next tag badge" is different from if you're tracking Next privilege within the REPUTATION box. This last one also has the same spacing between cog and label as the Next badge in the BADGES box. I think it would be overall more consistent visually if the spacing between label and cog were the same for all 3 elements.

screenshot of cogs and labels in summary section

Improve this answer
1

If you use the dialogue to Track tag badge in the REPUTATION section a few times, after a while the on hover highlight on the exit button gets stuck. Afterwards when you enter the dialogue again the highlight is already there and doesn't change, it looks in fact slightly different with a second box around it from the normal hover.

(I wasn't able to determine the exact conditions to reproduce this but it happens fairly often.)

screenshot of track next tag badge dialogue

Improve this answer
1

If you've cast 1 single reopen vote and the post is short (around 3 lines) the timestamp on the right side isn't put in its usual place below the bottom of the <> "less/greater than" characters. Instead the time stamp floats on the middle line of the post.

screenshot of votes cast page

Improve this answer
3
  • 2
    Can we please do something in a general way to deal with the pluralization bug, come on... Also: should this count as a double-bug report? :)
    – 0Valt
    Commented Jan 6, 2022 at 1:09
  • 1
    @OlegValter I was thinking of grouping them under tchrist's post as a sort of sub-index...
    – bad_coder
    Commented Jan 6, 2022 at 1:11
  • 3
    yeah... Really tired of seeing this bug over, and over again. Either there should be a pluralization helper, or the stats should be formulated in pluralization-independent way, e.g. "Votes: 1", "Answers: 2", etc. This release has a baffling number of occurrences of this bug
    – 0Valt
    Commented Jan 6, 2022 at 3:51
1

Building on the Stacks color indicators I think the positive question record check mark in the BADGES box of the Summary section should be green.

screenshot positive question record

Related issue for the negative question record check mark. I'm following Ben Kelly's advice to keep each item separate since these may be fixed at different times and dividing the reports makes it easier to mark them with a status change.

Improve this answer
1

In the Accounts section the site name is aligned lower than the rep and badge counts. Usually this could make sense but as it is I think the difference in alignments is a bit too much and ends up not looking good.

screenshot of network accounts

Improve this answer
1

I'm going to make a comparison of the same element in three different places. In the Hidden communities and Accounts sections you can see the site icons are on the same line but in the YOUR COMMUNITIES top bar the text is center aligned with the icon and the icon is larger than the text.

I would make the argument that having text and icon both center aligned looks better.

screenshot of site icons and site names

Improve this answer
1

Going from low resolutions to very low resolutions the Navigation DDL title has the font size going below the font size of the View all activity pages underneath it. This seems like an edge case that's inconsistent with how titles/links are usually sized for the sections of the page.

At low resolution

screenshot of Navigation title very res

At very low resolution

screenshot of Navigation title very small res

Improve this answer
1

The tooltip for Remove bookmark has too much margin both in the Summary and the Bookmarks pages.

screenshot of remove bookmark tooltip

Here's a screenshot of the reputation tooltip that has comparable length. (I include it because I had second thoughts if tooltips should have a minimum length that didn't depend on content.)

screenshot of reputation tooltip

Improve this answer
0

Can we have the net score on the tag shown, instead of the reputation gain on it?

I could for example have a reputation gain of 10 on a tag with 2 upvotes and 5 downvotes. Then my tag score would effectively have a change of -3.

Tag increments show the reputation gain on the tag

Improve this answer
4
  • 4
    It’s always shown the reputation gain. This is unrelated to the recent changes.
    – Sebastian Simon
    Commented Dec 9, 2021 at 19:53
  • 1
    @SebastianSimon You believe this should be a separate Question?
    – Unconsidered
    Commented Dec 9, 2021 at 19:54
  • Seems like a pretty creative feature request to me. +1
    – bad_coder
    Commented Dec 10, 2021 at 11:52
  • I think this is currently implemented with tool tips and all. I haven't played with it enough but I think it will look great. Can probably be marked status completed.
    – bad_coder
    Commented Dec 11, 2021 at 1:00
0

In the summary some section titles like Questions and Bookmarks and the link "View all N..." don't have the fonts starting in perfect alignment. It's noticeable both using responsive design and normal resolution. Using Windows 10 Firefox 95.0.1 (64-bit) rev 2021.12.20.41044

enter image description here

Improve this answer
1
  • 1
    This seems to be normal kerning. Both boxes have the same left boundary and the same font.
    – Sebastian Simon
    Commented Dec 21, 2021 at 3:13
-1

If a user has 1 single answer it doesn't align with the center of the section.

screenshot of answers and questions sections

Improve this answer
2
  • I think this is a consequence of the empty sections taking up more space than single-item sections and the two boxes necessarily having to align at the bottom, in the current design, as can be seen in these reports: 1, 2, 3.
    – Sebastian Simon
    Commented Jan 6, 2022 at 7:12
  • @SebastianSimon in the terminology that's used regarding the summary of the profile page "a section" refers usually to "answers", "questions" (or "badges", etc) sections as shown in the screenshot. Regarding the CSS I would expect all sections, regardless if a section is empty or has 1 item, to have a flex container with the content center aligned. This specific case of a section with a single item hasn't been reported yet, and it's the kind of edge case that's always worth mentioning.
    – bad_coder
    Commented Jan 6, 2022 at 17:08
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 .