1

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

The current form looks like this,

Old Design

Old-Silverlight

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

New-html

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?

6
  • What happens if you select several items and change their properties on the right side? If one of the selected items have different property values than another, what is displayed on the right? Aug 1, 2014 at 14:47
  • @Boranas, Selecting an item just enables the fields. Each one can have its own separate set of values entered. But selecting one makes the corresponding fields required for that item so that the user has to complete those fields. So technically there are 10+ forms in the screen but they are all "stacked" on top of each other.
    – SOfanatic
    Aug 1, 2014 at 14:51
  • Okay. But what happens when you select several items at once? Aug 1, 2014 at 14:53
  • Maybe I'm not explaining myself correctly but in addition to each item being "checked" only one can be highlighted so when one item is highlighted the form on the right loads for that item and any values I add/update in that form belong to the highlighted item, once I highlight a different item then the form is blank and corresponds to the new item.
    – SOfanatic
    Aug 1, 2014 at 15:00
  • 1
    Is there a reason why users might want to work on separate items at the same time? As I understand you can only work on 1 but select[checkbox] multiple. what is the benefit of doing that?
    – Igor-G
    Aug 1, 2014 at 15:33

2 Answers 2

4

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.

1
  • I completely agree with the feedback issue, maybe it's better to have all items available display then once the user clicks one it opens up a "pop-up" form enter the values and press save in that form, save that item and somehow marked as "used" in the list, select the next item, if applicable, and so on.
    – SOfanatic
    Aug 1, 2014 at 15:49
1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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