web-dev-qa-db-ja.com

表に要約されたアイテムの詳細情報の長いリストを表示する最良の方法は?

保険会社の購入ポリシーと、ポリシーに付属するすべての詳細情報を表示するためのアプリケーションページを作成しています。

私が直面している問題は、リストに10から50の詳細なアイテムを保持する1から5のポリシーのどこかにある可能性があるため、各ポリシーの詳細情報を適切に表示する方法を知ることです。 (これらには、各アイテムに関連付けられた価格もあります)。

これは、すべてのコンピューターのパーツと価格が含まれたリストを備えた複数のコンピューターを購入することに似ています。

enter image description here

これは私が現在持っているデザインです。詳細リストを非表示にし、各要約ポリシーの下に「詳細の表示」リンクを追加することを検討しましたが、別のテーブル内にテーブルを表示するのがどれほど読みやすいか想像できません。何か助けていただけませんか?

8
Chris N.

それぞれ10から50項目の1〜5個のポリシーについて言及しているので、各ポリシーのサブテーブルの詳細を表示/非表示にするために使用できる、ある種のアコーディオンをポリシーに使用することはどうでしょうか。

このようなもの:

mockup

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

編集:Charlesのアドバイスに従ってスクロールバーを削除しました

6

IOSまたはAndroidアプリケーションで見られるパターンのいくつかを以下に示します。これは、現在使用しているものとそれほど変わらないでしょうが、どちらも簡単です。使いやすく、実装が簡単です。

最初のビューが選択可能なアイテムのリストであることを視覚的に明確にします。次に、リストビューで項目を選択すると、モーダルとしての詳細ビューを表示できます。このレベルのアイテムを操作する必要がある場合は、それらのアイテム用に別のページを用意すると、操作が簡単になります。

4
JohnGB

どうやらコメントできないので、これを回答ノードに貼り付けなければならなかった。最近私の車の再保険に対処したことで、私ができることから、ポリシーにアクセスするために単純な検索で到達した詳細のリストを単に拡張またはフライアウトするだけではありません。データベースの構造は、単純な詳細の階層よりもはるかに平坦であり、情報をよりマッシュアップできるように思えました。設計を決定する前に、保険代理店がこの情報と通常どのようにやり取りするかをもっと知る必要があります。見られるようなオープンソースの保険アプリは見当たりません。

1
Chris

この問題に対する古典的な解決策は、マスター/スレーブテーブルを使用することです。マスターテーブルにはリストが表示され、スレーブテーブルには現在選択されているアイテムの詳細が表示されます。もちろん、「テーブル」という用語は条件付きで使用されます。表示される情報の性質に応じて、ツリーやその他のデータ表現形式にすることができます。

詳細情報のサイズに応じて、ヒントの吹き出しウィンドウを提供して、情報の概要をすばやく確認できます。ただし、詳細情報が十分に小さい場合にのみ役立ちます。

1
johnfound