3

Does anyone know a good way to design an administration dialogue to add and edit items that have a parent child relationship?

Example 1) Bikes in the mockup below

  • x bike categories (mountain bike, race bike, e-bike)
  • and for each bike category
  • z different bikes
  • or z variations of the same bike (Super Kid 1 in black, Super Kid 1 in red)
  • or z different markets (Super Kid 1 for england, Super Kid 1 for sweden).

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Example 2) Users and Groups

  • user in groups -> click on a user and see in which groups he is a member,
  • and also members of group -> click on a group and see every member).

Question

So i am looking for a design pattern

  • for administrative dialogues for parent child relationship.
  • to add new bikes but also to edit existing bikes.

Thanks

2 Answers 2

4

Well you could think about applying miller's columns: http://en.wikipedia.org/wiki/Miller_columns

I've seen very nice implementation of this pattern in deviantart.com with a search input above selector, screenshot:

Deviantart.com Categpry selector

2
  • Thanks fo the link and the screenshot. How would you include an edit dialogue?
    – surfmuggle
    Sep 23, 2013 at 19:05
  • Well, the first thing comes to my mind is to show "edit icon" like pencil icon on hover. Maybe there is no need to expose another tab for editing? Sep 23, 2013 at 19:17
3

I would separate the option of add a new one completely and add the edit option for each element. In the way that inside of each category section we have an "Add new one" button at the beginning of the list and a "edit" button per bike.

In this way is easier to edit a specific bike and even easier add a new one.

enter image description here

2
  • I like the button that reflects the choice of the the selected bike category. I was planning on using two grids. One for the parent category (Speedbikes, Women bikes, Children bikes) and one for the bikes in each category (Child 1 v1, v2, ...). How would you go about editing the categories?
    – surfmuggle
    Sep 23, 2013 at 19:03
  • 2 options appear on my mind. One adding a "edit icon" on the category grid for each row (maybe too many edit icons). And the other one will be including a Category Title/Header (on top of the Add button) and next to it the edit icon (so only one edit icon)
    – Rafa Q.
    Sep 24, 2013 at 9:42

Your Answer

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

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