タイムラインでのイベントの詳細の表示

Question

互いに関連するイベントのタイムラインがあり、各イベントの説明を表示できるようにする必要があります。説明は25〜50語になります。

ゴール

このパネルの目的は、ユーザーの一連のイベントを表示することです。画面には、ユーザーがこれらのイベント間の接続をよりよく理解できるようにする追加のパネルがあります。

追加要件：

いずれかのイベントの詳細を確認しながら、ユーザーが画面上の他のパネルに表示される追加データを確認できるようにします。
ユーザーがさまざまなイベントの詳細をすばやく確認できるようにします。

私のアイデアは（下部のスクリーンショット）

master-detailビュー、タイムラインは左側に表示され、「詳細」パネルは右側に表示され、選択した内容に応じて変化しますイベント利点：最小限のアニメーションで、データをすばやく確認できます。 短所：直感的ではない
Expand event on click-イベントのアイコンとヘッダーが縮小され、このイベントを表すノードに追加データがリストされます利点：より直感的（と思います）欠点：アニメーションはユーザーの速度を低下させます。各ノードは、説明全体を含めるのに十分な大きさである必要があります
Popups-イベントをクリックすると、説明付きのポップアップが表示されます。 長所：標準的な解決策短所：アニメーションが遅い、ポップアップが非表示になる画面の一部

私の質問はこれを行うより標準的な方法はありますか？そうでない場合、これらのソリューションのどれがあなたの意見に最も適していますか、そしてその理由は？

スクリーンショット：

master-detail
Expand event on click

編集する

さらにいくつかの詳細：

通常のユーザーがいて、ほとんどの場合、詳細を見なくても満足します。power-users一部のイベントの詳細を知りたい人。
比較異なるイベント間の詳細は、関係ありません私の場合は関係ありません。
scrollbarを使用すると、使用が大幅に遅くなるため、問題が発生する可能性があります。
遅いアニメーションとは、アニメーション自体の持続時間がユーザーの速度を低下させることを意味していたため、ユーザーがイベントの詳細を確認するたびに0.1秒余分にかかります。 10のイベントの詳細を非常に高速に表示します。
タッチスクリーンは関係ありません。
一部のユーザーは「gory」の詳細とアイコンを表示したくないため、デフォルトの詳細は私の目標には適していないと思います簡単な説明ですぐに確認できます。
マウスオーバーも少し問題があるかもしれません。ユーザーは、画面に表示され、マウスを別の要素に移動すると、詳細が失われます。 同意しますか？
このページはdesktopsでのみ使用され、モバイルでは使用されません。

Michael Zuschlag · Accepted Answer

さらにいくつかの選択肢があります：

Mouse-over。説明は、マウスポインターをノードの上に置くと表示されます。
グローバルトグルの詳細。メニュー項目または他のトグルコントロールは、すべてのイベントの詳細を大きなアイコンで一度に切り替えます。または、同じテーマで、コントロールを切り替えてすべてのノードを展開し、大きなアイコンと詳細の両方を表示します。
デフォルトの詳細。アイコンに非常に大きい必要がある本当に役立つ情報がありますか？たとえば、ユーザーがイベントを識別したり、イベントを比較したりするために使用するサムネイルですか？そうでない場合は、少なくともデフォルトで、最後のスクリーンショットをディスプレイにします。詳細を見るために対話する必要性を排除します。

私はあなたの選択肢の利点と欠点について異なる考えを持っています。

すべてが同じくらい直感的に見えます（ただし、ユーザーは異なる場合があります）。すべてクリックで詳細を提供します。ユーザーがクリックする傾向がある場合は、説明が表示されます。いずれもクリックを促進し、ユーザーがクリックで何が起こるかを予測できるように設計できます。
使用しているプラットフォームはわかりませんが、アニメーションの速度が問題になるのではないかと思います。 AJAX最近では、Webアプリでもこのようなリアルタイムアニメーションを取得できます。
説明全体に適合する適切なサイズのノードについては、中程度のサイズの固定高のテキストボックスとスクロールバーを使用して、最も長い説明に対応します。

私にとって、長所と短所は、ユーザーが詳細情報をどのように、そしてどれだけ使用するかにかかっています。

Master-detailは、詳細がかなり広範囲であり、ユーザーが特定の説明についてイベント全体をスキャンまたは比較する必要が少ない場合に最適です。たった25-50語ではやり過ぎかもしれません。一方、説明とともに追加の詳細を含めることもできます。たとえば、詳細パネルに長いアイコンとを追加して、すべてのノードを小さくすることができます。
Expand-on-clickは、簡単な説明でうまく機能します。ユーザーが一度に複数のノードを展開できると仮定すると、イベントの説明を比較するのは悪くありませんが、説明をスキャンするためのマスター/ディテールよりも少し優れています。（別のノードをクリックしたときに）master-detailのようにそれ自体が消えるわけではないため、ユーザーがイベントの説明を無期限に表示したい場合や、たまにそれに戻る場合に適しています。、簡単に見て先に進むだけではありません。後者は、大きなアイコンに切り替えるために多くの退屈なクリックを意味します。すべてのノードを縮小する簡単な方法（メニュー項目？）を使用して、ユーザーが面倒な方法で2回クリックする必要がないようにすることをお勧めします。
ポップアップ（ダイアログボックスを意味します）には、マスターディテールと同じ利点と欠点があります。使用していないときにメインページのスペースを取らないという追加の利点があります（ただし、マスター/詳細の場合、詳細パネルをエキスパンダーの下に非表示にすることができます）。クリックして展開する場合と同様に、クリック数を増やす必要がある（ダイアログボックスを開くために1つ、ダイアログボックスを閉じるために1つ）という追加の欠点があるため、速度が遅くなり、利便性が低下します。そして、はい、ダイアログボックスは画面の一部を非表示にします。これは、ユーザーがめったに必要としない情報に最適です。または、必要な場合は、親ウィンドウへのわずかな参照のみでかなり広範囲に対話する必要があります（例：書式設定で編集）。おそらくあなたの場合には適していません。
マウスオーバーは、ご存じのように短い詳細に適しています。ダイアログと同様に、使用していないときはスペースをとりませんが、ダイアログとは異なり、クリックする必要がなく、簡単にクリアしてユーザーが下にあるものを見ることができます。スキャンや比較については、マスター/ディテールよりも少しだけ優れています。さらに、ユーザーが説明を編集する方法を見つけるのは難しい場合があり、タブレット/タッチUIにはあまり適していません。しかし、全体として、これはあなたにとって最も魅力的なオプションかもしれません。デフォルトで詳細を検討し、マウスオーバーでアイコンを大きくすることもできます。
グローバル切り替えの詳細は、ユーザーが複数のノードの説明をスキャンまたは比較する必要がある場合に最適です。ワンクリックで、ユーザーは好きなだけすべてのノード間を行き来できます。すべてを展開およびすべてを縮小するメニュー項目を含めることにより、クリックで展開して機能的にこれを実現します。したがって、クリックで展開とグローバルトグルの両方の利点があります。
デフォルトの詳細は、アイコンよりも説明が重要であるか、使用されている場合に最適です。