web-dev-qa-db-ja.com

表形式とカードベースのプレゼンテーション、どちらが多くのデータに適していますか?

基本的に、詳細な情報を含む長いもののリストがあります。テーブルを使用するのか、各セットを長方形のカード形式で配置するのかを考えています。下記参照:

enter image description here

一方で、表は(概要については)見やすくなりますが、カードバージョンには項目に関する情報を多く含めることができます。

実際の例については、以下を参照してください(Goodreads(上)またはAmazon(下)):

enter image description here

各アイテムのデータが本当に多い場合はどうすればよいでしょうか。

12
catandmouse

@DesignerAnalystの回答に追加します。メタファーを選択する前に検討する必要があるいくつかのパラメーターを以下に示します。

  • 各レコードのデータ量:データにテキスト、画像、アクションが含まれている場合、カードレイアウトはユーザーがより簡単に読むのに役立ちます。
  • 各レコードに費やされた時間:基本的に、表示しているデータと相関しています。ユーザーが各レコードについて考えることに時間を費やすなら、カードはより価値があるかもしれません。しかし、多くの項目の概要はテーブルが何のためにあるのかです。
  • 並べ替えとフィルタリング:グリッドレイアウトのデータは列にきちんと保持されるため、グリッドレイアウトでは列レベルのフィルタリングが簡単になります。したがって、ユーザーが巨大なデータセットをすばやく調べたい場合は、グリッドの方が適しています。
  • 複数選択:ユーザーは同時に複数のレコードで作業しますか?コピー、移動、削除などのために多くを選択するように。そのようなシナリオでは、グリッドはカードよりも役立ちます。
  • 柔軟性:ユーザーが列のオプションを変更したり、データの表示方法を微調整したりする場合は、グリッドレイアウトで行う方がはるかに簡単です。見る。
  • ドメイン:ユーザーのメンタルモデルは、どのようなデータに適しています。ユーザーはAmazonを知っており、Eコマースではカードまたはサムネイルビューを期待しますが、同じユーザーはGmailにアクセスするときに長いグリッドを期待するかもしれません。
  • 不動産の可用性: 1つの画面にX個のレコードを表示するというビジネス上の考慮事項も、メタファーの選択に影響します
  • インパクト:各レコードの直接的な視覚的インパクトは、サムネイルまたはレコードの特定のパラメーターに対する特定のフォーマットを備えたカードで実現できます。グリッドで行うのは難しいです。

これらのパラメーターは、選択に役立つ場合があります。また、誰もが両方のビューを提供し、ユーザーにそれらを切り替える選択を与えることをやめさせません。これは、ユーザーの役割によっても異なる場合があります。例として、消費者はEコマースサイトでカードレイアウトを確認したいと思うかもしれませんが、管理者は明らかに、利用可能な製品をざっと眺めるためにクイックグリッドビューを好むでしょう。

10
Sol

数量だけでは決定を決定できません。表形式とカード形式のどちらを使用するかは、ユースケース、サイトの目的、データの種類によっても異なります。 2つの形式の長所と短所を以下に示します。

  • 比較は、垂直走査を可能にする(つまり、最低価格を見つける)ため、表形式で非常に簡単です。カード形式では、データが混在しているため、比較にさらに手間がかかります。
  • 長いフリーテキストを表形式で読み取るのは非常に難しく、行の幅も大きくなります。カード形式を使用すると、より読みやすい形式でテキストを表示できます。
  • 列が多すぎる表形式では、長い水平スクロールが作成されますが、これは非常に混乱し、非効率的です。カード形式では、水平スクロールが完全になくなる場合があります。
  • 画像表形式で表示するのは非常に難しいため、非常に小さなサムネイルを作成する必要があります。 eコマースサイトの製品画像のサイズは非常に重要です。画像が小さいと売り上げが減少する可能性があります。カードのフォーマットにはこの制限はありません。
  • ラベルカード形式では、すべての行で繰り返され、より乱雑になります。
7
DesignerAnalyst

以前のプロジェクトでも同様の問題に取り組みました。一目ですべてをユーザーに提供したいので、不動産は大きな課題です。しかし、これは現実的ではありません。

最初に、最も重要なコンテンツを決定します。階層を作成します。すべてのコンテンツをそれぞれの階層に配置します。

ポップアップモーダルダイアログを使用して、長いテキストや段落などの追加情報を表示します。

何を上に配置するかを決める最良の方法はフィルターです。フィルターキーとして適格なものはすべて最初のページに配置し、粒度に基づいて2番目と3番目のレベルのデザインに配置する必要があります。

より高いまたは低い粒度で列を表形式のデータに集計できる素晴らしい集計機能を持つ剣道UIグリッドを確認してください。

http://demos.telerik.com/kendo-ui/grid/filter-menu-customization

私は、ユーザーが最初にすべての重要な詳細を提供する2番目の設計を好みます。そうすれば、ユーザーは情報に基づいた決定を下してさらにプロセスを進めることができます。しかし、それは現在のところあなたの要求次第です。

2
Akshay Anand

すべての行セットにユニバーサル列の分割と並べ替えがある場合、ユーザーが1つの列のデータを並べ替えることによって作成される垂直方向を壊したくはありません(図1)。

逆もまた同様です。セットに異なる垂直列がある場合は、読者を混乱させないように視覚的に分割することをお勧めします(図2)。

enter image description here

VS

enter image description here

注意:これは言われていることですが、あなたが示している例には混乱しています...これはデータではなく、データテーブルでもありません。

あなたの質問は、列のタイトルを付けるかどうかに関するものだと思います—表示している2つの例の唯一の違いです。その場合、列名によるソートがある場合にのみ列タイトルが必要です。並べ替えは、列の情報を並べ替える方法であり、昇順-降順、価格の高い順(低い順)、日付、タイトルのアルファベット順など、どのような順序でもかまいません。

0
Zoe K