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?