Best way to combine object selection and object editing in a dialog

Question

There might potentially be a very straight forward solution to this, but I'm can't see it, hence the question. I'm wondering what is the best way to structure a dialog where the user can select items from a list, create new items, as well as edit several detail fields associated with every item.

More specifically, here is my workflow: In our analytics app the user is able to change the way some dimensions are presented, let's call this a 'View'. User is able to edit existing Views, user should also be able to create a new view, tweak its options, and save this new View so that he/she can select it later. A few actions that should be available:

• Create new View
• Edit an existing View
• Delete a View
• Modify the View details (setting under either option 1 or 2)

Here is what I currently have:

Mockup details:

• The dropdown is the View selector, in this case the 'View B' view is selected, with its specific setting shown below.
• The '+' icon creates a new View (with the user able to give it a name in-line)
• The 'trash' icon deletes the currently open View (the next one is shown)
• User is unable to delete the 'Default' view (so there is always something selected)
  

Issues:
My concern is that this design mixes the View changing workflow and the View editing workflow, and the distinction might not be clear. The primary workflow would be for the user (after having previously created a few of these Views) to switch between them, with the View editing (and new View creation) happening infrequently. At the same time, I want to make sure the settings of each View (option 1 or 2 and associated values) are shown because the titles are likely not going to be very descriptive.

In the mockup above one problem I can see is that the 'Save changes' button is potentially misleading, because with the primary workflow the user will open the dialog, select a View, and close it in order to continue analysis (without changing anything). So perhaps the button should be 'Done' and the Saving should be immediate upon changing any of the fields?

Wondering if anyone has any suggestions on how to do this better.

Answer 1

I think the trash icon (delete, I'm assuming) and the plus icon (add new view, I guess) are placed too close to each other for starters.

It would be better if you can let the user get a summary view (pardon the pun) of all the views at first. And then let them take actions on each of the view (DETAILS/EDIT/DELETE).

You can then create a separate ADD button in the vicinity of this summary list, which the user can click to create a new view.

Take a look at the example below (http://editor.datatables.net/release/DataTables/extras/Editor/examples/inlineControls.html)

This way you are distinctly placing the actions next to each item and you're making it very clear what the user can do on the page at a quick glance.

Imagine if there was a "VIEW DETAILS" button next to the EDIT and DELETE links in each of the row. And when the user clicks on "VIEW DETAILS", you can open up a similar modal popup that displays the details of the "view" if you will. And instead of the "ADD" button it would say "OK".

This will drive consistent, predictable behavior on what ADD/EDIT/VIEW DETAILS button do. DELETE, of course, can pop up a little confirmation dialog and make the record disappear when the user confirms the deletion request.

Answer 2

Alright, so I think I need to introduce a bit more complexity, which I initially purposely omitted from my question. However, I think it might be relevant for the problem at hand.

So the 'Views' also have a 'band visualization', which is very useful for users to understand the View. The big issue I could see with the dropdown UI above is that it relied solely on the View name to inform the user what the View was - unlikely to be enough information, hence the user would be forced to select the dropdown View in order to even understand what it is.

Here is an update mockup with a secondary modal dialog just for the edit workflow. The primary workflow is just selecting from existing Views, it also shows the bands associated with each View. I think this UI does a much better job of optimizing for the selection workflow.