Usercard Redesign Experiment

Today we have installed a new version of the usercard on the meta forums. We are doing this to gather feedback from you and see what works / doesnt work.

New Version

Updates

  • User Header Background
    • We moved the user background to be a header image, as opposed to a background image to the card.
    • if a user has no background image set, we use the colors from their avatar to create the header image
    • move badges to the top “banner image” area of the new usercard
    • move the user location to the “banner image” as well
  • re-styled user stats
  • moved user-status to an avatar icon, instead of the full on description
  • moved action buttons to bottom of card
  • Allow location to link to Google Maps or Open Street Maps

Old Version for reference


As with any experiment, I assume there will be some issues that possibly arise with this new usercard.

Please use this topic to report visual / functional bugs, as well as your opinions on the card itself.

Just an FYI, as bugs are fixed, I will delete the post that reported the bug to decrease the amount of content to sort through :smile:

Use it on your own forum

As mentioned above, this is still an experiment. We do not plan on supporting this long term as a theme component as the long term goal is to integrate this into core as a new user card. That being said, if you wish to use this on your forum now you can by installing it via → GitHub - discourse/experimental-usercard

55 Likes

Just wondering…

If about me is unnecessary why points, reading time and the most strangest thing :wink: , cakeday, are worthy to show?

Edit: about me is visible here, but not on my forum… even more stranger.

6 Likes

I agree that cakeday is a strange discourse concept. I preferred “Member since…”

But all that information is useful in making a judgment about the person you are dealing with.

8 Likes

Wow, it looks great! :slight_smile:

image

I only have a few minor things with the Locations plugin:

  • The location is shown one line under the pin.
  • Also I see two website urls in different layout. This was also the case until some weeks ago and was fixed by @merefield - but on the old usercard there were two websites and no location.
7 Likes

Might be an idea perhaps to give users an option to upload separate dark mode images like we have in categories etc…

4 Likes

Can we try removing the background color of the image element for the avatar? Avatars from people who went out of their way to use transparent PNGs for the background now look worse.

The background / header image on the user card is less than half of the height we had before, I wonder if we could give it a bit more :thinking:

Overall, great work, looks very slick.

9 Likes

On themes with fonts, the user card experiment does not have the font on the user card, like Minima.
Example:

8 Likes

Cool to have a re-design coming! :star2:

One thing I’d love to see different is the header. I’d even say I find it a bit sad right now:

image

Putting a background image doesn’t feel so original and supporting community features. The location tag feels a bit like on a file. And badges are minimized and put on a corner.

I love badges and from my experiences many community managers love to get creative around badges. I’d love to see badges be more celebrated, rather than minimized on the new cards! You know, something like this:

Member Card

18 Likes

I think something like this could rather be a setting instead, I personally prefer only 3.

3 Likes

Might be worth adding some custom CSS to your site to address this. Since this isnt an official discourse plugin, I’m not sure I would add css to support this as this will possibly be merged into core eventually.

1 Like

I’m sorry to be negative, particularly given I don’t have many suggestions for improvement, but honestly my first impression was to literally say “yuck, oh yuck, is this a bug?”. That doesn’t mean I’m right, that doesn’t mean these aren’t an improvement for everybody else, but for me the old user cards were really nice and simple and something I would not have changed.

Maybe it will grow on me?

Key points:

  1. Badges are super useful for qualification purposes and should be on usercards – Nothing says “This is who I am…” better than “I’ve made these kind of contributions so far”. I guess they’re in the top right now, but I only figured that out after looking through several user cards.
  2. The tag style boxes for “posted”, “cheers”, “solutions” etc grabs my eye way too much. Maybe it’s also the bold font? I liked how subtle this information was in the previous user card. Why? Because I don’t really care about it.
  3. The cakeday aspect also comes into the “don’t care” category. It’s fun and nice, but when I want to find out more about a user, is that really one of the four most important things I want to know about them? Probably not.

I would swap the cakeday into the top right, and move the badges back into being a full row or two, with the full expanded name of the featured badges. Most users won’t know what the icons mean and need the text elaboration. This further advertises the badges which are available, invoking curiosity in some users to contribute more if they want a particular badge they see on someone else’s user card.

6 Likes

I know that the issues I see are caused by the Locations plugin. The reason why I brought this up here is because this plugin seems to be very common. Also I would say that CSS or code adjustments need to be done in the plugin and not on Discourse core, at least mainly. And I hope that the people maintaining the Locations plugin will look into this. And to be honest, if the new usercard will become core, they more or less have to. :wink:

I just wanted to address the issues I have here in the topic for everybody.

3 Likes

Just found a few more things a bit wrong with it, this time with the shimmer animation.
First off, they’re all on different cycles. Best seen if you disconnect from wifi and then click on a card:

And also, it stops too early:

The image hasn’t loaded in yet and the animation stopped.

2 Likes

I now see badge names on hover!

I think it would be nice so users can config what is shown like join data, last seen etc like the side bar

2 Likes

I love more minimalistic approach, and there is still one main question without direct answer:

Is the concept of user cards just a decorative element without any real purpose? I reckon the most of users are using it just to send a PM or opening a chat channel. So… should we clean up it more instead of increasing fast visible elements?

Needs of admins/moderators are totally different playground.

6 Likes

It could also be nice to combine the main user details in one place rather than on various locations across the card:

If this get an overhaul, I think it could be a good chance to remove the trust level info from badges. They are not badges but group membership, indicating authority and access rights on the forum.

5 Likes

I’m not sure what’s going on, but it looks horrible on my site. Lots of information is missing. I tried this without any other CSS, and this is what it looks like. Maybe a plugin conflict, or something else going on?

New:

Old:

6 Likes

Something is not feeling right, can you try in safe mode, perhaps your theme is also layering on changes?

5 Likes

It’s an official plugin causing the issue, not sure which one. I first disabled unnofficial and it looked the same, but disabling all caused it to work. Here’s the error in the console:

Edit: All my official plugins

          - git clone https://github.com/discourse/discourse-chat.git
          - git clone https://github.com/discourse/discourse-user-notes.git
          - git clone https://github.com/discourse/discourse-reactions.git
          - git clone https://github.com/discourse/discourse-calendar.git
          - git clone https://github.com/discourse/discourse-adplugin.git
          - git clone https://github.com/discourse/discourse-whos-online.git
          - git clone https://github.com/discourse/discourse-canned-replies.git
          - git clone https://github.com/discourse/discourse-follow.git
          - git clone https://github.com/discourse/discourse-push-notifications.git
          - git clone https://github.com/discourse/discourse-gamification.git
          - git clone https://github.com/discourse/discourse-templates.git
          - git clone https://github.com/discourse/discourse-automation.git
          - git clone https://github.com/discourse/discourse-fontawesome-pro.git --branch fa5
          - git clone https://github.com/discourse/discourse-spoiler-alert.git
          - git clone https://github.com/discourse/discourse-data-explorer.git
6 Likes