I seem to spend a lot of time trying to figure out how to design User Interfaces for many-to-many database relationships.

There are lots of resources available to assist with the data-modelling portion of this design challenge. I have been having trouble finding solid advice and established practices for user-facing part.

Does anybody know of any resources that could give me some ideas? I'm specifically looking for practical examples that give some insight into the design process from both ends (i.e. including discussion of the underlying data model and how it maps to the interface).

  • Alex, I'm currently designing a product that has many-to-many relationship between two fields. I'm looking for ideas since you had posted this question. I thought I would check with you whether you got any ideas? – Tara Oct 19 '12 at 22:44
  • Hi @Tara ... I haven't had much luck finding general resources, so mostly I have to figure it out on a case-by-case basis. In my current project I am toying with side-by-side lists of each of the entities. When an item is selected, it transforms all of the eligible items for a relationship into checkboxes. – Alex Oct 20 '12 at 23:53
  • Thanks Alex. I'm trying to lay the information in a table but your idea seems interesting. Would it be possible to share a wireframe to help me understand visually. – Tara Oct 22 '12 at 16:09
  • Sorry, I don't have a wire frame for it... Still working on prototypes. Maybe you could ask a separate question with more details and I will do a balsamiq mockup. – Alex Oct 24 '12 at 23:55

I'm not sure if I understood you right...

Graph Lib:

Take a look at the TheJit/InfoViz JS library.

enter image description here

| improve this answer | |
  • @kaiser, Thanks for the link to the library - there is some pretty snazzy stuff in there :-) However, I'm not sure if it is really what I'm after... That library seems to be more to do with data visualization, where I am more looking for interfaces for the user to actually enter data. This kind of visualization could come in handy once the data is actually entered. Sorry for not being specific enough. – Alex Apr 23 '12 at 10:13
  • You can use this as UI. Just add click trigger actions during the definition of the graph attributes. You can also add/remove nodes on the fly to extend the UI. There's also the possiblity to use images as nodes to represent your UI elements. – kaiser Apr 23 '12 at 10:17
  • Absolutely, that is the sort of thing I would be interested in seeing concrete examples of. Where do you click to add a new node? How do you set attributes (e.g. title and image)? Through a dialog box, or inline editing, or on a whole new page? How does the user create links? How do they delete a link without deleting a node? This may be too broad a topic for a single Stack Exchange question, but I'm thinking in terms of CRUD for many-to-many interfaces. – Alex Apr 23 '12 at 10:43
  • 1
    I guess you need to outline your UI concept to give us a clearer example. – kaiser Apr 23 '12 at 11:57
  • 1
    I think I may ask a new question to more clearly express what I'm after. Marked as correct because this gives a nice example of a many-to-many interface. Sorry again for not being specific enough in my question. – Alex May 8 '12 at 4:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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