There is an image (1 img) selection option within a form with 3 choices:
1- User uploads the image from computer.
2- User can select an image from pre uploaded images.
3- User selects a default image.

And this is what i have come up with: enter image description here

Default image will be pre-selected & clicking on gallery will open a popup

Problem: My colleague is suggesting that this should be some kind of toggle button so that users explicitly knows from where the image is coming i.e it was uploaded or selected from gallery or is it the default image. I am having hard time understanding what he wants however I would love to hear from community on what is the best way of showing an image upload UI in forms.

  • You could simplify it further by removing the 3rd option imo. Simply show the default image from the beginning and show a small text like (default image) to indicate that.
    – Pithikos
    May 27, 2020 at 14:36

1 Answer 1


Although your interface is usable, it's important to utilize cohesiveness and decision-making in the case of image selection. By "toggle", I think your co-worker means the options should be more clear. Here are some mockups that might better illustrate what I mean:

Drop Down

This method is used heavily in social media, where the user intuitively clicks on their profile picture to change it.


download bmml source – Wireframes created with Balsamiq Mockups

Image Selection Window

While also used in social media, the windowed image selector is used often in productivity platforms.


download bmml source

All of the above examples force the user to make a decision between the interface elements, which helps highlight the different options available.

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.