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