web-dev-qa-db-ja.com

送信中にユーザーがフォームを再送信/編集できないようにするユーザーフレンドリーな方法は何ですか?

フォームの送信中に再利用可能なフォームへのユーザー入力をブロックする最もユーザーフレンドリーな方法は何ですか。つまり、フォームごとに実装する必要はありませんか?

ボタンのみのフォームの場合(私はSE投票に似た投票システム、投票数、投票ダウンを持っています):

  • ボタン/リンクを無効にして、何が起こっているのかをユーザーに知ってもらいたいですか?
  • スピナーなどを配置して、ボタンの近くのどこかにボタンをブロックしますか?
  • ボタンをスピナー、表示ボタンに置​​き換え、ブロック解除時にスピナーを削除しますか?

通常のフォームの場合:

  • フォームをオーバーレイして、スピナーを途中または一部の読み込みテキストに配置する必要がありますか(フォームはコンテナーのサイズが異なる可能性があるため、これはIMOのように見えます)。
  • モスポインタをスピナーに変更する必要がありますか?
  • すべてのフィールド/ボタンなどを無効にしますか?
24
formatc

ボタン用

ボタンをフォーム送信インジケータに変換する 優れた例 を確認することを強くお勧めします。

enter image description here

ここには、関連する進行状況ボタンを表示する、興味深いリソースがいくつかあります。

ラダー

ロダボタン

ただし、ユーザーがボタンを操作しようとしていることを懸念している場合は、ボタンを無効にすることができます。ボタンを無効にすると、ボタンでこれ以上何もできないというアフォーダンスが得られます

フォームの場合

したがって、コメントによる会話では、フォームの送信が行われているために対話を実行できないことをユーザーに通知する何らかの対話またはオーバーレイが必要です。

私の推奨は、処理が進行中であり、すぐに結果が得られることをユーザーに通知するメッセージでオーバーレイを表示することです。以下に示すように、Twitterハンドルの履歴を処理しているときに http://Tweet.grader.com のように興味深いアニメーションを組み込むこの例は、良い例でしょう。

enter image description here

これは iPad用のフライトトラッカー は、以下に示すように飛行機の飛行を示す興味深いシミュレーションを使用します。

enter image description here

Orbitz フォームの送信時に、コンテンツが送信中であることをユーザーに知らせるための回転インジケーターが表示され、以下に示すようにユーザーは待機する必要があります

enter image description here

29
Mervin

あなたがしようとしているのは、次のような視覚的なフィードバックを提供することです。

  1. ユーザーがボタンをクリックした
  2. あなたはそのクリックを受けました、そして
  3. 魔法が結果をもたらすために起こっています。

ボタンを無効にすると、最初の2つの目標が達成されました。 Mervinリストの項目は、3番目の目標を達成するための良い方法です。

最も単純な応答はボタンを1回クリックしたらボタンを無効にします。他のロード/進行状況バーやアニメーション(Mervinのようなもの)を追加できますが、それらはありません必要。

5
Hynes

ユーザーに送信されるフォームの一部としてトランザクション番号を提供することはごく一般的なことなので、彼らが同じフォームを再度POSTした場合、これを検出して拒否することができます。

(POSTがJavaからのものである場合、これは特に重要です。Javaには既知のバグがあり、GETがべき等であるときに誰かがそれを忘れてしまった場合、つまり、同じGETを続けて数回発行しても安全であると約束されています-POSTはそうではありません。その結果、サーバーの応答が遅い場合、JavaのPOSTコードがトランザクションを再送信しても、ユーザーはそのように言っていません。Sun/ Oracleは、誰かがどこかで壊れた動作に依存しているのではないかと恐れてこれを修正することを拒否しました。そのバグを無効にするように設定できるシステムプロパティがあります。そうですが、意図しないrePOSTを認識するようにシステムを設計することは、もう1つの正当な理由です。)

2
keshlam