web page hit counter

Friday, July 06, 2007

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.

flickr48x48cropping widgetbuddy icon
twitter48x48, 24x24center squarepicture
dopplr128x128, 32x32top squareicon
last.fm160x160, 50x50aspect scaledyour picture
jaiku75x75, 30x30center squareyour photo
anobii48x48center squarebuddy icon
corkd64x64center squarebuddy icon or picture
pownce140x140, 48x48center squarephoto
revish48x48scaled?user icon
ficlets48x48nonebuddy icon
newsvine120x120cropping widgetyour photo
ma.gnolia.com75x75, 32x32aspect scaledavatar
xing140x185aspect scaledyour photo
digg48x48, 32x32, 16x16cropping widgetyour image
librarything207x276aspect scaledpicture
wishpotNx75aspect scaledmy picture
dreamcrowd80xNaspect scaledmy 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.



You should follow me on twitter here.


Blogger Chris said...

What about Twitter's tiny icon in the sidebar?

5:57 AM  
Blogger Bill said...

What a great idea Chris. Thanks for the research.

I've been going through pains with this stuff for a while. Even integrated Gravatar (yuck) into joyomi.com only to find that the service is almost always unavailable.

I think the flickr advice is great. Gonna try that. After updating my image on about five sites in one week I wonder aloud whether there is an opportunity in here somewhere.

1:48 PM  

Post a Comment

<< Home