web-dev-qa-db-ja.com

テーブルの列がWebページに収まらない場合はどうなりますか?

ページに表示するテーブルの列が12〜14列あるが、すべての列を表示するのに十分なスペースがない場合(たとえば、テーブルの7つの列を表示するのに十分なスペースしかない場合)、これの解決策は何ですか?

私はページを水平にスクロールさせることができますが、それは醜いと最後の手段です。テーブルデータのフォントサイズを縮小する場合、最大で1〜2列のスペースしかありません。

5
Illo Yonex Illo

各セルに1つのデータが含まれている従来の表形式の表を選択すると、利点(さまざまな行を比較しやすい)と欠点(多くの列がすべての水平方向のスペースを占める)があります。

おそらく、別のレイアウトを検討してください。 UIカード:

enter image description here

UIカードの使用には、他にも利点があります。追加情報を表示するために、拡大および縮小(つまり、もっと表示...少なく表示...)できます。

3
SteveD

2列だけを表示することを検討しましたか? 1つは値(連絡先、車番号、営業担当者、価格、その他の詳細のホスト)があり、2つ目は顧客の名前と値で行われますが、ドロップダウンを配置して各顧客を選択します。このアプローチでは、垂直方向の機能リストが保持されるため、顧客を選択するだけで済みます。矢印を追加すると、各顧客のデータを以下に示すように、各顧客をすばやくスキャンできます。

enter image description here


対処方法: テーブルの列がWebページに収まらない場合

あなたが述べたように、主なユーザーの必要性とフローがその月に販売された車の数のデータを表示することである場合、過去12か月ほどの月と各月の販売された車の合計の表から始めることができます。次に、(月の選択時に)月のタイトルが付けられた次のインターフェイス(両側にある戻る/進む矢印)にドリルダウンし、顧客の名前かどうかにかかわらず、次の主要な基準ごとに詳細を表示します。ユーザーとの簡単なリサーチセッションは、ユーザーフローの定義とユーザーニーズの優先順位付けに役立ちます。 enter image description here

2
Vittorio

私は現在同様の状況にあり、ユーザビリティの調査を行ったところ、表形式のカードが適切で整理された方法であることがわかりました。また、情報が多すぎる場合は、常にデータを細かくグループ化することをお勧めします。ユーザーはチャンク内のデータに対してよりよく反応します。

enter image description here

そのため、Googleのマテリアルデザインと現在のほとんどの最新のUIはカードで分離されています。また、アフォーダンスを作成し、場合によってはボタンの使用を最小限に抑えるのにも役立ちます。

1
Jason Gonzalez

以下の私のモックアップを参照してください:

  1. テーブルをiframeで表示することをお勧めします。これにより、水平スクロールバーが確実に表示されますが、ページ上の参照ポイントが失われることはありません(ページ全体をスクロールすると、ナビゲーションとレイアウトが失われる可能性があります) )。

  2. 可能であれば、列を並べ替える機能(列を別の位置にドラッグする)や列をオンまたはオフに切り替える機能(セカンダリメニューを使用)などの追加機能を(パワー)ユーザーに提供します。テーブルに頻繁にアクセスする必要があるユーザーは、スクロールしすぎずに、重要な列を簡単に表示できるように表示をカスタマイズできます。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

1

これは、古典的なスプレッドシートの使用のように聞こえます。横スクロールは悪いことではありません。

初期表示の一部にする必要がある場合は、シートの左側に配置する必要があります。重要性が低い場合は、スクロールして確認できます。

Microsoft ExcelとGoogleスプレッドシートでは、特定の数の列を左に固定し、他の情報の列を左から右にスクロールできるようにすることで、一部のコンテンツを常に行ごとに表示できます。

0
Chris Butler