What is the best way to show the user that their changes have not been saved yet?

Question

I have a form with the normal sets of controls (checkboxes, select dropdowns, text input, etc) and i also have a table inside of the form so it looks like this:

to Add / Edit items in the table, you click on "Add Person" button and that displays a popup dialog like this:

once you click "Add", it creates a new row on the table.

My issue is that the table is just stored locally and only gets saved when you click "Save Form". This issue is that many users have gotten confused by going into a form, adding a few people (rows on that table) and then leaving the page (assuming that by clicking "Add" in the dialog and seeing the row added to table means that this data is saved to the backend as well). They didn't realize they need to click Save Form to actually persist the changes.

I wanted to get suggestions on what are good UI options to make it VERY clear to the user that until you click "Save Form" you have not persisted any changes?

For those who suggest to save upfront, Note that these "sub records" have a relationpship to this forms main entity so I can't save these subrecords until they have a foreign key of the main entity to align with. I guess i could save a "partial" main entity but that seems like it will get messy result in a lot of unnecessary persisted data.

Answer 1

In some cases you may want to reconsider the requirement for explicit saving and go with implicit saving instead. (Counter example is applications where it is important for all the data to be saved at once due to relations between the various records.)

There are various practices that I have seen for indicating that the data has not been saved, which I will list shortly, however, first:

Consider preventing closing the window without first showing an alert that the data has not been saved and providing the user with the options "Save and then exit", "Don't exit", "Exit without saving".

Practices I have seen for indicating that the data is unsaved:

• An asterix preceding the window title and any unsaved field.

• Different formatting for unsaved fields and title (e.g. italic).

• Postfixing window title and unsaved fields with the word "unsaved"

• Disabled save button becoming enabled

• Exit/close button becoming "disgard and ..." button

To make sure the users don't miss these indicators, you should probably use as many of them as possible in combination with the alert if closing/exiting when unsaved.

Answer 2

Perhaps you are asking the wrong question here? Instead of asking how to make it clear the data wasn't save, you should comply with your users' mental models, which I suspect are very logical with such data driven applications.

This type of flow is very common in many applications - to add a particular record users may wish to create an associative record. For example, when users creates a new invoice, it well may be they wish to add a new customer. Invoices and customers have separate stores - each has its own DB table, they have many-to-many relationship, and you can add or access customers elsewhere in the interface, but also 'on-demand' as you add other records.

If a person can exist elsewhere in the system outside a form, and if the list of persons is accessible or needed anywhere else (many-to-many), it seems to me most logical that if users add them, they are added straight away (save to the DB), regardless of whether or not the form is saved.

The only case where you should only save the persons added when saving the form is when those person have association to that form only, and nowhere else. In other words, one-to-many relationship - a person can only be part of one and only one form.

Answer 3

How about show a confirm box on cancel or exit of your form

^{download bmml source – Wireframes created with Balsamiq Mockups}