web-dev-qa-db-ja.com

ホバー時に切り捨てられたテーブルセルのコンテンツを展開する

私はGoogleのマテリアルデザインを使用してプロジェクトに取り組んでおり、表のセルのコンテンツを切り捨てる必要があるという問題に直面しています。テーブルヘッダーを切り捨て、ホバー時に完全なラベルを表示するための仕様がありますが、テーブルの内容については何もありません。私が切り詰めようとしているコンテンツは、ユーザー（エントリーに関するコメントのフィールド）にとって主要なものではありませんが、彼らはそれを見たいかもしれません。

  • セルの内容を切り詰めて表示することは許容できるパターンですか？
  • もしそうなら、行全体を下に展開する必要がありますか、それともセルだけを他のコンテンツの上に展開しますか？

注：このユーザーは、デスクトップにいるサポートユーザーです。

tablesdatamaterial-designdata-tablesoverflow
2
Chris

スキャン可能性が重要であると述べたように、切り捨てに加えてテーブルが必要になると思います。ただし、あなたが正しく述べたように、テーブルの切り捨てはそれほど使用されていません。ここにあなたが言及した2つのアプローチの問題があります

セルを拡張しています

テーブルの切り捨ての最大の課題は、データが断片化されていることです。各セルは技術的にはキーと値のペアのデータであり、キーはヘッダーにあり、値は下のセルにあります。両方を切り捨てることは、ユーザーが最初にヘッダーにカーソルを合わせ、ヘッダーテキストを記憶してから、特定のセルの値を表示するために関連するセル自体にカーソルを合わせる必要があることを意味します。これは非常に便利な解決策ではありません。また、場合によっては、ユーザーが適切なセルにカーソルを合わせるためにさらにフォーカスが必要になることがあります。ヘッダーテキストを念頭に置いてこれを行うと、さらに面倒になります。

行全体を拡張する

テーブル全体の内容によっては、レイアウト全体に多くの障害が発生する可能性があります。また、ヘッダーとセル内のコンテンツの間のリンクが壊れているため、ユーザーはデータを理解するために、より多くの目の動きと認識を必要とします。

これらの2つの課題について、考えられる唯一の解決策は、ヘッダーと値の両方をセルレベルで表示することです。以下のようなもの（それは本当に簡単なスケッチです、そこのタイプミスを無視してください）

enter image description here

これにより、ユーザーは最小限の労力でデータにアクセスできますが、全体的なレイアウトは損なわれません。

1
TDsouza

はい、コンテンツの切り捨てを使用します。

ユーザーの注意をそらす完全なレイアウトの変更を作成するため、テーブル自体のサイズを変更しないでください（行の高さを増やしたり、列を広げたりしないでください）。セルを他のコンテンツの上に広げることは、吹き出しでのみ発生するという条件で、優れたソリューション（風船のような）です。

また、バルーンが画面の境界内に収まることを確認してください。右端のセルのコンテンツが切り捨てられている場合、バルーンの右端がテーブルの右端にかかってはいけません。

0
Mike

これに答える2つの部分があります。それらの1つは切り捨てであり、完全に実現可能であるだけでなく、ガイドラインを Material Design Data Formats：Redaction and Truncation で確認できます。

ただし、テーブルの内容が大きすぎる場合があります。その場合、テーブルが最適なオプションではない可能性があり、 拡張パネル を使用する必要がある場合があります。

人々がデスクトップでのみ表示されることを100％確信していない限り、常に覚えておいてください。聴衆の大部分がモバイルでプロジェクトを見ると想定する必要があるので、要素がある場合は紙とプロトタイプにいくつかのアイデアを描くようにしてください希望するユーザーフローに最適

0
Devin