web-dev-qa-db-ja.com

ユーザーが変更を加えずにフォームを送信できないようにする方法

選択範囲が元の状態から変更されていないフォームをユーザーが送信できないようにしたいと思います。

例:
enter image description here

上記のワイヤーフレームで、ユーザーがこのフォームを表示すると、最初に選択されたオプションは オプション1。ユーザーがオプションを変更しなかったため、 セーブ ボタン。ユーザーが選択した場合 オプション2、 セーブ ボタンが有効になります。

なぜユーザーが混乱するのか心配です セーブ ボタンは無効になっていますが、変更のないフォームを送信しないようにするための最良の解決策になる場合があります。

考え?

編集:

問題を解決できる可能性があると私が考えたデザインを思いつきましたが、開発者は無効に見えるテキストは実際には意味がないと述べました。 UX-ersからの入力を取得する方が良いかもしれません!

enter image description hereenter image description here

3
Yeezy

これは問題なく許容できる動作です。だが:

一般的な選択肢は次のとおりです。

  1. ユーザーが保存を押すことを許可する。無効にされたボタンはユーザーをイライラさせる可能性があり、結局のところ、既存のオプションを再保存するだけで害はありません。これにより、ユーザーがオプション2(保存ボタンを有効にする)を選択し、オプション1を再度選択するという厄介なケースも修正されます(ボタンを再度無効にしますか?混乱する可能性がある場合、フォームの動作に一貫性がありません)。 。

  2. 送信ボタンを無効にしますが、ユーザーに通知します。ユーザーが保存ボタンをクリックした場合は、ボタンの下に通知を表示して、選択を変更していないことをユーザーに通知します。

  3. ユーザーがフォームを変更しない限り、送信ボタンを非表示にします。送信アクションのないフォームは混乱を招くため、これは古いパターンです。私が入らないコーナーケースを除いてそれを使用しないでください。

無効にされたコントロールはユーザーの混乱を招く可能性があるため、私は#1を強く好みます。一貫した形式(UXの一貫性)を用意し、自分で処理することで複雑さを隠すのが良いでしょう。

3
tohster

変更オプションを明示的にする

たとえば、オプション1が既存の選択肢で、他に4つのオプションがある場合

レイアウトは

あなたの現在の選択は

オプション1(x)

への変更.....

オプション2()オプション3()

変更を明確にし、認知負荷を軽減します

どのように表示するかは、プログラミングのオーバーヘッド(ソート順など)によって異なります。

また色を作ることによって。たとえば、選択boが強調表示されている、緑色に着色されているなど

保存ボタンは、変更リクエストが行われた場合にのみアクティブになります

0
Manoj Chawla

ユーザーが選択を変更する必要がある場合、ユーザーが選択を保持したいときに保存/送信を無効にすることは最適なエクスペリエンスではない可能性があります。

いくつかの代替戦略は次のとおりです。

  1. ボタンを[保存]に表示してから送信すると、ユーザーがオプション1を保持したい場合は、明示的に確認できます。ユーザーがオプション2に変更したい場合は、送信する前に保存確認も表示されます。ただし、これはユーザーが再び考えを変える可能性がある場合にも混乱するため、お勧めできません。
  2. ユーザーが選択を変更しない場合、ユーザーが保存/送信をクリックすると、変更を行うかどうかを確認するダイアログが表示され、選択を保持するかどうかの確認を得ることができます。
  3. 以前の選択を表示しますが、ラジオボタンの選択状態をクリアし、オプション1または2を明示的に選択できるようにします。
0
Michael Lai

私はあなたの問題を理解したかどうかはわかりませんが、とにかく2つの解決策があります。

  1. オプション2の確認のようなチェックボックスを使用すると、ユーザーはチェックを強制されます(required属性が存在する場合、最新のブラウザはプロンプトを追加します)。これは、注文を完了するために利用規約を受け入れる必要がある多くのWebサイトで見られます。
  2. 使用する <input type="submit" ... >または<button type="submit"> ... </button>各オプション(name"... "属性を使用して選択肢を区別します)。そのため、ユーザーはオプションをクリックしてオプションを選択する必要があります。
0
A.L