Additional profile refinements

Question

Update

This is now live across the network. See the new post for feedback now that you can see it in action.

Original Post

I’m still noodling on the user profile while on our way to full responsiveness. This next round addresses feedback from my prior post, but I’ve separated it into a new post for a cleaner history.

This time, I’m trying something new. Here’s a 5 minute tour of what I’m doing with way more context, and way more examples. You also get to see my face 😛. Screenshots alone just aren’t cutting it on such a dynamic part of our app.

Remember, I’m just working on that top portion of the profile pages in this round of updates. I fully intend to ship what I’m demoing here. I think this round of changes will serve us well moving forward.

Some changes:

1. Unifies the navigation between each section: Profile, Activity, Developer Story, Settings
2. Groups profile links
3. Groups moderator-only links
4. Refines the placement of about me and various stats
5. Removes some redundant stats
6. Adds a "Read more" button on longer bios. No more scrolling!

Some screenshots

Ok, but for real, watch the tour.

A note on the profile changes

These are some big changes, but there is so much room for improvement in these profiles. I’m trying to balance a light touch and a full redesign. I can’t run every change by the Community ahead of time, but I respect the thoughts and opinions that are respectfully shared here. Thanks for all the feedback! Please keep it coming!

Remember, I’m just a guy trying to do right by all of you.

Answer 1

I think you yourself pointed the major flaw in profile redesign:

I can’t run every change by the Community ahead of time

Above is what makes things unreliable and unnecessarily difficult. Sorry if this may sound like a broken record but I would want to repeat advice from previous post on that matter: make it possible to deploy profile changes to one of (part of) sites in the network.

This would let you have it tested as thoroughly as it gets. Also, this would make things inherently safe: whatever bug occasionally slips into production, you would be able to easily roll it back if needed by a simple flip of the switch, by turning new profile off at the affected site(s).

---

I can't tell how much effort this would take (I guess quite a bit of it) but I believe this would be a very worthy investment that would serve you well for years to come.

Answer 2

status-review

Can we get more emphasis on reputation?

I'm not a fan of how you've crushed the 'Reputation', 'reached', 'answers' and 'questions' statistics into one tiny box. Reputation is a very important indicator of experience, both in the site and in their primary technologies. It definitely deserves a bit more recognition than the other statistics.

I'm hoping at least you can put the reputation on one line by itself, and the other statistics into the second line. Something like:

^{The proportions are a little off (rep count too big), but that's just a rough idea}

For mobile, I was thinking the reputation take up half the 'bar', and the other stats take up the rest of the space:

Here's a code snippet:

#other-stats {
  flex-wrap: nowrap !important;
}

#av {
  width: 200px !important;
}

<link rel="stylesheet" href="https://unpkg.com/@stackoverflow/stacks/dist/css/stacks.min.css">
<div id="user-card" class="user-card d-flex md:fd-column mb32">
  <div class="flex--item ws2 fl-shrink0 mr24 md:mr0 md:w-auto">
    <div class="profile-avatar d-flex fd-column ai-center s-card bar-md p12" id="av">
      <div class="w100"><img src="https://www.gravatar.com/avatar/5312ba01c0be1f885ae166eb1a0ccb75?s=420&amp;d=identicon&amp;r=PG&amp;f=1" alt="" width="210" height="210" class="bar-sm avatar-user mb8 w100 wmx2 hmx3 h-auto"></div>
      <div class="d-flex flex__allcells6 fw-wrap gs4 fc-light px4 wmx2">
        <div class="flex--item" style="
    font-size: 1.5em !important;
    margin-bottom: 20px;
">
          <div class="fs-body3 fc-dark" style="
    font-size: 1.5em !important;
    text-align: center;
">31</div>
          reputation
        </div>
      </div>
      <div class="d-flex flex__allcells6 fw-wrap gs4 fc-light px4 wmx2" id="other-stats">
        <div class="flex--item">
          <div class="fs-body3 fc-dark">177</div>
          reached
        </div>
        <div class="flex--item">
          <div class="fs-body3 fc-dark">1</div>
          answers
        </div>
        <div class="flex--item">
          <div class="fs-body3 fc-dark">0</div>
          questions
        </div>
      </div>
      <a class="s-btn s-btn__outlined s-btn__muted s-btn__icon s-btn__sm mt12 w100 wmx2" href="/users/edit/1054486"><svg aria-hidden="true" class="svg-icon iconPencil" width="18" height="18" viewBox="0 0 18 18">
          <path d="m13.68 2.15 2.17 2.17c.2.2.2.51 0 .71L14.5 6.39l-2.88-2.88 1.35-1.36c.2-.2.51-.2.71 0zM2 13.13l8.5-8.5 2.88 2.88-8.5 8.5H2v-2.88z"></path>
        </svg> Edit profile</a>
    </div>
  </div>
</div>

---

Other than that, I'm pretty happy with the way things are going. Thanks for getting community feedback this time.

It would also be nice if you added a slightly darker background in the highlighted area here, but that might just be a matter of personal preference.

Answer 3

What stats are being removed?

You say

5. Removes some redundant stats

But I don't see anything in either the tour or your post that details exactly what those stats are?

Answer 4

Can you please rank for us the order of importance that Stack Overflow the company currently assigns to each of the different parts of the profile?

(E.g. the profile image, the bio, the tags, the stats, the rep value, the other communities.)

The last post talked a lot about doing away with things for vanity reasons, but this seems to be the opposite, so I'm curious to see how your own internal perspective compares to the realized outcome.

The new layout seems to highlight/promote "vanity" content very strongly compared to the old layouts. The image, name, "vanity" stats (e.g. people reached, top % user, reputation--to an extent--vs. site-relevant stats like active tags, Qs, As, etc.) and bio (remember, people as users are ancillary at best to the point of Stack Overflow: quality questions & answers) are now pushing all other content below them, especially in the mobile view which is supposed to be the reason for all these changes:

There's no actual "content" (in terms of the site's purpose) visible at all in the view above. I also think it's a bad idea to have a horizontal scroll bar.

I know everyone is different, but when I visit another user's profile (and thus land on their /profile page, for example), I am interested in the following things:

• Their member since/last seen values (the latter of which has been taken away from us) to help guide my user moderation activity/answering activity
• Their top tags and tag scores to inform me on where that user is active and how much effort they've expended and expertise they appear to have been afforded by the system/the community; where their focus is on the site.
• Their most recent questions and answers (the last ~15-20 of which are conveniently placed on the /profile view) in order to either see other high-quality content or to look for patterns during user moderation (e.g. spam)

Rarely do I care to see their badges, their "stats", or their profile image. Very rarely do I care about their bio.

Also, regarding

This next round addresses feedback from my prior post

The main request from the last round, the request to have "Last Seen" restored, seems more or less ignored. The top answer and at least ten other answers that were very positively received by the community asked for this.

Can we at least have an explanation on why the only option for a very useful feature (that caused no actual problems for >10 years) is a complete about-face, resulting in totally removing it, rather than putting it behind a toggle or checkbox left up to the user? It is a big shame that, with all this work going into the profile redesign, this one metric being removed will cause a lot of usefulness to be lost.

(Also, I like the video idea, but the circle filter for your video feed was a bit distracting due to its small size; your face kept tilting in and out of view!)

Answer 5

I wonder what's the 'advantage'/perceived value in having a profiles drop down menu.

In a sense - a profile for meta is the 'same' as the main site profile. "Teams" are now essentially independent private sites, and unless you're on the same team, you're not going to bother with anyone else's profile.

Maybe its a meta denizen bias (Meta? THIS IS META!) - but it feels like we could compress it down to just a network profile link (and navigation is as shallow as it gets), and let folks view and manage profiles from the respective sites - main,meta or team .

Answer 6

It is so cool that you made a YouTube video for us. I want to applaud your courage for sharing your image and voice with the community. And your openness for giving us a stream of consciousness coming from the designer himself.

---

Structuring the feedback is actually tricky this time. (I'm hoping this might help other contributors chip in their feedback.)

6. Adds a "Read more" button on longer bios. No more scrolling!

Looks Perfect.

4. Refines the placement of about me and various stats

About Me - Looks Perfect.

Various stats - this is a tough one! (let’s split it up).

1. Separating the stats from the profile rectangle into a horizontal box

   Looks good (departure from tradition, but ok).

2. Removing badges from the profile rectangle.

   Looks good (I'm a badge freak and this removes emphasis from badges, but ok).

3. Adding "top overall/this year" to the stats (formerly only shown in activity tab).

   It works. (This was restricted to the Reputation box in activity.) Perhaps stack the three small badge icons with numbers in them instead? (Just putting the idea out there.)

2. Groups profile links

Looks good having a DDL. But you lose the 1-click. Having the links/panel also worked as sort of eye candy. (Split decision here - does responsive design profit from this or is it a design choice?)

3. Groups moderator-only links

I'm not a moderator, so I can't form an opinion. Same as the above I suppose.

5. Removes some redundant stats

I'm not entirely sure if this repeats the second part of point 4?

1. Unifies the navigation between each section: Profile, Activity, Developer Story, Settings

The gist of the issue. The other changes were cool (no real objections). I'd argue having the profile on top in the activity is redundant (putting the tiny user icon somewhere could work just as well, I'm waiting to hear opinions on this).

(Not listed, mentioned in the video at 3:27). "Apparently this user prefers to keep an air of mystery about them."

I think the entire box and title could be omitted when the user hasn't filled out the about me.

(But it has to be noted: There were only two default humorous remarks on the profile, the other being "we respect a laser like focus". So if these go we will have something to miss about them - the same was said of the 404 pages. What would be the elegant solution for this? Because there is no substitute for good humor.)

Edit:

As I thought having the profile on top of the activity tab doesn't look good and clutters the page.

As it looks now

I think it would look better like this

Answer 7

status-completed

Why does the About section seem to have a fixed height?

There's no reason the section below it can't just roll up into it.