Switch from Gravatar to HTML/CSS letters for no-avatar users

+1 on going independent from gravatar and +1 on offering some unique-ish identicon besides an uploaded image. Not everyone in our community understands gravatar and how it works or cares to sign up there to get a gravatar. I agree that people are visual though and it helps to have a unique image to identify people by.

I can’t find a good example of the UI itself, but one of my favorite features of the much lamented and much maligned One Laptop Per Child project is the interface users can personalized their “xo man” which is then used to identify their laptop on the mesh network (see image). It may or may not match the colors of the xo man on the cover of each laptop which comes in a variety of colors.

It’s a matter of taste… while I agree with you that it generates noise… I can “identify” the person by looking to their identicon better then seeing a letter and then having to read the name to make sure it’s the same person.

Like I said, it can be a option to choose which “identicon type” will be used… and one of them be the letters.

I believe that the profile can have the option to “upload an avatar” or “Choose a identicon type”, and the installation have a “default flag” for the identicon. What do you think?

1 Like

In case anyone is curious and finds it useful, I found some interesting resources about “xo man”, “xo person”, “xo guy” - not so easy to google this being.

The OS is actually called SUGAR and is open source software that can be run on any device, not just OLPC laptops and tablets. The manual has a page on personalizing sugar which includes the following instructions which should give you an idea how the UI works - the colors are actually a very integral and important part of how the operating system works and is designed to help children to identify themselves with their device and connect with each other to collaborate.

Click the XO icon to cycle through the colors for it. These colors show up in the Neighborhood View, Group View, Home View, on your Frame and when sharing with other Sugar users. There are almost 400 different color combinations available, which consist of a combination of six base-colors (red, orange, yellow, green, blue, purple) used as stroke-color and fill-color and three shades (light, medium, dark).

I especially love this PDF with the “buddy icon color matrix.” :smile:

Please see http://wiki.laptop.org/images/0/05/Buddy-Icon-Color-Matrix.pdf for an overview of all the available color combinations.

3 Likes

That’s not a lot of variety, tho.

How about something like GitHub - dira/monsterid: A Ruby port of the PHP MonsterId script.? Only drawback here is that the default set of base parts is a bit on the MSPaint side and might need additional work to fit with Discourse.

1 Like

I love monsterid! I had never seen that before - thanks for sharing. Also did not realize that the fellow behind it and some other great projects like dokuwiki (splitbrain) lives in Berlin - I’ve got a strong Berlin connection and will be there this summer.

I wasn’t really talking about taking on XO Guy as is, but just looking at it as an inspiration. I suppose it could be made more variable by changing the color of the head and background, or by moving the head around, or by having some different shapes. Not sure how much variability is needed in a typical community.

No monsterid. It is hideous, and not in the “haha funny hideous monster” way. The Vanilla ones are pretty neat, but I don’t think they’d like a direct competitor using their stuff…

The letter and color is the closest to the minimalist Discourse ethos by far, and is already used to great effect in Android GMail, etc.

4 Likes

THANK you. Yes, the idea is cute, but professional and slick-looking they are not.

I’m a fan of the letter and color. A nice thin beautiful symmetric sans serif like Proxima Nova or Century Gothic. Do some kind of modulo on the IP address to pick the background color to ensure folks with the same letters get different colored backgrounds.

6 Likes

That Gmail client looks sooo 1998. I don’t look to Google for any kind of design inspiration (apart from their icon design) but that might be just me.

For me, the Discourse design ethos stems from the logo

//assets-meta-cdck-prod-meta.s3.dualstack.us-west-1.amazonaws.com/original/2X/3/39239a7f2b0f0aa72bdd0d3c1880f15f1a967276.png

The shapes, the colours. Elegant. That shit is hot.

With that in mind… what about some variations on birdcourse and discat? 15 or so animal templates plus varying the cyan/yellow/red colouring and the outline colour would give a lot of combinations.

The fact they’re not squares makes them more recognisable. And, much like the Vanillicons you linked to, they also have a lot of personality.

3 Likes

Those would work well here, but hopefully most of the sites have their own logo and color schemes. The defaults should be way more universal, like the original suggestion with the colors and letters.

This really should be easily customizable using plugins or something since the avatars make up much of the site appearance. Those animal avatars for meta would make a great tutorial on how to achieve this.

1 Like

Out of curiosity, how many “default” “pattern” avatars are there now?

I can see where there could be some confusion with identical lettered avatars, but certainly less so than the current patterns.

If you throw 3 color combinations int the mix, it would allow for hundreds of variations for each letter.
add a second lowercase letter and there are even more possible unique looking avatars.

True, some letter combinations would be more common than others, but I think it would be a good move and better than the current “pattern” avatars.

That’s a good way of thinking of it:

  • 26 letters (A-Z)
  • let’s say there are 216 easily distinguishable colors, same as the ‘web safe’ color palette

The second bullet is somewhat debatable, but I can’t find any real citations on how many “easily distinguishable” colors there are… web safe palette, although obsolete, seems like a good starting point.

So 26 * 216 = 5,616 different combinations. That should be more than enough for the average topic, don’t you think?

2 Likes

:laughing: I should hope so!

There’s bound to be more "Dave"s than there are "Zorba"s but I think this approach would definately suffice and be an improvement.

Hi guys! This is my first post here, hope I do it right. I really loved the idea of minimalistic avatars, so after some work I’ve published a basic workaround in GitHub:

I don’t know if this is useful at all, but I’ve had a nice weekend playing with LESS :wink:

9 Likes

Very cool! We decided to go with image based versions of this for now, for consistency – as other custom avatars will be images by definition. I love this approach though.

I know @zogstrip found that letters with a tiny bit of shadow worked best, perhaps incorporate that?

2 Likes

Seems to me some people are forgetting this is a Discourse default that is being discussed here. Monsterid is cool, in the right forum culture with appropriate styling. It cost certainly won’t fit in with 80% of all forums.

Really like the letter approach, and the prospect of maybe saving a few bytes by using @rmhdev’s approach in the future is appealing.

One thing I’d really like is the choice between colored box vs colored letter, though maybe that’ll have to wait until they’re generated by CSS.

Such an awesome solution. I love that you can then customize the font-family, if you want, to match or contrast your forum’s typeface.

its an insignificant saving, these letter images are cached forever

This is now complete.