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

22
  • 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
    Oct 19 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
    Oct 19 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
    Oct 19 at 15:26
  • @AaronShekey It's back now. It wasn't there, then it was.
    – Ollie
    Oct 19 at 15:29
  • As always... caching?
    – Journeyman Geek Mod
    Oct 19 at 15:37
  • 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
    Oct 19 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
    Oct 22 at 20:22
  • 3
    @41686d6564 Agreed. Nice suggestion. Edited!
    – Ben Kelly StaffMod
    Oct 22 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
    Oct 31 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. Nov 7 at 10:12
  • 1
    Fully responsive, but you're still forcing people onto the mobile site when using a mobile device. Why?
    – Larnu
    Nov 24 at 13:14
  • 1
    @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
    Nov 24 at 16:21
  • 1
    @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
    Nov 24 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. Nov 25 at 17:35
  • 1
    @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
    Nov 25 at 21:32

46 Answers 46

1
2
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
    Oct 26 at 8:05
  • Is this a bug report or a support question? Oct 26 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...?) Oct 31 at 16:07
5

Please bring back the posts (and tags) count

The "Top Tags" and "Top/Newest Posts" sections used to display the count like this:

enter image description here

But that's no longer displayed on the responsive profile:

enter image description here

Can you please bring it back?

3
  • Somewhat related: meta.stackexchange.com/a/371102
    – 41686d6564
    Nov 5 at 23:16
  • Hmm. I’d say the number of tags is a rather useless metric; the number of posts is more-or-less redundant, as the number of questions and answers is prominently shown above in the Stats box. Nov 6 at 10:23
  • @EmilJeřábek "the number of tags is a rather useless" I actually only care about the number of posts but I included tags for consistency and because other users might find it useful. "the number of posts is more-or-less redundant" I disagree. When one's looking at posts, the stats box is not visible. You'd have to a) know that it's there, and b) scroll up to find it.
    – 41686d6564
    Nov 6 at 10:28
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

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.

3
  • 2
    It takes up more space, yes, but I think presenting it as a consistent list is much more readable. 🤔
    – Aaron Shekey StaffMod
    Oct 25 at 20:37
  • 2
    @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
    Oct 27 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
    Oct 27 at 15:53
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. Oct 22 at 23:57
  • 1
    Is it possible you’re zoomed in? Oct 22 at 23:59
  • 2
    See this comment.
    – 41686d6564
    Oct 23 at 9:44
  • @41686d6564 being worked on ≠ finished worked on, live Oct 24 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
    Oct 24 at 9:37
  • 1
    @41686d6564 try to give the opinion-fact together with the link next time. :) Oct 24 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. Nov 2 at 12:10
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 users 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
    Oct 21 at 20:09
2

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

Narrow Wizard

2

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.stack.imgur.com/Axe1B.png so assuming you mean you want to split it to three lines (?) I'm against this request. Nov 3 at 8:00
  • 2
    @ShadowWizardIsVaccinatedV3 don't believe my gif? Please check out this profile Nov 3 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. Nov 3 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. Nov 3 at 9:14
  • 3
    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. Nov 3 at 9:17
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.) Nov 4 at 19:21
  • @EmilJeřábek interesting is there a reason for such behavior. Nov 4 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. Nov 4 at 19:27
  • @EmilJeřábek but why change the current tab at all? I prefer to see same tab during switching profiles. Nov 4 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
    Nov 5 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
    Nov 6 at 0:30
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
    Oct 25 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). Oct 25 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
    Oct 25 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
    Oct 25 at 15:58
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. Oct 22 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. Oct 22 at 15:54
  • 1
    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
    Oct 25 at 17:38
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
    Nov 12 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. Nov 12 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
    Nov 12 at 23:44
  • 1
    Regardless, we've got some improvements around the top bar soon.
    – Aaron Shekey StaffMod
    Nov 12 at 23:47
  • Aaaaa ... I can feel it now. So it is a matter of developing a new habit. Thanks. Nov 12 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 ;) Nov 13 at 0:18
-1

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.

7
  • 1
    just get rid of the badges too
    – Kevin B
    Nov 23 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. Nov 23 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
    Nov 23 at 21:48
  • @Anonymous You get "paid" for your work by knowing that you are helping others - not by some statistic Nov 23 at 22:36
  • @samcarter_is_at_topanswers.xyz I mean the work of visiting the sites, not of contributing to Stack Exchange.
    – Anonymous
    Nov 23 at 23:03
  • Why bother visiting if you don't want to contribute? Nov 23 at 23:25
  • @samcarter_is_at_topanswers.xyz I do contribute, but I also visit the sites.
    – Anonymous
    Nov 24 at 16:57
-5

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.

2
  • “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. Oct 27 at 13:28
  • 11
    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
    Oct 27 at 15:31
1
2

You must log in to answer this question.

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