最適なUXパターンを使用して複数のインタラクティブコントロールを適切にレイアウトするにはどうすればよいですか？
ユーザーの選択に基づいて、レポートを生成する既存のページの再設計に取り組んでいます。現在、これはページレイアウトの大まかなドラフトです。
- ユーザーは常に1から開始する必要があり、その選択によりリンクリストが右側の5に、ツリービューが左側の5に変更されます。
- ユーザーは、2と4でオプションの検索を行うことも、3のドロップダウンから日付（事前設定された日付）で別の選択を行うこともできます。
- 6の左ナビゲーションは、ページを離れるためだけのものであり、レポートの選択には入りません。
- 重要な点は、ユーザーが行う各選択が1、5（ツリービュー）、および5（リンクリスト）に影響することです。ユーザーはツリービューにドリルダウンすることもでき、表示される内容にも影響します。 1と5（リンクリスト）。
6つのウィジェットがすべて相互に作用し合うという事実は、ウィジェットをより複雑にしますが、ユーザーの出発点は常に＃1です。利用可能なデータはさらにロールに基づいていますが、それはバックエンドのビジネスロジックでカバーされているため、ウィジェットの相互作用と更新の必要性があります。
では、ページの現在の雑然とした外観を回避し、ユーザーが簡単にナビゲートできるようにするには、このレイアウトに最適なパターンは何でしょうか？
私が初めて自分で作業したとき、私には視覚的に見づらくて難しいです。
編集：
私が最初に省略したことは、ユーザーがページに到達する前に、メインコンボボックスでアクティブな選択として自分自身を反映するレポートタイプを1で選択したことです。つまり、前のページからレポートタイプを選択し、その選択が読み込まれると、このページにデータが入力されるため、常にページ上で選択が行われます。データがないとすべてが空白で表示されるわけではありません。
ページに移動した後で別のレポートタイプが必要な場合は、メインコンボボックスを1に変更し、他のウィジェットはそれに応じてリセットされます。 1のレポートタイプはページを駆動し、他のウィジェットは元の選択のフィルターに似ています。
最終：
受け取った入力に基づいて、UIをやり直し、（5）のツリーと（6）のleftNavを除くすべてにツールバーを使用することにしました。
メインドロップダウン（1）には、ドロップダウンの2番目のレベルとして（5）のリストが組み込まれています。フィルターは、セカンダリのオプション要素であるため、すべてメインドロップダウンの右側にあります。
今では、インターフェースがよりすっきりしています。
私は最近、同様のインターフェースに取り組んだので、苦痛を知っています...これが私が思いついたもので、あなたのニーズに適応したものであることを願っています。
白紙の状態から始めましょう：
最初の2つの選択レベルは常に左側に表示されるため、ユーザーはいつでもどこにいるかを確認できます。ただし、欠点もあります。
- スペースを消費するため、表示する分析データが多い場合は、非表示にする必要があります
- リストが長くなり、外部リンクがユーザーから隠されたり、さらに長くなったりして、長くなりすぎて使用できなくなる場合があります。
- その配置のため、かなり狭くする必要があるため、セレクターとリストの項目名はかなり短くする必要があります
したがって、脆弱な部分として、それは洗練の問題ですが、しばらくこのままにしておきましょう。
ちなみに、ご覧のとおり、選択のレベルには、グループ、カテゴリ、「より深い構造の選択」という単語を使用して名前を付けました。
次に、フィルターペインがあります。この画面では縮小されており、以下が含まれます。
- 「より深い構造の選択」メガドロップダウン（以下で説明）
- 日付セレクター（ここで送信ボタンの使用を回避するための選択に取り組んでいます）
- 機能1/2検索フィルターフィールド（ここで送信ボタンの使用を回避するために、その場でデータをフィルターします）
送信ボタンを使用しない理由は、多くのボタンを使用すると、インターフェースが複雑になりすぎたり、1つのボタンを使用したりできるためです。フィルターペインの右端にボタンを配置するだけです。ただし、このメガドロップダウンはユーザーにとって視覚的に異なる領域であるため、フィルターペインに送信ボタンがあると、メガドロップダウンを閉じた後、選択を機能させるには送信する必要があることをユーザーが理解できなくなる可能性があります。
白紙の状態に注意してください。最初に表示するデータが選択されていないため、これは避けられません。それで、なぜそれを使わないのですか？テキストまたはグラフィックの方法で、最初に何を選択すべきかについての説明を含める必要があります。
メガドロップダウンについては、項目をより詳細に選択するためのツリーが含まれています。ほとんどの場合、3つの選択状態を提供する必要があることに注意してください。最低レベルのアイテムは、選択/選択解除のように2つだけ必要ですが、高レベルの場合は、「ブランチ内の一部が選択されている」の状態も提供する必要があります。
ツリーの下に、送信ボタンが表示されます。これは、ツリー構造での複数クリックを指し、メガドロップダウン内で視覚的に閉じられているため、ここで必要です。ユーザーが混乱しないようにしてください。また、データウェアハウスがオンザフライで機能した場合、データウェアハウスへの要求が多すぎると思います。ここのデータ構造は複雑かもしれません。視覚的に劣化したキャンセルもあります。配置の背後にある理由は、フィルターペインのメガドロップダウンを閉じることによって、ユーザーがフィルタリングをトリガーするかどうかを確信できない可能性があるためです。
それでは、メガドロップダウンで何かが選択されている場合、それが閉じているときにユーザーにどのように表示するのでしょうか。フィルターペインにすべての情報を反映することはできません。代わりに、「Deeper structure selection」を「10 selected」のようなものに変更してください。下向きの矢印が続く場合、ユーザーはもう一度クリックしてメガドロップダウンをトリガーし、他のいくつかの要素を選択できることをユーザーに伝えます。結局、彼はすでにそれに精通しています。
それがあなたの質問に答えてくれるといいのですが。申し訳ありませんが、今日の日中はこの回答を改善できないかもしれませんが、いくつかのコメントが役立つかもしれません。