1

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.

Initial page view

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.

First idea

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.

Second idea

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?

4

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:

enter image description here

[ 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.

enter image description here

  • In your example when there is no items in the table would you have the form occupy that space? Or would you simply leave a message there explaining that there are no items (this is what I have currently) – Serberuss Apr 24 '18 at 11:02
  • @serberuss did you see that I answered in an edit? – moot Apr 27 '18 at 19:42
  • I did, thanks. Would it not be a weird experience to have the form first appear on the left and then move over to the right once an item has been added? – Serberuss Apr 30 '18 at 14:51
  • That depends on what the actual table and input form are. Will the table show all the fields? Or will the table just show a few key fields and the input form will have all the fields? – moot Apr 30 '18 at 21:04
  • It will show almost all the fields except for the radio buttons because those are only used to calculate a date. I.E you can either choose to enter in a date or have a date calculated based on an age entered – Serberuss May 2 '18 at 8:28
1

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.

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.