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

enter image description here

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:

enter image description here

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.

  • 1
    Is the owner of a risk the author of it, or the one responsible for "solving" it? Does everyone need to see every risk, or are there people that only need to see the risk for specific events and don’t have to care about others?
    – unor
    Sep 27, 2014 at 20:03
  • 1
    @unor - the owner is the one responsible for solving it. I would like everyone to see every risk
    – leora
    Oct 3, 2014 at 14:43

9 Answers 9


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.

enter image description here

  • 1
    I was about to suggest something similar, now it's worthless, +1 for you
    – Devin
    Sep 27, 2014 at 23:38
  • 1
    I might've misunderstood the requirements. But if there are some risks that aren't associated with any event, perhaps an addition to handle that could be to have a slightly separated column to the left/right. But yeah, I really like your solution Sep 29, 2014 at 13:05
  • Yeah, an event-less column would fix that. Thinking about that problem helped me realized that this UI is pivotable in at least two ways that would work - the way it is now, and with the risk owners on an axis.
    – dennislees
    Sep 29, 2014 at 13:36

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 :

enter image description here

  • agree I could do this but having the risks and milestones all jammed together makes it hard to see (even with the different colors). maybe some toggle to show or hide event risks might make sense to allow folks to just see list of milestones or see risks embedded as well . .
    – leora
    Sep 14, 2014 at 17:55

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

Windows product cross-reference

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.


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. enter image description here

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


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


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)


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. enter image description here


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


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

  • I don't understand how this answers or is related to the question?
    – leora
    Sep 15, 2014 at 2:00
  • sorry that I couldn't be clear. I used name and description as an example for mandatory/optional. if I have understood your requirement correctly, in my opinion, you may want to merge the two tables, using an extra column. this will improve the discoverability element and user wont lose the focus.
    – user48903
    Sep 15, 2014 at 17:33
  • I don't understand how you could merge the two table and just add a column and fulfill the requirement in the question. Feel free to describe what you are proposing but as of now it doesn't sounds like what you are saying solves my problem
    – leora
    Sep 15, 2014 at 18:21

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.