web-dev-qa-db-ja.com

カードビューと表形式ビュー

私は、以前は19世紀のようなテーブルとして単純に使用されていた多くの表形式データを持つインターフェースを再設計している最中です。カードビューの種類のレイアウトに切り替えてデータをそのように表示するのか、それとも表形式ビュー自体に残して代わりに単にスタイルするのか、私は少し混乱しました。

ユーザーエクスペリエンスに関してはどのようなアプローチがより良いのか、また顧客に複雑に見えるのではなく使いやすい製品にしたいので、顧客にとってより簡単に見える方法について知りたいです。

製品のユーザーは業界の財務面にいるため、必要に応じて考慮してください。

3
Tanmay Saxena

私にとって、これら2つのレイアウトの主な違いはコンテンツです。

表形式のビューを使用すると、ユーザーは多くの情報を行で表示できます。必要に応じてヘッダーを参照すると、情報は常に利用可能であり、優先されます。

カードビューを使用すると、ユーザーは常に各「セル」のヘッダー情報を参照できます。

ここでの最良のオプションは、両方のレイアウトについてユーザーと話し合い、どちらが最良のほとんどのコンテキスト情報を提供するかを確認することです。

どちらかが良いと思い込まないでください。ユーザーは悪いスタイルの選択を許すことができます。混乱と情報の欠如は、許し難くなります。

4
Stewy

これは、カードビューではできることではありませんが、テーブルではできません。どちらの場合も、ユーザーは各データオブジェクトの適度な数の属性(またはフィールド)を簡単に表示して操作(インプレース編集など)できます。携帯端末で横向きに動作するようにテーブルを設計すると、カードビューと同じくらい、オブジェクトあたりの属性数と画面全体のオブジェクト数を表示できます。テーブルとカードの両方に、属性(色、アイコン、スパークラインなど)のグラフィックコーディングを含めることができます。どちらも比較的シンプルで、ユーザーにとってなじみのあるものです(テーブルは金融サービスで非常に長い歴史を持っています。カードビューのようなUIは、このWebサイトなどのWebでは一般的です)。どちらも、必要に応じて、複雑な外観または単純な外観にすることができます。

テーブルには次の利点があります。

  • 属性は相互に直接配置されるため、オブジェクトを比較するのが簡単です。

  • 特定のターゲット属性値のオブジェクトをスキャンする方が簡単です。各属性は、スキャンしやすい列に1つしかないためです。これにより、並べ替え順序の認識も容易になります。

  • 属性ラベルは、画面の上部にヘッダーとして一度だけ表示される必要があります(スクロールしないと仮定)。カードを使用する場合は、各カードのラベルを繰り返すか、暗示する必要があります。前者は不動産を消費し、後者は混乱を引き起こす可能性があります。

では、カードビューは何に適していますか?

  • 複数行のテキストボックスや、テーブルにうまく収まらない中程度から大きな画像などの2次元の属性がある場合。関連して、そのような「重い」属性のサイズがオブジェクトごとにかなり異なり、カードがそれに応じてサイズを調整する場合、カードは不動産をより有効に活用します。

  • 横向きでも各オブジェクトのテーブルをパンするようユーザーに強いる多くの属性がある場合。ただし、その場合でも、カードビューは、ユーザーが多くのオブジェクトの比較的少ない(および隣接する)属性よりも、比較的少ないオブジェクトの多くの属性を表示している場合にのみ優れています。

重要なのは、重い属性または本当に多数の属性(タブを使用する必要があるほど多くの属性)を取得し始めたとき、テーブル以外の何かを使用したほうがよいことですorカードビュー。それぞれのオブジェクトがペインまたは画面全体を使用する「ページング」UIの方が適しています。したがって、カードビューは、ページとテーブルの間のかなり狭いケースに追いやられます。

マスター詳細UIを使用して、テーブルとカードビューの利点を組み合わせることができます。各オブジェクトの重い属性または追加の属性が、上記の別の表ペインの現在のオブジェクトの「オーバーフロー」ペインに表示されます。これは、タブレット、ラップトップ、デスクトップなど、画面スペースがかなりある場合に非常にうまく機能します。

3

カードビューと表形式ビューは根本的に異なる問題を解決します。私はカードビューがフレーバーデジャーになったことを認めざるを得ませんが、それらはしばしば正しい選択ではありません。

カードビューは、主な目的が単一のアイテムのデータを表示することである場合に最適に機能します。表形式ビューは、主な目的がアイテム間のデータを比較することである場合に最適に機能します。

したがって、どちらがあなたの状況に最適であるかは、主な使用例に大きく依存します。

2
JohnGB