I know this is horrible bikeshedding, so I apologize in advance, but… even though I am more of a square vs. rounded kind of web guy, I find that I consistently prefer rounded avatars in the topic list. Every time I see someone doing it, I think, “hmm, that looks a lot better.” And I’ve been thinking this for a year now.
Rounded edges give a bit more “breathing room” around the images when there are avatars close together like that.
Rounded edges feel a bit more organic and human. When we’re talking about avatars of people, human is good.
Rounding these images sets them apart from the many other square elements of our default design a bit more (buttons, nav, etc)
I know we want styling to be minimal for the default design, but I feel the rounded style is clearly better, at least in the topic list, and I want to experiment with it as a default.
I like it, but cutting off the corners loses a good portion of the original image. Non-mugshot images get cropped awkwardly and the added whitespace creates the illusion that the avatars are smaller than they really are… so perhaps they could be made a bit larger to compensate?
For avatars that are user-uploaded images, I think that they should display just as they are. As mentioned, if you cut off the corners, you may cut off a significant part of the image.
If you wanted to round the default “letter” avatars, that would be fine, but then it would make more sense to me to round the actual avatars so that they would be round everywhere.
Well… you can have round avatars in the topic list right now with a bit of custom CSS — and the inverse should be true if this were to become the default.
Going to agree with @loopback0 here, in a rather odd way.
On the matter of “rounding” the avatars: Go big or go home.
if you’re going to make the avatars round then apply it everywhere, all the avatars are round so those of us with custom can plan for the mangling that will occur. otherwise you end up with an inconsistent UI where sometimes you get the extra details in the corners and sometimes it gets cut off.
It’s better to be less human and more consistent here. So if you make the change to round avatars apply it everywhere.
I was going to say ‘make it a user-option’, but then that’s a bad idea; as others have said already, those of us with custom avatars do find it easier if we know it’ll be square or round. Personally, I prefer square; if you want a round one, then just make a round one, and use transparency so you don’t have ugly white bits
In addition the perceived size issue @elberet mentioned, there is a recognition concern that you should keep in mind as well. Take for example, the following potential avatars:
Easily distinguishable as square avatars. But you round them, and:
Suddenly you can’t see the difference between the two. Now I’ve obviously designed this set of images to emphasize the problem. The much more likely scenario is that you have two users with similar avatars that are different enough for recognition as square avatars. When the avatars are rounded, they may still be distinct, but much less so because unique features get cropped out.
Another issue is that the rounding may crop out all or part of the focal point of a user’s avatar. The idea of rounding assumes that the focal point of a user’s avatar is going to be at or near the center, when that may not be the case.
If you are determined to use the rounded avatars in the topic lists, you will need to provide users with the following:
A rounded preview of their avatar when a new avatar is uploaded. This is a must, as no user will want to upload multiple times just to see how the rounding affects their avatars.
A way to modify how the avatar is displayed in the rounded format. This could basically just be a UI to allow the user to re-center the image so that the parts of the avatar that are most important to them are displayed when the avatar is rounded.
I’m all in on rounded avatars and agree with some other voices here: it’s all or nothing; adding more inconsistency to the core is a bad idea. Overall I think the pros outweigh the cons (are there any non-subjective cons other than cutting off image corners?)
There’s also a bit of scientific data to back it up (though, this type of stuff can be debated infinitely)
How’s this for a quote:
perceived salience of a corner varies linearly with the angle of the corner. Sharp angles generated stronger illusory salience than shallow angles
As the article I linked clarified: hard corners stand out more. Avatars are important; buttons are important-er. So I think creating the contrast between the two is worth it.
As mentioned, most avatars are faces of some kind… this is an eye-tracking example done on an advertisement, but it’s generally known that humans prioritize the face versus whatever is around the face. I don’t think we’d be losing much by ditching corners!
You’ll also find people who will speculate that image squareness is dictated by technology constraints (ease of film and screen manufacturing) and naturally our field of vision is round-ish anyway… but then we can start getting really philosophical and what can be more bikesheddy than that?
Mine would be based on how it gets implemented. Are we talking about a default CSS implementation, or actually altering the avatars so they are rounded at upload? If we are talking CSS, I have zero complaints, as it provides a way for those who want something different (square, diamond, whatever) to do so.
If we are talking alter the file at upload, then that really restricts the flexibility and design others can choose without a plugin that can hook into uploads.
The idea of rounding assumes that the focal point of a user’s avatar is going to be at or near the center, when that may not be the case.
That’s a good point — I can’t think of a specific example at the moment (edit: duh, Facebook does it), but there are more than a few sites that allow you to zoom in and out and drag your avatar around to specify how it’s getting cropped. Guessing that takes a bit of work, but it would definitely be cool to have (it would even have utility on non-circle avatars).
One other thing to keep in mind. Is on our community we have members who use their logo as their avatar and I’m sure this may apply in other communities too, I’m not sure they would be fond of their avatar getting cropped at upload… or even with CSS. Just something to keep in mind.
I hate round profile photos because they waste too much space and looks like punched holes in the page, but one can always design a new image around the circular shape so the logo isn’t cropped. We do that for Google+.
