依存する兄弟入力フィールドの相互作用？
フォームには2つのフィールドがあります-国と組織。これらは同じ階層を保持し、相互に依存しています。
つまり、ユーザーは最初に国を選択してから、その国に該当する組織を選択するかまたは、まず組織、次に組織が存在する国を選択します。
したがって、次のようなもの：
（ユーザーが最初に[組織]タブを選択した場合、ユニクロにカーソルを合わせると、それが存在する国のみが表示されます。国タブを最初に選択した場合、米国にカーソルを合わせると、米国に存在する組織のみが表示されます）
私がユーザーに尋ねようとしている基本的な質問は、「どの国や組織にアクセスする必要がありますか？」です。たとえば、「国」が最初のドロップダウンである場合、「BMWが存在する国」の「BMW」にアクセスするユーザーは、最初に「国を選択してください」と答え、具体的には「BMWが存在する国」をフィルタリングして選択する必要があります。 「BMW」で組織を選択します。彼が最初にOrgをBMWとして選択し、次に国リストから「すべて」オプションを選択する方が理にかなっています。対照的に、「インド」で「すべての組織」を必要とするユーザーは、国フィールドを組織フィールドの上に置く必要があります。
これは理想的な設計ではなく、一部の設計者を混乱させる可能性があると確信していますが、別の代替案を考えることもできません。ユーザーに「最初に何を選択しますか？組織または国を選択しますか？」と尋ねます。一つの方法のように見えますが、それでも悪いデザインのようです。そのような場合のためのいくつかの巧妙なデザインパターンはありますか？いくつかのコンテキストでスローするために、これはWebのみの管理者アクセス制御UI用です。
これはより良い解決策になると思います。この例では、いずれかの親から選択し、使用可能な選択をハイライトで非表示または表示できます。また、親に折りたたみコントロールを提供して、スペースの量を減らし、すべてをクリアすることもできます。
まず、問題のコンポーネントを見てみましょう。
次の2つのディメンションがあります：CountryまたはOrganization
単一のメトリック：プレゼンスYesまたはNo
USA GERMANY FRANCE
Pizza Hut Yes No No
Mc Donalds Yes Yes Yes
Oreo No Yes No
これは明らかですよね？代わりにこれを行うとしましょう：
USA GERMANY FRANCE
Pizza Hut Yes ? ?
Mc Donalds Yes Yes Yes
Oreo ? Yes ?
私たちは質問に部分的にしか答えていません。これが私があなたのUIインタラクションがすることを感じていることです。 1つは明確で、もう1つは明確ではありません。
したがって、次のことができます：
数字やその他の指標を使用して、可用性を示します。分散が最小になるように1次寸法を選択します。空の値の長いリストを持つ確率を減らすことを意味します（0）
All Organizations ▽
France (1)
Germany (2)
USA (2)
Pizza Hut ▽
France (0)
Germany (0)
USA (1)
あなたが提案したソリューションは、両方のシナリオを同じデザインパターンで明確に実装することができないため、ユーザーを混乱させるという点で正しいです。
ここで考慮すべき2つのシナリオは次のとおりです。
- A：最初に国を選択してから、その国に該当する組織を選択するか、または
- B：最初に組織を選択し、次に組織が存在する国を選択します
最初のシナリオでは国カテゴリから1つのアイテムを選択し、組織カテゴリから1つのアイテムを選択する必要がありますが、2番目のシナリオでは1つの組織を選択してから複数の国を選択する必要があります。つまり、相互に対応していないため、両方のシナリオに対応する2組の入力フィールドを簡単に作成できるため、ユーザーが希望するシナリオをユーザーが指定する必要がありますが、対話の柔軟性が低下します。
ロジックを明確にする1つの方法は、2つのリストを異なる方法で表現して、異なる相互作用を提案することです。たとえば、地図上で利用可能なすべての国を提示し、国を選択すると組織のリストがポップアップ表示され、ユーザーは選択した国の組織を選択できます。次に、リスト上のすべての組織を提示できます。組織を選択すると、その組織がマップ上で強調表示され、ユーザーはその組織に必要な国を選択できます。 2つのリストは異なる方法で表示されるため、相互作用も異なり、ロジックはユーザーにとって混乱しにくくなります。
同じインターフェース要素でこれを行おうとした場合、2つのドロップダウンリストが類似しているためにあいまいさが生じるため、動作が何である必要があるかを明確に説明する必要があります。あるいは、他のカテゴリがすでに選択されているかどうかに応じて、チェックボックスまたはラジオボタンとしてリストアイテムを含むドロップダウンリストの実装を見ることができますが、これは非常に複雑で型破りだと思うので、まだ多くの説明が必要です。それと一緒に行きます。
タグプログレッシブ開示が質問に答えます。単純な動的ドロップダウンの動作を変更しないでください。
- 最初のコンボボックスまたはドロップダウンとして国または組織のいずれかを選択します（理想的には、最初のリストとしてより大きなリストを用意します）
- システムは選択に基づいて2番目のドロップダウンを更新します
- 絞り込まれた2番目のドロップダウンから他のアイテムを選択します
シンプル。動的ドロップダウンがうまく機能しているのに、なぜホイールを再発明するのですか？
あなたの質問では、ユーザーは国/組織の名前を覚えているようです。 1. LHSサイドリストボックスに有効なcountry-orgオプションを入力します。 2.次に、ユーザーが入力したい国/組織を入力してから、ユーザーの検索条件に基づいてLHSリストボックスのオプションをフィルタリングします。 RHSボックスは、ユーザーがLHSリストボックスから選択したオプションを収集します。以下のようなもの-
ユーザーから特に必要なものに応じて、2つの簡単なオプションがあると思います。
ユーザーにすべての優先オプションを提供してほしい場合
このシナリオでは、競合に関係なく、それらの設定が何であるかを知りたいと考えています。ただし、競合については通知する必要があります。
このシナリオでは、両方のリストを同時に表示し、どちらも実際に別のオプションを無効にしないでください。代わりに、リストの横または上にスペースを予約し、それを使用して競合を記述します。
つまり、米国とドイツを選択した場合は、すばらしいです。それから私は心配しないでユニクロを選びます。次に、米国と対立するオレオを選択します。オレオとUSの両方が赤くなります（またはおそらくそれほど深刻ではない色になります）。これらの2つのリストの上または横には、「1つ以上の選択が競合しています：Oreoは[〜＃〜] us [〜 ＃〜] "
これにより、一般的なやり取りがシンプルになり、ユーザーが競合する決定を行うことを制限せず、競合があることを通知するだけです。これは、ユーザーに「夢を大きく」して、ボートに浮かぶものを何でも選択させたい場合に理想的です。彼らはそれらの対立を我慢したいかどうか自分で決めることができます。
ユーザーに完全に競合を回避させたい場合
相互作用を単純に保ち、ユーザーがすべての競合を回避することを確実にしたくない場合は、相互に影響する相互依存リストの考えを統合します。一方向に保ち、代わりに、ユーザーにその一方向フローの両端にあるオプションを変更する権限を与えます。
ユーザーにどのように選択するかを尋ね、それに応じて決定を並べることをお勧めします。彼らがこのシステムで提示されている理由を説明しながら、私は明確に述べたいと思います。つまり：
1-「あなたが必要とする国または組織を示すために、私たちはまずあなたの決定に最も差し迫っているものを知る必要があります：organizationあなたが興味を持っている、またはcountryそれはどこにありますか？この設定はいつでも変更できます。」
2-唯一のオプションとして「組織」と「国」を含むドロップダウンまたはラジオボタン
3-選択が完了したら、最初の複数選択の先行入力リストを下に表示します。この最初のリストは、彼らが最初に選択したオプションです。その下は、2番目の依存リストになります（おそらく、最初のリストで少なくとも1つの選択を行うまで、非アクティブ状態になります）。
4-彼らが「国」を選んだとしましょう。表示された「国」リストの上に、「国選択した内容により、以下で利用できる組織が決まることを説明する明確なマイクロコピーを用意してください。
5-少なくとも1つの選択を行うと、2番目のリストがアクティブになります。可能なすべてのオプションが表示されますが、競合する選択は無効になります。
6-最初のリストに戻って2番目のリストの選択に影響を与える変更を加えた場合は、2番目のリストでそれらの選択を非アクティブ化し、明確なメッセージで結果を示します。この例では、「国への変更は1つ以上の組織の選択と競合しています。影響を受ける組織は無効になっています。」