大量の（読み取り専用）フィールドを表示するにはどうすればよいですか？
作業中のサイトに、ユーザーが要求したときに大量のフィールド情報を表示する必要があるページがあります。これはアカウント情報ページなので、個人の詳細、支払いの詳細、住所、さまざまなステータスなどが表示されます。すべて読み取り専用です。
ここには70ものフィールドがある可能性があるため、すべてを表示する最良のオプションを決定しようとしています。
このようなものを想像してみてください。
したがって、私が検討しているオプションは次のとおりです。
エキスパンダー内の各情報グループを非表示にして、ユーザーが現在関心のある情報を開くことを選択できるようにします（ただし、何回もクリックしないとすべてを表示することが難しくなります）。
すべての詳細を長い形式で保持しますが、ユーザーが興味のある場所にジャンプできるように、上部にアンカージャンプリンクを配置します（ただし、[戻る]ボタンがめちゃくちゃになり、視覚的に圧倒されます）。
すべてを1つの長いページとして残し、ユーザーが適切だと思うように（もう一度、かなり圧倒的に）読んでもらいます。
各グループを別のページに貼り付け、サブメニューアイテムとして見出しを付けます（ドローバックはクリック数が多く、一度にすべての情報を完全に表示できるわけではありません）。
これはすべて読み取り専用であり、（「私のアカウント情報をすべて表示」などのリンクから）このページを表示することを選択したので、最適なオプションは何ですか？私が検討した明白なアイデアはありますか？私は＃3に傾いていると思います。ユーザーがこのすべての情報を要求したからといって、なぜユーザーがすべてを表示するのを難しくするのでしょうか。
読み取り専用情報の全ページを表示して、使用可能な状態に保つが、圧倒されないようにするにはどうすればよいですか？
ユーザーのニーズは何ですか？
あなたの質問からの情報に基づいて、私も3）と一緒に行きます。3つの点について言及したいと思います。
スクロールバーを使用した長いページは広く受け入れられますX神話＃3：人々はスクロールしない
コンテンツをsexyにします。画像、カテゴリ、チャート、コメントなどを使用します。
ユーザーにとってより快適にします。例えば。側の固定インデックスは大いに役立ちます- bootstrap はそのパターンを使用しています：
単一のページのすべてのアイテムを垂直リストで表示する
一度に数千のアイテムを表示することはほとんど決して良い考えではないため、これには明らかに制限があります。 1つの設定ページに100項目のリストを配置することは特に問題ありませんが、特にリストの上部をすばやくフィルターするいくつかの方法を提供します。
あなたがしたようにそれらをグループにチャンクすることは良い最初のステップです。
代替行を強調表示することも役立ちます。
長いリスト項目を検索/フィルターする簡単な方法を提供します。
キーと値のペアのフィルター可能なリストのデモ
観察
直面しているスタイルの制約をよく理解せずにこれに答えることは困難ですが、
- アカウント情報は関連しているので、できれば1ページにまとめておきたいと思います。
- 長いページのデータに関する主な問題は、ユーザーの向きとナビゲーションです。フィールドレイアウトは、これらの懸念IMOの二次的なものです。
その結果、ここでの典型的なUX目標は次のとおりです。
- セクションの内容。あなたはすでにこれをしました。
- 明確で一定の向きを提供して、ユーザーがページ上のどこにいるかをユーザーに知らせます（これは、可能であれば「常に存在する」はずです）。
- ユーザーがセクション間をナビゲートするための簡単なナビゲーションを提供します（たとえば、可能であれば、上にスクロールして別のセクションを選択する必要がないようにします）
- 密集した多様なデータの表示を順序付けるために、レイアウト（グリッドなど）の一貫性を提供します。
現代のアプローチ
長い、セクション化されたページに関する現在の考え方は、非JSまたは小さな画面のサイトで優雅に低下する永続的な向きとナビゲーションパネルを使用して、文字通り目標を解決しようとしています。
- スティッキーなライブナビゲーションパネルを提供します。パネルにはセクションヘッダー（サブヘッダーも含まれる場合があります）が含まれ、ユーザーがスクロールすると粘着性があり、理想的には、ユーザーがドキュメント内のどこにいるかを表示するように更新されます。
- パネルはサイドバーにドッキングするか、サイドマージンに沿ってフロートできます。
- このアプローチは、JS以外のサイトや、モバイルサイトのレスポンシブレイアウト（小さな画面ではパネルを非表示にするなど）で適切に機能を低下させる方法で実装できます。
- このアプローチの優れた例は、dropzone Webサイトです（ チェックアウト ）。上下にスクロールして、ナビゲーションバーがどのように更新されるかを確認してください。
スティッキーセクションヘッダーを使用します。ここでは、ユーザーがスクロールしている間、現在のセクションヘッダーが画面の上部にドッキングします。これにより、セクションを拡張する必要がないという不都合を伴わずに、アコーディオン編成のいくつかの利点が提供されます。
- これらは、JS以外のサイトやモバイルサイトでも適切に低下させることができます。
- また、セクションヘッダーに「トップに戻る」リンクを追加して、画面の上部にすばやく移動することもできます。
- このアプローチは、セクションが長く（下のアニメーションのように）、ユーザーがセクション内で迷子になったり混乱したりする危険があるページに適しています。
- ここにデモがあります インタラクションの様子。
![enter image description here]()
これらのアプローチは、チャンキング、ストライピング、グリッド、およびその他のレイアウトアプローチをインタラクションアーキテクチャ全体で使用できるという意味で、（うまくいけば）ここでの他の回答を補完します。
私はそれをページ全体として提示する傾向があります（オプション3）。
注意点...あなたがそれを1つの長いページのような-feelではなく、物事のコレクションではない方法で提示すること。
あなたはそれが圧倒されることを心配していると言いますが、それはそのようである必要はありません。情報を適切にチャンク化し、ヘッダーとタイトルを明確にし（ただし大げさではありません）、内容を一目でGistを取得しやすくします。読んだ;ダイジェストするか、またはスキップして次のメインチャンクにスキップすると、読者が関連するものと関連しないものを決定するための面倒な作業を減らすことができます。
それが圧倒的になるのは、ユーザーがそこに何があるかを確認するために一生懸命作業するとき、情報の区切りがどこにあるか、そして情報がどのように細分されるかです。
その良い例が（信じられないかもしれませんが）LinkedInです。優れたLinkedInプロファイルには、要約、現在および過去の会社での経験、スキルと推奨、教育、推奨事項、グループ、フォロー、追加情報などのトップレベルのチャンクがあります。これらはそれぞれかなりの数のエントリを持つことができます。
ただし、各チャンクは分離され（カードスタイル）、各サブアイテムは適切に分割され、表示される情報の種類に応じてレイアウトが変更されます。このため、下にスクロールしても、「これはまったく同じ」とは思わないでください。
はい、表面的には、LinkedInを見て、「ああ、別のカードスタイルのUI-FaceBookやTwitterなどのように」と考えるかもしれません。ただし、図を地面から区別して重要なものを公開することでコンテンツに焦点を合わせるのに役立つため、コンテンツを分割して管理しやすくするために機能する適切な手法です。
ページ全体do機能しますが、必要に応じて、それらを圧倒的で退屈なものにすることができます。
コンテンツがセクション間で十分に異なる形で表示されるのに向いていない場合は、色をきれいでくっきりとした方法で使用して、チャンクを分離してみてください。色は多すぎませんが、面白くするのに十分です。 （実際、あなたの半分でテストしてくださいthinkで十分な色です:)
しばらく前に同様の状況があり、私の修正は アコーディオン スタイルのUIを使用することでした。
これらすべてのフィールドがあるにもかかわらず、見出しには1つの利点があります：organization。データが整理されているので、それらをアコーディオンに配置して、展開/折りたたむことができます。デフォルトではすべて折りたたむことができるため、ユーザーはスクロールする代わりに、すべての見出しを視覚的に確認できます。
もちろん、これは分類された読み取り専用フィールドでのみ機能します。これがフォームの場合、アコーディオンをウィザードとして使用できます。