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.

See the Admin layout (wireframe) below.

Header - Logo and Logout Link

Main navigation - Orders, Members, Shops, etc.

Sub-Navigation - List of links that is related to Main navigation. Eg: If you were on the "Members" page, you would see something like 'List Members', 'Add Members', 'Bans List Members' on the Sub-Navigation

enter image description here

If you click on the 'Shops' link from the Main navigation, you will then see a list of shops name. If you click on "Shops One" link then it will show all the information about "Shops One" and the settings... Edit Profile, Invoices and Product are the tabs.

On the "Product" tab, I am trying to figure out how to put a list of Categories (links) there and it must be vertical.

Next to the categories links, it will be list of products.

The problem is there is not enough room in the tab box.

Any suggestion?

Edit: Redesigned Wireframe, see below:

List of Shops

enter image description here

Next Page - When you click on Shop One from the list

enter image description here

share|improve this question
    
What is the purpose of Categories? Is it a filter? Are there any other controls with the similar purpose? –  dnbrv Feb 19 '12 at 2:27
    
@dnbrv List of Category with the related products. Eg: Books => PHP, MySQL, HTML, etc. 'Products' tab is where I can add products and the category. –  I'll-Be-Back Feb 19 '12 at 2:34
    
Prior to selecting a category, does the tab list all products? Are there any other controls for products? –  dnbrv Feb 19 '12 at 2:59
    
@dnbrv products will only be listed when clicking on the category link - via Ajax. So therefor it stay on the same page and the tab. –  I'll-Be-Back Feb 19 '12 at 3:06
add comment

2 Answers 2

up vote 1 down vote accepted

The problem is that you have four levels of navigation and you're going to fit in a fifth level, and you use a separate control for each one. You need to combine at least two levels, and it will look much simpler.

If I understand correctly, all top-level nav items have a sub-level (the vertical menu on the left), but not all sub-levels have a third and fourth level (the list of shops - shop1, shop2 etc and the tabs for each shop). The second level can be a submenu of the top level, and then you display the 3rd level in a vertical menu just for the items that require it.

You could also combine the 3rd and 4th level in the vertical list, but since the 4th level (the tabs for each shop) is the same for all items, it wouldn't make much sense.

enter image description here

share|improve this answer
    
That is a good idea thanks. I have copied your concept a bit. See my updated question, I have included more wireframe pictures. What do you think? –  I'll-Be-Back Feb 19 '12 at 12:51
    
@user791022 Structurally I think it works much better now (if the 2nd level is not permanently visible), but tabs within tabs never look good, especially when it's vertical tabs within a horizontal tab. If you change it to a simple master-detail, just a list on the left with a selected item detailed on the right (like in my WF), it will look much better. –  Vitaly Mijiritsky Feb 21 '12 at 6:36
add comment

The relationship of products to shops typically isn't many to one or vice versa — typically you don't have each location just carrying unique products to itself; there are some overlaps. I'd make products its own section on your main navigation for adding and managing them.

My guess is that third tab shouldn't be "products" but "inventory" where you can search (being the keyword) for products at that location and possibly update the amount in stock.

share|improve this answer
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.