Edit a record added on the page

Question

I have a page where optionally the user can add items that will appear on the table that will then be submitted to the server. The user may remove items added to the table, or they can choose to edit the record. I have provided screenshots of a mockup that heavily simplifies the type of page that I am building.

My issue is that I am trying to decide how best to handle the edit process, since it happens within the same page rather than records already submitted to the server. I have a few options in mind.

The first option would be that the edited record would take over the form that is used to add the items in the first place. This would mean that whatever items were already typed into the boxes by the user would need to be saved for when editing has finished. One of the screenshots provided shows an example of this.

One reason I think this could work is due to the highlighting I think it's quite obvious which record is being amended, and forces the user to have to deal with that edited item before continuing. However, the downside as I see it is that it is taking control of another area of the page which is solely for the purpose of adding items to the table.

Another idea I had was to force a dropdown area underneath the record in the table and provide an edit area. I have provided a mockup of this idea as well. You may be wondering why not just add form control to the table row itself and the reason is that in the real application there are conditional fields via a radio button that is provided so the form is actually slightly more complicated than shown, but I left it out just to keep the mockup simple.

This method I think is quite clean in the respect that it keeps the editing away from the form responsible for adding, but I'm personally not a fan of dynamically moving tables, and also I am essentially just duplicating the input fields that the form already has anyway.

My last option which I haven't provided a mockup for (but can if required) is the idea of presenting a modal dialog with the same input fields that the form has. Again the plus side of this is that it extracts the editing process away from the adding form but I'm not sure whether presenting a new window to the user like this would be appropriate for editing.

Which would be the best from an experience perspective to a user potentially wanting to edit the table records, and if none of what I've mentioned would be appropriate how can this be approached?

Answer 1

It looks like the issues are generated by the input form's position. I get that there are reasons you ended up with it on the left but that's the real issue.

You see how, in your last example, generating an entirely new input form right next to the empty one seems to makes sense? That's because the input form is in the wrong place.

The input should be below or to the right of whatever it acts upon. If that table is empty at first, only the input should show. Once the user enters an item, the item appears to the left of the input.

[ Edit 4-24: more about about empty table]

Unless there's special context or functionality that requires it, don't show an empty table. A table's cognitive load increases exponentially when it has no items. We use a table's items to determine what the table is and what it can do. So the empty table would just interrupt most users with a "what is that" experience that has no reward. The form is the first step in creating a table so it's natural to just show the form.

[ end edit ]

Here's what it looks like with the position changed and a simple visual indicator:

[ Edit 5-4: example of table that fits horizontally]

The above design is for when the form or table is too big to fit in the display. If all the fields can be displayed, the input form should just be below the table or in the table.

The input form can move down as new items are added. Once there are four or five items showing the input can stop moving and the items can scroll in-between the table header and input form.

Here's an example design. The top is the table before interaction. The second is the table with items added.

Answer 2

The "last option" is the best option in this case. Less visual noise makes it easy for the user to focus on the edit process without getting distracted by the other elements.

Put more focus on the modal by adding a transparent background, enable the user to close the modal with "close", "X" on the top right and also with the ESCAPE button.

Answer 3

You have divided the screen in half and kept form and table together. You could do it as your table doesn't hold too many columns, otherwise it could be impossible for you to accommodate.

Anyway, if you like to keep together, I would suggest you to keep the form at right side as most people use mouse with right hand. And also we read from left-to-right, so action in right side is more user friendly.

The first mockup is better. On clicking on Edit button, append data to the existing form with a Cancel button. Also if possible highlight the form on clicking Edit in table row. For Edit, instead of the text"Save item", make it "Update" or "Update item". Also I can see you replaced Edit and Remove link in Table row to Cancel, which I find not very intuitive. Instead, keep both of those links, Just make the Edit link bold.

Also, I like the idea of @moot what he did in Edit 5-4. It's much clearer. If possible, using that is of-course a better decision