Multiple forms of the same type in one single screen

Question

I have to re-design (migrate) a Silverlight form into html.

The current form looks like this,

Old Design

The form has a list of Product Types on the scrolling bar in the left. I can select as many (or none) as needed by clicking the checkboxes and then fill out the corresponding fields to the right for each Product Type selected. The fields for each product type are the same. The current design temporarily "saves" the data, meaning if I check Item 1 and fill out some fields there, and then check Item 2 and fill out some there, the information in Item 1 is not lost, unless I press "cancel", but the information is not saved in the database until I press "save". I've never seen a form like this in html so I wanted to try and change it, this is what I came up with,

New Design

This one works in a similar way except there are no product types in the beginning, there would be a search box at the top and as the user searches for product types and selects one then the selected product type becomes a vertical tab.

What design is better? or is there a better design for this functionality?

Answer 1

Don't implement bad UX just because it's legacy. Updating several fields on different items and then save all elements in once is a really bad idea. How do you provide feedback to the user that item 1 (fields 1,6,7,8 where saved), item 2 (fields 2,4,5,6) were saved and item 3 (fields 2,3,7 where saved but field 9 has an illegal character) in an all-in-once save.

I suggest you go back to the site objectives and change those who says "update more than one item at a time" to only one at a time. You need to constrain changes to only one item a time, and give warning if the user tries to navigate away from unsaved data.

This approach makes it more understandable to the user, and you can use a better page layout than those currently suggested. Such as one without a vertical bar in the middle.

Answer 2

Well, if there is a use case, when a user needs to select several items at once for some reason, the second (new) design has a major flaw - there is no easy way to get all the items you want to show at the same time. You need to execute several searches.

Otherwise, assuming there is no value in selecting several items at once, other than storing the previous updates, than there is no need for the left panel at all. I suggest the following :

• Create a single page to enter the item properties/details
• Create a navigation panel in a visible place, that allows searching for the item you desire
• Make a summary page, that will appear after submission, but before the actual save. It should show the user all the updates for all the different items and ask him/her for confirmation. Just like a shopping cart, in shopping sites.

The usecase works as follows :

1. The user enters the application and searches in the immediately visible search field, for the required item
2. When the item is located the properties page is loaded and filled, while the search field is still visible
3. When all the desired fields for all the desired items are filled, the save button is pressed and the summary/confirmation page/popup is shown

All of this is under the assumption that you don't NEED a single page application...