Leverage common patterns whenever possible; users come to your application with lots of shared patterns from other sources.
The form above (current) approach: Is there a specific reason to use a vertical pattern?
Going from detail to list vertically tends to confuse which elements are grouped together. We often approach a list first for what's already present, then make decisions as to Add a new item to the collection, or edit / delete what's there already.
Since most desktop viewports are wider than tall, making a vertical add pattern tends to be confusing for several reasons:
- The value of the list is to show all elements already created, and to quickly search for a particular item or value. Putting the list below the
list will push down some of the elements.
- The action buttons such a Take It and Clear Fields look like they belong to the table (which is a common pattern)
- There's also not an obvious way to abandon an edit. 'Clear fields' is different than Cancel. There needs to be an exit that reverts any edits to the pre-edit state. 'Cancel' is a common label for this.
A list detail pattern on desktop using a panel
Try honoring the list and provide a quick way to edit in place by using either a dialog or sliding panel. It's a common way to add or edit items in a collection.
The panel comes in from the side when editing or adding a new item:
Now if there's a sub object (the conditions), focus their attention by drilling into a condition detail:
