時々入力および時々出力されるフィールドを持つフォームレイアウト
デスクトップアプリケーションのUIを設計しています。ウィンドウの1つに、オブジェクトの特定の相互依存プロパティがリストされます。入力として使用するプロパティ、入力を使用して計算するプロパティ（出力）、および入力値を入力するプロパティをユーザーが選択できるようにしたいと思います。
これをどのように達成しますか？
例として、ユーザーが球で作業していると仮定します。彼に関連する5つのプロパティは次のとおりです。
- 半径
- 表面積
- volume
- 密度と
- 質量
時々、ユーザーは密度と半径、時には密度と体積などを知るでしょう。これらの入力を使用して、球の他のすべてのプロパティを計算できます。
私の最初のアイデアは、変数を2つのブロック（入力と出力）に分離し、ユーザーがこれら2つのブロック間でプロパティをドラッグ＆ドロップできるようにすることでした。ただし、実際のアプリケーションでは変数の数はわずかに多く（20まで）、他の基準で変数をグループ化し、静的な位置に置くことをお勧めします。
入力の組み合わせが非常に多いため、入力のセットごとに異なるフォームを使用することはできません。
現在の私のアプローチは、下の画像に示すようにプロパティをリストすることです（2つの異なる入力セットのレイアウトを示しています）。入力と出力を切り替えるには、ユーザーはプロパティをクリックするだけです。プロパティ自体は、数値フィールドを有効/無効にして、斜体/太字でマークされます。テキストは、入力/出力を切り替える方法についてユーザーに通知します。このアプローチは大丈夫ですか？説明のフレーズをどこかに書き込むことなく（画像の下部に表示されます）、入力/出力を切り替えるより直感的な方法はありますか？また、イタリック/ボールドのアプローチで十分か、さらに差別化（背景色など）を行うとレイアウトがよりユーザーフレンドリーになるかどうかもわかりません。
状態の切り替え/チェック解除ではなく、入力と出力を別々に定義する（マウスの左/右ボタンでクリックする）必要があるのはなぜですか？プロパティの1つの状態を切り替えると、通常、結果のシステムは解決できません。したがって、システムは次のいずれかを行う必要があります。
a）結果を表示せず、ユーザーが入力/出力の有効な組み合わせを見つけるまで待機するか、b）解決可能なシステムを持つために状態を変更する必要がある他のプロパティを自分で決定します。
オプションa）は、多くの変数との適切な組み合わせを見つけるのがやや難しいため、不適切です。これは2番目のオプションにつながります。左/右クリックで、各プロパティのステータスは「強制的に入力」、「強制的に出力」、または「プログラムに決定させない」のいずれかになります。いいですね。ただし、一部のプロパティを変更した後、プログラムが変更するプロパティを認識できないポイントにも到達する可能性があります。
したがって、以下の画像に示すように、トグル/チェックボックス/チェックボタンソリューションを試してみます（プロパティ名は左側に配置されます）。変更するプロパティを決定するために、可能なすべての入力セットが生成され、ユーザーが行ったすべての状態変更がリストに保存されます。コンピュータが独自に状態を変更する必要がある場合、可能なセットを調べて、このリストにないプロパティを選択するか、最後に変更されたプロパティの状態を維持することを優先します。
親しみやすさ+クリアな状態
独創的なアイデアですが、左/右クリックは実際には慣れ親しんだ動作ではありません。新しいインタラクションがもたらすメリットが価値をもたらさない限り、これはしばしば望ましいことです。 この場合の主な問題は、編集状態の明確な表示がないことであると思います。これは、次のような視覚的なアーティファクトだけでは簡単に伝えることができません。色または他のそれほど明確ではない手がかり。
編集/ロックのための明示的なコントロールを提案します。簡単な解決策は、トグルスイッチまたはチェックボックスと視覚的な表示を使用することだと思います。他のグループ化、過剰分類などは、ユーザーを助けるよりも混乱させる可能性があります。例：
さらに：
- テキストが編集可能な場合は太字のテキストを使用し、読み取り専用の場合は通常のテキストを使用します。
- 特に断りのない限り、プロパティリストにはアルファベット順を使用します。
- 現在のアクティブな入力に依存するフィールドをハイライトに追加すると、ユーザーは変更ごとにどのパラメーターが影響を受けるかを知ることができます。
- あなたの質問とは別に、他のアイデアは、それらにすべてのプロパティをフィルターさせることです。 20個のプロパティがある場合は、20個ではなく5個または6個を気にする必要があります。ユーザーがこの機能を気にする場合は、さまざまなフィルターのセットを保存できるようにすることもできるため、ユーザーが行う必要はありません。プロパティのセットごとに、時間の経過とともにそれを繰り返します。
左クリックではできません。これにより、ユーザーが値をコピーする場合に値を選択できなくなります。
組み合わせの数によっては、ドロップダウンリストが機能する場合があります。
または、お互いをどのように除外するか（つまり、あるグループでは半径、体積、表面積、別のグループでは質量と密度）でパラメーターをグループ化し、ラジオボタンを追加します。
難しいステップをできるだけ簡単にしたい。この場合、これは、ユーザーが有効な入力セットをできるだけ簡単に選択できるようにすることを意味します。簡単にできれば、ユーザーは入力のセットを変更しようとするたびに有効な入力のセットを選択してもかまいません。また、入力セットの変更を開始してから有効な入力セットを選択するまでの間に、入力を設定できなくてもかまいません。
ユーザーが1つずつ入れ替えることで入力のセットを簡単に取得できる場合、スイッチのアイデアは良いものです。ただし、ユーザーがスイッチを押すたびに、ユーザーが入力を編集できないモード、または有効な入力セットにつながらないスイッチを使用できないモードに変更し、有効な入力セット、および「削除する入力を選択してください」または「追加する入力を選択してください」というメッセージを表示します。また、セクションを灰色にし、右上に大きな「キャンセル」ボタンまたはXを配置し、Escボタンを設定して変更をキャンセルします。これにより、システムの学習と有効な入力セットの選択が容易になります。
有効な入力セットの選択がさらに複雑な場合は、プロパティの表示/入力用のセクションから入力のセットを選択するためのセクションを分離できます。ユーザーは、クリックアンドドラッグリストを使用して入力を選択できます。また、ユーザーが無効な入力セットを選択するたびに候補を表示するスペースを置くこともできます。繰り返しますが、目的は、ユーザーがどの入力セットが合法であるかを簡単に確認できるようにすることです。ルールセットが複雑になる原因を知らない限り、具体的なアドバイスはできませんが、いくつかガイドラインを示します。
- 手順をできるだけ簡単にする
- それらをできるだけ浅くネストされた独立した命令に分割する
- 空白を使用して提案をグループ化し、句読点を最小限に抑える
- タグの垂直スタックを使用して、複数行の命令を回避する
私は少し遅れましたが、私の考慮事項のいくつかを共有したいと思います。
ユーザーが遭遇する可能性のある潜在的なユースケースについて考えるとき。最初にデータを入力し、次に特定のパラメーターを微調整したいユーザーをイメージできます。
球の例では、彼らは尋ねるかもしれません
- 「これは重すぎますか。マテリアルをより密度の高いものに変更しますか？」
- 「半径を2倍にする場合、どれだけのペイントが必要になりますか？」
- 「これを少し小さくすることで、どれだけの材料を節約できますか？」
これらのすべてのケースで、いくつかのパラメータ間に関係があります。これらのプロパティ間の関係は、制約システムを形成します。半径、体積、表面積はすべてサイズとスケールに比例して変化します。材料の密度と質量も比例して変化します。
制約を満たす方法を選択する方法をユーザーに提供します。質量を変更すると、密度またはサイズが変わるはずですか？入力レベルの切り替えに基づくソリューションは、「違法な」シナリオのため問題があります。質量や密度に影響を与えずにサイズを編集することはできません。
実際のシステムと実際の制約を知らずに正確な答えを出すことは困難です。
Adobeは、画像のサイズ変更ダイアログで同様の問題を解決しました。 CS6のこの例を参照してください（CCで少し再設計されました）。
Resample Imageチェックボックスは、ピクセル寸法、物理寸法、およびピクセル密度の間の制約を満たすことを制御します（Resolutionのラベルが付いています）。オンにすると、ピクセルのピクセル寸法調整は密度ではなく物理サイズに影響します（逆も同様です）。チェックされていない場合、ピクセルの寸法はロックされ、Resolutionパラメータを調整できます。
アスペクト比は可変であるため、ユーザーは幅と高さの切り替えのスケーリングを一緒にロックできます。この種のシナリオは球には存在しません（πの値を変更することはできません）。
Photoshopダイアログの私の記憶が正確であることを願っています。私が最後にそれを使用してからしばらく経ちましたが、私は先行技術の例としてそれを含めたかったです。
すべてのフィールドを入力として設定します。
ユーザーはデータを入力し、他のフィールドは空白のままにします。
空白のフィールドは出力を意味し、フィールドの値は入力を意味します。
プログラムは不足しているフィールドを計算したり、データが不十分または競合している場合はエラーメッセージを表示したりできます。
また、出力では、ユーザーが入力したパラメーターをグレー表示し、計算されたパラメーターを白にします。
これは、ユーザーが計算されたパラメーターを望んでいるためです。それらを強調表示すると、見つけやすくなります。
すべてのフィールドを入力フィールドのままにします。ユーザーの入力順序を追跡し、最後の入力によって結果を計算します-可能な最小値を使用します。エラー（ユーザーが入力および計算した値）をスタイル（フォント、色、または類似の視覚的手掛かり）ごとに分けます。
私のアイデアを説明するために、W（幅）、H（高さ）、S（面積）の3つのフィールドがあるとします。
- ステップ1：ユーザーがWを変更する-計算するのに十分なデータがない
- ステップ2：ユーザーがHを変更すると、以前の入力はWであったことがわかります-これらを乗算して結果をSボックスに表示します（スタイルを変更します）。
- ステップ3：ユーザーがSを変更すると、以前の入力がHであったことがわかります-Wを計算して表示します（そしてスタイルを変更します）
- ステップ4：続行:)