The profile page is getting a makeover (Part One) [duplicate]

Question

Update:

Since this was posted, we've taken your input below, and incorporated it into a newer prototype, described here:

Profile Page Makeover, Part 2: the Prototype

The Big Idea

Create a page on the network that summarizes who I am as a developer, and lets me show off the stuff I am most proud of. Some of this information is only available by creating a Careers profile, but we want to open it up to everybody, even if you don’t have one.

Background: The Problem

Our current user profile page tries to do too many things. It is trying to make basic user info available for a person who knows nothing about me (by showing my name, website, “about me” text, etc.), and at the same time it’s trying to give me information about myself (by showing reputation, activity, etc.). The result is a cluttered, confusing page that isn’t optimal for either party.

It is also missing key information that is captured in the Careers profile but cannot fit into the existing user page. I want to show off my open source projects and apps, but there is no room for them except the free-text “About Me” section. When we add in all of this new stuff, it’s just too much.

So where do we put everything? We looked at meta posts, and metrics, and heatmaps...and we found out that the use cases for this page split neatly into two groups: what users want to see when they’re viewing somebody else’s profile, and what users want to see when viewing their own profile.

So, we are proposing a split for the profile page: a new, more specialized user profile page, called About Me, that summarizes who I am as a developer and shows off the stuff I am most proud of. We’re focusing on summary and context, instead of a big page of numbers and lists.

The existing profile page, which we will call a dashboard for now, will remain the same except for losing the bio section at the top. We’ll come back around to that sometime later.

The Design

• The bio information is the core of the about me page, so we keep that at the top: Screen name, reputation and rank, badge, long bio. You’ll now be able to include your current employer and position, even if you don’t have a careers profile.

• Your tags are a good indicator of your interests and aptitude. We bring the tags higher on the page, and make them bigger. They’re limited to your top six, and we have special bronze, silver, and gold styling if you have earned the corresponding tag badge. This section is now interactive, allowing users to click on your tags and drill down into your posts in that tag.

• Questions and answers go immediately below tags. This section gets more real estate than the old version, and we’ve integrated post-related badges into the display. If you’ve received a badge related to the post, it’ll appear below the title. We’re experimenting with a new votes display, which may or may not make it into the final version.

• The badges section used to just be a list… Of badges. A huge list. Some people have thousands. Nobody ever scrolled through all of them. We’ve now broken down the badges into categories for better, quicker viewing. Your two most important badges in each category get featured status, and the rest get a visualization.

• More links to other services. The left sidebar will now have a section for including links to your Twitter, GitHub, and portfolio/website.

• More network awareness is coming to the page. Your top posts of all time on the network will now be visible in the lower part of the sidebar, along with your top network sites.

• Applications and projects are coming over from Careers. You’ll now be able to list your applications, open-source software, and other projects on your Stack Overflow profile.

What happens to the existing user page?

The current user profile page will stay, without the user information section at the top. Everything you could get to before will be accessible through this page.

How do I navigate between the “About Me” page and the existing page?

Whenever you click a user link from a post or the users page, you’ll be linked to the “About Me” page. If you click your name in the top bar, you’ll go straight to the current page, as always. You can navigate between them using the tabs within the page.

What about sites other than Stack Overflow that won't have Careers elements?

There won't be an applications and projects section and the badges section will be full width.

What about moderator stuff?

Everything will still be there. We are just going to put it in a box at the top of the page. Design TBD.

---

This is a draft, and is still open to change, especially elements that might have to be reflected throughout the site (vote indicator boxes, etc).

This is where we open the floor for comments. You know the drill: Try to keep it to one request/comment per answer, and upvote/downvote according to your agreement. We’ll do another round of revisions to take feedback into account.

Answer 1

I have a lot of concerns with this proposal. In fact, I can mark them all on the image, and leave almost nothing:

Red circles mark information that contradicts with other information:

• The badge count at the top is different from the badge count at its section is different from the badge counts in the badge section. Which of these is real? What do these counts tell me?
• The "communities" count doesn't tell me what it's about, and as it stands right now directly conflicts with the various communities below it.

Blue marks superfluous or pointless information:

• Why would I care about the badges the user earned with his top posts? Why are these sorted by badge tier? This almost guarantees that most of the time it will be score and view badges. How are those badges relevant? What do they really tell me (that the view and vote count don't), or anyone looking at the profile?
• All network posts? Why would I want to see all network posts by a user, or want to know their top posts across the network? What does that have to do with the community I'm on? We have "Top network posts" but no section for meta activity on the same community? I want to know what this person does for this community, and where else they're active (accounts, not posts), not what random post of theirs happened to attract a crapton of votes (case in point: my top post network-wide is a question about a doge game). If I want to see their posts and activity across the network, I look at their network profile.

Green marks information that doesn't tell me what it even is:

• What are these timestamps? Last activity? CreationDate?

Yellow marks sections that need to be prominently placed and contain a lot of information:

• As established already, the About Me section is important and needs to be prominently placed and include more than just a few lines.
• Tags are prominently placed, but only contain the top six tags? This is less information than the current version, but it's big and shiny. If I want to know the span of knowledge this user has, I want to see more than just six tags. And I want to get some sort of impression what their roundabout participation across those tags is - how many tag badges? Average score or post count per tag? Anything like that, but it needs to provide information beyond "these are a handful of tags, now leave me alone".
• The activity section needs to be prominently placed. Almost every time I look at a user's profile, it's either to check what they have done recently or look for a specific post I know was by that user (for which the search function should be more useful, but hey, SE search was never all too good). The only mention of any recent activity (since this banishes recent reputation, and sorting by "recent activity" in the post/badge lists) is "last seen". While this is an important piece of information I use on a daily basis, people genuinely didn't find it in the screenshot, and it is the least expressive bit of activity. "last seen" could be anything - what have they actually done?

Pink marks content that has a site-specific purpose:

• While a good idea in general, these bits have a lot of potential - essentially replacing site-specific sections in the About Me block. That's a really good idea, and a lot can come of it. But not if it's exclusive to SO (which seems like it's planned to change, so kudos there!), and has no proper way to opt out without cancelling those service links at the root.

Answer 2

Something I am always looking at in other user's profiles is their recent activity. Especially their questions, so I can see if what they were just asking me was also placed in a question.

Re-incorporate a way to either show question and answers by date, votes, views(or activity... did anyone even use the activity filter?). It is almost always the first thing I look at. It would be nice if the page loaded with the most recent questions and answers ideally.

Answer 3

Is the Careers link optional? I have additional details about myself (starting with my full name and picture) that I would only trust with people who pay for the privilege. I have gone to great lengths to keep this information private so far, with varying amounts of success, from the internet at large.

The Careers link also doesn't make sense for some other sites in the network such as, well, Arqade. Some users are using Arqade-only nicknames because, hey, what if their would-be employer knows that their candidate likes videogames?

While I don't agree with the second scenario, I don't feel that I should tell people how to manage their presence on the internet — I don't foresee being talked into changing my mind either.

Answer 4

I have to admit that I'm not a huge fan of what's happening with the bio styling. My bio isn't even that long and it doesn't fully fit into the new area:

Emphasizing the first sentence (paragraph?) seems weird. Granted, it works out okay semantically in my specific case, but I don't think we can or should be making that sort of an assumption about what people might write in. The whole thing also starts fading out before that sentence is even over.

I think we should increase the vertical space given to that field by default and stick with a uniform (and perhaps a bit smaller) font size.

Answer 5

There won't be an Apps and Projects section [for other sites]

What about other technical/programming sites, like Code Golf or Programmers? What if I want my projects to be there?

A possible solution is a site-specific section there. It could be GitHub for programming-related sites, a recipe site or something for Cooking, a gallery site like DeviantArt for artistic sites like Photography, etc.

Or, it could just be called "Projects," and it is made by the user, who provides as many links as he/she wants in that section. This is also advantageous as people could post blog links, other projects not on GitHub, etc. This would also be good because I could post only my code golf repo's from GitHub on Code Golf.SE, and exclude them from SO.

I like the second solution more, because:

• it doesn't force the user to use a specific site
• it's more personal and customizable
• it's less work
• it's actually the only option for sites like RPG.SE, where there's not one dedicated hub for all of a user's projects

Answer 6

Badge styling is inconsistent with our existing styles.

vs

And it's easier to distinguish between tags and badges and tag-based badges with the existing styles.

Also, the total count per class is obscured to the point of being unreadable.

Some numbers are even obscured for me.

That number belongs somewhere else.

---

_{for those of us who can't see the number at all, here it is in red}

Answer 7

Where are all the tag badges?

Nick has like 90-some tag badges. You're showing 6 of them in the "tags" section, and none in the badges section.

Earning a tag badge is a pretty big deal; they really shouldn't be hidden.

Also, how do I view all badges (in a category or in total)? Is this going to integrate into the redesigned badge page in some fashion?

Answer 8

Related to Anna's answer, two requests abut the "about me" block:

1. Uniform text color please! Graying out on SE means "downvoted" or otherwise "lower priority"; the 2nd or 3rd sentences of my profile hardly qualify. And that gray can be pretty hard for some of us to read, enough that there's a userscript running around to turn it off.

2. Please don't make me "click to see more". Just give me a scroll bar like now. "Click to see more" suggests a page reload, even if that's not how it's implemented. That's a deterrent. You want us to fill out these "about me" sections, don't you? We all know how scrolling works; please leverage that.

Answer 9

When I look at another user's profile it's often to see how recently he's been around; this affects whether and how I comment on older posts. That's way more valuable to me than "top N% this year" or whatever; I can kinda guesstimate that from the rep, but "has he been here this day/week/month" is not something I can get from (most) other stats. Any chance of getting this info somewhere on the "outsider view" page?

Answer 10

Can't the "Apps & Projects" section be left to the user's discretion? Just make the space available and I can choose what I want to put there. On Unix&Linux/Ubuntu/SU, I could put some tools I have written or resources I find useful. On Biology or Academia I could, if I want to go public, include a list of my publications. On English Language Usage a list of interesting quotes, cool words or whatever.

I think that locking the name as "Apps & Projects" and simply removing it from any site that is not SO is a shame, why not just give us the choice of naming it and putting whatever we like there?

Answer 11

I would like to show up only to speak for all the other neophytes not yet aware enough to know this is here. This profile looks great, but what would this look like on the majority of the users who don't have all the impressive badges and stats that are in the example image?

From the looks of it, almost everybody here commenting today has an impressive profile.

Some food for thought:

What happens when a user like myself is doing whatever they can to improve their profile, and this new layout has blank spaces all over it that are extremely difficult to fill in? Are most users just going to have a sparse and pathetic looking profile because the new design was made to really showcase an impressive profile and not so much anybody else?

My photo editing abilities are not great, and this information is not at all accurate, but its just to demonstrate what this looks like (or could look like) on an average profile.

Areas that look bad on everybody else

• Under the "Tags" category, the example shows gold badges and the number of associated answers with that tag. What is displayed when a user like myself has no gold, silver or even bronze badges for any category at all?
• Apps and Projects for users who don't have any on display leaves an entire quarter of your profile blanked out
• Badges category consolidates badges for users who have so much flair it's spilling out all over the place. Users like myself kind of need the added support of spreading what few badges we do have out over the page so it doesn't look so pathetic.
• Questions & Answers won't have badges associated, will they then be ranked by votes?
• The entire area under the profile picture is sparse for anybody who doesn't work for SO or have all those impressive creds (unless we are able to put our own job titles in which I have not seen).

Answer 12

Needs an edit link.

I know, I know, it'll be on the "dashboard" page, which will be the default view when switching to your own profile. We'll still get questions asking where to find it.

How do I know? We get that now about the stackexchange.com profile pages. You can't edit that page; it's a copy of the information you entered on your oldest site profile - so to edit it, you go to that profile and edit that. You'd think this wouldn't be a problem, given the network profile isn't your default... But folks still end up on it confused that they can't change it.

If you're displaying something the current user can change, make it obvious how they can change it.

Answer 13

The About Me needs to stand out more.

This is one of the more important sections in a profile, for the people who've used it. It's a major opportunity for us to say a lot of stuff which doesn't fit into the regular profile format.

If your goal is to make a profile page which tells us more about a user, your current design of the About Me is counterproductive: all but a couple of lines are effectively hidden, and it's thoroughly de-emphasized to the point that it can be easily missed altogether, despite all the stuff we might have to say in there. This is probably because a lot of things on the page are colourful and attention-grabbing, and the About Me is the only thing that isn't, and in fact fades out.

The About Me matters. Let it show up clearly and stand out, rather than disappear after 2-3 lines!

Consider this rearrangement, for instance, which gives it emphasis again (and, as a total accident, looks pretty familiar!):

Answer 14

Will the green for accepted answers be applied consistently on all pages?

On the question list and on the profile, #75845c is used as the background colour.

On the question page, it used to be #5b9058, slightly different but still quite similar.

A while ago this was changed to #46b525, quite a difference.

Now on the new profile even more colours are introduced, #88b73a, #a1d052, and some that I can't reliably determine.

Answer 15

Since this is more of an advertising/naval-gazing space, it would also be nice if a graph of reputation could be shown. Perhaps at the bottom of the page lower than the already present content. Further, since there is some extra space and the greatest hits feature is pretty amazing, maybe that could also be placed on the side bar

(p.s. Styling done copy paste from paint, it was just the idea I am suggesting not the exact styles used in this image)

For reference:

• Nick's reputation graph: https://stackoverflow.com/users/13249/nick-craver?tab=reputation
• Nick's greatest hits: https://stackoverflow.com/questions/greatest-hits?userId=13249

Answer 16

The picture is too big. If your userpic is a photo then it's pretty trivial to upload a resized version (if you have the original, of course). But some of us use gravatars that were generated for a specific size, using tools that are no longer available. My gravatar is "me" across the Internet; replacing it with something else on SE interferes with that. But scaling a 100x100 gravatar up to 350x350 (or whatever you end up using) looks terrible. And we can't just add a big white border around it to fit the new size, because the gravatar is scaled down for chat. I don't want to be reduced to a few indistinguishable blue pixels in chat.

If you go for the big image -- and I'm not sure why you want to, as that's more of a social-network thing to do -- then please come up with some reasonable way to handle smaller ones. When the test page was live I plugged my profile into it and, ugh, pixelated badness. Please don't do that to existing users.

Answer 17

How about some customization (for every user)?

The default display can be similar to the one suggested, but then we should (possibly) be:

• Allowed to display questions and answers separately (versus displaying them together - presumably no option to hide it altogether)

And able to show/hide any of the following sections:

• About me
• Badges
• Tags
• Votes
• Bounties
• Reputation
• Apps + Projects
• Top Network Posts (always on the left ... or not)
• Favourites ?
• Comments ?
• ... ?

If you choose to hide everything, it would literally just be a big page consisting of a list of your questions and answers, with the same details on the left as in the draft displayed in the question (with the exception of Top Network Posts).

Then:

• We should be able to freely change the order of the sections, at least to some extent.

• The sections should resize as appropriate according to the number of selected sections. For instance, the smallest 'Reputation' section size might just display the mini-graph displayed on the current user page, and possibly extend all the way to displaying the full graph with recent reputation changes listed. Some of the other sections have way easier resize ability - just include more/less posts in the Question and Answers, more/less tags under Tags, etc.

  If there isn't more details to add to some section, perhaps it could have a maximum size, allowing other sections to become bigger.

• Possibly limit the total number of visible sections.

• Possibly allow users to pick the sizes of the sections, at least to some extent (perhaps percentage distribution of the sections).

• Possibly allow users to switch their profile view between single- and multi-column.

This is more to present some ideas of a general direction, rather than what I actually expect to be implemented.

If done right, I can't imagine that this will involve too much dev.

I hope the idea is clear enough, as it difficult to create some images or animations for this, as I hope you understand.

This would make many people's profiles look significantly different, which may not appear desirable, but it gives one the ability to display what you deem most important on your profile, rather than forcing us into some format we don't really want, which may end up working out way better for users without too much to display.

Answer 18

And while we are at it, could we add some kind of activity-meter?

A indicator that shows my participation level. A formula could determine my efforts in reviewing, flagging, editing, answering and asking.

I could imagine a number showing the total percentage of my participation or a participation status like Ninja-Editor. Maybe a status calculated of the activities of the current day. So everyone would have a new status every single day.

Such a prominent indicator maybe could give many of us a boost on participation of any kind.