Personal tools


From Social Patterns

(Difference between revisions)
Jump to: navigation, search
Line 62: Line 62:
* [ Adium]
* [ Adium]
* [ anonymous avatar gallery]
* [ anonymous avatar gallery]
===Sources / Further Reading===
* [ Faces Call the Trust Code in Our Brains] (Kevin Marks, in his Epeus' Epigone blog)

Revision as of 00:28, 1 June 2009



A user wants to have a visual representation of themselves as part of their online identity.

Use When

Use this pattern when the user wants to have a visual associated with their identity.


Avatar is both a generic name for a visual representation of a user online, and a product name for animated/cartoon drawings that represent a user online.

Allow the user to upload any kind of image as an avatar. This can be a small portrait, an icon or an illustration that the user believes represents themselves.

Avatars used on MyBlogLog. The larger image is a reflector back to the user and the smaller images indicate other visitors to the profile.

Allow the ability to upload a larger image – 100x100pixel – and automatically resize for smaller uses. Many services use an image that is 48x48 pixel inline but a larger 60x60 pixel or 100x100 pixel may be used on the profile.

Resize the image for user in buddy lists and instant messenger lists. These are often much smaller than what is used on the web.

Cartoon style avatar available for use on Yahoo! Games.

Avatars (the illustrated representations) allow for a degree of anonymity, but do reduce the perceived credibility of the poster in many cases.

Default Image:

Not pictured icons as used on MyBlogLog, flickr, twitter, yelp and Facebook.

If the user has not designated a display Image for the current context, use a "Not Pictured" image as the default avatar. This will encourage the user to customize so that they have an identity that is unique from other users.

Multiple Avatars

Allow the user to upload multiple avatars and to change the presentation through the edit capabilities on the profile or identity card in context of use. See Editing the Display Image in the Reflectors Pattern.

Yahoo’s change image overlay shows a carousel of images previously uploaded.

Adium allows the user to select their image from the ten most recently used images.

Yahoo!’s identity cards and reflectors allow users to upload multiple images. Instant Messenger software Adium allows the user to select the current image from up to ten recent icons. In most cases, when a user wants to change their avatar they upload another image and overwrite the previous one. Consider allowing multiple images to be uploaded and stored for later selection.

Mood Expressions

Mood expression attached to profile image.

Allow users to attach a special status message or emoticon to supplement their avatar in order to indicate a particular mood.


A gravatar, or globally recognized avatar, is a third-party solution that hosts an avatar image that follows you from weblog to forums to other social services appearing beside your name when you comment on gravatar enabled sites. The service is provided by and is supported by a host of blogging platforms, open source social tools and blogging services.


Allowing the user to upload an image encourages them to build up a real identity. The Avatar or image allows users to associate a likeness and a reputation with the person.

Related Patterns

As Seen On

Sources / Further Reading