条件付きフィールドを表示する最良の方法は何ですか？

Question

（ビジネス）ユーザーが契約を入力できるデスクトップアプリを作成しています。問題は、契約フォームに非常に多くのフィールドが含まれており、その一部は条件付きであるということです。例は次のとおりです。

契約は「オープン」または「固定」にすることができます
契約が「固定」の場合、ユーザーは期間（年数）を追加で入力する必要があります。彼らはカレンダーを使用しておらず、数字を入力するだけです。

問題は、ユーザーにとってフォームをできるだけシンプルにしたいということです。多くのフィールドがあるので、アプリがバックグラウンドで実行できることは多ければ多いほど良いです...しかし、そのような条件付きフィールドは複雑さを増します。

私が思いついたのは：

通常、画面1と2に表示される追加フィールドを表示/非表示にします。選択は非常に明白ですが、フォームは上下にジャンプします。いくつかのラジオボタン（2-3）がある場合にも機能します。しかし、ラジオボタンの数が多いと、バラバラになります。
2つのラジオボタンをチェックボックス+編集に変換します（画面3）。フォームはすっきりしているように見えますが、「未チェック」が「オープン」を意味し、「チェック」が「固定期間」を意味することはそれほど明白ではありません。また、常に可能であるとは限りません。

enter image description here

そのような条件付きフィールドの最良のプレゼンテーションは何だと思いますか？このフォームにはそのようなケースが数多くありますが、私は優れた一般的な解決策を考え出します。それとも他のアイデアがありますか？ネットで例を検索しましたが、見つかりませんでした...

paparazzo · Accepted Answer

スペースをより有効に活用でき、画面がジャンプする必要がないと思います
何年もそれほど多くのスペースは必要ありません
年が表示されているのは、[Fixed]がチェックされている場合にのみ表示され、年のテキストは灰色で表示されるため、指示のように見えます

スクリーンジャンプについては、年を表示から非表示に切り替えます（折りたたまれていません）。
異なる言語は異なる動詞を使用しますが、画面がジャンプしないように隠された予約スペースがあります

mockup

^{download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム}

Evil Closet Monkey · Answer

すべてのフィールドを一度に表示する場合は、関係を示すようにフィールドをグループ化することが重要です。現在の選択を考慮して関連性のない項目をdisableすることを忘れないでください。また、入力フィールドに単位（つまり、「年」）があることを確認してください。

mockup

^{download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム}

視覚的に適切であれば、フォームを少し圧縮できます。

mockup

^{bmmlソースをダウンロード}

これは比較的明確であり、ユーザーはラジオボタンとテキスト入力フィールドの関係を簡単に理解できます。しかし、ユーザーが期間を設定し、それを「オープン」に戻すとどうなりますか？

mockup

^{bmmlソースをダウンロード}

これは、フォームをすばやくスキャンしてフォームから情報を引き出すユーザーを混乱させる可能性があります。解決策は、期間フィールドをクリアすることですが、ユーザーに対して明示的に要求されていないアクション（通常は眉をひそめる）を実行しています。

通常、ユーザーにのみ関連するフィールドを表示することをお勧めします。これはモバイルではより重要になりますが、デスクトップアプリケーションでも有効です。アイデアは、ユーザーがデフォルトで必要としないアイテムを公開しないことです。

mockup

^{bmmlソースをダウンロード}

LukeW これについて説明するビデオがあります： http://www.lukew.com/ff/entry.asp?1896

具体的なディスカッションについては、2：30のタイムマークを確認してください。彼はまた、無関係なフォームコントロールを隠すことが研究で示されたことを呼びかけています：

入力がより速いフォームを作成する
エラーが少ない
より満足をもたらす

オプションをセンテンス構造で提示すると、ユーザーが最終製品のコンテキストでオプションを確認しやすくなります。

mockup

^{bmmlソースをダウンロード}

フォームの全体的な流れは、これらすべてにおいて同様に重要です。あなたはそれがあなたのユーザーの言語と彼らが日常的にデータを処理する方法のために機能することを確認する必要があります。たとえば、これを1度だけ入力する人と、このフォームに1日に数回記入する必要がある人とでは非常に異なる場合に対処します。

nightning · Answer

過去に同様の状況に遭遇しました。垂直方向のフォームデザインで解決し、フィールドを次のように配置しました。

mockup

^{download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム}

厳密なデータ入力を行っている場合は、垂直フォームの処理が最も高速です。したがって、機能する可能性のあるフォーム構造を再設計できる場合。

そうでない場合、オプション1はオプション2よりも優れています。というのは、あなたが言ったように、チェックされていないことが「オープンコントラクト」を意味するかどうかは明確ではありません。オプション1の「表示/非表示」アニメーションは、2つが関連していることを明確にする必要があります。また、ラベルを「期間」から「期間」に変更すると、2つのフィールドが関連していることがさらに明確になります。

rr1g0 · Answer

フォームの一般的なルールは "できるだけ短くしてください" です。

私は最初のものがそれで最もうまくいくと思います、あなたが持つ唯一の問題は、ラジオボタンが多すぎる場合です、その場合、ラジオボタンの利点が失われると感じたときにドロップダウンに変更が多すぎる場合です。また、ニースのアニメーションは、それを理解するのに役立ちます。

また、それらを必要としないユーザーが混乱する可能性のあるフィールドも回避するため、ユーザーは、フィールドが必要かどうかを考える必要がなく、ユーザーのためにそれを行います。

KyleMit · Answer

なぜ

この素晴らしいガイドによると 58フォームデザインのベストプラクティスとフォームUXの例 ：

条件付きロジックを使用してフォームを短くする

条件付きロジック（「分岐ロジック」とも呼ばれます）は、ユーザーが前の質問に特定の方法で回答した場合にのみ質問を表示する場所です。

この手法は、フォームの平均の長さを減らしますと同時に、特定のユーザーに関係のない可能性のある質問を表示しないことで、フォームの破棄を減らします。