Design Vision Updates to the User Card

Just thinking out loud and trying to draw on some older memories, the goals I had when looking at a user card were:

• To determine who they are (information about their username and avatar was plenty)
• To determine if they are knowledgeable (to be fair, rep and badges are a poor proxy for actual knowledge, but they're the only proxy we have)
• To determine if they had any specific authority on the site (the diamond for moderators was plenty, and while I wish we could have symbols for staff just to declutter the thing, the staff label has to come along here as well)

Everything else is noise to me:

• Any indication that the poster is a new user is immaterial to my answering of their question or evaluating of their answer
• Any indication that the poster is recognized by a collective is not really boosting the "knowledgeable" aspect, it just means that some group of people in some tag that I happen to be posting to happen to think that they're pretty cool
• Their location (I'm not going to run into these people IRL, and even if I did, I sure as heck wouldn't be talking Stack Overflow to them)
• Their top tags (this isn't a social media platform, and there's no tooling that exists - nor should - to get someone to answer your question based on what you've tagged it as)

In short: I just need enough information to reasonably identify them and see if they know what they're on about. I said it before that rep/badges are a poor proxy for knowledge, but there is still some kind of assurance on getting an answer from someone with 10k+ rep than someone with 200 rep. And of course, this perspective can vary by network site.

You're updating the user card? Great! The user cards have never worked right.

<!-- My user card from https://meta.stackexchange.com/a/389576/308065,
     as of 2023-08-10. -->
            <div class="post-signature flex--item fl0">
                <div class="user-info user-hover">
    <div class="user-action-time">
        answered <span title="2023-05-30 17:12:37Z" class="relativetime">May 30 at 17:12</span>
    </div>
    <div class="user-gravatar32">
        <a href="/users/308065/wizzwizz4"><div class="gravatar-wrapper-32"><img src="https://i.sstatic.net/FdOvO.png?s=64&amp;g=1" alt="wizzwizz4's user avatar" class="bar-sm" width="32" height="32"></div></a>
    </div>
    <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person">
        <a href="/users/308065/wizzwizz4">wizzwizz4</a><span class="d-none" itemprop="name">wizzwizz4</span>
        <div class="-flair">
            <span class="reputation-score" title="reputation score 13,481" dir="ltr">13.5k</span><span title="5 gold badges" aria-hidden="true"><span class="badge1"></span><span class="badgecount">5</span></span><span class="v-visible-sr">5 gold badges</span><span title="29 silver badges" aria-hidden="true"><span class="badge2"></span><span class="badgecount">29</span></span><span class="v-visible-sr">29 silver badges</span><span title="43 bronze badges" aria-hidden="true"><span class="badge3"></span><span class="badgecount">43</span></span><span class="v-visible-sr">43 bronze badges</span>
        </div>
    </div>
</div>


            </div>

There are so many things wrong with this. Copy-pasting as plain text is a reasonable proxy for what assistive tech will see:

answered May 30 at 17:12
wizzwizz4's user avatar
wizzwizz4wizzwizz4
13.5k55 gold badges2929 silver badges4343 bronze badges

There's a hack with aria-hidden="true" and class="v-visible-sr" which makes it slightly better in screen readers (but only if via a fancy modern web browser) – but there's still the superfluous and verbose alt text on the profile pictures.

I'd expect it to read more like this:

answered May 30 at 17:12
by wizzwizz4
13.5k reputation
badges: 5 gold, 29 silver, 43 bronze

Or maybe (if you can get this by describing things semantically, without hacks):

answered May 30 at 17:12
by wizzwizz4, link
13 point 5 thousand reputation
badges: 5 gold, 29 silver, 43 bronze

There are hidden elements that just bloat up the page, and don't quite do Microdata right. (RDFa is strictly superior to Microdata, but that's neither here nor there.) If you find yourself writing class="d-none" itemprop=: stop, take a step back, and double-check whether that information is already in the document.

Much of this stuff is probably under the purview of "developers" at the moment. Speaking as a developer: most developers are really bad at this kind of thing. (Notice how I haven't given any implementation suggestions? My attempts are hot garbage.) A design team has a different perspective: one I think is better suited for these kinds of things.

Note well: I'm not suggesting any visual or layout changes. The usercards have to satisfy a lot of competing requirements, many of which are obscure:

• they need to work right when the reputation line is absent, as on MathOverflow;
• they need to look similar-ish to the userflair images:
  
  (speaking of which, the flair's default alt text is inappropriate; and it'd be nice to have an accessibly-marked-up SVG version – but this is out of scope);
• they need to handle incredibly long, incredibly large usernames (like AAAA᭛ဪ꧄𒍜𒐫﷽⸻) gracefully;
• they need to work in Zoom Text Only mode. (The current behaviour is correct.)
• they need to handle RTL usernames, and contain directional overrides. (The current behaviour is correct; though comments don't ‮contain‬ directional overrides properly.)
• they should handle top-to-bottom usernames, if possible: even though SE has no software support for it, machine translation is a thing. (There are some HTML examples on Wikipedia.) The current usercard doesn't do this.
• they need Jon Skeet support.
• they should, if at all possible, maintain the traditional class names. .-flair (and probably others) basically hasn't changed since the start of the site, and is assuredly in use by userscripts and userstyles.
• they need keyboard navigability. Currently, it's annoying (the timing of pressing Tab affects where you navigate) but otherwise fully-functional.

If the changes we get maintain (or add!) this functionality, I'll be happy (pretty much) regardless of what we end up with.

If you’re also familiar with Stack Overflow for Teams, you can also consider these use cases

Amusingly - something Catija pointed out. In a larger organisation, it’s very hard to remember who is who. Having the title field would help here. In the context of the moderator team, we can put what sites we're moderator of there, so it’s easy to check what role someone has in the organisation without going into their profile.

feature-request Make the endorsement text/badge optional.

Now that you are updating the user cards, I think it's a good time for me to bring up this feature request from Meta Stack Overflow: Remove "Recognized by XYZ Collective" text from the Recognized Member (RM)'s flair

Issues with the endorsement feature for Collectives are laid out in that post in details, but in short, they cause a bias towards RMs' answers that is not desired at all times.

I really liked the idea of making them optional at the time of posting.

Generally I don't use user-cards as a source of information outside of who is posting, I don't care what badges they have, if they've answered enough dupes to be in the top 3 of a collective, if they've been "recognized", or if they're a new contributor (isn't the new contributor indicator part of the user card?)

Historically this has been a place used to show off the user's achievements to aid in the gamification process, a form of "Look at all the badges/rep this other user has, don't you want that too?!!", however, for the same reason, it also draws users to change the way they interact with content based on what is in the user-card, both positively and negatively.

Which aspects of the User Card are working well? Which could use improvement?

I'd like to see user avatars on all variants, that's often the most obvious thing to look at to see if it's a user you've seen before.

What do you think about the Expanded User Card? Do you find it useful?

Yes, I think the expanded user card is useful as a way of allowing users who want to see this information to do so without having all of this information directly visible in a place where it can impact voting. I'd like to see recent additions moved to here as well.

When you consider the User Card in the context of these use cases, which metadata would you find most helpful to see?

The question asker's user card on their question

Whether or not the user has been recently active, relevant gold/silver badges

A question editor's user card on a question they have edited

None.

The question asker's user card on a search result or question list item

None.

The user card attached to a comment

None.

The question answerer's user card on their answer

Whether or not the user has been recently active, relevant gold/silver badges

What do you think about the Expanded User Card? Do you find it useful?

I don't ever really use it, but it seems potentially useful, and if there is a business or community need to add more information to the card, the Expanded User Card might be a better place for that information. It also has the potential to add information or functionality for moderators (quick list of ideas that might fit: access to Mod/"Moderator Actions" window from profile, link to chat profile, link to Dashboard, number of flags/annotations). I think of it more like a "mini profile" than an expanded user card, and if it made it easier to access profile functionality I think I'd use it more.

It's quirky, though:

1. Doesn't make much sense on mobile.

2. Unclear how to even trigger it - who would think that hovering over the avatar has some functionality to it? It's too long of a hover to easily trigger accidentally...

3. For new users, it's disabled (edit: maybe I'm misremembering this, is it only when users don't have a profile that it doesn't appear? in that case I don't really understand why it doesn't just expand for everyone...even if there's no content, at least let us know our mouseover worked!), which helps keep spammy profiles more hidden, but there's no UI or design hint to this that I perceive. If I was trying to trigger the expanded card for a new user, it feels like I'm doing something wrong rather than encountering intended behavior.

Are there any plans for user card updates for community wiki posts?

I always felt that this line wrap happening after % is somewhat inorganic.

Also, flairs are extremely dated low resolution pictures. Will updates for them be a part of this redesigning effort? Seems to be close enough to solve these issues at the same time.

I don't know if there's an existing feature-request post about this, and this idea came from someone I can't remember (Oleg?), but I think it's an idea worth considering seriously:

In Q&A pages, instead of showing the user's total reputation, show the sum of the reputation they have in other posts with overlapping tags. Reputation is often used by readers as a proxy for measuring subject-matter-expertise, so I think it makes sense to not show reputation in a Q&A that is unrelated to the tags of that Q&A- at least on main sites. Meta sites can show total rep.

If space isn't a concern, it would even be useful to show the breakdown of rep for each tag. If space is a concern, one option could be to put that under the expanded user card.

I'm not sure if there are any technical performance blockers here. I know the user profile page does have a section on tag rep, so I assume that any caching done for that (if at all) can be reused.

I've always been interested in the possibility of getting question and answer rep show separately. In my mind, answer reputation is a stronger indicator of subject-matter-expertise than question rep. I'm not sure how much this has been discussed. I just searched and saw How to know reputation question/answerwise separately ?.

On the expanded user card, I wish it made it easier to reach out to someone in chat. At least linking to their chat profile (if they have one) would go a long way. It's really really hecking annoying to get to a user's chat profile.

I assume there'd be concerns about high-rep users getting annoyed by getting contacted by other users, but there's already a feature to ignore users in chat.

See also the fairly popular Let's make it easier to get a room.

There's also the (sadly, declined) Create comment-spawned chatrooms for the post, not for the users, but I digress...

Show the one tag-related badge that is most relevant to that user's question.

This is a badge that

• Is one of the tags below the question.
• Is one of the user's tag badges that is the most specific,
• or otherwise: has the highest class (i.e. gold > silver > bronze)

To clarify most specific badge: many users have tag badges in a programming language, but if besides that, a user also has a tag badge in e.g. hibernate, which occurs less often, then that badge is more relevant in questions that are tagged e.g. java hibernate.

This will show at a glance that the answer is from someone who has gained some credibility in that specific tag. Besides votes, this helps later visitors to sort out the most helpful answers.

In my experience, tag badges are (far) more meaningful than reputation. (A tag badge in combination with relatively low rep even strongly indicates that we're dealing with a specialist).

The only thing is, it's probably a very expensive operation to find this badge :)

As a mod, the main thing I'd appreciate is for deleted users to still be linked to the deleted user profile. (For non-mods, that is a limited profile which just has things like the reason for deletion and a link to view the post's written by the user.)

If any more information is to be added to the user cards, perhaps it would be worth moving some of the current information around to prevent cramping.

• Maybe a background colour to indicate their role (mod, staff, etc), similar to new contributor or question asker.
• Move relevant icons to where the new contributor text is currently shown (without the actual text).

Rough example;

Thank you again for getting feedback for these changes like this - I really hope this kind of feedback loop will become the norm and the feedback will be valuable and acted on.

The user card seems like a hard topic. Currently it does what it needs to do perfectly: It doesn't distract from the content and is hardly noticeable while still giving context about the user.

The expanded user card in particular can be a great thing to revamp here. At the moment it doesn't display much information other than the user's country and a bit of the profile description. But it also looks... old. I think it in particular could do with some context-dependent information or maybe even some personalization as someone has to hover or click for it and it wouldn't influence voting or how content is perceived as much.

I don't know where the view displaying the user's tags is in use (Teams?), but I believe adding context-dependent information like this would skew readers toward reading and voting on certain content based on the poster (which we don't want).

The user card attached to a comment

I am not sure exactly how you may plan to implement this without making it cluttered. But I would like to see a small user card upon hovering on the name of the user (with a bit of delay of course) instead of seeing just reputation.

Which aspects of the User Card are working well? Which could use improvement?

I think that most users would like to see the nickname, the photo, the reputation and the badges. You could also add title and location, but I guess that most users will find this information to be excessive and polluting, but you might run a few experiments.

What do you think about the Expanded User Card? Do you find it useful?

After roughly 14 years at Stack Overflow and Stack Exchange sites, I still don't know how to expand a user card. I don't think that I ever saw one, and if I did, it was a long time ago and I don't remember it anymore. I just tried to do this right now, and failed.

When you consider the User Card in the context of these use cases, which metadata would you find most helpful to see?

Nickname, image, reputation, badge count and special powers (mod / staff / new user / nothing special).

Quora is a site that shows job titles with users, like "CEO of XYZcorp Inc." or "Sr. tech lead at Foobar Services", etc. And I think it is awful. People here, would like end up using "Alien dog-feeder", "None of your business", "Master god of the multiverses", "Queen of Spades" and other trollish titles.

Location could be interesting in some cases, but I think that it is more likely to cause xenophobia than anything else.

However, those two could be useful for the expanded card.

Further, each question or answer should have the authors card, something about the last editor, and I also suggest something to tell who are all the editors without having to see all the edition history.

For comments, there should be some way to see the user card also, but it should be hidden by default to not pollute the screen.

Further, if the user is suspended, show the exact same user card as a normal user. Don't hide the reputation nor the badges as a user with no badge and only 1 rep in a 50-upvotes answer clearly draws attention when the intent of the suspension is to not draw too much attention.

Which aspects of the User Card are working well? Which could use improvement?

I think the user card for questions and answers is too cluttered. The essential information is the user name, the avatar, the original creation time, the last edit time. In certain contexts, knowing that someone is a moderator or staff is important. Everything else is not only extraneous, but there have been questions about if showing reputation and badges tends to result in even more up votes and/or acceptances because the person is seen as an expert. I would recommend moving more information to the Expanded User Card and going with an absolute minimum on posts, similar to how it is displayed on comments or the home page.

What do you think about the Expanded User Card? Do you find it useful?

Could use some formatting, but yes. The content is useful, but some of that is based on how the profile is structured. For example, if you have a lot of external links or profiles, you're stuck putting them in the bio. That's more of a profile problem than an expanded user card problem, though, although giving more flexibility and power to the profile could help solve these expanded user card problems.

I'd also expand so a hover over the profile picture or the name brings it up.

When you consider the User Card in the context of these use cases, which metadata would you find most helpful to see?

The bare minimum is the user name and date. Most information can be left to the expanded user card or profile. Also consider bringing the expanded user card to comments.

When it comes to the expanded user card, I would like to see relevant "credentials" more easily. For example, badges in a tag that is applied to the question. Or for editors, badges related to editing/curating content.

I'd strongly recommend doing some research into the display of reputation and badges. There have been some discussions in the past indicating that people with high reputation and badge counts get more attention than people who don't, even if that reputation or badges aren't from the subject matter of the question. Hiding this information in the primary views and leaving it to the detailed profile could level the playing field between people, although anyone with name recognition would still have that advantage.

To keep in line with the vote on content and not the author, I'd go with the third version without the reputation: just name as a link to the user profile the same way it is done for the comments (without the staff/mod tags on normal sites, with them on meta sites as they probably need these tags to weight on).

All the info on the user card are distracting and bringing bias in my humble opinion, so I'd favor a username with profile link only, maybe still with the avatar if it doesn't clutter screen readers.

Currently, very few possible values and user attributes are available in the public Q&A platform. What are the restrictions that we should be aware of to avoid going in favor of "creative" but unfeasible suggestions / requests?

Role

The available values are Staff, Mod and Bot. If more roles are coming soon, like "Admin". Could each of them have a unique color? What about the diamond used for mods? Could the other roles have a unique symbol?

Endorsements

Will endorsements be available elsewhere besides Stack Overflow and Stack Overflow for Teams?

Location

Is it possible to show a different attribute than the location?

Expanded User Card

Will the expanded user card be available for low-reputation users? I was using it wrongly, I'm sorry. Details The expanded user card is not being displayed to me. What I'm missing? As of August 2023, are there system or privileges requirements?.

Chat

Is the scope of this post limited to user cards on the public Q&A platform and SOFT, or does it also include the chat platform?