104

Update

As of 2021-10-21T18:05:38+00:00 this is now live across the network. If you find any issues, you can post them as answers on this question. Try to give some details about your browser and platform if that’s relevant. Thanks for all the feedback so far!

Original Post

We’ve been chipping away at the user profiles since the last round of changes. I’m back to share a quick video tour of the final round of changes to the profile on our way to responsiveness. We’d like to deploy these changes later this week, but first wanted to let folks know what we’ve got planned.

Things should now wrap and squish, allowing you to view the entirety of the profile on any device or window size without having to do any horizontal scrolling. Let us know what you think.

We’ll update this post (and title) when the changes are live. They’ll be going live network-wide.

Some changes

  1. Columns should all line up and have a spacing of 24px. No more weird gaps!
  2. Headers across each section are now unified along with their various calls to action
  3. Each section now has a card aesthetic
  4. Question lists have all moved over to the right column to unify line length and general aesthetic
  5. The tags section is now a list
  6. We’ve gotten rid of some of the blank slates. For example, if you don’t participate in the network, we don’t need to show the network.

Screenshots

If you want to see this in action, check out the video tour. Since the feature is live, the screenshots below are linked, rather than embedded, to reduce the amount of necessary vertical scrolling on the page.

Desktop

Desktop screenshot

Tablet

Tablet screenshot

Phone

Phone screenshot

26
  • 7
    Great work, Aaron! Waiting to see this live ASAP. What about the Activity tab and the remaining sections on the Settings tab though? You mentioned in the video that this was the "final round"? Or were you referring to the Profile tab only?
    – 41686d6564
    Commented Oct 19, 2021 at 10:15
  • 12
    Both the Settings and Activity sections are being worked on now and will have a similar aesthetic. Settings is way closer. This post is just about the Profile tab, and after this next deploy and round of bug fixes, it will be considered “done”.
    – Aaron Shekey StaffMod
    Commented Oct 19, 2021 at 13:09
  • 2
    @Ollie should be up on the top right of any user. If they've got meta accounts, or Teams, it's in a dropdown list of "Profiles".
    – Aaron Shekey StaffMod
    Commented Oct 19, 2021 at 15:26
  • 6
    Our messWithOllie boolean must have been set to true 😜 Sorry about that. We've actually been making some changes that should be unrelated there, but I've let some folks know to keep a look out.
    – Aaron Shekey StaffMod
    Commented Oct 19, 2021 at 15:48
  • 2
    Now that the changes are live, I think there's no need to have those long images in the post as they take too much space on the page (and bandwidth too). Maybe they should be converted to links?
    – 41686d6564
    Commented Oct 22, 2021 at 20:22
  • 4
    @41686d6564 Agreed. Nice suggestion. Edited!
    – Ben Kelly StaffMod
    Commented Oct 22, 2021 at 20:29
  • 2
    @AaronShekey Applaud the use of video finally for UI features. Should be used a lot more! The Help Center would benefit tremendously as would onboarding
    – charlietfl
    Commented Oct 31, 2021 at 19:04
  • 1
    Good job concentrating on UI design and clean-up. Like documentation, the UI (non-critical parts like profiles, etc.) are too often left undone and remain a hodge-podge of input collected across a handful of profile pages. Glad to see the polish being applied to an already great site. Commented Nov 7, 2021 at 10:12
  • 2
    Fully responsive, but you're still forcing people onto the mobile site when using a mobile device. Why?
    – Larnu
    Commented Nov 24, 2021 at 13:14
  • 3
    @Larnu Same reason for most things, the code sucks, lol. That mobile site sniffing code has been way too persistent and full of bugs. The good news is it'll be torn out entirely by the end of this year. It's not worth fixing the thing we're gonna delete.
    – Aaron Shekey StaffMod
    Commented Nov 24, 2021 at 16:21
  • 3
    @Larnu There is a bug in the code that's forgetting your setting. Not worth fixing since it's all getting ripped out in less than a month. Sit tight. I agree, it sucksssssssssssssssss.
    – Aaron Shekey StaffMod
    Commented Nov 24, 2021 at 16:27
  • 1
    Can I ask what you mean by the term "fully responsive"? The meaning of the phrase seems to have drifted over time and I'm really not at all sure what you mean by it. Commented Nov 25, 2021 at 17:35
  • 3
    @MichaelKay Responsive web design: en.wikipedia.org/wiki/Responsive_web_design. For us, that means we get all the same functionality regardless of the size of the window or device—without any horizontal scrolling.
    – Aaron Shekey StaffMod
    Commented Nov 25, 2021 at 21:32
  • 2
    While I don't want to go into details.... I can confirm some mod tools have been enhanced and that includes responsive design
    – Journeyman Geek Mod
    Commented Dec 2, 2021 at 10:27
  • 3
    Would you still like us to post bug reports due to these changes as answers to this question, or should we be posting them as new questions at this point?
    – Spevacus Mod
    Commented Jan 19, 2022 at 18:31

55 Answers 55

1
2
5

The "Top tags" section takes about twice the height now while having lots of white space in the middle. Please make it more like an old style for desktop view:

enter image description here

  1. Show 5 tags instead of 6;
  2. Make the first one full-line and the other ones half-line;
  3. Make tag names (and maybe numbers as well) on each level different in size.

On smaller screen sizes they will just wrap and stretch to a full line.

4
  • 2
    It takes up more space, yes, but I think presenting it as a consistent list is much more readable. 🤔
    – Aaron Shekey StaffMod
    Commented Oct 25, 2021 at 20:37
  • 3
    @AaronShekey The purpose of the old design was to visually show a "weight" of each tag (like a tag clouds seen on some sites), which IMO was more readable even if you wouldn't read the stats at all. Ideally the sizes should correspond to the score % rather than having fixed sizes.
    – EvgenKo423
    Commented Oct 27, 2021 at 8:15
  • 6
    I've got a TODO to explore adding that back. We can still provide weighted tags in a list.
    – Aaron Shekey StaffMod
    Commented Oct 27, 2021 at 15:53
  • 1
    @AaronShekey what was the decision on weighted tags? Commented Jan 19, 2022 at 14:08
5

The badges that showed on hover over the communities list are gone. Can we have them back?

screenshot of communities list in user profile

5

For the semi-narrow page we see that badges blocks are split in 2 rows. Top row contains "gold" and "silver" badges blocks and the bottom row contains "bronze" block:

Badges

Since the gold badges have more weight on SE sites I suggest to split badges blocks in different manner, i.e. leave "gold" on the first row, and other blocks on the second. E.g.:

Suggested badges

1
  • 4
    This is just flex-box doing what flex-box does. I'll see if I can make gold span the row you want, but it's really dependent on content that's very specific to the user.
    – Aaron Shekey StaffMod
    Commented Nov 1, 2021 at 15:27
5

I don't know if this is a change resulting from the changes to responsive, but the buttons are nearly unreadable with the light gray text, this is on Stack Overflow profiles.

This is with the Chrome Version 95.0.4638.54 (Official Build) (64-bit) on Ubuntu 20.04.

orange with light gray text buttons orange with light gray text button light mode

3
  • 2
    Your screenshot looks way worse then it does when I directly view my own profile. Although I hardly think this has anything to do with this announcement. You are better off posting this as a separate question.
    – Luuklag
    Commented Oct 26, 2021 at 8:05
  • Is this a bug report or a support question? Commented Oct 26, 2021 at 17:46
  • I'm on the same browser, and the same OS, and I can't figure out how you're seeing this. This is what I see. It's at least readable, even though I agree that the contrast is pretty horrible and it fails all WCAG contrast standards. (Looks like it's white-on-orange, not grey-on-orange...?) Commented Oct 31, 2021 at 16:07
5

In the communities list some sites have the descenders cut off. This may be an issue specific to how Firefox handles fonts with lower baselines because it only happens with some list items that have descenders but not with all of them.

enter image description here

4

Checking my profile right now, I don't see how to list all the communities I'm a member of, as you can see in the image:

enter image description here

I can actually see them if I press Edit, but that would be to hide communities... Previously (I don't quite recall when) we were able to expand this list and see all communities. Was that intentionally removed?

1
3

Currently the "top overall" part of the Stats block could occupy three lines:

  1. icon
  2. top N%
  3. overall

Top overall

It was found on this profile for the page width in range [964..1190] pixels.

Looking at the GIF image above, you can see that all of these elements could fit into the single line. Could this please be fixed?

Ideally I'm expecting the following in result:

Expected result

5
  • Not sure what you mean. It's already one line, and on small screen that's what I see: i.sstatic.net/Axe1B.png so assuming you mean you want to split it to three lines (?) I'm against this request. Commented Nov 3, 2021 at 8:00
  • 2
    @ShadowWizardIsVaccinatedV3 don't believe my gif? Please check out this profile Commented Nov 3, 2021 at 9:01
  • Your local browser might be affected by userscripts, or just different kind of browser that act in different way than my own, I can only be sure of what I see for myself. Commented Nov 3, 2021 at 9:06
  • 1
    @ShadowWizardIsVaccinatedV3 I don't use userscripts. I can confirm same behavior (as in gif) for Chrome, Firefox even in private mode. Commented Nov 3, 2021 at 9:14
  • 4
    I can confirm that the linked profile behaves as shown in the gif for me (Firefox 94, Linux, no userscripts). What exactly happens most likely depends on available fonts etc. But clearly, the underlying issue is that the “top 22% overall” thingy is restricted to the left column instead of the full width of the Stats box; I have no idea if it’s feasible to change that. Commented Nov 3, 2021 at 9:17
2

I still get horizontal scrolling, albeit less than before:

User profile with right-side content hidden due to horizontal scrolling

I'm using Firefox 91.0.2 on Ubuntu 18 (91.0.2+build1-0ubuntu0.18.04.1).

7
  • 7
    That's the activity page, as indicated by the "Activity" tab being active. That's not what was made responsive. The responsive changes were made to the "Profile" page which is what other users see when they click your username. Commented Oct 22, 2021 at 23:57
  • 1
    Is it possible you’re zoomed in? Commented Oct 22, 2021 at 23:59
  • 2
    See this comment.
    – 41686d6564
    Commented Oct 23, 2021 at 9:44
  • @41686d6564 being worked on ≠ finished worked on, live Commented Oct 24, 2021 at 9:34
  • 2
    @VScode_fanboy I never said it was finished; quite the opposite actually. The author of this answer is reporting a "bug" about a horizontal scrollbar on the Activity tab. So, I'm referring them to a comment by an SE employee confirming that the Activity tab is not yet responsive as others have also pointed out in the comments here.
    – 41686d6564
    Commented Oct 24, 2021 at 9:37
  • 1
    @41686d6564 try to give the opinion-fact together with the link next time. :) Commented Oct 24, 2021 at 9:58
  • 2
    @CaveJohnson it seems that for manveti (as well for me) "profile" means entire group of pages (profile + activity + settins). So when I first saw the announcement says "A fully responsive profile" I expected to see all of these pages tuned for responsive design. Maybe the OP could choose another more obvious title for the post. Commented Nov 2, 2021 at 12:10
2

Profile image proportions are broken for some user profiles in a narrow view. E.g.:

Narrow Wizard

2

Switching profiles (main/meta) via dropdown on the top right corner always change the tab to "activity". It's very annoying since activity tab is not adapted for responsiveness yet.

profile switch

6
  • 2
    It only goes to "Activity" if it's your own profile; for other users, it goes to the "Profile" tab. (It always worked like this.) Commented Nov 4, 2021 at 19:21
  • @EmilJeřábek interesting is there a reason for such behavior. Commented Nov 4, 2021 at 19:24
  • I suppose the rationale is that you already know who you are, hence you are not particularly interested in the general information about yourself shown on the Profile tab; showing Activity is more helpful. Commented Nov 4, 2021 at 19:27
  • @EmilJeřábek but why change the current tab at all? I prefer to see same tab during switching profiles. Commented Nov 4, 2021 at 19:30
  • 4
    For mods, clicking a link to a profile always goes to Activity. This is super tricky and a really weird user experience, in my opinion. I'm not sure what to do about it, or what we can even afford to do. Here's a spicy take for a perfect hypothetical world: Why do we even have a profile and activity? They overlap a lot. I think those pages can be merged.
    – Aaron Shekey StaffMod
    Commented Nov 5, 2021 at 1:08
  • 1
    @AaronShekey I absolutely want the detail if I'm checking my profile -or someone's recent contributions in detail- but for most cases that's TMI and checking a user's profile tab gives a quicker digest (and that's most checks we'll tend to do). An argument can also be made that a lot of users are beginners and having 2 separate tabs avoids overloading them making for a beginner-friendly UX. Although, from a purely dev POV maintaining a single merged tab probably would make more sense...
    – bad_coder
    Commented Nov 6, 2021 at 0:30
2

Under my logins, there are logins named the type of login that they are.

For example, on my profile, it looks like

my logins page

And on another user's profile page it looks similar.

Is this intentional, and if it is, what is the reasoning behind it?

1
  • 4
    The changes made here only apply to the User Profile view page found at e.g. meta.stackexchange.com/users/current. I'd recommend asking this as a separate question so we don't accidentally lose track of it here.
    – Ben Kelly StaffMod
    Commented Oct 21, 2021 at 20:09
2

We seem to have lost timestamps on reputation changes prior to the current date. Was this intentional? It can be helpful for spotting serial voting at the very least.

2

Perhaps there is an inconsistency in alignments if we compare the Profile page with the Activity page.

The same "View all" links have different alignments with the section headers between pages. In the Profile page they are center aligned with the section title while in the Activity page they have an offset and aren't center aligned nor on the same line.

Profile page

enter image description here

Activity page

enter image description here

2

On the Profile page in the "Top network posts" section the site icons are offset relative to the score and the post text that are centered with each other. I think it would make more sense to center the site icons with the score.

screenshot of top network posts section

1

Please include the text

View all questions and answers

When a user has between one and ten (maybe a slightly different number, I’m not sure) of posts

Context: when a user has between one to ten(?) posts, the text “View all questions and answers” doesn’t show up.

Why I want this: it’ll be more consistent.

Example: here, under the top posts header.

4
  • 1
    Why? If it's a no-op, luring you to click it is just a distraction.
    – tripleee
    Commented Oct 25, 2021 at 14:47
  • @tripleee it would show you all of those users questions and answers, it wouldn’t be a no-op. (I might be misunderstanding what you meant by no-op). Commented Oct 25, 2021 at 14:48
  • 1
    @EkadhSingh I think what tripleee meant is that it would be redundant because you can already see all posts. No-op: en.wikipedia.org/wiki/NOP_(code)
    – 41686d6564
    Commented Oct 25, 2021 at 15:23
  • 1
    If all of the posts are already displayed, I don't understand the point of adding the links. I think it is a good thing that the text is dynamic, especially since I browse SE on my phone often. I appreciate it when the design doesn't take up space unnecessarily.
    – ColleenV
    Commented Oct 25, 2021 at 15:58
1

It seems that for the sake of consistency external site link icon should be added next to Network Profile link from dropdown "Profiles" menu on the right as it done for "View all" (Communities) link:

Profile page example

1

Despite enough space on block the long tag name is displayed reduced. The following image from my profile on ruSO Meta.

long badge name

1

Sorry to join the discussion so late. The responsive engine works fine overall, however, I noticed that on my SmartPhone, some icons were cut off. I mean the "Site switcher" icon.

Site switcher Icon is cut off

This makes it difficult to click on this icon because it is too close to the edge of the smartphone screen. I know that I can move the slider, but I think it would be better if the spacing between the icons would also get smaller.

6
  • 1
    You can scroll that header section with the cutoff icon. Try that and then lemme know if the icons are hard to tap.
    – Aaron Shekey StaffMod
    Commented Nov 12, 2021 at 23:35
  • As I said I know that I can move the slider and answering your question, trying to use them (scroll the slider) on 6,4'' Screen is difficult because it is thin slider, and the scrolling itself is more difficult than clicking on the cropped icon.. By the way, it looks as if there is a larger space between the first and second icons from the left, as if it is disproportionate to the remaining spaces between the other icons. Commented Nov 12, 2021 at 23:41
  • 2
    Your original post didn't have that text. ¯_(ツ)_/¯ You shouldn't have to use the slider itself, you can just fat thumb the whole content over.
    – Aaron Shekey StaffMod
    Commented Nov 12, 2021 at 23:44
  • 2
    Regardless, we've got some improvements around the top bar soon.
    – Aaron Shekey StaffMod
    Commented Nov 12, 2021 at 23:47
  • Aaaaa ... I can feel it now. So it is a matter of developing a new habit. Thanks. Commented Nov 12, 2021 at 23:47
  • Your original post didn't have that text. This is because it is sometimes difficult to express complementary sentences in a foreign language. Moreover, the mind does not always collect all the relevant facts at once. This is what the discussion is for, to exchange comprehensive ideas ;) Commented Nov 13, 2021 at 0:18
1

There is so much empty space in the profile view on the top. Can it be improved?

Profile's page top, with some empty space above About section

Maybe decrease profile pic and put Member For, Visited, GitHub Id and Location in one line

3
  • @RafaelTavares in that the user is only talking about the bottom space but here I am refering to both the bottom space and top space. Commented Oct 22, 2021 at 15:30
  • When you see it on Activity's tab, it doesn't seem too much empty space. I think you have this impression because of the space on the right side of the About title. I personally think this amount of space is ok. Commented Oct 22, 2021 at 15:54
  • 2
    While I agree with this, it's not particularly specific in terms of a fix, and because this problem is inherent in the redesign that caused it, it would require a lot of work in reverting/redesigning things, so an effective report on it should at least include a proposed fix via mockup or wireframe, etc.
    – TylerH
    Commented Oct 25, 2021 at 17:38
1

The "Reputation gained since" tooltip in the summary section has too much empty space in the right margin.

screenshot of reputation gained since

1
1

The personal site and member since fields have different text alignments. (I don't know why, maybe it's because the icons have different sizes?!)

screenshot of member since and site fields

It's also the case for the location and member since fields.

screenshot of member since and location fields

2
  • 1
    The first one is not a bug. That’s just normal kerning: the j always starts a little to the left. The second one is a bug: the location icon is 2px less wide than the others. Commented Jan 13, 2022 at 2:33
  • @SebastianSimon my initial thought was only reporting the location, but then I noticed the personal site and thought I might as well include it.
    – bad_coder
    Commented Jan 13, 2022 at 2:34
1

There's a resolution range where the icons and text get misaligned and the buttons have different sizes. This happens for profiles with the default texts that are shown in the screenshot.

screenshot of badges section in profile page

0

Please add back the consecutive days so everyone can see it.

Every day, I make sure to manually visit the Stack Exchange sites. This isn't easy, but somehow I managed to do it for almost 300 days. Now only I can see it.

  • It isn't a design choice; I can see it so it fits in perfectly.
  • It isn't a privacy concern; there's nothing private about this.
  • It isn't to save space; all it does is fill up what would be blank space

There is no considerable reason for this. For no considerable reason, you've just erased all of this effort overnight.

9
  • 2
    just get rid of the badges too
    – Kevin B
    Commented Nov 23, 2021 at 20:04
  • Some people feel pressured by such metrics. There is no advantage for you to show the metric, but there is a disadvantage for these people if this metric is shown. Commented Nov 23, 2021 at 20:09
  • @samcarter_is_at_topanswers.xyz The advantage for me is that I don't feel as if I've been working for a job and the boss suddenly announced that I won't get a paycheck.
    – Anonymous
    Commented Nov 23, 2021 at 21:48
  • 2
    @Anonymous You get "paid" for your work by knowing that you are helping others - not by some statistic Commented Nov 23, 2021 at 22:36
  • @samcarter_is_at_topanswers.xyz I mean the work of visiting the sites, not of contributing to Stack Exchange.
    – Anonymous
    Commented Nov 23, 2021 at 23:03
  • Why bother visiting if you don't want to contribute? Commented Nov 23, 2021 at 23:25
  • @samcarter_is_at_topanswers.xyz I do contribute, but I also visit the sites.
    – Anonymous
    Commented Nov 24, 2021 at 16:57
  • Re "do it for almost 300 days": Why? Only you could see it. Was it to take a screenshot and show it to others? Or hoping for diamond (not as in moderator) or platinum badges to be introduced at some point, including one as the next level above Fanatic? Or something else? Commented Dec 4, 2021 at 21:51
  • @P.Mort.-forgotClayShirky_q It was because I thought SE wouldn't erase my progress for no reason. Until they released the new profile pages, others could see it. Then SE rewarded my dedication by making it so only I could see it and didn't even bother to give a reason on the post.
    – Anonymous
    Commented Dec 4, 2021 at 23:46
-1

Right at the top of the profile page next to the user name. The moderator diamond seems to be slightly too high relative to the center of the blue moderator badge.

enter image description here

Using Windows 10 with Firefox 96.0

9
  • 4
    IMHO, that's seriously nitpicky (I wouldn't have noticed if you hadn't pointed it out). I highly doubt they'll spend developer time on fixing something so small.
    – Ollie
    Commented Jan 13, 2022 at 1:27
  • 3
    @Ollie that's your opinion and the devs didn't specify how large or small an issue should be for us to report it. If you want the site full of visual bugs, misalignment and inconsistencies speak for yourself but I'm willing to bet a lot of users (and probably the devs included) want it looking great!
    – bad_coder
    Commented Jan 13, 2022 at 1:34
  • 1
    I'm pretty sure that's just how these characters look in the font. Fwiw, it looks fine to me.
    – Laurel
    Commented Jan 13, 2022 at 2:03
  • 1
    @Laurel you know what they say: "Once you notice you can't stop looking at it." So I was looking forward for someone with expertise to explain it one way or the other (that's usually been the case so far with the responsive redesign changes). I could point you to several dozen responsive design posts where users made wild claims that turned out to be wrong and took big issue with posts the devs validated soon afterwards. So unless it's an expert commenting I'll take comments from folks trying to invalidate other people's contributions with several grains of salt.
    – bad_coder
    Commented Jan 13, 2022 at 2:16
  • 2
    Looks fine on Arch Linux, Firefox Nightly 98.0a1, Liberation Sans 12px. Wasn’t there one font that had a noticeably lower baseline which was mentioned a few times here? Commented Jan 13, 2022 at 2:27
  • 1
    Typing the text into the comment box under your feedback (answer) and taking a screenshot produces this result: i.sstatic.net/3VEys.png - I added a couple of characters to show the extent of the text area (to show the limits of "top", "bottom", and underline's expected position). --- It doesn't seem misaligned it's just that the crossbar on the "e" is slightly lower than centerline, making the centerline of the diamond seem too high. --- The badge's diamond is a hair higher in your screenshot.
    – Rob
    Commented Jan 15, 2022 at 6:48
  • 1
    @Rob that's a pretty good catch and the best explanation thus far.
    – bad_coder
    Commented Jan 15, 2022 at 6:55
  • 2
    bad_coder: This answer (and another) identifies the CSS Element as "s-badge__moderator". That post is too old to offer feedback on. ---- From the question: "As the labels are being laid out with a new component (that is more complicated than the Unicode ♦ ([IE: not the same])), and ... it has been difficult to get the positioning of the labels (in terms of margin between the display name, vertical positioning, padding, etc) to look "just right" in every instance across the site.".
    – Rob
    Commented Jan 15, 2022 at 7:58
  • 1
    @Rob when I get some time later I'll edit your 2 comments into my post. Really nice finds!!
    – bad_coder
    Commented Jan 15, 2022 at 14:07
-4

Dark Mode

(Across the whole network)

Do I need to say more?

We already have this on Stack Overflow and this is perfect. I think it should work across the whole network. I'm aware that some communities have background images that would need to be adapted, but it could be done progressively.

Also it would be nice if it used the browser's prefer-color-scheme attribute if the setting is not set or the user not logged in, because sometimes I view it not logged in (from another browser/device) and it is burning my eyes again.

3
  • “but it could be done progressively” — It already is. All this is planned, and pre-release builds of dark mode on more sites already exist. The “System theme by default” has already been suggested here: Make "system setting" the default for the Theme setting. Commented Oct 27, 2021 at 13:28
  • 14
    This is not related to the responsive profile changes, but I'm going to comment anyways ;). Dark mode across the whole network is something we're actively working towards, but there's still a lot of work to be done. We've been rolling out a lot of behind-the-scenes changes to network theming that users (usually) don't notice to get us closer to our ideal theming state. I don't have any news or a concrete timeline at the moment, so thank you for your continued patience on the matter.
    – Ben Kelly StaffMod
    Commented Oct 27, 2021 at 15:31
  • @BenKelly is this still in the works? Commented Apr 1 at 23:45
1
2

You must log in to answer this question.

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