5

Need some help here to design a container having 3 lists(grids) communicating with each other as below:

3 Lists communicating with each other

The requirements are:

  1. There are multi select allowed on each list.
  2. On selecting customers, associated product and services wll be filtered.
  3. After refresh all and selecting products will refresh(filter) associated customers and services.
  4. On multiple selection on any entity, associated entities should be distinguished(top-bottom or bottom-top hierarchy)( I did it by color here).

In my way, my problem is a particular scenario: When selecting 2 or more products, if they are associated with same customer, I will not identify which color I should give that customer entity.

Is there any other UI design which can accomplish the need? Just an sketch will help.

Thanks.

  • Is this a desktop app with the 3 column selections shown together, or mobile? Sorry, it's a little hard to tell from the screenshot. – Mike M Sep 26 '17 at 12:58
  • It is a web application for desktop browser. – Moksh Sep 29 '17 at 11:35
  • what will they do with these selections? Add to another area? or is it for comparison? I'm thinking you can go into a 'focus' on a single entity, and then you can see the relationships from there... – Mike M Sep 29 '17 at 11:52
  • Selection will do the filter only(customer selection will filter products and services and vise versa). But because of multiselection, showing relationship is getting hard. – Moksh Sep 29 '17 at 11:55
  • okay, but why do you have to show the many to many across all entities at once? you can have for instance 1 service consumed by 4 products, which is consumed by 6 services: could they focus on one to do a task? or is this more like a visualization that's important: just showing and not manipulating data? – Mike M Sep 29 '17 at 12:12
6

If persistent visualization of relationships is important, you can try treating it like a sangkey diagram.

Sankey diagrams visualize the magnitude of flow between nodes in a network.

Here's a quick example (this one has magnitude and hover focus, but there's lots more things you can do):

enter image description here

What you have now looks like 3 disparate lists. It sounds like what you're trying to do is visualize relationships.

Your original attempt at using different colors for different relationships will break down, both from visual noise, and inability to distinguish color relationships for entities that have multiple connections.

If you want to have edges (visible connection lines) that show many to many relationships, you can use the sangkey without showing the order of magnitude (unless there's a magnitude factor that's important to highlight).

D3.js has many good examples. The main thing is that keeping the edges visible at all times means that the nodes show the relationships without any manipulation. You'll see this used in Google Analytics behavior flow, but D3 has many more examples.

Focusing on a particular entity and its ancestors (or descendents):

If you want to drill down on a specific relationship, you can select a canonical starting point, and highlight that node. The relationships can be highlighted from that starting point, both bottom up or top down.

To unselect you can have a button on hover (or visible) that can deselect the node, or selecting another node changes the relationship. I'm not sure, but it's a starting point.

Multiselect:

You said the requirement needs to have multiselect, but I suspect that's because the current grids will show no relationships at a glance. The sangkey will keep that relationship visible, and you might be still able to do multiselect by 'focusing' on one or more nodes at the same list level, similar to what I have below.

You can also experiment with graying down the unselected nodes, so it's very clear.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

  • This is a great answer (as usual), but based on teh mockups, I think the OP wants to implement these into mobile (and Sankey isn't a good option for mobile). +1 anyways because the answer is great nevertheless – Devin Sep 29 '17 at 17:37
  • @Devin He said it was for desktop, but I agree if it's mobile, that ain't gonna work. Mobile? hmm...maybe some kind of drilldown list that could stack. That's a beast of a problem! – Mike M Sep 29 '17 at 18:26
  • I missed the desktop comment! My bad :( – Devin Sep 29 '17 at 19:20
  • 1
    I've watched that mesmerizing chart animation loop about 15 times... – maxathousand Sep 29 '17 at 21:26
  • Thanks Mike for such rich UI solution but I'll rather go with mine because of space limitations. As per rest of my application design, it doesn't have sufficient space for this kind of rich UI. But I like displaying grouping on focus. I also need to look into the performance as well. Thanks again. – Moksh Oct 1 '17 at 7:56
2

Answering My Own Post

I did the grouping in the following way:

enter image description here

My problem was how to efficiently group the products/services which are related to same customer.

In this design, I group the product with a header contains customer name and also grouped the services with the header contains customer+product name. Data displayed is not correct(sorry for that).

  • If you see the question, my problem was how to efficiently group the products/services which are related to same customer. By this design, I group the product with a header contains customer name and also grouped the services with the header contains customer+product name. Data displayed is not correct(sorry for that). I just shared the design - how to group. – Moksh Sep 29 '17 at 11:50
  • I think you have a very nice solution fro your problem (I'd use more spacing, but the concept is great). However... why allow multiple customer selections? why don't you simply allow only one customer at a time? I mean, I don't know what is this about, but I assume the final selection will allow to select only one parent anyways – Devin Sep 29 '17 at 17:41
  • If there were one selection, I am not going to post this question here. :) It is all about the display filtered data base on selections with grouping. – Moksh Oct 1 '17 at 7:44

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.