web-dev-qa-db-ja.com

複数選択の相互作用に関する段階的な開示

ユーザーが3つのオプションから選択できる画面があります。これらは複数選択可能です。ただし、各オプションには特定の設定(最小3、最大8)があります。これはどのように表示されますか?

モーダルでこれを解決できると思いますが、モーダルが一般的に良いかどうかはわかりません。そのような場合の他のパタ​​ーンはありますか?

それらを上下に追加するのは良い考えですか? input fields

これらは [〜#〜] rbac [〜#〜] UI用です。 X、Y、Zは、ユーザーがアクセスできるように選択できるさまざまな機能と考えることができます。ただし、このパターンは、白黒機能を選択する以上の目的で使用されます。
他にも、段階的に開示する必要のある分野がたくさんあります。たとえば、ユーザーが国として米国を選択した場合、残りの設定のフォームは、選択したフォームとは異なります(インドなど)。また、場合によっては、米国インドの両方を選択できる場合があります。その場合、両方のフォームを表示する必要があります。私が混乱しているのは、これらすべての進歩的な開示を一貫したパターンで処理する方法です。また、これはデスクトップのみのUI用です。

1
Ashwin Nepal

アシュウィン、同意します。モーダルダイアログボックスは煩わしいものです。

一般に、オプションx、y、zのすべての設定を同時に表示することがユーザーにとって便利か、またはに基づいて1つのセットのみが表示されることが問題ないかによって、ここで役立つ2つのパターンが表示されます選択。

前者の場合、ダニエリロが示すのはしっかりしたパターンです。 Safariの設定で見つけることができるその垂直レイアウトバリアント:

enter image description here

ただし、この設定では、requiredフィールドが入力されているかどうかを反映するのが難しい場合があります。特に、適切なロック機能がない場合、たとえば、x、y、またはzを(再)アクティブ化するときにすべての設定を入力する必要があります。 (ただし、ユーザーが好みの順序でさまざまなフォームに自由に入力できない場合、この種の硬直性によってユーザーも不快になる可能性があります。)

もう1つのパターンは、上の画像と同じ全体的なレイアウトに従うことですが、それぞれのサブ設定でx、y、zを表示します。つまり、3つの行ごとに1つの行があり、その行の左側に四角形として表示されるものが配置され、その隣に右側にサブセットが配置されます。

最終的に使用するアプローチが何であれ、ユーザーが入力したデータを保持することをお勧めします。これにより、ユーザーがx、y、またはzボックスのいずれかを非アクティブ化しても、特にデータが失われないようにします。うっかりしてしまった。

2
JochenW

Xがクリックされ、Yがクリックされると、Xは非表示になりますか?

これは、より透明で明確なソリューションであり、回折を引き起こしません。

要素が多い場合は、行と列を除数の多い(12、4、2)の偶数に分割することをお勧めします。レスポンシブデザインの方が簡単です。

0
Piotr Żak

次のボタンをクリックすると、ユーザーが入力する情報と同じ入力領域に情報を保持する必要はありません。ボタンの下のテキストとして情報を復元できます。

enter image description here

0
Danielillo

これは、より複雑なカード/タイル/パネルUI要素の適切な使用例である可能性があります。ここで、クリック可能なボタン(つまり、選択/選択解除)にいくつかのアクション/動作を組み込み、コンテナー要素が選択された状態のときに展開することができます。パラメータを入力します( Material Design Card UI element の例を参照)

ただし、それは、残りのユーザーインターフェイスがどのように見えるか、このセクション/ページがアプリケーションの他の部分とどのように関連しているか、および3つのオプションのそれぞれに含まれる情報の量に依存すると思います。

これらすべてを考慮に入れる必要があり、うまくいけば、情報に基づいた設計上の決定を下し、ユーザーとテストすることができます。

0
Michael Lai