Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I have a web application which users fill out profile information, and then upload a series of files.

It basically looks like this:

Name: ____
Website: ___
Hobbies: ___
[save button]
------------------
Upload files
File 1: _____ [upload button]
File 2: _____ [upload button]
File 3: _____ [upload button]

As you can see, I have a save button below the profile information. There is no need for an explicit save button for the file upload section, because file uploads are saved immediately.

I showed my site to a novice user and they were confused about what exactly the save button did. After uploading each file they would go back and save the page, which was unnecessary. Another test subject didn't see the save button at all, and never actually saved the form -- they thought it saved when they filled it in.

I could break these functions onto separate pages but I want it to be as simple as possible, which is why I chose to put it all on one. Are there any tried and true methods of solving this problem? Should I remove the save button and have it autosave every few seconds like Gmail does? Add more save buttons? Do I need to have them on separate pages -- and if so, any examples?

share|improve this question

migrated from graphicdesign.stackexchange.com Oct 31 '11 at 14:27

This question came from our site for Graphic Design professionals, students, and enthusiasts.

1  
To me the obvious solution would be to move save button below upload area, or even above, or both. I mean, that way it's pretty clear. If it's between stuff, it's very unclear what the order is. But even if its on top of everything everyone kows it would make no sense to save if you havent done anything.. –  Lollero Oct 30 '11 at 23:13
    
And I'm talking about above or below everything. ( ...that you mentioned in the question ) –  Lollero Oct 30 '11 at 23:36
add comment

4 Answers 4

First, I would try styling your button to have a more specific name, like "Save Your Profile Info". That may be enough to end any confusion. Whatever you use as the value will be what the button says. An example:

<input name="submit" type="submit" value="Save Your Profile Info" />
share|improve this answer
add comment

I would do something like this:

enter image description here

Wether or not the save button should be above below or both is in my mind totally defined by how long the form is. If it's super long then I would maybe have save button both above and below.

Otherwise personally I would have it at the bottom..

As far as the save button functionality goes, I would make it send absolutely nothing if the form isn't filled but appear to be sending stuff either way. What I mean is after save button is clicked, show a page or text or something that says form sent successfully ( if it is.. ) Yes, it is an illusion and it does add one task of clicking a button, but it gives sense of comfort to the visitor and it says to him/her that things went the way it should have.

And saving every few seconds doesn't make any sense unless it is email client or like a forum pm or post form..

I might put add more uploads button or text under the first upload field, maybe even clear the form after every upload and then have text appear that says file uploaded after that.

( Imo the best type of upload form is one that has one field that allows you to browse and select multiple files at once. )

and of course it would make sense to send the text and files after clicking save button. Probably would make sense if upload buttons were in that case replaced by select fileor something like that.

share|improve this answer
add comment

It seems like its simple enough to stay on the same page, just make sure you use the right naming for the button. Benny gave one good example, something else you might consider might be "submit" or "save & continue" depends what happens after users clicked that button?

share|improve this answer
add comment

"As you can see, I have a save button below the profile information. There is no need for an explicit save button for the file upload section, because file uploads are saved immediately."

The average user won't realize that. However, an easy way to convey it is to have the text of the button change to "Saved!" or something along those lines and potentially have the color change as well.

Also, having to click three buttons is frustrating... if possible, I suggest allowing them to click one button and select multiple files.

I agree with the earlier suggestion to move the save button underneath the upload button.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.