1

So I have a list of default profile images (colors) that the user can select from. They also have the option to add their own image to the existing list. Its a fairly easy process to add an image to this list, but I'm having trouble figuring out the proper way to allow a user to delete an image if they wish. Currently, this is in an overlay where the user simply taps to select an image. I thought about tap and hold, then drag to the bottom of the screen to delete, but is that intuitive to new users when nothing is apparent on the screen? Is there a better way to accomplish this where the user does not have to guess how to delete an image? Keep in mind, this product will be geared towards an older age group which is why I'm apprehensive about using a tap, hold, and drag interaction

enter image description here

Edit: Here is a more recent solution I reached after some comments. It was clear to me that the user would only use one image at a time, so there is no need to store them. Additionally, using the law of proximity, I added an update and delete button next to the custom profile image so the user will know which image they are updating/deleting. Please let me know what you think

enter image description here

Improve this question
4
  • 1
    Thanks for including the update
    – Giulio
    Commented Mar 5, 2023 at 10:31
  • I like it (though I still believe allowing multiple custom images might be good, but you know your users and use cases)... the only thing is that with ONE custom image slot, the concept of "delete" becomes fuzzy - does it just delete the image from the slot (and the name? Where is that entered/updated?), or does it delete the Custom slot altogether? Just some more things to think about.
    – Mattynabib
    Commented Mar 6, 2023 at 14:23
  • @Mattynabib That's a good point you raise which I believe can be solved with a text change. Do you think "Remove Photo" or "Clear Image" or any change of text can clear up that issue?
    – Gene
    Commented Mar 6, 2023 at 17:35
  • Well, Remove and Clear have very different implications. Are they actually going to be deleting the entire "custom profile photo" slot, with an option to create another one, or will that slot persist and they are just removing the photo (and possibly the label?) from it? That might help you determine the language.
    – Mattynabib
    Commented Mar 13, 2023 at 15:35

4 Answers 4

Reset to default
3

enter image description here

If setting up the photo is the first priority, it would be more intuitive to add a + mark to the icon itself.

A delete button would be provided but not emphasized, since the act of changing/updating the picture is equivalent to that.

In the case of selecting a photo from the default, it is a supplementary information presentation for users who choose not to set a photo for some reason.

Currently, the image already exists as the main display, so it is better to keep it to one to avoid confusing the user.

Improve this answer
6
  • @GeneLee +1, top answer so far (apart from "default", I'd use Profile Color), should be the accepted! And if there's a ( + ) at the picture, why not place a white-on-red ( – ) or ( 🗑 ) to the left such having buttons of consistent shape only?
    – Gerold Broser
    Commented Mar 4, 2023 at 18:36
  • We do not believe that the red (-) button is necessary. This is because adding or updating an image has the same result as deleting it. The delete button here is intended to indicate that the image can be deleted, so we do not see the need for it to be conspicuous.
    – the point
    Commented Mar 5, 2023 at 10:50
  • Yes, "adding or updating an image [or] deleting it" has the same result for the image itself: it's gone. They have different results for the profile picture. But I think you meant the former anyway. However, my point isn't conspicuousness (or the lack of) but are: 1) consistency, uniformity of controls, 2) control directly at the item it works on, 3) no extra text line, 4) no extra vertical space (because of 3).
    – Gerold Broser
    Commented Mar 5, 2023 at 17:28
  • I'm not sure I love how prominent the delete control is, but I like the direction this is going. I'm mot clear if this is meant to refer to a situation in which and growing list of custom images could be added or just one... the Add and Delete controls will likely have different meanings in the two different cases.
    – Mattynabib
    Commented Mar 6, 2023 at 14:20
  • I like this one better than my previous solution, although I agree with @Mattynabib that I don't like how prominent the delete control is. I believe a single custom image is all that's necessary, so I don't have to worry about adding multiple custom images. I think I will incorporate the blue "+" you used to add a picture and once a picture is added, it will change to a blue pencil icon where the user can tap which opens an overlay with options to replace or remove image
    – Gene
    Commented Mar 6, 2023 at 17:15
1

You are presenting a list that's expandable forever by adding more images. This has some uses, but here it simply is unnecessary - we can only use one profile picture at a time anyway. I'm also questioning the inclusion of default customization options - surely, the user either wants to customize their image (and change it to one of their own images) or they don't care, in which case you don't need to give them options in the first place.

The way this is commonly solved is by assigning an auto-generated profile picture depending on the user input, either with a colored circle with initials in them, or by simply giving a random coloring to the default "person icon" avatar.

Because of this, the way I often see this solved instead is with an upload image/open camera split option during the onboarding flow:

Which turns into a button group in the profile view:

avatar on the left, upload and take pic as buttons, delete below

FWIW: If you need to keep the default options, you can also try a 3-way split in the onboarding flow:

upload/take pic on top, default options below

and change the profile view to a [change image] [delete image] button group, where change image opens the dialog again and delete only is available for custom images.

Lastly, you can also add an (x) icon near the profile picture circle in your design, but between the small size of your options paired with older users, and the open end to your image list, I don't think this is the right interaction model.

Improve this answer
1

While I agree with the previous answer that you can only USE one profile picture at a time, I have seen plenty of examples of places where users like to keep a selection in their backlog for going back to, add new ones from time to time, and switch it up regularly.

What if you simply placed controls near the custom image when it is selected, something like this:

Updated image from the author, additions by me

Those controls could appear for any custom image. Update would allow replacing of the current image, delete would result in a confirmation message which, if approved, would delete the custom item altogether and presumably select either the one before or after it in the list as the next selected one.

Just a quick $0.02 - good luck!

Improve this answer
4
  • 1
    I like this as it integrates both default and custom picture options into one list. I will have to reconsider whether allowing a user to add multiple profile pics or just one at a time is the correct design, however I think I will use this "update" and "delete" feature regardless since separating default and custom (like Leo's comment) seems a bit more confusing, especially for older users. I think this design is much simpler to understand on initial view
    – Gene
    Commented Mar 3, 2023 at 23:01
  • @GeneLee This arrangement is inconsistent. 1) I wouldn't expect the Delete button referring to the "store" below since there's increased vertical space and even a line of text as separator between them. 2) Update moves an img from the "store" below to real. Delete doesn't put it back to store (though the buttons are side by side) but removes it in the end completely. If there's a ( + ) why not a ( - ) down below the "store"?
    – Gerold Broser
    Commented Mar 3, 2023 at 23:19
  • 1
    @GeroldBroser I updated a more recent image as you posted this comment. Please let me know if this gives a better user experience. I also removed the "+" sign. If the photo is deleted, there will be a grey camera circle icon to indicate you can take a photo or add one from your gallery. Once that happens, the new image will replace the aforementioned camera circle icon
    – Gene
    Commented Mar 3, 2023 at 23:22
  • 1
    @GeneLee I liked the ( + ) for being of the same shape as the selectables.
    – Gerold Broser
    Commented Mar 4, 2023 at 1:23
0

  • 1st image:

    ＋ Add picture of the same shape as the selectables

    ＋ colors + picture nicely lined up 2 × 4

  • 2nd image:

    － Update Delete of different shape than the selectables

    － picture is not lined up with the colors, though of the same shape

    － increased vertical space due to additional section + header

    － colors not nicely lined up 2 × 4 but of an uneven number

My variant:

  • Blue borders around Delete Picture (remove picture from both stock and avatar) and Add Picture (add or update picture in stock and avatar) only if picture is selected, otherwise both buttons inactive/grayed out
  • Selecting a color or the picture makes it the profile image
Select Profile Picture
Select Profile Picture

Variant of this variant: Just the Add picture as in 1st image instead of the camera button.

Improve this answer

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.