Buddy Icons, Avatars and Profile Images

It seemed like a good idea at the time, but it ended up taking forever to put this chart together. Part of it was getting distracted by the sites themselves[1], both the interesting content and the sometimes frustrating implementations. The various sign-up processes are definitely worth a survey.

The list is pretty random, and consists of some sites I was researching anyway, plus most of Jeremy Keith's sites from his adactio article on social networks.[2] The table has the name of the site, the size(s) of the icons, how the icons are cropped and what terminology is used to refer to the images.

flickr	48x48	cropping widget	buddy icon
twitter	48x48, 24x24	center square	picture
dopplr	128x128, 32x32	top square	icon
last.fm	160x160, 50x50	aspect scaled	your picture
jaiku	75x75, 30x30	center square	your photo
anobii	48x48	center square	buddy icon
corkd	64x64	center square	buddy icon or picture
pownce	140x140, 48x48	center square	photo
revish	48x48	scaled?	user icon
ficlets	48x48	none	buddy icon
newsvine	120x120	cropping widget	your photo
ma.gnolia.com	75x75, 32x32	aspect scaled	avatar
xing	140x185	aspect scaled	your photo
digg	48x48, 32x32, 16x16	cropping widget	your image
librarything	207x276	aspect scaled	picture
wishpot	Nx75	aspect scaled	my picture
dreamcrowd	80xN	aspect scaled	my icon

last.fm has a pointer to mypictr if you want to get fancy with cropping. That's a good idea, since apart from Flickr the site-specific cropping widgets were uniformly hard to use.

aNobii allows you to upload an image, or you can give it your Flickr name and it will use your flickr buddy icon. There's an an option to check Flickr for updates once a month. Cool.

revish delights and disappoints. It looks like they make a wild guess that your revish login is the same as your Flickr login and speculatively download the matching buddy icon. It worked in my case. At first I though they were using the Flickr api's findByEmail call to match my email address to my Flickr account (which is a neat idea), but I used a email that isn't hooked to Flickr, so they must just be guessing. On the other hand, if you upload your own icon they scale it without cropping, which is just nasty.

ficlets doesn't even bother with manual picture uploads. They're associated with AOL, so as expected you can use your AIM icon, but you can also point at your Flickr or twitter account (which are, conveniently, both 48x48)

Conclusions? If you're going to use a small image as your primary user icon, then make it 48x48 and give users the option to use their Flickr buddy icon. For extra credit, if you've got an email, use the Flickr API to grab the appropriate icon speculatively (without forcing them to enter their Flickr name). For extra extra credit, poll Flickr once a month for changes to the icon. Don't bother with a fancy cropping widget unless you can make one as good as Flickr, instead just crop the uploaded images to the largest centered square and scale to fit. Point users to mypictr if you think they want to get fancy.

On the other hand, if you want a portrait-style picture on the profile page, 48x48 is too small and the picture shouldn't be square. Give the user the option to upload a picture or let them give a URL that points to a profile picture they like.

If you're not sure how your site will evolve, let people upload whatever they want, and then keep a relatively high resolution copy of it so you can re-scale or re-crop later on. Once you scale down, you can't scale up again.

If you want to leave a comment giving information on your favorite site, I'll try to keep the chart up-to-date. I suspect it will become more important as profile-exchange mechanisms start to proliferate.

Update: If you liked this post, you'll love A Survey of User Profile Fields.

[1] Corkd was especially bad. I felt obliged to fully research my wine before entering it in. Le Cigare Volant led to some reading on Bonny Doon and finally to The Phenomenology of Terroir: A Meditation by Randall Grahm. Some hours later, it was on to other, mostly less compelling, sites.

[2] I was at adactio because of Brian Oberkirch's excellent (if oddly stereo-mixed) Edgework podcast interview with Jeremy. I drive with only one earbud in (under the possibly mistaken impression that it's legal) so I could only hear Jeremy's answers. It was frustrating at first, but I got to kind of like it.

tags:daytripr,icon,socialnetwork,design