The word avatar comes from the Sanskrit word avatar (avatāra – descent) and refers to the descent of a deity into the earthly realm. In the computer world, it is a graphical representation of the user. Although they can be two-dimensional or three-dimensional, on most platforms, avatars are two-dimensional.
Avatars on the web serve to allow users to identify each other. Even if it is not their personal photo, if we interact with a user in, say, a forum, we could remember the image they chose and recognize it the next time we see a comment from them (as long as they have not changed their avatar, of course).
Adding an avatar by people should have:
Visualizer
Before the user chooses their image, it is good to show them how it looks in the avatar shape – be it a circle or a square. The visualizer does exactly that. If an image has already been selected and uploaded to the site, it shows the user, before they confirm their choice, what the selected image looks like.
Upload or selection link
Usually, when the user logs into their profile, near their avatar (most often below it) there is a link to change it or create it (upload an image), if one has not yet been selected.
If you prefer to make it so that editing the avatar occurs when clicking on it, rather than with a link below or to the side, then place some indicator of the possibility of editing. Such a solution is, for example, the pencil icon in the upper right corner of the visible borders of the avatar.
Sample image
Before the user has selected the first image, or if they decide to remove their avatar, the field should not be left empty. You could replace the sample image with the user’s initials (like they do on Google) or the same default image, like they do on Facebook.
File formats
To make it easier for users to navigate how to choose their avatar, show them which file formats are acceptable in your system and which are not. Such formats include .png, .jpeg, .jpg .svg, etc.
Change status
When users make changes to their avatar (as well as their profile), it’s nice to be notified of the status of the change. That is, whether it was successfully completed or if there was an error.
You don’t have to give them this information through the avatar (for example, through a green tick or X appearing on the new image), you could also use banners or a toast element for example. However, it is good to give users information about the status of their requests to your platform.
Alternatives (optional)
If you want, you could provide users who do not want to upload their photo with some illustrative alternatives. Let’s say a selection of illustrations of people or some mythical creatures, depending on how your brand is presented. In a forum or social network of a bank, it is obviously frivolous to put animals or other fictional creatures as options. The fact that people can choose them for themselves and upload them themselves is not the same as what you have chosen to offer them.
Edit (optional)
Also, you could optionally add the ability for users to edit their selected image before saving it. They have such an option on Facebook, but not on Instagram (as of 2022), which means it is by no means mandatory, but it certainly offers some convenience.
