-264

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

59
  • 215
    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. Dec 8, 2021 at 2:22
  • 118
    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 :/ 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? 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. 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
  • 88
    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. 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. 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. 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
  • 44
    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

1
4
5
6 7 8
7

In the Badges page the last row always has a single badge.

screenshot of badges page

3
  • 1
    Not always. Dec 10, 2021 at 8:03
  • Well, other than the last page… Dec 10, 2021 at 21:54
  • 2
    52 badges per page seems a very odd choice if the idea is to have 3 column display (3*17+1), it makes sense for a 4 column display though (4*13), perhaps this is a legacy of an older 4 column design?
    – Andrew
    Dec 17, 2021 at 14:45
7

Followed posts no longer indicate post status

The Followed list previously highlighted some posts with red background when they were either closed or deleted (I don't remember if closed were included but definitely deleted). This highlighting no longer exists.

The "[closed]" that appears in main page list titles does not appear in the new followed UI either.

This makes trying to clean up and unfollow useless posts a tiresome task now not to mention that unfollow used to work with a single click and now requires two.

Please add some decent front end filtering tools to all these lists. Overall the level of user interactivity in the UI is not up to modern day standards.

7

When selecting a badge to track, tag badges for tags with long names overflow their container. Here are two examples:

enter image description here enter image description here

1
  • 1
    Thanks for the bug report! We've shipped a fix.
    – Dan Cormier Staff
    Jan 24 at 23:24
6

I suggest some tweaks to the CSS of the post summary class: On the left I changed the border from 16 to 10 px, and the font-size from 1.46...rem to 1.16....rem (only changed the 4 for a 1). This makes so much more room available on the page.

enter image description here

Another great option would be to prevent the post score (why is it called votes btw?) from going onto a new line at lower screen widths. There really isn't any use for that too happen, it will only create a lot of whitespace. This can easily be done by switching flex-direction of the post-summary from column to row.

Doing that I'm able to fit both 5 answers and 5 questions on the same place that only had 5 answer and half a question in the original:

enter image description here

6

Please remove "Navigation View all activity pages".

Screenshot of Activity page

I feel that the text is superfluous. The drop-down menu makes it obvious to the user that it is related to navigation.

3
  • 1
    It's a bit weird that the drop down also is repeated in the section heading. I think the overall design of the navigation among the sections could be improved, although I think it makes sense to try to get version 1.0 of the responsive page done with as little structural change as possible.
    – ColleenV
    Dec 8, 2021 at 18:56
  • 1
    Same for settings page. Dec 8, 2021 at 21:00
  • 1
    Related: this report and the comments. Dec 9, 2021 at 10:44
6

Just compare English and non-English layouts:

MSE

ruSO

The latter looks ugly even on my ultrawide monitor.

3
  • The right hand side is probably caused by breaking the line (responsive-design) because the "view all 139 answers" in Russian doesn't allow enough space to keep the tabs on the same line.
    – bad_coder
    Dec 8, 2021 at 21:48
  • @bad_coder yep, whatever, that ugly. BTW just noticed that on MSE left block is Questions, and on ruSO Answers is on the left side. It seems that block with more items displayed first. Dec 8, 2021 at 22:04
  • 1
    @αλεχολυτ Which to place first, questions or answers, is based on the activity of the user whose profile is being displayed. It has nothing to do with which site, just what the user has done on the site (i.e. if the system thinks that the user's activity on that site is more weighted towards answers or questions.
    – Makyen
    Dec 9, 2021 at 5:19
6

There used to be a color difference when I had (recently) opened a post (in the list of Questions / Answers). Please get this difference back!

3
  • 2
    I am not sure if I understood this... Could you add a lit more context so we know exactly what is the issue and if this is impacting usability?
    – Vanny StaffMod
    Dec 8, 2021 at 19:18
  • 6
    I think this is referring to links changing color when they've been visited. Currently, the Stacks post summary doesn't have a :visited style. I think it's worth considering.
    – Dan Cormier Staff
    Dec 8, 2021 at 20:00
  • Gotcha! Thanks for explaining @DanCormier
    – Vanny StaffMod
    Dec 8, 2021 at 22:42
6

A vertical separator between daily bars in the reputation graph is missed.

screensnhot of reputation graph

0
6

Implement simple GUI layout change option so we can revert back to the horizontal layout version prior 8 december roll-out on SO.

See my other comments here

6

The misaligned text bug reported here seems to have been fixed, but now replaced by random paragraph-returns making one line in to two (but only on my Law Activity page, not my MetaSE):

enter image description here

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

1
  • 2
    I wasn't able to reproduce it. Hopefully, we can gather more feedback.
    – Vanny StaffMod
    Dec 8, 2021 at 18:38
6

On Law using an Android v.11 Galaxy XCover Pro, with Google app version 12.41.19.23.arm64

The columns in my reputation's bar graph highlight (or is it lowlight as they go a much darker shade?) when selected as though they are performing a function but none is performed.

Is there a missing link / pop-up?

enter image description here

0
6

Can the activity tab on the profile page please be made to remember the last sub?

Like this:

Profile --> Activity --> Comments

I usually visit "All actions" or "Votes" to go back to posts I've been interacting with. Now that takes two clicks every time, because it defaults to "Summary".

While I'm at it: if I'm at the "Comments" sub-sub-tab, it doesn't need to tell me that each comment is a comment. Could do with some more content there.

1
  • 5
    Indeed saying that each comment is a comment is not needed - same for most other sub-sub-tabs: each accept begin accepted, each badge being awarded, each revision being revised, each review being reviewed, each suggestion being suggested.
    – Marijn
    Dec 10, 2021 at 10:07
6

On Area 51 Discussions, the Reputation widget is trying to load a reputation graph, but it doesn't show (presumably because Area 51 itself is on a very old version of the Stack Exchange engine):

enter image description here

A similar bug is affecting the Stats block:

enter image description here

3
  • The “Stats” on the Profile also try to load something. I get a 500 Internal Server Error for GET https://area51.meta.stackexchange.com/users/rank?userId=userId&_=timestamp. Dec 8, 2021 at 0:57
  • I am wondering if this one deserves a dedicated post? Because it is Area51...
    – Vanny StaffMod
    Dec 10, 2021 at 14:37
  • 1
    It wasn't broken before, AFAIK ...
    – Glorfindel Mod
    Dec 10, 2021 at 14:46
6

On Stack Overflow the bottom row of the Tags section currently has more height than the other rows.

screenshot of tags reputation sections

1
  • This happens on every site, not just SO.
    – Justin
    May 6 at 16:59
6

On Law using an Android v.11 Galaxy XCover Pro, and Google app version 12.41.19.23.arm64

Clicking the "next tag badge" cog icon incorrectly brings up the "next badge" pop-up instead.

I noticed this because I was tracking another tag badge which has been replaced by what I guess is the system's automatic recommendation.

enter image description here

enter image description here

4
  • 1
    Also repro-ed on CGCC and CGCC Meta on Chrome 95, on Windows 10 Dec 8, 2021 at 8:29
  • 1
    Is this the same as Choosing a new tag badge to track is not possible?
    – Glorfindel Mod
    Dec 8, 2021 at 8:56
  • @Glorfindel It's definitely similar and related as they both incorrectly link to "next badge" instead of "next tag badge", but I don't think it's a 100% duplicate as the "available" tab in my pop-up is populated unlike the one in your link which is empty.
    – Rick
    Dec 8, 2021 at 14:40
  • I see the same on "all" sites. However... on other sites, apart from SO, having switched to tracking "my next privilege" and switching back to "a tag badge instead", clicking the "Next tag badge" cog now doesn't do anything; no popup at all!? However, another weird thing... I see the option for "Next tag badge" when viewing someone else's profile! Clicking the cog (on someone else's profile) displays my own "next (normal) badge" popup!? And selecting one changes the next (normal) badge I'm tracking on my profile.
    – MrWhite
    Dec 8, 2021 at 23:26
6

I think it's worth mentioning that, should devs and readers not have noticed, the "Research Assistant" badge can be line wrapped due to having a whitespace in the middle. I don't know if it's necessary given the available space. I also haven't seen this happen for any other badges like "Strunk & White" for example.

screenshot of badges in impact section

1
  • 1
    This doesn't happen on Meta Stack Exchange, but on other sites (specifically TeX - LaTeX, where I noticed it); I've noticed the use of a different badge size, which could influence the remaining space.... perhaps?
    – Werner
    Dec 14, 2021 at 17:14
6

The Answers and Questions boxes are almost useless now, because they cut off almost all questions short. Here are mine from my biggest profile. Just 1 out of 10 are readable in full. And the others? It's not just that they're cut off at the end, but they're cut off in the middle, before you can tell what they're about. The important part of each question is not visible!

  • Can you be a Christian if you don't believe in ... what?
  • What is the difference between the Trinity ... and what?
  • How do Christians who emphasise the ... what?
  • How do Christians who believe in ... what?
  • How does the essence-energies distinction ... what?
  • When was the "Evangelist" title first ... what?
  • Are there published testimonies from ... who?
  • What are the major problems that ... what?
  • Which Biblical theology frameworks are ... what?

Screenshot of the Answers box Screenshot of the Questions box

3
  • 2
    After all the bugs are ironed out, this is what the conclusion will boil down to: Is it better to have a row of tabs, or a side column with those tabs (- links being the same)? The effects on seeing text truncated in the summaries (given the average title length) is an annoyance that can only be mitigated by going back to a row of tabs, or expanding those already short rows to accommodate and wrap the title (which would impact the section on the side visually, since e.g. Answers could have all long titles and Questions all short (or none) - creating a 2x row imbalance.) Ahh, the conundrum.
    – bad_coder
    Dec 12, 2021 at 3:24
  • 1
    @Bad_coder the full titles are shown in the reputation box. I'm sure they can work it out for these boxes too. Dec 12, 2021 at 3:37
  • Thing is, in the reputation section rows aren't aligned with the neighboring Tags section so it's easier wrapping them. (They also don't have an ending timestamp which further cramps the character count - I haven't found an maximum character count title post yet to see how it looks.) But the front-end team have thus far always found a solution for everything :)
    – bad_coder
    Dec 12, 2021 at 3:42
6

In the tabs of the All actions page the labels have varying alignments with the subsequent text that give an overall sense of inconsistency and a more or less varying impression of being misaligned depending on the tab.

screenshot of labels in all actions tabs

6

The dot on badges aka "the bling" in the badges section of the summary page appears cut on the left side and misaligned vertically (happens using responsive design and using zoom) in Firefox.

screenshot of badges section in summary

6

?

On desktop the top of my profile looks like:

Next badge on wide screen

As you can see there is a lot of wasted space in badges area. Despite this the new and the next badges are placed on the single row producing word wrapping for the name of next badge.

At the same time on narrow screen same blocks look much better:

Next badge on narrow screen

My suggestion here is to place "new badge" and "next badge" items on the different rows on wide screen, e.g.:

Suggested design

Or take other actions to prevent word wrapping on wide screens that makes narrow design much better than in desktop mode.

Update:

It seems that on some cases there are two rows already, but has another issue that the text may overlap the next badge item border:

Two rows for some cases

6

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)

3
6

The amount of whitespace on the "All actions" page is extreme.

all actions page

Why is the timestamp on its own line? Why is there a massive left gutter?

Moving the timestamp into the flexbox row and reducing the left column width from 96px to 70px IMO makes this much easier to read and maximises information density

revised all actions row layout

6
  • 1
    I think this is a duplicate of this FR.
    – bad_coder
    Jan 10 at 1:14
  • 3
    @bad_coder you're right; I missed yours because I was searching for "all actions". Looks like some of the pages have been revised since your screenshots with the type ("comment", "revision", etc) now on the same row as the title albeit with a ridiculous amount of left padding
    – Phil
    Jan 10 at 1:29
  • 1
    I think the left padding is because the names of some review items can be very long. So to keep the items in all the tabs of the "all actions" page with the same alignment the items with shorter names end up having that distance to the left edge. I don't know what the solution for this could be....
    – bad_coder
    Jan 10 at 1:38
  • I'd argue that this would be a good use for an actual <table> :D
    – Phil
    Jan 10 at 1:40
  • 2
    Please no tables, flex is the way to go :)
    – bad_coder
    Jan 10 at 1:40
  • 1
    Perhaps a grid then. That way the first column could automatically size to the largest cell. The way it's implemented with flex right now means you have to set an arbitrary width to try and fit strings
    – Phil
    Jan 10 at 1:43
6

Please let me see the status of my flags even if I don't have any "helpful actions".

I joined a new site to raise a flag. With no prior history (especially no helpful flags) this is how my activity page looks: screenshot of activity page with "measure your impact" placeholder where my flag and edit stats should e

There's a placeholder where my stats should be, providing a link to my flag summary. If my flag gets declined I'll probably be stuck with this state too. As a power user I know where to find the flags without a link, but this is something that users might miss. I don't know how the UI could accommodate this, which is why I think this is a feature request. UX-wise it's more like a bug.

0
6

Voting corrections/reversals for votes on questions only, when you are the one who cast the votes, don't clearly indicate what happened there. Per a moderator on the site, the case depicted below was one where I cast votes on questions (so, no change in reputation on my part) that were then reversed by the script. Usually, voting reversal includes some votes on answers, or is seen by the person who was voted _upon, so there is some indication of a reputation change.

Given that this is unclear/confusing, could the entry/line item here for such reversals either:

  1. Not be shown at all when there is no reputation change (probably the best option since this is the Reputation view?

    or

  2. Indicate that the reversal was on questions only, thus there was no rep change to record here (could be preferable if you want there to be a public record for all reversals regardless of rep change for the user)?

voting corrected message on the reputation page, but no indication of the amount or direction

2
  • In this case, based on public information, this is three votes which you made to questions by a single user which were reversed by the automatic reversal script when it was run at 03:00UTC on 2022-01-26 (which usually means the votes were in the 24 hours prior to that time). Given that they were votes you made on questions, the reversal of them has no impact on your reputation, so no reputation change is indicated. Overall, the displayed information is accurate. So, not a bug. OTOH, it's not clear to me that the system should show that to the voter when it doesn't impact their reputation.
    – Makyen
    Jan 26 at 15:58
  • @Makyen Thanks, I started updating the answer based on your info in chat but got distracted before I could finish.
    – TylerH
    Jan 26 at 16:17
5

Aesthetically, the Answers tabs should have their time stamps line up between the questions and answers. Currently they don't:

enter image description here

1
5

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

In my Reputation sub-menu the text in my graph's pop-up, that shows the date and rep, is bottom aligned making it look odd.

enter image description here

NB, this is not a duplicate of Columns in Reputation graph are highlighted upon clicking but no function is performed which relates to the graph in the top-line Activity page.

5

Regarding this previous post about inconsistent punctuation it also happens in other detailed sections of the activity page other than in the summary. For example in the Undelete tab in the votes page:

enter image description here

5

Clicking the badge icon next to a tag in the Tags page opens the page for that tag-badge, not the page for that tag-badge for that user.

  1. Visit this
  2. Click the small brown icon next to
  3. It leads to https://stackoverflow.com/help/badges/267/python, but I'm pretty sure before this change it lead to https://stackoverflow.com/help/badges/267/python?userid=17242583
0
5

Currently the daily bars in the reputation graph touch the top. The graph used to have a margin on top which I think was visually more appealing. Can a margin be added so the bars don't touch the top?

enter image description here

0
5

Please add the hyperlink (https://stackexchange.com/users/19021247/random-person?tab=accounts) for Accounts in Summary tab.

enter image description here

Mobile view has the hyperlink.

1
  • 1
    I think this is a duplicate of this earlier FR which is the general request of having links on section headers.
    – bad_coder
    Dec 9, 2021 at 19:54
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 .