2つのテーブルの行間の関係をユーザーにわかりやすくするにはどうすればよいですか？
私は最初に一連のリスクを伴うトップレベルの目標を示したWebページを持っています。以下はモックアップの例です：
一連のイベントがあるので、分解して、各イベントに別のセクションを追加するとよいことに気づきました。以下は、特定のイベントに追加したときのビューの例です。
問題は、一部のリスクは全体的なリスクであり、最上位の目標に関連付けられているが、一部は1つ以上の個々のイベントに関連付けられていることに気づいたことです 。はっきりと視覚的に明確にしたいと思います。
例では、
- 旅行チケットに関する最後のリスクは一般的なリスクであり、特定のイベントに固有のものではありません
- 予想される需要を考えると、駐車リスクはSan fransiscoイベントに関連付けられているだけです。
- 気象リスクは、テキサスとノースカロライナのイベントに適用されます。これは、それらが外部のイベントであるためです（つまり、1つのイベントまたはすべてのイベントではありません）。これは屋内イベントであるため、ニューヨークには適用されません。
このUIを進化させて、全体的な目標、イベント、およびリスクの間の関係を読者にわかりやすくするための提案を探しています。
議論の出発点としてこれはどうですか？それはまだテーブルベースですが、あなたが乗り越えようとしているアイデアを伝えていると思います。
さらに難しいシナリオについて考え、このようなものに足があると思われる場合はお知らせください。あなたと一緒にアイデアを進化させたいです。
階層構造を使用できます。リスクがグローバルである場合は、リスクを最上位の目標の下に置き、リスクが一部のイベントのみに影響を与える場合は、影響を受けるイベントのみの下に置きます。
次のようなことができます：
リスクとイベントの関係を2次元の表として提示する
相互参照の1つとして問題を提示したので、データを相互参照形式で提示することで問題を解決する必要があります。各イベントとリスクの記述子を含む単純なテーブルは、ユーザーの2つを直接接続します。チェックマークまたはその他のインジケータートークンは、リスクとイベントが関連付けられていることを示すことができます。プロジェクト全体を特別に強調表示された行/列として提示したり、そのリスクを別の表に分類したりできます。
ただし、これにより別の問題が発生します。相互参照テーブルを効率的に表示するには、各イベントとリスクの記述子を短くする必要があります（おそらく20文字以下）。
イベントとリスクに「セマンティックズーム」を提供する
この問題は、ホバー/クリックのリスクとイベントに関する詳細情報を表示することで解決できます。
これにはいくつかの方法があります。
- 記述子に関するツールチップ
- テーブル外の固定情報ボックス
- テーブルのアコーディオン拡張
- 相互参照テーブルに加えて元のテーブルを保持する
これらのアプローチにはそれぞれ、さまざまなユースケースとコンテキストに応じて長所と短所があります。たとえば、ツールチップはモバイルコンテキストにうまく変換できませんが、アコーディオンの拡張はユーザーにとって非常に不快になる可能性があります。プロジェクトパラメータに関するより具体的な詳細がなければ、特定のアプローチを提案することは困難です。
表形式のデータは伝統的に読みづらいですが、補完性の層が追加されると、これはさらに問題になります。表形式のデータから伝えたり、離れたりする基本的な情報を確認することをお勧めします（設計作業がそうでない場合）もちろん制約あり）
私の理解に基づくと、主な構成要素は次のとおりです。
A-イベント
B-主なイベントに関連するリスクとそれらのイベントに至るまでの関連フェーズ
c-リスクの所有者。
これらの問題に対処する最良のアプローチは、よりモジュール化された設計に移行し、タブを使用してイベントに関連するさまざまな側面や情報を伝えることです。私の意見では、これにより次のことが可能になります。
a-より進歩的な方法で情報を開示します（ユーザーがイベントとイベントフェーズの間を移動できるようにするパンくずと連携して機能します）
b-イベント、それらのフェーズ、およびそれらに関連するリスクを説明するためのより広いスペースを提供します。
C-含める可能性がある追加情報のアカウント（アップグレード可能性）
以下はワイヤーフレームで捉えた私の考えです。 
あなたの考えを教えてください..これは多くの方法で進化すると思います。
基本的に2つのテーブルがあり、ユーザーがデータの関係を調査できるようにすることができます。イベントをクリックすると、関連するリスクが表示されます。または、リスクをクリックして、関連するイベントを表示します。モックアップでは、ユーザーは上から2番目のリスクを選択しており、左側の2つの関連するイベントには[v]が付いています。もちろんハイライトはもっとグラフィックでなければなりません。
「ループ」の作成を回避するには、無関係な項目を非表示にせず、関連する項目を強調表示するだけです。これにより、ビューを「リセット」する必要がなくなります。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
私はあなたに想像する方法を示すためにワイヤーフレームを作成しました。
アイテムとその属性を視覚化すると、ユーザーがUIを適切に理解して使用できるようになります。
ユーザーが表示されたページを開くとき、彼/彼女があなたのリスク、イベント、リスクの所有者の一般的なビューを見ているのは良いことです。ユーザーがさらに詳細を確認したい場合は、マウスをホバーするとシンプルなウィンドウがポップアップし、アイテムの詳細（イベント名/場所や日付など）が表示されます。
このアイデアは複数回出されていますが、どれもトップレベルのリスクの必要性を提供していません。また、それがよりクラシックなスタイルのテーブルで完璧にできることを示したかったのです。 
私の推薦はこれらの線に沿ったものでしょう。明らかに、これは単なるモックであり、サイジング、シェーディングなどの点でさまざまなことを実行したい場合があります。
グローバルなワンタイムタイプのリスクがあるため、これは理にかなっていると思います。その下には、イベントの視覚的な子孫であるフェーズがあり、それらには独自のリスクがあります。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
