0

I have a user settings form where a user can set their email, toggle some boolean preferences, etc. I would also like to allow users to upload an image to use as an avatar.

There are two basic behaviors I want to support:

  • Users can unset their avatar somehow
  • Users submitting the form without editing any fields shouldn't change anything

The issue arises here that a user leaving the file upload field blank could mean "delete my avatar" or "don't change my avatar".

The two approaches I considered were adding a toggle for "remove my avatar" although a user could check that and upload and image at the same time and correct in this case seems... unclear. It also just feels a bit clunky.

Alternatively I could make a separate form for updating avatars but having two forms on the same page operating independently poses the risk of a users filling out both forms and submitting one, losing the entries on the other. Also I'm not sure if "leave the image field empty and submit" is obvious to users as the way to remove their avatar.

Additionally this needs to function without client side scripting, I can include it as an enhancement but I have a non-negligible portion of the userbase who don't load scripts.

What are some best practices on how to handle this situation?

1

I would use a single logical form (can be organized into different sections on the page) with three submit buttons:

  • File upload picker with a submit labeled something like "Set New Avatar"
  • A submit labeled "Remove My Avatar"
  • Finally, a "Save Profile" button that applies to all other fields.

By using different names for the buttons, the server can tell which button was clicked. If it's either of the two avatar-related submit buttons, the server sends all the other form data back to the page and pre-fills the form in so that the user picks up where they left off. Therefore, both avatar actions are explicit and (can be) independent from the rest of the form.

In this case, a blank image picker means "don't change my avatar". Or, if the user misses the fact that they can/should click the "Set Avatar Button", their new file selection will be saved when they click "Save Profile".

0

The best alternative I can think of when updating images is using a preview since most of the sites nowadays do it that way. But it is hard to accomplish a good user experience without client side code with this approach.

Maybe providing a different screen with to buttons "change picture" that would lead to a screen with a form to do so, and another button "remove picture" that could use a confirmation dialog to confirm the action and then the request would be sent to your server to remove the image. You could additionally place a link to this view somewhere in the users settings.

I know this means a lot of clicks and maybe it is not the best experience ever, but I think it will make clear how to accomplish the tasks without having to read to instructions (because most users don't).

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.