Personal tools

Avatar

From Social Patterns

Jump to: navigation, search

Contents

What

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.

How

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.

Image:4-23-yahoo-profile-avatar.png
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.

Image:4-24-mybloglog-avatars.png
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:

Image:4-26-notpictured.png
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.

Image:4-17-yahooreflector-changeimage.png
Yahoo’s change image overlay shows a carousel of images previously uploaded.

Image:4-27-adium-recentpictures.png
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

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

Gravatar

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 gravatars.com and is supported by a host of blogging platforms, open source social tools and blogging services.


Why

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