19

I have a fairly standard profile editing page (password, email, etc.) that contains one standard file input element. Since the file input field is the last editable field in the form, the submit button is directly afterwards. There's not a single form on the website that submits/saves automatically. The feedback I've received from management is that it is "confusing" and they've requested adding a note telling the user that the form has to be submitted or the file won't be uploaded.

enter image description here

There is another page on the website that deals with uploading multiple images that also does not automatically submit, but does not appear to have the same confusion (it also has a single standard file input element in addition to being JS enhanced with image previews, progress bars, etc).

Are users genuinely confused by how the file input element works?

Update (because everyone seems confused by the spirit of the question): I'm not really interested in how I can improve my form, but whether or not users are confused by how forms with a file input element work. If they are confused, what causes the confusion? The UX of this particular project has been run-over by management for months now and I'm convinced they're underestimating the average user's intelligence in this particular instance. Because the project has not launched yet, there are no real users using it so I have no data to show how they actually behave to back-up my gut.

Improve this question
3
  • 2
    Can you provide a screenshot of what your form looks like?
    – Mervin
    Feb 5, 2014 at 15:48
  • 2
    A possible thought on the user's mentality: "I clicked choose, then selected my file and hit OK. If I didn't want to use that file, I'd have clicked Cancel instead". Essentially (imo), user thinks that hitting Ok is the end of the task. My suggestion: If the user makes any changes to any of the fields (including avatar), and attempts to navigate away, have a pop-up letting them know they're about to lose whatever they entered. Additionally, you can highlight modified fields for added emphasis.
    – Ross Aiken
    Feb 5, 2014 at 22:12
  • 2
    I have to say I disagree with your stating "underestimating the average users intelligence". Never has it been possible to underestimate that- I have seen it time and time again. Always assume the general public are CLUELESS to what you are saying, always.
    – tim.baker
    Feb 16, 2014 at 22:07

12 Answers 12

Reset to default
6
+50

YES, people get confused!

For a change, I am honored to answer with some real evidence:

During my last usability testing, a significant amount of people got confused. They were sure they uploaded the file, but in reality they have just chosen the path, and missed the "upload" button.

Two major issues generated these results:

  1. Uploading files is done in a pop-up dialog: The dialog has an "OK" button that just closes it. Inside the dialog there are the usual components of textbox for path, "Browse" button and an "Upload" button. Users missed the last one, and just clicked "OK". They were sure they have complete their task (this is what happens when you click "OK", right?)
  2. No feedback was given whether the file was uploaded or not: After closing the dialog, nothing was changes on the screen, so there was nothing to tell the user about the status of the file (since it's all "hidden" inside the dialog).

My lesson learned is to avoid the pop-up dialog when possible and to provide clear feedback about the status of the file (especially when it's empty).

Improve this answer
2
  • Just out of curiosity, do you think this has always been the case? The file input field has been around forever.
    – cimmanon
    Feb 19, 2014 at 13:25
  • I guess this has always been the case whenever the upload controls were packed inside a pop-up dialog.
    – Dvir Adler
    Feb 20, 2014 at 15:25
9

The default file uploading element can be confusing for non-power users, who might be seeing it for the first time. You should redesign it to something more user-friendly, which tells the user what he's doing exactly - like Facebook: there's a link saying, "Upload pictures", and when you click it it shows the OS window for uploading files.
Also, looking at the picture you posted, I find it evident that users - even power users - might be confused at the file uploading element: there's no label saying what does it do, why is it there, why should the user click it. You should label it "Upload an avatar" or something like that.

Edit: you asked if people are genuinely unable to understand that they have to click Submit in order to upload the picture. I think yes: many websites tend to submit the form just after you choosed an image, unless in special cases eg. posting a picture on facebook - but in those cases, feedback is given to the user to let him understand that another step must be taken, eg. writing something or confirming the upload.

Improve this answer
7
  • I'm unconvinced that Facebook changed the appearance of the file input element for usability purposes rather than for aesthetics. Keep in mind that while you might find the file input element confusing judging solely on the screenshot, the element's appearance differs from browser to browser (see: ux.stackexchange.com/questions/39555/…)
    – cimmanon
    Feb 5, 2014 at 16:21
  • I see the aesthetical reason behind Facebook's choice, but there's an important thing to notice: Facebook did not just make a better-looking, but generic interface for uploading files - they labeled it as "Upload image" and added the classical picture icon to it. You should consider something similar for your form.
    – Giulio Muscarello
    Feb 5, 2014 at 17:20
  • Changing the appearance of the element doesn't mean the element was poorly designed to begin with, designers change the appearance of form controls all the time (sometimes the changes actually degrade usability).
    – cimmanon
    Feb 5, 2014 at 17:48
  • What exactly do you mean by appearance @cimmanon ? If facebook changed the label of their upload button and adding an additional image they did not just changed the appearance but the content and with it the call for action.
    – uxfelix
    Feb 15, 2014 at 16:33
  • 3
    That's an answer to the question title, not to the question text. If you read the question text, people are successfully choosing a picture and uploading an avatar. The problem people have is that they see fail to see any requirement to click 'Save'.
    – Paul Gregory
    Feb 16, 2014 at 16:40
8

Are users genuinely confused by how the file input element works?

Only you can answer that specific to your users. You could try attaching some behind the scenes logging to record the number of times someone chooses a file but then doesn't save the form, and especially if they choose a file, navigate away without saving, and then they come back to choose the exact same file again but this time clicks save. Get those numbers.

Assuming that they actually are then you need to do something.

Since the file input field is the last editable field in the form, the submit button is directly afterwards.

One simple thing you could do is to reorder the sequence of fields such that the avatar thing is not the last editable field in the form. A sensible place might be alongside the Custom URL field, since both are used to represent the user to others.

Additionally, you could tweak the Avatar input controls such that the current avatar is presented first, and then the Choose File control is presented (with a label of Replace Avatar). That should be sufficient to explain to users what is going on there.

Lastly (and this applies to all your forms) bump the [Save] across to the right, such that it would sit immediately below and in line with the fields above (vs being in vertical alignment with the labels). That way the eye-tracking path of the user would proceed directly from the last field onto the [Save] button, rather than being tucked away on the left.

form rejigged per above description

Each of these changes are simple to do, and if the simplest thing works then that's good enough, and you avoid having to do tricky extra effort to restyle the <input type=file> control.

Improve this answer
4

I just tested uploading a header photo on Twitter. It uploads automatically after I select the file I want to use. So there is no submit button. Google does this for avatars, as does Facebook. If you can pull that off with your avatar upload (so the user can see results before having to click "submit"), that would probably offer the best user experience.

This might help and so might this.

Improve this answer
6
  • So you're suggesting that because sites like Twitter, Google, and Facebook have broken the default behavior of forms (images upload automatically), that users don't even understand how forms work anymore?
    – cimmanon
    Feb 5, 2014 at 19:03
  • 7
    @cimmanon that's very possible actually...
    – Jessica Yang
    Feb 5, 2014 at 19:56
  • 1
    The default way forms work is not what you are doing nor have they ever been a good UX practice but rather remnants of a past before we had AJAX style tools. You have sub-steps within steps that make it confusing.It is difficult to tell in your screenshot, but is it evident that there is a Save button just below? Or is it off screen for many users? Is there a Cancel button as well, or does the Save only apply to the image?
    – Mark Sloan
    Feb 14, 2014 at 23:54
  • Best solution for me here. Since its only one picture for one destination its predictable what should happen next with the uploaded picture. The system can do that step automatically and relieve the user.
    – uxfelix
    Feb 15, 2014 at 16:39
  • Equally however, automatically saving avatar changes but not other settings may be confusing if they're part of the same form.
    – Paul Gregory
    Feb 16, 2014 at 16:46
3

I agree with Ross Aiken's comment on your question. Default behavior of the file upload element, when part of a button-submitted form, is confusing for the average Joe.

In your case, where the file in context is a profile picture, it makes sense to separate out the flow of saving profile settings v/s saving profile picture. You need not mandate hitting the save button for saving profile picture.

E.g.

enter image description here

The line of thought behind this is - do not think about your form strictly as representative of your db schema. You need not build a single form to update all columns of profile settings, including the avatar. Instead provide different UX for elements that represent common properties.

Just as I've suggested extracting out profile picture updation with its own UX, I'd also recommend extracting out sensitive information updation in another tab / page. For e.g. if email id acts as the username or if custom URL is perculiarly sensitive or for other critical parts such as password change, you should pick these fields up and have a separate form for them which can only be updated by entering the current password.

Improve this answer
1

Strange, never heard of users having problem with this... especially when the chosen file is still displayed in a normal input field...

Maybe you can catch a user that is trying to leave the page without saving with a "Are you sure?"-Popup...

A quick Google search led me to this:

https://stackoverflow.com/questions/1119289/how-to-show-the-are-you-sure-you-want-to-navigate-away-from-this-page-when-ch

Or maybe changing "Save" to "Save changes" could help?

Improve this answer
1
  • Nearly all forms on the site that involve modifying things use "Save" as the text for the submit button.
    – cimmanon
    Feb 5, 2014 at 16:12
1

The confusion here is classic "Definition of Done" problem:
You have two contributing factors:

  1. Button clicking - the user filled the fields and clicked a button. This is normal form filling. They do not expect to have to continue and click another button
  2. Pause in flow - when the upload is synchronous, "finishing" the file upload takes longer than finishing input in other fields.
    Since this is also the last field on the page, the user mistakes the wait to "saving form" wait.

Two ways to easily demonstrate it:

  • Make the file upload asynchronous - let the user fill in the file and immediately continue while you asynchronously upload the file. It's also better for this if the "choose" is not styled as a button with the same style as "submit" - maybe flat or part of the input field.
  • Have a visible status indicator of the current form status - e.g. a red bar along the left side of the page. It only disappears after the user clicks "save".
Improve this answer
0

I have seen quite a few form and websites that actually create a bar over the page when you have not saved your data.

I have found it quite useful, especially when there are many fields to fill out.

enter image description here

Improve this answer
0

Yes, people are confused by the file upload.

What they are specifically confused by is the point at which they have confirmed the upload.

One of the things that isn't stated is that people are editing a form. It would be interesting if people successfully Save if they are changing another field such as Email. You haven't said if people have reported a problem in changing that.

This form is likely to be unique among your site's forms in that users are editing data rather than adding data. I know you say all the forms say 'Save' not 'Save changes', but you didn't say whether any other form is saving changes.

I recommend that you separate out the profile and avatar editing into separate forms, and have the avatar autosave on upload.

Improve this answer
0

The only one who can answer your question for certain is you. (We can guess, but...)

Run a quick usability study. Get five people and watch them create and edit a profile. Actual results from an actual test will be a lot more convincing to your management than "I asked a bunch of brilliant, attractive people on a website about it and they thought..."

Need help setting up a quick study? This page has a lot of useful links.

There are online businesses that will do it for you. (See UserTesting.com.)

Improve this answer
1
  • 2
    Help me understand why the down vote. Does this community disapprove of doing our own research? In my experience, data carries more weight with management than assertions, even from experts.
    – Ken Mohnkern
    Feb 20, 2014 at 14:17
0

After going through the form Avatar section is more confusing. I had redesign the form as below . This will make your file upload element for clear.User will see the image in the place holder once upload action is completed :)

Factor influence the confusion are

  • when form alignment are not clear
  • When user had not received any output against to input
  • When user unable to figure out what to do next
  • When user unable to figure out how to do it
  • when terminology is not perceivable‎

enter image description here.

Improve this answer
0

Yes, the current variant confuses users - no need to perform usability studies.

Why? Because users think the photo is uploaded right after they select it. And

I suggest to make upload right after user specifies the file. Because this is standard de-facto now.

Here is how we perform this. User clicks on "choose a file", then after file's selection we upload it to the server and finally we display the photo in the preview area.

enter image description here

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.