1

I am developing an "account edit" page where the user is able to edit a number of personal identification fields (e.g. name, affiliation, address etc.). The presentation is quite straightforward with vertical aligned labels and text input fields for the various fields. There's a "save" button at the bottom (which becomes enabled when the user modifies a field) and a "logout" button at the top.

So far so good.

I was asked to support an optional Curriculum Vitae (CV) field which would enable users to upload a single PDF file.

The user should be able to:

  • upload a file (possible overwriting the existing one)
  • delete the currently uploaded CV (in case they no longer wish to have a CV on their profile page)

I am having trouble deciding what is the cleanest and most intuitive way to support the deletion of the current CV (in case one is in fact uploaded).

I was thinking of having in the following order:

  • a text description of the uploaded file (if any) labeled "CV"
  • a checkbox labeled "delete uploaded file"
  • an input element of type file labeled "upload new"

The checkbox would be made visible or enabled only if a CV file has is in fact been uploaded to the server. It would also be automatically deselected when the user chooses a file to upload from the file dialog. This is to avoid confusing users who have selected a new file to upload and are wondering whether they should also delete the currently uploaded file (they shouldn't as it is automatically overwritten with the new file).

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Can this be improved or is there some other more intuitive arrangement?

Improve this question
2
  • Could you have two buttons, 1 Update allows the CV to be updated, one Delete which deletes the current CV (although you would want it after the save button to show it is not saved by the save button)
    – jrtapsell
    Oct 13, 2017 at 23:55
  • @jrtapsell I understand your suggestion to be that the "delete" button actually deletes the file (as opposed to simply scheduling it for deletion when the big "Save changes" button is pressed - which is what the checkbox does). In that case having the "delete" as a button is worse IMO as then we are using two separate ways to sumbit the form and effect changes: the "delete" button and the "Save changes" button.
    – Marcus Junius Brutus
    Oct 14, 2017 at 0:04

1 Answer 1

Reset to default
1

I would recommend against using a checkbox for deleting a file. Instead use a button or a link, with some form of confirmation. See this question/answer regarding when to actually remove a file.

Your "Upload New" button works well.

Here's a visual:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
2
  • See my comment to jrtapsell's comment to my question. Exact same problem applies. The only difference being that jrtapsell suggested using a button whereas you suggest a link. Would clicking on the link result in action on the server-side? (namely to delete the file?). If so, this may be confusing to the user as there are now two ways to effect changes on the form: (a) click the remove link or (b) press the "Save changes" button. Option (a) would apply only to the uploaded CV file (if present), option (b) would apply to all other fields.
    – Marcus Junius Brutus
    Oct 16, 2017 at 14:36
  • Button, link, either will work. You have two options: 1. present a confirmation to delete the file and then delete it immediately, or 2. Don't present a confirmation and delete upon saving the form. See which fits best in your use case scenario. Separately, how often will users be removing (and not replacing) their CV?
    – Alan
    Oct 16, 2017 at 14:39

Your Answer

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

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