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

enter image description here

enter image description here

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 :)

  • 2
    I don't really get your data's structure, nor what it is that you need to edit about those stock records? Could you show in a mockup what your current situation is like? Commented May 24, 2013 at 17:37
  • 2
    I'm sorry but that question reads like: Can you design an administrator's interface and data model for my application. For such a broad question, which really needs much more than can be offered in this setting, you would need to provide more information and as @KoenLageveen said, mockups at the very least.
    – smoca
    Commented May 24, 2013 at 17:48
  • sorry, I couldn't just upload images, or link them properly, because I can't use my StockExchange reps. here... Commented May 24, 2013 at 18:17

1 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

  • My project is a web app, with responsive design, and I thought it should have only 2 columns, where 1 is the narrow menu, so there is space for the product list, even when the admin is using a tablet or a phone. But good advice, I've got an idea from it. I'll try to put the product edit form into the table, so when the user clicks on a row, it will collapse a row under it, that contains the editor form. Commented May 25, 2013 at 17:28
  • Jup, that's a way to do it. Glad I could be of any help. Commented May 25, 2013 at 18:11

Your Answer

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

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