Usability issues in filling out/saving a form in a web application

Question

I develop a web application used internally at a mortgage company. We've been having problems with people filling out a form while talking with a customer and then clicking away from the screen before hitting Save, thus losing their data (they could just click Back, of course, but they never think of this).

Our users' first "solution" was to ask us to auto-save the data after each field change. Even ignoring the obvious scalability problem, it seems to me that this runs completely counter to the convention of nearly every other web application on the planet, wherein you save when you submit the form (total-Ajax apps like GMail don't count, as they are a whole 'nother beast). Am I wrong? Or (again, ignoring scalability) would you consider this a reasonable approach?

Moving on, our actual solution was to pop up the old "Are you sure you want to browse away from this page?" dialog when the user navigates away from a dirty form. Now we are getting complaints about the way the dialog is structured. Most applications say "Do you want to save changes", so hitting Yes or OK is the good, safe option. But with the navigate-away dialog, hitting OK is the unsafe, non-saving option. Our users don't, of course, read the dialog, they just hit OK, and boom, they lose their changes.

I am hesitant to change this dialog because (a) the dialog is standard, generated by the browser, (b) I'm not even sure how to change the dialog, and (c) it's been in there for months and people (including the non-idiots who have figured it out) would have to re-learn their behavior.

What do you think is the best route here?

Answer 1

I would say use AJAX to auto-save the form - either on a timer, or whenever a field is changed.

You mention the scalability of that solution, but you also said it was an internal application, which makes me think scalability likely wouldn't be that big of a problem in this case.

Answer 2

How about saving that client-side, for example in cookies and providing a button which will fill the form using those last saved values?

Answer 3

why not look at what StackOverflow does when you start to answer a question and don't submit it then try to wander away. I think the UI is fine the way it's done here.

Are you sure you want to navigate away from this page?
You have started writing an answer.
Press OK to continue, or Cancel to stay on the current page.

If your users DONT read the dialog popup and they say OK, i might consider asking a second time.

Your valuable edits will be LOST. 
Are you sure you want to navigate away from this page without saving?
Press OK to continue, or Cancel to stay on the current page.

For the users who can't learn a slightly new way of doing their job, I'm afraid I have no solution.

Answer 4

I would go for saving onblur of any element or if whole form is defocused (onblur). you can make the pop-up dialog on unload to save form automatically (even before the dialog is displayed). just attach onunload event to save it.

Answer 5

I am hesitant to change this dialog because (a) the dialog is standard, generated by the browser, (b) I'm not even sure how to change the dialog

(b) indeed, you cannot.

About the only workaround I can think of short of total-AJAX* is to have an on[before]upload that asks its own question using window.confirm(), and if OK is pressed, pushes the data to save using a synchronous XMLHttpRequest before returning from the event handler.

*: not that total AJAX is a bad way to go, but it might be a lot of work to make the whole app work that way.