3

Designing a new application and wondering when avatars or profile pictures should be used.

e.g. Let's says there is an application which can be used to manage a list of user tasks. Each task is assigned to a user.

There will be a list page which displays all the open tasks and when a task is clicked it will take the user to the individual task details page.

Should there be an avatar on the list page for every task item? or is showing the users full name enough on this list?

Should there be an avatar on the individual task details page? or is showing the users full name enough on this page?

What benefit do avatars or profile pictures give when viewing a screen as opposed to showing the user name only?

2

The need to add a profile picture against an item in the list is for quick visual identification of the person. In case of big organizations the person managing the tasks etc or looking up info may not be sure of the person just by looking at their names. The profile image along with the name helps to make sure the correct person is identified with respect to the information. The catch is in both cases where user customises their profile picture and also where they dont. In case of customization the user may use their actual photo or some personal avatar (like if someone wants to put their masked vigilante / alter ego which isn't their actual photo, maybe some character they just like).
In case they don't care to upload or change their profile picture and the default avatar shows (some person icon or just the name initials).

Now as a person looking at the list with profile pictures, I can imagine the following cases - 1. I know the person personally and I can identify and confirm the face against the name. (There can be a case where there are multiple people with the same names especially in large organizations so the face helps conforming against the name) 2. I know the person but he hasn't used his actual photo. But I know him by his alter ego image - maybe Batman or garfield. 3. I don't know the person and the face doesn't matter for confirmation in this case but I might remember them henceforth.

Now just having a profile picture or avatar in the list is helpful or isn't depending on the various use cases that might be relevant for that screen. You can put together all such scenarios and then decide if you need it.

1

Every decision which you take during the design should be based on how you expect the user to interact with the application. And the decision of whether to include an avatar or not in the UI will be based on screen size as well.

Personally, I like IOS 10's approach toward default avatars. In the absence of an image for the contact, displaying initials as the avatar is a great way to utilize the space maximize the context information delivery to the user.

I recommend you to use suitable tools which can perform heat map analysis to gather the data about in where the user is spending mostly and to avoid placing the avatars in those places.

0

In my opinion, using avatars or name initials along with the names visually helps the person using the app quickly figure out between each user. Deciding on when to use the name only will also depend on the visual elements for each user and the length of the list.

For example: If the list has less than 5 items with limited visual distraction then the just showing the names will be enough, but in a case where the list is more than 5 and includes further more information for each item an avatar will help reduce the cognitive load of the user to scan through all of the lists to find a particular item.

Having said that, I have not run into a universal rule backed by data that specifically helps me to take the design decision but having user testing will help you validate which one works for your types of users.

Furthermore, I found this article which may help you dig a deeper into using avatars.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.