マスター/詳細テーブルビューでテキストを選択可能にする方法は？

Question

私たちは、科学者向けのデータテーブルビューを設計しています。一連のフィルターを入力して検索を押すと、このテーブルが表示されます。テーブルはすでにかなり大きい-13列。ただし、多くの場合、ユーザーは各行の詳細情報を知りたいと思っています。各アイテム（行）には、かなり多くの追加情報があります。これは調査ツールであるため、ユーザーはこの表からいくつかの興味深い項目を見つけたいと思っています。時には、表をすばやく見て、興味深い項目の詳細情報を確認するか、1つずつ項目に移動して詳細情報を表示したい場合があります。それらのそれぞれ。また、ユーザーがそのデータテーブルの一部のテキストをコピーして、たとえばインターネットでその用語を検索します。また、一部の行は、追加情報を含む外部Webサイトへのリンクです。

だから私たちが思いついたのは：

アイテムに関する詳細情報は、いくつかの列をホバーする際にポップアップに詰め込むにはかなり重い情報であるため、マスター詳細パターンを使用することにしました。
各アイテムの詳細ビューをテーブルのすぐ下に配置することもできますが、テーブルの上のページにコンテンツがあるため、ユーザーが画面内のすべてを適切に整列させることはそれほど簡単ではないかもしれません。したがって、オンデマンドで表を最小限に抑えながら、表の横に詳細ビューを表示することにしました。

したがって、基本的に2つのモードがあります。

モード1-フルテーブルモード：

モード2-最小化されたテーブル+詳細情報モード：

モード1。ユーザーがアイテムの基本情報を確認できるフルテーブルモード。をクリックするName1はモード2で最初のアイテムを開きます。最初のアイテムのValue4をクリックすると、モード2で最初のアイテムも開きますが、詳細ビューではデフォルトのサブタブ「Info1」の代わりに2番目のサブタブ「Info2」も開きます。
モード2。最小化されたテーブル+詳細情報モード、アイテムの名前セルをクリックしてアクティブ化。ここでユーザーはアイテムに関する詳細情報を見ることができます。また、詳細ビュー（青い矢印の付いたコントロール）に戻る簡単な方法があります。最小化されたテーブルは、アイテムを区別し、1つずつすばやく移動するための方法を提供します。別の項目に切り替えるには、値2をクリックします（そのコンテキストで意味のあるName1の代替名）。

私たちが抱えている問題は、名前とデータテーブルの他の2つの列だけが、アイテムに関する詳細情報を開いているということです。ただし、ユーザーがモード1と2を頻繁に切り替えたい場合があるため、行内のいくつかのリンクをクリックして行うのが非常に自然で高速な方法であるかどうかはわかりません。

行全体をクリック可能にすることはできません。ユーザーがテーブルから値をコピーするのが難しくなるためです。また、最小化されたテーブルと完全なテーブルの両方が同じように機能する必要があるため、詳細ビューでアイテムを切り替えるための同じ種類のメカニズムも必要になります。アイテムを変更するために最小化されたテーブルの特定のセルをクリックすることは、マスター/詳細ビューがどのように機能するかについてのユーザーの期待と同じかもしれません。

誰かが同様の質問をしましたシングルクリックのマスター/詳細パターンに例外を設ける価値はありますか？しかし、私たちの場合、一部のセルには外部Webサイトへのリンクがあり、これまでのところ右クリックは考えていません良い方法です。

ここで最も自然な解決策は何でしょうか？

任意の入力を歓迎します！

乾杯、マックス

編集：

最終的に解決した

最終的に、次の解決策が得られました。

いくつかのタブの行に関するすべてのコンテンツを含む切り替え可能な詳細ペインを引き続き使用します。マイケルは、コンテンツを断片に分割し、詳細ビューに情報の一部のみを表示することを提案しました。ユーザーがクリックしたときのValue4に関する情報のみ。問題は、オブジェクトにマスタービューの行に表示されるよりもかなり多くの情報の章（タブ）があったことです（基本的に、詳細ビューの一部のタブにはマスタービューにリンクがありません）。
ユーザーがクリックしたかどうかに応じて、詳細ペインで関連するタブを開きます。 Value4またはValue5。ただし、ユーザーはすばやく比較したいためです。 Value4異なる行間の詳細。ユーザーがNameリンクをクリックすると、前のタブが詳細ビューで開いたままになります。これはすぐに発見できるはずです。
リンクをホバーすると、リンクの横に異なるアイコンが表示され、内部リンクと外部リンクの違いがわかります。
詳細ビューを開くと、マスタービューの行全体が強調表示されるので、ユーザーは自分が何を見ているかをはっきりと見ることができます。
トグルコントロール（青色のエラー）はワイヤーフレーム内にあるため非常にかさばるので、モード間の切り替え（クリックが簡単）を高速化します。
右側に詳細ビューを表示します。これは詳細に対してより自然な位置だからです（マイケルに感謝します！）
テーブルビューの追加の切り替えはありません-ほとんどの場合、ユーザーは常にテーブルを表示したいためです（たとえば、詳細ビューで表示するアイテムをすばやく切り替えるため）

対処しなければならない問題

詳細ビューは非常にかさばります。ユーザーがほとんどの場合、一度にすべての情報を必要としない可能性があります。主な要件は、ユーザーがアイテム間の異なる情報をすばやく参照/比較できることでした。これに対する別の可能な解決策は、マイケルのアドバイスを受け取り、クリックされたリンクに関連する情報のみを表示することです。次に、オブジェクトに関するすべての情報を表示するには、各詳細ビューにリンクを追加しますオブジェクト全体のデータを表示します。これにより、すべてのタブにオブジェクトに関する情報が表示されます。ページ/モーダルウィンドウ。
Nameをクリックするとオブジェクトをすばやく反復して、以前に開いたタブをオブジェクト間で詳細ビューで比較できることは、ユーザーには明らかではありません

残りの問題のヒントを得るために、この質問をしばらく開いておきます

編集2：

これをユーザーとテストした後、洞察を取り戻し、洞察を共有したかっただけです。マイケルからのアドバイスのほとんどは、実際にうまく機能していることがわかりました。しかし、私たちが観察/まだ想定しているいくつかの事柄：

モード2-最小化されたテーブル+詳細情報モード：モックアップのように、マルチタブの詳細を維持しました。その複雑なオブジェクト行のすべての部分が関連し、何らかの形で相互接続されているためです（たとえば、Name、Value4、Value5などのリンクがつながる部分）。異なるリンクがオブジェクトの異なる部分を示し、ユーザーがそれらの間の接続（どの切り替えタブが表示するか）が見えないことは、ユーザーを混乱させます。
純粋なリンクはユーザーを混乱させます。彼らは、行全体がその行に関する詳細情報を「含んでいる」ことを確認せず、行のリンクが詳細/要約を表示しないものであることを確認します。アイテム全体について。これで、行全体をクリックできるようにする（ユーザーを詳細ビューのデフォルトタブにドロップする）ための最善の方法がわかります。特定の行内リンクは、その詳細ビューの特定のタブに（ショートカットとして）つながるだけです。外部リンクは、必要なヒントを与えるアイコンで表示されます。
ワイヤーフレームのような特別なスタイルのトグルボタンは、ユーザーから好評です。
確かにスペースに問題があります-マスタービューの両方の部分とサブタブのコンテンツの両方を合わせるのは難しいです。トグルでマスタービューを最小化することは、そのための優れたソリューションです。

Michael Zuschlag · Answer

モード1からモード2に切り替える方法は？

リンク

リンクをクリックして詳細ペインを開いて入力しても問題ないと思います。ユーザーはリンクをクリックして詳細を開き、（同じまたは異なる行の）他のリンクをクリックして詳細ペインの内容を変更できます。確かに速くて簡単です。個人的には、詳細コンテンツがテーブルの左ではなく右へ表示されることを期待します（マスター詳細が通常持っている左から右の上から下の階層フローと一致します））、しかし、おそらくあなたにはあなたの理由があります。

同じページで何かを開くのではなく、別のページに移動するリンクをユーザーが期待していることに懸念を抱いているようです。それは本当かもしれませんが、ユーザーは詳細なコンテンツが表示されるのを見るでしょう（ウィンドウの大部分がかかります）。そのため、予期されていないかもしれませんが、ユーザーは何が起こったかをすぐに理解します。彼らは「リンクが機能しない」理由を不思議に思うつもりはありません。ページのほぼすべてのコンテンツを変更しているので、リンクはおそらくあなたのケースでは問題ないと思います。ある意味では、リンクは新しいページに移動し、コンテキストが前のページと小さなコンテンツを共有します。

ユーザーが正しい期待を形成できるように、詳細ウィンドウに表示されるリンクと外部サイトに移動するリンクを視覚的に区別することをお勧めします。残念ながら、その基準はなく（長い間遅れています）、自然に直感的な画像も存在しないため、ユーザーはサイトでの体験からそれを選択する必要があります。ユーザーは比較的集中的なユーザーになると思われるので、実際に起こります。アイコンを提案します（google for idea）。色分けしないことをお勧めします。

トグルボタン

リンクの主な代替手段は、トグルボタンなどのある種の状態コントロールです。これは、Name2、Value2などの横にある小さなボタンで、詳細を示すコンパクトラベル（おそらく左向きの矢印？）が付いています。押すと（テーブル全体で一度に1つだけ押すことができます）、適切な詳細コンテンツが表示されます。これは、リストボックス（別の状態コントロール）を使用して、詳細に何を行うかを選択するようなものです。トグルボタンには、ユーザーがテーブルを見ているときに詳細ペインの内容をユーザーに知らせるという利点があります。これは、詳細ペインのタイトルを読むよりも簡単な場合があります。

ただし、ボタンがテーブルの列に埋め込まれているため、あなたのケースではこれを行うことを心配しています。行アイテムの属性「セット」を表すように見える場合があります（たとえば、アイテムはValue2を「持っている」がValue3を持たない）。また、すべてのトグルボタンが押されていない状態でページが開くため、データを変更するコマンドボタンと間違えられ（ほとんどの場合）、ユーザーがクリックすることに抵抗を感じることがあります。

オブジェクトコントロール

リンクのもう1つの代替方法はオブジェクトコントロールです。実際には、上位のオブジェクト/アイテムを表す行に埋め込まれた複数のオブジェクト（サブアイテム、それぞれが単一の要約/識別フィールドによって表される）になります。ただし、オブジェクトコントロールは、他の機能（たとえば、値2をオブジェクト全体としてコピーすることと、要約/ IDフィールド値を単にコピーすることを区別する機能）も利用する場合にのみ意味があると思います。それ以外の場合は、ラベルに列固有のアイコンがあるトグルボタンだけです。

右クリックして関連

右クリックやダブルクリックはこれには適していません。これらは、シングルクリックよりも発見が難しく、労力が多いエキスパートショートカットです。また、独自の不整合も生じます。この頻繁で重要な機能は、目に見えるシングルクリックの方法によるものでなければなりません。

モード2からモード1に切り替える方法は？

これは自明のことかもしれませんが（モックアップに表示する必要がなかっただけです）、モード2からモード1に切り替えるために、シングルクリックコントロールを提供して詳細ペインを「閉じる」ことができます。詳細ペインの隅にある「X」ボタンは、スペース消費を最小限に抑えながら、十分に直感的で目立つ場合があります。実際には、両方のマスターand詳細ペインをトグルボタンで非表示にすることをお勧めします。

保存スペース

あなたの懸念のいくつかはスペースの可用性に関連しているようです。ここでは、遊ぶためのより多くの不動産を提供するためのいくつかの事柄があります。

ユーザーがName1をクリックしたときにのみName1の詳細を表示します。 Name1が詳細にある場合、タブを表示しません。代わりに、ユーザーがTab2を必要とする場合は、テーブル内のValue2（またはその他）をクリックします。ユーザーはワンクリックで詳細ペインに情報を交換できますが、詳細ペインのサイズは半分になりました。また、Tab2をクリックすることが実際にValue2をクリックすることと同じであるかどうかについての混乱を減らすこともできます（時には、複数のナビゲーションパスを提供することで、価値がある以上の混乱を引き起こします）。
検索コントロールをポップアップまたは別のページに配置します。ユーザーが一般的に検索を行った後、結果に対して集中的に作業する場合、ユーザーの作業を支配するタスクに利用できるスペースを増やすために、少し余分なナビゲーションを強制的に再検索することは価値があります。ユーザーが見ているものを忘れてしまった場合に備えて、テーブルの上に検索条件の表示を含める必要がありますが、通常、本格的な編集可能なコントロールよりも場所が少なくなります（ただし、非常にコンパクトな表示方法については、Alan CooperのAbout Faceを参照してください）編集可能な検索/フィルター基準）。