web-dev-qa-db-ja.com

フォームフィールドの表示/非表示と有効化/無効化

「依存フィールド」のフォームデザインに関するメリットとデメリットを知りたい。たとえば、私のフォームにはMarital Statusフィールドがあり、その値に応じて、パートナー文書番号およびパートナー名

  • 婚姻状況の選択に応じて、パートナーのフィールドを表示し、その場で表示するnotの利点/欠点は何ですか?

vs.

  • フォームのフィールドを無効にして、他のフィールドの選択で有効にする利点/欠点は何ですか?

また、問題の他の解決策がいただければ幸いです。

フォームは、Webサイトではなく、ビジネスWebアプリケーション用のWebフォームです。

9
RMalke

あなたが本当に求めているのは、Webフォームデザインにおける プログレッシブ開示 の利点とリスクは何ですか。

利点

プログレッシブ開示を使用する利点は、タスクを完了するために必要なフィールドのみを表示することにより、ユーザーの認知的負荷を軽減できることです。より多くのデータを入力すると、より多くのフィールドが必要になる場合がありますが、タスクの完了に必要な場合にのみ、それらのフィールドを調べて解釈する必要があります。

Jakob Nielsen のように書きます:

プログレッシブ開示で設計されたシステムでは、何かが初期ディスプレイに表示されるという事実自体が、それが重要であることをユーザーに知らせます。

[...]

プログレッシブ開示[...]は、3つの ユーザビリティの5つのコンポーネント を改善します:学習可能性、使用効率、およびエラー率。

その他 利点 漸進的開示の場合:

  • クリーンでシンプルで生産性の高いインターフェース(小さなディスプレイの天の恵み)
  • 最も一般的な機能に最初の焦点を当てることにより、重要なコンテンツが優先されます
  • 重要度の低いコンテンツは、訪問者を混乱させないように非表示にします
  • スクロールが削減され、必要な更新が少なくなれば、時間を節約できます
  • 初心者ユーザーがより簡単で管理しやすい手順を実行するため、エラーの発生が少なくなります

欠点

ただし、このアプローチの欠点は、設計と実装にあります。

Luke Wroblewski は、この状況に適用される特定のCharles Mingusの引用が好きです。

「単純なものを複雑にするのは当たり前のことです。複雑でシンプル、驚くほどシンプル、それが創造性です。」

X Mattersの記事 で、彼は単純さの複雑さについて書いています。プログレッシブ開示は、または彼がそれを「段階的なエンゲージメント」と呼んでいるように、複雑なワークフローをユーザーが簡単に「知覚」できる方法です。この認識を実現するのは難しいです。

適切なユーザーに適切なユーザーインターフェイスを適切なタイミングで表示するには、複数のタイプのユーザーとそのさまざまな状態を追跡し、それらのコンテキストを機能とコンテンツの適切なプレゼンテーションにマッピングする必要があります。もちろん、これは重要な課題であり、その結果、多くの場合不十分に行われます。ロジックが完全に検討されていないと、オプションが多すぎるユーザーもいれば、オプションが少なすぎると感じるユーザーもいます。

その他 欠点 含まれるもの:

  • スクリーンリーダーがページセクションに移動するのを支援する場合など、アクセシビリティは扱いにくい場合があります。
  • プリロードコンテンツのサイズが原因で、ページのロード時間が長くなる可能性があります
  • JavaScript(Ajax)、CSS3、またはFlashなどのクライアント側のテクノロジーは、ユーザーによって無効にされる可能性があります(そのため、開発時間を増加させる可能性のある優雅な低下を考慮する必要があります)

良いニュース

プログレッシブ開示の主な欠点は、トランザクションフォームではなく、アプリケーションまたは複雑な相互作用で最も顕著になることです。

あなたのケースでは、特定の状態が存在する場合にのみ必要な必須フィールドについて説明しています。 「適切なタイミングで」「適切なユーザー」が「適切なユーザー」のために何であるかを定義することに問題はありません。ビジネスルールは、これらすべての質問に明確に答える必要があります。

アクセシビリティ、ページの読み込み、およびクライアント側のテクノロジに関する実装の課題を軽減し、テストすることができます。

更新

  • これが 関連する質問 で、このトピックに関する追加の洞察/意見があります。

  • ここに another といい Joel Sposky 引用があります:

    昔、メニューアイテムを使用できないときに無効にすることは、ファッショナブルになり、推奨されました。

    これを行わないでください。ユーザーには、クリックしたい無効なメニュー項目が表示され、メニュー項目を機能させるために何をすべきかまったくわからないままです。

    代わりに、メニュー項目を有効のままにします。何らかの理由でアクションを完了できない場合、メニュー項目は、ユーザーに理由を伝えるメッセージを表示できます。

19
Charles Wesley

それらを表示または非表示にする代わりの方法を検討してください。

それらを表示しないことの欠点は、ユーザーがフォームがクイックスクロールに基づいている時間の長さを正確に把握できないことです。それらを表示すると、フォームが扱いにくくなり、求めているものの本質を圧倒する可能性があります。

おそらく、小さなサブフィールドが各メインフォームフィールドの下でより多くの情報が要求されることを伝える大まかな画像のように、すべてのフィールドをすぐに表示するという欠点のない中立的なアプローチが機能する可能性があります。

enter image description here

3
Mark Gavagan

あなたが説明するように値条件領域(別名 選択依存入力 )がある場合、私がお勧めする基本的なルールは次のとおりです。

入力に依存するフィールドのセットが1つしかない場合のフィールドを無効にします。これにより、ユーザーが制御フィールドの特定の値(あなたの場合は婚姻状況)を選択または提供したときに期待できることをユーザーにプレビューできます。奇妙な空のスペースや他のフィールドが自発的にスライドしてスペースを確保することなく、フォームを視覚的に安定させるため、フィールドを非表示にするよりも優れています。フィールドを有効にしたままにするよりも、ユーザーが無効になっているフィールドをスキップして、適用するかどうかを調べる必要がないので、精神的にスキップすることができます。

入力に依存するフィールドの代替セットがある場合は、フィールドを非表示にします。つまり、ユーザーの入力に応じてreplace一部のフィールドを他のフィールドに置き換える場合は、該当しないフィールドを非表示にします。フィールドを交換しているため、フォームは比較的安定しています。一度にすべてを適用できない多くのフィールドでフォームが乱雑にならないようにするため、無効にすることをお勧めします。

いつものように、灰色の領域があります。たとえば、1つの選択に1つの入力依存フィールドがあり、別の選択に4つの入力依存フィールドがある場合、無効化を使用して安定性を維持し、プレビューを提供することをお勧めします。煩雑なコストはかなり低いです。

Controlling Your Controls で、無効化と非表示*について知りたいことがすべてあります。

*しかし、尋ねることを恐れていました。

1