UI issue for Add, Edit and Delete experience

Question

First question on UX, so let me know if need to add more details.

I have a budget module where user can add budget detail and later they can edit those detail.

Budget Add Page

So this form is simple, user has to fill basic details, upload files then they can select the fiscal year and related pricing year. After that they can add products and fill-up the details like Quantity/Rates for all months (i.e. Jan to Dec).

As per user experience this form is not causing any issue.

Budget Edit Page

Now the issue is in above form. There is three aspects.

1) User can add new fiscal year and related pricing year then associated budget detail.

• For this user has to click on save button
• Newly added products or newly added fiscal year and related data will be stored.

2) User can edit the already added product details.

• To edit the product, user can click on "Update" button. Which will open the form and then user can edit that product detail in that popup. Popup has its own "Save" button on click of that it will directly store the daa in DB (Using ajax). (No need to click on "Save" button which is in Form level)

3) User can directly delete the whole fiscal year box.

• Same as edit, on click of delete icon, data will be directly deleted from DB using ajax request. (i.e. on click of delete, it asks for confirmation that this action is irreversible.)

Now some user has difficulty to use this form. i.e.They are adding the Product and thought that it got saved in DB. But it will store into DB only if they will click on "Save" button.

So question is how i can visibly show that For edit/delete it's not required to click on "Save" button. But if they are adding new product or new fiscal year then they have to click the "Save" button?

Answer 1

This is not easy to solve. First, a general remark and then, a few ideas for your case.

I am wondering why "Add More Product" (this should be grammatical, by the way: "Add Product" or "Add More Products") adds a panel, the content of which requires Save, while "Update" opens a popup which has its own save button. I prefer to design create and edit the same, with the only difference that creating starts with an empty form, while editing shows the existing values in the fields/tables.

• The Save button is very far away from where the user is when she is done changing - basically opposite edges of the screen. That makes it hard for users to remember to Save. Moving Save and Cancel to the bottom right might improve the situation (but it'll upset everyone who has learnt the current position of Save :-(

• It's a little strange that the data entered on a pop-up is immediately saved. I am usually putting "Apply" or "Ok" on the pop-up and require the regular Save button to be pressed. The same goes for deleting items (maybe including a confirmation if the deletion has drastic consequences, as you have it).

• I assume there's a data-loss confirmation if the user navigates somewhere without saving.

Answer 2

Several thoughts...

• As a former DBA, please give strong consideration to never actually deleting anything from the database. People make mistakes, hit wrong buttons, have supervisors change their minds, etc. Instead, when the user hits a button to delete an item, a Deleted-Date field gets set in the database record. This also gives you a limited Undo capability via an Undo button that appears next to the Delete button on completion of the "delete". A batch job is then periodically run to move old deletions to an archival table. The Delete button should also immediately popup a confirmation that explains everything that will be deleted (e.g. just the last item vs. all items and sub-items).

• "Consistancy" is the watch-word in all programming and UX in particular. Action buttons like Save, Delete, Update, etc. should appear in the same relative position on every form. Most often this is bottom-right and so there should be a very good reason if you don't put them there. Remember that aesthetics probably make you happy, but the user just wants to accomplish their task as quickly and simply as possible. The less thought required, the better. So reusing knowledge of how to use the first form on subsequent forms, while prominently making clear the distinction between them, gives the user confidence in having completed the task correctly.

• The red X in the upper right of each form closes the form... period. It should have no effect on the database. To do so would be inconsistant with the way windows (which each form is) work. Often, people will bring up the details on your Update form for example, with no intention of changing anything. By using the Update form to View details, they insure that everything will look the same way it did when they put it in. If changes have been made in the data on that form, hitting the X close button should popup a "Save Changes?" dialog.

• Also give strong consideration to making each Budget Detail item a multi-line form instead of having one long line. Horizontal scrolling has become a big anti-pattern.