How can I make the relationship between rows in two tables more obvious to the user?

Question

I have a web page that at first showed a top level goal with a bunch of risks. here is an example mockup:

I now realized that since I have a series of events, it would be good to break down and add another section with each of the events. Here is an example of the view when i added in the specific events:

The problem is that I realized that some of the risks are overall risks and associated with the top level goal but some are just associated with one or many individual events. I would like to make it explicit and visually clear.

In the example,

• The last risk around travel tickets is a general risk and not particular to a specific event
• The parking risk is just associated with the San fransisco event given the expected demand.
• The weather risk would apply to Texas and North Carolina events because they are outside events - (so its not just 1 event or all events). This is not applicable for NYC as that is an indoor event.

I am looking for suggestions on how I can evolve this UI to make it more more obvious to the reader the relationships between the overall goal, the events and the risks.

Answer 1

How about this for a starting point for discussion? It's still table-based, but I think it communicates the ideas you're trying to get across.

Have a think about some more challenging scenarios and let me know if you think something like this has legs. I'd be happy to evolve the idea with you.

Answer 2

You may use a hierarchical structure. If the risk is global then place it under the top level goal, if the risk affects only some events then place it under the affected events only.

You can do something like the following :

Answer 3

Present the risk/event relationship as a two-dimensional table

You have presented the problem as one of cross-reference, therefore you should solve it by presenting the data in a cross-reference format. A simple table with descriptors of each event and risk will directly connect the two for your users. Checkmarks or some other indicator token can indicate when risks and events are connected. You may present the overall project as a row/column specially highlighted, or break its risks out into a separate table.

However, this creates a different problem: in order to efficiently present a cross-reference table, the descriptors of each event and risk will need to be short (probably no more than 20 characters).

Provide "semantic zoom" on your events and risks

This problem can be solved by showing more detailed information about the risks and events on hover/click.

There are a few ways to do this:

• Tooltips over the descriptor
• A fixed info-box outside the table
• Accordion expansion of the table
• Keep the original tables in addition to the cross-reference table

Each of these approaches has advantages and drawbacks for different use cases and contexts. For example, tooltips do not translate well to mobile contexts, while accordion expansion can be very jarring to users. Without more specific details on the project parameters, it is difficult to suggest a particular approach.

Answer 4

Tabular data is traditionally difficult to read this becomes even more of an issue when additional layers of complecity are added in. I would suggest to look at the basic information you would like to convey and move away from tabular data (if your design efforts are not constrained of course)

Based on my undertanding the main building blocks are :

A- The events

B- Risks associated with main events as well as related phases leading up to those events

c- risk owners.

I think the best approach to address these issues is to move towards a more modular design and use tabs to convey different aspects or information relating to events. this in my opinion will allow you to :

a- disclose information in a more progressive manner ( works in conjunction with breadcrumbs to allow users to navigate between events and event phases)

b- Provide more space to describe the events, their phases and risks associated with them.

C- account for additional information you might include ( upgradbaility )

below are my thoughts captured in wireframe.

Let me know your thoughts.. I guess this could evolve in many ways.

Answer 5

You basically have two tables, you can let users to explore the data relationships. You click on an event and see the associated risks. Or you click a risk and see the relevant events. In the mockup the user has selected the second risk from the top, and the two associated events on the left are marked with a [v]. Of course the highlight should be more graphic.

To avoid creating "a loop" you don't hide the irrelevant items but just highlight the relevant ones - this way you don't need to "reset" the view.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 6

I created a wireframe to show the way I imagine to you.

If you visualize items and their attributes, you help user to understand and use your UI in a good way.

When user opens indicated page it is good if he/she sees the general view of your risks, events and risk owners. When user wants go further to see details then you popup a simple window on mouse hover to show item details ( e.g event name/location and the date)

Answer 7

The idea is given multiple times, but none of them provides for the need for top level risks. I also wanted to show that it can be perfectly done in a more classic style table.

Answer 8

My recommendation would be something along these lines. Obviously, this is just a mock and you may want to do different things in terms of sizing, shading, and things like that.

I think this makes sense because you have risks that are global, one-time type risks. Below that, you have phases which are visual descendants of the event and they have their own risks.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 9

You may use name and description columns and merge them all into a single table. Name is mandatory while description is optional.