1ページに大量のユーザーデータを表示する最良の方法は？
私はいくつかの関連する投稿を探し回っていますが、多くの助けになっているものは本当に見つかりませんでした。いくつかのアイデアを生み出すのに役立つかもしれないいくつかの投稿を見つけました。
これが私が取り組んでいるものです：
これがoldのデザインです。このセクションをイントラネットポータル用に再設計しています。基本的に、青色のこれらすべての小さなヘッダーセクションは、ユーザーが入力した、またはデータを入力したユーザーのプロファイルの一部です。ヘッダーをクリックすると、アコーディオンスタイルとして展開され、情報が表示されます。このページは非常に長くなる場合があります。すべてを拡張したアイデアを示すと、8,000ピクセルを超えます。すべてのユーザーが一度にすべてを展開するわけではありませんが、一部のセクションには大量のデータが含まれているため、1つのセクションだけを展開すると非常に長くなります。
明らかに問題は、そのような膨大な量のデータをどのように1つのページにまとめるかです。これをユーザーに表示するのに役立つ分類方法はありますか？私の開発者の1人がタブを提案しましたが、それは既にタブ付きのUI内では発生しません（上位のタブは、UIの更新（概要、学校リスト、キャリアリスト、奨学金リスト）を取得するだけです）。
または、アコーディオンはおそらくこの状況で最良の方法ですか？
その情報のallがoneページにある理由はまったくありません。このような多数のオプションはユーザーにとって圧倒的であり、ユーザーが探しているものを見つけるのが非常に難しくなります（特に、ネガティブスペースが少なく、そこに非常に太字のフォントがある場合）。あなたはすでに段階的な開示（アコーディオン）を行っているので、それらを専用のタブに移動しても、それらが見つけにくくなることはありません。
概要タブは重要なポイントの概要をすばやく提供することになっています。あなたのケースでは、そのような重要なポイントは、完了したマイルストーンの数、提出された大学と奨学金の申請の数、不足している情報などです。何が何であるかを理解する唯一の方法実際に必要なユーザーと話をして（ある種のアドバイザーだと思います）、ユーザーのワークフローを理解します。適切なダッシュボードデザインの例についてのQuoraの質問を参照してください： one および two 。
再設計の2番目の部分は、すべてのセクションを関連するグループに編成し、上部にタブを表示します。少なくともAcademic、Personal、およびFinancialにグループ化でき、Career listがPersonalおよびSchool listおよびScholarship listに移動する既存のセクションの。このタスクは、ユーザーに対して カードの並べ替え演習 を使用して実行できます。
まとめ
現在のSummaryタブは、各プロファイルのダッシュボード概要になるはずです。そこにある情報は、追加のタブに再編成したり、既存のタブとマージしたりする必要があります。再編成では、ユーザーが自分のワークフローとカードの並べ替え演習についてインタビューを行い、プロファイルセクションをグループ化する方法を理解する必要があります。
その通りです。それは大量のデータです。
セクションを拡張するという概念を維持できますが、最初に各セクションで最も重要な情報を決定します、次に、セクションの表示方法を再配置します。
展開されたマイルストーンの日付セクションで、何がより重要ですか：最近完了したマイルストーン、何かが最近完了したという事実、または完了していないマイルストーン？これがわかったら、セクションを1つの簡潔な行に折りたたむことができます。
マイルストーン（6不完全）
それが本当に重要で注意が必要な場合は、強調してください。しかし、ここで重要なのは、それだけの情報できる限り表示したくないです。
次に、ページ構造について考えます。 アコーディオンを2列のデザインに置き換えます：左側に最小化または強調表示されたヘッダー、右側にコンテンツ。
この設計は、次の2つの理由でより効果的に機能します。
- 画面は高さよりも幅が広いため、画面の領域を増やして、スクロールを少なく（理想的にはスクロールせずに）より多くの情報を表示します。
- 非常に多くのヘッダーから選択できるため、アコーディオンの動きとコンテンツの長さがその場所を変更するときに、探しているヘッダーを見つけるのが難しくなります。移動しない左側のリストは、すべての要素を同じ場所に保持します。ユーザーがそれをより多く使用するにつれて、ユーザーは探しているヘッダーがどこにあるのかを正確に知るようになります。
最後のヒントとして、ヘッダー内の何か（たとえば、まだ提出されていない履歴書）を強調表示している場合、開いたページで対応する要素を強調表示するのはいい感じです。
大きなポジティブな変更を加える前に、人々が現在アプリケーションをどのように使用しているかを知る必要があります。
- ユーザーがアプリケーションを使用して完了する必要があるタスクのタイプを定義します。
- 各タスクに関連付けられたワークフローを見つけます。
- 現在最も頻繁にアクセスされているデータを理解する
- あなたの研究に基づいて、効率を高めるためにインターフェースを編成する方法について考え始めます。
凝縮グループ
いくつかのグループを圧縮せずに、1つの「スライダー」の下に配置しますか？例は次のとおりです。
- 兄弟データを持つ親には少なくとも5つあることがわかります。それらをparentsの下にマージします。
- スポーツ、クラブ、外での活動are課外活動、したがって呼ばれる非学術活動。
- 性格、好み、優先順位は人の心理を表し、人格としてグループ化する必要があります。
- 関連する税、資産、所得は財政状況
データの要約
各スライダーには、圧縮後に大量のデータが含まれます。ここで、一般化のように、各セクションの要点を取得する必要があります。
類推は、食料品店に行って品物を購入した場合ですすべての人が気にするアイテムの非常に長い領収書について税金、純額、および総額です-彼らはそうではありませんtすべてのアイテムをスクロールし、レシートのヘッダーとフッターを確認しません。時間がある場合や詳細が必要な場合は、後で行うことができます。
空白はあなたの友達です
すべてを1ページに圧縮しないでください。それらを互いに分離します。また、短いヘッダーを使用します。後でそれをツールチップで説明できます。
また、アコーディオンは古い学校です
それらは、マルチレベルのネストされたメニューのように死んでいるはずです。左側のサイドバーを使用します。そうすれば、ロードするもののための大きな作業領域があります。
これがフィードバックの一部に基づいて私が最終的に行ったことです。私はいくつかの制限に本当に行き詰っていました。 1つは2週間の納期で、すべてのコンテンツを再設計することは2週間で行われることはありませんでした...実際、これが実装を容易にする唯一の方法でした。タブ内のコンテンツは同じままである必要がありました。つまり、言い換えれば、私が（現時点で）許可された唯一のことは、コンテンツにアクセスするためのナビゲーション構造を再設計することでした。
セクション名を短くできる場合は、ビューポートでスクロールする側にナビゲーションを配置して、コンテンツの上下にスクロールせずに別のセクションに移動して、ヘッダーをクリックしてデータにアクセスできるようにします彼らは望んでいる（すでに疲れ果てている音）。また、各セクションを完了/未完了に分類できる場合は、色分けしたり、そのセクションのデータのステータスを示すアイコンを使用して、ユーザーを問題のある領域に誘導できます。
アコーディオンはページの長さを小さく保つのに役立ちますが、あなたが説明しているデータのサイズにより、そのメカニズムは壊れているように感じます。これをさらに多くのタブに分割したり、セクションのアイデアを完全に破棄して別のページに情報を配置したりすることがまったく可能であれば、それは良いことです。