New responsive Activity page

Question

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:

Switched to the smaller version of questions / answers from the Profile page, thus changing the font size.
Reduced the padding on individual items while maintaining this newer aesthetic.
Grouped questions, answers, tags, and reputation as columns again.
Upstreamed a smaller font size to our design system’s post summary component.
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.

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.

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.

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!

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
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
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
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
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
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
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 Is Sad And Angry, Dec 8, 2021 at 10:06
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
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
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
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 - SupportingStrikers, Dec 8, 2021 at 20:21
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
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 - SupportingStrikers, Dec 8, 2021 at 22:24
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
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

bad_coder · Accepted Answer · 2022-01-14 18:22:32Z

-1

bug

In the track next badge dialogue the awarded badges aren't centered in their boxes.

answered Jan 14, 2022 at 18:22

bad_coder

1

Add a comment |

bad_coder · Accepted Answer · 2022-01-16 05:44:06Z

-1

support

I've often asked myself: Is the check mark centered inside the circle of the "Congratulations! You've earned" message...?

References:

What is the fastest way to find the "visual" center of an irregularly shaped polygon?

Centroid

answered Jan 16, 2022 at 5:44

bad_coder

1

Add a comment |

bad_coder · Accepted Answer · 2021-12-10 01:19:57Z

-2

bug

The following is subtle but can be noticed (as usual, once you notice you can't take your eyes of it.)

In the reputation graph the bars are not evenly spaced. That means the white line separating the bars does not have the same width everywhere.

Using Windows 10, Firefox 95 (64-bit), 1920x1080, rev 2021.12.9.40958.

answered Dec 10, 2021 at 1:19

bad_coder

1

That's because you don't have a display monitor with infinite resolution. The bars have some particular width and they don't exactly divide into your particular display pixels evenly.
– Robert Longson
Dec 10, 2021 at 7:27
@RobertLongson implement a function that divides by resolution takes the modulus of pixels and pushes them to the edges instead of spuriously intertwining the remainder pixels between bars. It didn't used to look like this and I haven't change resolution. Isn't responsive design supposed to apply to every element in the UI?
– bad_coder
Dec 10, 2021 at 7:35
2

You'll potentially get big gaps at one or other edge, and you'd need to determine the pixel resolution of the display which browsers won't necessarily tell you to prevent fingerprinting.
– Robert Longson
Dec 10, 2021 at 7:37
@RobertLongson fair enough on the fingerprinting, but if the edges are kept symmetric it's still a better solution than using different sizes of gaps between bars.
– bad_coder
Dec 10, 2021 at 7:39
1

IIRC, SE used to manually specify each bar width and each gap (which hasn't been necessary for a long time, but was in old browsers when the page was first created). At this point, none of the bar widths or gaps are manually set. I'm unsure when that changed (as I'd already fixed it in the CSS I applied to those pages in order to have them be responsive with the old layout, so didn't notice a change). I suspect it changed with the redesign, at least one of the redesigns, but it might have been after this report as a resolution to this issue. You should check to see if this is still an issue.
– Makyen
Jul 17, 2022 at 16:13
1

@RobertL At this point, unless the browser intentionally degrades the rendered display to prevent tertiary methods of determining the viewport width, then it has nothing to do with preventing fingerprinting. Browsers usually display things correctly and just report wrong, or no, information to JavaScript. The way SE now does that reputation graph relies entirely on the browser choosing equal bar widths and equally applying the specified gap (specified only once by SE for all of the bars). So, now, any inconsistency in the bar width or the inter-bar gap is entirely in the browser.
– Makyen
Jul 17, 2022 at 16:17

Add a comment |

bad_coder · Accepted Answer · 2021-12-10 09:23:08Z

-2

feature-request

In the tabs of the All actions page can we have more use of colors in the labels? Something to make fuller use of the Stacks component indicators.

Quoting Aaron Shekey from this post

We switched to a new Stacks component, which is how indicators like this will look moving forward. By switching, it allows them to be themed, and the color red is generally reserved for errors.

This can also have the practical use of aiding in to visually inspect lists. Mods and power users have asked for other visual queues that help differentiate.

edited Dec 10, 2021 at 9:23

answered Dec 10, 2021 at 8:20

bad_coder

1

3

I am very much in favour of not making a christmas tree here. The wording is clear enough. The only thing that disturbs me in this screenshot is the use of capitals for the outcome, while not for the action (suggested, reviewed) that was taken.
– Luuklag
Dec 10, 2021 at 8:35
3

Mods and power users asked for more color in the tooling. Dark mode is full of color.
– bad_coder
Dec 10, 2021 at 12:09
At least all the information is there. You can do it yourself with a script.
– Unconsidered
Dec 10, 2021 at 18:04
what about accessibility for colorblind?
– java-addict301
Dec 10, 2021 at 23:04
3

@java-addict301 what about it? Accessibility isn't reduced for the colorblind by the site's current use of color. Or is it? You tell me.
– bad_coder
Dec 10, 2021 at 23:07

Add a comment |

bad_coder · Accepted Answer · 2021-12-11 00:59:22Z

-2

bug

In the "Choose which tag badge to track" window, there's a text that reads:

showing top 100 of 161 available badges; please use the search box to find a specific badge

Looking at the Stacks content guidelines for periods and semicolons I think the first letter should be capitalized and there should also be a period. That would be consistent with the other long sentences in the empty sections of the profile page.

The text should also be centered when the number of badges varies. Compare the text placement when there are no badges and when there are no badges.

edited Dec 11, 2021 at 0:59

answered Dec 11, 2021 at 0:49

bad_coder

1

1

This is not one of the new changes. Also, the positioning has been reported here already: Tag badge tracker - "showing top 100 of x available badges" text is in the wrong position.
– Sebastian Simon
Dec 11, 2021 at 1:09
@SebastianSimon The devs asked for anything from the activity page, so this is from the activity page. On focus with what the devs asked: "if you find anything broken, missing, or out of place, please let us know. We appreciate it!"
– bad_coder
Dec 11, 2021 at 1:13
The dialog didn’t change at all, though.
– Sebastian Simon
Dec 11, 2021 at 1:14
1

The fact that this dialog is not yet responsive is a different issue which has been reported by Suraj Rao.
– Sebastian Simon
Dec 11, 2021 at 3:49
@SebastianSimon for the readers sake it's probably best if you delete the comments now, this has changed in the meanwhile and is partly done (requires the full stop and capitalizing the first letter).
– bad_coder
Jan 7, 2022 at 12:23

Add a comment |

Michał Lipok · Accepted Answer · 2021-12-10 00:37:41Z

-3

I do not see all reputation history graph lines

https://stackexchange.com/users/6922986/micha%c5%82-lipok?tab=reputation

As you can see in the following screenshot I have some reputation points on other sites: https://stackexchange.com/users/6922986/micha%c5%82-lipok?tab=accounts

answered Dec 10, 2021 at 0:37

Michał Lipok

9012 silver badges12 bronze badges

7

Your answer doesn't seem to be about the activity page in the user profile.
– Robert Longson
Dec 10, 2021 at 0:50
Url relates it to user profile.
– Michał Lipok
Dec 10, 2021 at 3:20
But in fact it opens after I click in network profile, while I was in user profile
– Michał Lipok
Dec 10, 2021 at 3:23
This isn’t a bug. See Reputation line graph only has one of three lines. This is the network profile, not the activity page. Your post is unrelated to the recent changes.
– Sebastian Simon
Dec 10, 2021 at 3:42

Add a comment |

Unconsidered · Accepted Answer · 2021-12-07 22:36:02Z

-5

There's also no net reputation change for Sep 10th, 11th nor on the 12th. Does the showing of a 0-change for the 8th mean something happened?

If so, what?
If not, why is it there?

answered Dec 7, 2021 at 22:36

Unconsidered

1,1291 gold badge5 silver badges14 bronze badges

6

Not my downvote, but this is known behaviour for the old UI (perhaps even status-bydesign).
– Glorfindel Mod
Dec 7, 2021 at 22:47
2

I see. Thank you. It still doesn't make any sense to me :) I have no idea what happened on Sep 8th that gives me a no-reputation change. I can see this on other user's profiles as well.
– Unconsidered
Dec 7, 2021 at 22:51
6

This may provide some insight: "No reputation changes on this day"... OK, why did you tell me this?
– Glorfindel Mod
Dec 7, 2021 at 22:51
1

I was just reading that post :) "it's also technically very hard to remove" seems like a very odd reason. I mean, I can make a user script to remove everything that has a zero-change with no children. Not seeing how that's "technically very hard".
– Unconsidered
Dec 7, 2021 at 22:55
6

I don't think that this is scoped to the current design changes, as this is already existing behaviour that hasn't changed anything. Voting to delete this answer.
– Luuklag
Dec 8, 2021 at 9:07

Add a comment |

Stack Exchange Network

New responsive Activity page