Admin site UX design

Question

I am building an application for multiple customers at once. So they will use the same system, but they will have their own admin site, with data, what they need. I have different kind of elements to manage in this site and all of them have a list view and a detailed view.

• list -> long table with all of the products [ex.].
• detailed-> 1 products all detail to edit.

I have all of the different kind of list views in one page, and I use a left menu like on this page. And I have the detailed views, as modals, so when the admin user click on an item of the list, a modal form is appearing to it.

Now, my problem is, I have a list to every element too (like stock records for a product) that must be placed in the modal form. And to edit that, now I am using another modal, but it's really confusing for the user, if modals are jumping up in front of each other. I need a one page solution to the whole admin site.

• The first is for the list view
• The second one is for the detailed view of one product

How should I design the edit option for the stock items? (it's just an example)

I already accepted an answer, but if you have more suggestion, please say it loud :)

Answer 1

What you're experiencing are the two main issues with modal windows: they break the flow, causing a certain level of disorientation, and they don't stack well.

You should try to use a master-detail view pattern that has the list of items in the same window as the detail of a single item. This solves one level of navigation and will also allow users to more easily move from one item to another.

The other issue you're having is that you've got a multi-level hierarchy of items that you'd want to show details from. This can be solved in a number of ways. Accordions, menu trees and Miller columns are but a selection of the options you have here.

^{download bmml source – Wireframes created with Balsamiq Mockups}