web-dev-qa-db-ja.com

オプションが多すぎるレポート用の圧倒的なUIを修正する方法は?

作成を依頼されたレポートのリストボックスを整理するのに苦労しています。

彼らは、複数の選択リストを持つ大量のフィルターオプションを望んでいます。これらのリストを整理するためのより良い方法、または見栄えがよくなるリストボックスの代わりはありますか?チェックボックスをオンにすると、リストボックスを非表示にできますが、それでも見栄えがよくありません。

これは私の目を傷つけます:

page layout with listboxes

編集:

プログレッシブディスクロージャーのデザインパターンを使用して、これを少し整理することにしました。詳細を確認し次第、改善していきます。回答してくれたSon Do Lenhに感謝します。

new page layout

1
twistedaxe

Staged Disclosure UIパターン は、ここでの1つのオプションです。

これはプログレッシブ開示パターンの変形です。そして、セットアップWizardはこのパターンの古典的な例です。

あなたのケースでは、**複雑すぎる設定画面を複数の画面に分割することをお勧めします。これにより、ユーザー操作が少なく、視覚的な負担が軽減されます。

つまり、次のことを試すことができます

  • このレポートタスクを、ほとんど相互作用のない個別のステップに分割し、ユーザーが1つずつ完了するようにします。
  • 各ステップでより多くのデータ項目を1つのリストボックスに表示するためにより多くのスペースがあります(すべてのデータを圧迫してユーザーが永久にスクロールできるようにするのではなく)。
  • 状況に応じた重要な情報として、進める必要のあるステップの数を見てもらうことを忘れないでください。

Wizard

別の方法は インライン展開/折りたたみ/アコーディオンUIパターンです。

次の場合に使用されます。

  • 画面要素(機能、コンテンツ、オプションなど)が多すぎてページに収まりません。
  • ほとんどのユーザーは、常にすべての要素を必要としているわけではありません。
  • ページ上の他の要素を隠さずに、状況に応じて追加の要素を表示することが重要です。

Collapse

更新:コメントと提案された新しいスクリーンショットを読んで、問題についてさらに考えると、これらのレポートオプションには必ずしも時系列順であるため、タブの概念を使用することも適切です。以下のスクリーンショットのように、オプションを表示するタブとすべてのタブの下にある緑色のボタンが表示されたものが、レポートの印刷です。

TabbingTabbing 2

この回答の前提条件:

  • すべてのオプションが必要です。そうでない場合は、削除するか、少なくともデフォルトにして、ユーザーに選択を強制しないでください。
3
Son Do Lenh