What is the most usable way to implement a "save" feature on a single-page web application?

Question

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?

Answer 1

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" />

Answer 2

I would do something like this:

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.

Answer 3

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?

Answer 4

"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.