I'm developing an ecommerce solution where the products may have variants in some properties that doesn't qualify them as different products. Consider this mockup for the costumer UI:


download bmml source – Wireframes created with Balsamiq Mockups

When a variant of the "toolbox" is selected, the info at the left updates accordingly. I think this is fairly good and simple, but how can I handle this in the admin area? I want a simple and effective UI to manage products and their variants.

Here's my idea:

  • Display the parent products in a table with View/Edit/Delete actions.
  • In the product detail, show the same table for the variants (if any).


download bmml source

  • When editing/adding a variant, provide good context in the title indicating to which parent belong.


download bmml source

Would this be considered a good?

Thank you.

  • The title seems a bit misleading. It looks like you've already got an effective way of representing these product variants. The question seems to be more about how to show an ecommerce admin that a product can have (or already has) children. If that's the case, it'd be easier to help if you edited down your question to reflect this, and just showed a wireframe of the screens where the process of editing and adding might take place. i.e. where would I find the "toolbox 345" item, and what options do I have to interact with it?
    – dennislees
    Oct 25, 2014 at 19:44
  • @dennislees Is this title better? I'll add the requested mockups you asked as soon as I can. Thank you!
    – Areks
    Oct 25, 2014 at 19:56
  • Looks good to me. I'd also consider cutting down your question to the essentials when you add the other wireframes. e.g. you don't need to tell UXers that placeholder content isn't real ; ) Short incisive questions are more likely to get answers and less likely to get flagged. Often, other users will just edit it down for you, but in this case it feels like the question needs to be worked on first.
    – dennislees
    Oct 25, 2014 at 20:03
  • I removed unnecesary text, I also changed the approach since I came up with a simpler one. Sometimes I lack the ability to express myself in concise ways (Mostly because English isn't my primary language). Your suggestions are much appreciated, Sir.
    – Areks
    Oct 25, 2014 at 21:06

1 Answer 1


I think the reason this hasn't gotten a lot of attention is that while there's a UX problem here, it's not well defined, and so your question seems like a design review. As I mentioned in the comments, contributors will often edit down questions to make the problems more clear, but in this case, the problem is one that can be answered with some design conventions. There are already lots of patterns out there to solve your problems.

Here is some feedback on what you have:

Don't mix view and edit modes

You should cut down on the clicking around by combining viewing and editing. Consider using inline editing if possible - http://vitalets.github.io/x-editable/demo-bs3.html?c=inline

Answer the question "Where am I and what can I do here?"

Its unclear form your wireframes what options are available to the user. The use of logical titles, prominent calls to action, and appropriately used icons can solve this problem.

Use Less Specific Language

Refer to "Products", not "Parent Products" - if a product has no chidren, is it a parent? It's probably safest to avoid terms like 'parents' and 'children' and simply refer to the more technical 'Products' and 'Sub-Products'.


In the example below, the only screen that's missing is to "Create a Product" (or "Create a Sub-Product"), which is essentially a blank "Edit" screen, with a logical title to ensure the user is aware what they're creating.

enter image description here

  • Sorry for misleading. I had absolutely zero intention to call them parent or child products in the UI but I don't have the final name to refer to them yet. Would it be good to completely drop the "View" action? Right now I only implemented the edit/delete. About the issue of "where am I", when you are in the edit mode, assuming the product isn't a child, you can see a button to ad a subproduct, and the form has a clear block saying "This sub-product will be a variant of PRODUCT_NAME". Of course the text is still subject to change.
    – Areks
    Oct 28, 2014 at 20:00
  • Maybe it looks like a design review because I tried to provide as much evidence that I'm working on it, I didn't want to look like "hey solve this for me", I wanted to show my own efforts and get feedback even if the answer is "that is no good, throw it and consider this other approach".
    – Areks
    Oct 28, 2014 at 20:02
  • I'm not sure of the value of having a view-only mode. It's just another location the users has to navigate through and potentially get confused about. If you can you should minimize the number of modes. The mental model here only needs to be "here is where I see all my products" "here is where I edit an existing product." You could change the link in the Products table to "View/Edit" to make this clearer.
    – dennislees
    Oct 28, 2014 at 20:06
  • That's why I dropped the idea of view mode. I only provide edit/delete with the traditional pencil/trash icons. But I will definitely check the link about the inline edit!
    – Areks
    Oct 28, 2014 at 20:08
  • I think you might be missing the point of the forum slightly. It's OK to say "help me solve this UX problem", especially if the problem is answerable, and can serve to help people solve similar problems in the future. Sometimes these questions are specifically about design, other times about research etc.
    – dennislees
    Oct 28, 2014 at 20:08

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.