選択範囲が元の状態から変更されていないフォームをユーザーが送信できないようにしたいと思います。
例:
上記のワイヤーフレームで、ユーザーがこのフォームを表示すると、最初に選択されたオプションは オプション1。ユーザーがオプションを変更しなかったため、 セーブ ボタン。ユーザーが選択した場合 オプション2、 セーブ ボタンが有効になります。
なぜユーザーが混乱するのか心配です セーブ ボタンは無効になっていますが、変更のないフォームを送信しないようにするための最良の解決策になる場合があります。
考え?
問題を解決できる可能性があると私が考えたデザインを思いつきましたが、開発者は無効に見えるテキストは実際には意味がないと述べました。 UX-ersからの入力を取得する方が良いかもしれません!
これは問題なく許容できる動作です。だが:
一般的な選択肢は次のとおりです。
ユーザーが保存を押すことを許可する。無効にされたボタンはユーザーをイライラさせる可能性があり、結局のところ、既存のオプションを再保存するだけで害はありません。これにより、ユーザーがオプション2(保存ボタンを有効にする)を選択し、オプション1を再度選択するという厄介なケースも修正されます(ボタンを再度無効にしますか?混乱する可能性がある場合、フォームの動作に一貫性がありません)。 。
送信ボタンを無効にしますが、ユーザーに通知します。ユーザーが保存ボタンをクリックした場合は、ボタンの下に通知を表示して、選択を変更していないことをユーザーに通知します。
ユーザーがフォームを変更しない限り、送信ボタンを非表示にします。送信アクションのないフォームは混乱を招くため、これは古いパターンです。私が入らないコーナーケースを除いてそれを使用しないでください。
無効にされたコントロールはユーザーの混乱を招く可能性があるため、私は#1を強く好みます。一貫した形式(UXの一貫性)を用意し、自分で処理することで複雑さを隠すのが良いでしょう。
変更オプションを明示的にする
たとえば、オプション1が既存の選択肢で、他に4つのオプションがある場合
レイアウトは
あなたの現在の選択は
オプション1(x)
への変更.....
オプション2()オプション3()
等
変更を明確にし、認知負荷を軽減します
どのように表示するかは、プログラミングのオーバーヘッド(ソート順など)によって異なります。
また色を作ることによって。たとえば、選択boが強調表示されている、緑色に着色されているなど
保存ボタンは、変更リクエストが行われた場合にのみアクティブになります
ユーザーが選択を変更する必要がある場合、ユーザーが選択を保持したいときに保存/送信を無効にすることは最適なエクスペリエンスではない可能性があります。
いくつかの代替戦略は次のとおりです。
私はあなたの問題を理解したかどうかはわかりませんが、とにかく2つの解決策があります。
required
属性が存在する場合、最新のブラウザはプロンプトを追加します)。これは、注文を完了するために利用規約を受け入れる必要がある多くのWebサイトで見られます。<input type="submit" ... >
または<button type="submit"> ... </button>
各オプション(name"... "
属性を使用して選択肢を区別します)。そのため、ユーザーはオプションをクリックしてオプションを選択する必要があります。