テーブルの上に複数の情報ポップアップ領域を整理する方法は？
テーブルのコンテンツとポップアップのコンテンツの両方が同等に重要である場合に、テーブル上で複数のポップアップをどのように編成するのが最善でしょう。
シナリオ：
ユーザーが表の特定の行のより詳細な情報を調査または監視することに関心を持つ可能性のある表形式のデータ。その情報は、（たとえば）ポップアップウィンドウ（モードレス）で表示でき、属性のリスト、ライブフィード情報、または選択した行に関連するその他のコンテンツを表示できます。
メインテーブル自体もコンテンツが変化するときに監視可能である必要があります。これにより、ユーザーは最初にポップアップを表示します。つまり、選択したアイテムの属性をより詳細に監視します。
心に留めておくべきこと：
メインテーブルには、ユーザーが見ている可能性のあるライブ/動的情報が含まれているため、必要以上に非表示にしないでください。
ユーザーは、テーブル内のこれらの項目をいくつでも調べたり見たりしたい場合があります（対象の行が隣接しているか、切断されている可能性があります）。
ユーザーは、ポップアップ/エリア自体の整理に時間を費やす必要はありません。
どのポップアップ/エリアがテーブルのどの行に対応するかを関連付けることができる必要があります
逆に、どの行がすでにポップアップを開いているかを確認できる必要があります
追加情報をテーブルに挿入するだけでは、テーブルアイテムが画面から押し出されてしまうためです。
メインテーブルをあまり移動、並べ替え、または非表示にせずに各ポップアップを表示する機能を最適化するような方法で、複数のポップアップ情報を整理するのに最適な戦略はどれですか。
私は、可能な限り、物理的なポップアップウィンドウを回避することを絶対に心がけています。
このシナリオは、たとえばGoogleマップに例えることができます。この場合、地図上の異なる場所のmultipleInfoWindowポップアップを表示することができます。さらに離れています。すべてのポップアップを表示できることと、それでも可能な限り多くのマップを表示できることとの間の微妙なバランスです。
うまくいかない例：
カスケードポップアップ：一般的なカスケードオプションは、ユーザーの操作（再配置と並べ替え）が多すぎるため、テーブルの「所有」行と視覚的に関連していません。
タイル張りのポップアップ：典型的なタイル張りのポップアップは、メインテーブルの多くをカバーし、テーブルの「所有」行と視覚的には関連していません。
オフセットポップアップ：「所有」行を示す方が優れていますが、いくつかのポップアップの後、ウィンドウをすばやく重ね合わせる必要があります-特に選択した行が隣接している場合。
ポップアップに行に関する詳細情報が表示される場合は、それらが行の一部を覆い隠していないことを確認してください。したがって、おそらくそれらを行の下に表示させる方が良いでしょう。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
ただし、何も不明瞭にしないことが最善です。あなたが言うように、そのデータは監視される画面上にあり、あなたは物をお互いの前に置いて、ユーザーが画面を管理しなければならないようにしたくありません。
画面の一部を予約して、現在ポップアップにある情報を表示することができます。
メインテーブルの高さまたは幅に応じて、左側（重要な最初の列の近く）またはテーブルの下に配置します。これには、アイコン（おそらく数字）、ID、または色（または上記のすべて）を繰り返すことにより、テーブルのエントリ間を関連付ける必要があります。しかし、そうすることで、それらを隣り合わせに配置して、スクロールして一方または他方を表示することもできます。
メインテーブルの行の領域の内側を折りたたんで、追加のデータを表示することもできます。これにより、メインエントリと情報への視覚的な接続が維持されます。これは明らかに画面の不動産を占有しますが、通常は物事をオーバーラップさせるよりも望ましいです。メインテーブルの構造が壊れて読みにくくなるため、そのために設計する必要があります。これを引き出すことができるかどうかは、あなたが持っているデータの種類に依存すると思います。 UIが機能する場所を設計し、完全に失敗することを確認しました（このBalsamiqのように;））。
考えられる解決策は、複数の右揃えのタブ付きポップアップです。
はい、重複していますが、「所有者」行に配置されたタブを介してそれぞれを簡単に選択できます。付加価値の場合-ポップアップコンテンツが最後に変更された年齢に従って各タブを強調表示できるため、ユーザーは非表示のポップアップによってコンテンツが変更されたことを確認できます。
または、代わりにテーブルの左側の領域を使用します-しかし、これの欠点は、ポップアップを1つだけ開くとすぐに、テーブルの最も右側の列のビューがすぐに失われることです...そしてもちろん正当化するのが難しいテーブルの物理的なシフト。
これは、複雑なマスター-子データビューのもう1つの良い例です。1つの画面に多くの情報を表示しようとするのは魅力的です。一般ユーザーではなく「パワーユーザー」向けに設計しようとしているのかもしれませんが、この要件についてどの程度の調査が行われたのかはわかりません。私はこれらの非常に複雑なデータ画面にプッシュバックしたいです。
したがって、私の頭に浮かぶ可能性のある解決策は、「タイルポップオーバー」からの逸脱ですが、タイルウィンドウコレクションのより多くのものです。ポップオーバーは、オーバーラップしないが互いに隣り合って配置される詳細ウィンドウになります。詳細ウィンドウは、テーブルの横、上、または下に配置でき、オプションで1次元でスクロールできます。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
