0

I am creating an app and want to know the recommended minimum size for profile pictures when their picture is used to show that they are assigned to something. I wanted to do something similar to facebook messenger, where there is a minimized profile picture that shows who you are talking to:

enter image description here

What is the recommended minimum picture size for this scenario? I only have found examples of standard profile picture sizes, not the minimized version. In my scenario, the profile pictures will be used inside a card like this: enter image description here

2 Answers 2

1

From my experience, it really depends on this context questions:

  • does it need to be interactive (touchable, clickable)?
  • does the visibility of the face photo is important in that context?
  • do you have an existing framework (dev or design)?

Depending on that, you would probably have different sizing needs.

For interactive avatar

The kind of avatar I can click/touch to do something on the interface (see profile, edit my avatar, etc.) you'll need to comply with the minimum size for a touchable interface component: Apple and Google don't agree here, but around 48px wide is enough.

Your context

If you don't need this to be touchable, do you have a context where the face of the people, or their avatar, matters? If yes, you would rather take a higher sizing. If not, a small one can be enough.

The framework

As @AndriiD said in their answer, most Designers use a 4/8px grid, so using a size among 24px (min IMO), 32, 40, 48, etc. is a safe solution. But, regarding my last point, if your team is using another framework, it could be a 5px grid for instance. If I remember well, Boostrap is using a 5px grid.

In your case

I would go for a sizing that is close to the chips used in Material UI. They are purely indicative avatar to give you more metadata on a card or on another component. The chips uses an image size if 24px.

Hope this helps 😊

0

Typically, the profile image dimensions are made according to the selected mesh model. Often designers use an 8-dot grid, so the sizes will be 8, 16, 24, 32, 40,... My advice is to use a minimum size of 16 if you want the user to be able to see the profile picture.

Also, I would recommend adding a username tooltip that will appear when you hover over your profile picture.

2
  • if it's a mobile app there's no hover...
    – Luciano
    Mar 9, 2023 at 10:36
  • Sorry, you're right, I got a little carried away. Mobile has no hover
    – AndriiD
    Mar 10, 2023 at 16:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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