Should we warn the user that data will lost immediately or during saving?

Question

I have an interface for managing account fields in a web app like so:

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

The premise is simple: Fields are of 2 types (public and private). The above interface contains 3 lists, of which the fields inside are drag and droppable. So, if I want to make Field 3 public, I simply drag it into the appropriate position in the Public Fields list. If I want to delete Field 4, I drag it into Deleted Fields.

There are 4 types of fields:

• Default fields that cannot be deleted.
• Default fields that cannot be deleted and made private
• Fields which were created previously and data has been entered and saved (contains data).
• Fields that were just added and contains no data at all (no descriptive text in the interface).

To delete a field, the user can simply drag it into the Deleted Fields list or, if he is editing the field, he can use the delete button:

^{download bmml source}

Nothing is changed until the user presses Save Fields. At this point, a request is sent to the server, and if any deleted fields contain data, the data is also deleted. If the request is successful, the items in Deleted Fields are then removed and no longer recoverable.

Given the above:

• I feel that it is important that we warn the user that data will be lost when fields containing collected data is deleted. The warning would essentially be a modal that pops up and behaves like a Confirmation dialogue. Should this be done immediately (a field dragged to deleted fields or delete button clicked) or should it be done when the user clicks Save Fields?

• Does the Contains datamicrocopy communicate the fact that the field stores previously data properly? I would like a phrase that's terse enough but still communicates the idea that the field contains data properly.

Answer 1

Two places you can improve on.

1. Microcopy: Izhaki's comments are spot on. I'll add to them. I don't know about public and private. They can mean different things on the web. How about Visible and Hidden or Visible Fields, Hidden Fields or Active and Disabled? Display on Leaderboard/Remove from Leaderboard. (replace Leaderboard with what you are showing the fields on :). It took me a minute but I get what contains data means. Think meaningful. Instead of a contains data, try "37 entries" or "37 entries in the database". If you need to keep it terse, "In use!"

2. Reconsider the drag and drop to the delete section: Keep the drag and drop for what it's meant to do. Part of the confusion is that you have equal weight and interaction applied to the deleted container which is not the same kind of container as the Public/Private ones.

You should differentiate it and consider removing the drag and drop to it. Keep the delete relegated to the contextual popup.

I'll back that up: the drag and drop serves the user because they can quickly organize the fields from public to private and arrange them in a stack that will correspond to the display. The delete container's stack is irrelevant and the drag motion across the screen is not all that convenient. I bet you could click an element, get the popup and click delete faster than the drag. Try it five times. I bet click ckicl wins. Plus, you can also manage the undeleteable fields without an impolite. "YOU CANT DELETE THIS!" on drag. Or even more polite something that looks draggable that isn't because you know but they don't. And one more point. Is delete often done? If it isn't don't show the list. The list should only appear IF someone has deleted a field. Now you have a simpler UI.

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

However, the delete list IS important. It let's you know what's about to get flushed down the toilet. Maybe let them drag back elements. Or have a return link display on hover. You have the same intent but the delete function is properly differentiated by the display.

^{download bmml source}

THEN! On save and only when data is going to be irrevocably deleted you offer a meaningful message. "You are about to delete three fields that contain user data. Are you sure you want to do this?

List the three names with the data counts.

EXTRA CREDIT: (since I am not developing this) List the three, allow them to be returned to the hidden list for later deletion. This way they don't have to back track.

Simple. Hope that helps.

Answer 2

I have a few comments on your ideas:

• 'Save Fields' is not a great name, I think 'Save Changes' or 'Commit Changes' is better. If the user drags a field to the deleted bin, 'save Fields' doesn't make much sense (are you saving the fields that are to be deleted - eah?).
• The 'Deleted' bin is in no way showing deleted fields. If anything, it shows the 'To be Deleted' fields, or in a more elegant way I would simply call it 'Trash' - I think people will have no problem understanding what happens when you drag something there.
• On the same note, the 'delete' button doesn't really delete the field - it only marks it for deletion. So perhaps 'move to trash' is a much better name.

• Users will hate you if you ask them everytime they drag something to the 'Trash' bin if they are sure about it. Just imagine how would you feel if after selecting multiple files in your OS and then pressing delete, the OS would ask you 'are you sure?' per file. (You can also imagine me in front of your system; I want to delete 3 fields; so I drag the first; I get the warning message; I read it; gets it; confirm; drag the second field; now I get the message again but I already know that; so I get a bit annoyed; then I drag the third field; now I really hate you.) What you are trying to prevent is people being unaware of the consequence of their actions. Making them aware once is sufficient, no need to do this per drag.

• If I'm perfectly honest I'm not sure what 'contains data' really means. Does it mean that whoever created the field entered more data that one cannot longer see? Would it possibly be better to denote 'unused' fields rather than the ones that contain data?