Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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

share|improve this question
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? –  Koen Lageveen May 24 '13 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 May 24 '13 at 17:48
    
sorry, I couldn't just upload images, or link them properly, because I can't use my StockExchange reps. here... –  Edifice May 24 '13 at 18:17
add comment

1 Answer

up vote 1 down vote accepted

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
    
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. –  Edifice May 25 '13 at 17:28
    
Jup, that's a way to do it. Glad I could be of any help. –  Koen Lageveen May 25 '13 at 18:11
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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