web-dev-qa-db-ja.com

ベストプラクティス:ドロップダウンの選択と関連する設定。

ソフトウェアに次のダイアログ(スクリーンショットを参照)があります。これを改善したいと思います。

Screenshot

1)ユーザーは次のアクションに使用するプロファイル(スクリーンショット:左側のドロップダウンボックス)を選択する必要があります。

2)各プロファイルにはいくつかの設定(スクリーンショット:右側のラジオボタンとチェックボックス+リセットボタン)があり、別のプロファイルが選択された場合に変更されます。

これを視覚的に表示して、ユーザーがドロップダウンボックスと関連設定の関係を簡単に理解できるようにするにはどうすればよいですか?

誰かが著名な例のダイアログを知っていますか?そして、あなたはこの種のパターンを何と呼びますか?

4
Stiefel

Luke Wroblewskiはこれを「選択依存入力」のケースと呼んでいます(入力コントロールは別のコントロールでの選択に依存します)。これを「値の条件付き領域」と呼びます(ページの領域に表示される内容は、別のコントロールの値によって異なります)。

通常のデザインはうまく機能しているように見えますが、領域をグラフィカルに囲み、上下のマージンに決定的なコントロール(この場合はプロファイルドロップダウン)を使用して、階層関係を示します。例えば:

Frame with determining radio buttons on left, value contingent check boxes on right

簡単なラベルも関係を確立するのに役立ちます(たとえば、上記の「許可された観察活動」、または「プロファイル名設定」の場合)。

Luke Wroblewskiが XMatters-Selection-Dependent Inputs で一般的なアドバイスと多くの例を公開しています。

3